From bc654229325e8bbd30c0b3e464c7e66fa0fbc609 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 28 Sep 2021 18:03:07 -0400
Subject: a bunch of code cleanup for inkingstrokes

---
 src/client/views/InkHandles.tsx | 44 ++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/client/views/InkHandles.tsx')

diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index 1a514bdce..dbe9ca027 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -14,13 +14,13 @@ import { InkStrokeProperties } from "./InkStrokeProperties";
 
 export interface InkHandlesProps {
     inkDoc: Doc;
-    data: InkData;
-    format: number[];
+    screenCtrlPoints: InkData;
+    screenSpaceLineWidth: number;
     ScreenToLocalTransform: () => Transform;
 }
 
 @observer
-export class InkHandles extends React.Component<InkHandlesProps> {
+export class InkTangentHandles 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.
@@ -32,8 +32,8 @@ export class InkHandles extends React.Component<InkHandlesProps> {
             const screenScale = this.props.ScreenToLocalTransform().Scale;
             const order = handleIndex % 4;
             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;
+            const oppositeHandleIndex = (oppositeHandleRawIndex < 0 ? this.props.screenCtrlPoints.length + oppositeHandleRawIndex : oppositeHandleRawIndex) % this.props.screenCtrlPoints.length;
+            const controlIndex = (order === 1 ? handleIndex - 1 : handleIndex + 2) % this.props.screenCtrlPoints.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);
@@ -52,10 +52,10 @@ export class InkHandles extends React.Component<InkHandlesProps> {
     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 closed = this.props.screenCtrlPoints.lastElement().X === this.props.screenCtrlPoints[0].X && this.props.screenCtrlPoints.lastElement().Y === this.props.screenCtrlPoints[0].Y;
             const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List;
             if (!brokenIndices?.includes(controlIndex) &&
-                ((controlIndex > 0 && controlIndex < this.props.data.length - 1) || closed)) {
+                ((controlIndex > 0 && controlIndex < this.props.screenCtrlPoints.length - 1) || closed)) {
                 brokenIndices.push(controlIndex);
                 doc.brokenInkIndices = brokenIndices;
             }
@@ -67,14 +67,14 @@ export class InkHandles extends React.Component<InkHandlesProps> {
         if (!formatInstance) return (null);
 
         // Accessing the current ink's data and extracting all handle points and handle lines.
-        const data = this.props.data;
+        const data = this.props.screenCtrlPoints;
         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 ? (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 });
+                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 });
             }
             // Adding first and last (single) handle lines.
             if (closed) {
@@ -88,19 +88,19 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                 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 });
             }
         }
-        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
+        const screenSpaceLineWidth = this.props.screenSpaceLineWidth;
 
         return (
             <>
                 {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}
+                            cx={pts.X}
+                            cy={pts.Y}
                             r={screenSpaceLineWidth * 2}
                             strokeWidth={0}
                             fill={Colors.MEDIUM_BLUE}
-                            onPointerDown={(e) => this.onHandleDown(e, pts.I)}
+                            onPointerDown={e => this.onHandleDown(e, pts.I)}
                             pointerEvents="all"
                             cursor="default"
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
@@ -108,18 +108,18 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                 {handleLines.map((pts, i) =>
                     <svg height="100" width="100" key={`line${i}`}>
                         <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}
+                            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"} />
                         <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}
+                            x1={pts.X2}
+                            y1={pts.Y2}
+                            x2={pts.X3}
+                            y2={pts.Y3}
                             stroke={Colors.MEDIUM_BLUE}
                             strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
-- 
cgit v1.2.3-70-g09d2