fixed adding point bug with breaking handle tangency

1 files changed, 17 insertions, 10 deletions

diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index 993e427b3..a33380221 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -15,33 +15,38 @@ 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.
      */
-     onHandleDown = (e: React.PointerEvent, handleNum: 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");
             const screenScale = this.props.ScreenToLocalTransform().Scale;
-            document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, handleNum), true);
+
+            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, handleNum, this._brokenIndices);
+                    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, handleIndex: number) => {
+    onBreakTangent = (e: KeyboardEvent, controlIndex: 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);
+            if (!InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) {
+                InkStrokeProperties.Instance?._brokenIndices.push(controlIndex);
             }
         }
     }
@@ -49,6 +54,8 @@ export class InkHandles extends React.Component<InkControlProps> {
     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 handlePoints: HandlePoint[] = [];
         const handleLines: HandleLine[] = [];