diff options
Diffstat (limited to 'src/client/views/DocumentDecorations.tsx')
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 80 |
1 files changed, 40 insertions, 40 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b93df36eb..8bcc1cb56 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -77,7 +77,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp const center = {x: (this.Bounds.x+this.Bounds.r)/2, y: (this.Bounds.y+this.Bounds.b)/2}; const {x,y} = Utils.rotPt(e.clientX - center.x, e.clientY - center.y, - NumCast(SelectionManager.Views().lastElement()?.screenToLocalTransform().Rotate)); + NumCast(SelectionManager.Views.lastElement()?.screenToLocalTransform().Rotate)); (this._showNothing = !(this.Bounds.x !== Number.MAX_VALUE && // (this.Bounds.x > center.x+x || this.Bounds.r < center.x+x || this.Bounds.y > center.y+y || this.Bounds.b < center.y+y ))); @@ -99,7 +99,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp @computed get Bounds() { return (LinkFollower.IsFollowing || DocumentView.ExploreMode) ? { x: 0, y: 0, r: 0, b: 0 } - : SelectionManager.Views() + : SelectionManager.Views .filter(dv => dv._props.renderDepth > 0) .map(dv => dv.getBounds()) .reduce((bounds, rect) => !rect ? bounds @@ -107,7 +107,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp y: Math.min(rect.top, bounds.y), r: Math.max(rect.right, bounds.r), b: Math.max(rect.bottom, bounds.b), - c: SelectionManager.Views().length === 1 ? rect.center : undefined }, + c: SelectionManager.Views.length === 1 ? rect.center : undefined }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as { X: number; Y: number } | undefined }); // prettier-ignore } @@ -121,7 +121,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp UndoManager.RunInBatch( () => titleFieldKey && - SelectionManager.Views().forEach(d => { + SelectionManager.Views.forEach(d => { if (titleFieldKey === 'title') { d.dataDoc.title_custom = !this._accumulatedTitle.startsWith('-'); if (StrCast(d.Document.title).startsWith('@') && !this._accumulatedTitle.startsWith('@')) { @@ -165,7 +165,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp }; onContainerDown = (e: React.PointerEvent) => { - const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views()[0].Document); + const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views[0].Document); if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) { setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), emptyFunction, emptyFunction); e.stopPropagation(); @@ -173,7 +173,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp }; onTitleDown = (e: React.PointerEvent) => { - const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views()[0].Document); + const effectiveLayoutAcl = GetEffectiveAcl(SelectionManager.Views[0].Document); if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) { setupMoveUpEvents( this, @@ -196,17 +196,17 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp }; @action onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => { - const dragDocView = SelectionManager.Views()[0]; + const dragDocView = SelectionManager.Views[0]; const effectiveLayoutAcl = GetEffectiveAcl(dragDocView.Document); if (effectiveLayoutAcl != AclAdmin && effectiveLayoutAcl != AclEdit && effectiveLayoutAcl != AclAugment) { return false; } const containers = new Set<Doc | undefined>(); - SelectionManager.Views().forEach(v => containers.add(DocCast(v.Document.embedContainer))); + SelectionManager.Views.forEach(v => containers.add(DocCast(v.Document.embedContainer))); if (containers.size > 1) return false; const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 }; const dragData = new DragManager.DocumentDragData( - SelectionManager.Views().map(dv => dv.Document), + SelectionManager.Views.map(dv => dv.Document), dragDocView._props.dropAction ); dragData.offset = dragDocView._props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top); @@ -216,7 +216,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp dragData.canEmbed = dragTitle; this._hidden = true; DragManager.StartDocumentDrag( - SelectionManager.Views().map(dv => dv.ContentDiv!), + SelectionManager.Views.map(dv => dv.ContentDiv!), dragData, e.x, e.y, @@ -231,7 +231,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp _deleteAfterIconify = false; _iconifyBatch: UndoManager.Batch | undefined; onCloseClick = (forceDeleteOrIconify: boolean | undefined) => { - const views = SelectionManager.Views().filter(v => v && v._props.renderDepth > 0); + const views = SelectionManager.Views.filter(v => v && v._props.renderDepth > 0); if (forceDeleteOrIconify === false && this._iconifyBatch) return; this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false; var iconifyingCount = views.length; @@ -264,11 +264,11 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp }; onMaximizeDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, () => DragManager.StartWindowDrag?.(e, [SelectionManager.Views().lastElement().Document]) ?? false, emptyFunction, this.onMaximizeClick, false, false); + setupMoveUpEvents(this, e, () => DragManager.StartWindowDrag?.(e, [SelectionManager.Views.lastElement().Document]) ?? false, emptyFunction, this.onMaximizeClick, false, false); e.stopPropagation(); }; onMaximizeClick = (e: any): void => { - const selectedDocs = SelectionManager.Views(); + const selectedDocs = SelectionManager.Views; if (selectedDocs.length) { if (e.ctrlKey) { // open an embedding in a new tab with Ctrl Key @@ -300,11 +300,11 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp }; onIconifyClick = (): void => { - SelectionManager.Views().forEach(dv => dv?.iconify()); + SelectionManager.Views.forEach(dv => dv?.iconify()); SelectionManager.DeselectAll(); }; - onSelectContainerDocClick = () => SelectionManager.Views()?.[0]?._props.docViewPath?.().lastElement()?.select(false); + onSelectContainerDocClick = () => SelectionManager.Views?.[0]?._props.docViewPath?.().lastElement()?.select(false); /** * sets up events when user clicks on the border radius editor */ @@ -319,7 +319,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp const [x, y] = [this.Bounds.x + 3, this.Bounds.y + 3]; const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2); const dist = e.clientX < x && e.clientY < y ? 0 : Math.sqrt((e.clientX - x) * (e.clientX - x) + (e.clientY - y) * (e.clientY - y)); - SelectionManager.Docs().map(doc => { + SelectionManager.Docs.map(doc => { const docMax = Math.min(NumCast(doc.width) / 2, NumCast(doc.height) / 2); const radius = Math.min(1, dist / maxDist) * docMax; // set radius based on ratio of drag distance to half diagonal distance of bounding box doc.layout_borderRounding = `${radius}px`; @@ -344,7 +344,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp returnFalse, // don't care about move or up event, emptyFunction, // just care about whether we get a click event e => UndoManager.RunInBatch( - () => SelectionManager.Docs().forEach(doc => + () => SelectionManager.Docs.forEach(doc => doc._pointerEvents = (doc._lockedPosition = !doc._lockedPosition)? 'none' : undefined ), 'toggleBackground' ) // prettier-ignore ); @@ -362,7 +362,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp @action onRotateCenterDown = (e: React.PointerEvent): void => { this._isRotating = true; - const seldocview = SelectionManager.Views()[0]; + const seldocview = SelectionManager.Views[0]; setupMoveUpEvents( this, e, @@ -378,11 +378,11 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp this._isRotating = true; const rcScreen = { X: this.rotCenter[0], Y: this.rotCenter[1] }; const rotateUndo = UndoManager.StartBatch('drag rotation'); - const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke); + const selectedInk = SelectionManager.Views.filter(i => i.ComponentView instanceof InkingStroke); const centerPoint = this.rotCenter.slice(); const infos = new Map<Doc, { unrotatedDocPos: { x: number; y: number }; startRotCtr: { x: number; y: number }; accumRot: number }>(); - const seldocview = SelectionManager.Views()[0]; - SelectionManager.Views().forEach(dv => { + const seldocview = SelectionManager.Views[0]; + SelectionManager.Views.forEach(dv => { const accumRot = (NumCast(dv.Document._rotation) / 180) * Math.PI; const localRotCtr = dv._props.ScreenToLocalTransform().transformPoint(rcScreen.X, rcScreen.Y); const localRotCtrOffset = [localRotCtr[0] - NumCast(dv.Document.width) / 2, localRotCtr[1] - NumCast(dv.Document.height) / 2]; @@ -391,7 +391,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp infos.set(dv.Document, { unrotatedDocPos, startRotCtr, accumRot }); }); const infoRot = (angle: number, isAbs = false) => { - SelectionManager.Views().forEach( + SelectionManager.Views.forEach( action(dv => { const { unrotatedDocPos, startRotCtr, accumRot } = infos.get(dv.Document)!; const endRotCtr = Utils.rotPt(startRotCtr.x, startRotCtr.y, isAbs ? angle : accumRot + angle); @@ -439,7 +439,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp @action onPointerDown = (e: React.PointerEvent): void => { - SnappingManager.SetIsResizing(SelectionManager.Docs().lastElement()); + SnappingManager.SetIsResizing(SelectionManager.Docs.lastElement()); setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); e.stopPropagation(); DocumentView.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them @@ -448,7 +448,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp this._offset = { x: this._resizeHdlId.toLowerCase().includes('left') ? bounds.right - e.clientX : bounds.left - e.clientX, y: this._resizeHdlId.toLowerCase().includes('top') ? bounds.bottom - e.clientY : bounds.top - e.clientY }; this._resizeUndo = UndoManager.StartBatch('drag resizing'); this._snapPt = { x: e.pageX, y: e.pageY }; - SelectionManager.Views().forEach(docView => docView.CollectionFreeFormView?.dragStarting(false, false)); + SelectionManager.Views.forEach(docView => docView.CollectionFreeFormView?.dragStarting(false, false)); }; projectDragToAspect = (e: PointerEvent, docView: DocumentView, fixedAspect: number) => { @@ -466,7 +466,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp return project([e.clientX + this._offset.x, e.clientY + this._offset.y], tl, [tl[0] + fixedAspect, tl[1] + 1]); }; onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => { - const first = SelectionManager.Views()[0]; + const first = SelectionManager.Views[0]; const effectiveAcl = GetEffectiveAcl(first.Document); if (!(effectiveAcl == AclAdmin || effectiveAcl == AclEdit || effectiveAcl == AclAugment)) return false; if (!first) return false; @@ -483,10 +483,10 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp !this._interactionLock && runInAction(async () => { // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate) this._interactionLock = true; this._snapPt = thisPt; - e.ctrlKey && (SelectionManager.Views().forEach(docView => !Doc.NativeHeight(docView.Document) && docView.toggleNativeDimensions())); - const fixedAspect = SelectionManager.Docs().some(this.hasFixedAspect); + e.ctrlKey && (SelectionManager.Views.forEach(docView => !Doc.NativeHeight(docView.Document) && docView.toggleNativeDimensions())); + const fixedAspect = SelectionManager.Docs.some(this.hasFixedAspect); const scaleAspect = {x:scale.x === 1 && fixedAspect ? scale.y : scale.x, y: scale.x !== 1 && fixedAspect ? scale.x : scale.y}; - SelectionManager.Views().forEach(docView => + SelectionManager.Views.forEach(docView => this.resizeView(docView, refPt, scaleAspect, { dragHdl, ctrlKey:e.ctrlKey })); // prettier-ignore await new Promise<any>(res => setTimeout(() => res(this._interactionLock = undefined))); }); // prettier-ignore @@ -600,7 +600,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp this._resizeUndo?.end(); // detect layout_autoHeight gesture and apply - SelectionManager.Docs().forEach(doc => NumCast(doc._height) < 20 && (doc._layout_autoHeight = true)); + SelectionManager.Docs.forEach(doc => NumCast(doc._height) < 20 && (doc._layout_autoHeight = true)); //need to change points for resize, or else rotation/control points will fail. this._inkDragDocs .map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] })) @@ -617,8 +617,8 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp @computed get selectionTitle(): string { - if (SelectionManager.Views().length === 1) { - const selected = SelectionManager.Views()[0]; + if (SelectionManager.Views.length === 1) { + const selected = SelectionManager.Views[0]; if (this._titleControlString.startsWith('=')) { return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.Document, this: selected.layoutDoc }, console.log).result?.toString() || ''; } @@ -627,11 +627,11 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp } return this._accumulatedTitle; } - return SelectionManager.Views().length > 1 ? '-multiple-' : '-unset-'; + return SelectionManager.Views.length > 1 ? '-multiple-' : '-unset-'; } @computed get rotCenter() { - const lastView = SelectionManager.Views().lastElement(); + const lastView = SelectionManager.Views.lastElement(); if (lastView) { const invXf = lastView._props.ScreenToLocalTransform().inverse(); const seldoc = lastView.layoutDoc; @@ -643,7 +643,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp render() { const { b, r, x, y } = this.Bounds; - const seldocview = SelectionManager.Views().lastElement(); + const seldocview = SelectionManager.Views.lastElement(); if (SnappingManager.IsDragging || r - x < 1 || x === Number.MAX_VALUE || !seldocview || this._hidden || isNaN(r) || isNaN(b) || isNaN(x) || isNaN(y)) { setTimeout(action(() => (this._showNothing = true))); return null; @@ -667,7 +667,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp hideDecorations || seldocview._props.hideOpenButton || seldocview.Document.layout_hideOpenButton || - SelectionManager.Views().some(docView => docView.Document._dragOnlyWithinContainer || docView.Document.isGroup || docView.Document.layout_hideOpenButton) || + SelectionManager.Views.some(docView => docView.Document._dragOnlyWithinContainer || docView.Document.isGroup || docView.Document.layout_hideOpenButton) || this._isRounding || this._isRotating; const hideDeleteButton = @@ -677,7 +677,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp this._isRotating || seldocview._props.hideDeleteButton || seldocview.Document.hideDeleteButton || - SelectionManager.Views().some(docView => { + SelectionManager.Views.some(docView => { const collectionAcl = docView._props.docViewPath()?.lastElement() ? GetEffectiveAcl(docView._props.docViewPath().lastElement().dataDoc) : AclEdit; return collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.Document) !== AclAdmin; }); @@ -692,7 +692,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp const bounds = this.ClippedBounds; const useLock = bounds.r - bounds.x > 135 && seldocview.CollectionFreeFormDocumentView; const useRotation = !hideResizers && seldocview.Document.type !== DocumentType.EQUATION && seldocview.CollectionFreeFormDocumentView; // when do we want an object to not rotate? - const rotation = SelectionManager.Views().length == 1 ? seldocview.screenToLocalTransform().inverse().RotateDeg : 0; + const rotation = SelectionManager.Views.length == 1 ? seldocview.screenToLocalTransform().inverse().RotateDeg : 0; // Radius constants const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView; @@ -754,7 +754,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp ); const centery = hideTitle ? 0 : this._titleHeight; const transformOrigin = `${50}% calc(50% + ${centery / 2}px)`; - const freeformDoc = SelectionManager.Views().some(v => v.CollectionFreeFormDocumentView); + const freeformDoc = SelectionManager.Views.some(v => v.CollectionFreeFormDocumentView); return ( <div className="documentDecorations" style={{ display: this._showNothing && !freeformDoc ? 'none' : undefined }}> <div @@ -767,7 +767,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp transformOrigin, background: SnappingManager.ShiftKey ? undefined : 'yellow', pointerEvents: SnappingManager.ShiftKey || DocumentView.Interacting ? 'none' : 'all', - display: SelectionManager.Views().length <= 1 || hideDecorations ? 'none' : undefined, + display: SelectionManager.Views.length <= 1 || hideDecorations ? 'none' : undefined, transform: `rotate(${rotation}deg)`, }} onPointerDown={this.onBackgroundDown} @@ -824,7 +824,7 @@ export class DocumentDecorations extends React.Component<DocumentDecorationsProp style={{ transform: `translate(${-this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `, }}> - <DocumentButtonBar views={SelectionManager.Views} /> + <DocumentButtonBar views={() => SelectionManager.Views} /> </div> )} </div> |