From 441a3dab4ada425d28a55435be51339e3d28c892 Mon Sep 17 00:00:00 2001
From: vkalev <50213748+vkalev@users.noreply.github.com>
Date: Mon, 21 Jun 2021 17:44:19 -0500
Subject: adding comments

---
 src/fields/InkField.ts | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/fields/InkField.ts')

diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index dbe51b24a..b79a03146 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -4,6 +4,7 @@ import { ObjectField } from "./ObjectField";
 import { Copy, ToScriptString, ToString, Update } from "./FieldSymbols";
 import { Scripting } from "../client/util/Scripting";
 
+// Helps keep track of the current ink tool in use.
 export enum InkTool {
     None = "none",
     Pen = "pen",
@@ -12,11 +13,13 @@ export enum InkTool {
     Stamp = "stamp"
 }
 
+// Defines a point in an ink as a pair of x- and y-coordinates.
 export interface PointData {
     X: number;
     Y: number;
 }
 
+// Defines an ink as an array of points.
 export type InkData = Array<PointData>;
 
 const pointSchema = createSimpleSchema({
@@ -28,6 +31,7 @@ const strokeDataSchema = createSimpleSchema({
     "*": true
 });
 
+// Holistic class representing the store of an ink.
 @Deserializable("ink")
 export class InkField extends ObjectField {
     @serializable(list(object(strokeDataSchema)))
-- 
cgit v1.2.3-70-g09d2


From b0efa4a390415072eaeb06c8719ea57d73e10466 Mon Sep 17 00:00:00 2001
From: vkalev <50213748+vkalev@users.noreply.github.com>
Date: Wed, 30 Jun 2021 12:52:52 -0500
Subject: ink Bézier handle movement fixed + small visual changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/util/InteractionUtils.tsx    |   2 +-
 src/client/views/InkStrokeProperties.ts | 119 ++++++++++++++++++++++++--------
 src/client/views/InkingStroke.scss      |  18 ++---
 src/client/views/InkingStroke.tsx       |  93 ++++++++++++++-----------
 src/fields/InkField.ts                  |  24 +++++++
 5 files changed, 177 insertions(+), 79 deletions(-)

(limited to 'src/fields/InkField.ts')

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 01d00db30..ba935e3bf 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -208,7 +208,7 @@ export namespace InteractionUtils {
             <polyline
                 points={strpts}
                 style={{
-                    filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
+                    // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
                     fill: fill ? fill : "none",
                     opacity: strokeWidth !== width ? 0.5 : undefined,
                     pointerEvents: pevents as any,
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 533fdf006..5c5395984 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -2,12 +2,11 @@ import { action, computed, observable } from "mobx";
 import { ColorState } from 'react-color';
 import { Doc, Field, Opt } from "../../fields/Doc";
 import { Document } from "../../fields/documentSchemas";
-import { InkField, InkData } from "../../fields/InkField";
+import { InkField, InkData, PointData } from "../../fields/InkField";
 import { Cast, NumCast } from "../../fields/Types";
 import { DocumentType } from "../documents/DocumentTypes";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch } from "../util/UndoManager";
-import { bool } from "sharp";
 
 export class InkStrokeProperties {
     static Instance: InkStrokeProperties | undefined;
@@ -15,15 +14,15 @@ export class InkStrokeProperties {
     private _lastFill = "#D0021B";
     private _lastLine = "#D0021B";
     private _lastDash = "2";
-    private _inkDocs: { x: number, y: number, width: number, height: number }[] = [];
 
-    // Indicates whether the ink is locked.
     @observable _lock = false;
-    // Indicates whether the ink's format is being currently edited (displaying of control points).
     @observable _controlBtn = false;
-    // Stores the index of the current selected control point of the ink instance.
     @observable _currPoint = -1;
 
+    constructor() {
+        InkStrokeProperties.Instance = this;
+    }
+
     getField(key: string) {
         return this.selectedInk?.reduce((p, i) =>
             (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt<string>);
@@ -79,10 +78,6 @@ export class InkStrokeProperties {
         });
     }
 
-    constructor() {
-        InkStrokeProperties.Instance = this;
-    }
-
     /**
      * Adds a new control point to the ink instance when editing its format.
      * @param x The x-coordinate of the current new point.
@@ -213,35 +208,99 @@ export class InkStrokeProperties {
     }
 
     /**
-     * Handles the movement / scaling of control points of an ink instance.
-     * @param xDiff The movement of the control point's x-coordinate.
-     * @param yDiff The movement of the control point's y-coordinate.
-     * @param controlNum The index of the current control point selected.
-     * @returns The changed x- and y-coordinates of the control points.
+     * Handles the movement/scaling of a control point.
      */
     @undoBatch
     @action
-    control = (xDiff: number, yDiff: number, controlNum: number) =>
-        this.applyFunction((doc: Doc, ink: InkData, ptsXscale: number, ptsYscale: number) => {
+    moveControl = (deltaX: number, deltaY: number, controlIndex: number) =>
+        this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
             const newPoints: { X: number, Y: number }[] = [];
-            const order = controlNum % 4;
+            const order = controlIndex % 4;
             for (var i = 0; i < ink.length; i++) {
-                newPoints.push(
-                    (controlNum === i ||
-                        (order === 0 && i === controlNum + 1) ||
-                        (order === 0 && controlNum !== 0 && i === controlNum - 2) ||
-                        (order === 0 && controlNum !== 0 && i === controlNum - 1) ||
-                        (order === 3 && i === controlNum - 1) ||
-                        (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) ||
-                        (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2) ||
-                        ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1))
-                    ) ?
-                        { X: ink[i].X - xDiff / ptsXscale, Y: ink[i].Y - yDiff / ptsYscale } :
-                        { X: ink[i].X, Y: ink[i].Y });
+                const leftHandlePoint = order === 0 && i === controlIndex + 1;
+                const rightHandlePoint = order === 0 && controlIndex !== 0 && i === controlIndex - 2;
+                if (controlIndex === i ||
+                    leftHandlePoint ||
+                    rightHandlePoint ||
+                    (order === 0 && controlIndex !== 0 && i === controlIndex - 1) ||
+                    (order === 3 && i === controlIndex - 1) ||
+                    (order === 3 && controlIndex !== ink.length - 1 && i === controlIndex + 1) ||
+                    (order === 3 && controlIndex !== ink.length - 1 && i === controlIndex + 2) ||
+                    ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlIndex === 0 || controlIndex === ink.length - 1))) {
+                    newPoints.push({ X: ink[i].X - deltaX / xScale, Y: ink[i].Y - deltaY / yScale });
+                } else {
+                    newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+                }
             }
             return newPoints;
         });
 
+    /**
+     * Rotates the target point about the origin point for a given angle (radians).
+     */
+    @action
+    rotatePoint = (target: PointData, origin: PointData, angle: number) => {
+        target.X -= origin.X;
+        target.Y -= origin.Y;
+        const newX = Math.cos(angle) * target.X - Math.sin(angle) * target.Y;
+        const newY = Math.sin(angle) * target.X + Math.cos(angle) * target.Y;
+        target.X = newX + origin.X;
+        target.Y = newY + origin.Y;
+        return target
+    }
+
+    /**
+     * Finds the angle difference (in radians) between two vectors relative to an arbitrary origin.
+     */
+    angleChange = (a: PointData, b: PointData, origin: PointData) => {
+        // Finding vector representation of inputted points relative to new origin.
+        let vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y };
+        let 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 magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y);
+        const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y);
+        // Normalizing the vectors.
+        vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA };
+        vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB };
+        const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y;
+        const theta = Math.acos(dotProduct);
+        return sign * theta;
+    }
+
+    /**
+     * Handles the movement/scaling of a handle point.
+     */
+    @undoBatch
+    @action
+    moveHandle = (deltaX: number, deltaY: number, handleIndex: number) =>
+        this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
+            const newPoints: { X: number, Y: number }[] = [];
+            const order = handleIndex % 4;
+            let newHandlePoint = { X: 0, Y: 0 };
+
+            for (var i = 0; i < ink.length; i++) {
+                if (handleIndex === i) {
+                    newHandlePoint = { X: ink[i].X - deltaX / xScale, Y: ink[i].Y - deltaY / yScale };
+                    newPoints.push({ X: newHandlePoint.X, Y: newHandlePoint.Y });
+                } else {
+                    newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+                }
+            }
+
+            if (handleIndex !== 1 && handleIndex !== ink.length - 2) {
+                const oldHandlePoint = ink[handleIndex];
+                let oppositeHandlePoint = order === 1 ? ink[handleIndex - 3] : ink[handleIndex + 3];
+                const controlPoint = order === 1 ? ink[handleIndex - 1] : ink[handleIndex + 1];
+                const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
+                oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
+                order === 1 ? newPoints[handleIndex - 3] = oppositeHandlePoint : newPoints[handleIndex + 3] = oppositeHandlePoint;
+            }
+
+            return newPoints;
+        });
+
     /**
      * Changes the color of the border of the ink instance.
      * @param color The new hex value to change the border to.
diff --git a/src/client/views/InkingStroke.scss b/src/client/views/InkingStroke.scss
index 30ab1967e..f67b1779d 100644
--- a/src/client/views/InkingStroke.scss
+++ b/src/client/views/InkingStroke.scss
@@ -1,11 +1,11 @@
 .inkingStroke {
-    mix-blend-mode: multiply;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-    overflow: visible !important;
-    transform-origin: top left;
+  mix-blend-mode: multiply;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  overflow: visible !important;
+  transform-origin: top left;
 
-    svg:not(:root) {
-        overflow: visible !important;
-    }
-}
\ No newline at end of file
+  svg:not(:root) {
+    overflow: visible !important;
+  }
+}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 859e53b97..163eb05b0 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -2,7 +2,7 @@ import { action } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../fields/Doc";
 import { documentSchema } from "../../fields/documentSchemas";
-import { InkData, InkField, InkTool } from "../../fields/InkField";
+import { InkData, InkField, InkTool, ControlPoint, HandlePoint, HandleLine } from "../../fields/InkField";
 import { makeInterface } from "../../fields/Schema";
 import { Cast, StrCast } from "../../fields/Types";
 import { TraceMobx } from "../../fields/util";
@@ -28,33 +28,51 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
 
     public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); }
 
-    private analyzeStrokes = () => {
+    analyzeStrokes = () => {
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], [data]);
     }
 
-    public static toggleMask = action((inkDoc: Doc) => {
+    @action
+    public static toggleMask = (inkDoc: Doc) => {
         inkDoc.isInkMask = !inkDoc.isInkMask;
         inkDoc._backgroundColor = inkDoc.isInkMask ? "rgba(0,0,0,0.7)" : undefined;
         inkDoc.mixBlendMode = inkDoc.isInkMask ? "hard-light" : undefined;
         inkDoc.color = "#9b9b9bff";
         inkDoc._stayInCollection = inkDoc.isInkMask ? true : undefined;
-    });
+    };
 
     /**
      * Handles the movement of a selected control point when the user clicks and drags.
-     * @param e React Pointer Event.
-     * @param controlNum The number of the currently selected control point.
+     * @param controlNum The index of the currently selected control point.
      */
     @action
     onControlDown = (e: React.PointerEvent, controlNum: number): void => {
         if (InkStrokeProperties.Instance) {
-            InkStrokeProperties.Instance.control(0, 0, 1);
+            InkStrokeProperties.Instance.moveControl(0, 0, 1);
+            const controlUndo = UndoManager.StartBatch("DocDecs set radius");
+            const screenScale = this.props.ScreenToLocalTransform().Scale;
+            setupMoveUpEvents(this, e,
+                (e: PointerEvent, down: number[], delta: number[]) => {
+                    InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlNum);
+                    return false;
+                },
+                () => controlUndo?.end(), emptyFunction);
+        }
+    }
+
+    /**
+     * Handles the movement of a selected handle point when the user clicks and drags.
+     * @param controlNum The index of the currently selected handle point.
+     */
+    onHandleDown = (e: React.PointerEvent, handleNum: number): void => {
+        if (InkStrokeProperties.Instance) {
+            InkStrokeProperties.Instance.moveControl(0, 0, 1);
             const controlUndo = UndoManager.StartBatch("DocDecs set radius");
             const screenScale = this.props.ScreenToLocalTransform().Scale;
             setupMoveUpEvents(this, e,
                 (e: PointerEvent, down: number[], delta: number[]) => {
-                    InkStrokeProperties.Instance?.control(-delta[0] * screenScale, -delta[1] * screenScale, controlNum);
+                    InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleNum);
                     return false;
                 },
                 () => controlUndo?.end(), emptyFunction);
@@ -69,7 +87,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
     changeCurrPoint = (i: number) => {
         if (InkStrokeProperties.Instance) {
             InkStrokeProperties.Instance._currPoint = i;
-            document.addEventListener("keydown", this.delPts, true);
+            document.addEventListener("keydown", this.onDelete, true);
         }
     }
 
@@ -78,7 +96,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
      * @param e Keyboard Event.
      */
     @action
-    delPts = (e: KeyboardEvent) => {
+    onDelete = (e: KeyboardEvent) => {
         if (["-", "Backspace", "Delete"].includes(e.key)) {
             if (InkStrokeProperties.Instance?.deletePoints()) e.stopPropagation();
         }
@@ -101,7 +119,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const formatInstance = InkStrokeProperties.Instance;
         if (!formatInstance) return (null);
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
-        // const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth()));
         const strokeWidth = Number(this.layoutDoc.strokeWidth);
         const xs = data.map(p => p.X);
         const ys = data.map(p => p.Y);
@@ -118,12 +135,18 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const scaleX = width === strokeWidth ? 1 : (this.props.PanelWidth() - strokeWidth) / (width - strokeWidth);
         const scaleY = height === strokeWidth ? 1 : (this.props.PanelHeight() - strokeWidth) / (height - strokeWidth);
         const strokeColor = StrCast(this.layoutDoc.color, "");
+        const dotsize = Math.max(width * scaleX, height * scaleY) / 40;
 
         // Visually renders the polygonal line made by the user.
         const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth,
             StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
             StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
             StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5 && lineBot - lineTop > 1 && lineRgt - lineLft > 1, false);
+        
+        const selectedLine = InteractionUtils.CreatePolyline(data, lineLft - strokeWidth * 3, lineTop - strokeWidth * 3, "#1F85DE", strokeWidth / 6, strokeWidth / 6,
+            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
+            StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
+            StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5 && lineBot - lineTop > 1 && lineRgt - lineLft > 1, false);
 
         // Invisible polygonal line that enables the ink to be selected by the user.
         const hpoints = InteractionUtils.CreatePolyline(data, left, top,
@@ -136,10 +159,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
             StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false);
 
-        const controlPoints: { X: number, Y: number, I: number }[] = [];
-        const handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = [];
-        const handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = [];
+        const controlPoints: ControlPoint[] = [];
+        const handlePoints: HandlePoint[] = [];
+        const handleLine: HandleLine[] = [];
+        // check the purpose of this conditional
         if (data.length >= 4) {
+
+            // create separate functions for these            
             for (var i = 0; i <= data.length - 4; i += 4) {
                 controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i });
                 controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 });
