diff options
Diffstat (limited to 'src/client/views/DocumentDecorations.tsx')
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 67 |
1 files changed, 34 insertions, 33 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index dfcb6cda9..13eeaa3e7 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -25,6 +25,7 @@ import React = require("react"); import e = require('express'); import { CurrentUserUtils } from '../util/CurrentUserUtils'; import { InkStrokeProperties } from './InkStrokeProperties'; +import { KeyManager } from './GlobalKeyHandler'; @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -119,7 +120,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } } @action onTitleDown = (e: React.PointerEvent): void => { - setupMoveUpEvents(this, e, this.onBackgroundMove, (e) => { }, this.onTitleClick); + setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, this.onTitleClick); } @action onTitleClick = (e: PointerEvent): void => { !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString); @@ -128,22 +129,26 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } onBackgroundDown = (e: React.PointerEvent): void => { - setupMoveUpEvents(this, e, this.onBackgroundMove, (e) => { }, (e) => { }); + setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), (e) => { }, (e) => { }); } @action - onBackgroundMove = (e: PointerEvent, down: number[]): boolean => { + onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => { const dragDocView = SelectionManager.SelectedDocuments()[0]; const dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).inverse().transformPoint(0, 0); dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).transformDirection(e.x - left, e.y - top); dragData.moveDocument = dragDocView.props.moveDocument; dragData.isSelectionMove = true; + dragData.canEmbed = dragTitle; dragData.dropAction = dragDocView.props.dropAction; this.Interacting = true; this._hidden = true; DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(dv => dv.ContentDiv!), dragData, e.x, e.y, { - dragComplete: action(e => this._hidden = this.Interacting = false), + dragComplete: action(e => { + dragData.canEmbed && SelectionManager.DeselectAll(); + this._hidden = this.Interacting = false; + }), hideSource: true }); return true; @@ -172,19 +177,17 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const selectedDocs = SelectionManager.SelectedDocuments(); if (selectedDocs.length) { if (e.ctrlKey) { // open an alias in a new tab with Ctrl Key - const alias = Doc.MakeAlias(selectedDocs[0].props.Document); - alias.context = undefined; - //CollectionDockingView.Instance?.OpenFullScreen(selectedDocs[0]); - CollectionDockingView.AddSplit(alias, "right"); + selectedDocs[0].props.Document._fullScreenView = Doc.MakeAlias(selectedDocs[0].props.Document); + (selectedDocs[0].props.Document._fullScreenView as Doc).context = undefined; + CollectionDockingView.AddSplit(selectedDocs[0].props.Document._fullScreenView as Doc, "right"); } else if (e.shiftKey) { // open centered in a new workspace with Shift Key const alias = Doc.MakeAlias(selectedDocs[0].props.Document); alias.context = undefined; alias.x = -alias[WidthSym]() / 2; alias.y = -alias[HeightSym]() / 2; - //CollectionDockingView.Instance?.OpenFullScreen(selectedDocs[0]); CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right"); } else { // open same document in new tab - CollectionDockingView.ToggleSplit(selectedDocs[0].props.Document, "right"); + CollectionDockingView.ToggleSplit(Cast(selectedDocs[0].props.Document._fullScreenView, Doc, null) || selectedDocs[0].props.Document, "right"); } } } @@ -323,8 +326,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height) { this._inkDocs.push({ x: doc.x, y: doc.y, width: doc._width, height: doc._height }); if (InkStrokeProperties.Instance?._lock) { - doc._nativeHeight = doc._height; - doc._nativeWidth = doc._width; + Doc.SetNativeHeight(doc, doc._height); + Doc.SetNativeWidth(doc, doc._width); } } })); @@ -352,11 +355,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => { const first = SelectionManager.SelectedDocuments()[0]; let thisPt = { thisX: e.clientX - this._offX, thisY: e.clientY - this._offY }; - var fixedAspect = first.layoutDoc._nativeWidth ? NumCast(first.layoutDoc._nativeWidth) / NumCast(first.layoutDoc._nativeHeight) : 0; + var fixedAspect = Doc.NativeAspect(first.layoutDoc); SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { const doc = Document(element.rootDoc); if (doc.type === DocumentType.INK && doc._width && doc._height && InkStrokeProperties.Instance?._lock) { - fixedAspect = NumCast(doc._nativeWidth) / NumCast(doc._nativeHeight); + fixedAspect = Doc.NativeHeight(doc); } })); @@ -390,7 +393,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> ((element.rootDoc.type === DocumentType.RTF || element.rootDoc.type === DocumentType.COMPARISON || (element.rootDoc.type === DocumentType.WEB && Doc.LayoutField(element.rootDoc) instanceof HtmlField)) - && element.layoutDoc._nativeHeight) && element.toggleNativeDimensions())); + && Doc.NativeHeight(element.layoutDoc)) && element.toggleNativeDimensions())); switch (this._resizeHdlId) { case "": break; case "documentDecorations-topLeftResizer": @@ -436,17 +439,17 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } SelectionManager.SelectedDocuments().forEach(action((docView: DocumentView) => { - if (e.ctrlKey && !docView.props.Document._nativeHeight) docView.toggleNativeDimensions(); + if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions(); if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) { const doc = Document(docView.rootDoc); - let nwidth = returnVal(docView.NativeWidth?.(), doc._nativeWidth); - let nheight = returnVal(docView.NativeHeight?.(), doc._nativeHeight); + let nwidth = returnVal(docView.NativeWidth?.(), Doc.NativeWidth(doc)); + let nheight = returnVal(docView.NativeHeight?.(), Doc.NativeHeight(doc)); const width = (doc._width || 0); let height = (doc._height || (nheight / nwidth * width)); height = !height || isNaN(height) ? 20 : height; const scale = docView.props.ScreenToLocalTransform().Scale * docView.props.ContentScaling(); if (nwidth && nheight) { - if (nwidth / nheight !== width / height) { + if (nwidth / nheight !== width / height && !dragBottom) { height = nheight / nwidth * width; } if (e.ctrlKey || (!dragBottom || !docView.layoutDoc._fitWidth)) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction @@ -459,26 +462,23 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> doc.x = (doc.x || 0) + dX * (actualdW - width); doc.y = (doc.y || 0) + dY * (actualdH - height); const fixedAspect = (nwidth && nheight); - const fieldKey = docView.LayoutFieldKey; if (fixedAspect && (!nwidth || !nheight)) { - doc[DataSym][fieldKey + "-nativeWidth"] = doc._nativeWidth = nwidth = doc._width || 0; - doc[DataSym][fieldKey + "-nativeHeight"] = doc._nativeHeight = nheight = doc._height || 0; + doc._nativeWidth = nwidth = doc._width || 0; + doc._nativeHeight = nheight = doc._height || 0; } - const anno = Cast(doc.annotationOn, Doc, null); - if (e.ctrlKey && (anno || doc.type === DocumentType.IMG)) { + if (e.ctrlKey && [DocumentType.IMG, DocumentType.SCREENSHOT, DocumentType.VID].includes(doc.type as DocumentType)) { dW !== 0 && runInAction(() => { - const dataDoc = (anno ?? doc)[DataSym]; - const annoFieldKey = Doc.LayoutFieldKey(anno ?? doc); - const nw = NumCast(dataDoc[annoFieldKey + "-nativeWidth"]); - const nh = NumCast(dataDoc[annoFieldKey + "-nativeHeight"]); - dataDoc[annoFieldKey + "-nativeWidth"] = nw + (dW > 0 ? 10 : -10); - dataDoc[annoFieldKey + "-nativeHeight"] = nh + (dW > 0 ? 10 : -10) * nh / nw; + const dataDoc = doc[DataSym]; + const nw = Doc.NativeWidth(dataDoc); + const nh = Doc.NativeHeight(dataDoc); + Doc.SetNativeWidth(dataDoc, nw + (dW > 0 ? 10 : -10)); + Doc.SetNativeHeight(dataDoc, nh + (dW > 0 ? 10 : -10) * nh / nw); }); } else if (nwidth > 0 && nheight > 0) { if (Math.abs(dW) > Math.abs(dH) || dragRight) { if (!fixedAspect || (dragRight && e.ctrlKey)) { - doc[DataSym][fieldKey + "-nativeWidth"] = doc._nativeWidth = actualdW / (doc._width || 1) * (doc._nativeWidth || 0); + doc._nativeWidth = actualdW / (doc._width || 1) * Doc.NativeWidth(doc); } doc._width = actualdW; if (fixedAspect && !doc._fitWidth) doc._height = nheight / nwidth * doc._width; @@ -486,7 +486,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } else { if (!fixedAspect || (dragBottom && (e.ctrlKey || docView.layoutDoc._fitWidth))) { - doc[DataSym][fieldKey + "-nativeHeight"] = doc._nativeHeight = actualdH / (doc._height || 1) * (doc._nativeHeight || 0); + doc._nativeHeight = actualdH / (doc._height || 1) * Doc.NativeHeight(doc); } doc._height = actualdH; if (fixedAspect && !doc._fitWidth) doc._width = nwidth / nheight * doc._height; @@ -572,6 +572,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> "caret-up"; return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />; } + render() { const darkScheme = CurrentUserUtils.ActiveDashboard?.darkScheme ? "dimgray" : undefined; const bounds = this.Bounds; @@ -622,7 +623,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px", left: bounds.x - this._resizeBorderWidth / 2, top: bounds.y - this._resizeBorderWidth / 2, - pointerEvents: this.Interacting ? "none" : "all", + pointerEvents: KeyManager.Instance.ShiftPressed || this.Interacting ? "none" : "all", zIndex: SelectionManager.SelectedDocuments().length > 1 ? 900 : 0, }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} > </div> |