@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/shapes/geo/components/SolidStylePolygon.js

@@ -0,0 +1,86 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SolidStylePolygon_exports = {};
+__export(SolidStylePolygon_exports, {
+  SolidStylePolygon: () => SolidStylePolygon,
+  SolidStylePolygonSvg: () => SolidStylePolygonSvg
+});
+module.exports = __toCommonJS(SolidStylePolygon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_ShapeFill = require("../../shared/ShapeFill");
+const SolidStylePolygon = React.memo(function SolidStylePolygon2({
+  outline,
+  lines,
+  fill,
+  color,
+  strokeWidth
+}) {
+  const theme = (0, import_ShapeFill.useDefaultColorTheme)();
+  let path = "M" + outline[0] + "L" + outline.slice(1) + "Z";
+  if (lines) {
+    for (const [A, B] of lines) {
+      path += `M${A.x},${A.y}L${B.x},${B.y}`;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShapeFill.ShapeFill, { d: path, fill, color, theme }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: path, stroke: theme[color].solid, strokeWidth, fill: "none" })
+  ] });
+});
+function SolidStylePolygonSvg({
+  outline,
+  lines,
+  fill,
+  color,
+  strokeWidth,
+  theme
+}) {
+  const pathData = "M" + outline[0] + "L" + outline.slice(1) + "Z";
+  const fillPathData = pathData;
+  let strokePathData = pathData;
+  if (lines) {
+    for (const [A, B] of lines) {
+      strokePathData += `M${A.x},${A.y}L${B.x},${B.y}`;
+    }
+  }
+  const strokeElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  strokeElement.setAttribute("d", strokePathData);
+  strokeElement.setAttribute("stroke-width", strokeWidth.toString());
+  strokeElement.setAttribute("stroke", theme[color].solid);
+  strokeElement.setAttribute("fill", "none");
+  const fillElement = (0, import_ShapeFill.getShapeFillSvg)({
+    d: fillPathData,
+    fill,
+    color,
+    theme
+  });
+  return (0, import_ShapeFill.getSvgWithShapeFill)(strokeElement, fillElement);
+}
+//# sourceMappingURL=SolidStylePolygon.js.map

package/dist-cjs/lib/shapes/geo/components/SolidStylePolygon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/geo/components/SolidStylePolygon.tsx"],
+  "sourcesContent": ["import { TLDefaultColorTheme, TLGeoShape, VecLike } from '@bigbluebutton/editor'\nimport * as React from 'react'\nimport {\n\tShapeFill,\n\tgetShapeFillSvg,\n\tgetSvgWithShapeFill,\n\tuseDefaultColorTheme,\n} from '../../shared/ShapeFill'\n\nexport const SolidStylePolygon = React.memo(function SolidStylePolygon({\n\toutline,\n\tlines,\n\tfill,\n\tcolor,\n\tstrokeWidth,\n}: Pick<TLGeoShape['props'], 'fill' | 'color'> & {\n\toutline: VecLike[]\n\tlines?: VecLike[][]\n\tstrokeWidth: number\n}) {\n\tconst theme = useDefaultColorTheme()\n\tlet path = 'M' + outline[0] + 'L' + outline.slice(1) + 'Z'\n\n\tif (lines) {\n\t\tfor (const [A, B] of lines) {\n\t\t\tpath += `M${A.x},${A.y}L${B.x},${B.y}`\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ShapeFill d={path} fill={fill} color={color} theme={theme} />\n\t\t\t<path d={path} stroke={theme[color].solid} strokeWidth={strokeWidth} fill=\"none\" />\n\t\t</>\n\t)\n})\n\nexport function SolidStylePolygonSvg({\n\toutline,\n\tlines,\n\tfill,\n\tcolor,\n\tstrokeWidth,\n\ttheme,\n}: Pick<TLGeoShape['props'], 'fill' | 'color'> & {\n\toutline: VecLike[]\n\tstrokeWidth: number\n\ttheme: TLDefaultColorTheme\n\tlines?: VecLike[][]\n}) {\n\tconst pathData = 'M' + outline[0] + 'L' + outline.slice(1) + 'Z'\n\n\tconst fillPathData = pathData\n\tlet strokePathData = pathData\n\n\tif (lines) {\n\t\tfor (const [A, B] of lines) {\n\t\t\tstrokePathData += `M${A.x},${A.y}L${B.x},${B.y}`\n\t\t}\n\t}\n\n\tconst strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\tstrokeElement.setAttribute('d', strokePathData)\n\tstrokeElement.setAttribute('stroke-width', strokeWidth.toString())\n\tstrokeElement.setAttribute('stroke', theme[color].solid)\n\tstrokeElement.setAttribute('fill', 'none')\n\n\t// Get the fill element, if any\n\tconst fillElement = getShapeFillSvg({\n\t\td: fillPathData,\n\t\tfill,\n\t\tcolor,\n\t\ttheme,\n\t})\n\n\treturn getSvgWithShapeFill(strokeElement, fillElement)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BE;AA7BF,YAAuB;AACvB,uBAKO;AAEA,MAAM,oBAAoB,MAAM,KAAK,SAASA,mBAAkB;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,YAAQ,uCAAqB;AACnC,MAAI,OAAO,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,MAAM,CAAC,IAAI;AAEvD,MAAI,OAAO;AACV,eAAW,CAAC,GAAG,CAAC,KAAK,OAAO;AAC3B,cAAQ,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;AAAA,IACrC;AAAA,EACD;AAEA,SACC,4EACC;AAAA,gDAAC,8BAAU,GAAG,MAAM,MAAY,OAAc,OAAc;AAAA,IAC5D,4CAAC,UAAK,GAAG,MAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,aAA0B,MAAK,QAAO;AAAA,KAClF;AAEF,CAAC;AAEM,SAAS,qBAAqB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,QAAM,WAAW,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,MAAM,CAAC,IAAI;AAE7D,QAAM,eAAe;AACrB,MAAI,iBAAiB;AAErB,MAAI,OAAO;AACV,eAAW,CAAC,GAAG,CAAC,KAAK,OAAO;AAC3B,wBAAkB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,gBAAgB,SAAS,gBAAgB,8BAA8B,MAAM;AACnF,gBAAc,aAAa,KAAK,cAAc;AAC9C,gBAAc,aAAa,gBAAgB,YAAY,SAAS,CAAC;AACjE,gBAAc,aAAa,UAAU,MAAM,KAAK,EAAE,KAAK;AACvD,gBAAc,aAAa,QAAQ,MAAM;AAGzC,QAAM,kBAAc,kCAAgB;AAAA,IACnC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,aAAO,sCAAoB,eAAe,WAAW;AACtD;",
+  "names": ["SolidStylePolygon"]
+}

