added textboxes inside closed ink strokes

1 files changed, 26 insertions, 4 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index ecb46a5b3..95dad5c6e 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -1,13 +1,13 @@
 import React = require("react");
 import { action, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc } from "../../fields/Doc";
+import { Doc, HeightSym, WidthSym } from "../../fields/Doc";
 import { documentSchema } from "../../fields/documentSchemas";
 import { InkData, InkField, InkTool } from "../../fields/InkField";
 import { makeInterface } from "../../fields/Schema";
 import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
 import { TraceMobx } from "../../fields/util";
-import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../Utils";
+import { emptyFunction, returnFalse, setupMoveUpEvents, OmitKeys } from "../../Utils";
 import { CognitiveServices } from "../cognitive_services/CognitiveServices";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { InteractionUtils } from "../util/InteractionUtils";
@@ -22,6 +22,7 @@ import { InkTangentHandles } from "./InkTangentHandles";
 import { FieldView, FieldViewProps } from "./nodes/FieldView";
 import Color = require("color");
 import { Transform } from "../util/Transform";
+import { FormattedTextBox } from "./nodes/formattedText/FormattedTextBox";
 
 type InkDocument = makeInterface<[typeof documentSchema]>;
 const InkDocument = makeInterface(documentSchema);
@@ -252,9 +253,11 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             undefined, inkScaleX, inkScaleY, "", this.props.pointerEvents ?? (this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted"), 0.0, false);
         // Set of points rendered upon the ink that can be added if a user clicks on one.
 
-        return (
+        return <div className="inkStroke-wrapper" style={{ display: "flex", alignItems: "center", height: "100%" }}>
             <svg className="inkStroke"
                 style={{
+                    width: "100%",
+                    height: "100%",
                     pointerEvents: "none",
                     transform: this.props.Document.isInkMask ? `translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined,
                     mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset",
@@ -275,7 +278,26 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 {clickableLine}
                 {inkLine}
             </svg>
-        );
+            {!closed ? (null) :
+                <div className="inkStroke-text" style={{
+                    color: StrCast(this.layoutDoc.textColor, "black"),
+                    pointerEvents: this.props.isDocumentActive?.() ? "all" : undefined,
+                    width: this.layoutDoc[WidthSym](),
+                }}>
+                    <FormattedTextBox
+                        {...OmitKeys(this.props, ['children']).omit}
+                        yPadding={10}
+                        xPadding={10}
+                        fieldKey={"text"}
+                        fontSize={12}
+                        dontRegisterView={true}
+                        noSidebar={true}
+                        dontScale={true}
+                        isContentActive={this.isContentActive}
+                    />
+                </div>
+            }
+        </div>;
     }
 }