@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/shapes/line/LineShapeUtil.mjs

@@ -0,0 +1,357 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  CubicSpline2d,
+  Polyline2d,
+  SVGContainer,
+  ShapeUtil,
+  Vec2d,
+  WeakMapCache,
+  deepCopy,
+  getDefaultColorTheme,
+  getIndexBetween,
+  lineShapeMigrations,
+  lineShapeProps,
+  sortByIndex
+} from "@bigbluebutton/editor";
+import { ShapeFill, useDefaultColorTheme } from "../shared/ShapeFill.mjs";
+import { STROKE_SIZES } from "../shared/default-shape-constants.mjs";
+import { getPerfectDashProps } from "../shared/getPerfectDashProps.mjs";
+import { getDrawLinePathData } from "../shared/polygon-helpers.mjs";
+import { getLineDrawPath, getLineIndicatorPath } from "./components/getLinePath.mjs";
+import {
+  getSvgPathForBezierCurve,
+  getSvgPathForCubicSpline,
+  getSvgPathForEdge,
+  getSvgPathForLineGeometry
+} from "./components/svg.mjs";
+const handlesCache = new WeakMapCache();
+class LineShapeUtil extends ShapeUtil {
+  static type = "line";
+  static props = lineShapeProps;
+  static migrations = lineShapeMigrations;
+  hideResizeHandles = () => true;
+  hideRotateHandle = () => true;
+  hideSelectionBoundsFg = () => true;
+  hideSelectionBoundsBg = () => true;
+  getDefaultProps() {
+    return {
+      dash: "draw",
+      size: "m",
+      color: "black",
+      spline: "line",
+      handles: {
+        start: {
+          id: "start",
+          type: "vertex",
+          canBind: false,
+          canSnap: true,
+          index: "a1",
+          x: 0,
+          y: 0
+        },
+        end: {
+          id: "end",
+          type: "vertex",
+          canBind: false,
+          canSnap: true,
+          index: "a2",
+          x: 0.1,
+          y: 0.1
+        }
+      }
+    };
+  }
+  getGeometry(shape) {
+    return getGeometryForLineShape(shape);
+  }
+  getHandles(shape) {
+    return handlesCache.get(shape.props, () => {
+      const handles = shape.props.handles;
+      const spline = getGeometryForLineShape(shape);
+      const sortedHandles = Object.values(handles).sort(sortByIndex);
+      const results = sortedHandles.slice();
+      for (let i = 0; i < spline.segments.length; i++) {
+        const segment = spline.segments[i];
+        const point = segment.midPoint();
+        const index = getIndexBetween(sortedHandles[i].index, sortedHandles[i + 1].index);
+        results.push({
+          id: `mid-${i}`,
+          type: "create",
+          index,
+          x: point.x,
+          y: point.y
+        });
+      }
+      return results.sort(sortByIndex);
+    });
+  }
+  getOutlineSegments(shape) {
+    const spline = this.editor.getShapeGeometry(shape);
+    return spline.segments.map((s) => s.vertices);
+  }
+  //   Events
+  onResize = (shape, info) => {
+    const { scaleX, scaleY } = info;
+    const handles = deepCopy(shape.props.handles);
+    Object.values(shape.props.handles).forEach(({ id, x, y }) => {
+      handles[id].x = x * scaleX;
+      handles[id].y = y * scaleY;
+    });
+    return {
+      props: {
+        handles
+      }
+    };
+  };
+  onHandleChange = (shape, { handle }) => {
+    const next = deepCopy(shape);
+    switch (handle.id) {
+      case "start":
+      case "end": {
+        next.props.handles[handle.id] = {
+          ...next.props.handles[handle.id],
+          x: handle.x,
+          y: handle.y
+        };
+        break;
+      }
+      default: {
+        const id = "handle:" + handle.index;
+        const existing = shape.props.handles[id];
+        if (existing) {
+          next.props.handles[id] = {
+            ...existing,
+            x: handle.x,
+            y: handle.y
+          };
+        } else {
+          next.props.handles[id] = {
+            id,
+            type: "vertex",
+            canBind: false,
+            index: handle.index,
+            x: handle.x,
+            y: handle.y
+          };
+        }
+        break;
+      }
+    }
+    return next;
+  };
+  component(shape) {
+    const theme = useDefaultColorTheme();
+    const spline = getGeometryForLineShape(shape);
+    const strokeWidth = STROKE_SIZES[shape.props.size];
+    const { dash, color } = shape.props;
+    if (shape.props.spline === "line") {
+      if (dash === "solid") {
+        const outline = spline.points;
+        const pathData = "M" + outline[0] + "L" + outline.slice(1);
+        return /* @__PURE__ */ jsxs(SVGContainer, { id: shape.id, children: [
+          /* @__PURE__ */ jsx(ShapeFill, { d: pathData, fill: "none", color, theme }),
+          /* @__PURE__ */ jsx("path", { d: pathData, stroke: theme[color].solid, strokeWidth, fill: "none" })
+        ] });
+      }
+      if (dash === "dashed" || dash === "dotted") {
+        const outline = spline.points;
+        const pathData = "M" + outline[0] + "L" + outline.slice(1);
+        return /* @__PURE__ */ jsxs(SVGContainer, { id: shape.id, children: [
+          /* @__PURE__ */ jsx(ShapeFill, { d: pathData, fill: "none", color, theme }),
+          /* @__PURE__ */ jsx("g", { stroke: theme[color].solid, strokeWidth, children: spline.segments.map((segment, i) => {
+            const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
+              segment.length,
+              strokeWidth,
+              {
+                style: dash,
+                start: i > 0 ? "outset" : "none",
+                end: i < spline.segments.length - 1 ? "outset" : "none"
+              }
+            );
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeDasharray,
+                strokeDashoffset,
+                d: getSvgPathForEdge(segment, true),
+                fill: "none"
+              },
+              i
+            );
+          }) })
+        ] });
+      }
+      if (dash === "draw") {
+        const outline = spline.points;
+        const [innerPathData, outerPathData] = getDrawLinePathData(shape.id, outline, strokeWidth);
+        return /* @__PURE__ */ jsxs(SVGContainer, { id: shape.id, children: [
+          /* @__PURE__ */ jsx(ShapeFill, { d: innerPathData, fill: "none", color, theme }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: outerPathData,
+              stroke: theme[color].solid,
+              strokeWidth,
+              fill: "none"
+            }
+          )
+        ] });
+      }
+    }
+    if (shape.props.spline === "cubic") {
+      const splinePath = getSvgPathForLineGeometry(spline);
+      if (dash === "solid") {
+        return /* @__PURE__ */ jsxs(SVGContainer, { id: shape.id, children: [
+          /* @__PURE__ */ jsx(ShapeFill, { d: splinePath, fill: "none", color, theme }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeWidth,
+              stroke: theme[color].solid,
+              fill: "none",
+              d: splinePath
+            }
+          )
+        ] });
+      }
+      if (dash === "dashed" || dash === "dotted") {
+        return /* @__PURE__ */ jsxs(SVGContainer, { id: shape.id, children: [
+          /* @__PURE__ */ jsx(ShapeFill, { d: splinePath, fill: "none", color, theme }),
+          /* @__PURE__ */ jsx("g", { stroke: theme[color].solid, strokeWidth, children: spline.segments.map((segment, i) => {
+            const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
+              segment.length,
+              strokeWidth,
+              {
+                style: dash,
+                start: i > 0 ? "outset" : "none",
+                end: i < spline.segments.length - 1 ? "outset" : "none"
+              }
+            );
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeDasharray,
+                strokeDashoffset,
+                d: getSvgPathForBezierCurve(segment, true),
+                fill: "none"
+              },
+              i
+            );
+          }) })
+        ] });
+      }
+      if (dash === "draw") {
+        return /* @__PURE__ */ jsxs(SVGContainer, { id: shape.id, children: [
+          /* @__PURE__ */ jsx(ShapeFill, { d: splinePath, fill: "none", color, theme }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: getLineDrawPath(shape, spline, strokeWidth),
+              strokeWidth: 1,
+              stroke: theme[color].solid,
+              fill: theme[color].solid
+            }
+          )
+        ] });
+      }
+    }
+  }
+  indicator(shape) {
+    const strokeWidth = STROKE_SIZES[shape.props.size];
+    const spline = getGeometryForLineShape(shape);
+    const { dash } = shape.props;
+    let path;
+    if (shape.props.spline === "line") {
+      const outline = spline.points;
+      if (dash === "solid" || dash === "dotted" || dash === "dashed") {
+        path = "M" + outline[0] + "L" + outline.slice(1);
+      } else {
+        const [innerPathData] = getDrawLinePathData(shape.id, outline, strokeWidth);
+        path = innerPathData;
+      }
+    } else {
+      path = getLineIndicatorPath(shape, spline, strokeWidth);
+    }
+    return /* @__PURE__ */ jsx("path", { d: path });
+  }
+  toSvg(shape) {
+    const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() });
+    const color = theme[shape.props.color].solid;
+    const spline = getGeometryForLineShape(shape);
+    const strokeWidth = STROKE_SIZES[shape.props.size];
+    switch (shape.props.dash) {
+      case "draw": {
+        let pathData;
+        if (spline instanceof CubicSpline2d) {
+          pathData = getLineDrawPath(shape, spline, strokeWidth);
+        } else {
+          const [_, outerPathData] = getDrawLinePathData(shape.id, spline.points, strokeWidth);
+          pathData = outerPathData;
+        }
+        const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        p.setAttribute("stroke-width", strokeWidth + "px");
+        p.setAttribute("stroke", color);
+        p.setAttribute("fill", "none");
+        p.setAttribute("d", pathData);
+        return p;
+      }
+      case "solid": {
+        let pathData;
+        if (spline instanceof CubicSpline2d) {
+          pathData = getSvgPathForCubicSpline(spline, false);
+        } else {
+          const outline = spline.points;
+          pathData = "M" + outline[0] + "L" + outline.slice(1);
+        }
+        const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        p.setAttribute("stroke-width", strokeWidth + "px");
+        p.setAttribute("stroke", color);
+        p.setAttribute("fill", "none");
+        p.setAttribute("d", pathData);
+        return p;
+      }
+      default: {
+        const { segments } = spline;
+        const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        g.setAttribute("stroke", color);
+        g.setAttribute("stroke-width", strokeWidth.toString());
+        const fn = spline instanceof CubicSpline2d ? getSvgPathForBezierCurve : getSvgPathForEdge;
+        segments.forEach((segment, i) => {
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
+            segment.length,
+            strokeWidth,
+            {
+              style: shape.props.dash,
+              start: i > 0 ? "outset" : "none",
+              end: i < segments.length - 1 ? "outset" : "none"
+            }
+          );
+          path.setAttribute("stroke-dasharray", strokeDasharray.toString());
+          path.setAttribute("stroke-dashoffset", strokeDashoffset.toString());
+          path.setAttribute("d", fn(segment, true));
+          path.setAttribute("fill", "none");
+          g.appendChild(path);
+        });
+        return g;
+      }
+    }
+  }
+}
+function getGeometryForLineShape(shape) {
+  const { spline, handles } = shape.props;
+  const handlePoints = Object.values(handles).sort(sortByIndex).map(Vec2d.From);
+  switch (spline) {
+    case "cubic": {
+      return new CubicSpline2d({ points: handlePoints });
+    }
+    case "line": {
+      return new Polyline2d({ points: handlePoints });
+    }
+  }
+}
+export {
+  LineShapeUtil,
+  getGeometryForLineShape
+};
+//# sourceMappingURL=LineShapeUtil.mjs.map