@@ -147,29 +173,21 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 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 });
             }
 
-            handleLine.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 });
+            // first (single) handle line 
+            handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[1].X, Y2: data[1].Y, dot1: 0, dot2: 0 });
             for (var i = 2; i < data.length - 4; i += 4) {
 
-                handleLine.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 });
+                handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 3].X, Y2: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
 
             }
-            handleLine.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 });
+            // last (single) handle line
+            handleLine.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, dot1: data.length - 1, dot2: data.length - 1 });
 
             for (var 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 });
             }
         }
-        // if (data.length <= 4) {
-        //     handlePoints = [];
-        //     handleLine = [];
-        //     controlPoints = [];
-        //     for (var i = 0; i < data.length; i++) {
-        //         controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i });
-        //     }
-
-        // }
-        const dotsize = Math.max(width * scaleX, height * scaleY) / 40;
 
         // Additional points (controls) added by the user via click when editing the ink's format.
         const addpoints = apoints.map((pts, i) =>
@@ -178,27 +196,24 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     onPointerDown={(e) => { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll"
                 />
             </svg>);
-        // Green circles that allow the user to edit the curvature of the line using the selected point as the anchor.
+        // Blue circles that allow the user to edit the curvature of the line using the selected control point as the anchor.
         const handles = 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} strokeWidth={0} fill="green"
-                    onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="default" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} />
+                <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="#1F85DE"
+                    onPointerDown={(e) => this.onHandleDown(e, pts.I)} pointerEvents="all" cursor="default" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} />
             </svg>);
