working on control points

2 files changed, 23 insertions, 7 deletions

diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 6213a4075..46377380a 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -121,8 +121,8 @@ export class InkControls extends React.Component<InkControlProps> {
                         <rect
                             x={(control.X - left - strokeWidth / 2) * scaleX}
                             y={(control.Y - top - strokeWidth / 2) * scaleY}
-                            height={this._overControl === i ? strokeWidth * 1.5 : strokeWidth}
-                            width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth}
+                            height={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3}
+                            width={this._overControl === i ? strokeWidth * 6 : strokeWidth * 3}
                             strokeWidth={strokeWidth / 6} stroke={Colors.MEDIUM_BLUE}
                             fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
                             onPointerDown={(e) => {
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index e713cedee..771419937 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -126,6 +126,11 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
 
         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,
+            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);
+
         return <div className="inkstroke-UI" style={{
             left: screenOrigin[0],
             top: screenOrigin[1],
@@ -135,7 +140,20 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),
                 StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker),
                 StrCast(inkDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false)}
-
+            {this._properties?._controlButton ?
+                <>
+                    <InkControls
+                        inkDoc={inkDoc}
+                        data={screenPts}
+                        addedPoints={addedPoints}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]}
+                        ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
+                    <InkHandles
+                        inkDoc={inkDoc}
+                        data={screenPts}
+                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0]]}
+                        ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
+                </> : ""}
         </div>
     }
 
@@ -161,8 +179,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const clickableLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, "transparent", inkStrokeWidth, inkStrokeWidth + 15, StrCast(this.layoutDoc.strokeBezier),
             StrCast(this.layoutDoc.fillColor, "none"), "none", "none", undefined, inkScaleX, inkScaleY, "", this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", 0.0, true);
         // Set of points rendered upon the ink that can be added if a user clicks on one.
-        const addedPoints = InteractionUtils.CreatePoints(inkData, inkLeft, inkTop, strokeColor, inkStrokeWidth, inkStrokeWidth, 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);
 
         return (
             <svg className="inkStroke"
@@ -186,7 +202,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 {clickableLine}
                 {inkLine}
                 {/* {this.props.isSelected() ? selectedLine : ""} */}
-                {this.props.isSelected() && this._properties?._controlButton ?
+                {/* {this.props.isSelected() && this._properties?._controlButton ?
                     <>
                         <InkControls
                             inkDoc={inkDoc}
@@ -199,7 +215,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                             data={inkData}
                             format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
                             ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                    </> : ""}
+                    </> : ""} */}
             </svg>
         );
     }