package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/line/LineShapeUtil.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n\tCubicSpline2d,\n\tPolyline2d,\n\tSVGContainer,\n\tShapeUtil,\n\tTLHandle,\n\tTLLineShape,\n\tTLOnHandleChangeHandler,\n\tTLOnResizeHandler,\n\tVec2d,\n\tWeakMapCache,\n\tdeepCopy,\n\tgetDefaultColorTheme,\n\tgetIndexBetween,\n\tlineShapeMigrations,\n\tlineShapeProps,\n\tsortByIndex,\n} from '@bigbluebutton/editor'\n\nimport { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill'\nimport { STROKE_SIZES } from '../shared/default-shape-constants'\nimport { getPerfectDashProps } from '../shared/getPerfectDashProps'\nimport { getDrawLinePathData } from '../shared/polygon-helpers'\nimport { getLineDrawPath, getLineIndicatorPath } from './components/getLinePath'\nimport {\n\tgetSvgPathForBezierCurve,\n\tgetSvgPathForCubicSpline,\n\tgetSvgPathForEdge,\n\tgetSvgPathForLineGeometry,\n} from './components/svg'\n\nconst handlesCache = new WeakMapCache<TLLineShape['props'], TLHandle[]>()\n\n/** @public */\nexport class LineShapeUtil extends ShapeUtil<TLLineShape> {\n\tstatic override type = 'line' as const\n\tstatic override props = lineShapeProps\n\tstatic override migrations = lineShapeMigrations\n\n\toverride hideResizeHandles = () => true\n\toverride hideRotateHandle = () => true\n\toverride hideSelectionBoundsFg = () => true\n\toverride hideSelectionBoundsBg = () => true\n\n\toverride getDefaultProps(): TLLineShape['props'] {\n\t\treturn {\n\t\t\tdash: 'draw',\n\t\t\tsize: 'm',\n\t\t\tcolor: 'black',\n\t\t\tspline: 'line',\n\t\t\thandles: {\n\t\t\t\tstart: {\n\t\t\t\t\tid: 'start',\n\t\t\t\t\ttype: 'vertex',\n\t\t\t\t\tcanBind: false,\n\t\t\t\t\tcanSnap: true,\n\t\t\t\t\tindex: 'a1',\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: 0,\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\tid: 'end',\n\t\t\t\t\ttype: 'vertex',\n\t\t\t\t\tcanBind: false,\n\t\t\t\t\tcanSnap: true,\n\t\t\t\t\tindex: 'a2',\n\t\t\t\t\tx: 0.1,\n\t\t\t\t\ty: 0.1,\n\t\t\t\t},\n\t\t\t},\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLLineShape) {\n\t\t// todo: should we have min size?\n\t\treturn getGeometryForLineShape(shape)\n\t}\n\n\toverride getHandles(shape: TLLineShape) {\n\t\treturn handlesCache.get(shape.props, () => {\n\t\t\tconst handles = shape.props.handles\n\n\t\t\tconst spline = getGeometryForLineShape(shape)\n\n\t\t\tconst sortedHandles = Object.values(handles).sort(sortByIndex)\n\t\t\tconst results = sortedHandles.slice()\n\n\t\t\t// Add \"create\" handles between each vertex handle\n\t\t\tfor (let i = 0; i < spline.segments.length; i++) {\n\t\t\t\tconst segment = spline.segments[i]\n\t\t\t\tconst point = segment.midPoint()\n\t\t\t\tconst index = getIndexBetween(sortedHandles[i].index, sortedHandles[i + 1].index)\n\n\t\t\t\tresults.push({\n\t\t\t\t\tid: `mid-${i}`,\n\t\t\t\t\ttype: 'create',\n\t\t\t\t\tindex,\n\t\t\t\t\tx: point.x,\n\t\t\t\t\ty: point.y,\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn results.sort(sortByIndex)\n\t\t})\n\t}\n\n\toverride getOutlineSegments(shape: TLLineShape) {\n\t\tconst spline = this.editor.getShapeGeometry(shape) as Polyline2d | CubicSpline2d\n\t\treturn spline.segments.map((s) => s.vertices)\n\t}\n\n\t//   Events\n\n\toverride onResize: TLOnResizeHandler<TLLineShape> = (shape, info) => {\n\t\tconst { scaleX, scaleY } = info\n\n\t\tconst handles = deepCopy(shape.props.handles)\n\n\t\tObject.values(shape.props.handles).forEach(({ id, x, y }) => {\n\t\t\thandles[id].x = x * scaleX\n\t\t\thandles[id].y = y * scaleY\n\t\t})\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\thandles,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride onHandleChange: TLOnHandleChangeHandler<TLLineShape> = (shape, { handle }) => {\n\t\tconst next = deepCopy(shape)\n\n\t\tswitch (handle.id) {\n\t\t\tcase 'start':\n\t\t\tcase 'end': {\n\t\t\t\tnext.props.handles[handle.id] = {\n\t\t\t\t\t...next.props.handles[handle.id],\n\t\t\t\t\tx: handle.x,\n\t\t\t\t\ty: handle.y,\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tconst id = 'handle:' + handle.index\n\t\t\t\tconst existing = shape.props.handles[id]\n\n\t\t\t\tif (existing) {\n\t\t\t\t\tnext.props.handles[id] = {\n\t\t\t\t\t\t...existing,\n\t\t\t\t\t\tx: handle.x,\n\t\t\t\t\t\ty: handle.y,\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tnext.props.handles[id] = {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype: 'vertex',\n\t\t\t\t\t\tcanBind: false,\n\t\t\t\t\t\tindex: handle.index,\n\t\t\t\t\t\tx: handle.x,\n\t\t\t\t\t\ty: handle.y,\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\treturn next\n\t}\n\n\tcomponent(shape: TLLineShape) {\n\t\tconst theme = useDefaultColorTheme()\n\t\tconst spline = getGeometryForLineShape(shape)\n\t\tconst strokeWidth = STROKE_SIZES[shape.props.size]\n\n\t\tconst { dash, color } = shape.props\n\n\t\t// Line style lines\n\t\tif (shape.props.spline === 'line') {\n\t\t\tif (dash === 'solid') {\n\t\t\t\tconst outline = spline.points\n\t\t\t\tconst pathData = 'M' + outline[0] + 'L' + outline.slice(1)\n\n\t\t\t\treturn (\n\t\t\t\t\t<SVGContainer id={shape.id}>\n\t\t\t\t\t\t<ShapeFill d={pathData} fill={'none'} color={color} theme={theme} />\n\t\t\t\t\t\t<path d={pathData} stroke={theme[color].solid} strokeWidth={strokeWidth} fill=\"none\" />\n\t\t\t\t\t</SVGContainer>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\tif (dash === 'dashed' || dash === 'dotted') {\n\t\t\t\tconst outline = spline.points\n\t\t\t\tconst pathData = 'M' + outline[0] + 'L' + outline.slice(1)\n\n\t\t\t\treturn (\n\t\t\t\t\t<SVGContainer id={shape.id}>\n\t\t\t\t\t\t<ShapeFill d={pathData} fill={'none'} color={color} theme={theme} />\n\t\t\t\t\t\t<g stroke={theme[color].solid} strokeWidth={strokeWidth}>\n\t\t\t\t\t\t\t{spline.segments.map((segment, i) => {\n\t\t\t\t\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\t\t\t\t\tsegment.length,\n\t\t\t\t\t\t\t\t\tstrokeWidth,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tstyle: dash,\n\t\t\t\t\t\t\t\t\t\tstart: i > 0 ? 'outset' : 'none',\n\t\t\t\t\t\t\t\t\t\tend: i < spline.segments.length - 1 ? 'outset' : 'none',\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\t\t\t\t\t\tstrokeDashoffset={strokeDashoffset}\n\t\t\t\t\t\t\t\t\t\td={getSvgPathForEdge(segment as any, true)}\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</SVGContainer>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\tif (dash === 'draw') {\n\t\t\t\tconst outline = spline.points\n\t\t\t\tconst [innerPathData, outerPathData] = getDrawLinePathData(shape.id, outline, strokeWidth)\n\n\t\t\t\treturn (\n\t\t\t\t\t<SVGContainer id={shape.id}>\n\t\t\t\t\t\t<ShapeFill d={innerPathData} fill={'none'} color={color} theme={theme} />\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td={outerPathData}\n\t\t\t\t\t\t\tstroke={theme[color].solid}\n\t\t\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SVGContainer>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t\t// Cubic style spline\n\t\tif (shape.props.spline === 'cubic') {\n\t\t\tconst splinePath = getSvgPathForLineGeometry(spline)\n\t\t\tif (dash === 'solid') {\n\t\t\t\treturn (\n\t\t\t\t\t<SVGContainer id={shape.id}>\n\t\t\t\t\t\t<ShapeFill d={splinePath} fill={'none'} color={color} theme={theme} />\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\t\t\tstroke={theme[color].solid}\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\td={splinePath}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SVGContainer>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\tif (dash === 'dashed' || dash === 'dotted') {\n\t\t\t\treturn (\n\t\t\t\t\t<SVGContainer id={shape.id}>\n\t\t\t\t\t\t<ShapeFill d={splinePath} fill={'none'} color={color} theme={theme} />\n\t\t\t\t\t\t<g stroke={theme[color].solid} strokeWidth={strokeWidth}>\n\t\t\t\t\t\t\t{spline.segments.map((segment, i) => {\n\t\t\t\t\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\t\t\t\t\tsegment.length,\n\t\t\t\t\t\t\t\t\tstrokeWidth,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tstyle: dash,\n\t\t\t\t\t\t\t\t\t\tstart: i > 0 ? 'outset' : 'none',\n\t\t\t\t\t\t\t\t\t\tend: i < spline.segments.length - 1 ? 'outset' : 'none',\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\t\t\t\t\t\tstrokeDashoffset={strokeDashoffset}\n\t\t\t\t\t\t\t\t\t\td={getSvgPathForBezierCurve(segment as any, true)}\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</SVGContainer>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\tif (dash === 'draw') {\n\t\t\t\treturn (\n\t\t\t\t\t<SVGContainer id={shape.id}>\n\t\t\t\t\t\t<ShapeFill d={splinePath} fill={'none'} color={color} theme={theme} />\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td={getLineDrawPath(shape, spline, strokeWidth)}\n\t\t\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\t\t\tstroke={theme[color].solid}\n\t\t\t\t\t\t\tfill={theme[color].solid}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SVGContainer>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\tindicator(shape: TLLineShape) {\n\t\tconst strokeWidth = STROKE_SIZES[shape.props.size]\n\t\tconst spline = getGeometryForLineShape(shape)\n\t\tconst { dash } = shape.props\n\n\t\tlet path: string\n\n\t\tif (shape.props.spline === 'line') {\n\t\t\tconst outline = spline.points\n\t\t\tif (dash === 'solid' || dash === 'dotted' || dash === 'dashed') {\n\t\t\t\tpath = 'M' + outline[0] + 'L' + outline.slice(1)\n\t\t\t} else {\n\t\t\t\tconst [innerPathData] = getDrawLinePathData(shape.id, outline, strokeWidth)\n\t\t\t\tpath = innerPathData\n\t\t\t}\n\t\t} else {\n\t\t\tpath = getLineIndicatorPath(shape, spline, strokeWidth)\n\t\t}\n\n\t\treturn <path d={path} />\n\t}\n\n\toverride toSvg(shape: TLLineShape) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\tconst color = theme[shape.props.color].solid\n\t\tconst spline = getGeometryForLineShape(shape)\n\t\tconst strokeWidth = STROKE_SIZES[shape.props.size]\n\n\t\tswitch (shape.props.dash) {\n\t\t\tcase 'draw': {\n\t\t\t\tlet pathData: string\n\t\t\t\tif (spline instanceof CubicSpline2d) {\n\t\t\t\t\tpathData = getLineDrawPath(shape, spline, strokeWidth)\n\t\t\t\t} else {\n\t\t\t\t\tconst [_, outerPathData] = getDrawLinePathData(shape.id, spline.points, strokeWidth)\n\t\t\t\t\tpathData = outerPathData\n\t\t\t\t}\n\n\t\t\t\tconst p = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\t\t\t\tp.setAttribute('stroke-width', strokeWidth + 'px')\n\t\t\t\tp.setAttribute('stroke', color)\n\t\t\t\tp.setAttribute('fill', 'none')\n\t\t\t\tp.setAttribute('d', pathData)\n\n\t\t\t\treturn p\n\t\t\t}\n\t\t\tcase 'solid': {\n\t\t\t\tlet pathData: string\n\n\t\t\t\tif (spline instanceof CubicSpline2d) {\n\t\t\t\t\tpathData = getSvgPathForCubicSpline(spline, false)\n\t\t\t\t} else {\n\t\t\t\t\tconst outline = spline.points\n\t\t\t\t\tpathData = 'M' + outline[0] + 'L' + outline.slice(1)\n\t\t\t\t}\n\n\t\t\t\tconst p = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\t\t\t\tp.setAttribute('stroke-width', strokeWidth + 'px')\n\t\t\t\tp.setAttribute('stroke', color)\n\t\t\t\tp.setAttribute('fill', 'none')\n\t\t\t\tp.setAttribute('d', pathData)\n\n\t\t\t\treturn p\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tconst { segments } = spline\n\n\t\t\t\tconst g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\t\t\t\tg.setAttribute('stroke', color)\n\t\t\t\tg.setAttribute('stroke-width', strokeWidth.toString())\n\n\t\t\t\tconst fn = spline instanceof CubicSpline2d ? getSvgPathForBezierCurve : getSvgPathForEdge\n\n\t\t\t\tsegments.forEach((segment, i) => {\n\t\t\t\t\tconst path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\t\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\t\tsegment.length,\n\t\t\t\t\t\tstrokeWidth,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tstyle: shape.props.dash,\n\t\t\t\t\t\t\tstart: i > 0 ? 'outset' : 'none',\n\t\t\t\t\t\t\tend: i < segments.length - 1 ? 'outset' : 'none',\n\t\t\t\t\t\t}\n\t\t\t\t\t)\n\n\t\t\t\t\tpath.setAttribute('stroke-dasharray', strokeDasharray.toString())\n\t\t\t\t\tpath.setAttribute('stroke-dashoffset', strokeDashoffset.toString())\n\t\t\t\t\tpath.setAttribute('d', fn(segment as any, true))\n\t\t\t\t\tpath.setAttribute('fill', 'none')\n\t\t\t\t\tg.appendChild(path)\n\t\t\t\t})\n\n\t\t\t\treturn g\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @public */\nexport function getGeometryForLineShape(shape: TLLineShape): CubicSpline2d | Polyline2d {\n\tconst { spline, handles } = shape.props\n\tconst handlePoints = Object.values(handles).sort(sortByIndex).map(Vec2d.From)\n\n\tswitch (spline) {\n\t\tcase 'cubic': {\n\t\t\treturn new CubicSpline2d({ points: handlePoints })\n\t\t}\n\t\tcase 'line': {\n\t\t\treturn new Polyline2d({ points: handlePoints })\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/shapes/line/components/getLinePath.mjs

@@ -0,0 +1,68 @@
+import { getSvgPathFromPoints } from "@bigbluebutton/editor";
+import { getStrokeOutlinePoints } from "../../shared/freehand/getStrokeOutlinePoints.mjs";
+import { getStrokePoints } from "../../shared/freehand/getStrokePoints.mjs";
+import { setStrokePointRadii } from "../../shared/freehand/setStrokePointRadii.mjs";
+import { getSvgPathFromStrokePoints } from "../../shared/freehand/svg.mjs";
+import { getSvgPathForLineGeometry } from "./svg.mjs";
+function getLineDrawFreehandOptions(strokeWidth) {
+  return {
+    size: strokeWidth,
+    thinning: 0.4,
+    streamline: 0,
+    smoothing: 0.5,
+    simulatePressure: true,
+    last: true
+  };
+}
+function getLineSolidFreehandOptions(strokeWidth) {
+  return {
+    size: strokeWidth,
+    thinning: 0,
+    streamline: 0,
+    smoothing: 0.5,
+    simulatePressure: false,
+    last: true
+  };
+}
+function getLineStrokePoints(shape, spline, strokeWidth) {
+  const points = spline.vertices;
+  const options = getLineDrawFreehandOptions(strokeWidth);
+  return getStrokePoints(points, options);
+}
+function getLineDrawStrokeOutlinePoints(shape, spline, strokeWidth) {
+  const options = getLineDrawFreehandOptions(strokeWidth);
+  return getStrokeOutlinePoints(
+    setStrokePointRadii(getLineStrokePoints(shape, spline, strokeWidth), options),
+    options
+  );
+}
+function getLineSolidStrokeOutlinePoints(shape, spline, strokeWidth) {
+  const options = getLineSolidFreehandOptions(strokeWidth);
+  return getStrokeOutlinePoints(getLineStrokePoints(shape, spline, strokeWidth), options);
+}
+function getLineDrawPath(shape, spline, strokeWidth) {
+  const stroke = getLineDrawStrokeOutlinePoints(shape, spline, strokeWidth);
+  return getSvgPathFromPoints(stroke);
+}
+function getLineSolidPath(shape, spline, strokeWidth) {
+  const outlinePoints = getLineSolidStrokeOutlinePoints(shape, spline, strokeWidth);
+  return getSvgPathFromPoints(outlinePoints);
+}
+function getLineIndicatorPath(shape, spline, strokeWidth) {
+  if (shape.props.dash === "draw") {
+    const strokePoints = getLineStrokePoints(shape, spline, strokeWidth);
+    return getSvgPathFromStrokePoints(strokePoints);
+  }
+  return getSvgPathForLineGeometry(spline);
+}
+export {
+  getLineDrawFreehandOptions,
+  getLineDrawPath,
+  getLineDrawStrokeOutlinePoints,
+  getLineIndicatorPath,
+  getLineSolidFreehandOptions,
+  getLineSolidPath,
+  getLineSolidStrokeOutlinePoints,
+  getLineStrokePoints
+};
+//# sourceMappingURL=getLinePath.mjs.map

package/dist-esm/lib/shapes/line/components/getLinePath.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/line/components/getLinePath.ts"],
+  "sourcesContent": ["import { CubicSpline2d, Polyline2d, TLLineShape, getSvgPathFromPoints } from '@bigbluebutton/editor'\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 { getSvgPathForLineGeometry } from './svg'\n\nexport function getLineDrawFreehandOptions(strokeWidth: number) {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0.4,\n\t\tstreamline: 0,\n\t\tsmoothing: 0.5,\n\t\tsimulatePressure: true,\n\t\tlast: true,\n\t}\n}\n\nexport function getLineSolidFreehandOptions(strokeWidth: number) {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: 0,\n\t\tsmoothing: 0.5,\n\t\tsimulatePressure: false,\n\t\tlast: true,\n\t}\n}\n\nexport function getLineStrokePoints(\n\tshape: TLLineShape,\n\tspline: CubicSpline2d | Polyline2d,\n\tstrokeWidth: number\n) {\n\t// const points = getLinePoints(spline)\n\tconst points = spline.vertices\n\tconst options = getLineDrawFreehandOptions(strokeWidth)\n\treturn getStrokePoints(points, options)\n}\n\nexport function getLineDrawStrokeOutlinePoints(\n\tshape: TLLineShape,\n\tspline: CubicSpline2d | Polyline2d,\n\tstrokeWidth: number\n) {\n\tconst options = getLineDrawFreehandOptions(strokeWidth)\n\treturn getStrokeOutlinePoints(\n\t\tsetStrokePointRadii(getLineStrokePoints(shape, spline, strokeWidth), options),\n\t\toptions\n\t)\n}\n\nexport function getLineSolidStrokeOutlinePoints(\n\tshape: TLLineShape,\n\tspline: CubicSpline2d | Polyline2d,\n\tstrokeWidth: number\n) {\n\tconst options = getLineSolidFreehandOptions(strokeWidth)\n\treturn getStrokeOutlinePoints(getLineStrokePoints(shape, spline, strokeWidth), options)\n}\n\nexport function getLineDrawPath(\n\tshape: TLLineShape,\n\tspline: CubicSpline2d | Polyline2d,\n\tstrokeWidth: number\n) {\n\tconst stroke = getLineDrawStrokeOutlinePoints(shape, spline, strokeWidth)\n\treturn getSvgPathFromPoints(stroke)\n}\n\nexport function getLineSolidPath(\n\tshape: TLLineShape,\n\tspline: CubicSpline2d | Polyline2d,\n\tstrokeWidth: number\n) {\n\tconst outlinePoints = getLineSolidStrokeOutlinePoints(shape, spline, strokeWidth)\n\treturn getSvgPathFromPoints(outlinePoints)\n}\n\nexport function getLineIndicatorPath(\n\tshape: TLLineShape,\n\tspline: CubicSpline2d | Polyline2d,\n\tstrokeWidth: number\n) {\n\tif (shape.props.dash === 'draw') {\n\t\tconst strokePoints = getLineStrokePoints(shape, spline, strokeWidth)\n\t\treturn getSvgPathFromStrokePoints(strokePoints)\n\t}\n\n\treturn getSvgPathForLineGeometry(spline)\n}\n"],
+  "mappings": "AAAA,SAAiD,4BAA4B;AAC7E,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAEnC,SAAS,2BAA2B,aAAqB;AAC/D,SAAO;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,MAAM;AAAA,EACP;AACD;AAEO,SAAS,4BAA4B,aAAqB;AAChE,SAAO;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,MAAM;AAAA,EACP;AACD;AAEO,SAAS,oBACf,OACA,QACA,aACC;AAED,QAAM,SAAS,OAAO;AACtB,QAAM,UAAU,2BAA2B,WAAW;AACtD,SAAO,gBAAgB,QAAQ,OAAO;AACvC;AAEO,SAAS,+BACf,OACA,QACA,aACC;AACD,QAAM,UAAU,2BAA2B,WAAW;AACtD,SAAO;AAAA,IACN,oBAAoB,oBAAoB,OAAO,QAAQ,WAAW,GAAG,OAAO;AAAA,IAC5E;AAAA,EACD;AACD;AAEO,SAAS,gCACf,OACA,QACA,aACC;AACD,QAAM,UAAU,4BAA4B,WAAW;AACvD,SAAO,uBAAuB,oBAAoB,OAAO,QAAQ,WAAW,GAAG,OAAO;AACvF;AAEO,SAAS,gBACf,OACA,QACA,aACC;AACD,QAAM,SAAS,+BAA+B,OAAO,QAAQ,WAAW;AACxE,SAAO,qBAAqB,MAAM;AACnC;AAEO,SAAS,iBACf,OACA,QACA,aACC;AACD,QAAM,gBAAgB,gCAAgC,OAAO,QAAQ,WAAW;AAChF,SAAO,qBAAqB,aAAa;AAC1C;AAEO,SAAS,qBACf,OACA,QACA,aACC;AACD,MAAI,MAAM,MAAM,SAAS,QAAQ;AAChC,UAAM,eAAe,oBAAoB,OAAO,QAAQ,WAAW;AACnE,WAAO,2BAA2B,YAAY;AAAA,EAC/C;AAEA,SAAO,0BAA0B,MAAM;AACxC;",
+  "names": []
+}

