From 7e439440a1d7fc3e3b29333b0502d6ed4d178309 Mon Sep 17 00:00:00 2001
From: vkalev <vjk1883@gmail.com>
Date: Wed, 18 Aug 2021 12:12:23 -0400
Subject: highlighter tool added & working

---
 src/client/views/InkHandles.tsx | 2 --
 1 file changed, 2 deletions(-)

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

diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index 0b24c3c32..b9f75f8d7 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -16,7 +16,6 @@ import { GestureOverlay } from "./GestureOverlay";
 export interface InkHandlesProps {
     inkDoc: Doc;
     data: InkData;
-    shape?: string;
     format: number[];
     ScreenToLocalTransform: () => Transform;
 }
@@ -70,7 +69,6 @@ export class InkHandles extends React.Component<InkHandlesProps> {
 
         // Accessing the current ink's data and extracting all handle points and handle lines.
         const data = this.props.data;
-        const shape = this.props.shape;
         const handlePoints: HandlePoint[] = [];
         const handleLines: HandleLine[] = [];
         if (data.length >= 4) {
-- 
cgit v1.2.3-70-g09d2


From c316b836b5fae84546eac15ae74833d31cb1318d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 14 Sep 2021 15:09:35 -0400
Subject: fixed handle size/placement for ink editing.

---
 src/client/views/InkControls.tsx  | 14 +++++++-------
 src/client/views/InkHandles.tsx   |  8 ++++----
 src/client/views/InkingStroke.tsx |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

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

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 46377380a..b62239c4f 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -96,8 +96,8 @@ export class InkControls extends React.Component<InkControlProps> {
             }
         }
         const addedPoints = this.props.addedPoints;
-        const [left, top, scaleX, scaleY, strokeWidth] = this.props.format;
-
+        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
+        const rectHdlSize = this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
         return (
             <>
                 {addedPoints.map((pts, i) =>
@@ -119,11 +119,11 @@ export class InkControls extends React.Component<InkControlProps> {
                 {controlPoints.map((control, i) =>
                     <svg height="10" width="10" key={`ctrl${i}`}>
                         <rect
-                            x={(control.X - left - strokeWidth / 2) * scaleX}
-                            y={(control.Y - top - strokeWidth / 2) * scaleY}
-                            height={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3}
-                            width={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3}
-                            strokeWidth={strokeWidth / 6} stroke={Colors.MEDIUM_BLUE}
+                            x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize / 2}
+                            y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize / 2}
+                            height={rectHdlSize}
+                            width={rectHdlSize}
+                            strokeWidth={screenSpaceLineWidth / 2} stroke={Colors.MEDIUM_BLUE}
                             fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
                             onPointerDown={(e) => {
                                 this.changeCurrPoint(control.I);
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index b9f75f8d7..4e3a842d0 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -83,7 +83,7 @@ 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] = this.props.format;
+        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
 
         return (
             <>
@@ -92,7 +92,7 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                         <circle
                             cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                             cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            r={strokeWidth / 2}
+                            r={screenSpaceLineWidth * 2}
                             strokeWidth={0}
                             fill={Colors.MEDIUM_BLUE}
                             onPointerDown={(e) => this.onHandleDown(e, pts.I)}
@@ -108,7 +108,7 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                             x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                             y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                             stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={strokeWidth / 4}
+                            strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                         <line
                             x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
@@ -116,7 +116,7 @@ export class InkHandles extends React.Component<InkHandlesProps> {
                             x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
                             y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
                             stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={strokeWidth / 4}
+                            strokeWidth={screenSpaceLineWidth}
                             display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
                     </svg>)}
             </>
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 771419937..06d15a108 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -146,12 +146,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                         inkDoc={inkDoc}
                         data={screenPts}
                         addedPoints={addedPoints}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                     <InkHandles
                         inkDoc={inkDoc}
                         data={screenPts}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                 </> : ""}
         </div>
-- 
cgit v1.2.3-70-g09d2


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 ++++++++++++++++++++------------------
 src/client/views/InkHandles.tsx   |  15 +++--
 src/client/views/InkingStroke.tsx |  25 ++++----
 3 files changed, 83 insertions(+), 76 deletions(-)

(limited to 'src/client/views/InkHandles.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
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index 4e3a842d0..afe94cdfb 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -1,17 +1,16 @@
 import React = require("react");
-import { observable, action } from "mobx";
+import { action } from "mobx";
 import { observer } from "mobx-react";
-import { InkStrokeProperties } from "./InkStrokeProperties";
-import { setupMoveUpEvents, emptyFunction } from "../../Utils";
-import { UndoManager } from "../util/UndoManager";
-import { InkData, HandlePoint, HandleLine } from "../../fields/InkField";
-import { Transform } from "../util/Transform";
 import { Doc } from "../../fields/Doc";
-import { listSpec } from "../../fields/Schema";
+import { HandleLine, HandlePoint, InkData } from "../../fields/InkField";
 import { List } from "../../fields/List";
+import { listSpec } from "../../fields/Schema";
 import { Cast } from "../../fields/Types";
+import { emptyFunction, setupMoveUpEvents } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { UndoManager } from "../util/UndoManager";
 import { Colors } from "./global/globalEnums";
-import { GestureOverlay } from "./GestureOverlay";
+import { InkStrokeProperties } from "./InkStrokeProperties";
 
 export interface InkHandlesProps {
     inkDoc: Doc;
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 06d15a108..768808569 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -115,28 +115,29 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
     }
 
     componentUI = (boundsLeft: number, boundsTop: number) => {
-        const { inkData, inkScaleX, inkScaleY, inkStrokeWidth } = this.inkScaledData();
+        const inkDoc = this.props.Document;
+        const screenSpaceCenterlineStrokeWidth = 3;  // the width of the blue line widget that shows the centerline of the ink stroke
+        const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
 
         const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
         const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X, point.Y)).map(p => ({ X: p[0], Y: p[1] }));
         const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth[0] / 2;
         const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2;
-
-        const inkDoc = this.props.Document;
-
-        const overlayWidth = 3;
         const screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
 
-        const addedPoints = InteractionUtils.CreatePoints(inkData, screenLeft, screenTop, StrCast(inkDoc.strokeColor, "none"), screenInkWidth[0], overlayWidth,
+        const screenSpaceSamplePoints = InteractionUtils.CreatePoints(screenPts, screenLeft, screenTop, StrCast(inkDoc.strokeColor, "none"), screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
             StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
             StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false);
+        const inkSpaceSamplePoints = InteractionUtils.CreatePoints(inkData, inkLeft, inkTop, StrCast(inkDoc.strokeColor, "none"), inkStrokeWidth, screenSpaceCenterlineStrokeWidth,
+            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
+            StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), 1, 1, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false);
 
         return <div className="inkstroke-UI" style={{
             left: screenOrigin[0],
             top: screenOrigin[1],
             clip: `rect(${boundsTop - screenOrigin[1]}px, 10000px, 10000px, ${boundsLeft - screenOrigin[0]}px)`
         }} >
-            {InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, screenInkWidth[0], overlayWidth,
+            {InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
                 StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),
                 StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker),
                 StrCast(inkDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false)}
@@ -144,14 +145,16 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 <>
                     <InkControls
                         inkDoc={inkDoc}
-                        data={screenPts}
-                        addedPoints={addedPoints}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]}
+                        inkCtrlPoints={inkData}
+                        screenCtrlPoints={screenPts}
+                        inkStrokeSamplePts={inkSpaceSamplePoints}
+                        screenStrokeSamplePoints={screenSpaceSamplePoints}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                     <InkHandles
                         inkDoc={inkDoc}
                         data={screenPts}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], overlayWidth]}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                 </> : ""}
         </div>
-- 
cgit v1.2.3-70-g09d2

