1 files changed, 26 insertions, 7 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index b8ab0c4d8..8461930bc 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -21,6 +21,7 @@ import { InkControls } from "./InkControls";
 import { InkHandles } from "./InkHandles";
 import { Colors } from "./global/globalEnums";
 import { GestureOverlay } from "./GestureOverlay";
+import { isThisTypeNode } from "typescript";
 
 type InkDocument = makeInterface<[typeof documentSchema]>;
 const InkDocument = makeInterface(documentSchema);
@@ -38,6 +39,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         // this._previousColor = ActiveInkColor();
     }
 
+    componentDidMount() {
+        this.props.setContentView?.(this);
+    }
+
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(InkingStroke, fieldStr);
     }
@@ -88,8 +93,9 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         // }
     }
 
-    public static inkScaling(inkDoc: Doc, inkData: InkData, panelWidth: number, panelHeight: number) {
-        const inkStrokeWidth = NumCast(inkDoc.strokeWidth, 1);
+    inkScaledData = () => {
+        const inkData: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
+        const inkStrokeWidth = NumCast(this.rootDoc.strokeWidth, 1);
         const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2;
         const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2;
         const inkLeft = Math.min(...inkData.map(p => p.X)) - inkStrokeWidth / 2;
@@ -102,10 +108,23 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             inkLeft,
             inkWidth,
             inkHeight,
-            inkScaleX: inkHeight === inkStrokeWidth ? 1 : (panelWidth - inkStrokeWidth) / (inkWidth - inkStrokeWidth),
-            inkScaleY: inkWidth === inkStrokeWidth ? 1 : (panelHeight - inkStrokeWidth) / (inkHeight - inkStrokeWidth)
+            inkScaleX: inkHeight === inkStrokeWidth ? 1 : (this.props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth),
+            inkScaleY: inkWidth === inkStrokeWidth ? 1 : (this.props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth)
         };
     }
+
+    screenStrokeData = () => {
+        const inkData: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
+        const { inkScaleX, inkScaleY, inkStrokeWidth } = this.inkScaledData();
+
+        const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
+        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X * inkScaleX, point.Y * inkScaleY)).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;
+
+        return { screenPts, screenLeft, screenTop };
+    }
+
     render() {
         TraceMobx();
         this.toggleControlButton();
@@ -114,7 +133,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         const inkDoc: Doc = this.layoutDoc;
 
-        const { inkStrokeWidth, inkLeft, inkTop, inkScaleX, inkScaleY, inkWidth, inkHeight } = InkingStroke.inkScaling(inkDoc, data, this.props.PanelWidth(), this.props.PanelHeight());
+        const { inkStrokeWidth, inkLeft, inkTop, inkScaleX, inkScaleY, inkWidth, inkHeight } = this.inkScaledData();
 
         const strokeColor = StrCast(this.layoutDoc.color, "");
         const dotsize = Math.max(inkWidth * inkScaleX, inkHeight * inkScaleY) / 40;
@@ -160,12 +179,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                             inkDoc={inkDoc}
                             data={data}
                             addedPoints={addedPoints}
-                            format={[lineLeft, lineTop, scaleX, scaleY, inkStrokeWidth]}
+                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
                             ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                         <InkHandles
                             inkDoc={inkDoc}
                             data={data}
-                            format={[lineLeft, lineTop, scaleX, scaleY, inkStrokeWidth]}
+                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
                             ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                     </> : ""}
             </svg>