diff options
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/InkStrokeProperties.ts | 14 |
2 files changed, 18 insertions, 26 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 > diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index 7ab631b03..9634e6e83 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -183,10 +183,10 @@ export class InkStrokeProperties { */ @undoBatch @action - rotateInk = (inkStrokes: DocumentView[], angle: number, scrpt: { x: number, y: number }) => { + rotateInk = (inkStrokes: DocumentView[], angle: number, scrpt: PointData) => { this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData, xScale: number, yScale: number, inkStrokeWidth: number) => { view.rootDoc.rotation = NumCast(view.rootDoc.rotation) + angle; - const inkCenterPt = view.ComponentView?.ptFromScreen?.({ X: scrpt.x, Y: scrpt.y }); + const inkCenterPt = view.ComponentView?.ptFromScreen?.(scrpt); return !inkCenterPt ? ink : ink.map(i => { const pt = { X: i.X - inkCenterPt.X, Y: i.Y - inkCenterPt.Y }; @@ -340,7 +340,7 @@ export class InkStrokeProperties { brokenIndices.splice(ind, 1); const [controlPoint, handleA, handleB] = [ink[controlIndex], ink[handleIndexA], ink[handleIndexB]]; const oppositeHandleA = this.rotatePoint(handleA, controlPoint, Math.PI); - const angleDifference = this.angleChange(handleB, oppositeHandleA, controlPoint); + const angleDifference = InkStrokeProperties.angleChange(handleB, oppositeHandleA, controlPoint); const inkCopy = ink.slice(); // have to make a new copy of the array to keep from corrupting undo/redo. without slicing, the same array will be stored in each undo step meaning earlier undo steps will be inadvertently updated to store the latest value. inkCopy[handleIndexB] = this.rotatePoint(handleB, controlPoint, angleDifference); return inkCopy; @@ -364,7 +364,7 @@ export class InkStrokeProperties { * * α = arccos(a·b / |a|·|b|), where a and b are both vectors. */ - angleBetweenTwoVectors = (vectorA: PointData, vectorB: PointData) => { + public static angleBetweenTwoVectors(vectorA: PointData, vectorB: PointData) { const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y); const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y); if (magnitudeA === 0 || magnitudeB === 0) return 0; @@ -377,14 +377,14 @@ export class InkStrokeProperties { /** * Finds the angle difference (in radians) between two vectors relative to an arbitrary origin. */ - angleChange = (a: PointData, b: PointData, origin: PointData) => { + public static angleChange(a: PointData, b: PointData, origin: PointData) { // Finding vector representation of inputted points relative to new origin. const vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y }; const vectorB = { X: b.X - origin.X, Y: b.Y - origin.Y }; const crossProduct = vectorB.X * vectorA.Y - vectorB.Y * vectorA.X; // Determining whether rotation is clockwise or counterclockwise. const sign = crossProduct < 0 ? 1 : -1; - const theta = this.angleBetweenTwoVectors(vectorA, vectorB); + const theta = InkStrokeProperties.angleBetweenTwoVectors(vectorA, vectorB); return sign * theta; } @@ -408,7 +408,7 @@ export class InkStrokeProperties { // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle). if ((!brokenIndices || (!brokenIndices?.includes(controlIndex) && !brokenIndices?.includes(equivIndex))) && (closed || (handleIndex !== 1 && handleIndex !== ink.length - 2))) { - const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint); + const angle = InkStrokeProperties.angleChange(oldHandlePoint, newHandlePoint, controlPoint); inkCopy[oppositeHandleIndex] = this.rotatePoint(oppositeHandlePoint, controlPoint, angle); } return inkCopy; |