@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/shapes/text/TextShapeUtil.mjs

@@ -0,0 +1,334 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  DefaultFontFamilies,
+  HTMLContainer,
+  Rectangle2d,
+  ShapeUtil,
+  Vec2d,
+  WeakMapCache,
+  getDefaultColorTheme,
+  stopEventPropagation,
+  textShapeMigrations,
+  textShapeProps,
+  toDomPrecision,
+  useEditor
+} from "@bigbluebutton/editor";
+import { createTextSvgElementFromSpans } from "../shared/createTextSvgElementFromSpans.mjs";
+import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from "../shared/default-shape-constants.mjs";
+import { getFontDefForExport } from "../shared/defaultStyleDefs.mjs";
+import { resizeScaled } from "../shared/resizeScaled.mjs";
+import { useEditableText } from "../shared/useEditableText.mjs";
+const sizeCache = new WeakMapCache();
+class TextShapeUtil extends ShapeUtil {
+  static type = "text";
+  static props = textShapeProps;
+  static migrations = textShapeMigrations;
+  getDefaultProps() {
+    return {
+      color: "black",
+      size: "m",
+      w: 8,
+      text: "",
+      font: "draw",
+      align: "middle",
+      autoSize: true,
+      scale: 1
+    };
+  }
+  getMinDimensions(shape) {
+    return sizeCache.get(shape.props, (props) => getTextSize(this.editor, props));
+  }
+  getGeometry(shape) {
+    const { scale } = shape.props;
+    const { width, height } = this.getMinDimensions(shape);
+    return new Rectangle2d({
+      width: width * scale,
+      height: height * scale,
+      isFilled: true
+    });
+  }
+  canEdit = () => true;
+  isAspectRatioLocked = () => true;
+  component(shape) {
+    const {
+      id,
+      type,
+      props: { text, color }
+    } = shape;
+    const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() });
+    const { width, height } = this.getMinDimensions(shape);
+    const {
+      rInput,
+      isEmpty,
+      isEditing,
+      handleFocus,
+      handleChange,
+      handleKeyDown,
+      handleBlur,
+      handleInputPointerDown,
+      handleDoubleClick
+    } = useEditableText(id, type, text);
+    return /* @__PURE__ */ jsx(HTMLContainer, { id: shape.id, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tl-text-shape__wrapper tl-text-shadow",
+        "data-font": shape.props.font,
+        "data-align": shape.props.align,
+        "data-hastext": !isEmpty,
+        "data-isediting": isEditing,
+        "data-textwrap": true,
+        style: {
+          fontSize: FONT_SIZES[shape.props.size],
+          lineHeight: FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight + "px",
+          transform: `scale(${shape.props.scale})`,
+          transformOrigin: "top left",
+          width: Math.max(1, width),
+          height: Math.max(FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight, height),
+          color: theme[color].solid
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "tl-text tl-text-content", dir: "ltr", children: text }),
+          isEditing ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: rInput,
+              className: "tl-text tl-text-input",
+              name: "text",
+              tabIndex: -1,
+              autoComplete: "false",
+              autoCapitalize: "false",
+              autoCorrect: "false",
+              autoSave: "false",
+              autoFocus: isEditing,
+              placeholder: "",
+              spellCheck: "true",
+              wrap: "off",
+              dir: "ltr",
+              datatype: "wysiwyg",
+              defaultValue: text,
+              onFocus: handleFocus,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              onTouchEnd: stopEventPropagation,
+              onContextMenu: stopEventPropagation,
+              onPointerDown: handleInputPointerDown,
+              onDoubleClick: handleDoubleClick
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+  indicator(shape) {
+    const bounds = this.editor.getShapeGeometry(shape).bounds;
+    const editor = useEditor();
+    if (shape.props.autoSize && editor.getEditingShapeId() === shape.id)
+      return null;
+    return /* @__PURE__ */ jsx("rect", { width: toDomPrecision(bounds.width), height: toDomPrecision(bounds.height) });
+  }
+  toSvg(shape, ctx) {
+    ctx.addExportDef(getFontDefForExport(shape.props.font));
+    const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() });
+    const bounds = this.editor.getShapeGeometry(shape).bounds;
+    const text = shape.props.text;
+    const width = bounds.width / (shape.props.scale ?? 1);
+    const height = bounds.height / (shape.props.scale ?? 1);
+    const opts = {
+      fontSize: FONT_SIZES[shape.props.size],
+      fontFamily: DefaultFontFamilies[shape.props.font],
+      textAlign: shape.props.align,
+      verticalTextAlign: "middle",
+      width,
+      height,
+      padding: 0,
+      // no padding?
+      lineHeight: TEXT_PROPS.lineHeight,
+      fontStyle: "normal",
+      fontWeight: "normal",
+      overflow: "wrap"
+    };
+    const color = theme[shape.props.color].solid;
+    const groupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const textBgEl = createTextSvgElementFromSpans(
+      this.editor,
+      this.editor.textMeasure.measureTextSpans(text, opts),
+      {
+        ...opts,
+        stroke: theme.background,
+        strokeWidth: 2,
+        fill: theme.background,
+        padding: 0
+      }
+    );
+    const textElm = textBgEl.cloneNode(true);
+    textElm.setAttribute("fill", color);
+    textElm.setAttribute("stroke", "none");
+    groupEl.append(textBgEl);
+    groupEl.append(textElm);
+    return groupEl;
+  }
+  onResize = (shape, info) => {
+    const { initialBounds, initialShape, scaleX, handle } = info;
+    if (info.mode === "scale_shape" || handle !== "right" && handle !== "left") {
+      return {
+        id: shape.id,
+        type: shape.type,
+        ...resizeScaled(shape, info)
+      };
+    } else {
+      const prevWidth = initialBounds.width;
+      let nextWidth = prevWidth * scaleX;
+      const offset = new Vec2d(0, 0);
+      nextWidth = Math.max(1, Math.abs(nextWidth));
+      if (handle === "left") {
+        offset.x = prevWidth - nextWidth;
+        if (scaleX < 0) {
+          offset.x += nextWidth;
+        }
+      } else {
+        if (scaleX < 0) {
+          offset.x -= nextWidth;
+        }
+      }
+      const { x, y } = offset.rot(shape.rotation).add(initialShape);
+      return {
+        id: shape.id,
+        type: shape.type,
+        x,
+        y,
+        props: {
+          w: nextWidth / initialShape.props.scale,
+          autoSize: false
+        }
+      };
+    }
+  };
+  onBeforeCreate = (shape) => {
+    if (!shape.props.autoSize)
+      return;
+    if (shape.props.text.trim())
+      return;
+    const bounds = this.getMinDimensions(shape);
+    return {
+      ...shape,
+      x: shape.x - bounds.width / 2,
+      y: shape.y - bounds.height / 2
+    };
+  };
+  onEditEnd = (shape) => {
+    const {
+      id,
+      type,
+      props: { text }
+    } = shape;
+    const trimmedText = shape.props.text.trimEnd();
+    if (trimmedText.length === 0) {
+      this.editor.deleteShapes([shape.id]);
+    } else {
+      if (trimmedText !== shape.props.text) {
+        this.editor.updateShapes([
+          {
+            id,
+            type,
+            props: {
+              text: text.trimEnd()
+            }
+          }
+        ]);
+      }
+    }
+  };
+  onBeforeUpdate = (prev, next) => {
+    if (!next.props.autoSize)
+      return;
+    const styleDidChange = prev.props.size !== next.props.size || prev.props.align !== next.props.align || prev.props.font !== next.props.font || prev.props.scale !== 1 && next.props.scale === 1;
+    const textDidChange = prev.props.text !== next.props.text;
+    if (!styleDidChange && !textDidChange)
+      return;
+    const boundsA = this.getMinDimensions(prev);
+    const boundsB = getTextSize(this.editor, next.props);
+    const wA = boundsA.width * prev.props.scale;
+    const hA = boundsA.height * prev.props.scale;
+    const wB = boundsB.width * next.props.scale;
+    const hB = boundsB.height * next.props.scale;
+    let delta;
+    switch (next.props.align) {
+      case "middle": {
+        delta = new Vec2d((wB - wA) / 2, textDidChange ? 0 : (hB - hA) / 2);
+        break;
+      }
+      case "end": {
+        delta = new Vec2d(wB - wA, textDidChange ? 0 : (hB - hA) / 2);
+        break;
+      }
+      default: {
+        if (textDidChange)
+          break;
+        delta = new Vec2d(0, (hB - hA) / 2);
+        break;
+      }
+    }
+    if (delta) {
+      delta.rot(next.rotation);
+      const { x, y } = next;
+      return {
+        ...next,
+        x: x - delta.x,
+        y: y - delta.y,
+        props: { ...next.props, w: wB }
+      };
+    } else {
+      return {
+        ...next,
+        props: { ...next.props, w: wB }
+      };
+    }
+  };
+  onDoubleClickEdge = (shape) => {
+    if (!shape.props.autoSize) {
+      return {
+        id: shape.id,
+        type: shape.type,
+        props: {
+          autoSize: true
+        }
+      };
+    }
+    if (shape.props.scale !== 1) {
+      return {
+        id: shape.id,
+        type: shape.type,
+        props: {
+          scale: 1
+        }
+      };
+    }
+  };
+}
+function getTextSize(editor, props) {
+  const { font, text, autoSize, size, w } = props;
+  const minWidth = autoSize ? 16 : Math.max(16, w);
+  const fontSize = FONT_SIZES[size];
+  const cw = autoSize ? null : (
+    // `measureText` floors the number so we need to do the same here to avoid issues.
+    (Math.floor(Math.max(minWidth, w)))
+  );
+  const result = editor.textMeasure.measureText(text, {
+    ...TEXT_PROPS,
+    fontFamily: FONT_FAMILIES[font],
+    fontSize,
+    maxWidth: cw
+  });
+  if (autoSize) {
+    result.w += 1;
+  }
+  return {
+    width: Math.max(minWidth, result.w),
+    height: Math.max(fontSize, result.h)
+  };
+}
+export {
+  TextShapeUtil
+};
+//# sourceMappingURL=TextShapeUtil.mjs.map

