diff options
Diffstat (limited to 'src/client/views/InkHandles.tsx')
| -rw-r--r-- | src/client/views/InkHandles.tsx | 127 |
1 files changed, 0 insertions, 127 deletions
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx deleted file mode 100644 index 0b24c3c32..000000000 --- a/src/client/views/InkHandles.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import React = require("react"); -import { observable, action } from "mobx"; -import { observer } from "mobx-react"; -import { InkStrokeProperties } from "./InkStrokeProperties"; -import { setupMoveUpEvents, emptyFunction } from "../../Utils"; -import { UndoManager } from "../util/UndoManager"; -import { InkData, HandlePoint, HandleLine } from "../../fields/InkField"; -import { Transform } from "../util/Transform"; -import { Doc } from "../../fields/Doc"; -import { listSpec } from "../../fields/Schema"; -import { List } from "../../fields/List"; -import { Cast } from "../../fields/Types"; -import { Colors } from "./global/globalEnums"; -import { GestureOverlay } from "./GestureOverlay"; - -export interface InkHandlesProps { - inkDoc: Doc; - data: InkData; - shape?: string; - format: number[]; - ScreenToLocalTransform: () => Transform; -} - -@observer -export class InkHandles extends React.Component<InkHandlesProps> { - /** - * Handles the movement of a selected handle point when the user clicks and drags. - * @param handleNum The index of the currently selected handle point. - */ - onHandleDown = (e: React.PointerEvent, handleIndex: number): void => { - if (InkStrokeProperties.Instance) { - InkStrokeProperties.Instance.moveControl(0, 0, 1); - const controlUndo = UndoManager.StartBatch("DocDecs set radius"); - const screenScale = this.props.ScreenToLocalTransform().Scale; - const order = handleIndex % 4; - const oppositeHandleIndex = order === 1 ? handleIndex - 3 : handleIndex + 3; - const controlIndex = order === 1 ? handleIndex - 1 : handleIndex + 2; - document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, controlIndex), true); - setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => { - InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex); - return false; - }, () => controlUndo?.end(), emptyFunction - ); - } - } - - /** - * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and - * its matching (opposite) handle to a list of broken handle indices. - * @param handleNum The index of the currently selected handle point. - */ - @action - onBreakTangent = (e: KeyboardEvent, controlIndex: number) => { - const doc: Doc = this.props.inkDoc; - if (["Alt"].includes(e.key)) { - e.stopPropagation(); - if (doc) { - const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List; - if (brokenIndices && !brokenIndices.includes(controlIndex)) { - brokenIndices.push(controlIndex); - } - doc.brokenInkIndices = brokenIndices; - } - } - } - - render() { - const formatInstance = InkStrokeProperties.Instance; - if (!formatInstance) return (null); - - // Accessing the current ink's data and extracting all handle points and handle lines. - const data = this.props.data; - const shape = this.props.shape; - const handlePoints: HandlePoint[] = []; - const handleLines: HandleLine[] = []; - if (data.length >= 4) { - for (let i = 0; i <= data.length - 4; i += 4) { - handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); - handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); - } - // Adding first and last (single) handle lines. - handleLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); - handleLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); - for (let i = 2; i < data.length - 4; i += 4) { - handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); - } - } - const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; - - return ( - <> - {handlePoints.map((pts, i) => - <svg height="10" width="10" key={`hdl${i}`}> - <circle - cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} - cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - r={strokeWidth / 2} - strokeWidth={0} - fill={Colors.MEDIUM_BLUE} - onPointerDown={(e) => this.onHandleDown(e, pts.I)} - pointerEvents="all" - cursor="default" - display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> - </svg>)} - {handleLines.map((pts, i) => - <svg height="100" width="100" key={`line${i}`}> - <line - x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} - y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} - y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - stroke={Colors.MEDIUM_BLUE} - strokeWidth={strokeWidth / 4} - display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> - <line - x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} - y1={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} - y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - stroke={Colors.MEDIUM_BLUE} - strokeWidth={strokeWidth / 4} - display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> - </svg>)} - </> - ); - } -}
\ No newline at end of file |