1 files changed, 22 insertions, 16 deletions
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index afe94cdfb..1a514bdce 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -31,10 +31,11 @@ export class InkHandles extends React.Component<InkHandlesProps> {
             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);
+            const oppositeHandleRawIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
+            const oppositeHandleIndex = (oppositeHandleRawIndex < 0 ? this.props.data.length + oppositeHandleRawIndex : oppositeHandleRawIndex) % this.props.data.length;
+            const controlIndex = (order === 1 ? handleIndex - 1 : handleIndex + 2) % this.props.data.length;
             setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
+                if (e.altKey) this.onBreakTangent(controlIndex);
                 InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex);
                 return false;
             }, () => controlUndo?.end(), emptyFunction
@@ -48,15 +49,14 @@ export class InkHandles extends React.Component<InkHandlesProps> {
      * @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);
-                }
+    onBreakTangent = (controlIndex: number) => {
+        const doc = this.props.inkDoc;
+        if (doc) {
+            const closed = this.props.data.lastElement().X === this.props.data[0].X && this.props.data.lastElement().Y === this.props.data[0].Y;
+            const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List;
+            if (!brokenIndices?.includes(controlIndex) &&
+                ((controlIndex > 0 && controlIndex < this.props.data.length - 1) || closed)) {
+                brokenIndices.push(controlIndex);
                 doc.brokenInkIndices = brokenIndices;
             }
         }
@@ -70,14 +70,20 @@ export class InkHandles extends React.Component<InkHandlesProps> {
         const data = this.props.data;
         const handlePoints: HandlePoint[] = [];
         const handleLines: HandleLine[] = [];
+        const closed = data.lastElement().X === data[0].X && data.lastElement().Y === data[0].Y;
         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 });
+                handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? (closed ? data.length - 1 : 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 ? (closed ? (i + 4) % 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 });
+            if (closed) {
+                handleLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: data.length - 1 });
+            }
+            else {
+                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 });
             }