diff options
Diffstat (limited to 'src/client/views/InkControlPtHandles.tsx')
| -rw-r--r-- | src/client/views/InkControlPtHandles.tsx | 39 |
1 files changed, 23 insertions, 16 deletions
diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx index edc6b404b..a49923ffb 100644 --- a/src/client/views/InkControlPtHandles.tsx +++ b/src/client/views/InkControlPtHandles.tsx @@ -2,18 +2,19 @@ import * as React from 'react'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { Doc } from '../../fields/Doc'; -import { ControlPoint, InkData, PointData } from '../../fields/InkField'; +import { ControlPoint, InkData } from '../../fields/InkField'; import { List } from '../../fields/List'; import { listSpec } from '../../fields/Schema'; import { Cast } from '../../fields/Types'; -import { returnFalse, setupMoveUpEvents } from '../../Utils'; -import { SelectionManager } from '../util/SelectionManager'; +import { returnFalse, setupMoveUpEvents } from '../../ClientUtils'; import { UndoManager } from '../util/UndoManager'; import { Colors } from './global/globalEnums'; import { InkingStroke } from './InkingStroke'; import { InkStrokeProperties } from './InkStrokeProperties'; import { SnappingManager } from '../util/SnappingManager'; import { ObservableReactComponent } from './ObservableReactComponent'; +import { PointData } from '../../pen-gestures/GestureTypes'; +import { DocumentView } from './nodes/DocumentView'; export interface InkControlProps { inkDoc: Doc; @@ -48,7 +49,7 @@ export class InkControlPtHandles extends ObservableReactComponent<InkControlProp */ @action onControlDown = (e: React.PointerEvent, controlIndex: number): void => { - const ptFromScreen = this._props.inkView.ptFromScreen; + const { ptFromScreen } = this._props.inkView; if (ptFromScreen) { const order = controlIndex % 4; const handleIndexA = ((order === 3 ? controlIndex - 1 : controlIndex - 2) + this._props.inkCtrlPoints.length) % this._props.inkCtrlPoints.length; @@ -60,7 +61,7 @@ export class InkControlPtHandles extends ObservableReactComponent<InkControlProp setupMoveUpEvents( this, e, - action((e: PointerEvent, down: number[], delta: number[]) => { + action((moveEv: PointerEvent, down: number[], delta: number[]) => { if (!this._props.inkView.controlUndo) this._props.inkView.controlUndo = UndoManager.StartBatch('drag ink ctrl pt'); const inkMoveEnd = ptFromScreen({ X: delta[0], Y: delta[1] }); const inkMoveStart = ptFromScreen({ X: 0, Y: 0 }); @@ -75,9 +76,9 @@ export class InkControlPtHandles extends ObservableReactComponent<InkControlProp this._props.inkView.controlUndo = undefined; UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']); }), - action((e: PointerEvent, doubleTap: boolean | undefined) => { + action((moveEv: PointerEvent, doubleTap: boolean | undefined) => { const equivIndex = controlIndex === 0 ? this._props.inkCtrlPoints.length - 1 : controlIndex === this._props.inkCtrlPoints.length - 1 ? 0 : controlIndex; - if (doubleTap || e.button === 2) { + if (doubleTap || moveEv.button === 2) { if (!brokenIndices?.includes(equivIndex) && !brokenIndices?.includes(controlIndex)) { if (brokenIndices) brokenIndices.push(controlIndex); else this._props.inkDoc.brokenInkIndices = new List<number>([controlIndex]); @@ -128,7 +129,9 @@ export class InkControlPtHandles extends ObservableReactComponent<InkControlProp * Changes the current selected control point. */ @action - changeCurrPoint = (i: number) => (InkStrokeProperties.Instance._currentPoint = i); + changeCurrPoint = (i: number) => { + InkStrokeProperties.Instance._currentPoint = i; + }; render() { // Accessing the current ink's data and extracting all control points. @@ -176,7 +179,7 @@ export class InkControlPtHandles extends ObservableReactComponent<InkControlProp }; return ( <svg> - {!nearestScreenPt ? null : <circle key={'npt'} cx={nearestScreenPt.X} cy={nearestScreenPt.Y} r={this._props.screenSpaceLineWidth * 2} fill={'#00007777'} stroke={'#00007777'} strokeWidth={0} pointerEvents="none" />} + {!nearestScreenPt ? null : <circle key="npt" cx={nearestScreenPt.X} cy={nearestScreenPt.Y} r={this._props.screenSpaceLineWidth * 2} fill="#00007777" stroke="#00007777" strokeWidth={0} pointerEvents="none" />} {sreenCtrlPoints.map(control => hdl(control, this._overControl !== control.I ? 1 : 3 / 2, Colors.WHITE))} </svg> ); @@ -207,22 +210,22 @@ export class InkEndPtHandles extends ObservableReactComponent<InkEndProps> { setupMoveUpEvents( this, e, - action(e => { + action(moveEv => { if (this._throttle++ % 2 !== 0) return false; if (!this._props.inkView.controlUndo) this._props.inkView.controlUndo = UndoManager.StartBatch('stretch ink'); // compute stretch factor by finding scaling along axis between start and end points const p1 = pt1(); const p2 = pt2(); const v1 = { X: p1.X - p2.X, Y: p1.Y - p2.Y }; - const v2 = { X: e.clientX - p2.X, Y: e.clientY - p2.Y }; + const v2 = { X: moveEv.clientX - p2.X, Y: moveEv.clientY - p2.Y }; const v1len = Math.sqrt(v1.X * v1.X + v1.Y * v1.Y); const v2len = Math.sqrt(v2.X * v2.X + v2.Y * v2.Y); const scaling = v2len / v1len; const v1n = { X: v1.X / v1len, Y: v1.Y / v1len }; const v2n = { X: v2.X / v2len, Y: v2.Y / v2len }; const angle = Math.acos(v1n.X * v2n.X + v1n.Y * v2n.Y) * Math.sign(v1.X * v2.Y - v2.X * v1.Y); - InkStrokeProperties.Instance.stretchInk(SelectionManager.Views, scaling, p2, v1n, e.shiftKey); - InkStrokeProperties.Instance.rotateInk(SelectionManager.Views, angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call + InkStrokeProperties.Instance.stretchInk(DocumentView.Selected(), scaling, p2, v1n, moveEv.shiftKey); + InkStrokeProperties.Instance.rotateInk(DocumentView.Selected(), angle, pt2()); // bcz: call pt2() func here because pt2 will have changed from previous stretchInk call return false; }), action(() => { @@ -243,10 +246,14 @@ export class InkEndPtHandles extends ObservableReactComponent<InkEndProps> { cy={pt?.Y} r={this._props.screenSpaceLineWidth * 2} fill={this._overStart ? '#aaaaaa' : '#99999977'} - stroke={'#00007777'} + stroke="#00007777" strokeWidth={0} - onPointerLeave={action(() => (this._overStart = false))} - onPointerEnter={action(() => (this._overStart = true))} + onPointerLeave={action(() => { + this._overStart = false; + })} + onPointerEnter={action(() => { + this._overStart = true; + })} onPointerDown={dragFunc} pointerEvents="all" /> |