added broken indices to layoutDoc

:broken_heart:

1 files changed, 35 insertions, 25 deletions

diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index ba3fdf9db..ffb6986f1 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -6,8 +6,12 @@ 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 { Cast } from "../../fields/Types";
 
 export interface InkControlProps {
+    inkDoc: Doc;
     data: InkData;
     format: number[];
     ScreenToLocalTransform: () => Transform;
@@ -19,7 +23,7 @@ export class InkHandles extends React.Component<InkControlProps> {
      * 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 => {
+    onHandleDown = (e: React.PointerEvent, handleIndex: number): void => {
         if (InkStrokeProperties.Instance) {
             InkStrokeProperties.Instance.moveControl(0, 0, 1);
             const controlUndo = UndoManager.StartBatch("DocDecs set radius");
@@ -29,9 +33,9 @@ export class InkHandles extends React.Component<InkControlProps> {
             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
+                InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex);
+                return false;
+            }, () => controlUndo?.end(), emptyFunction
             );
         }
     }
@@ -43,13 +47,19 @@ export class InkHandles extends React.Component<InkControlProps> {
      */
     @action
     onBreakTangent = (e: KeyboardEvent, controlIndex: number) => {
+        const doc: Doc = this.props.inkDoc;
         if (["Alt"].includes(e.key)) {
-            if (!InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) {
-                InkStrokeProperties.Instance?._brokenIndices.push(controlIndex);
+            if (doc) {
+                let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
+                if (brokenIndices && brokenIndices.includes(controlIndex)) {
+                    brokenIndices.push(controlIndex);
+                }
+
+                doc.brokenInkIndices = brokenIndices;
             }
         }
     }
- 
+
     render() {
         const formatInstance = InkStrokeProperties.Instance;
         if (!formatInstance) return (null);
@@ -76,33 +86,33 @@ export class InkHandles extends React.Component<InkControlProps> {
             <>
                 {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} 
+                        <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" 
+                            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} 
+                        <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="#1F85DE" 
+                            x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
+                            y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+                            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} 
+                        <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" 
+                            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>)}