package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/text/TextShapeUtil.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n\tDefaultFontFamilies,\n\tEditor,\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tSvgExportContext,\n\tTLOnEditEndHandler,\n\tTLOnResizeHandler,\n\tTLShapeUtilFlag,\n\tTLTextShape,\n\tVec2d,\n\tWeakMapCache,\n\tgetDefaultColorTheme,\n\tstopEventPropagation,\n\ttextShapeMigrations,\n\ttextShapeProps,\n\ttoDomPrecision,\n\tuseEditor,\n} from '@bigbluebutton/editor'\nimport { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'\nimport { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'\nimport { getFontDefForExport } from '../shared/defaultStyleDefs'\nimport { resizeScaled } from '../shared/resizeScaled'\nimport { useEditableText } from '../shared/useEditableText'\n\nconst sizeCache = new WeakMapCache<TLTextShape['props'], { height: number; width: number }>()\n\n/** @public */\nexport class TextShapeUtil extends ShapeUtil<TLTextShape> {\n\tstatic override type = 'text' as const\n\tstatic override props = textShapeProps\n\tstatic override migrations = textShapeMigrations\n\n\tgetDefaultProps(): TLTextShape['props'] {\n\t\treturn {\n\t\t\tcolor: 'black',\n\t\t\tsize: 'm',\n\t\t\tw: 8,\n\t\t\ttext: '',\n\t\t\tfont: 'draw',\n\t\t\talign: 'middle',\n\t\t\tautoSize: true,\n\t\t\tscale: 1,\n\t\t}\n\t}\n\n\tgetMinDimensions(shape: TLTextShape) {\n\t\treturn sizeCache.get(shape.props, (props) => getTextSize(this.editor, props))\n\t}\n\n\tgetGeometry(shape: TLTextShape) {\n\t\tconst { scale } = shape.props\n\t\tconst { width, height } = this.getMinDimensions(shape)!\n\t\treturn new Rectangle2d({\n\t\t\twidth: width * scale,\n\t\t\theight: height * scale,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\toverride canEdit = () => true\n\n\toverride isAspectRatioLocked: TLShapeUtilFlag<TLTextShape> = () => true\n\n\tcomponent(shape: TLTextShape) {\n\t\tconst {\n\t\t\tid,\n\t\t\ttype,\n\t\t\tprops: { text, color },\n\t\t} = shape\n\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\tconst { width, height } = this.getMinDimensions(shape)\n\n\t\tconst {\n\t\t\trInput,\n\t\t\tisEmpty,\n\t\t\tisEditing,\n\t\t\thandleFocus,\n\t\t\thandleChange,\n\t\t\thandleKeyDown,\n\t\t\thandleBlur,\n\t\t\thandleInputPointerDown,\n\t\t\thandleDoubleClick,\n\t\t} = useEditableText(id, type, text)\n\n\t\treturn (\n\t\t\t<HTMLContainer id={shape.id}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"tl-text-shape__wrapper tl-text-shadow\"\n\t\t\t\t\tdata-font={shape.props.font}\n\t\t\t\t\tdata-align={shape.props.align}\n\t\t\t\t\tdata-hastext={!isEmpty}\n\t\t\t\t\tdata-isediting={isEditing}\n\t\t\t\t\tdata-textwrap={true}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tfontSize: FONT_SIZES[shape.props.size],\n\t\t\t\t\t\tlineHeight: FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight + 'px',\n\t\t\t\t\t\ttransform: `scale(${shape.props.scale})`,\n\t\t\t\t\t\ttransformOrigin: 'top left',\n\t\t\t\t\t\twidth: Math.max(1, width),\n\t\t\t\t\t\theight: Math.max(FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight, height),\n\t\t\t\t\t\tcolor: theme[color].solid,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tl-text tl-text-content\" dir=\"ltr\">\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</div>\n\t\t\t\t\t{isEditing ? (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={rInput}\n\t\t\t\t\t\t\tclassName=\"tl-text tl-text-input\"\n\t\t\t\t\t\t\tname=\"text\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\tautoComplete=\"false\"\n\t\t\t\t\t\t\tautoCapitalize=\"false\"\n\t\t\t\t\t\t\tautoCorrect=\"false\"\n\t\t\t\t\t\t\tautoSave=\"false\"\n\t\t\t\t\t\t\tautoFocus={isEditing}\n\t\t\t\t\t\t\tplaceholder=\"\"\n\t\t\t\t\t\t\tspellCheck=\"true\"\n\t\t\t\t\t\t\twrap=\"off\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tdatatype=\"wysiwyg\"\n\t\t\t\t\t\t\tdefaultValue={text}\n\t\t\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\t\t\tonTouchEnd={stopEventPropagation}\n\t\t\t\t\t\t\tonContextMenu={stopEventPropagation}\n\t\t\t\t\t\t\tonPointerDown={handleInputPointerDown}\n\t\t\t\t\t\t\tonDoubleClick={handleDoubleClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: TLTextShape) {\n\t\tconst bounds = this.editor.getShapeGeometry(shape).bounds\n\t\tconst editor = useEditor()\n\t\tif (shape.props.autoSize && editor.getEditingShapeId() === shape.id) return null\n\t\treturn <rect width={toDomPrecision(bounds.width)} height={toDomPrecision(bounds.height)} />\n\t}\n\n\toverride toSvg(shape: TLTextShape, ctx: SvgExportContext) {\n\t\tctx.addExportDef(getFontDefForExport(shape.props.font))\n\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\tconst bounds = this.editor.getShapeGeometry(shape).bounds\n\t\tconst text = shape.props.text\n\n\t\tconst width = bounds.width / (shape.props.scale ?? 1)\n\t\tconst height = bounds.height / (shape.props.scale ?? 1)\n\n\t\tconst opts = {\n\t\t\tfontSize: FONT_SIZES[shape.props.size],\n\t\t\tfontFamily: DefaultFontFamilies[shape.props.font],\n\t\t\ttextAlign: shape.props.align,\n\t\t\tverticalTextAlign: 'middle' as const,\n\t\t\twidth,\n\t\t\theight,\n\t\t\tpadding: 0, // no padding?\n\t\t\tlineHeight: TEXT_PROPS.lineHeight,\n\t\t\tfontStyle: 'normal',\n\t\t\tfontWeight: 'normal',\n\t\t\toverflow: 'wrap' as const,\n\t\t}\n\n\t\tconst color = theme[shape.props.color].solid\n\t\tconst groupEl = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\n\t\tconst textBgEl = createTextSvgElementFromSpans(\n\t\t\tthis.editor,\n\t\t\tthis.editor.textMeasure.measureTextSpans(text, opts),\n\t\t\t{\n\t\t\t\t...opts,\n\t\t\t\tstroke: theme.background,\n\t\t\t\tstrokeWidth: 2,\n\t\t\t\tfill: theme.background,\n\t\t\t\tpadding: 0,\n\t\t\t}\n\t\t)\n\n\t\tconst textElm = textBgEl.cloneNode(true) as SVGTextElement\n\t\ttextElm.setAttribute('fill', color)\n\t\ttextElm.setAttribute('stroke', 'none')\n\n\t\tgroupEl.append(textBgEl)\n\t\tgroupEl.append(textElm)\n\n\t\treturn groupEl\n\t}\n\n\toverride onResize: TLOnResizeHandler<TLTextShape> = (shape, info) => {\n\t\tconst { initialBounds, initialShape, scaleX, handle } = info\n\n\t\tif (info.mode === 'scale_shape' || (handle !== 'right' && handle !== 'left')) {\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\t...resizeScaled(shape, info),\n\t\t\t}\n\t\t} else {\n\t\t\tconst prevWidth = initialBounds.width\n\t\t\tlet nextWidth = prevWidth * scaleX\n\n\t\t\tconst offset = new Vec2d(0, 0)\n\n\t\t\tnextWidth = Math.max(1, Math.abs(nextWidth))\n\n\t\t\tif (handle === 'left') {\n\t\t\t\toffset.x = prevWidth - nextWidth\n\t\t\t\tif (scaleX < 0) {\n\t\t\t\t\toffset.x += nextWidth\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (scaleX < 0) {\n\t\t\t\t\toffset.x -= nextWidth\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst { x, y } = offset.rot(shape.rotation).add(initialShape)\n\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tx,\n\t\t\t\ty,\n\t\t\t\tprops: {\n\t\t\t\t\tw: nextWidth / initialShape.props.scale,\n\t\t\t\t\tautoSize: false,\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onBeforeCreate = (shape: TLTextShape) => {\n\t\t// When a shape is created, center the text at the created point.\n\n\t\t// Only center if the shape is set to autosize.\n\t\tif (!shape.props.autoSize) return\n\n\t\t// Only center if the shape is empty when created.\n\t\tif (shape.props.text.trim()) return\n\n\t\tconst bounds = this.getMinDimensions(shape)\n\n\t\treturn {\n\t\t\t...shape,\n\t\t\tx: shape.x - bounds.width / 2,\n\t\t\ty: shape.y - bounds.height / 2,\n\t\t}\n\t}\n\n\toverride onEditEnd: TLOnEditEndHandler<TLTextShape> = (shape) => {\n\t\tconst {\n\t\t\tid,\n\t\t\ttype,\n\t\t\tprops: { text },\n\t\t} = shape\n\n\t\tconst trimmedText = shape.props.text.trimEnd()\n\n\t\tif (trimmedText.length === 0) {\n\t\t\tthis.editor.deleteShapes([shape.id])\n\t\t} else {\n\t\t\tif (trimmedText !== shape.props.text) {\n\t\t\t\tthis.editor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype,\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\ttext: text.trimEnd(),\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onBeforeUpdate = (prev: TLTextShape, next: TLTextShape) => {\n\t\tif (!next.props.autoSize) return\n\n\t\tconst styleDidChange =\n\t\t\tprev.props.size !== next.props.size ||\n\t\t\tprev.props.align !== next.props.align ||\n\t\t\tprev.props.font !== next.props.font ||\n\t\t\t(prev.props.scale !== 1 && next.props.scale === 1)\n\n\t\tconst textDidChange = prev.props.text !== next.props.text\n\n\t\t// Only update position if either changed\n\t\tif (!styleDidChange && !textDidChange) return\n\n\t\t// Might return a cached value for the bounds\n\t\tconst boundsA = this.getMinDimensions(prev)\n\n\t\t// Will always be a fresh call to getTextSize\n\t\tconst boundsB = getTextSize(this.editor, next.props)\n\n\t\tconst wA = boundsA.width * prev.props.scale\n\t\tconst hA = boundsA.height * prev.props.scale\n\t\tconst wB = boundsB.width * next.props.scale\n\t\tconst hB = boundsB.height * next.props.scale\n\n\t\tlet delta: Vec2d | undefined\n\n\t\tswitch (next.props.align) {\n\t\t\tcase 'middle': {\n\t\t\t\tdelta = new Vec2d((wB - wA) / 2, textDidChange ? 0 : (hB - hA) / 2)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'end': {\n\t\t\t\tdelta = new Vec2d(wB - wA, textDidChange ? 0 : (hB - hA) / 2)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tif (textDidChange) break\n\t\t\t\tdelta = new Vec2d(0, (hB - hA) / 2)\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\tif (delta) {\n\t\t\t// account for shape rotation when writing text:\n\t\t\tdelta.rot(next.rotation)\n\t\t\tconst { x, y } = next\n\t\t\treturn {\n\t\t\t\t...next,\n\t\t\t\tx: x - delta.x,\n\t\t\t\ty: y - delta.y,\n\t\t\t\tprops: { ...next.props, w: wB },\n\t\t\t}\n\t\t} else {\n\t\t\treturn {\n\t\t\t\t...next,\n\t\t\t\tprops: { ...next.props, w: wB },\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDoubleClickEdge = (shape: TLTextShape) => {\n\t\t// If the shape has a fixed width, set it to autoSize.\n\t\tif (!shape.props.autoSize) {\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tautoSize: true,\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\n\t\t// If the shape is scaled, reset the scale to 1.\n\t\tif (shape.props.scale !== 1) {\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: {\n\t\t\t\t\tscale: 1,\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction getTextSize(editor: Editor, props: TLTextShape['props']) {\n\tconst { font, text, autoSize, size, w } = props\n\n\tconst minWidth = autoSize ? 16 : Math.max(16, w)\n\tconst fontSize = FONT_SIZES[size]\n\n\tconst cw = autoSize\n\t\t? null\n\t\t: // `measureText` floors the number so we need to do the same here to avoid issues.\n\t\t  Math.floor(Math.max(minWidth, w))\n\n\tconst result = editor.textMeasure.measureText(text, {\n\t\t...TEXT_PROPS,\n\t\tfontFamily: FONT_FAMILIES[font],\n\t\tfontSize: fontSize,\n\t\tmaxWidth: cw,\n\t})\n\n\t// // If we're autosizing the measureText will essentially `Math.floor`\n\t// // the numbers so `19` rather than `19.3`, this means we must +1 to\n\t// // whatever we get to avoid wrapping.\n\tif (autoSize) {\n\t\tresult.w += 1\n\t}\n\n\treturn {\n\t\twidth: Math.max(minWidth, result.w),\n\t\theight: Math.max(fontSize, result.h),\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/shapes/text/toolStates/Idle.mjs

@@ -0,0 +1,42 @@
+import { StateNode } from "@bigbluebutton/editor";
+import { updateHoveredId } from "../../../tools/selection-logic/updateHoveredId.mjs";
+class Idle extends StateNode {
+  static id = "idle";
+  onPointerMove = (info) => {
+    switch (info.target) {
+      case "shape":
+      case "canvas": {
+        updateHoveredId(this.editor);
+      }
+    }
+  };
+  onPointerDown = (info) => {
+    this.parent.transition("pointing", info);
+  };
+  onEnter = () => {
+    this.editor.setCursor({ type: "cross", rotation: 0 });
+  };
+  onKeyDown = (info) => {
+    if (info.key === "Enter") {
+      if (this.editor.getInstanceState().isReadonly)
+        return null;
+      const onlySelectedShape = this.editor.getOnlySelectedShape();
+      if (onlySelectedShape && this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)) {
+        this.editor.setCurrentTool("select");
+        this.editor.setEditingShape(onlySelectedShape.id);
+        this.editor.root.getCurrent()?.transition("editing_shape", {
+          ...info,
+          target: "shape",
+          shape: onlySelectedShape
+        });
+      }
+    }
+  };
+  onCancel = () => {
+    this.editor.setCurrentTool("select");
+  };
+}
+export {
+  Idle
+};
+//# sourceMappingURL=Idle.mjs.map

package/dist-esm/lib/shapes/text/toolStates/Idle.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/text/toolStates/Idle.ts"],
+  "sourcesContent": ["import { StateNode, TLEventHandlers } from '@bigbluebutton/editor'\nimport { updateHoveredId } from '../../../tools/selection-logic/updateHoveredId'\n\nexport class Idle extends StateNode {\n\tstatic override id = 'idle'\n\n\toverride onPointerMove: TLEventHandlers['onPointerMove'] = (info) => {\n\t\tswitch (info.target) {\n\t\t\tcase 'shape':\n\t\t\tcase 'canvas': {\n\t\t\t\tupdateHoveredId(this.editor)\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {\n\t\tthis.parent.transition('pointing', info)\n\t}\n\n\toverride onEnter = () => {\n\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t}\n\n\toverride onKeyDown: TLEventHandlers['onKeyDown'] = (info) => {\n\t\tif (info.key === 'Enter') {\n\t\t\tif (this.editor.getInstanceState().isReadonly) return null\n\t\t\tconst onlySelectedShape = this.editor.getOnlySelectedShape()\n\t\t\t// If the only selected shape is editable, start editing it\n\t\t\tif (\n\t\t\t\tonlySelectedShape &&\n\t\t\t\tthis.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)\n\t\t\t) {\n\t\t\t\tthis.editor.setCurrentTool('select')\n\t\t\t\tthis.editor.setEditingShape(onlySelectedShape.id)\n\t\t\t\tthis.editor.root.getCurrent()?.transition('editing_shape', {\n\t\t\t\t\t...info,\n\t\t\t\t\ttarget: 'shape',\n\t\t\t\t\tshape: onlySelectedShape,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onCancel = () => {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAkC;AAC3C,SAAS,uBAAuB;AAEzB,MAAM,aAAa,UAAU;AAAA,EACnC,OAAgB,KAAK;AAAA,EAEZ,gBAAkD,CAAC,SAAS;AACpE,YAAQ,KAAK,QAAQ;AAAA,MACpB,KAAK;AAAA,MACL,KAAK,UAAU;AACd,wBAAgB,KAAK,MAAM;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AAAA,EAES,gBAAkD,CAAC,SAAS;AACpE,SAAK,OAAO,WAAW,YAAY,IAAI;AAAA,EACxC;AAAA,EAES,UAAU,MAAM;AACxB,SAAK,OAAO,UAAU,EAAE,MAAM,SAAS,UAAU,EAAE,CAAC;AAAA,EACrD;AAAA,EAES,YAA0C,CAAC,SAAS;AAC5D,QAAI,KAAK,QAAQ,SAAS;AACzB,UAAI,KAAK,OAAO,iBAAiB,EAAE;AAAY,eAAO;AACtD,YAAM,oBAAoB,KAAK,OAAO,qBAAqB;AAE3D,UACC,qBACA,KAAK,OAAO,aAAa,iBAAiB,EAAE,QAAQ,iBAAiB,GACpE;AACD,aAAK,OAAO,eAAe,QAAQ;AACnC,aAAK,OAAO,gBAAgB,kBAAkB,EAAE;AAChD,aAAK,OAAO,KAAK,WAAW,GAAG,WAAW,iBAAiB;AAAA,UAC1D,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,OAAO;AAAA,QACR,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAAA,EAES,WAAW,MAAM;AACzB,SAAK,OAAO,eAAe,QAAQ;AAAA,EACpC;AACD;",
+  "names": []
+}

package/dist-esm/lib/shapes/text/toolStates/Pointing.mjs

@@ -0,0 +1,89 @@
+import { StateNode, createShapeId } from "@bigbluebutton/editor";
+class Pointing extends StateNode {
+  static id = "pointing";
+  shape;
+  markId = "";
+  onExit = () => {
+    this.editor.setHintingShapes([]);
+  };
+  onPointerMove = (info) => {
+    if (this.editor.inputs.isDragging) {
+      const {
+        inputs: { originPagePoint }
+      } = this.editor;
+      const id = createShapeId();
+      this.markId = `creating:${id}`;
+      this.editor.mark(this.markId);
+      this.editor.createShapes([
+        {
+          id,
+          type: "text",
+          x: originPagePoint.x,
+          y: originPagePoint.y,
+          props: {
+            text: "",
+            autoSize: false,
+            w: 20
+          }
+        }
+      ]);
+      this.editor.select(id);
+      this.shape = this.editor.getShape(id);
+      if (!this.shape)
+        return;
+      const { shape } = this;
+      this.editor.setCurrentTool("select.resizing", {
+        ...info,
+        target: "selection",
+        handle: "right",
+        isCreating: true,
+        creationCursorOffset: { x: 1, y: 1 },
+        onInteractionEnd: "text",
+        onCreate: () => {
+          this.editor.setEditingShape(shape.id);
+          this.editor.setCurrentTool("select.editing_shape");
+        }
+      });
+    }
+  };
+  onPointerUp = () => {
+    this.complete();
+  };
+  onComplete = () => {
+    this.cancel();
+  };
+  onCancel = () => {
+    this.cancel();
+  };
+  onInterrupt = () => {
+    this.cancel();
+  };
+  complete() {
+    this.editor.mark("creating text shape");
+    const id = createShapeId();
+    const { x, y } = this.editor.inputs.currentPagePoint;
+    this.editor.createShapes([
+      {
+        id,
+        type: "text",
+        x,
+        y,
+        props: {
+          text: "",
+          autoSize: true
+        }
+      }
+    ]).select(id);
+    this.editor.setEditingShape(id);
+    this.editor.setCurrentTool("select");
+    this.editor.root.getCurrent()?.transition("editing_shape");
+  }
+  cancel() {
+    this.parent.transition("idle");
+    this.editor.bailToMark(this.markId);
+  }
+}
+export {
+  Pointing
+};
+//# sourceMappingURL=Pointing.mjs.map

package/dist-esm/lib/shapes/text/toolStates/Pointing.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/text/toolStates/Pointing.ts"],
+  "sourcesContent": ["import { StateNode, TLEventHandlers, TLTextShape, createShapeId } from '@bigbluebutton/editor'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tshape?: TLTextShape\n\n\tmarkId = ''\n\n\toverride onExit = () => {\n\t\tthis.editor.setHintingShapes([])\n\t}\n\n\toverride onPointerMove: TLEventHandlers['onPointerMove'] = (info) => {\n\t\tif (this.editor.inputs.isDragging) {\n\t\t\tconst {\n\t\t\t\tinputs: { originPagePoint },\n\t\t\t} = this.editor\n\n\t\t\tconst id = createShapeId()\n\n\t\t\tthis.markId = `creating:${id}`\n\t\t\tthis.editor.mark(this.markId)\n\n\t\t\tthis.editor.createShapes<TLTextShape>([\n\t\t\t\t{\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tx: originPagePoint.x,\n\t\t\t\t\ty: originPagePoint.y,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttext: '',\n\t\t\t\t\t\tautoSize: false,\n\t\t\t\t\t\tw: 20,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\n\t\t\tthis.editor.select(id)\n\n\t\t\tthis.shape = this.editor.getShape(id)\n\t\t\tif (!this.shape) return\n\n\t\t\tconst { shape } = this\n\n\t\t\tthis.editor.setCurrentTool('select.resizing', {\n\t\t\t\t...info,\n\t\t\t\ttarget: 'selection',\n\t\t\t\thandle: 'right',\n\t\t\t\tisCreating: true,\n\t\t\t\tcreationCursorOffset: { x: 1, y: 1 },\n\t\t\t\tonInteractionEnd: 'text',\n\t\t\t\tonCreate: () => {\n\t\t\t\t\tthis.editor.setEditingShape(shape.id)\n\t\t\t\t\tthis.editor.setCurrentTool('select.editing_shape')\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete = () => {\n\t\tthis.cancel()\n\t}\n\n\toverride onCancel = () => {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt = () => {\n\t\tthis.cancel()\n\t}\n\n\tprivate complete() {\n\t\tthis.editor.mark('creating text shape')\n\t\tconst id = createShapeId()\n\t\tconst { x, y } = this.editor.inputs.currentPagePoint\n\t\tthis.editor\n\t\t\t.createShapes([\n\t\t\t\t{\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tx,\n\t\t\t\t\ty,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttext: '',\n\t\t\t\t\t\tautoSize: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t\t.select(id)\n\n\t\tthis.editor.setEditingShape(id)\n\t\tthis.editor.setCurrentTool('select')\n\t\tthis.editor.root.getCurrent()?.transition('editing_shape')\n\t}\n\n\tprivate cancel() {\n\t\tthis.parent.transition('idle')\n\t\tthis.editor.bailToMark(this.markId)\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,WAAyC,qBAAqB;AAEhE,MAAM,iBAAiB,UAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EAErB;AAAA,EAEA,SAAS;AAAA,EAEA,SAAS,MAAM;AACvB,SAAK,OAAO,iBAAiB,CAAC,CAAC;AAAA,EAChC;AAAA,EAES,gBAAkD,CAAC,SAAS;AACpE,QAAI,KAAK,OAAO,OAAO,YAAY;AAClC,YAAM;AAAA,QACL,QAAQ,EAAE,gBAAgB;AAAA,MAC3B,IAAI,KAAK;AAET,YAAM,KAAK,cAAc;AAEzB,WAAK,SAAS,YAAY,EAAE;AAC5B,WAAK,OAAO,KAAK,KAAK,MAAM;AAE5B,WAAK,OAAO,aAA0B;AAAA,QACrC;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,GAAG,gBAAgB;AAAA,UACnB,GAAG,gBAAgB;AAAA,UACnB,OAAO;AAAA,YACN,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAG;AAAA,UACJ;AAAA,QACD;AAAA,MACD,CAAC;AAED,WAAK,OAAO,OAAO,EAAE;AAErB,WAAK,QAAQ,KAAK,OAAO,SAAS,EAAE;AACpC,UAAI,CAAC,KAAK;AAAO;AAEjB,YAAM,EAAE,MAAM,IAAI;AAElB,WAAK,OAAO,eAAe,mBAAmB;AAAA,QAC7C,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,sBAAsB,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,QACnC,kBAAkB;AAAA,QAClB,UAAU,MAAM;AACf,eAAK,OAAO,gBAAgB,MAAM,EAAE;AACpC,eAAK,OAAO,eAAe,sBAAsB;AAAA,QAClD;AAAA,MACD,CAAC;AAAA,IACF;AAAA,EACD;AAAA,EAES,cAAc,MAAM;AAC5B,SAAK,SAAS;AAAA,EACf;AAAA,EAES,aAAa,MAAM;AAC3B,SAAK,OAAO;AAAA,EACb;AAAA,EAES,WAAW,MAAM;AACzB,SAAK,OAAO;AAAA,EACb;AAAA,EAES,cAAc,MAAM;AAC5B,SAAK,OAAO;AAAA,EACb;AAAA,EAEQ,WAAW;AAClB,SAAK,OAAO,KAAK,qBAAqB;AACtC,UAAM,KAAK,cAAc;AACzB,UAAM,EAAE,GAAG,EAAE,IAAI,KAAK,OAAO,OAAO;AACpC,SAAK,OACH,aAAa;AAAA,MACb;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACN,MAAM;AAAA,UACN,UAAU;AAAA,QACX;AAAA,MACD;AAAA,IACD,CAAC,EACA,OAAO,EAAE;AAEX,SAAK,OAAO,gBAAgB,EAAE;AAC9B,SAAK,OAAO,eAAe,QAAQ;AACnC,SAAK,OAAO,KAAK,WAAW,GAAG,WAAW,eAAe;AAAA,EAC1D;AAAA,EAEQ,SAAS;AAChB,SAAK,OAAO,WAAW,MAAM;AAC7B,SAAK,OAAO,WAAW,KAAK,MAAM;AAAA,EACnC;AACD;",
+  "names": []
+}