-        // Points (red circles) of the ink that are made visible to user when editing its format.
+        // Control points of the ink (blue outlined squares) that are made visible to user when editing its format.
         const controls = controlPoints.map((pts, i) =>
             <svg height="10" width="10" key={`ctrl${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="red"
+                <rect x={(pts.X - left) * scaleX} y={(pts.Y - top) * scaleY} height={strokeWidth} width={strokeWidth} strokeWidth={strokeWidth / 6} stroke="#1F85DE" fill={formatInstance && formatInstance._currPoint === pts.I ? "#1F85DE" : "white"}
                     onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="default"
                 />
             </svg>);
-        // Set of two green lines (each with a handle at the end) that are rendered perpendicular to the current selected point while editing.
+        // Set of two blue lines (each with a handle at the end) that are rendered perpendicular to the current selected point while editing.
         const handleLines = handleLine.map((pts, i) =>
-            <svg height="100" width="100" key={`line${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="green" strokeWidth={dotsize / 6}
-                    display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "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="green" strokeWidth={dotsize / 6}
+                    x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke="#1F85DE" strokeWidth={dotsize / 10}
                     display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} />
             </svg>);
 
@@ -227,8 +242,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 {formatInstance._controlBtn && this.props.isSelected() ? addpoints : ""}
                 {formatInstance._controlBtn && this.props.isSelected() ? handleLines : ""}
                 {formatInstance._controlBtn && this.props.isSelected() ? handles : ""}
+                {this.props.isSelected() ? selectedLine : ""}
                 {formatInstance._controlBtn && this.props.isSelected() ? controls : ""}
-
             </svg>
         );
     }
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index b79a03146..c158dac42 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -13,6 +13,7 @@ export enum InkTool {
     Stamp = "stamp"
 }
 