package/dist-esm/lib/shapes/line/components/svg.mjs

@@ -0,0 +1,57 @@
+import {
+  Polyline2d,
+  Vec2d,
+  toDomPrecision
+} from "@bigbluebutton/editor";
+function getSvgPathForEdge(edge, first) {
+  const { start, end } = edge;
+  if (first) {
+    return `M${toDomPrecision(start.x)},${toDomPrecision(start.y)} L${toDomPrecision(
+      end.x
+    )},${toDomPrecision(end.y)} `;
+  }
+  return `${toDomPrecision(end.x)},${toDomPrecision(end.y)} `;
+}
+function getSvgPathForBezierCurve(curve, first) {
+  const { a, b, c, d } = curve;
+  if (Vec2d.Equals(a, d))
+    return "";
+  return `${first ? `M${toDomPrecision(a.x)},${toDomPrecision(a.y)}` : ``}C${toDomPrecision(
+    b.x
+  )},${toDomPrecision(b.y)} ${toDomPrecision(c.x)},${toDomPrecision(c.y)} ${toDomPrecision(
+    d.x
+  )},${toDomPrecision(d.y)}`;
+}
+function getSvgPathForCubicSpline(spline, isClosed) {
+  let d = spline.segments.reduce((d2, segment, i) => {
+    return d2 + getSvgPathForBezierCurve(segment, i === 0);
+  }, "");
+  if (isClosed) {
+    d += "Z";
+  }
+  return d;
+}
+function getSvgPathForPolylineSpline(spline, isClosed) {
+  let d = spline.segments.reduce((d2, segment, i) => {
+    return d2 + getSvgPathForEdge(segment, i === 0);
+  }, "");
+  if (isClosed) {
+    d += "Z";
+  }
+  return d;
+}
+function getSvgPathForLineGeometry(spline, isClosed = false) {
+  if (spline instanceof Polyline2d) {
+    return getSvgPathForPolylineSpline(spline, isClosed);
+  } else {
+    return getSvgPathForCubicSpline(spline, isClosed);
+  }
+}
+export {
+  getSvgPathForBezierCurve,
+  getSvgPathForCubicSpline,
+  getSvgPathForEdge,
+  getSvgPathForLineGeometry,
+  getSvgPathForPolylineSpline
+};
+//# sourceMappingURL=svg.mjs.map

