From abc5f96945fc0716fb1ccb4c99005bc7b7473086 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 14 Sep 2021 15:49:21 -0400
Subject: fixed adding a new point on an ink stroke

---
 src/client/views/InkControls.tsx | 119 ++++++++++++++++++++-------------------
 1 file changed, 62 insertions(+), 57 deletions(-)

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

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index e4861c086..4df7ee813 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -1,20 +1,22 @@
 import React = require("react");
-import { observable, action } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
-import { InkStrokeProperties } from "./InkStrokeProperties";
-import { setupMoveUpEvents, emptyFunction } from "../../Utils";
-import { UndoManager } from "../util/UndoManager";
-import { ControlPoint, InkData, PointData } from "../../fields/InkField";
-import { Transform } from "../util/Transform";
-import { Colors } from "./global/globalEnums";
 import { Doc } from "../../fields/Doc";
+import { ControlPoint, InkData, PointData } from "../../fields/InkField";
 import { listSpec } from "../../fields/Schema";
 import { Cast } from "../../fields/Types";
+import { setupMoveUpEvents } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { UndoManager } from "../util/UndoManager";
+import { Colors } from "./global/globalEnums";
+import { InkStrokeProperties } from "./InkStrokeProperties";
 
 export interface InkControlProps {
     inkDoc: Doc;
-    data: InkData;
-    addedPoints: PointData[];
+    inkCtrlPoints: InkData;
+    screenCtrlPoints: InkData;
+    inkStrokeSamplePts: PointData[];
+    screenStrokeSamplePoints: PointData[];
     format: number[];
     ScreenToLocalTransform: () => Transform;
 }
@@ -87,57 +89,60 @@ export class InkControls extends React.Component<InkControlProps> {
         if (!formatInstance) return (null);
 
         // Accessing the current ink's data and extracting all control points.
-        const data = this.props.data;
-        const controlPoints: ControlPoint[] = [];
-        if (data.length >= 4) {
-            for (let i = 0; i <= data.length - 4; i += 4) {
-                controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i });
-                controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 });
-            }
+        const scrData = this.props.screenCtrlPoints;
+        const sreenCtrlPoints: ControlPoint[] = [];
+        for (let i = 0; i <= scrData.length - 4; i += 4) {
+            sreenCtrlPoints.push({ X: scrData[i].X, Y: scrData[i].Y, I: i });
+            sreenCtrlPoints.push({ X: scrData[i + 3].X, Y: scrData[i + 3].Y, I: i + 3 });
         }
-        const addedPoints = this.props.addedPoints;
+
+        const inkData = this.props.inkCtrlPoints;
+        const inkCtrlPts: ControlPoint[] = [];
+        for (let i = 0; i <= inkData.length - 4; i += 4) {
+            inkCtrlPts.push({ X: inkData[i].X, Y: inkData[i].Y, I: i });
+            inkCtrlPts.push({ X: inkData[i + 3].X, Y: inkData[i + 3].Y, I: i + 3 });
+        }
+
         const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
         const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
-        return (
-            <>
-                {addedPoints.map((pts, i) =>
-                    <svg height="10" width="10" key={`add${i}`}>
-                        <circle
-                            cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            r={strokeWidth / 1.5}
-                            stroke={this._overAddPoint === i ? Colors.MEDIUM_BLUE : "transparent"}
-                            strokeWidth={0} fill={this._overAddPoint === i ? Colors.MEDIUM_BLUE : "transparent"}
-                            onPointerDown={() => { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }}
-                            onMouseEnter={() => this.onEnterAddPoint(i)}
-                            onMouseLeave={this.onLeaveAddPoint}
-                            pointerEvents="all"
-                            cursor="all-scroll"
-                        />
-                    </svg>
-                )}
-                {controlPoints.map((control, i) =>
-                    <svg height="10" width="10" key={`ctrl${i}`}>
-                        <rect
-                            x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2}
-                            y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize(i) / 2}
-                            height={rectHdlSize(i)}
-                            width={rectHdlSize(i)}
-                            strokeWidth={screenSpaceLineWidth / 2}
-                            stroke={Colors.MEDIUM_BLUE}
-                            fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
-                            onPointerDown={(e) => {
-                                this.changeCurrPoint(control.I);
-                                this.onControlDown(e, control.I);
-                            }}
-                            onMouseEnter={() => this.onEnterControl(i)}
-                            onMouseLeave={this.onLeaveControl}
-                            pointerEvents="all"
-                            cursor="default"
-                        />
-                    </svg>
-                )}
-            </>
+        return (<svg>
+            {/*   should really have just one circle here that represents the neqraest point on the stroke to the users hover point.
+                   This points should be passed as a prop from InkingStroke's UI which should set it in its onPointerOver method  */}
+            {this.props.screenStrokeSamplePoints.map((pts, i) =>
+                <circle key={i}
+                    cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
+                    cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+                    r={screenSpaceLineWidth * 4}
+                    fill={this._overAddPoint === i ? "#00007777" : "transparent"}
+                    stroke={this._overAddPoint === i ? "#00007777" : "transparent"}
+                    strokeWidth={0}
+                    onPointerDown={() => formatInstance?.addPoints(this.props.inkStrokeSamplePts[i].X, this.props.inkStrokeSamplePts[i].Y, this.props.inkStrokeSamplePts, i, inkCtrlPts)}
+                    onMouseEnter={() => this.onEnterAddPoint(i)}
+                    onMouseLeave={this.onLeaveAddPoint}
+                    pointerEvents="all"
+                    cursor="all-scroll"
+                />
+            )}
+            {sreenCtrlPoints.map((control, i) =>
+                <rect key={i}
+                    x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2}
+                    y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize(i) / 2}
+                    height={rectHdlSize(i)}
+                    width={rectHdlSize(i)}
+                    strokeWidth={screenSpaceLineWidth / 2}
+                    stroke={Colors.MEDIUM_BLUE}
+                    fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
+                    onPointerDown={(e) => {
+                        this.changeCurrPoint(control.I);
+                        this.onControlDown(e, control.I);
+                    }}
+                    onMouseEnter={() => this.onEnterControl(i)}
+                    onMouseLeave={this.onLeaveControl}
+                    pointerEvents="all"
+                    cursor="default"
+                />
+            )}
+        </svg>
         );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

