adding broken indices to layoutDoc working

3 files changed, 16 insertions, 18 deletions

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index da7b0df16..23f22c774 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -16,7 +16,6 @@ export interface InkControlProps {
 
 @observer
 export class InkControls extends React.Component<InkControlProps> {
-    // @observable private _controlPoints: ControlPoint[] = [];
     @observable private _overControl = -1;
     @observable private _overAddPoint = -1;
 
@@ -38,10 +37,12 @@ export class InkControls extends React.Component<InkControlProps> {
                     InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex);
                     return false;
                 },
-                () => controlUndo?.end(), action((e: PointerEvent, doubleTap: boolean | undefined) =>
-                { if (doubleTap && InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) {
-                    InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB);
-                }}));
+                () => controlUndo?.end(), 
+                emptyFunction);
+                // action((e: PointerEvent, doubleTap: boolean | undefined) =>
+                // { if (doubleTap && InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) {
+                //     InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB);
+                // }}));
         }
     }
 
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index ffb6986f1..28b6dd820 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -8,9 +8,10 @@ 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";
 
-export interface InkControlProps {
+export interface InkHandlesProps {
     inkDoc: Doc;
     data: InkData;
     format: number[];
@@ -18,7 +19,7 @@ export interface InkControlProps {
 }
 
 @observer
-export class InkHandles extends React.Component<InkControlProps> {
+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.
@@ -50,11 +51,10 @@ export class InkHandles extends React.Component<InkControlProps> {
         const doc: Doc = this.props.inkDoc;
         if (["Alt"].includes(e.key)) {
             if (doc) {
-                let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
-                if (brokenIndices && brokenIndices.includes(controlIndex)) {
+                const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List;
+                if (brokenIndices && !brokenIndices.includes(controlIndex)) {
                     brokenIndices.push(controlIndex);
                 }
-
                 doc.brokenInkIndices = brokenIndices;
             }
         }
@@ -73,7 +73,7 @@ export class InkHandles extends React.Component<InkControlProps> {
                 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
+            // 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) {
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 4c225210e..f218b4fbf 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -15,7 +15,6 @@ export class InkStrokeProperties {
     @observable _lock = false;
     @observable _controlButton = false;
     @observable _currentPoint = -1;
-    // @observable _brokenIndices: List<number> = new List<number>();
 
     constructor() {
         InkStrokeProperties.Instance = this;
@@ -112,11 +111,9 @@ export class InkStrokeProperties {
                 }
                 
             }
-
             let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
-
             // Updating the indices of the control points whose handle tangency has been broken.
-            if(brokenIndices){
+            if (brokenIndices) {
                 brokenIndices = new List(brokenIndices.map((control) => { 
                     if (control >= newIndex) {
                         return control + 4; 
@@ -283,7 +280,7 @@ export class InkStrokeProperties {
     }
 
     /**
-     * Finds the angle between two inputted vectors.
+     * Finds the angle (in radians) between two inputted vectors.
      * 
      * α = arccos(a·b / |a|·|b|), where a and b are both vectors.
      */
@@ -323,9 +320,9 @@ export class InkStrokeProperties {
             const controlPoint = ink[controlIndex];
             const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
             ink[handleIndex] = newHandlePoint;
-            let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
+            const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
             // 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) && handleIndex !== 1 && handleIndex !== ink.length - 2) {
+            if ((!brokenIndices || !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;