package/dist-cjs/lib/shapes/geo/helpers.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var helpers_exports = {};
+__export(helpers_exports, {
+  getOvalPerimeter: () => getOvalPerimeter,
+  getOvalSolidPath: () => getOvalSolidPath
+});
+module.exports = __toCommonJS(helpers_exports);
+var import_editor = require("@bigbluebutton/editor");
+function getOvalSolidPath(w, h) {
+  if (h > w) {
+    const offset2 = w / 2;
+    return `
+    M0,${offset2}
+    a${offset2},${offset2},0,1,1,${offset2 * 2},0
+    L${w},${h - offset2}
+    a${offset2},${offset2},0,1,1,-${offset2 * 2},0
+    Z`;
+  }
+  const offset = h / 2;
+  return `
+    M${offset},0
+    L${w - offset},0
+    a${offset},${offset},0,1,1,0,${offset * 2}
+    L${offset},${h}
+    a${offset},${offset},0,1,1,0,${-offset * 2}
+    Z`;
+}
+function getOvalPerimeter(h, w) {
+  if (h > w) {
+    const offset2 = w / 2;
+    return (0, import_editor.perimeterOfEllipse)(offset2, offset2) + (h - offset2 * 2) * 2;
+  }
+  const offset = h / 2;
+  return (0, import_editor.perimeterOfEllipse)(offset, offset) + (w - offset * 2) * 2;
+}
+//# sourceMappingURL=helpers.js.map

