fixed filling of curves. added toggling of brokenindex with right-click. changed look of ink handles to be lighter weight and to reflect brokenindex sttate

1 files changed, 27 insertions, 28 deletions

diff --git a/src/client/views/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx
index 759e48134..4f1a406c2 100644
--- a/src/client/views/InkTangentHandles.tsx
+++ b/src/client/views/InkTangentHandles.tsx
@@ -68,62 +68,61 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> {
 
         // Accessing the current ink's data and extracting all handle points and handle lines.
         const data = this.props.screenCtrlPoints;
-        const handlePoints: HandlePoint[] = [];
-        const handleLines: HandleLine[] = [];
+        const tangentHandles: HandlePoint[] = [];
+        const tangentLines: 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({ ...data[i + 1], I: i + 1, dot1: i, dot2: i === 0 ? (closed ? data.length - 1 : i) : i - 1 });
-                handlePoints.push({ ...data[i + 2], I: i + 2, dot1: i + 3, dot2: i === data.length ? (closed ? (i + 4) % data.length : i + 3) : i + 4 });
+                tangentHandles.push({ ...data[i + 1], I: i + 1, dot1: i, dot2: i === 0 ? (closed ? data.length - 1 : i) : i - 1 });
+                tangentHandles.push({ ...data[i + 2], 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.
             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 });
+                tangentLines.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 });
+                tangentLines.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 });
+                tangentLines.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 });
+                tangentLines.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 screenSpaceLineWidth = this.props.screenSpaceLineWidth;
 
         return (
             <>
-                {handlePoints.map((pts, i) =>
+                {tangentHandles.map((pts, i) =>
                     <svg height="10" width="10" key={`hdl${i}`}>
                         <circle
                             cx={pts.X}
                             cy={pts.Y}
                             r={screenSpaceLineWidth * 2}
-                            strokeWidth={0}
-                            fill={Colors.MEDIUM_BLUE}
+                            fill={"transparent"}
+                            strokeWidth={1}
+                            stroke={Colors.MEDIUM_BLUE}
+                            strokeDasharray={"1 1"}
                             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}
-                            y1={pts.Y1}
-                            x2={pts.X2}
-                            y2={pts.Y2}
-                            stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={screenSpaceLineWidth}
-                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
+                {tangentLines.map((pts, i) => {
+                    const tangentLine = (x1: number, y1: number, x2: number, y2: number) =>
                         <line
-                            x1={pts.X2}
-                            y1={pts.Y2}
-                            x2={pts.X3}
-                            y2={pts.Y3}
+                            x1={x1}
+                            y1={y1}
+                            x2={x2}
+                            y2={y2}
                             stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={screenSpaceLineWidth}
-                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
-                    </svg>)}
+                            strokeDasharray={"1 1"}
+                            strokeWidth={1}
+                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />;
+                    return <svg height="100" width="100" key={`line${i}`}>
+                        {tangentLine(pts.X1, pts.Y1, pts.X2, pts.Y2)}
+                        {tangentLine(pts.X2, pts.Y2, pts.X3, pts.Y3)}
+                    </svg>;
+                })}
             </>
         );
     }