package/dist-esm/lib/shapes/line/components/svg.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/line/components/svg.ts"],
+  "sourcesContent": ["import {\n\tCubicBezier2d,\n\tCubicSpline2d,\n\tEdge2d,\n\tPolyline2d,\n\tVec2d,\n\ttoDomPrecision,\n} from '@bigbluebutton/editor'\n\nexport function getSvgPathForEdge(edge: Edge2d, first: boolean) {\n\tconst { start, end } = edge\n\tif (first) {\n\t\treturn `M${toDomPrecision(start.x)},${toDomPrecision(start.y)} L${toDomPrecision(\n\t\t\tend.x\n\t\t)},${toDomPrecision(end.y)} `\n\t}\n\treturn `${toDomPrecision(end.x)},${toDomPrecision(end.y)} `\n}\n\nexport function getSvgPathForBezierCurve(curve: CubicBezier2d, first: boolean) {\n\tconst { a, b, c, d } = curve\n\n\tif (Vec2d.Equals(a, d)) return ''\n\n\treturn `${first ? `M${toDomPrecision(a.x)},${toDomPrecision(a.y)}` : ``}C${toDomPrecision(\n\t\tb.x\n\t)},${toDomPrecision(b.y)} ${toDomPrecision(c.x)},${toDomPrecision(c.y)} ${toDomPrecision(\n\t\td.x\n\t)},${toDomPrecision(d.y)}`\n}\n\nexport function getSvgPathForCubicSpline(spline: CubicSpline2d, isClosed: boolean) {\n\tlet d = spline.segments.reduce((d, segment, i) => {\n\t\treturn d + getSvgPathForBezierCurve(segment, i === 0)\n\t}, '')\n\n\tif (isClosed) {\n\t\td += 'Z'\n\t}\n\n\treturn d\n}\n\nexport function getSvgPathForPolylineSpline(spline: Polyline2d, isClosed: boolean) {\n\tlet d = spline.segments.reduce((d, segment, i) => {\n\t\treturn d + getSvgPathForEdge(segment, i === 0)\n\t}, '')\n\n\tif (isClosed) {\n\t\td += 'Z'\n\t}\n\n\treturn d\n}\n\nexport function getSvgPathForLineGeometry(spline: CubicSpline2d | Polyline2d, isClosed = false) {\n\tif (spline instanceof Polyline2d) {\n\t\treturn getSvgPathForPolylineSpline(spline, isClosed)\n\t} else {\n\t\treturn getSvgPathForCubicSpline(spline, isClosed)\n\t}\n}\n"],
+  "mappings": "AAAA;AAAA,EAIC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEA,SAAS,kBAAkB,MAAc,OAAgB;AAC/D,QAAM,EAAE,OAAO,IAAI,IAAI;AACvB,MAAI,OAAO;AACV,WAAO,IAAI,eAAe,MAAM,CAAC,CAAC,IAAI,eAAe,MAAM,CAAC,CAAC,KAAK;AAAA,MACjE,IAAI;AAAA,IACL,CAAC,IAAI,eAAe,IAAI,CAAC,CAAC;AAAA,EAC3B;AACA,SAAO,GAAG,eAAe,IAAI,CAAC,CAAC,IAAI,eAAe,IAAI,CAAC,CAAC;AACzD;AAEO,SAAS,yBAAyB,OAAsB,OAAgB;AAC9E,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI;AAEvB,MAAI,MAAM,OAAO,GAAG,CAAC;AAAG,WAAO;AAE/B,SAAO,GAAG,QAAQ,IAAI,eAAe,EAAE,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI;AAAA,IAC1E,EAAE;AAAA,EACH,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC,IAAI;AAAA,IACzE,EAAE;AAAA,EACH,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC;AACzB;AAEO,SAAS,yBAAyB,QAAuB,UAAmB;AAClF,MAAI,IAAI,OAAO,SAAS,OAAO,CAACA,IAAG,SAAS,MAAM;AACjD,WAAOA,KAAI,yBAAyB,SAAS,MAAM,CAAC;AAAA,EACrD,GAAG,EAAE;AAEL,MAAI,UAAU;AACb,SAAK;AAAA,EACN;AAEA,SAAO;AACR;AAEO,SAAS,4BAA4B,QAAoB,UAAmB;AAClF,MAAI,IAAI,OAAO,SAAS,OAAO,CAACA,IAAG,SAAS,MAAM;AACjD,WAAOA,KAAI,kBAAkB,SAAS,MAAM,CAAC;AAAA,EAC9C,GAAG,EAAE;AAEL,MAAI,UAAU;AACb,SAAK;AAAA,EACN;AAEA,SAAO;AACR;AAEO,SAAS,0BAA0B,QAAoC,WAAW,OAAO;AAC/F,MAAI,kBAAkB,YAAY;AACjC,WAAO,4BAA4B,QAAQ,QAAQ;AAAA,EACpD,OAAO;AACN,WAAO,yBAAyB,QAAQ,QAAQ;AAAA,EACjD;AACD;",
+  "names": ["d"]
+}

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