package/dist-cjs/lib/shapes/geo/helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/geo/helpers.ts"],
+  "sourcesContent": ["import { perimeterOfEllipse } from '@bigbluebutton/editor'\n\nexport function getOvalSolidPath(w: number, h: number) {\n\tif (h > w) {\n\t\tconst offset = w / 2\n\n\t\treturn `\n    M0,${offset}\n    a${offset},${offset},0,1,1,${offset * 2},0\n    L${w},${h - offset}\n    a${offset},${offset},0,1,1,-${offset * 2},0\n    Z`\n\t}\n\n\tconst offset = h / 2\n\n\treturn `\n    M${offset},0\n    L${w - offset},0\n    a${offset},${offset},0,1,1,0,${offset * 2}\n    L${offset},${h}\n    a${offset},${offset},0,1,1,0,${-offset * 2}\n    Z`\n}\n\nexport function getOvalPerimeter(h: number, w: number) {\n\tif (h > w) {\n\t\tconst offset = w / 2\n\t\treturn perimeterOfEllipse(offset, offset) + (h - offset * 2) * 2\n\t}\n\n\tconst offset = h / 2\n\treturn perimeterOfEllipse(offset, offset) + (w - offset * 2) * 2\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmC;AAE5B,SAAS,iBAAiB,GAAW,GAAW;AACtD,MAAI,IAAI,GAAG;AACV,UAAMA,UAAS,IAAI;AAEnB,WAAO;AAAA,SACAA,OAAM;AAAA,OACRA,OAAM,IAAIA,OAAM,UAAUA,UAAS,CAAC;AAAA,OACpC,CAAC,IAAI,IAAIA,OAAM;AAAA,OACfA,OAAM,IAAIA,OAAM,WAAWA,UAAS,CAAC;AAAA;AAAA,EAE3C;AAEA,QAAM,SAAS,IAAI;AAEnB,SAAO;AAAA,OACD,MAAM;AAAA,OACN,IAAI,MAAM;AAAA,OACV,MAAM,IAAI,MAAM,YAAY,SAAS,CAAC;AAAA,OACtC,MAAM,IAAI,CAAC;AAAA,OACX,MAAM,IAAI,MAAM,YAAY,CAAC,SAAS,CAAC;AAAA;AAE9C;AAEO,SAAS,iBAAiB,GAAW,GAAW;AACtD,MAAI,IAAI,GAAG;AACV,UAAMA,UAAS,IAAI;AACnB,eAAO,kCAAmBA,SAAQA,OAAM,KAAK,IAAIA,UAAS,KAAK;AAAA,EAChE;AAEA,QAAM,SAAS,IAAI;AACnB,aAAO,kCAAmB,QAAQ,MAAM,KAAK,IAAI,SAAS,KAAK;AAChE;",
+  "names": ["offset"]
+}

package/dist-cjs/lib/shapes/geo/toolStates/Idle.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Idle_exports = {};
+__export(Idle_exports, {
+  Idle: () => Idle
+});
+module.exports = __toCommonJS(Idle_exports);
+var import_editor = require("@bigbluebutton/editor");
+class Idle extends import_editor.StateNode {
+  static id = "idle";
+  onPointerDown = (info) => {
+    this.parent.transition("pointing", info);
+  };
+  onEnter = () => {
+    this.editor.setCursor({ type: "cross", rotation: 0 });
+  };
+  onKeyUp = (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");
+  };
+}
+//# sourceMappingURL=Idle.js.map

