From 0dc39baf9630ae5aeaa41b89523ec6bf96d0b198 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 17 Nov 2023 21:53:36 -0500 Subject: major overhaul of resizing code. updated doc fields for enabling native with modification to be cleaner. added Vcenter option for text in menu bar. fixed doc rotation. enabled scaling of DataViz views. fixed text sidebar opening size and sidebar issues with native dims for PDF/Web --- src/client/views/DocumentDecorations.tsx | 312 +++++++++++++------------------ 1 file changed, 126 insertions(+), 186 deletions(-) (limited to 'src/client/views/DocumentDecorations.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 33886e791..8df5740fa 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -2,18 +2,17 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@material-ui/core'; import { IconButton } from 'browndash-components'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { FaUndo } from 'react-icons/fa'; -import { DateField } from '../../fields/DateField'; import { Doc, DocListCast, Field, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc'; import { AclAdmin, AclAugment, AclEdit, DocData } from '../../fields/DocSymbols'; import { InkField } from '../../fields/InkField'; import { RichTextField } from '../../fields/RichTextField'; import { ScriptField } from '../../fields/ScriptField'; -import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; import { GetEffectiveAcl } from '../../fields/util'; -import { aggregateBounds, emptyFunction, numberValue, returnFalse, setupMoveUpEvents, Utils } from '../../Utils'; +import { emptyFunction, numberValue, returnFalse, setupMoveUpEvents, Utils } from '../../Utils'; import { Docs } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; import { DocumentManager } from '../util/DocumentManager'; @@ -36,6 +35,7 @@ import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { ImageBox } from './nodes/ImageBox'; import React = require('react'); import _ = require('lodash'); +import { DateField } from '../../fields/DateField'; @observer export class DocumentDecorations extends React.Component<{ PanelWidth: number; PanelHeight: number; boundsLeft: number; boundsTop: number }, { value: string }> { @@ -46,11 +46,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P private _linkBoxHeight = 20 + 3; // link button height + margin private _titleHeight = 20; private _resizeUndo?: UndoManager.Batch; - private _offX = 0; - private _offY = 0; // offset from click pt to inner edge of resize border - private _snapX = 0; - private _snapY = 0; // last snapped location of resize border - private _dragHeights = new Map(); + private _offset = { x: 0, y: 0 }; // offset from click pt to inner edge of resize border + private _snapPt = { x: 0, y: 0 }; // last snapped location of resize border private _inkDragDocs: { doc: Doc; x: number; y: number; width: number; height: number }[] = []; @observable private _accumulatedTitle = ''; @@ -479,29 +476,24 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P 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 this._resizeHdlId = e.currentTarget.className; const bounds = e.currentTarget.getBoundingClientRect(); - this._offX = this._resizeHdlId.toLowerCase().includes('left') ? bounds.right - e.clientX : bounds.left - e.clientX; - this._offY = this._resizeHdlId.toLowerCase().includes('top') ? bounds.bottom - e.clientY : bounds.top - e.clientY; + 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._snapX = e.pageX; - this._snapY = e.pageY; - const ffviewSet = new Set(); - SelectionManager.Views().forEach(docView => { - docView.CollectionFreeFormView && ffviewSet.add(docView.CollectionFreeFormView); - this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) }); - }); - Array.from(ffviewSet).map(ffview => ffview.dragStarting(false, false)); + this._snapPt = { x: e.pageX, y: e.pageY }; + SelectionManager.Views().forEach(docView => docView.CollectionFreeFormView?.dragStarting(false, false)); }; + _lock: any; onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => { const first = SelectionManager.Views()[0]; const effectiveAcl = GetEffectiveAcl(first.rootDoc); if (!(effectiveAcl == AclAdmin || effectiveAcl == AclEdit || effectiveAcl == AclAugment)) return false; if (!first) return false; - let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY }; + let thisPt = { x: e.clientX - this._offset.x, y: e.clientY - this._offset.y }; var fixedAspect = Doc.NativeAspect(first.layoutDoc); + const dragHdl = this._resizeHdlId.split(' ')[0].replace('documentDecorations-', '').replace('Resizer', ''); - const resizeHdl = this._resizeHdlId.split(' ')[0]; - if (fixedAspect && (resizeHdl === 'documentDecorations-bottomRightResizer' || resizeHdl === 'documentDecorations-topLeftResizer')) { + // do snapping of drag point + if (fixedAspect && (dragHdl === 'bottomRight' || dragHdl === 'topLeft')) { // need to generalize for bl and tr drag handles const project = (p: number[], a: number[], b: number[]) => { const atob = [b[0] - a[0], b[1] - a[1]]; @@ -513,173 +505,124 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P return [a[0] + atob[0] * t, a[1] + atob[1] * t]; }; const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]); + const drag = project([e.clientX + this._offset.x, e.clientY + this._offset.y], tl, [tl[0] + fixedAspect, tl[1] + 1]); thisPt = DragManager.snapDragAspect(drag, fixedAspect); } else { - thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY); + thisPt = DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y); } - move[0] = thisPt.x - this._snapX; - move[1] = thisPt.y - this._snapY; - this._snapX = thisPt.x; - this._snapY = thisPt.y; - let dragBottom = false, - dragRight = false, - dragBotRight = false, - dragTop = false; - let dXin = 0, - dYin = 0, - dWin = 0, - dHin = 0; - switch (this._resizeHdlId.split(' ')[0]) { - case '': - break; - case 'documentDecorations-topLeftResizer': - dXin = -1; - dYin = -1; - dWin = -move[0]; - dHin = -move[1]; - break; - case 'documentDecorations-topRightResizer': - dWin = move[0]; - dYin = -1; - dHin = -move[1]; - break; - case 'documentDecorations-topResizer': - dYin = -1; - dHin = -move[1]; - dragTop = true; - break; - case 'documentDecorations-bottomLeftResizer': - dXin = -1; - dWin = -move[0]; - dHin = move[1]; - break; - case 'documentDecorations-bottomRightResizer': - dWin = move[0]; - dHin = move[1]; - dragBotRight = true; - break; - case 'documentDecorations-bottomResizer': - dHin = move[1]; - dragBottom = true; - break; - case 'documentDecorations-leftResizer': - dXin = -1; - dWin = -move[0]; - break; - case 'documentDecorations-rightResizer': - dWin = move[0]; - dragRight = true; - break; - } + const { scale, refPt } = this.getResizeVals(thisPt, dragHdl); + // resize selected docs + !this._lock && runInAction(async () => { + this._lock = true; + this._snapPt = thisPt; + e.ctrlKey && (SelectionManager.Views().forEach(docView => !Doc.NativeHeight(docView.props.Document) && docView.toggleNativeDimensions())); + const fixedAspect = SelectionManager.Docs().some(this.hasFixedAspect); + SelectionManager.Views().forEach(docView => + this.resizeView(docView, refPt, scale.x === 1 && fixedAspect ? scale.y : scale.x, + scale.x !== 1 && fixedAspect ? scale.x : scale.y, { dragHdl, ctrlKey:e.ctrlKey })); // prettier-ignore + await new Promise(res => setTimeout(() => res(this._lock = undefined))); + }); // prettier-ignore - const isGroup = first.rootDoc._isGroup ? first.rootDoc : undefined; - const scaleViews = isGroup ? DocListCast(isGroup.data).map(doc => DocumentManager.Instance.getFirstDocumentView(doc)!) : SelectionManager.Views(); - const aggBounds = aggregateBounds(scaleViews.map(view => view.rootDoc) as any, 0, 0); - const refWidth = aggBounds.r - aggBounds.x; - const refHeight = aggBounds.b - aggBounds.y; - const scaleRefPt = first.props - .ScreenToLocalTransform() - .inverse() - .transformPoint( - NumCast(isGroup?._xPadding) + (dXin ? refWidth : 0), // - NumCast(isGroup?._yPadding) + (dYin ? refHeight : 0) - ); - scaleViews.forEach( - action((docView: DocumentView) => { - if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions(); - if (dXin !== 0 || dYin !== 0 || dWin !== 0 || dHin !== 0) { - const doc = docView.rootDoc; - const refCent = docView.props.ScreenToLocalTransform().transformPoint(scaleRefPt[0], scaleRefPt[1]); - - if (doc.nativeHeightUnfrozen && !NumCast(doc.nativeHeight) && doc._nativeWidth !== undefined) { - doc._nativeHeight = (NumCast(doc._height) / NumCast(doc._width, 1)) * docView.nativeWidth; - } - const nwidth = docView.nativeWidth; - const nheight = docView.nativeHeight; - const docwidth = NumCast(doc._width); - let docheight = (hgt => (!hgt || isNaN(hgt) ? 20 : hgt))(NumCast(doc._height) || (nheight / nwidth) * docwidth); - let dW = docwidth * (dWin / refWidth); - let dH = docheight * (dHin / refHeight); - const scale = docView.props.ScreenToLocalTransform().Scale; - const modifyNativeDim = (e.ctrlKey && doc.nativeDimModifiable) || (doc.layout_forceReflow && !dragBottom && !dragTop) || (doc.nativeHeightUnfrozen && (dragBottom || dragTop || e.ctrlKey)); - if (nwidth && nheight) { - if (nwidth / nheight !== docwidth / docheight && !dragBottom && !dragTop) { - docheight = (nheight / nwidth) * docwidth; - } - if (modifyNativeDim && !dragBottom && !dragTop) { - // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction - if (Math.abs(dW) > Math.abs(dH)) dH = (dW * nheight) / nwidth; - else dW = (dH * nwidth) / nheight; - } - } - let actualdW = Math.max(docwidth + dW * scale, 20); - let actualdH = Math.max(docheight + dH * scale, 20); - let dX = !dWin ? 0 : (scale * refCent[0] * -dWin) / refWidth; - let dY = !dHin ? 0 : (scale * refCent[1] * -dHin) / refHeight; - const preserveNativeDim = !doc._nativeHeightUnfrozen && !doc._nativeDimModifiable; - const fixedAspect = nwidth && nheight && (!doc._layout_fitWidth || preserveNativeDim || e.ctrlKey || doc.nativeHeightUnfrozen || doc.nativeDimModifiable); - if (fixedAspect) { - if ((Math.abs(dW) > Math.abs(dH) && ((!dragBottom && !dragTop) || !modifyNativeDim)) || dragRight) { - if (dragRight && modifyNativeDim) { - if (Doc.NativeWidth(doc)) { - doc._nativeWidth = (actualdW / (docwidth || 1)) * Doc.NativeWidth(doc); - } - } else { - if (!doc._layout_fitWidth || preserveNativeDim) { - actualdH = (nheight / nwidth) * actualdW; - dYin && (dY = -dW * scale * (nheight / nwidth)); - doc._height = actualdH; - } else if (!modifyNativeDim || dragBotRight) { - doc._height = actualdH; - } - } - doc._width = actualdW; - } else { - if ((dragBottom || dragTop) && (modifyNativeDim || (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._layout_fitWidth))) { - // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height. But they are marked to allow their nativeHeight - // to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match - // a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used) - doc._nativeHeight = (actualdH / (docheight || 1)) * Doc.NativeHeight(doc); - doc._layout_autoHeight = false; - } else { - if (!doc._layout_fitWidth || preserveNativeDim) { - actualdW = (nwidth / nheight) * actualdH; - dXin && (dX = -dH * scale * (nwidth / nheight)); - doc._width = actualdW; - } else if (!modifyNativeDim || dragBotRight) { - doc._width = actualdW; - } - } - if (!modifyNativeDim) { - actualdH = (nheight / nwidth) * NumCast(doc._width); //, actualdH); - } - doc._height = actualdH; - } - } else { - const rotCtr = [docwidth / 2, docheight / 2]; - const tlRotated = Utils.rotPt(-rotCtr[0], -rotCtr[1], (NumCast(doc._rotation) / 180) * Math.PI); - - const maxHeight = doc.nativeHeightUnfrozen || !nheight ? 0 : Math.max(nheight, NumCast(doc.scrollHeight, NumCast(doc[docView.LayoutFieldKey + '_scrollHeight']))) * docView.NativeDimScaling(); - dH && (doc._height = actualdH > maxHeight && maxHeight ? maxHeight : actualdH); - dW && (doc._width = actualdW); - dH && (doc._layout_autoHeight = false); - - const rotCtr2 = [NumCast(doc._width) / 2, NumCast(doc._height) / 2]; - const tlRotated2 = Utils.rotPt(-rotCtr2[0], -rotCtr2[1], (NumCast(doc._rotation) / 180) * Math.PI); - doc.x = NumCast(doc.x) + tlRotated.x + rotCtr[0] - (tlRotated2.x + rotCtr2[0]); // doc shifts by amount topleft moves because rotation is about center of doc - doc.y = NumCast(doc.y) + tlRotated.y + rotCtr[1] - (tlRotated2.y + rotCtr2[1]); - } - doc.x = NumCast(doc.x) + dX; - doc.y = NumCast(doc.y) + dY; - doc._layout_modificationDate = new DateField(); + return false; + }; + + // + // determines how much to resize, and determines the resize reference point + // + getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => { + const [w, h] = [this.Bounds.r - this.Bounds.x, this.Bounds.b - this.Bounds.y]; + const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y]; + switch (dragHdl) { + case 'topLeft': return { scale: { x: 1 - moveX / w, y: 1 -moveY / h }, refPt: [this.Bounds.r, this.Bounds.b] }; + case 'topRight': return { scale: { x: 1 + moveX / w, y: 1 -moveY / h }, refPt: [this.Bounds.x, this.Bounds.b] }; + case 'top': return { scale: { x: 1, y: 1 -moveY / h }, refPt: [this.Bounds.x, this.Bounds.b] }; + case 'left': return { scale: { x: 1 - moveX / w, y: 1 }, refPt: [this.Bounds.r, this.Bounds.y] }; + case 'bottomLeft': return { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.Bounds.r, this.Bounds.y] }; + case 'right': return { scale: { x: 1 + moveX / w, y: 1 }, refPt: [this.Bounds.x, this.Bounds.y] }; + case 'bottomRight':return { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.Bounds.x, this.Bounds.y] }; + case 'bottom': return { scale: { x: 1, y: 1 + moveY / h }, refPt: [this.Bounds.x, this.Bounds.y] }; + default: return { scale: { x: 1, y: 1 }, refPt: [this.Bounds.x, this.Bounds.y] }; + } // prettier-ignore + }; + + // + // determines if anything being dragged directly or via a group has a fixed aspect ratio (in which case we resize uniformly) + // + hasFixedAspect = (doc: Doc): boolean => (doc.isGroup ? DocListCast(doc.data).some(this.hasFixedAspect) : !BoolCast(doc.layout_nativeDimEditable)); + + // + // resize a single DocumentView about the specified reference point, possibly setting/updating the native dimensions of the Doc + // + resizeView = (docView: DocumentView, refPt: number[], scaleX: number, scaleY: number, opts: { dragHdl: string; ctrlKey: boolean }) => { + const doc = docView.rootDoc; + if (doc.isGroup) { + DocListCast(doc.data) + .map(member => DocumentManager.Instance.getDocumentView(member, docView)!) + .forEach(member => this.resizeView(member, refPt, scaleX, scaleY, opts)); + doc.xPadding = NumCast(doc.xPadding) * scaleX; + doc.yPadding = NumCast(doc.yPadding) * scaleY; + } else { + const doc = docView.rootDoc; + const refCent = docView.props.ScreenToLocalTransform().transformPoint(refPt[0], refPt[1]); // fixed reference point for resize (ie, a point that doesn't move) + const [nwidth, nheight] = [docView.nativeWidth, docView.nativeHeight]; + const [initWidth, initHeight] = [NumCast(doc._width, 1), NumCast(doc._height)]; + + const modifyNativeDim = + (opts.ctrlKey && doc.layout_nativeDimEditable) || // e.g., PDF or web page + (doc.layout_reflowHorizontal && opts.dragHdl !== 'bottom' && opts.dragHdl !== 'top') || // eg rtf or some web pages + (doc.layout_reflowVertical && (opts.dragHdl === 'bottom' || opts.dragHdl === 'top' || opts.ctrlKey)); // eg rtf, web, pdf + if (nwidth && nheight && !modifyNativeDim) { + // eg., dragging right resizer on PDF -- enforce native dimensions because not expliclty overridden with ctrl or bottom resize drag + scaleX === 1 ? (scaleX = scaleY) : (scaleY = scaleX); + } + + if (['right', 'left'].includes(opts.dragHdl) && modifyNativeDim && Doc.NativeWidth(doc)) { + const setData = Doc.NativeWidth(Doc.GetProto(doc)) === doc.nativeWidth; + doc.nativeWidth = scaleX * Doc.NativeWidth(doc); + if (setData) Doc.SetNativeWidth(Doc.GetProto(doc), NumCast(doc.nativeWidth)); + if (doc.layout_reflowVertical && !NumCast(doc.nativeHeight)) { + doc._nativeHeight = (initHeight / initWidth) * nwidth; // initializes the nativeHeight for a PDF } - const val = this._dragHeights.get(docView.layoutDoc); - if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) }); - }) + } + if (['bottom', 'top'].includes(opts.dragHdl) && modifyNativeDim && Doc.NativeHeight(doc)) { + const setData = Doc.NativeHeight(Doc.GetProto(doc)) === doc.nativeHeight; + doc._nativeHeight = scaleY * Doc.NativeHeight(doc); + if (setData) Doc.SetNativeHeight(Doc.GetProto(doc), NumCast(doc._nativeHeight)); + } + + doc._width = NumCast(doc._width) * scaleX; + doc._height = NumCast(doc._height) * scaleY; + const { deltaX, deltaY } = this.realignRefPt(doc, refCent, initWidth, initHeight); + doc.x = NumCast(doc.x) + deltaX; + doc.y = NumCast(doc.y) + deltaY; + + doc._layout_modificationDate = new DateField(); + scaleY !== 1 && (doc._layout_autoHeight = undefined); + } + }; + + // This realigns the doc's resize reference point with where it was before resizing it. + // This is needed, because the transformation for doc's with a rotation is screwy: + // the top left of the doc is the 'origin', but the rotation happens about the center of the Doc. + // So resizing a rotated doc will cause it to shift -- this counteracts that shift by determine how + // the reference points shifted, and returning a translation to restore the reference point. + realignRefPt = (doc: Doc, refCent: number[], initWidth: number, initHeight: number) => { + const refCentPct = [refCent[0] / initWidth, refCent[1] / initHeight]; + const rotRefStart = Utils.rotPt( + refCent[0] - initWidth / 2, // rotate reference pointe before scaling + refCent[1] - initHeight / 2, + (NumCast(doc._rotation) / 180) * Math.PI ); - return false; + const rotRefEnd = Utils.rotPt( + refCentPct[0] * NumCast(doc._width) - NumCast(doc._width) / 2, // rotate reference point after scaling + refCentPct[1] * NumCast(doc._height) - NumCast(doc._height) / 2, + (NumCast(doc._rotation) / 180) * Math.PI + ); + return { + deltaX: rotRefStart.x + initWidth / 2 - (rotRefEnd.x + NumCast(doc._width) / 2), // + deltaY: rotRefStart.y + initHeight / 2 - (rotRefEnd.y + NumCast(doc._height) / 2), + }; }; @action @@ -691,10 +634,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P SnappingManager.clearSnapLines(); // detect layout_autoHeight gesture and apply - SelectionManager.Views() - .map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) })) - .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20) - .forEach(pair => (pair.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 || [] })) -- cgit v1.2.3-70-g09d2