@@ -0,0 +1,19 @@
+import { StateNode } from "@bigbluebutton/editor";
+class Idle extends StateNode {
+  static id = "idle";
+  shapeId = "";
+  onEnter = (info) => {
+    this.shapeId = info.shapeId;
+    this.editor.setCursor({ type: "cross", rotation: 0 });
+  };
+  onPointerDown = () => {
+    this.parent.transition("pointing", { shapeId: this.shapeId });
+  };
+  onCancel = () => {
+    this.editor.setCurrentTool("select");
+  };
+}
+export {
+  Idle
+};
+//# sourceMappingURL=Idle.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/shapes/line/toolStates/Idle.ts"],
+  "sourcesContent": ["import { StateNode, TLEventHandlers, TLShapeId } from '@bigbluebutton/editor'\n\nexport class Idle extends StateNode {\n\tstatic override id = 'idle'\n\n\tprivate shapeId = '' as TLShapeId\n\n\toverride onEnter = (info: { shapeId: TLShapeId }) => {\n\t\tthis.shapeId = info.shapeId\n\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t}\n\n\toverride onPointerDown: TLEventHandlers['onPointerDown'] = () => {\n\t\tthis.parent.transition('pointing', { shapeId: this.shapeId })\n\t}\n\n\toverride onCancel = () => {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,iBAA6C;AAE/C,MAAM,aAAa,UAAU;AAAA,EACnC,OAAgB,KAAK;AAAA,EAEb,UAAU;AAAA,EAET,UAAU,CAAC,SAAiC;AACpD,SAAK,UAAU,KAAK;AACpB,SAAK,OAAO,UAAU,EAAE,MAAM,SAAS,UAAU,EAAE,CAAC;AAAA,EACrD;AAAA,EAES,gBAAkD,MAAM;AAChE,SAAK,OAAO,WAAW,YAAY,EAAE,SAAS,KAAK,QAAQ,CAAC;AAAA,EAC7D;AAAA,EAES,WAAW,MAAM;AACzB,SAAK,OAAO,eAAe,QAAQ;AAAA,EACpC;AACD;",
+  "names": []
+}