+
 // Defines a point in an ink as a pair of x- and y-coordinates.
 export interface PointData {
     X: number;
@@ -22,6 +23,29 @@ export interface PointData {
 // Defines an ink as an array of points.
 export type InkData = Array<PointData>;
 
+export interface ControlPoint {
+    X: number;
+    Y: number;
+    I: number;
+}
+
+export interface HandlePoint {
+    X: number;
+    Y: number;
+    I: number;
+    dot1: number;
+    dot2: number;
+}
+
+export interface HandleLine {
+    X1: number;
+    Y1: number;
+    X2: number;
+    Y2: number;
+    dot1: number;
+    dot2: number;
+}
+
 const pointSchema = createSimpleSchema({
     X: true, Y: true
 });
-- 
cgit v1.2.3-70-g09d2


From 5ab81f49a11bd8a74725228a887a90c88a3848ff Mon Sep 17 00:00:00 2001
From: vkalev <vjk1883@gmail.com>
Date: Tue, 6 Jul 2021 14:27:29 -0500
Subject: added breaking of tangent handle lines by holding 'Alt' key when
 moving

---
 src/client/views/InkHandles.tsx         | 32 +++++++++++++++++++++++++++-----
 src/client/views/InkStrokeProperties.ts |  6 +++---
 src/fields/InkField.ts                  |  2 ++
 3 files changed, 32 insertions(+), 8 deletions(-)

(limited to 'src/fields/InkField.ts')

diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index c2163c124..993e427b3 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -15,6 +15,8 @@ export interface InkControlProps {
 
 @observer
 export class InkHandles extends React.Component<InkControlProps> {
+    @observable private _brokenIndices: number[] = [];
+
     /**
      * Handles the movement of a selected handle point when the user clicks and drags.
      * @param handleNum The index of the currently selected handle point.
@@ -24,13 +26,25 @@ export class InkHandles extends React.Component<InkControlProps> {
             InkStrokeProperties.Instance.moveControl(0, 0, 1);
             const controlUndo = UndoManager.StartBatch("DocDecs set radius");
             const screenScale = this.props.ScreenToLocalTransform().Scale;
+            document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, handleNum), true);
             setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
-                    InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleNum);
+                    InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleNum, this._brokenIndices);
                     return false;
                 }, () => controlUndo?.end(), emptyFunction
             );
         }
     }
+
+    @action
+    onBreakTangent = (e: KeyboardEvent, handleIndex: number) => {
+        if (["Alt"].includes(e.key)) {
+            const order = handleIndex % 4;
+            const oppositeHandleIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
+            if (!this._brokenIndices.includes(handleIndex) && !this._brokenIndices.includes(oppositeHandleIndex)) {
+                this._brokenIndices.push(handleIndex, oppositeHandleIndex);
+            }
+        }
+    }
  
     render() {
         const formatInstance = InkStrokeProperties.Instance;
@@ -39,15 +53,15 @@ export class InkHandles extends React.Component<InkControlProps> {
         const handlePoints: HandlePoint[] = [];
         const handleLines: HandleLine[] = [];
         if (data.length >= 4) {
-            // adding first and last (single) handle lines
-            handleLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[1].X, Y2: 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, dot1: data.length - 1, dot2: data.length - 1 });
             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 + 3].X, Y2: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
+                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, dotsize] = this.props.format;
@@ -77,6 +91,14 @@ export class InkHandles extends React.Component<InkControlProps> {
                             stroke="#1F85DE" 
                             strokeWidth={dotsize / 8}
                             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="#1F85DE" 
+                            strokeWidth={dotsize / 8}
+                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                     </svg>)}
             </>
         );
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index a5c028730..812e8ff6e 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -220,15 +220,15 @@ export class InkStrokeProperties {
      */
     @undoBatch
     @action
-    moveHandle = (deltaX: number, deltaY: number, handleIndex: number) =>
+    moveHandle = (deltaX: number, deltaY: number, handleIndex: number, brokenIndices: number[]) =>
         this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
             const order = handleIndex % 4;
             const oldHandlePoint = ink[handleIndex];
             const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
             ink[handleIndex] = newHandlePoint;
             
-            // Rotating opposite handle (first and final control point only have one handle).
-            if (handleIndex !== 1 && handleIndex !== ink.length - 2) {
+            // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle).
+            if (!brokenIndices.includes(handleIndex) && handleIndex !== 1 && handleIndex !== ink.length - 2) {
                 let oppositeHandlePoint = order === 1 ? ink[handleIndex - 3] : ink[handleIndex + 3];
                 const controlPoint = order === 1 ? ink[handleIndex - 1] : ink[handleIndex + 1];
                 const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index c158dac42..485376a34 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -42,6 +42,8 @@ export interface HandleLine {
     Y1: number;
     X2: number;
     Y2: number;
+    X3: number;
+    Y3: number;
     dot1: number;
     dot2: number;
 }
-- 
cgit v1.2.3-70-g09d2


From 48620bbe25f92eb179d53846aae5f0164ca6f1c2 Mon Sep 17 00:00:00 2001
From: vkalev <vjk1883@gmail.com>
Date: Thu, 15 Jul 2021 01:27:43 -0500
Subject: adding new point creates tangent handle lines + snapping handle
 tangents not working

---
 src/client/views/InkControls.tsx        |  12 ++-
 src/client/views/InkHandles.tsx         |   1 -
 src/client/views/InkStrokeProperties.ts | 170 +++++++++++++++++++++-----------
 src/fields/InkField.ts                  |   3 -
 4 files changed, 121 insertions(+), 65 deletions(-)

(limited to 'src/fields/InkField.ts')

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 4d8b2c6b5..da7b0df16 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -30,12 +30,18 @@ export class InkControls extends React.Component<InkControlProps> {
             InkStrokeProperties.Instance.moveControl(0, 0, 1);
             const controlUndo = UndoManager.StartBatch("DocDecs set radius");
             const screenScale = this.props.ScreenToLocalTransform().Scale;
+            const order = controlIndex % 4;
+            const handleIndexA  = order === 2 ? controlIndex - 1 : controlIndex - 2;
+            const handleIndexB = order === 2 ? controlIndex + 2 : controlIndex + 1;
             setupMoveUpEvents(this, e,
                 (e: PointerEvent, down: number[], delta: number[]) => {
                     InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex);
                     return false;
                 },
-                () => controlUndo?.end(), emptyFunction);
+                () => controlUndo?.end(), action((e: PointerEvent, doubleTap: boolean | undefined) =>
+                { if (doubleTap && InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) {
+                    InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB);
+                }}));
         }
     }
 
@@ -112,7 +118,9 @@ export class InkControls extends React.Component<InkControlProps> {
                             width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth} 
                             strokeWidth={strokeWidth / 6} stroke="#1F85DE" 
                             fill={formatInstance?._currentPoint === control.I ? "#1F85DE" : "white"}
-                            onPointerDown={(e) => { this.changeCurrPoint(control.I); this.onControlDown(e, control.I); }} 
+                            onPointerDown={(e) => { 
+                                this.changeCurrPoint(control.I); 
+                                this.onControlDown(e, control.I); }} 
                             onMouseEnter={() => this.onEnterControl(i)} 
                             onMouseLeave={this.onLeaveControl} 
                             pointerEvents="all" 
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index a33380221..ba3fdf9db 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -24,7 +24,6 @@ export class InkHandles extends React.Component<InkControlProps> {
             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;
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 4ec03c560..a3f7562e0 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -71,70 +71,109 @@ export class InkStrokeProperties {
      */
     @undoBatch
     @action
-    addPoints = (x: number, y: number, pts: { X: number, Y: number }[], index: number, control: { X: number, Y: number }[]) => {
-        this.selectedInk?.forEach(action(inkView => {
-            if (this.selectedInk?.length === 1) {
-                const newPoint = { X: x, Y: y };
-                const doc = Document(inkView.rootDoc);
-                if (doc.type === DocumentType.INK) {
-                    const ink = Cast(doc.data, InkField)?.inkData;
-                    if (ink) {
-                        const newPoints: { X: number, Y: number }[] = [];
-                        var counter = 0;
-                        for (var k = 0; k < index; k++) {
-                            control.forEach(pt => (pts[k].X === pt.X && pts[k].Y === pt.Y) && counter++);
-                        }
-                        //decide where to put the new coordinate
-                        const spNum = Math.floor(counter / 2) * 4 + 2;
-
-                        for (var i = 0; i < spNum; i++) {
-                            ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y });
-                        }
-
-                        // Updating the indices of the control points whose handle tangency has been broken.
-                        this._brokenIndices = this._brokenIndices.map((control) => { 
-                            if (control >= spNum) {
-                                return control + 4; 
-                            } else {
-                                return control;
+    addPoints = (x: number, y: number, points: InkData, index: number, controls: { X: number, Y: number }[]) => {
+        this.applyFunction((doc: Doc, ink: InkData) => {
+            const newControl = { X: x, Y: y };
+            const newPoints: InkData = [];
+            let [counter, start, end] = [0, 0, 0];
+            for (let k = 0; k < points.length; k++) {
+                if (end === 0) {
+                    controls.forEach((control) => {
+                        if (control.X === points[k].X && control.Y === points[k].Y) {
+                            if (k < index) {
+                                counter++;
+                                start = k;
+                            } else if (k > index) {
+                                end = k;
                             }
-                        });
-
-                        // const [handleA, handleB] = this.getNewHandlePoints(newPoint, pts[index-1], pts[index+1]);
-                        newPoints.push(newPoint);
-                        newPoints.push(newPoint);
-                        newPoints.push(newPoint);
-                        newPoints.push(newPoint);
-
-                        for (var i = spNum; i < ink.length; i++) {
-                            newPoints.push({ X: ink[i].X, Y: ink[i].Y });
-
                         }
-                        this._currentPoint = -1;
-                        Doc.GetProto(doc).data = new InkField(newPoints);
-                    }
+                    });
                 }
             }
-        }));
+            if (end === 0) end = points.length-1;
+            // Index of new control point with regards to the ink data.
+            const newIndex = Math.floor(counter / 2) * 4 + 2;
+            // Creating new ink data with new control point and handle points inputted.
+            for (let i = 0; i < ink.length; i++) {
+                if (i === newIndex) { 
+                    const [handleA, handleB] = this.getNewHandlePoints(points.slice(start, index+1), points.slice(index, end), newControl);
+                    newPoints.push(handleA, newControl, newControl, handleB);
+                    const [rightControl, rightHandle]  = [points[end], ink[i]];
+                    const scaledVector = this.getScaledHandlePoint(false, start, end, index, rightControl, rightHandle);
+                    rightHandle && newPoints.push({ X: rightControl.X - scaledVector.X, Y: rightControl.Y - scaledVector.Y });
+                } else if (i === newIndex - 1) {
+                    const [leftControl, leftHandle] = [points[start], ink[i]];
+                    const scaledVector = this.getScaledHandlePoint(true, start, end, index, leftControl, leftHandle);
+                    leftHandle && newPoints.push({ X: leftControl.X - scaledVector.X, Y: leftControl.Y - scaledVector.Y });
+                } else {
+                    ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+                }
+                
+            }
+            // Updating the indices of the control points whose handle tangency has been broken.
+            this._brokenIndices = this._brokenIndices.map((control) => { 
+                if (control >= newIndex) {
+                    return control + 4; 
+                } else {
+                    return control;
+                }
+            });
+            this._currentPoint = -1;
+            return newPoints;
+        });
     }
 
-    getNewHandlePoints = (newControl: PointData, a: PointData, b: PointData) => {
-        // find midpoint between the left and right control point of new control
-        // rotate midpoint by +-pi/2 to get new handle points
-        // multiplying x-y coordinates of both by 10/L where L is its current magnitude
-        const angle = this.angleChange(a, b, newControl);
-        const midpoint = this.rotatePoint(a, newControl, angle/2);
-        // const handleA = this.rotatePoint(midpoint, newControl, -Math.PI/2);
-        // const handleB = this.rotatePoint(midpoint, newControl, -Math.PI/2);
-        const handleA = { X: midpoint.X + (20 * Math.cos(-Math.PI/2)), Y: midpoint.Y + (20 * Math.sin(-Math.PI/2)) };
-        const handleB = { X: midpoint.X + (20 * Math.cos(Math.PI/2)), Y: midpoint.Y + (20 * Math.sin(Math.PI/2)) };
+    /**
+     * Scales a handle point of a control point that is adjacent to a newly added one.
+     * @param isLeft Determines if the current control point is on the left or right side of the newly added one.
+     * @param start Beginning index of curve from the left control point to the newly added one.
+     * @param end Final index of curve from the newly added control point to its right neighbor.
+     */
+    getScaledHandlePoint(isLeft: boolean, start: number, end: number, index: number, control: PointData, handle: PointData) {
+        const prevSize = end - start;
+        const newSize = isLeft ? index - start : end - index;
+        const handleVector = { X: control.X - handle.X, Y: control.Y - handle.Y };
+        const scaledVector = { X: handleVector.X * (newSize / prevSize), Y: handleVector.Y * (newSize / prevSize) };
+        return scaledVector;
+    }
 
+    /**
+     * Determines the position of the handle points of a newly added control point by finding the
+     * tangent vectors to the split curve at the new control. Given the properties of Bézier curves,
+     * the tangent vector to a control point is equivalent to the first/last (depending on the direction
+     * of the curve) leg of the Bézier curve's derivative.
+     * (Source: https://pages.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html)
+     * 
+     * @param C The curve represented by all points from the previous control until the newly added point.
+     * @param D The curve represented by all points from the newly added point to the next control.
+     * @param newControl The newly added control point.
+     */
+    getNewHandlePoints = (C: PointData[], D: PointData[], newControl: PointData) => {
+        const [m, n] = [C.length, D.length];
+        let handleSizeA = Math.sqrt((Math.pow(newControl.X - C[0].X, 2)) + (Math.pow(newControl.Y - C[0].Y, 2)));
+        let handleSizeB = Math.sqrt((Math.pow(D[n-1].X - newControl.X, 2)) + (Math.pow(D[n-1].Y - newControl.Y, 2)));
+        if (handleSizeA < 75 && handleSizeB < 75) {
+            handleSizeA *= 3;
+            handleSizeB *= 3;
+        }
+        if (Math.abs(handleSizeA - handleSizeB) < 50) {
+            handleSizeA *= 5;
+            handleSizeB *= 5;
+        } else if (Math.abs(handleSizeA - handleSizeB) < 150) {
+            handleSizeA *= 2;
+            handleSizeB *= 2;
+        }
+        // Finding the last leg of the derivative curve of C.
+        const dC = { X: (handleSizeA / n) * (C[m-1].X - C[m-2].X), Y: (handleSizeA / n) * (C[m-1].Y - C[m-2].Y) };
+        // Finding the first leg of the derivative curve of D. 
+        const dD = { X: (handleSizeB / m) * (D[1].X - D[0].X), Y: (handleSizeB / m) * (D[1].Y - D[0].Y) };
+        const handleA = { X: newControl.X - dC.X, Y: newControl.Y - dC.Y };
+        const handleB = { X: newControl.X + dD.X, Y: newControl.Y + dD.Y };
         return [handleA, handleB];
     }
 
     /**
-     * Deletes the points of the current ink instance.
-     * @returns The changed x- and y-coordinates of the control points.
+     * Deletes the current control point of the selected ink instance.
      */
     @undoBatch
     @action
@@ -160,9 +199,8 @@ export class InkStrokeProperties {
     }, true)
 
     /**
-     * Rotates the points of the current ink instance by a certain angle degree.
-     * @param angle The angle at which to rotate the ink (all of its x- and y-coordinates).
-     * @returns The changed x- and y-coordinates of the control points.
+     * Rotates the entire selected ink instance.
+     * @param angle The angle at which to rotate the ink in radians.
      */
     @undoBatch
     @action
@@ -210,6 +248,18 @@ export class InkStrokeProperties {
             return newPoints;
         })
 
+    snapHandleTangent = (controlIndex: number, handleIndexA: number, handleIndexB: number) => {
+        this.applyFunction((doc: Doc, ink: InkData) => {
+            this._brokenIndices.splice(this._brokenIndices.indexOf(controlIndex), 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 newHandleB = this.rotatePoint(handleB, controlPoint, angleDifference);
+            ink[handleIndexB] = newHandleB;
+            return ink;
+        });
+    }
+
     /**
      * Rotates the target point about the origin point for a given angle (radians).
      */
@@ -224,6 +274,11 @@ export class InkStrokeProperties {
         return target;
     }
 
+    /**
+     * Finds the angle between two inputted vectors.
+     * 
+     * α = arccos(a·b / |a|·|b|), where a and b are both vectors.
+     */
     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);
@@ -255,20 +310,17 @@ export class InkStrokeProperties {
     @action
     moveHandle = (deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) =>
         this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
-            const order = handleIndex % 4;
             const oldHandlePoint = ink[handleIndex];
             let oppositeHandlePoint = ink[oppositeHandleIndex];
             const controlPoint = ink[controlIndex];
             const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
             ink[handleIndex] = newHandlePoint;
-            
             // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle).
             if (!this._brokenIndices.includes(controlIndex) && handleIndex !== 1 && handleIndex !== ink.length - 2) {
                 const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
                 oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
                 ink[oppositeHandleIndex] = oppositeHandlePoint;
             }
-
             return ink;
         })
 }
\ No newline at end of file
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index 485376a34..1270a2dab 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -57,13 +57,10 @@ const strokeDataSchema = createSimpleSchema({
     "*": true
 });
 
-// Holistic class representing the store of an ink.
 @Deserializable("ink")
 export class InkField extends ObjectField {
     @serializable(list(object(strokeDataSchema)))
     readonly inkData: InkData;
-    // inkData: InkData;
-
 
     constructor(data: InkData) {
         super();
-- 
cgit v1.2.3-70-g09d2