package/dist-cjs/lib/shapes/geo/toolStates/Idle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/geo/toolStates/Idle.ts"],
+  "sourcesContent": ["import { StateNode, TLEventHandlers } from '@bigbluebutton/editor'\n\nexport class Idle extends StateNode {\n\tstatic override id = 'idle'\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 onKeyUp: TLEventHandlers['onKeyUp'] = (info) => {\n\t\tif (info.key === 'Enter') {\n\t\t\tif (this.editor.getInstanceState().isReadonly) return null\n\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;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA2C;AAEpC,MAAM,aAAa,wBAAU;AAAA,EACnC,OAAgB,KAAK;AAAA,EAEZ,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,UAAsC,CAAC,SAAS;AACxD,QAAI,KAAK,QAAQ,SAAS;AACzB,UAAI,KAAK,OAAO,iBAAiB,EAAE;AAAY,eAAO;AAEtD,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-cjs/lib/shapes/geo/toolStates/Pointing.js

@@ -0,0 +1,118 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Pointing_exports = {};
+__export(Pointing_exports, {
+  Pointing: () => Pointing
+});
+module.exports = __toCommonJS(Pointing_exports);
+var import_editor = require("@bigbluebutton/editor");
+class Pointing extends import_editor.StateNode {
+  static id = "pointing";
+  markId = "";
+  onPointerUp = () => {
+    this.complete();
+  };
+  onPointerMove = (info) => {
+    if (this.editor.inputs.isDragging) {
+      const { originPagePoint } = this.editor.inputs;
+      const id = (0, import_editor.createShapeId)();
+      this.markId = `creating:${id}`;
+      this.editor.mark(this.markId);
+      this.editor.createShapes([
+        {
+          id,
+          type: "geo",
+          x: originPagePoint.x,
+          y: originPagePoint.y,
+          props: {
+            w: 1,
+            h: 1,
+            geo: this.editor.getStyleForNextShape(import_editor.GeoShapeGeoStyle)
+          }
+        }
+      ]).select(id).setCurrentTool("select.resizing", {
+        ...info,
+        target: "selection",
+        handle: "bottom_right",
+        isCreating: true,
+        creationCursorOffset: { x: 1, y: 1 },
+        onInteractionEnd: "geo"
+      });
+    }
+  };
+  onCancel = () => {
+    this.cancel();
+  };
+  onComplete = () => {
+    this.complete();
+  };
+  onInterrupt = () => {
+    this.cancel();
+  };
+  complete() {
+    const { originPagePoint } = this.editor.inputs;
+    const id = (0, import_editor.createShapeId)();
+    this.markId = `creating:${id}`;
+    this.editor.mark(this.markId);
+    this.editor.createShapes([
+      {
+        id,
+        type: "geo",
+        x: originPagePoint.x,
+        y: originPagePoint.y,
+        props: {
+          geo: this.editor.getStyleForNextShape(import_editor.GeoShapeGeoStyle),
+          w: 1,
+          h: 1
+        }
+      }
+    ]);
+    const shape = this.editor.getShape(id);
+    if (!shape)
+      return;
+    const bounds = shape.props.geo === "star" ? (0, import_editor.getStarBounds)(5, 200, 200) : shape.props.geo === "cloud" ? new import_editor.Box2d(0, 0, 300, 180) : new import_editor.Box2d(0, 0, 200, 200);
+    const delta = bounds.center;
+    const parentTransform = this.editor.getShapeParentTransform(shape);
+    if (parentTransform)
+      delta.rot(-parentTransform.rotation());
+    this.editor.select(id);
+    this.editor.updateShapes([
+      {
+        id: shape.id,
+        type: "geo",
+        x: shape.x - delta.x,
+        y: shape.y - delta.y,
+        props: {
+          geo: this.editor.getStyleForNextShape(import_editor.GeoShapeGeoStyle),
+          w: bounds.width,
+          h: bounds.height
+        }
+      }
+    ]);
+    if (this.editor.getInstanceState().isToolLocked) {
+      this.parent.transition("idle");
+    } else {
+      this.editor.setCurrentTool("select", {});
+    }
+  }
+  cancel() {
+    this.parent.transition("idle");
+  }
+}
+//# sourceMappingURL=Pointing.js.map

package/dist-cjs/lib/shapes/geo/toolStates/Pointing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/geo/toolStates/Pointing.ts"],
+  "sourcesContent": ["import {\n\tBox2d,\n\tGeoShapeGeoStyle,\n\tStateNode,\n\tTLEventHandlers,\n\tTLGeoShape,\n\tcreateShapeId,\n\tgetStarBounds,\n} from '@bigbluebutton/editor'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tmarkId = ''\n\n\toverride onPointerUp: TLEventHandlers['onPointerUp'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onPointerMove: TLEventHandlers['onPointerMove'] = (info) => {\n\t\tif (this.editor.inputs.isDragging) {\n\t\t\tconst { originPagePoint } = this.editor.inputs\n\n\t\t\tconst id = createShapeId()\n\n\t\t\tthis.markId = `creating:${id}`\n\n\t\t\tthis.editor.mark(this.markId)\n\n\t\t\tthis.editor\n\t\t\t\t.createShapes<TLGeoShape>([\n\t\t\t\t\t{\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype: 'geo',\n\t\t\t\t\t\tx: originPagePoint.x,\n\t\t\t\t\t\ty: originPagePoint.y,\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tw: 1,\n\t\t\t\t\t\t\th: 1,\n\t\t\t\t\t\t\tgeo: this.editor.getStyleForNextShape(GeoShapeGeoStyle),\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t\t.select(id)\n\t\t\t\t.setCurrentTool('select.resizing', {\n\t\t\t\t\t...info,\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle: 'bottom_right',\n\t\t\t\t\tisCreating: true,\n\t\t\t\t\tcreationCursorOffset: { x: 1, y: 1 },\n\t\t\t\t\tonInteractionEnd: 'geo',\n\t\t\t\t})\n\t\t}\n\t}\n\n\toverride onCancel: TLEventHandlers['onCancel'] = () => {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete: TLEventHandlers['onComplete'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onInterrupt: TLEventHandlers['onInterrupt'] = () => {\n\t\tthis.cancel()\n\t}\n\n\tprivate complete() {\n\t\tconst { originPagePoint } = this.editor.inputs\n\n\t\tconst id = createShapeId()\n\n\t\tthis.markId = `creating:${id}`\n\n\t\tthis.editor.mark(this.markId)\n\n\t\tthis.editor.createShapes<TLGeoShape>([\n\t\t\t{\n\t\t\t\tid,\n\t\t\t\ttype: 'geo',\n\t\t\t\tx: originPagePoint.x,\n\t\t\t\ty: originPagePoint.y,\n\t\t\t\tprops: {\n\t\t\t\t\tgeo: this.editor.getStyleForNextShape(GeoShapeGeoStyle),\n\t\t\t\t\tw: 1,\n\t\t\t\t\th: 1,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\n\t\tconst shape = this.editor.getShape<TLGeoShape>(id)!\n\t\tif (!shape) return\n\n\t\tconst bounds =\n\t\t\tshape.props.geo === 'star'\n\t\t\t\t? getStarBounds(5, 200, 200)\n\t\t\t\t: shape.props.geo === 'cloud'\n\t\t\t\t? new Box2d(0, 0, 300, 180)\n\t\t\t\t: new Box2d(0, 0, 200, 200)\n\n\t\tconst delta = bounds.center\n\t\tconst parentTransform = this.editor.getShapeParentTransform(shape)\n\t\tif (parentTransform) delta.rot(-parentTransform.rotation())\n\n\t\tthis.editor.select(id)\n\t\tthis.editor.updateShapes<TLGeoShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: 'geo',\n\t\t\t\tx: shape.x - delta.x,\n\t\t\t\ty: shape.y - delta.y,\n\t\t\t\tprops: {\n\t\t\t\t\tgeo: this.editor.getStyleForNextShape(GeoShapeGeoStyle),\n\t\t\t\t\tw: bounds.width,\n\t\t\t\t\th: bounds.height,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.parent.transition('idle')\n\t\t} else {\n\t\t\tthis.editor.setCurrentTool('select', {})\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\t// we should not have created any shapes yet, so no need to bail\n\t\tthis.parent.transition('idle')\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/lib/shapes/highlight/HighlightShapeTool.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var HighlightShapeTool_exports = {};
+__export(HighlightShapeTool_exports, {
+  HighlightShapeTool: () => HighlightShapeTool
+});
+module.exports = __toCommonJS(HighlightShapeTool_exports);
+var import_editor = require("@bigbluebutton/editor");
+var import_Drawing = require("../draw/toolStates/Drawing");
+var import_Idle = require("../draw/toolStates/Idle");
+class HighlightShapeTool extends import_editor.StateNode {
+  static id = "highlight";
+  static initial = "idle";
+  static children = () => [import_Idle.Idle, import_Drawing.Drawing];
+  shapeType = "highlight";
+  onExit = () => {
+    const drawingState = this.children["drawing"];
+    drawingState.initialShape = void 0;
+  };
+}
+//# sourceMappingURL=HighlightShapeTool.js.map

package/dist-cjs/lib/shapes/highlight/HighlightShapeTool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/highlight/HighlightShapeTool.ts"],
+  "sourcesContent": ["// shared custody\nimport { StateNode } from '@bigbluebutton/editor'\nimport { Drawing } from '../draw/toolStates/Drawing'\nimport { Idle } from '../draw/toolStates/Idle'\n\n/** @public */\nexport class HighlightShapeTool extends StateNode {\n\tstatic override id = 'highlight'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Drawing]\n\toverride shapeType = 'highlight'\n\n\toverride onExit = () => {\n\t\tconst drawingState = this.children!['drawing'] as Drawing\n\t\tdrawingState.initialShape = undefined\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAA0B;AAC1B,qBAAwB;AACxB,kBAAqB;AAGd,MAAM,2BAA2B,wBAAU;AAAA,EACjD,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,kBAAM,sBAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,SAAS,MAAM;AACvB,UAAM,eAAe,KAAK,SAAU,SAAS;AAC7C,iBAAa,eAAe;AAAA,EAC7B;AACD;",
+  "names": []
+}

package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js

@@ -0,0 +1,208 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var HighlightShapeUtil_exports = {};
+__export(HighlightShapeUtil_exports, {
+  HighlightShapeUtil: () => HighlightShapeUtil
+});
+module.exports = __toCommonJS(HighlightShapeUtil_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_getPath = require("../draw/getPath");
+var import_ShapeFill = require("../shared/ShapeFill");
+var import_default_shape_constants = require("../shared/default-shape-constants");
+var import_getStrokeOutlinePoints = require("../shared/freehand/getStrokeOutlinePoints");
+var import_getStrokePoints = require("../shared/freehand/getStrokePoints");
+var import_setStrokePointRadii = require("../shared/freehand/setStrokePointRadii");
+var import_svg = require("../shared/freehand/svg");
+var import_useColorSpace = require("../shared/useColorSpace");
+var import_useForceSolid = require("../shared/useForceSolid");
+const OVERLAY_OPACITY = 0.35;
+const UNDERLAY_OPACITY = 0.82;
+class HighlightShapeUtil extends import_editor.ShapeUtil {
+  static type = "highlight";
+  static props = import_editor.highlightShapeProps;
+  static migrations = import_editor.highlightShapeMigrations;
+  hideResizeHandles = (shape) => getIsDot(shape);
+  hideRotateHandle = (shape) => getIsDot(shape);
+  hideSelectionBoundsFg = (shape) => getIsDot(shape);
+  getDefaultProps() {
+    return {
+      segments: [],
+      color: "black",
+      size: "m",
+      isComplete: false,
+      isPen: false
+    };
+  }
+  getGeometry(shape) {
+    const strokeWidth = getStrokeWidth(shape);
+    if (getIsDot(shape)) {
+      return new import_editor.Circle2d({
+        x: -strokeWidth / 2,
+        y: -strokeWidth / 2,
+        radius: strokeWidth / 2,
+        isFilled: true
+      });
+    }
+    const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, true);
+    const opts = (0, import_getPath.getHighlightFreehandSettings)({ strokeWidth: sw, showAsComplete: true });
+    (0, import_setStrokePointRadii.setStrokePointRadii)(strokePoints, opts);
+    return new import_editor.Polygon2d({
+      points: (0, import_getStrokeOutlinePoints.getStrokeOutlinePoints)(strokePoints, opts),
+      isFilled: true
+    });
+  }
+  component(shape) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      HighlightRenderer,
+      {
+        strokeWidth: getStrokeWidth(shape),
+        shape,
+        opacity: OVERLAY_OPACITY
+      }
+    );
+  }
+  backgroundComponent(shape) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      HighlightRenderer,
+      {
+        strokeWidth: getStrokeWidth(shape),
+        shape,
+        opacity: UNDERLAY_OPACITY
+      }
+    );
+  }
+  indicator(shape) {
+    const forceSolid = (0, import_useForceSolid.useForceSolid)();
+    const strokeWidth = getStrokeWidth(shape);
+    const allPointsFromSegments = (0, import_getPath.getPointsFromSegments)(shape.props.segments);
+    let sw = strokeWidth;
+    if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
+      sw += (0, import_editor.rng)(shape.id)() * (strokeWidth / 6);
+    }
+    const showAsComplete = shape.props.isComplete || (0, import_editor.last)(shape.props.segments)?.type === "straight";
+    const options = (0, import_getPath.getHighlightFreehandSettings)({
+      strokeWidth,
+      showAsComplete
+    });
+    const strokePoints = (0, import_getStrokePoints.getStrokePoints)(allPointsFromSegments, options);
+    let strokePath;
+    if (strokePoints.length < 2) {
+      strokePath = getIndicatorDot(allPointsFromSegments[0], sw);
+    } else {
+      strokePath = (0, import_svg.getSvgPathFromStrokePoints)(strokePoints, false);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: strokePath });
+  }
+  toSvg(shape) {
+    const theme = (0, import_editor.getDefaultColorTheme)({ isDarkMode: this.editor.user.getIsDarkMode() });
+    return highlighterToSvg(getStrokeWidth(shape), shape, OVERLAY_OPACITY, theme);
+  }
+  toBackgroundSvg(shape) {
+    const theme = (0, import_editor.getDefaultColorTheme)({ isDarkMode: this.editor.user.getIsDarkMode() });
+    return highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, theme);
+  }
+  onResize = (shape, info) => {
+    const { scaleX, scaleY } = info;
+    const newSegments = [];
+    for (const segment of shape.props.segments) {
+      newSegments.push({
+        ...segment,
+        points: segment.points.map(({ x, y, z }) => {
+          return {
+            x: scaleX * x,
+            y: scaleY * y,
+            z
+          };
+        })
+      });
+    }
+    return {
+      props: {
+        segments: newSegments
+      }
+    };
+  };
+}
+function getShapeDot(point) {
+  const r = 0.1;
+  return `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
+}
+function getIndicatorDot(point, sw) {
+  const r = sw / 2;
+  return `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
+}
+function getHighlightStrokePoints(shape, strokeWidth, forceSolid) {
+  const allPointsFromSegments = (0, import_getPath.getPointsFromSegments)(shape.props.segments);
+  const showAsComplete = shape.props.isComplete || (0, import_editor.last)(shape.props.segments)?.type === "straight";
+  let sw = strokeWidth;
+  if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
+    sw += (0, import_editor.rng)(shape.id)() * (strokeWidth / 6);
+  }
+  const options = (0, import_getPath.getHighlightFreehandSettings)({
+    strokeWidth: sw,
+    showAsComplete
+  });
+  const strokePoints = (0, import_getStrokePoints.getStrokePoints)(allPointsFromSegments, options);
+  return { strokePoints, sw };
+}
+function getHighlightSvgPath(shape, strokeWidth, forceSolid) {
+  const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid);
+  const solidStrokePath = strokePoints.length > 1 ? (0, import_svg.getSvgPathFromStrokePoints)(strokePoints, false) : getShapeDot(shape.props.segments[0].points[0]);
+  return { solidStrokePath, sw };
+}
+function HighlightRenderer({
+  strokeWidth,
+  shape,
+  opacity
+}) {
+  const theme = (0, import_ShapeFill.useDefaultColorTheme)();
+  const forceSolid = (0, import_useForceSolid.useForceSolid)();
+  const { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, forceSolid);
+  const colorSpace = (0, import_useColorSpace.useColorSpace)();
+  const color = theme[shape.props.color].highlight[colorSpace];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.SVGContainer, { id: shape.id, style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: solidStrokePath,
+      strokeLinecap: "round",
+      fill: "none",
+      pointerEvents: "all",
+      stroke: color,
+      strokeWidth: sw
+    }
+  ) });
+}
+function highlighterToSvg(strokeWidth, shape, opacity, theme) {
+  const { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, false);
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", solidStrokePath);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", theme[shape.props.color].highlight.srgb);
+  path.setAttribute("stroke-width", `${sw}`);
+  path.setAttribute("opacity", `${opacity}`);
+  return path;
+}
+function getStrokeWidth(shape) {
+  return import_default_shape_constants.FONT_SIZES[shape.props.size] * 1.12;
+}
+function getIsDot(shape) {
+  return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2;
+}
+//# sourceMappingURL=HighlightShapeUtil.js.map

