diff options
Diffstat (limited to 'src/client/views/InkControlPtHandles.tsx')
| -rw-r--r-- | src/client/views/InkControlPtHandles.tsx | 77 |
1 files changed, 67 insertions, 10 deletions
diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx index f24dab949..df803ba31 100644 --- a/src/client/views/InkControlPtHandles.tsx +++ b/src/client/views/InkControlPtHandles.tsx @@ -6,7 +6,7 @@ import { ControlPoint, InkData, PointData, InkField } from "../../fields/InkFiel import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { Cast, NumCast } from "../../fields/Types"; -import { setupMoveUpEvents } from "../../Utils"; +import { setupMoveUpEvents, returnFalse } from "../../Utils"; import { Transform } from "../util/Transform"; import { UndoManager } from "../util/UndoManager"; import { Colors } from "./global/globalEnums"; @@ -133,7 +133,6 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { inkCtrlPts.push({ ...inkData[i + 3], I: i + 3 }); } - const screenSpaceLineWidth = this.props.screenSpaceLineWidth; const closed = InkingStroke.IsClosed(inkData); const nearestScreenPt = this.props.nearestScreenPt(); const TagType = (broken?: boolean) => broken ? "rect" : "circle"; @@ -141,18 +140,18 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { const broken = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"))?.includes(control.I); const Tag = TagType((control.I === 0 || control.I === inkData.length - 1) && !closed) as keyof JSX.IntrinsicElements; return <Tag key={control.I.toString() + scale} - x={control.X - screenSpaceLineWidth * 2 * scale} - y={control.Y - screenSpaceLineWidth * 2 * scale} + x={control.X - this.props.screenSpaceLineWidth * 2 * scale} + y={control.Y - this.props.screenSpaceLineWidth * 2 * scale} cx={control.X} cy={control.Y} - r={screenSpaceLineWidth * 2 * scale} + r={this.props.screenSpaceLineWidth * 2 * scale} opacity={this.controlUndo ? 0.15 : 1} - height={screenSpaceLineWidth * 4 * scale} - width={screenSpaceLineWidth * 4 * scale} - strokeWidth={screenSpaceLineWidth / 2} + height={this.props.screenSpaceLineWidth * 4 * scale} + width={this.props.screenSpaceLineWidth * 4 * scale} + strokeWidth={this.props.screenSpaceLineWidth / 2} stroke={Colors.MEDIUM_BLUE} fill={broken ? Colors.MEDIUM_BLUE : color} - onPointerDown={(e: any) => this.onControlDown(e, control.I)} + onPointerDown={(e: React.PointerEvent) => this.onControlDown(e, control.I)} onMouseEnter={() => this.onEnterControl(control.I)} onMouseLeave={this.onLeaveControl} pointerEvents="all" @@ -164,7 +163,7 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { <circle key={"npt"} cx={nearestScreenPt.X} cy={nearestScreenPt.Y} - r={screenSpaceLineWidth * 2} + r={this.props.screenSpaceLineWidth * 2} fill={"#00007777"} stroke={"#00007777"} strokeWidth={0} @@ -175,4 +174,62 @@ export class InkControlPtHandles extends React.Component<InkControlProps> { </svg> ); } +} + + +export interface InkEndProps { + inkDoc: Doc; + inkView: DocumentView; + screenSpaceLineWidth: number; + startPt: PointData; + endPt: PointData; +} +@observer +export class InkEndPtHandles extends React.Component<InkEndProps> { + @observable controlUndo: UndoManager.Batch | undefined; + @observable _overStart: boolean = false; + @observable _overEnd: boolean = false; + + @action + dragRotate = (e: React.PointerEvent, p1: () => { X: number, Y: number }, p2: () => { X: number, Y: number }) => { + setupMoveUpEvents(this, e, (e) => { + if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("stretch ink"); + // compute stretch factor by finding scaling along axis between start and end points + 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 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([this.props.inkView], scaling, { x: p2().X, y: p2().Y }, v1n); + InkStrokeProperties.Instance?.rotateInk([this.props.inkView], angle, { x: p2().X, y: p2().Y }); + return false; + }, action(() => { + this.controlUndo?.end(); + this.controlUndo = undefined; + UndoManager.FilterBatches(["data", "x", "y", "width", "height"]); + }), returnFalse); + } + + render() { + const hdl = (pt: PointData, dragFunc: (e: React.PointerEvent) => void) => <circle key={"npt"} + cx={pt.X} + cy={pt.Y} + r={this.props.screenSpaceLineWidth * 2} + fill={this._overStart ? "#aaaaaa" : "#99999977"} + stroke={"#00007777"} + strokeWidth={0} + onPointerLeave={action(() => this._overStart = false)} + onPointerEnter={action(() => this._overStart = true)} + onPointerDown={e => dragFunc(e)} + pointerEvents="all" + />; + return (<svg> + {hdl(this.props.startPt, (e: React.PointerEvent) => this.dragRotate(e, () => this.props.startPt, () => this.props.endPt))} + {hdl(this.props.endPt, (e: React.PointerEvent) => this.dragRotate(e, () => this.props.endPt, () => this.props.startPt))} + </svg> + ); + } }
\ No newline at end of file |