diff options
Diffstat (limited to 'src/client/views/DocumentDecorations.tsx')
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 30 |
1 files changed, 11 insertions, 19 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 7d3959eba..d85709f31 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -27,6 +27,8 @@ import { LightboxView } from './LightboxView'; import { DocumentView } from "./nodes/DocumentView"; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import React = require("react"); +import { InkingStroke } from './InkingStroke'; +import e = require('express'); @observer export class DocumentDecorations extends React.Component<{ PanelWidth: number, PanelHeight: number, boundsLeft: number, boundsTop: number }, { value: string }> { @@ -37,12 +39,9 @@ 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 _rotateUndo?: UndoManager.Batch; private _offX = 0; _offY = 0; // offset from click pt to inner edge of resize border private _snapX = 0; _snapY = 0; // last snapped location of resize border - private _prevY = 0; private _dragHeights = new Map<Doc, { start: number, lowest: number }>(); - private _inkCenterPts: { doc: Doc, X: number, Y: number }[] = []; private _inkDragDocs: { doc: Doc, x: number, y: number, width: number, height: number }[] = []; @observable private _accumulatedTitle = ""; @@ -194,30 +193,22 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P @action onRotateDown = (e: React.PointerEvent): void => { - this._rotateUndo = UndoManager.StartBatch("rotatedown"); - const pt = { x: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 }; + const rotateUndo = UndoManager.StartBatch("rotatedown"); + const centerPoint = { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 }; setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => { - const docView = SelectionManager.Views()[0]; - const { left, top, right, bottom } = docView.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 }; - const centerPoint = { X: (left + right) / 2, Y: (top + bottom) / 2 }; const previousPoint = { X: e.clientX, Y: e.clientY }; const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] }; - const angle = InkStrokeProperties.Instance.angleChange(previousPoint, movedPoint, centerPoint); - const selectedInk = SelectionManager.Views().filter(i => Document(i.rootDoc).type === DocumentType.INK); - angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, pt); + const angle = InkStrokeProperties.angleChange(previousPoint, movedPoint, centerPoint); + const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke); + angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, centerPoint); return false; }, () => { - this._rotateUndo?.end(); + rotateUndo?.end(); UndoManager.FilterBatches(["data", "x", "y", "width", "height"]); }, emptyFunction); - this._prevY = e.clientY; - this._inkCenterPts = SelectionManager.Views() - .filter(dv => dv.rootDoc.type === DocumentType.INK) - .map(dv => ({ ink: Cast(dv.rootDoc.data, InkField)?.inkData ?? [{ X: 0, Y: 0 }], doc: dv.rootDoc })) - .map(({ ink, doc }) => ({ doc, X: Math.min(...ink.map(p => p.X)), Y: Math.min(...ink.map(p => p.Y)) })); } @action @@ -479,7 +470,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth)); bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight)); - const useRotation = seldoc.rootDoc.type === DocumentType.INK; + const useRotation = seldoc.ComponentView instanceof InkingStroke; const resizerScheme = colorScheme ? "documentDecorations-resizer" + colorScheme : ""; return (<div className={`documentDecorations${colorScheme}`}> @@ -518,7 +509,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")} <div key="rot" className={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`} - onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown} onContextMenu={(e) => e.preventDefault()}>{useRotation && "⟲"}</div> + onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown} + onContextMenu={e => e.preventDefault()}>{useRotation && "⟲"}</div> </> } </div > |