package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/highlight/HighlightShapeUtil.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n\tCircle2d,\n\tPolygon2d,\n\tSVGContainer,\n\tShapeUtil,\n\tTLDefaultColorTheme,\n\tTLDrawShapeSegment,\n\tTLHighlightShape,\n\tTLOnResizeHandler,\n\tVecLike,\n\tgetDefaultColorTheme,\n\thighlightShapeMigrations,\n\thighlightShapeProps,\n\tlast,\n\trng,\n} from '@bigbluebutton/editor'\nimport { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'\nimport { useDefaultColorTheme } from '../shared/ShapeFill'\nimport { FONT_SIZES } from '../shared/default-shape-constants'\nimport { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'\nimport { getStrokePoints } from '../shared/freehand/getStrokePoints'\nimport { setStrokePointRadii } from '../shared/freehand/setStrokePointRadii'\nimport { getSvgPathFromStrokePoints } from '../shared/freehand/svg'\nimport { useColorSpace } from '../shared/useColorSpace'\nimport { useForceSolid } from '../shared/useForceSolid'\n\nconst OVERLAY_OPACITY = 0.35\nconst UNDERLAY_OPACITY = 0.82\n\n/** @public */\nexport class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {\n\tstatic override type = 'highlight' as const\n\tstatic override props = highlightShapeProps\n\tstatic override migrations = highlightShapeMigrations\n\n\toverride hideResizeHandles = (shape: TLHighlightShape) => getIsDot(shape)\n\toverride hideRotateHandle = (shape: TLHighlightShape) => getIsDot(shape)\n\toverride hideSelectionBoundsFg = (shape: TLHighlightShape) => getIsDot(shape)\n\n\toverride getDefaultProps(): TLHighlightShape['props'] {\n\t\treturn {\n\t\t\tsegments: [],\n\t\t\tcolor: 'black',\n\t\t\tsize: 'm',\n\t\t\tisComplete: false,\n\t\t\tisPen: false,\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLHighlightShape) {\n\t\tconst strokeWidth = getStrokeWidth(shape)\n\t\tif (getIsDot(shape)) {\n\t\t\treturn new Circle2d({\n\t\t\t\tx: -strokeWidth / 2,\n\t\t\t\ty: -strokeWidth / 2,\n\t\t\t\tradius: strokeWidth / 2,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\tconst { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, true)\n\t\tconst opts = getHighlightFreehandSettings({ strokeWidth: sw, showAsComplete: true })\n\t\tsetStrokePointRadii(strokePoints, opts)\n\n\t\treturn new Polygon2d({\n\t\t\tpoints: getStrokeOutlinePoints(strokePoints, opts),\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: TLHighlightShape) {\n\t\treturn (\n\t\t\t<HighlightRenderer\n\t\t\t\tstrokeWidth={getStrokeWidth(shape)}\n\t\t\t\tshape={shape}\n\t\t\t\topacity={OVERLAY_OPACITY}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride backgroundComponent(shape: TLHighlightShape) {\n\t\treturn (\n\t\t\t<HighlightRenderer\n\t\t\t\tstrokeWidth={getStrokeWidth(shape)}\n\t\t\t\tshape={shape}\n\t\t\t\topacity={UNDERLAY_OPACITY}\n\t\t\t/>\n\t\t)\n\t}\n\n\tindicator(shape: TLHighlightShape) {\n\t\tconst forceSolid = useForceSolid()\n\t\tconst strokeWidth = getStrokeWidth(shape)\n\t\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\n\t\tlet sw = strokeWidth\n\t\tif (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {\n\t\t\tsw += rng(shape.id)() * (strokeWidth / 6)\n\t\t}\n\n\t\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\t\tconst options = getHighlightFreehandSettings({\n\t\t\tstrokeWidth,\n\t\t\tshowAsComplete,\n\t\t})\n\t\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\n\t\tlet strokePath\n\t\tif (strokePoints.length < 2) {\n\t\t\tstrokePath = getIndicatorDot(allPointsFromSegments[0], sw)\n\t\t} else {\n\t\t\tstrokePath = getSvgPathFromStrokePoints(strokePoints, false)\n\t\t}\n\n\t\treturn <path d={strokePath} />\n\t}\n\n\toverride toSvg(shape: TLHighlightShape) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\treturn highlighterToSvg(getStrokeWidth(shape), shape, OVERLAY_OPACITY, theme)\n\t}\n\n\toverride toBackgroundSvg(shape: TLHighlightShape) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\treturn highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, theme)\n\t}\n\n\toverride onResize: TLOnResizeHandler<TLHighlightShape> = (shape, info) => {\n\t\tconst { scaleX, scaleY } = info\n\n\t\tconst newSegments: TLDrawShapeSegment[] = []\n\n\t\tfor (const segment of shape.props.segments) {\n\t\t\tnewSegments.push({\n\t\t\t\t...segment,\n\t\t\t\tpoints: segment.points.map(({ x, y, z }) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tx: scaleX * x,\n\t\t\t\t\t\ty: scaleY * y,\n\t\t\t\t\t\tz,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\tsegments: newSegments,\n\t\t\t},\n\t\t}\n\t}\n}\n\nfunction getShapeDot(point: VecLike) {\n\tconst r = 0.1\n\treturn `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${\n\t\tr * 2\n\t},0`\n}\n\nfunction getIndicatorDot(point: VecLike, sw: number) {\n\tconst r = sw / 2\n\treturn `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${\n\t\tr * 2\n\t},0`\n}\n\nfunction getHighlightStrokePoints(\n\tshape: TLHighlightShape,\n\tstrokeWidth: number,\n\tforceSolid: boolean\n) {\n\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\n\tlet sw = strokeWidth\n\tif (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {\n\t\tsw += rng(shape.id)() * (strokeWidth / 6)\n\t}\n\n\tconst options = getHighlightFreehandSettings({\n\t\tstrokeWidth: sw,\n\t\tshowAsComplete,\n\t})\n\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\n\treturn { strokePoints, sw }\n}\n\nfunction getHighlightSvgPath(shape: TLHighlightShape, strokeWidth: number, forceSolid: boolean) {\n\tconst { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid)\n\n\tconst solidStrokePath =\n\t\tstrokePoints.length > 1\n\t\t\t? getSvgPathFromStrokePoints(strokePoints, false)\n\t\t\t: getShapeDot(shape.props.segments[0].points[0])\n\n\treturn { solidStrokePath, sw }\n}\n\nfunction HighlightRenderer({\n\tstrokeWidth,\n\tshape,\n\topacity,\n}: {\n\tstrokeWidth: number\n\tshape: TLHighlightShape\n\topacity?: number\n}) {\n\tconst theme = useDefaultColorTheme()\n\tconst forceSolid = useForceSolid()\n\tconst { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, forceSolid)\n\tconst colorSpace = useColorSpace()\n\tconst color = theme[shape.props.color].highlight[colorSpace]\n\n\treturn (\n\t\t<SVGContainer id={shape.id} style={{ opacity }}>\n\t\t\t<path\n\t\t\t\td={solidStrokePath}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tpointerEvents=\"all\"\n\t\t\t\tstroke={color}\n\t\t\t\tstrokeWidth={sw}\n\t\t\t/>\n\t\t</SVGContainer>\n\t)\n}\n\nfunction highlighterToSvg(\n\tstrokeWidth: number,\n\tshape: TLHighlightShape,\n\topacity: number,\n\ttheme: TLDefaultColorTheme\n) {\n\tconst { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, false)\n\n\tconst path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\tpath.setAttribute('d', solidStrokePath)\n\tpath.setAttribute('fill', 'none')\n\tpath.setAttribute('stroke', theme[shape.props.color].highlight.srgb)\n\tpath.setAttribute('stroke-width', `${sw}`)\n\tpath.setAttribute('opacity', `${opacity}`)\n\n\treturn path\n}\n\nfunction getStrokeWidth(shape: TLHighlightShape) {\n\treturn FONT_SIZES[shape.props.size] * 1.12\n}\n\nfunction getIsDot(shape: TLHighlightShape) {\n\treturn shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2\n}\n"],
+  "mappings": "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",
+  "names": []
+}