tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/dist-esm/lib/overlays/ShapeIndicatorOverlayUtil.mjs

@@ -0,0 +1,87 @@
+import { OverlayUtil, strokeShapeIndicators } from "@tldraw/editor";
+import { computed } from "@tldraw/state";
+class ShapeIndicatorOverlayUtil extends OverlayUtil {
+  static type = "shape_indicator";
+  options = { zIndex: 50, lineWidth: 1.5, hintedLineWidth: 2.5 };
+  // Narrow projection of instance state. Reading the full record would
+  // re-fire getOverlays on every cursor move / brush update; gating on these
+  // three booleans means we only re-fire when one of them actually flips.
+  _instanceFlags$ = computed(
+    "shape indicator instance flags",
+    () => {
+      const i = this.editor.getInstanceState();
+      return {
+        isChangingStyle: i.isChangingStyle,
+        isHoveringCanvas: i.isHoveringCanvas,
+        isCoarsePointer: i.isCoarsePointer
+      };
+    },
+    {
+      isEqual: (a, b) => a.isChangingStyle === b.isChangingStyle && a.isHoveringCanvas === b.isHoveringCanvas && a.isCoarsePointer === b.isCoarsePointer
+    }
+  );
+  isActive() {
+    return true;
+  }
+  getOverlays() {
+    const editor = this.editor;
+    const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id));
+    const idsToDisplay = [];
+    const { isChangingStyle, isHoveringCanvas, isCoarsePointer } = this._instanceFlags$.get();
+    const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
+    const isInSelectState = editor.isInAny(
+      "select.brushing",
+      "select.scribble_brushing",
+      "select.pointing_shape",
+      "select.pointing_selection",
+      "select.pointing_handle",
+      "select.pointing_resize_handle",
+      "select.pointing_rotate_handle"
+    );
+    if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
+      for (const id of editor.getSelectedShapeIds()) {
+        if (renderingShapeIds.has(id)) idsToDisplay.push(id);
+      }
+      if (isIdleOrEditing && isHoveringCanvas && !isCoarsePointer) {
+        const hovered = editor.getHoveredShapeId();
+        if (hovered && renderingShapeIds.has(hovered) && !idsToDisplay.includes(hovered)) {
+          idsToDisplay.push(hovered);
+        }
+      }
+    }
+    const hintingShapeIds = [];
+    for (const id of editor.getHintingShapeIds()) {
+      if (renderingShapeIds.has(id)) hintingShapeIds.push(id);
+    }
+    if (idsToDisplay.length === 0 && hintingShapeIds.length === 0) {
+      return [];
+    }
+    return [
+      {
+        id: "shape_indicator",
+        type: "shape_indicator",
+        props: { idsToDisplay, hintingShapeIds }
+      }
+    ];
+  }
+  render(ctx, overlays) {
+    const overlay = overlays[0];
+    if (!overlay) return;
+    const editor = this.editor;
+    const zoom = editor.getZoomLevel();
+    const { idsToDisplay, hintingShapeIds } = overlay.props;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = editor.getCurrentTheme().colors[editor.getColorMode()].selectionStroke;
+    ctx.lineWidth = this.options.lineWidth / zoom;
+    strokeShapeIndicators(editor, ctx, idsToDisplay);
+    if (hintingShapeIds.length > 0) {
+      ctx.lineWidth = this.options.hintedLineWidth / zoom;
+      strokeShapeIndicators(editor, ctx, hintingShapeIds);
+    }
+  }
+}
+export {
+  ShapeIndicatorOverlayUtil
+};
+//# sourceMappingURL=ShapeIndicatorOverlayUtil.mjs.map

package/dist-esm/lib/overlays/ShapeIndicatorOverlayUtil.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/overlays/ShapeIndicatorOverlayUtil.ts"],
+  "sourcesContent": ["import { OverlayUtil, strokeShapeIndicators, TLOverlay } from '@tldraw/editor'\nimport { computed } from '@tldraw/state'\nimport { TLShapeId } from '@tldraw/tlschema'\n\n/** @public */\nexport interface TLShapeIndicatorOverlay extends TLOverlay {\n\tprops: {\n\t\tidsToDisplay: TLShapeId[]\n\t\thintingShapeIds: TLShapeId[]\n\t}\n}\n\ninterface RelevantInstanceFlags {\n\tisChangingStyle: boolean\n\tisHoveringCanvas: boolean | null\n\tisCoarsePointer: boolean\n}\n\n/**\n * Overlay util for shape indicators \u2014 the selection / hover / hint outlines drawn\n * under the selection foreground. Paints local indicators in the theme's\n * selection color.\n *\n * Remote collaborator selection indicators are drawn by a separate overlay util\n * (e.g. `CollaboratorShapeIndicatorOverlayUtil` from `tldraw`) that runs at a\n * lower z-index so peer selections appear under the local indicators.\n *\n * Non-interactive: contributes no hit-test geometry.\n *\n * @public\n */\nexport class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {\n\tstatic override type = 'shape_indicator'\n\toverride options = { zIndex: 50, lineWidth: 1.5, hintedLineWidth: 2.5 }\n\n\t// Narrow projection of instance state. Reading the full record would\n\t// re-fire getOverlays on every cursor move / brush update; gating on these\n\t// three booleans means we only re-fire when one of them actually flips.\n\tprivate _instanceFlags$ = computed<RelevantInstanceFlags>(\n\t\t'shape indicator instance flags',\n\t\t() => {\n\t\t\tconst i = this.editor.getInstanceState()\n\t\t\treturn {\n\t\t\t\tisChangingStyle: i.isChangingStyle,\n\t\t\t\tisHoveringCanvas: i.isHoveringCanvas,\n\t\t\t\tisCoarsePointer: i.isCoarsePointer,\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tisEqual: (a, b) =>\n\t\t\t\ta.isChangingStyle === b.isChangingStyle &&\n\t\t\t\ta.isHoveringCanvas === b.isHoveringCanvas &&\n\t\t\t\ta.isCoarsePointer === b.isCoarsePointer,\n\t\t}\n\t)\n\n\toverride isActive(): boolean {\n\t\treturn true\n\t}\n\n\toverride getOverlays(): TLShapeIndicatorOverlay[] {\n\t\tconst editor = this.editor\n\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t// Local selected / hovered indicators.\n\t\tconst idsToDisplay: TLShapeId[] = []\n\t\tconst { isChangingStyle, isHoveringCanvas, isCoarsePointer } = this._instanceFlags$.get()\n\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\tconst isInSelectState = editor.isInAny(\n\t\t\t'select.brushing',\n\t\t\t'select.scribble_brushing',\n\t\t\t'select.pointing_shape',\n\t\t\t'select.pointing_selection',\n\t\t\t'select.pointing_handle',\n\t\t\t'select.pointing_resize_handle',\n\t\t\t'select.pointing_rotate_handle'\n\t\t)\n\n\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\tif (renderingShapeIds.has(id)) idsToDisplay.push(id)\n\t\t\t}\n\t\t\tif (isIdleOrEditing && isHoveringCanvas && !isCoarsePointer) {\n\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\tif (hovered && renderingShapeIds.has(hovered) && !idsToDisplay.includes(hovered)) {\n\t\t\t\t\tidsToDisplay.push(hovered)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Hinted shapes (drawn thicker). Already deduped at write time in\n\t\t// `updateHintingShapeIds`, so no need to dedupe again here.\n\t\tconst hintingShapeIds: TLShapeId[] = []\n\t\tfor (const id of editor.getHintingShapeIds()) {\n\t\t\tif (renderingShapeIds.has(id)) hintingShapeIds.push(id)\n\t\t}\n\n\t\tif (idsToDisplay.length === 0 && hintingShapeIds.length === 0) {\n\t\t\treturn []\n\t\t}\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tid: 'shape_indicator',\n\t\t\t\ttype: 'shape_indicator',\n\t\t\t\tprops: { idsToDisplay, hintingShapeIds },\n\t\t\t},\n\t\t]\n\t}\n\n\toverride render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void {\n\t\tconst overlay = overlays[0]\n\t\tif (!overlay) return\n\n\t\tconst editor = this.editor\n\t\tconst zoom = editor.getZoomLevel()\n\t\tconst { idsToDisplay, hintingShapeIds } = overlay.props\n\n\t\tctx.lineCap = 'round'\n\t\tctx.lineJoin = 'round'\n\n\t\t// Local selected / hovered indicators \u2014 one stroke call for the whole batch.\n\t\tctx.strokeStyle = editor.getCurrentTheme().colors[editor.getColorMode()].selectionStroke\n\t\tctx.lineWidth = this.options.lineWidth / zoom\n\t\tstrokeShapeIndicators(editor, ctx, idsToDisplay)\n\n\t\t// Hinted shapes \u2014 thicker stroke, one call for the whole batch.\n\t\tif (hintingShapeIds.length > 0) {\n\t\t\tctx.lineWidth = this.options.hintedLineWidth / zoom\n\t\t\tstrokeShapeIndicators(editor, ctx, hintingShapeIds)\n\t\t}\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,6BAAwC;AAC9D,SAAS,gBAAgB;AA8BlB,MAAM,kCAAkC,YAAqC;AAAA,EACnF,OAAgB,OAAO;AAAA,EACd,UAAU,EAAE,QAAQ,IAAI,WAAW,KAAK,iBAAiB,IAAI;AAAA;AAAA;AAAA;AAAA,EAK9D,kBAAkB;AAAA,IACzB;AAAA,IACA,MAAM;AACL,YAAM,IAAI,KAAK,OAAO,iBAAiB;AACvC,aAAO;AAAA,QACN,iBAAiB,EAAE;AAAA,QACnB,kBAAkB,EAAE;AAAA,QACpB,iBAAiB,EAAE;AAAA,MACpB;AAAA,IACD;AAAA,IACA;AAAA,MACC,SAAS,CAAC,GAAG,MACZ,EAAE,oBAAoB,EAAE,mBACxB,EAAE,qBAAqB,EAAE,oBACzB,EAAE,oBAAoB,EAAE;AAAA,IAC1B;AAAA,EACD;AAAA,EAES,WAAoB;AAC5B,WAAO;AAAA,EACR;AAAA,EAES,cAAyC;AACjD,UAAM,SAAS,KAAK;AACpB,UAAM,oBAAoB,IAAI,IAAI,OAAO,mBAAmB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAG9E,UAAM,eAA4B,CAAC;AACnC,UAAM,EAAE,iBAAiB,kBAAkB,gBAAgB,IAAI,KAAK,gBAAgB,IAAI;AACxF,UAAM,kBAAkB,OAAO,QAAQ,eAAe,sBAAsB;AAC5E,UAAM,kBAAkB,OAAO;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAEA,QAAI,CAAC,oBAAoB,mBAAmB,kBAAkB;AAC7D,iBAAW,MAAM,OAAO,oBAAoB,GAAG;AAC9C,YAAI,kBAAkB,IAAI,EAAE,EAAG,cAAa,KAAK,EAAE;AAAA,MACpD;AACA,UAAI,mBAAmB,oBAAoB,CAAC,iBAAiB;AAC5D,cAAM,UAAU,OAAO,kBAAkB;AACzC,YAAI,WAAW,kBAAkB,IAAI,OAAO,KAAK,CAAC,aAAa,SAAS,OAAO,GAAG;AACjF,uBAAa,KAAK,OAAO;AAAA,QAC1B;AAAA,MACD;AAAA,IACD;AAIA,UAAM,kBAA+B,CAAC;AACtC,eAAW,MAAM,OAAO,mBAAmB,GAAG;AAC7C,UAAI,kBAAkB,IAAI,EAAE,EAAG,iBAAgB,KAAK,EAAE;AAAA,IACvD;AAEA,QAAI,aAAa,WAAW,KAAK,gBAAgB,WAAW,GAAG;AAC9D,aAAO,CAAC;AAAA,IACT;AAEA,WAAO;AAAA,MACN;AAAA,QACC,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO,EAAE,cAAc,gBAAgB;AAAA,MACxC;AAAA,IACD;AAAA,EACD;AAAA,EAES,OAAO,KAA+B,UAA2C;AACzF,UAAM,UAAU,SAAS,CAAC;AAC1B,QAAI,CAAC,QAAS;AAEd,UAAM,SAAS,KAAK;AACpB,UAAM,OAAO,OAAO,aAAa;AACjC,UAAM,EAAE,cAAc,gBAAgB,IAAI,QAAQ;AAElD,QAAI,UAAU;AACd,QAAI,WAAW;AAGf,QAAI,cAAc,OAAO,gBAAgB,EAAE,OAAO,OAAO,aAAa,CAAC,EAAE;AACzE,QAAI,YAAY,KAAK,QAAQ,YAAY;AACzC,0BAAsB,QAAQ,KAAK,YAAY;AAG/C,QAAI,gBAAgB,SAAS,GAAG;AAC/B,UAAI,YAAY,KAAK,QAAQ,kBAAkB;AAC/C,4BAAsB,QAAQ,KAAK,eAAe;AAAA,IACnD;AAAA,EACD;AACD;",
+  "names": []
+}

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

@@ -1,4 +1,9 @@
-import { StateNode, createShapeId, maybeSnapToGrid } from "@tldraw/editor";
+import {
+  StateNode,
+  createShapeId,
+  cancelShapeCreationOnLongPress,
+  maybeSnapToGrid
+} from "@tldraw/editor";
 import { clearArrowTargetState, updateArrowTargetState } from "../arrowTargetState.mjs";
 class Pointing extends StateNode {
   static id = "pointing";
@@ -53,6 +58,9 @@ class Pointing extends StateNode {
   onPointerUp() {
     this.cancel();
   }
+  onLongPress() {
+    cancelShapeCreationOnLongPress(this.editor, () => this.cancel());
+  }
   onCancel() {
     this.cancel();
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/arrow/toolStates/Pointing.tsx"],
-  "sourcesContent": ["import { StateNode, TLArrowShape, createShapeId, maybeSnapToGrid } from '@tldraw/editor'\nimport { ArrowShapeUtil } from '../ArrowShapeUtil'\nimport { clearArrowTargetState, updateArrowTargetState } from '../arrowTargetState'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tshape?: TLArrowShape\n\n\tisPrecise = false\n\tisPreciseTimerId: number | null = null\n\n\tmarkId = ''\n\n\toverride onEnter(info: { isPrecise?: boolean }) {\n\t\tthis.markId = ''\n\t\tthis.isPrecise = !!info.isPrecise\n\n\t\tconst targetState = updateArrowTargetState({\n\t\t\teditor: this.editor,\n\t\t\tpointInPageSpace: this.editor.inputs.getCurrentPagePoint(),\n\t\t\tarrow: undefined,\n\t\t\tisPrecise: this.isPrecise,\n\t\t\tcurrentBinding: undefined,\n\t\t\toppositeBinding: undefined,\n\t\t})\n\n\t\tif (!targetState) {\n\t\t\tthis.createArrowShape()\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\tthis.startPreciseTimeout()\n\t}\n\n\toverride onExit() {\n\t\tthis.shape = undefined\n\t\tclearArrowTargetState(this.editor)\n\t\tthis.clearPreciseTimeout()\n\t}\n\n\toverride onPointerMove() {\n\t\tif (this.editor.inputs.getIsDragging()) {\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.createArrowShape()\n\t\t\t}\n\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.updateArrowShapeEndHandle()\n\n\t\t\tthis.editor.setCurrentTool('select.dragging_handle', {\n\t\t\t\tshape: this.shape,\n\t\t\t\thandle: { id: 'end', type: 'vertex', index: 'a3', x: 0, y: 0 },\n\t\t\t\tisCreating: true,\n\t\t\t\tcreatingMarkId: this.markId || undefined,\n\t\t\t\tonInteractionEnd: 'arrow',\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.cancel()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tcancel() {\n\t\tif (this.shape) {\n\t\t\t// the arrow might not have been created yet!\n\t\t\tthis.editor.bailToMark(this.markId)\n\t\t}\n\t\tthis.parent.transition('idle')\n\t}\n\n\tcreateArrowShape() {\n\t\tconst originPagePoint = this.editor.inputs.getOriginPagePoint()\n\n\t\tconst id = createShapeId()\n\n\t\tthis.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`)\n\t\tconst newPoint = maybeSnapToGrid(originPagePoint, this.editor)\n\t\tthis.editor.createShape({\n\t\t\tid,\n\t\t\ttype: 'arrow',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t\tprops: {\n\t\t\t\tscale: this.editor.getResizeScaleFactor(),\n\t\t\t},\n\t\t})\n\n\t\tconst shape = this.editor.getShape<TLArrowShape>(id)\n\t\tif (!shape) return\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\tconst initial = this.shape\n\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\tisPrecise: true,\n\t\t\tisCreatingShape: true,\n\t\t\tinitial: initial,\n\t\t})\n\n\t\tif (change) {\n\t\t\tthis.editor.updateShapes([change])\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(id)\n\t\tthis.editor.select(id)\n\t}\n\n\tupdateArrowShapeEndHandle() {\n\t\tconst shape = this.shape\n\t\tif (!shape) throw Error(`expected shape`)\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\t// start update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\t\tisPrecise: this.isPrecise,\n\t\t\t\tisCreatingShape: true,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// end update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst point = this.editor.getPointInShapeSpace(\n\t\t\t\tshape,\n\t\t\t\tthis.editor.inputs.getCurrentPagePoint()\n\t\t\t)\n\t\t\tconst endHandle = handles.find((h) => h.id === 'end')!\n\t\t\tconst change = util.onHandleDrag?.(this.editor.getShape(shape)!, {\n\t\t\t\thandle: { ...endHandle, x: point.x, y: point.y },\n\t\t\t\tisPrecise: this.isPrecise,\n\t\t\t\tisCreatingShape: true,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(shape.id)\n\t}\n\n\tprivate startPreciseTimeout() {\n\t\tconst arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')\n\n\t\tthis.isPreciseTimerId = this.editor.timers.setTimeout(() => {\n\t\t\tif (!this.getIsActive()) return\n\t\t\tthis.isPrecise = true\n\t\t}, arrowUtil.options.pointingPreciseTimeout)\n\t}\n\n\tprivate clearPreciseTimeout() {\n\t\tif (this.isPreciseTimerId !== null) {\n\t\t\tclearTimeout(this.isPreciseTimerId)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tStateNode,\n\tTLArrowShape,\n\tcreateShapeId,\n\tcancelShapeCreationOnLongPress,\n\tmaybeSnapToGrid,\n} from '@tldraw/editor'\nimport { ArrowShapeUtil } from '../ArrowShapeUtil'\nimport { clearArrowTargetState, updateArrowTargetState } from '../arrowTargetState'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tshape?: TLArrowShape\n\n\tisPrecise = false\n\tisPreciseTimerId: number | null = null\n\n\tmarkId = ''\n\n\toverride onEnter(info: { isPrecise?: boolean }) {\n\t\tthis.markId = ''\n\t\tthis.isPrecise = !!info.isPrecise\n\n\t\tconst targetState = updateArrowTargetState({\n\t\t\teditor: this.editor,\n\t\t\tpointInPageSpace: this.editor.inputs.getCurrentPagePoint(),\n\t\t\tarrow: undefined,\n\t\t\tisPrecise: this.isPrecise,\n\t\t\tcurrentBinding: undefined,\n\t\t\toppositeBinding: undefined,\n\t\t})\n\n\t\tif (!targetState) {\n\t\t\tthis.createArrowShape()\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\tthis.startPreciseTimeout()\n\t}\n\n\toverride onExit() {\n\t\tthis.shape = undefined\n\t\tclearArrowTargetState(this.editor)\n\t\tthis.clearPreciseTimeout()\n\t}\n\n\toverride onPointerMove() {\n\t\tif (this.editor.inputs.getIsDragging()) {\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.createArrowShape()\n\t\t\t}\n\n\t\t\tif (!this.shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.updateArrowShapeEndHandle()\n\n\t\t\tthis.editor.setCurrentTool('select.dragging_handle', {\n\t\t\t\tshape: this.shape,\n\t\t\t\thandle: { id: 'end', type: 'vertex', index: 'a3', x: 0, y: 0 },\n\t\t\t\tisCreating: true,\n\t\t\t\tcreatingMarkId: this.markId || undefined,\n\t\t\t\tonInteractionEnd: 'arrow',\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.cancel()\n\t}\n\n\toverride onLongPress() {\n\t\tcancelShapeCreationOnLongPress(this.editor, () => this.cancel())\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tcancel() {\n\t\tif (this.shape) {\n\t\t\t// the arrow might not have been created yet!\n\t\t\tthis.editor.bailToMark(this.markId)\n\t\t}\n\t\tthis.parent.transition('idle')\n\t}\n\n\tcreateArrowShape() {\n\t\tconst originPagePoint = this.editor.inputs.getOriginPagePoint()\n\n\t\tconst id = createShapeId()\n\n\t\tthis.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`)\n\t\tconst newPoint = maybeSnapToGrid(originPagePoint, this.editor)\n\t\tthis.editor.createShape({\n\t\t\tid,\n\t\t\ttype: 'arrow',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t\tprops: {\n\t\t\t\tscale: this.editor.getResizeScaleFactor(),\n\t\t\t},\n\t\t})\n\n\t\tconst shape = this.editor.getShape<TLArrowShape>(id)\n\t\tif (!shape) return\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\tconst initial = this.shape\n\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\tisPrecise: true,\n\t\t\tisCreatingShape: true,\n\t\t\tinitial: initial,\n\t\t})\n\n\t\tif (change) {\n\t\t\tthis.editor.updateShapes([change])\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(id)\n\t\tthis.editor.select(id)\n\t}\n\n\tupdateArrowShapeEndHandle() {\n\t\tconst shape = this.shape\n\t\tif (!shape) throw Error(`expected shape`)\n\n\t\tconst handles = this.editor.getShapeHandles(shape)\n\t\tif (!handles) throw Error(`expected handles for arrow`)\n\n\t\t// start update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst startHandle = handles.find((h) => h.id === 'start')!\n\t\t\tconst change = util.onHandleDrag?.(shape, {\n\t\t\t\thandle: { ...startHandle, x: 0, y: 0 },\n\t\t\t\tisPrecise: this.isPrecise,\n\t\t\t\tisCreatingShape: true,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// end update\n\t\t{\n\t\t\tconst util = this.editor.getShapeUtil<TLArrowShape>('arrow')\n\t\t\tconst initial = this.shape\n\t\t\tconst point = this.editor.getPointInShapeSpace(\n\t\t\t\tshape,\n\t\t\t\tthis.editor.inputs.getCurrentPagePoint()\n\t\t\t)\n\t\t\tconst endHandle = handles.find((h) => h.id === 'end')!\n\t\t\tconst change = util.onHandleDrag?.(this.editor.getShape(shape)!, {\n\t\t\t\thandle: { ...endHandle, x: point.x, y: point.y },\n\t\t\t\tisPrecise: this.isPrecise,\n\t\t\t\tisCreatingShape: true,\n\t\t\t\tinitial: initial,\n\t\t\t})\n\n\t\t\tif (change) {\n\t\t\t\tthis.editor.updateShapes([change])\n\t\t\t}\n\t\t}\n\n\t\t// Cache the current shape after those changes\n\t\tthis.shape = this.editor.getShape(shape.id)\n\t}\n\n\tprivate startPreciseTimeout() {\n\t\tconst arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')\n\n\t\tthis.isPreciseTimerId = this.editor.timers.setTimeout(() => {\n\t\t\tif (!this.getIsActive()) return\n\t\t\tthis.isPrecise = true\n\t\t}, arrowUtil.options.pointingPreciseTimeout)\n\t}\n\n\tprivate clearPreciseTimeout() {\n\t\tif (this.isPreciseTimerId !== null) {\n\t\t\tclearTimeout(this.isPreciseTimerId)\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import {
   BaseBoxShapeUtil,
   HTMLContainer,
+  Rectangle2d,
   T,
   bookmarkShapeMigrations,
   bookmarkShapeProps,
@@ -19,7 +20,9 @@ import { getRotatedBoxShadow } from "../shared/rotated-box-shadow.mjs";
 import {
   BOOKMARK_HEIGHT,
   BOOKMARK_WIDTH,
+  getBookmarkShapeHeight,
   getHumanReadableAddress,
+  getResolvedBookmarkAssetId,
   setBookmarkHeight,
   updateBookmarkAssetOnUrlChange
 } from "./bookmarks.mjs";
@@ -57,14 +60,22 @@ class BookmarkShapeUtil extends BaseBoxShapeUtil {
       assetId: null
     };
   }
+  getGeometry(shape) {
+    return new Rectangle2d({
+      width: shape.props.w,
+      height: getBookmarkShapeHeight(this.editor, shape),
+      isFilled: true
+    });
+  }
   component(shape) {
-    const { assetId, url, h } = shape.props;
+    const { assetId, url } = shape.props;
+    const h = getBookmarkShapeHeight(this.editor, shape);
     const rotation = this.editor.getShapePageTransform(shape).rotation();
     return /* @__PURE__ */ jsx(BookmarkShapeComponent, { assetId, url, h, rotation });
   }
   getIndicatorPath(shape) {
     const path = new Path2D();
-    path.rect(0, 0, shape.props.w, shape.props.h);
+    path.rect(0, 0, shape.props.w, getBookmarkShapeHeight(this.editor, shape));
     return path;
   }
   onBeforeCreate(next) {
@@ -99,7 +110,8 @@ function BookmarkShapeComponent({
   showImageContainer = true
 }) {
   const editor = useEditor();
-  const asset = assetId ? editor.getAsset(assetId) : null;
+  const resolvedAssetId = getResolvedBookmarkAssetId(editor, assetId, url);
+  const asset = resolvedAssetId ? editor.getAsset(resolvedAssetId) : null;
   const isSafariExport = !!useSvgExportContext() && tlenv.isSafari;
   const address = getHumanReadableAddress(url);
   const [isFaviconValid, setIsFaviconValid] = useState(true);

package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/bookmark/BookmarkShapeUtil.tsx"],
-  "sourcesContent": ["// oxlint-disable typescript/no-empty-object-type\nimport {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tT,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLBookmarkShapeProps,\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\tlerp,\n\ttlenv,\n\tuseEditor,\n\tuseSvgExportContext,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PointerEventHandler, useCallback, useState } from 'react'\nimport { convertCommonTitleHTMLEntities } from '../../utils/text/text'\nimport type { ShapeOptionsWithDisplayValues } from '../shared/getDisplayValues'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { LINK_ICON } from '../shared/icons-editor'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\nimport {\n\tBOOKMARK_HEIGHT,\n\tBOOKMARK_WIDTH,\n\tgetHumanReadableAddress,\n\tsetBookmarkHeight,\n\tupdateBookmarkAssetOnUrlChange,\n} from './bookmarks'\n\n/** @public */\nexport type BookmarkShapeUtilDisplayValues = object\n\n/** @public */\nexport interface BookmarkShapeOptions extends ShapeOptionsWithDisplayValues<\n\tTLBookmarkShape,\n\tBookmarkShapeUtilDisplayValues\n> {}\n\n/** @public */\nexport class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {\n\tstatic override type = 'bookmark' as const\n\tstatic override props = bookmarkShapeProps\n\tstatic override migrations = bookmarkShapeMigrations\n\n\toverride options: BookmarkShapeOptions = {\n\t\tgetDefaultDisplayValues(): BookmarkShapeUtilDisplayValues {\n\t\t\treturn {}\n\t\t},\n\t\tgetCustomDisplayValues(): Partial<BookmarkShapeUtilDisplayValues> {\n\t\t\treturn {}\n\t\t},\n\t}\n\n\toverride canResize(shape: TLBookmarkShape) {\n\t\treturn false\n\t}\n\n\toverride hideSelectionBoundsFg(shape: TLBookmarkShape) {\n\t\treturn true\n\t}\n\n\toverride getText(shape: TLBookmarkShape) {\n\t\treturn shape.props.url\n\t}\n\n\toverride getAriaDescriptor(shape: TLBookmarkShape) {\n\t\tconst asset = (\n\t\t\tshape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\t\t) as TLBookmarkAsset | null\n\n\t\tif (!asset?.props.title) return undefined\n\n\t\treturn (\n\t\t\tconvertCommonTitleHTMLEntities(asset.props.title) +\n\t\t\t(asset.props.description ? ', ' + asset.props.description : '')\n\t\t)\n\t}\n\n\toverride getDefaultProps(): TLBookmarkShape['props'] {\n\t\treturn {\n\t\t\turl: '',\n\t\t\tw: BOOKMARK_WIDTH,\n\t\t\th: BOOKMARK_HEIGHT,\n\t\t\tassetId: null,\n\t\t}\n\t}\n\n\toverride component(shape: TLBookmarkShape) {\n\t\tconst { assetId, url, h } = shape.props\n\t\tconst rotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\treturn <BookmarkShapeComponent assetId={assetId} url={url} h={h} rotation={rotation} />\n\t}\n\n\toverride getIndicatorPath(shape: TLBookmarkShape): Path2D {\n\t\tconst path = new Path2D()\n\t\tpath.rect(0, 0, shape.props.w, shape.props.h)\n\t\treturn path\n\t}\n\n\toverride onBeforeCreate(next: TLBookmarkShape) {\n\t\treturn setBookmarkHeight(this.editor, next)\n\t}\n\n\toverride onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {\n\t\tif (prev.props.url !== shape.props.url) {\n\t\t\tif (!T.linkUrl.isValid(shape.props.url)) {\n\t\t\t\treturn { ...shape, props: { ...shape.props, url: prev.props.url } }\n\t\t\t} else {\n\t\t\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t\t\t}\n\t\t}\n\n\t\tif (prev.props.assetId !== shape.props.assetId) {\n\t\t\treturn setBookmarkHeight(this.editor, shape)\n\t\t}\n\n\t\treturn undefined\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLBookmarkShape,\n\t\tendShape: TLBookmarkShape,\n\t\tt: number\n\t): TLBookmarkShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n}\n\nexport function BookmarkShapeComponent({\n\tassetId,\n\trotation,\n\turl,\n\th,\n\tshowImageContainer = true,\n}: {\n\tassetId: TLAssetId | null\n\trotation: number\n\th: number\n\turl: string\n\tshowImageContainer?: boolean\n}) {\n\tconst editor = useEditor()\n\n\tconst asset = assetId ? (editor.getAsset(assetId) as TLBookmarkAsset) : null\n\n\tconst isSafariExport = !!useSvgExportContext() && tlenv.isSafari\n\n\tconst address = getHumanReadableAddress(url)\n\n\tconst [isFaviconValid, setIsFaviconValid] = useState(true)\n\tconst onFaviconError = () => setIsFaviconValid(false)\n\n\tconst markAsHandledOnShiftKey = useCallback<PointerEventHandler>(\n\t\t(e) => {\n\t\t\tif (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<HTMLContainer>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tl-bookmark__container',\n\t\t\t\t\tisSafariExport && 'tl-bookmark__container--safariExport'\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tboxShadow: isSafariExport ? undefined : getRotatedBoxShadow(rotation),\n\t\t\t\t\tmaxHeight: h,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{showImageContainer && (!asset || asset.props.image) && (\n\t\t\t\t\t<div className=\"tl-bookmark__image_container\">\n\t\t\t\t\t\t{asset ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__image\"\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.image}\n\t\t\t\t\t\t\t\talt={asset?.props.title || ''}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tl-bookmark__placeholder\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{asset?.props.image && <HyperlinkButton url={url} />}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div className=\"tl-bookmark__copy_container\">\n\t\t\t\t\t{asset?.props.title ? (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\t\thref={url || ''}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\tonPointerDown={markAsHandledOnShiftKey}\n\t\t\t\t\t\t\tonPointerUp={markAsHandledOnShiftKey}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h2 className=\"tl-bookmark__heading\">\n\t\t\t\t\t\t\t\t{convertCommonTitleHTMLEntities(asset.props.title)}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{asset?.props.description && asset?.props.image ? (\n\t\t\t\t\t\t<p className=\"tl-bookmark__description\">{asset.props.description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\thref={url || ''}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\tonPointerDown={markAsHandledOnShiftKey}\n\t\t\t\t\t\tonPointerUp={markAsHandledOnShiftKey}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isFaviconValid && asset?.props.favicon ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__favicon\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.favicon}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tonError={onFaviconError}\n\t\t\t\t\t\t\t\talt={`favicon of ${address}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tl-hyperlink__icon\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t\tWebkitMask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{address}</span>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</HTMLContainer>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// oxlint-disable typescript/no-empty-object-type\nimport {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tRectangle2d,\n\tT,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLBookmarkShapeProps,\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\tlerp,\n\ttlenv,\n\tuseEditor,\n\tuseSvgExportContext,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PointerEventHandler, useCallback, useState } from 'react'\nimport { convertCommonTitleHTMLEntities } from '../../utils/text/text'\nimport type { ShapeOptionsWithDisplayValues } from '../shared/getDisplayValues'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { LINK_ICON } from '../shared/icons-editor'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\nimport {\n\tBOOKMARK_HEIGHT,\n\tBOOKMARK_WIDTH,\n\tgetBookmarkShapeHeight,\n\tgetHumanReadableAddress,\n\tgetResolvedBookmarkAssetId,\n\tsetBookmarkHeight,\n\tupdateBookmarkAssetOnUrlChange,\n} from './bookmarks'\n\n/** @public */\nexport type BookmarkShapeUtilDisplayValues = object\n\n/** @public */\nexport interface BookmarkShapeOptions extends ShapeOptionsWithDisplayValues<\n\tTLBookmarkShape,\n\tBookmarkShapeUtilDisplayValues\n> {}\n\n/** @public */\nexport class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {\n\tstatic override type = 'bookmark' as const\n\tstatic override props = bookmarkShapeProps\n\tstatic override migrations = bookmarkShapeMigrations\n\n\toverride options: BookmarkShapeOptions = {\n\t\tgetDefaultDisplayValues(): BookmarkShapeUtilDisplayValues {\n\t\t\treturn {}\n\t\t},\n\t\tgetCustomDisplayValues(): Partial<BookmarkShapeUtilDisplayValues> {\n\t\t\treturn {}\n\t\t},\n\t}\n\n\toverride canResize(shape: TLBookmarkShape) {\n\t\treturn false\n\t}\n\n\toverride hideSelectionBoundsFg(shape: TLBookmarkShape) {\n\t\treturn true\n\t}\n\n\toverride getText(shape: TLBookmarkShape) {\n\t\treturn shape.props.url\n\t}\n\n\toverride getAriaDescriptor(shape: TLBookmarkShape) {\n\t\tconst asset = (\n\t\t\tshape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\t\t) as TLBookmarkAsset | null\n\n\t\tif (!asset?.props.title) return undefined\n\n\t\treturn (\n\t\t\tconvertCommonTitleHTMLEntities(asset.props.title) +\n\t\t\t(asset.props.description ? ', ' + asset.props.description : '')\n\t\t)\n\t}\n\n\toverride getDefaultProps(): TLBookmarkShape['props'] {\n\t\treturn {\n\t\t\turl: '',\n\t\t\tw: BOOKMARK_WIDTH,\n\t\t\th: BOOKMARK_HEIGHT,\n\t\t\tassetId: null,\n\t\t}\n\t}\n\n\toverride getGeometry(shape: TLBookmarkShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: getBookmarkShapeHeight(this.editor, shape),\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\toverride component(shape: TLBookmarkShape) {\n\t\tconst { assetId, url } = shape.props\n\t\tconst h = getBookmarkShapeHeight(this.editor, shape)\n\t\tconst rotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\treturn <BookmarkShapeComponent assetId={assetId} url={url} h={h} rotation={rotation} />\n\t}\n\n\toverride getIndicatorPath(shape: TLBookmarkShape): Path2D {\n\t\tconst path = new Path2D()\n\t\tpath.rect(0, 0, shape.props.w, getBookmarkShapeHeight(this.editor, shape))\n\t\treturn path\n\t}\n\n\toverride onBeforeCreate(next: TLBookmarkShape) {\n\t\treturn setBookmarkHeight(this.editor, next)\n\t}\n\n\toverride onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {\n\t\tif (prev.props.url !== shape.props.url) {\n\t\t\tif (!T.linkUrl.isValid(shape.props.url)) {\n\t\t\t\treturn { ...shape, props: { ...shape.props, url: prev.props.url } }\n\t\t\t} else {\n\t\t\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t\t\t}\n\t\t}\n\n\t\tif (prev.props.assetId !== shape.props.assetId) {\n\t\t\treturn setBookmarkHeight(this.editor, shape)\n\t\t}\n\n\t\treturn undefined\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLBookmarkShape,\n\t\tendShape: TLBookmarkShape,\n\t\tt: number\n\t): TLBookmarkShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tw: lerp(startShape.props.w, endShape.props.w, t),\n\t\t\th: lerp(startShape.props.h, endShape.props.h, t),\n\t\t}\n\t}\n}\n\nexport function BookmarkShapeComponent({\n\tassetId,\n\trotation,\n\turl,\n\th,\n\tshowImageContainer = true,\n}: {\n\tassetId: TLAssetId | null\n\trotation: number\n\th: number\n\turl: string\n\tshowImageContainer?: boolean\n}) {\n\tconst editor = useEditor()\n\n\tconst resolvedAssetId = getResolvedBookmarkAssetId(editor, assetId, url)\n\tconst asset = resolvedAssetId ? (editor.getAsset(resolvedAssetId) as TLBookmarkAsset) : null\n\n\tconst isSafariExport = !!useSvgExportContext() && tlenv.isSafari\n\n\tconst address = getHumanReadableAddress(url)\n\n\tconst [isFaviconValid, setIsFaviconValid] = useState(true)\n\tconst onFaviconError = () => setIsFaviconValid(false)\n\n\tconst markAsHandledOnShiftKey = useCallback<PointerEventHandler>(\n\t\t(e) => {\n\t\t\tif (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<HTMLContainer>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tl-bookmark__container',\n\t\t\t\t\tisSafariExport && 'tl-bookmark__container--safariExport'\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tboxShadow: isSafariExport ? undefined : getRotatedBoxShadow(rotation),\n\t\t\t\t\tmaxHeight: h,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{showImageContainer && (!asset || asset.props.image) && (\n\t\t\t\t\t<div className=\"tl-bookmark__image_container\">\n\t\t\t\t\t\t{asset ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__image\"\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.image}\n\t\t\t\t\t\t\t\talt={asset?.props.title || ''}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tl-bookmark__placeholder\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{asset?.props.image && <HyperlinkButton url={url} />}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div className=\"tl-bookmark__copy_container\">\n\t\t\t\t\t{asset?.props.title ? (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\t\thref={url || ''}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\tonPointerDown={markAsHandledOnShiftKey}\n\t\t\t\t\t\t\tonPointerUp={markAsHandledOnShiftKey}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h2 className=\"tl-bookmark__heading\">\n\t\t\t\t\t\t\t\t{convertCommonTitleHTMLEntities(asset.props.title)}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{asset?.props.description && asset?.props.image ? (\n\t\t\t\t\t\t<p className=\"tl-bookmark__description\">{asset.props.description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\thref={url || ''}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\tonPointerDown={markAsHandledOnShiftKey}\n\t\t\t\t\t\tonPointerUp={markAsHandledOnShiftKey}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isFaviconValid && asset?.props.favicon ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__favicon\"\n\t\t\t\t\t\t\t\tsrc={asset?.props.favicon}\n\t\t\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\t\t\tonError={onFaviconError}\n\t\t\t\t\t\t\t\talt={`favicon of ${address}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tl-hyperlink__icon\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t\tWebkitMask: `url(\"${LINK_ICON}\") center 100% / 100% no-repeat`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{address}</span>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</HTMLContainer>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/shapes/bookmark/bookmarks.mjs

@@ -60,6 +60,17 @@ function updateBookmarkAssetOnUrlChange(editor, shape) {
     createBookmarkAssetOnUrlChange(editor, shape);
   }
 }
+function getResolvedBookmarkAssetId(editor, assetId, url) {
+  if (assetId) return assetId;
+  if (!url) return null;
+  const derivedId = AssetRecordType.createId(getHashForString(url));
+  return editor.getAsset(derivedId) ? derivedId : null;
+}
+function getBookmarkShapeHeight(editor, shape) {
+  const resolvedAssetId = getResolvedBookmarkAssetId(editor, shape.props.assetId, shape.props.url);
+  if (resolvedAssetId === shape.props.assetId) return shape.props.h;
+  return getBookmarkHeight(editor, resolvedAssetId);
+}
 async function _createBookmarkAssetOnUrlChange(editor, shape) {
   if (editor.isDisposed) return;
   const { url } = shape.props;
@@ -92,7 +103,8 @@ async function createBookmarkFromUrl(editor, {
   center = editor.getViewportPageBounds().center
 }) {
   try {
-    const asset = await editor.getAssetForExternalContent({ type: "url", url });
+    const expectedAssetId = AssetRecordType.createId(getHashForString(url));
+    const existingAsset = editor.getAsset(expectedAssetId);
     const shapeId = createShapeId();
     const shapePartial = {
       id: shapeId,
@@ -103,30 +115,66 @@ async function createBookmarkFromUrl(editor, {
       opacity: 1,
       props: {
         url,
-        assetId: asset?.id || null,
+        assetId: existingAsset?.id ?? null,
         w: BOOKMARK_WIDTH,
-        h: getBookmarkHeight(editor, asset?.id)
+        h: getBookmarkHeight(editor, existingAsset?.id)
       }
     };
     editor.run(() => {
-      if (asset) {
-        editor.createAssets([asset]);
-      }
       editor.createShapes([shapePartial]);
     });
     const createdShape = editor.getShape(shapeId);
+    if (!createdShape) {
+      return Result.err("Failed to create bookmark shape");
+    }
+    if (existingAsset) {
+      return Result.ok(createdShape);
+    }
+    void hydrateBookmarkShape(editor, shapeId, url);
     return Result.ok(createdShape);
   } catch (error) {
     return Result.err(error instanceof Error ? error.message : "Failed to create bookmark");
   }
 }
+async function hydrateBookmarkShape(editor, shapeId, url) {
+  let asset;
+  try {
+    asset = await editor.getAssetForExternalContent({ type: "url", url });
+  } catch (error) {
+    console.error(error);
+    return;
+  }
+  if (editor.isDisposed) return;
+  if (!asset) return;
+  const shape = editor.getShape(shapeId);
+  if (!shape) return;
+  if (shape.props.url !== url) return;
+  if (shape.props.assetId) return;
+  editor.run(
+    () => {
+      if (!editor.getAsset(asset.id)) {
+        editor.createAssets([asset]);
+      }
+      editor.updateShapes([
+        {
+          id: shapeId,
+          type: "bookmark",
+          props: { assetId: asset.id }
+        }
+      ]);
+    },
+    { history: "ignore" }
+  );
+}
 export {
   BOOKMARK_HEIGHT,
   BOOKMARK_JUST_URL_HEIGHT,
   BOOKMARK_WIDTH,
   createBookmarkFromUrl,
   getBookmarkHeight,
+  getBookmarkShapeHeight,
   getHumanReadableAddress,
+  getResolvedBookmarkAssetId,
   setBookmarkHeight,
   updateBookmarkAssetOnUrlChange
 };

package/dist-esm/lib/shapes/bookmark/bookmarks.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/bookmark/bookmarks.ts"],
-  "sourcesContent": ["import {\n\tAssetRecordType,\n\tEditor,\n\tResult,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLShapePartial,\n\tcreateShapeId,\n\tdebounce,\n\tgetHashForString,\n} from '@tldraw/editor'\n\nexport const BOOKMARK_WIDTH = 300\nexport const BOOKMARK_HEIGHT = 320\nexport const BOOKMARK_JUST_URL_HEIGHT = 46\nconst SHORT_BOOKMARK_HEIGHT = 101\n\nexport function getBookmarkHeight(editor: Editor, assetId?: TLAssetId | null) {\n\tconst asset = (assetId ? editor.getAsset(assetId) : null) as TLBookmarkAsset | null\n\n\tif (asset) {\n\t\tif (!asset.props.image) {\n\t\t\tif (!asset.props.title) {\n\t\t\t\treturn BOOKMARK_JUST_URL_HEIGHT\n\t\t\t} else {\n\t\t\t\treturn SHORT_BOOKMARK_HEIGHT\n\t\t\t}\n\t\t}\n\t}\n\n\treturn BOOKMARK_HEIGHT\n}\n\nexport function setBookmarkHeight(editor: Editor, shape: TLBookmarkShape) {\n\treturn {\n\t\t...shape,\n\t\tprops: { ...shape.props, h: getBookmarkHeight(editor, shape.props.assetId) },\n\t}\n}\n\n/** @internal */\nexport function getHumanReadableAddress(url: string) {\n\ttry {\n\t\tconst objUrl = new URL(url)\n\t\t// we want the hostname without any www\n\t\treturn objUrl.hostname.replace(/^www\\./, '')\n\t} catch {\n\t\treturn url\n\t}\n}\n\nexport function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tconst { url } = shape.props\n\n\t// Derive the asset id from the URL\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\n\tif (editor.getAsset(assetId)) {\n\t\t// Existing asset for this URL?\n\t\tif (shape.props.assetId !== assetId) {\n\t\t\teditor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tprops: { assetId },\n\t\t\t\t},\n\t\t\t])\n\t\t}\n\t} else {\n\t\t// No asset for this URL?\n\n\t\t// First, clear out the existing asset reference\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: null },\n\t\t\t},\n\t\t])\n\n\t\t// Then try to asyncronously create a new one\n\t\tcreateBookmarkAssetOnUrlChange(editor, shape)\n\t}\n}\n\nasync function _createBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tif (editor.isDisposed) return\n\n\tconst { url } = shape.props\n\n\t// Create the asset using the external content manager's createAssetFromUrl method.\n\t// This may be overwritten by the user (for example, we overwrite it on tldraw.com)\n\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\tif (!asset) {\n\t\t// No asset? Just leave the bookmark as a null assetId.\n\t\treturn\n\t}\n\n\teditor.run(() => {\n\t\t// Create the new asset\n\t\teditor.createAssets([asset])\n\n\t\t// And update the shape\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: asset.id },\n\t\t\t},\n\t\t])\n\t})\n}\n\nconst bookmarkDebouncers = new WeakMap<\n\tEditor,\n\tReturnType<typeof debounce<[Editor, TLBookmarkShape], void>>\n>()\n\nfunction createBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tlet fn = bookmarkDebouncers.get(editor)\n\tif (!fn) {\n\t\tfn = debounce(_createBookmarkAssetOnUrlChange, 500)\n\t\tbookmarkDebouncers.set(editor, fn)\n\t}\n\tfn(editor, shape)\n}\n\n/**\n * Creates a bookmark shape from a URL with unfurled metadata.\n *\n * @returns A Result containing the created bookmark shape or an error\n * @public\n */\n\nexport async function createBookmarkFromUrl(\n\teditor: Editor,\n\t{\n\t\turl,\n\t\tcenter = editor.getViewportPageBounds().center,\n\t}: {\n\t\turl: string\n\t\tcenter?: { x: number; y: number }\n\t}\n): Promise<Result<TLBookmarkShape, string>> {\n\ttry {\n\t\t// Create the bookmark asset with unfurled metadata\n\t\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\t\t// Create the bookmark shape\n\t\tconst shapeId = createShapeId()\n\t\tconst shapePartial: TLShapePartial<TLBookmarkShape> = {\n\t\t\tid: shapeId,\n\t\t\ttype: 'bookmark',\n\t\t\tx: center.x - BOOKMARK_WIDTH / 2,\n\t\t\ty: center.y - BOOKMARK_HEIGHT / 2,\n\t\t\trotation: 0,\n\t\t\topacity: 1,\n\t\t\tprops: {\n\t\t\t\turl,\n\t\t\t\tassetId: asset?.id || null,\n\t\t\t\tw: BOOKMARK_WIDTH,\n\t\t\t\th: getBookmarkHeight(editor, asset?.id),\n\t\t\t},\n\t\t}\n\n\t\teditor.run(() => {\n\t\t\t// Create the asset if we have one\n\t\t\tif (asset) {\n\t\t\t\teditor.createAssets([asset])\n\t\t\t}\n\n\t\t\t// Create the shape\n\t\t\teditor.createShapes([shapePartial])\n\t\t})\n\n\t\t// Get the created shape\n\t\tconst createdShape = editor.getShape(shapeId) as TLBookmarkShape\n\t\treturn Result.ok(createdShape)\n\t} catch (error) {\n\t\treturn Result.err(error instanceof Error ? error.message : 'Failed to create bookmark')\n\t}\n}\n"],
-  "mappings": "AAAA;AAAA,EACC;AAAA,EAEA;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,2BAA2B;AACxC,MAAM,wBAAwB;AAEvB,SAAS,kBAAkB,QAAgB,SAA4B;AAC7E,QAAM,QAAS,UAAU,OAAO,SAAS,OAAO,IAAI;AAEpD,MAAI,OAAO;AACV,QAAI,CAAC,MAAM,MAAM,OAAO;AACvB,UAAI,CAAC,MAAM,MAAM,OAAO;AACvB,eAAO;AAAA,MACR,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEO,SAAS,kBAAkB,QAAgB,OAAwB;AACzE,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO,EAAE,GAAG,MAAM,OAAO,GAAG,kBAAkB,QAAQ,MAAM,MAAM,OAAO,EAAE;AAAA,EAC5E;AACD;AAGO,SAAS,wBAAwB,KAAa;AACpD,MAAI;AACH,UAAM,SAAS,IAAI,IAAI,GAAG;AAE1B,WAAO,OAAO,SAAS,QAAQ,UAAU,EAAE;AAAA,EAC5C,QAAQ;AACP,WAAO;AAAA,EACR;AACD;AAEO,SAAS,+BAA+B,QAAgB,OAAwB;AACtF,QAAM,EAAE,IAAI,IAAI,MAAM;AAGtB,QAAM,UAAqB,gBAAgB,SAAS,iBAAiB,GAAG,CAAC;AAEzE,MAAI,OAAO,SAAS,OAAO,GAAG;AAE7B,QAAI,MAAM,MAAM,YAAY,SAAS;AACpC,aAAO,aAAa;AAAA,QACnB;AAAA,UACC,IAAI,MAAM;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,OAAO,EAAE,QAAQ;AAAA,QAClB;AAAA,MACD,CAAC;AAAA,IACF;AAAA,EACD,OAAO;AAIN,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,SAAS,KAAK;AAAA,MACxB;AAAA,IACD,CAAC;AAGD,mCAA+B,QAAQ,KAAK;AAAA,EAC7C;AACD;AAEA,eAAe,gCAAgC,QAAgB,OAAwB;AACtF,MAAI,OAAO,WAAY;AAEvB,QAAM,EAAE,IAAI,IAAI,MAAM;AAItB,QAAM,QAAQ,MAAM,OAAO,2BAA2B,EAAE,MAAM,OAAO,IAAI,CAAC;AAE1E,MAAI,CAAC,OAAO;AAEX;AAAA,EACD;AAEA,SAAO,IAAI,MAAM;AAEhB,WAAO,aAAa,CAAC,KAAK,CAAC;AAG3B,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,SAAS,MAAM,GAAG;AAAA,MAC5B;AAAA,IACD,CAAC;AAAA,EACF,CAAC;AACF;AAEA,MAAM,qBAAqB,oBAAI,QAG7B;AAEF,SAAS,+BAA+B,QAAgB,OAAwB;AAC/E,MAAI,KAAK,mBAAmB,IAAI,MAAM;AACtC,MAAI,CAAC,IAAI;AACR,SAAK,SAAS,iCAAiC,GAAG;AAClD,uBAAmB,IAAI,QAAQ,EAAE;AAAA,EAClC;AACA,KAAG,QAAQ,KAAK;AACjB;AASA,eAAsB,sBACrB,QACA;AAAA,EACC;AAAA,EACA,SAAS,OAAO,sBAAsB,EAAE;AACzC,GAI2C;AAC3C,MAAI;AAEH,UAAM,QAAQ,MAAM,OAAO,2BAA2B,EAAE,MAAM,OAAO,IAAI,CAAC;AAG1E,UAAM,UAAU,cAAc;AAC9B,UAAM,eAAgD;AAAA,MACrD,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,GAAG,OAAO,IAAI,iBAAiB;AAAA,MAC/B,GAAG,OAAO,IAAI,kBAAkB;AAAA,MAChC,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,QACN;AAAA,QACA,SAAS,OAAO,MAAM;AAAA,QACtB,GAAG;AAAA,QACH,GAAG,kBAAkB,QAAQ,OAAO,EAAE;AAAA,MACvC;AAAA,IACD;AAEA,WAAO,IAAI,MAAM;AAEhB,UAAI,OAAO;AACV,eAAO,aAAa,CAAC,KAAK,CAAC;AAAA,MAC5B;AAGA,aAAO,aAAa,CAAC,YAAY,CAAC;AAAA,IACnC,CAAC;AAGD,UAAM,eAAe,OAAO,SAAS,OAAO;AAC5C,WAAO,OAAO,GAAG,YAAY;AAAA,EAC9B,SAAS,OAAO;AACf,WAAO,OAAO,IAAI,iBAAiB,QAAQ,MAAM,UAAU,2BAA2B;AAAA,EACvF;AACD;",
+  "sourcesContent": ["import {\n\tAssetRecordType,\n\tEditor,\n\tResult,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLShapeId,\n\tTLShapePartial,\n\tcreateShapeId,\n\tdebounce,\n\tgetHashForString,\n} from '@tldraw/editor'\n\nexport const BOOKMARK_WIDTH = 300\nexport const BOOKMARK_HEIGHT = 320\nexport const BOOKMARK_JUST_URL_HEIGHT = 46\nconst SHORT_BOOKMARK_HEIGHT = 101\n\nexport function getBookmarkHeight(editor: Editor, assetId?: TLAssetId | null) {\n\tconst asset = (assetId ? editor.getAsset(assetId) : null) as TLBookmarkAsset | null\n\n\tif (asset) {\n\t\tif (!asset.props.image) {\n\t\t\tif (!asset.props.title) {\n\t\t\t\treturn BOOKMARK_JUST_URL_HEIGHT\n\t\t\t} else {\n\t\t\t\treturn SHORT_BOOKMARK_HEIGHT\n\t\t\t}\n\t\t}\n\t}\n\n\treturn BOOKMARK_HEIGHT\n}\n\nexport function setBookmarkHeight(editor: Editor, shape: TLBookmarkShape) {\n\treturn {\n\t\t...shape,\n\t\tprops: { ...shape.props, h: getBookmarkHeight(editor, shape.props.assetId) },\n\t}\n}\n\n/** @internal */\nexport function getHumanReadableAddress(url: string) {\n\ttry {\n\t\tconst objUrl = new URL(url)\n\t\t// we want the hostname without any www\n\t\treturn objUrl.hostname.replace(/^www\\./, '')\n\t} catch {\n\t\treturn url\n\t}\n}\n\nexport function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tconst { url } = shape.props\n\n\t// Derive the asset id from the URL\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\n\tif (editor.getAsset(assetId)) {\n\t\t// Existing asset for this URL?\n\t\tif (shape.props.assetId !== assetId) {\n\t\t\teditor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tprops: { assetId },\n\t\t\t\t},\n\t\t\t])\n\t\t}\n\t} else {\n\t\t// No asset for this URL?\n\n\t\t// First, clear out the existing asset reference\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: null },\n\t\t\t},\n\t\t])\n\n\t\t// Then try to asyncronously create a new one\n\t\tcreateBookmarkAssetOnUrlChange(editor, shape)\n\t}\n}\n\n/**\n * Resolve the asset id to render for a bookmark. Bookmark assets are keyed\n * deterministically by URL, so if the shape has no `assetId` but an asset for\n * its URL already exists in the store, use that.\n *\n * This keeps a bookmark from staying stuck on its placeholder after the shape\n * is recreated outside of the hydration flow \u2014 e.g. on redo, where the\n * placeholder is restored with a null `assetId` but its hydrated asset (created\n * with `history: 'ignore'`) still lives in the store.\n */\nexport function getResolvedBookmarkAssetId(\n\teditor: Editor,\n\tassetId: TLAssetId | null,\n\turl: string\n): TLAssetId | null {\n\tif (assetId) return assetId\n\tif (!url) return null\n\n\tconst derivedId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\treturn editor.getAsset(derivedId) ? derivedId : null\n}\n\n/**\n * The effective height to render and measure a bookmark at.\n *\n * Normally this is the stored `props.h`. But when the shape's `assetId` resolves\n * to a different asset than it stores \u2014 e.g. a placeholder restored on redo with\n * a null `assetId` whose asset already exists in the store \u2014 `props.h` is stale\n * (it still holds the placeholder height). In that case recompute the height\n * from the resolved asset so rendering, the indicator, and the geometry/selection\n * bounds all stay in sync.\n */\nexport function getBookmarkShapeHeight(editor: Editor, shape: TLBookmarkShape): number {\n\tconst resolvedAssetId = getResolvedBookmarkAssetId(editor, shape.props.assetId, shape.props.url)\n\tif (resolvedAssetId === shape.props.assetId) return shape.props.h\n\treturn getBookmarkHeight(editor, resolvedAssetId)\n}\n\nasync function _createBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tif (editor.isDisposed) return\n\n\tconst { url } = shape.props\n\n\t// Create the asset using the external content manager's createAssetFromUrl method.\n\t// This may be overwritten by the user (for example, we overwrite it on tldraw.com)\n\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\tif (!asset) {\n\t\t// No asset? Just leave the bookmark as a null assetId.\n\t\treturn\n\t}\n\n\teditor.run(() => {\n\t\t// Create the new asset\n\t\teditor.createAssets([asset])\n\n\t\t// And update the shape\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: asset.id },\n\t\t\t},\n\t\t])\n\t})\n}\n\nconst bookmarkDebouncers = new WeakMap<\n\tEditor,\n\tReturnType<typeof debounce<[Editor, TLBookmarkShape], void>>\n>()\n\nfunction createBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tlet fn = bookmarkDebouncers.get(editor)\n\tif (!fn) {\n\t\tfn = debounce(_createBookmarkAssetOnUrlChange, 500)\n\t\tbookmarkDebouncers.set(editor, fn)\n\t}\n\tfn(editor, shape)\n}\n\n/**\n * Creates a bookmark shape from a URL.\n *\n * The shape is created immediately as a placeholder so the user gets visible\n * feedback at the paste location, and the bookmark metadata (title, description,\n * image, favicon) is fetched in the background. Once metadata resolves, the\n * shape is patched with the resulting asset. If the fetch fails, the shape is\n * left as a URL-only bookmark.\n *\n * @returns A Result containing the created bookmark shape or an error\n * @public\n */\nexport async function createBookmarkFromUrl(\n\teditor: Editor,\n\t{\n\t\turl,\n\t\tcenter = editor.getViewportPageBounds().center,\n\t}: {\n\t\turl: string\n\t\tcenter?: { x: number; y: number }\n\t}\n): Promise<Result<TLBookmarkShape, string>> {\n\ttry {\n\t\t// If we already have a bookmark asset for this URL (e.g. another bookmark\n\t\t// shape was created from the same URL earlier), use it immediately rather\n\t\t// than re-fetching.\n\t\tconst expectedAssetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\t\tconst existingAsset = editor.getAsset(expectedAssetId) as TLBookmarkAsset | null\n\n\t\tconst shapeId = createShapeId()\n\t\tconst shapePartial: TLShapePartial<TLBookmarkShape> = {\n\t\t\tid: shapeId,\n\t\t\ttype: 'bookmark',\n\t\t\tx: center.x - BOOKMARK_WIDTH / 2,\n\t\t\ty: center.y - BOOKMARK_HEIGHT / 2,\n\t\t\trotation: 0,\n\t\t\topacity: 1,\n\t\t\tprops: {\n\t\t\t\turl,\n\t\t\t\tassetId: existingAsset?.id ?? null,\n\t\t\t\tw: BOOKMARK_WIDTH,\n\t\t\t\th: getBookmarkHeight(editor, existingAsset?.id),\n\t\t\t},\n\t\t}\n\n\t\teditor.run(() => {\n\t\t\teditor.createShapes([shapePartial])\n\t\t})\n\n\t\tconst createdShape = editor.getShape<TLBookmarkShape>(shapeId)\n\t\tif (!createdShape) {\n\t\t\treturn Result.err('Failed to create bookmark shape')\n\t\t}\n\n\t\t// If we already had the asset, we're done \u2014 no metadata fetch needed.\n\t\tif (existingAsset) {\n\t\t\treturn Result.ok(createdShape)\n\t\t}\n\n\t\t// Otherwise kick off the metadata fetch in the background. The shape is\n\t\t// already visible as a placeholder; once the asset resolves we'll patch\n\t\t// the shape with its assetId.\n\t\tvoid hydrateBookmarkShape(editor, shapeId, url)\n\n\t\treturn Result.ok(createdShape)\n\t} catch (error) {\n\t\treturn Result.err(error instanceof Error ? error.message : 'Failed to create bookmark')\n\t}\n}\n\nasync function hydrateBookmarkShape(editor: Editor, shapeId: TLShapeId, url: string) {\n\tlet asset\n\ttry {\n\t\tasset = await editor.getAssetForExternalContent({ type: 'url', url })\n\t} catch (error) {\n\t\tconsole.error(error)\n\t\treturn\n\t}\n\n\tif (editor.isDisposed) return\n\tif (!asset) return\n\n\t// The shape may have been deleted (e.g. via undo), had its URL changed, or\n\t// had its asset replaced before the fetch resolved. In any of those cases we\n\t// don't want to attach metadata for the old URL.\n\tconst shape = editor.getShape<TLBookmarkShape>(shapeId)\n\tif (!shape) return\n\tif (shape.props.url !== url) return\n\tif (shape.props.assetId) return\n\n\teditor.run(\n\t\t() => {\n\t\t\tif (!editor.getAsset(asset.id)) {\n\t\t\t\teditor.createAssets([asset])\n\t\t\t}\n\t\t\teditor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\tid: shapeId,\n\t\t\t\t\ttype: 'bookmark',\n\t\t\t\t\tprops: { assetId: asset.id },\n\t\t\t\t},\n\t\t\t])\n\t\t},\n\t\t{ history: 'ignore' }\n\t)\n}\n"],
+  "mappings": "AAAA;AAAA,EACC;AAAA,EAEA;AAAA,EAMA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,2BAA2B;AACxC,MAAM,wBAAwB;AAEvB,SAAS,kBAAkB,QAAgB,SAA4B;AAC7E,QAAM,QAAS,UAAU,OAAO,SAAS,OAAO,IAAI;AAEpD,MAAI,OAAO;AACV,QAAI,CAAC,MAAM,MAAM,OAAO;AACvB,UAAI,CAAC,MAAM,MAAM,OAAO;AACvB,eAAO;AAAA,MACR,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEO,SAAS,kBAAkB,QAAgB,OAAwB;AACzE,SAAO;AAAA,IACN,GAAG;AAAA,IACH,OAAO,EAAE,GAAG,MAAM,OAAO,GAAG,kBAAkB,QAAQ,MAAM,MAAM,OAAO,EAAE;AAAA,EAC5E;AACD;AAGO,SAAS,wBAAwB,KAAa;AACpD,MAAI;AACH,UAAM,SAAS,IAAI,IAAI,GAAG;AAE1B,WAAO,OAAO,SAAS,QAAQ,UAAU,EAAE;AAAA,EAC5C,QAAQ;AACP,WAAO;AAAA,EACR;AACD;AAEO,SAAS,+BAA+B,QAAgB,OAAwB;AACtF,QAAM,EAAE,IAAI,IAAI,MAAM;AAGtB,QAAM,UAAqB,gBAAgB,SAAS,iBAAiB,GAAG,CAAC;AAEzE,MAAI,OAAO,SAAS,OAAO,GAAG;AAE7B,QAAI,MAAM,MAAM,YAAY,SAAS;AACpC,aAAO,aAAa;AAAA,QACnB;AAAA,UACC,IAAI,MAAM;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,OAAO,EAAE,QAAQ;AAAA,QAClB;AAAA,MACD,CAAC;AAAA,IACF;AAAA,EACD,OAAO;AAIN,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,SAAS,KAAK;AAAA,MACxB;AAAA,IACD,CAAC;AAGD,mCAA+B,QAAQ,KAAK;AAAA,EAC7C;AACD;AAYO,SAAS,2BACf,QACA,SACA,KACmB;AACnB,MAAI,QAAS,QAAO;AACpB,MAAI,CAAC,IAAK,QAAO;AAEjB,QAAM,YAAuB,gBAAgB,SAAS,iBAAiB,GAAG,CAAC;AAC3E,SAAO,OAAO,SAAS,SAAS,IAAI,YAAY;AACjD;AAYO,SAAS,uBAAuB,QAAgB,OAAgC;AACtF,QAAM,kBAAkB,2BAA2B,QAAQ,MAAM,MAAM,SAAS,MAAM,MAAM,GAAG;AAC/F,MAAI,oBAAoB,MAAM,MAAM,QAAS,QAAO,MAAM,MAAM;AAChE,SAAO,kBAAkB,QAAQ,eAAe;AACjD;AAEA,eAAe,gCAAgC,QAAgB,OAAwB;AACtF,MAAI,OAAO,WAAY;AAEvB,QAAM,EAAE,IAAI,IAAI,MAAM;AAItB,QAAM,QAAQ,MAAM,OAAO,2BAA2B,EAAE,MAAM,OAAO,IAAI,CAAC;AAE1E,MAAI,CAAC,OAAO;AAEX;AAAA,EACD;AAEA,SAAO,IAAI,MAAM;AAEhB,WAAO,aAAa,CAAC,KAAK,CAAC;AAG3B,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,SAAS,MAAM,GAAG;AAAA,MAC5B;AAAA,IACD,CAAC;AAAA,EACF,CAAC;AACF;AAEA,MAAM,qBAAqB,oBAAI,QAG7B;AAEF,SAAS,+BAA+B,QAAgB,OAAwB;AAC/E,MAAI,KAAK,mBAAmB,IAAI,MAAM;AACtC,MAAI,CAAC,IAAI;AACR,SAAK,SAAS,iCAAiC,GAAG;AAClD,uBAAmB,IAAI,QAAQ,EAAE;AAAA,EAClC;AACA,KAAG,QAAQ,KAAK;AACjB;AAcA,eAAsB,sBACrB,QACA;AAAA,EACC;AAAA,EACA,SAAS,OAAO,sBAAsB,EAAE;AACzC,GAI2C;AAC3C,MAAI;AAIH,UAAM,kBAA6B,gBAAgB,SAAS,iBAAiB,GAAG,CAAC;AACjF,UAAM,gBAAgB,OAAO,SAAS,eAAe;AAErD,UAAM,UAAU,cAAc;AAC9B,UAAM,eAAgD;AAAA,MACrD,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,GAAG,OAAO,IAAI,iBAAiB;AAAA,MAC/B,GAAG,OAAO,IAAI,kBAAkB;AAAA,MAChC,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,QACN;AAAA,QACA,SAAS,eAAe,MAAM;AAAA,QAC9B,GAAG;AAAA,QACH,GAAG,kBAAkB,QAAQ,eAAe,EAAE;AAAA,MAC/C;AAAA,IACD;AAEA,WAAO,IAAI,MAAM;AAChB,aAAO,aAAa,CAAC,YAAY,CAAC;AAAA,IACnC,CAAC;AAED,UAAM,eAAe,OAAO,SAA0B,OAAO;AAC7D,QAAI,CAAC,cAAc;AAClB,aAAO,OAAO,IAAI,iCAAiC;AAAA,IACpD;AAGA,QAAI,eAAe;AAClB,aAAO,OAAO,GAAG,YAAY;AAAA,IAC9B;AAKA,SAAK,qBAAqB,QAAQ,SAAS,GAAG;AAE9C,WAAO,OAAO,GAAG,YAAY;AAAA,EAC9B,SAAS,OAAO;AACf,WAAO,OAAO,IAAI,iBAAiB,QAAQ,MAAM,UAAU,2BAA2B;AAAA,EACvF;AACD;AAEA,eAAe,qBAAqB,QAAgB,SAAoB,KAAa;AACpF,MAAI;AACJ,MAAI;AACH,YAAQ,MAAM,OAAO,2BAA2B,EAAE,MAAM,OAAO,IAAI,CAAC;AAAA,EACrE,SAAS,OAAO;AACf,YAAQ,MAAM,KAAK;AACnB;AAAA,EACD;AAEA,MAAI,OAAO,WAAY;AACvB,MAAI,CAAC,MAAO;AAKZ,QAAM,QAAQ,OAAO,SAA0B,OAAO;AACtD,MAAI,CAAC,MAAO;AACZ,MAAI,MAAM,MAAM,QAAQ,IAAK;AAC7B,MAAI,MAAM,MAAM,QAAS;AAEzB,SAAO;AAAA,IACN,MAAM;AACL,UAAI,CAAC,OAAO,SAAS,MAAM,EAAE,GAAG;AAC/B,eAAO,aAAa,CAAC,KAAK,CAAC;AAAA,MAC5B;AACA,aAAO,aAAa;AAAA,QACnB;AAAA,UACC,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,OAAO,EAAE,SAAS,MAAM,GAAG;AAAA,QAC5B;AAAA,MACD,CAAC;AAAA,IACF;AAAA,IACA,EAAE,SAAS,SAAS;AAAA,EACrB;AACD;",
   "names": []
 }

package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs

@@ -6,6 +6,7 @@ import {
   Polyline2d,
   SVGContainer,
   ShapeUtil,
+  b64Vecs,
   drawShapeMigrations,
   drawShapeProps,
   getColorValue,
@@ -191,7 +192,8 @@ function getDot(point, sw) {
   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 getIsDot(shape) {
-  return shape.props.segments.length === 1 && shape.props.segments[0].path.length < 24;
+  const segment = shape.props.segments[0];
+  return shape.props.segments.length === 1 && b64Vecs.isSinglePoint(segment.path, segment.dim);
 }
 function DrawShapeSvg({
   shape,

package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/draw/DrawShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tCircle2d,\n\tPolygon2d,\n\tPolyline2d,\n\tSVGContainer,\n\tShapeUtil,\n\tSvgExportContext,\n\tTLDrawShape,\n\tTLDrawShapeProps,\n\tTLResizeInfo,\n\tTLShapeUtilCanvasSvgDef,\n\tVecLike,\n\tdrawShapeMigrations,\n\tdrawShapeProps,\n\tgetColorValue,\n\tlast,\n\tlerp,\n\trng,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { STROKE_SIZES } from '../shared/default-shape-constants'\nimport { DEFAULT_FILL_COLOR_NAMES } from '../shared/defaultFills'\nimport { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'\nimport { getStrokePoints } from '../shared/freehand/getStrokePoints'\nimport { getSvgPathFromStrokePoints } from '../shared/freehand/svg'\nimport { svgInk } from '../shared/freehand/svgInk'\nimport { ShapeOptionsWithDisplayValues, getDisplayValues } from '../shared/getDisplayValues'\nimport { interpolateSegments } from '../shared/interpolate-props'\nimport { PatternFill } from '../shared/PatternFill'\nimport {\n\tgetDrawShapeStrokeDashArray,\n\tgetFreehandOptions,\n\tgetPointsFromDrawSegments,\n} from './getPath'\n\n/** @public */\nexport interface DrawShapeUtilDisplayValues {\n\tstrokeColor: string\n\tstrokeWidth: number\n\tfillColor: string\n\tpatternFillFallbackColor: string\n}\n\n/** @public */\nexport interface DrawShapeOptions extends ShapeOptionsWithDisplayValues<\n\tTLDrawShape,\n\tDrawShapeUtilDisplayValues\n> {\n\t/**\n\t * The maximum number of points in a line before the draw tool will begin a new shape.\n\t * A higher number will lead to poor performance while drawing very long lines.\n\t */\n\treadonly maxPointsPerShape: number\n}\n\n/** @public */\nexport class DrawShapeUtil extends ShapeUtil<TLDrawShape> {\n\tstatic override type = 'draw' as const\n\tstatic override props = drawShapeProps\n\tstatic override migrations = drawShapeMigrations\n\n\toverride options: DrawShapeOptions = {\n\t\tmaxPointsPerShape: 600,\n\t\tgetDefaultDisplayValues(_editor, shape, theme, colorMode): DrawShapeUtilDisplayValues {\n\t\t\tconst { color, fill, size } = shape.props\n\t\t\tconst colors = theme.colors[colorMode]\n\t\t\treturn {\n\t\t\t\tstrokeColor: getColorValue(colors, color, 'solid'),\n\t\t\t\tstrokeWidth: theme.strokeWidth * STROKE_SIZES[size],\n\t\t\t\tfillColor:\n\t\t\t\t\tfill === 'none'\n\t\t\t\t\t\t? 'transparent'\n\t\t\t\t\t\t: fill === 'semi'\n\t\t\t\t\t\t\t? colors.solid\n\t\t\t\t\t\t\t: getColorValue(colors, color, DEFAULT_FILL_COLOR_NAMES[fill]),\n\t\t\t\tpatternFillFallbackColor: getColorValue(colors, color, 'semi'),\n\t\t\t}\n\t\t},\n\t\tgetCustomDisplayValues(): Partial<DrawShapeUtilDisplayValues> {\n\t\t\treturn {}\n\t\t},\n\t}\n\n\toverride hideResizeHandles(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideRotateHandle(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideSelectionBoundsFg(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\n\toverride getDefaultProps(): TLDrawShape['props'] {\n\t\treturn {\n\t\t\tsegments: [],\n\t\t\tcolor: 'black',\n\t\t\tfill: 'none',\n\t\t\tdash: 'draw',\n\t\t\tsize: 'm',\n\t\t\tisComplete: false,\n\t\t\tisClosed: false,\n\t\t\tisPen: false,\n\t\t\tscale: 1,\n\t\t\tscaleX: 1,\n\t\t\tscaleY: 1,\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLDrawShape) {\n\t\tconst points = getPointsFromDrawSegments(\n\t\t\tshape.props.segments,\n\t\t\tshape.props.scaleX,\n\t\t\tshape.props.scaleY\n\t\t)\n\n\t\tconst sw = (getDisplayValues(this, shape).strokeWidth + 1) * shape.props.scale\n\n\t\t// A dot\n\t\tif (shape.props.segments.length === 1) {\n\t\t\tconst box = Box.FromPoints(points)\n\t\t\tif (box.width < sw * 2 && box.height < sw * 2) {\n\t\t\t\treturn new Circle2d({\n\t\t\t\t\tx: -sw,\n\t\t\t\t\ty: -sw,\n\t\t\t\t\tradius: sw,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst strokePoints = getStrokePoints(\n\t\t\tpoints,\n\t\t\tgetFreehandOptions(shape.props, sw, shape.props.isPen, true)\n\t\t).map((p) => p.point)\n\n\t\t// A closed draw stroke\n\t\tif (shape.props.isClosed && strokePoints.length > 2) {\n\t\t\treturn new Polygon2d({\n\t\t\t\tpoints: strokePoints,\n\t\t\t\tisFilled: shape.props.fill !== 'none',\n\t\t\t})\n\t\t}\n\n\t\tif (strokePoints.length === 1) {\n\t\t\treturn new Circle2d({\n\t\t\t\tx: -sw,\n\t\t\t\ty: -sw,\n\t\t\t\tradius: sw,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\t// An open draw stroke\n\t\treturn new Polyline2d({\n\t\t\tpoints: strokePoints,\n\t\t})\n\t}\n\n\tcomponent(shape: TLDrawShape) {\n\t\tconst dv = getDisplayValues(this, shape)\n\t\treturn (\n\t\t\t<SVGContainer>\n\t\t\t\t<DrawShapeSvg\n\t\t\t\t\tshape={shape}\n\t\t\t\t\tstrokeColor={dv.strokeColor}\n\t\t\t\t\tstrokeWidth={dv.strokeWidth}\n\t\t\t\t\tfillColor={dv.fillColor}\n\t\t\t\t\tpatternFillFallbackColor={dv.patternFillFallbackColor}\n\t\t\t\t/>\n\t\t\t</SVGContainer>\n\t\t)\n\t}\n\n\toverride getIndicatorPath(shape: TLDrawShape): Path2D {\n\t\tconst allPointsFromSegments = getPointsFromDrawSegments(\n\t\t\tshape.props.segments,\n\t\t\tshape.props.scaleX,\n\t\t\tshape.props.scaleY\n\t\t)\n\n\t\tlet sw = (getDisplayValues(this, shape).strokeWidth + 1) * shape.props.scale\n\n\t\tconst zoomLevel = this.editor.getEfficientZoomLevel()\n\t\tconst forceSolid = zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\n\t\tif (\n\t\t\t!forceSolid &&\n\t\t\t!shape.props.isPen &&\n\t\t\tshape.props.dash === 'draw' &&\n\t\t\tallPointsFromSegments.length === 1\n\t\t) {\n\t\t\tsw += rng(shape.id)() * (sw / 6)\n\t\t}\n\n\t\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\t\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, true)\n\t\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\t\tconst solidStrokePath =\n\t\t\tstrokePoints.length > 1\n\t\t\t\t? getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\t\t\t\t: getDot(allPointsFromSegments[0], sw)\n\n\t\treturn new Path2D(solidStrokePath)\n\t}\n\n\toverride toSvg(shape: TLDrawShape, ctx: SvgExportContext) {\n\t\tctx.addExportDef(getFillDefForExport(shape.props.fill))\n\t\tconst dv = getDisplayValues(this, shape, ctx.colorMode)\n\t\tconst scaleFactor = 1 / shape.props.scale\n\t\treturn (\n\t\t\t<g transform={`scale(${scaleFactor})`}>\n\t\t\t\t<DrawShapeSvg\n\t\t\t\t\tshape={shape}\n\t\t\t\t\tzoomOverride={1}\n\t\t\t\t\tstrokeColor={dv.strokeColor}\n\t\t\t\t\tstrokeWidth={dv.strokeWidth}\n\t\t\t\t\tfillColor={dv.fillColor}\n\t\t\t\t\tpatternFillFallbackColor={dv.patternFillFallbackColor}\n\t\t\t\t/>\n\t\t\t</g>\n\t\t)\n\t}\n\n\toverride getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[] {\n\t\treturn [getFillDefForCanvas()]\n\t}\n\n\toverride onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>) {\n\t\tconst newScaleX = info.scaleX * shape.props.scaleX\n\t\tconst newScaleY = info.scaleY * shape.props.scaleY\n\t\tif (newScaleX === 0 || newScaleY === 0) return\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\tscaleX: newScaleX,\n\t\t\t\tscaleY: newScaleY,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride expandSelectionOutlinePx(shape: TLDrawShape): number {\n\t\tconst multiplier = shape.props.dash === 'draw' ? 1.6 : 1\n\t\treturn ((getDisplayValues(this, shape).strokeWidth * multiplier) / 2) * shape.props.scale\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLDrawShape,\n\t\tendShape: TLDrawShape,\n\t\tt: number\n\t): TLDrawShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tsegments: interpolateSegments(startShape.props.segments, endShape.props.segments, t),\n\t\t\tscale: lerp(startShape.props.scale, endShape.props.scale, t),\n\t\t}\n\t}\n}\n\nfunction getDot(point: VecLike, sw: number) {\n\tconst r = (sw + 1) * 0.5\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 getIsDot(shape: TLDrawShape) {\n\t// First point is 16 base64 chars (3 Float32s = 12 bytes)\n\t// Each delta point is 8 base64 chars (3 Float16s = 6 bytes)\n\t// 1 point = 16 chars, 2 points = 24 chars\n\t// Check if we have less than 2 points without decoding\n\treturn shape.props.segments.length === 1 && shape.props.segments[0].path.length < 24\n}\n\nfunction DrawShapeSvg({\n\tshape,\n\tzoomOverride,\n\tstrokeColor,\n\tstrokeWidth: baseStrokeWidth,\n\tfillColor,\n\tpatternFillFallbackColor,\n}: {\n\tshape: TLDrawShape\n\tzoomOverride?: number\n\tstrokeColor: string\n\tstrokeWidth: number\n\tfillColor: string\n\tpatternFillFallbackColor: string\n}) {\n\tconst editor = useEditor()\n\n\tconst allPointsFromSegments = getPointsFromDrawSegments(\n\t\tshape.props.segments,\n\t\tshape.props.scaleX,\n\t\tshape.props.scaleY\n\t)\n\n\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\n\tlet sw = (baseStrokeWidth + 1) * shape.props.scale\n\tconst forceSolid = useValue(\n\t\t'force solid',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()\n\t\t\treturn zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\t\t},\n\t\t[editor, sw, zoomOverride]\n\t)\n\n\tconst dotAdjustment = useValue(\n\t\t'dot adjustment',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()\n\t\t\t// If we're zoomed way out (10%), then we need to make the dotted line go to 9 instead 0.1\n\t\t\t// Chrome doesn't render anything otherwise.\n\t\t\treturn zoomLevel < 0.2 ? 9 : 0.1\n\t\t},\n\t\t[editor, zoomOverride]\n\t)\n\n\tif (\n\t\t!forceSolid &&\n\t\t!shape.props.isPen &&\n\t\tshape.props.dash === 'draw' &&\n\t\tallPointsFromSegments.length === 1\n\t) {\n\t\tsw += rng(shape.id)() * (sw / 6)\n\t}\n\n\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, forceSolid)\n\n\tif (!forceSolid && shape.props.dash === 'draw') {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{shape.props.isClosed &&\n\t\t\t\t\tshape.props.fill !== 'none' &&\n\t\t\t\t\tallPointsFromSegments.length > 1 &&\n\t\t\t\t\t(shape.props.fill === 'pattern' ? (\n\t\t\t\t\t\t<PatternFill\n\t\t\t\t\t\t\td={getSvgPathFromStrokePoints(\n\t\t\t\t\t\t\t\tgetStrokePoints(allPointsFromSegments, options),\n\t\t\t\t\t\t\t\tshape.props.isClosed\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tfillColor={fillColor}\n\t\t\t\t\t\t\tpatternFillFallbackColor={patternFillFallbackColor}\n\t\t\t\t\t\t\tscale={shape.props.scale}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill={fillColor}\n\t\t\t\t\t\t\td={getSvgPathFromStrokePoints(\n\t\t\t\t\t\t\t\tgetStrokePoints(allPointsFromSegments, options),\n\t\t\t\t\t\t\t\tshape.props.isClosed\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t<path d={svgInk(allPointsFromSegments, options)} strokeLinecap=\"round\" fill={strokeColor} />\n\t\t\t</>\n\t\t)\n\t}\n\n\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\tconst isDot = strokePoints.length < 2\n\tconst solidStrokePath = isDot\n\t\t? getDot(allPointsFromSegments[0], 0)\n\t\t: getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\n\tconst fill = isDot || shape.props.isClosed ? shape.props.fill : 'none'\n\n\treturn (\n\t\t<>\n\t\t\t{isDot || !shape.props.isClosed || fill === 'none' ? null : fill === 'pattern' ? (\n\t\t\t\t<PatternFill\n\t\t\t\t\td={solidStrokePath}\n\t\t\t\t\tfillColor={fillColor}\n\t\t\t\t\tpatternFillFallbackColor={patternFillFallbackColor}\n\t\t\t\t\tscale={shape.props.scale}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<path fill={fillColor} d={solidStrokePath} />\n\t\t\t)}\n\t\t\t{shape.props.dash !== 'none' && (\n\t\t\t\t<path\n\t\t\t\t\td={solidStrokePath}\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tfill={isDot ? strokeColor : 'none'}\n\t\t\t\t\tstroke={strokeColor}\n\t\t\t\t\tstrokeWidth={sw}\n\t\t\t\t\tstrokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}\n\t\t\t\t\tstrokeDashoffset=\"0\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tCircle2d,\n\tPolygon2d,\n\tPolyline2d,\n\tSVGContainer,\n\tShapeUtil,\n\tSvgExportContext,\n\tTLDrawShape,\n\tTLDrawShapeProps,\n\tTLResizeInfo,\n\tTLShapeUtilCanvasSvgDef,\n\tVecLike,\n\tb64Vecs,\n\tdrawShapeMigrations,\n\tdrawShapeProps,\n\tgetColorValue,\n\tlast,\n\tlerp,\n\trng,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { STROKE_SIZES } from '../shared/default-shape-constants'\nimport { DEFAULT_FILL_COLOR_NAMES } from '../shared/defaultFills'\nimport { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'\nimport { getStrokePoints } from '../shared/freehand/getStrokePoints'\nimport { getSvgPathFromStrokePoints } from '../shared/freehand/svg'\nimport { svgInk } from '../shared/freehand/svgInk'\nimport { ShapeOptionsWithDisplayValues, getDisplayValues } from '../shared/getDisplayValues'\nimport { interpolateSegments } from '../shared/interpolate-props'\nimport { PatternFill } from '../shared/PatternFill'\nimport {\n\tgetDrawShapeStrokeDashArray,\n\tgetFreehandOptions,\n\tgetPointsFromDrawSegments,\n} from './getPath'\n\n/** @public */\nexport interface DrawShapeUtilDisplayValues {\n\tstrokeColor: string\n\tstrokeWidth: number\n\tfillColor: string\n\tpatternFillFallbackColor: string\n}\n\n/** @public */\nexport interface DrawShapeOptions extends ShapeOptionsWithDisplayValues<\n\tTLDrawShape,\n\tDrawShapeUtilDisplayValues\n> {\n\t/**\n\t * The maximum number of points in a line before the draw tool will begin a new shape.\n\t * A higher number will lead to poor performance while drawing very long lines.\n\t */\n\treadonly maxPointsPerShape: number\n}\n\n/** @public */\nexport class DrawShapeUtil extends ShapeUtil<TLDrawShape> {\n\tstatic override type = 'draw' as const\n\tstatic override props = drawShapeProps\n\tstatic override migrations = drawShapeMigrations\n\n\toverride options: DrawShapeOptions = {\n\t\tmaxPointsPerShape: 600,\n\t\tgetDefaultDisplayValues(_editor, shape, theme, colorMode): DrawShapeUtilDisplayValues {\n\t\t\tconst { color, fill, size } = shape.props\n\t\t\tconst colors = theme.colors[colorMode]\n\t\t\treturn {\n\t\t\t\tstrokeColor: getColorValue(colors, color, 'solid'),\n\t\t\t\tstrokeWidth: theme.strokeWidth * STROKE_SIZES[size],\n\t\t\t\tfillColor:\n\t\t\t\t\tfill === 'none'\n\t\t\t\t\t\t? 'transparent'\n\t\t\t\t\t\t: fill === 'semi'\n\t\t\t\t\t\t\t? colors.solid\n\t\t\t\t\t\t\t: getColorValue(colors, color, DEFAULT_FILL_COLOR_NAMES[fill]),\n\t\t\t\tpatternFillFallbackColor: getColorValue(colors, color, 'semi'),\n\t\t\t}\n\t\t},\n\t\tgetCustomDisplayValues(): Partial<DrawShapeUtilDisplayValues> {\n\t\t\treturn {}\n\t\t},\n\t}\n\n\toverride hideResizeHandles(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideRotateHandle(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\toverride hideSelectionBoundsFg(shape: TLDrawShape) {\n\t\treturn getIsDot(shape)\n\t}\n\n\toverride getDefaultProps(): TLDrawShape['props'] {\n\t\treturn {\n\t\t\tsegments: [],\n\t\t\tcolor: 'black',\n\t\t\tfill: 'none',\n\t\t\tdash: 'draw',\n\t\t\tsize: 'm',\n\t\t\tisComplete: false,\n\t\t\tisClosed: false,\n\t\t\tisPen: false,\n\t\t\tscale: 1,\n\t\t\tscaleX: 1,\n\t\t\tscaleY: 1,\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLDrawShape) {\n\t\tconst points = getPointsFromDrawSegments(\n\t\t\tshape.props.segments,\n\t\t\tshape.props.scaleX,\n\t\t\tshape.props.scaleY\n\t\t)\n\n\t\tconst sw = (getDisplayValues(this, shape).strokeWidth + 1) * shape.props.scale\n\n\t\t// A dot\n\t\tif (shape.props.segments.length === 1) {\n\t\t\tconst box = Box.FromPoints(points)\n\t\t\tif (box.width < sw * 2 && box.height < sw * 2) {\n\t\t\t\treturn new Circle2d({\n\t\t\t\t\tx: -sw,\n\t\t\t\t\ty: -sw,\n\t\t\t\t\tradius: sw,\n\t\t\t\t\tisFilled: true,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tconst strokePoints = getStrokePoints(\n\t\t\tpoints,\n\t\t\tgetFreehandOptions(shape.props, sw, shape.props.isPen, true)\n\t\t).map((p) => p.point)\n\n\t\t// A closed draw stroke\n\t\tif (shape.props.isClosed && strokePoints.length > 2) {\n\t\t\treturn new Polygon2d({\n\t\t\t\tpoints: strokePoints,\n\t\t\t\tisFilled: shape.props.fill !== 'none',\n\t\t\t})\n\t\t}\n\n\t\tif (strokePoints.length === 1) {\n\t\t\treturn new Circle2d({\n\t\t\t\tx: -sw,\n\t\t\t\ty: -sw,\n\t\t\t\tradius: sw,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\t// An open draw stroke\n\t\treturn new Polyline2d({\n\t\t\tpoints: strokePoints,\n\t\t})\n\t}\n\n\tcomponent(shape: TLDrawShape) {\n\t\tconst dv = getDisplayValues(this, shape)\n\t\treturn (\n\t\t\t<SVGContainer>\n\t\t\t\t<DrawShapeSvg\n\t\t\t\t\tshape={shape}\n\t\t\t\t\tstrokeColor={dv.strokeColor}\n\t\t\t\t\tstrokeWidth={dv.strokeWidth}\n\t\t\t\t\tfillColor={dv.fillColor}\n\t\t\t\t\tpatternFillFallbackColor={dv.patternFillFallbackColor}\n\t\t\t\t/>\n\t\t\t</SVGContainer>\n\t\t)\n\t}\n\n\toverride getIndicatorPath(shape: TLDrawShape): Path2D {\n\t\tconst allPointsFromSegments = getPointsFromDrawSegments(\n\t\t\tshape.props.segments,\n\t\t\tshape.props.scaleX,\n\t\t\tshape.props.scaleY\n\t\t)\n\n\t\tlet sw = (getDisplayValues(this, shape).strokeWidth + 1) * shape.props.scale\n\n\t\tconst zoomLevel = this.editor.getEfficientZoomLevel()\n\t\tconst forceSolid = zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\n\t\tif (\n\t\t\t!forceSolid &&\n\t\t\t!shape.props.isPen &&\n\t\t\tshape.props.dash === 'draw' &&\n\t\t\tallPointsFromSegments.length === 1\n\t\t) {\n\t\t\tsw += rng(shape.id)() * (sw / 6)\n\t\t}\n\n\t\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\t\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, true)\n\t\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\t\tconst solidStrokePath =\n\t\t\tstrokePoints.length > 1\n\t\t\t\t? getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\t\t\t\t: getDot(allPointsFromSegments[0], sw)\n\n\t\treturn new Path2D(solidStrokePath)\n\t}\n\n\toverride toSvg(shape: TLDrawShape, ctx: SvgExportContext) {\n\t\tctx.addExportDef(getFillDefForExport(shape.props.fill))\n\t\tconst dv = getDisplayValues(this, shape, ctx.colorMode)\n\t\tconst scaleFactor = 1 / shape.props.scale\n\t\treturn (\n\t\t\t<g transform={`scale(${scaleFactor})`}>\n\t\t\t\t<DrawShapeSvg\n\t\t\t\t\tshape={shape}\n\t\t\t\t\tzoomOverride={1}\n\t\t\t\t\tstrokeColor={dv.strokeColor}\n\t\t\t\t\tstrokeWidth={dv.strokeWidth}\n\t\t\t\t\tfillColor={dv.fillColor}\n\t\t\t\t\tpatternFillFallbackColor={dv.patternFillFallbackColor}\n\t\t\t\t/>\n\t\t\t</g>\n\t\t)\n\t}\n\n\toverride getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[] {\n\t\treturn [getFillDefForCanvas()]\n\t}\n\n\toverride onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>) {\n\t\tconst newScaleX = info.scaleX * shape.props.scaleX\n\t\tconst newScaleY = info.scaleY * shape.props.scaleY\n\t\tif (newScaleX === 0 || newScaleY === 0) return\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\tscaleX: newScaleX,\n\t\t\t\tscaleY: newScaleY,\n\t\t\t},\n\t\t}\n\t}\n\n\toverride expandSelectionOutlinePx(shape: TLDrawShape): number {\n\t\tconst multiplier = shape.props.dash === 'draw' ? 1.6 : 1\n\t\treturn ((getDisplayValues(this, shape).strokeWidth * multiplier) / 2) * shape.props.scale\n\t}\n\toverride getInterpolatedProps(\n\t\tstartShape: TLDrawShape,\n\t\tendShape: TLDrawShape,\n\t\tt: number\n\t): TLDrawShapeProps {\n\t\treturn {\n\t\t\t...(t > 0.5 ? endShape.props : startShape.props),\n\t\t\tsegments: interpolateSegments(startShape.props.segments, endShape.props.segments, t),\n\t\t\tscale: lerp(startShape.props.scale, endShape.props.scale, t),\n\t\t}\n\t}\n}\n\nfunction getDot(point: VecLike, sw: number) {\n\tconst r = (sw + 1) * 0.5\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 getIsDot(shape: TLDrawShape) {\n\t// A dot is a single-point segment. isSinglePoint knows the per-encoding length\n\t// (and takes the segment's dim), so this stays correct for both 2D and 3D paths.\n\t// A bare length threshold can't: a 2-point 2D path is the same length as a 1-point\n\t// 3D path, so only the dim disambiguates them.\n\tconst segment = shape.props.segments[0]\n\treturn shape.props.segments.length === 1 && b64Vecs.isSinglePoint(segment.path, segment.dim)\n}\n\nfunction DrawShapeSvg({\n\tshape,\n\tzoomOverride,\n\tstrokeColor,\n\tstrokeWidth: baseStrokeWidth,\n\tfillColor,\n\tpatternFillFallbackColor,\n}: {\n\tshape: TLDrawShape\n\tzoomOverride?: number\n\tstrokeColor: string\n\tstrokeWidth: number\n\tfillColor: string\n\tpatternFillFallbackColor: string\n}) {\n\tconst editor = useEditor()\n\n\tconst allPointsFromSegments = getPointsFromDrawSegments(\n\t\tshape.props.segments,\n\t\tshape.props.scaleX,\n\t\tshape.props.scaleY\n\t)\n\n\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\n\tlet sw = (baseStrokeWidth + 1) * shape.props.scale\n\tconst forceSolid = useValue(\n\t\t'force solid',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()\n\t\t\treturn zoomLevel < 0.5 && zoomLevel < 1.5 / sw\n\t\t},\n\t\t[editor, sw, zoomOverride]\n\t)\n\n\tconst dotAdjustment = useValue(\n\t\t'dot adjustment',\n\t\t() => {\n\t\t\tconst zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()\n\t\t\t// If we're zoomed way out (10%), then we need to make the dotted line go to 9 instead 0.1\n\t\t\t// Chrome doesn't render anything otherwise.\n\t\t\treturn zoomLevel < 0.2 ? 9 : 0.1\n\t\t},\n\t\t[editor, zoomOverride]\n\t)\n\n\tif (\n\t\t!forceSolid &&\n\t\t!shape.props.isPen &&\n\t\tshape.props.dash === 'draw' &&\n\t\tallPointsFromSegments.length === 1\n\t) {\n\t\tsw += rng(shape.id)() * (sw / 6)\n\t}\n\n\tconst options = getFreehandOptions(shape.props, sw, showAsComplete, forceSolid)\n\n\tif (!forceSolid && shape.props.dash === 'draw') {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{shape.props.isClosed &&\n\t\t\t\t\tshape.props.fill !== 'none' &&\n\t\t\t\t\tallPointsFromSegments.length > 1 &&\n\t\t\t\t\t(shape.props.fill === 'pattern' ? (\n\t\t\t\t\t\t<PatternFill\n\t\t\t\t\t\t\td={getSvgPathFromStrokePoints(\n\t\t\t\t\t\t\t\tgetStrokePoints(allPointsFromSegments, options),\n\t\t\t\t\t\t\t\tshape.props.isClosed\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tfillColor={fillColor}\n\t\t\t\t\t\t\tpatternFillFallbackColor={patternFillFallbackColor}\n\t\t\t\t\t\t\tscale={shape.props.scale}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfill={fillColor}\n\t\t\t\t\t\t\td={getSvgPathFromStrokePoints(\n\t\t\t\t\t\t\t\tgetStrokePoints(allPointsFromSegments, options),\n\t\t\t\t\t\t\t\tshape.props.isClosed\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t<path d={svgInk(allPointsFromSegments, options)} strokeLinecap=\"round\" fill={strokeColor} />\n\t\t\t</>\n\t\t)\n\t}\n\n\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\tconst isDot = strokePoints.length < 2\n\tconst solidStrokePath = isDot\n\t\t? getDot(allPointsFromSegments[0], 0)\n\t\t: getSvgPathFromStrokePoints(strokePoints, shape.props.isClosed)\n\n\tconst fill = isDot || shape.props.isClosed ? shape.props.fill : 'none'\n\n\treturn (\n\t\t<>\n\t\t\t{isDot || !shape.props.isClosed || fill === 'none' ? null : fill === 'pattern' ? (\n\t\t\t\t<PatternFill\n\t\t\t\t\td={solidStrokePath}\n\t\t\t\t\tfillColor={fillColor}\n\t\t\t\t\tpatternFillFallbackColor={patternFillFallbackColor}\n\t\t\t\t\tscale={shape.props.scale}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<path fill={fillColor} d={solidStrokePath} />\n\t\t\t)}\n\t\t\t{shape.props.dash !== 'none' && (\n\t\t\t\t<path\n\t\t\t\t\td={solidStrokePath}\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tfill={isDot ? strokeColor : 'none'}\n\t\t\t\t\tstroke={strokeColor}\n\t\t\t\t\tstrokeWidth={sw}\n\t\t\t\t\tstrokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}\n\t\t\t\t\tstrokeDashoffset=\"0\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
+  "mappings": "AAsKI,SA0KD,UA1KC,KA0KD,YA1KC;AAtKJ;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAOA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,qBAAqB,2BAA2B;AACzD,SAAS,uBAAuB;AAChC,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAwC,wBAAwB;AAChE,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAuBA,MAAM,sBAAsB,UAAuB;AAAA,EACzD,OAAgB,OAAO;AAAA,EACvB,OAAgB,QAAQ;AAAA,EACxB,OAAgB,aAAa;AAAA,EAEpB,UAA4B;AAAA,IACpC,mBAAmB;AAAA,IACnB,wBAAwB,SAAS,OAAO,OAAO,WAAuC;AACrF,YAAM,EAAE,OAAO,MAAM,KAAK,IAAI,MAAM;AACpC,YAAM,SAAS,MAAM,OAAO,SAAS;AACrC,aAAO;AAAA,QACN,aAAa,cAAc,QAAQ,OAAO,OAAO;AAAA,QACjD,aAAa,MAAM,cAAc,aAAa,IAAI;AAAA,QAClD,WACC,SAAS,SACN,gBACA,SAAS,SACR,OAAO,QACP,cAAc,QAAQ,OAAO,yBAAyB,IAAI,CAAC;AAAA,QAChE,0BAA0B,cAAc,QAAQ,OAAO,MAAM;AAAA,MAC9D;AAAA,IACD;AAAA,IACA,yBAA8D;AAC7D,aAAO,CAAC;AAAA,IACT;AAAA,EACD;AAAA,EAES,kBAAkB,OAAoB;AAC9C,WAAO,SAAS,KAAK;AAAA,EACtB;AAAA,EACS,iBAAiB,OAAoB;AAC7C,WAAO,SAAS,KAAK;AAAA,EACtB;AAAA,EACS,sBAAsB,OAAoB;AAClD,WAAO,SAAS,KAAK;AAAA,EACtB;AAAA,EAES,kBAAwC;AAChD,WAAO;AAAA,MACN,UAAU,CAAC;AAAA,MACX,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACT;AAAA,EACD;AAAA,EAEA,YAAY,OAAoB;AAC/B,UAAM,SAAS;AAAA,MACd,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IACb;AAEA,UAAM,MAAM,iBAAiB,MAAM,KAAK,EAAE,cAAc,KAAK,MAAM,MAAM;AAGzE,QAAI,MAAM,MAAM,SAAS,WAAW,GAAG;AACtC,YAAM,MAAM,IAAI,WAAW,MAAM;AACjC,UAAI,IAAI,QAAQ,KAAK,KAAK,IAAI,SAAS,KAAK,GAAG;AAC9C,eAAO,IAAI,SAAS;AAAA,UACnB,GAAG,CAAC;AAAA,UACJ,GAAG,CAAC;AAAA,UACJ,QAAQ;AAAA,UACR,UAAU;AAAA,QACX,CAAC;AAAA,MACF;AAAA,IACD;AAEA,UAAM,eAAe;AAAA,MACpB;AAAA,MACA,mBAAmB,MAAM,OAAO,IAAI,MAAM,MAAM,OAAO,IAAI;AAAA,IAC5D,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK;AAGpB,QAAI,MAAM,MAAM,YAAY,aAAa,SAAS,GAAG;AACpD,aAAO,IAAI,UAAU;AAAA,QACpB,QAAQ;AAAA,QACR,UAAU,MAAM,MAAM,SAAS;AAAA,MAChC,CAAC;AAAA,IACF;AAEA,QAAI,aAAa,WAAW,GAAG;AAC9B,aAAO,IAAI,SAAS;AAAA,QACnB,GAAG,CAAC;AAAA,QACJ,GAAG,CAAC;AAAA,QACJ,QAAQ;AAAA,QACR,UAAU;AAAA,MACX,CAAC;AAAA,IACF;AAGA,WAAO,IAAI,WAAW;AAAA,MACrB,QAAQ;AAAA,IACT,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAoB;AAC7B,UAAM,KAAK,iBAAiB,MAAM,KAAK;AACvC,WACC,oBAAC,gBACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,aAAa,GAAG;AAAA,QAChB,aAAa,GAAG;AAAA,QAChB,WAAW,GAAG;AAAA,QACd,0BAA0B,GAAG;AAAA;AAAA,IAC9B,GACD;AAAA,EAEF;AAAA,EAES,iBAAiB,OAA4B;AACrD,UAAM,wBAAwB;AAAA,MAC7B,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IACb;AAEA,QAAI,MAAM,iBAAiB,MAAM,KAAK,EAAE,cAAc,KAAK,MAAM,MAAM;AAEvE,UAAM,YAAY,KAAK,OAAO,sBAAsB;AACpD,UAAM,aAAa,YAAY,OAAO,YAAY,MAAM;AAExD,QACC,CAAC,cACD,CAAC,MAAM,MAAM,SACb,MAAM,MAAM,SAAS,UACrB,sBAAsB,WAAW,GAChC;AACD,YAAM,IAAI,MAAM,EAAE,EAAE,KAAK,KAAK;AAAA,IAC/B;AAEA,UAAM,iBAAiB,MAAM,MAAM,cAAc,KAAK,MAAM,MAAM,QAAQ,GAAG,SAAS;AACtF,UAAM,UAAU,mBAAmB,MAAM,OAAO,IAAI,gBAAgB,IAAI;AACxE,UAAM,eAAe,gBAAgB,uBAAuB,OAAO;AACnE,UAAM,kBACL,aAAa,SAAS,IACnB,2BAA2B,cAAc,MAAM,MAAM,QAAQ,IAC7D,OAAO,sBAAsB,CAAC,GAAG,EAAE;AAEvC,WAAO,IAAI,OAAO,eAAe;AAAA,EAClC;AAAA,EAES,MAAM,OAAoB,KAAuB;AACzD,QAAI,aAAa,oBAAoB,MAAM,MAAM,IAAI,CAAC;AACtD,UAAM,KAAK,iBAAiB,MAAM,OAAO,IAAI,SAAS;AACtD,UAAM,cAAc,IAAI,MAAM,MAAM;AACpC,WACC,oBAAC,OAAE,WAAW,SAAS,WAAW,KACjC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,aAAa,GAAG;AAAA,QAChB,aAAa,GAAG;AAAA,QAChB,WAAW,GAAG;AAAA,QACd,0BAA0B,GAAG;AAAA;AAAA,IAC9B,GACD;AAAA,EAEF;AAAA,EAES,mBAA8C;AACtD,WAAO,CAAC,oBAAoB,CAAC;AAAA,EAC9B;AAAA,EAES,SAAS,OAAoB,MAAiC;AACtE,UAAM,YAAY,KAAK,SAAS,MAAM,MAAM;AAC5C,UAAM,YAAY,KAAK,SAAS,MAAM,MAAM;AAC5C,QAAI,cAAc,KAAK,cAAc,EAAG;AAExC,WAAO;AAAA,MACN,OAAO;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAAA,EAES,yBAAyB,OAA4B;AAC7D,UAAM,aAAa,MAAM,MAAM,SAAS,SAAS,MAAM;AACvD,WAAS,iBAAiB,MAAM,KAAK,EAAE,cAAc,aAAc,IAAK,MAAM,MAAM;AAAA,EACrF;AAAA,EACS,qBACR,YACA,UACA,GACmB;AACnB,WAAO;AAAA,MACN,GAAI,IAAI,MAAM,SAAS,QAAQ,WAAW;AAAA,MAC1C,UAAU,oBAAoB,WAAW,MAAM,UAAU,SAAS,MAAM,UAAU,CAAC;AAAA,MACnF,OAAO,KAAK,WAAW,MAAM,OAAO,SAAS,MAAM,OAAO,CAAC;AAAA,IAC5D;AAAA,EACD;AACD;AAEA,SAAS,OAAO,OAAgB,IAAY;AAC3C,QAAM,KAAK,KAAK,KAAK;AACrB,SAAO,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WACjF,IAAI,CACL;AACD;AAEA,SAAS,SAAS,OAAoB;AAKrC,QAAM,UAAU,MAAM,MAAM,SAAS,CAAC;AACtC,SAAO,MAAM,MAAM,SAAS,WAAW,KAAK,QAAQ,cAAc,QAAQ,MAAM,QAAQ,GAAG;AAC5F;AAEA,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACD,GAOG;AACF,QAAM,SAAS,UAAU;AAEzB,QAAM,wBAAwB;AAAA,IAC7B,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM;AAAA,EACb;AAEA,QAAM,iBAAiB,MAAM,MAAM,cAAc,KAAK,MAAM,MAAM,QAAQ,GAAG,SAAS;AAEtF,MAAI,MAAM,kBAAkB,KAAK,MAAM,MAAM;AAC7C,QAAM,aAAa;AAAA,IAClB;AAAA,IACA,MAAM;AACL,YAAM,YAAY,gBAAgB,OAAO,sBAAsB;AAC/D,aAAO,YAAY,OAAO,YAAY,MAAM;AAAA,IAC7C;AAAA,IACA,CAAC,QAAQ,IAAI,YAAY;AAAA,EAC1B;AAEA,QAAM,gBAAgB;AAAA,IACrB;AAAA,IACA,MAAM;AACL,YAAM,YAAY,gBAAgB,OAAO,sBAAsB;AAG/D,aAAO,YAAY,MAAM,IAAI;AAAA,IAC9B;AAAA,IACA,CAAC,QAAQ,YAAY;AAAA,EACtB;AAEA,MACC,CAAC,cACD,CAAC,MAAM,MAAM,SACb,MAAM,MAAM,SAAS,UACrB,sBAAsB,WAAW,GAChC;AACD,UAAM,IAAI,MAAM,EAAE,EAAE,KAAK,KAAK;AAAA,EAC/B;AAEA,QAAM,UAAU,mBAAmB,MAAM,OAAO,IAAI,gBAAgB,UAAU;AAE9E,MAAI,CAAC,cAAc,MAAM,MAAM,SAAS,QAAQ;AAC/C,WACC,iCACE;AAAA,YAAM,MAAM,YACZ,MAAM,MAAM,SAAS,UACrB,sBAAsB,SAAS,MAC9B,MAAM,MAAM,SAAS,YACrB;AAAA,QAAC;AAAA;AAAA,UACA,GAAG;AAAA,YACF,gBAAgB,uBAAuB,OAAO;AAAA,YAC9C,MAAM,MAAM;AAAA,UACb;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,MAAM,MAAM;AAAA;AAAA,MACpB,IAEA;AAAA,QAAC;AAAA;AAAA,UACA,MAAM;AAAA,UACN,GAAG;AAAA,YACF,gBAAgB,uBAAuB,OAAO;AAAA,YAC9C,MAAM,MAAM;AAAA,UACb;AAAA;AAAA,MACD;AAAA,MAEF,oBAAC,UAAK,GAAG,OAAO,uBAAuB,OAAO,GAAG,eAAc,SAAQ,MAAM,aAAa;AAAA,OAC3F;AAAA,EAEF;AAEA,QAAM,eAAe,gBAAgB,uBAAuB,OAAO;AACnE,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,kBAAkB,QACrB,OAAO,sBAAsB,CAAC,GAAG,CAAC,IAClC,2BAA2B,cAAc,MAAM,MAAM,QAAQ;AAEhE,QAAM,OAAO,SAAS,MAAM,MAAM,WAAW,MAAM,MAAM,OAAO;AAEhE,SACC,iCACE;AAAA,aAAS,CAAC,MAAM,MAAM,YAAY,SAAS,SAAS,OAAO,SAAS,YACpE;AAAA,MAAC;AAAA;AAAA,QACA,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,OAAO,MAAM,MAAM;AAAA;AAAA,IACpB,IAEA,oBAAC,UAAK,MAAM,WAAW,GAAG,iBAAiB;AAAA,IAE3C,MAAM,MAAM,SAAS,UACrB;AAAA,MAAC;AAAA;AAAA,QACA,GAAG;AAAA,QACH,eAAc;AAAA,QACd,MAAM,QAAQ,cAAc;AAAA,QAC5B,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,iBAAiB,QAAQ,SAAS,4BAA4B,OAAO,IAAI,aAAa;AAAA,QACtF,kBAAiB;AAAA;AAAA,IAClB;AAAA,KAEF;AAEF;",
   "names": []
 }

package/dist-esm/lib/shapes/draw/getPath.mjs

@@ -82,7 +82,7 @@ function getFreehandOptions(shapeProps, strokeWidth, forceComplete, forceSolid)
   return { ...solidSettings(strokeWidth), last };
 }
 function getPointsFromDrawSegment(segment, scaleX, scaleY, points = []) {
-  const _points = b64Vecs.decodePoints(segment.path);
+  const _points = b64Vecs.decodePoints(segment.path, segment.dim);
   if (scaleX !== 1 || scaleY !== 1) {
     for (const point of _points) {
       point.x *= scaleX;

package/dist-esm/lib/shapes/draw/getPath.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/draw/getPath.ts"],
-  "sourcesContent": ["import {\n\tEASINGS,\n\tPI,\n\tSIN,\n\tTLDefaultDashStyle,\n\tTLDrawShape,\n\tTLDrawShapeSegment,\n\tVec,\n\tb64Vecs,\n\tmodulate,\n} from '@tldraw/editor'\nimport { StrokeOptions } from '../shared/freehand/types'\n\nconst PEN_EASING = (t: number) => t * 0.65 + SIN((t * PI) / 2) * 0.35\n\nconst simulatePressureSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0.5,\n\t\tstreamline: modulate(strokeWidth, [9, 16], [0.64, 0.74], true), // 0.62 + ((1 + strokeWidth) / 8) * 0.06,\n\t\tsmoothing: 0.62,\n\t\teasing: EASINGS.easeOutSine,\n\t\tsimulatePressure: true,\n\t}\n}\n\nconst realPressureSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: 1 + strokeWidth * 1.2,\n\t\tthinning: 0.62,\n\t\tstreamline: 0.62,\n\t\tsmoothing: 0.62,\n\t\tsimulatePressure: false,\n\t\teasing: PEN_EASING,\n\t}\n}\n\nconst solidSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: modulate(strokeWidth, [9, 16], [0.64, 0.74], true), // 0.62 + ((1 + strokeWidth) / 8) * 0.06,\n\t\tsmoothing: 0.62,\n\t\tsimulatePressure: false,\n\t\teasing: EASINGS.linear,\n\t}\n}\n\nconst solidRealPressureSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: 0.62,\n\t\tsmoothing: 0.62,\n\t\tsimulatePressure: false,\n\t\teasing: EASINGS.linear,\n\t}\n}\n\nexport function getHighlightFreehandSettings({\n\tstrokeWidth,\n\tshowAsComplete,\n}: {\n\tstrokeWidth: number\n\tshowAsComplete: boolean\n}): StrokeOptions {\n\treturn {\n\t\tsize: 1 + strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: 0.5,\n\t\tsmoothing: 0.5,\n\t\tsimulatePressure: false,\n\t\teasing: EASINGS.easeOutSine,\n\t\tlast: showAsComplete,\n\t}\n}\n\nexport function getFreehandOptions(\n\tshapeProps: { dash: TLDefaultDashStyle; isPen: boolean; isComplete: boolean },\n\tstrokeWidth: number,\n\tforceComplete: boolean,\n\tforceSolid: boolean\n): StrokeOptions {\n\tconst last = shapeProps.isComplete || forceComplete\n\n\tif (forceSolid) {\n\t\tif (shapeProps.isPen) {\n\t\t\treturn { ...solidRealPressureSettings(strokeWidth), last }\n\t\t} else {\n\t\t\treturn { ...solidSettings(strokeWidth), last }\n\t\t}\n\t}\n\n\tif (shapeProps.dash === 'draw') {\n\t\tif (shapeProps.isPen) {\n\t\t\treturn { ...realPressureSettings(strokeWidth), last }\n\t\t} else {\n\t\t\treturn { ...simulatePressureSettings(strokeWidth), last }\n\t\t}\n\t}\n\n\treturn { ...solidSettings(strokeWidth), last }\n}\n\n/** @public */\nexport function getPointsFromDrawSegment(\n\tsegment: TLDrawShapeSegment,\n\tscaleX: number,\n\tscaleY: number,\n\tpoints: Vec[] = []\n) {\n\tconst _points = b64Vecs.decodePoints(segment.path)\n\n\t// Apply scale factors (used for lazy resize and flipping)\n\tif (scaleX !== 1 || scaleY !== 1) {\n\t\tfor (const point of _points) {\n\t\t\tpoint.x *= scaleX\n\t\t\tpoint.y *= scaleY\n\t\t}\n\t}\n\n\tif (segment.type === 'free' || _points.length < 2) {\n\t\tpoints.push(..._points.map(Vec.From))\n\t} else {\n\t\t// A B <interpolated points> D\n\t\tconst A = Vec.From(_points[0])\n\t\tconst D = Vec.From(_points[1])\n\t\tconst dist = Vec.Dist(D, A)\n\t\tif (dist === 0) {\n\t\t\tpoints.push(A)\n\t\t} else {\n\t\t\tconst uni = Vec.Tan(D, A)\n\t\t\tconst nudgeDist = Math.min(1, Math.floor(dist / 4))\n\t\t\tconst B = Vec.Add(A, Vec.Mul(uni, nudgeDist))\n\t\t\tconst C = Vec.Add(D, Vec.Mul(uni, -nudgeDist))\n\t\t\tconst interpolatedPointsCount = Math.max(4, Math.floor(dist / 16))\n\t\t\tpoints.push(A, ...Vec.PointsBetween(B, C, interpolatedPointsCount, EASINGS.easeInOutCubic), D)\n\t\t}\n\t}\n\n\treturn points\n}\n\n/** @public */\nexport function getPointsFromDrawSegments(segments: TLDrawShapeSegment[], scaleX = 1, scaleY = 1) {\n\tconst points: Vec[] = []\n\n\tfor (const segment of segments) {\n\t\tgetPointsFromDrawSegment(segment, scaleX, scaleY, points)\n\t}\n\n\treturn points\n}\n\nexport function getDrawShapeStrokeDashArray(\n\tshape: TLDrawShape,\n\tstrokeWidth: number,\n\tdotAdjustment: number\n) {\n\treturn {\n\t\tdraw: 'none',\n\t\tsolid: `none`,\n\t\tdotted: `${dotAdjustment} ${strokeWidth * 2}`,\n\t\tdashed: `${strokeWidth * 2} ${strokeWidth * 2}`,\n\t\tnone: `none`,\n\t}[shape.props.dash]\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tEASINGS,\n\tPI,\n\tSIN,\n\tTLDefaultDashStyle,\n\tTLDrawShape,\n\tTLDrawShapeSegment,\n\tVec,\n\tb64Vecs,\n\tmodulate,\n} from '@tldraw/editor'\nimport { StrokeOptions } from '../shared/freehand/types'\n\nconst PEN_EASING = (t: number) => t * 0.65 + SIN((t * PI) / 2) * 0.35\n\nconst simulatePressureSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0.5,\n\t\tstreamline: modulate(strokeWidth, [9, 16], [0.64, 0.74], true), // 0.62 + ((1 + strokeWidth) / 8) * 0.06,\n\t\tsmoothing: 0.62,\n\t\teasing: EASINGS.easeOutSine,\n\t\tsimulatePressure: true,\n\t}\n}\n\nconst realPressureSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: 1 + strokeWidth * 1.2,\n\t\tthinning: 0.62,\n\t\tstreamline: 0.62,\n\t\tsmoothing: 0.62,\n\t\tsimulatePressure: false,\n\t\teasing: PEN_EASING,\n\t}\n}\n\nconst solidSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: modulate(strokeWidth, [9, 16], [0.64, 0.74], true), // 0.62 + ((1 + strokeWidth) / 8) * 0.06,\n\t\tsmoothing: 0.62,\n\t\tsimulatePressure: false,\n\t\teasing: EASINGS.linear,\n\t}\n}\n\nconst solidRealPressureSettings = (strokeWidth: number): StrokeOptions => {\n\treturn {\n\t\tsize: strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: 0.62,\n\t\tsmoothing: 0.62,\n\t\tsimulatePressure: false,\n\t\teasing: EASINGS.linear,\n\t}\n}\n\nexport function getHighlightFreehandSettings({\n\tstrokeWidth,\n\tshowAsComplete,\n}: {\n\tstrokeWidth: number\n\tshowAsComplete: boolean\n}): StrokeOptions {\n\treturn {\n\t\tsize: 1 + strokeWidth,\n\t\tthinning: 0,\n\t\tstreamline: 0.5,\n\t\tsmoothing: 0.5,\n\t\tsimulatePressure: false,\n\t\teasing: EASINGS.easeOutSine,\n\t\tlast: showAsComplete,\n\t}\n}\n\nexport function getFreehandOptions(\n\tshapeProps: { dash: TLDefaultDashStyle; isPen: boolean; isComplete: boolean },\n\tstrokeWidth: number,\n\tforceComplete: boolean,\n\tforceSolid: boolean\n): StrokeOptions {\n\tconst last = shapeProps.isComplete || forceComplete\n\n\tif (forceSolid) {\n\t\tif (shapeProps.isPen) {\n\t\t\treturn { ...solidRealPressureSettings(strokeWidth), last }\n\t\t} else {\n\t\t\treturn { ...solidSettings(strokeWidth), last }\n\t\t}\n\t}\n\n\tif (shapeProps.dash === 'draw') {\n\t\tif (shapeProps.isPen) {\n\t\t\treturn { ...realPressureSettings(strokeWidth), last }\n\t\t} else {\n\t\t\treturn { ...simulatePressureSettings(strokeWidth), last }\n\t\t}\n\t}\n\n\treturn { ...solidSettings(strokeWidth), last }\n}\n\n/** @public */\nexport function getPointsFromDrawSegment(\n\tsegment: TLDrawShapeSegment,\n\tscaleX: number,\n\tscaleY: number,\n\tpoints: Vec[] = []\n) {\n\tconst _points = b64Vecs.decodePoints(segment.path, segment.dim)\n\n\t// Apply scale factors (used for lazy resize and flipping)\n\tif (scaleX !== 1 || scaleY !== 1) {\n\t\tfor (const point of _points) {\n\t\t\tpoint.x *= scaleX\n\t\t\tpoint.y *= scaleY\n\t\t}\n\t}\n\n\tif (segment.type === 'free' || _points.length < 2) {\n\t\tpoints.push(..._points.map(Vec.From))\n\t} else {\n\t\t// A B <interpolated points> D\n\t\tconst A = Vec.From(_points[0])\n\t\tconst D = Vec.From(_points[1])\n\t\tconst dist = Vec.Dist(D, A)\n\t\tif (dist === 0) {\n\t\t\tpoints.push(A)\n\t\t} else {\n\t\t\tconst uni = Vec.Tan(D, A)\n\t\t\tconst nudgeDist = Math.min(1, Math.floor(dist / 4))\n\t\t\tconst B = Vec.Add(A, Vec.Mul(uni, nudgeDist))\n\t\t\tconst C = Vec.Add(D, Vec.Mul(uni, -nudgeDist))\n\t\t\tconst interpolatedPointsCount = Math.max(4, Math.floor(dist / 16))\n\t\t\tpoints.push(A, ...Vec.PointsBetween(B, C, interpolatedPointsCount, EASINGS.easeInOutCubic), D)\n\t\t}\n\t}\n\n\treturn points\n}\n\n/** @public */\nexport function getPointsFromDrawSegments(segments: TLDrawShapeSegment[], scaleX = 1, scaleY = 1) {\n\tconst points: Vec[] = []\n\n\tfor (const segment of segments) {\n\t\tgetPointsFromDrawSegment(segment, scaleX, scaleY, points)\n\t}\n\n\treturn points\n}\n\nexport function getDrawShapeStrokeDashArray(\n\tshape: TLDrawShape,\n\tstrokeWidth: number,\n\tdotAdjustment: number\n) {\n\treturn {\n\t\tdraw: 'none',\n\t\tsolid: `none`,\n\t\tdotted: `${dotAdjustment} ${strokeWidth * 2}`,\n\t\tdashed: `${strokeWidth * 2} ${strokeWidth * 2}`,\n\t\tnone: `none`,\n\t}[shape.props.dash]\n}\n"],
+  "mappings": "AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAGP,MAAM,aAAa,CAAC,MAAc,IAAI,OAAO,IAAK,IAAI,KAAM,CAAC,IAAI;AAEjE,MAAM,2BAA2B,CAAC,gBAAuC;AACxE,SAAO;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY,SAAS,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,IAAI,GAAG,IAAI;AAAA;AAAA,IAC7D,WAAW;AAAA,IACX,QAAQ,QAAQ;AAAA,IAChB,kBAAkB;AAAA,EACnB;AACD;AAEA,MAAM,uBAAuB,CAAC,gBAAuC;AACpE,SAAO;AAAA,IACN,MAAM,IAAI,cAAc;AAAA,IACxB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,QAAQ;AAAA,EACT;AACD;AAEA,MAAM,gBAAgB,CAAC,gBAAuC;AAC7D,SAAO;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY,SAAS,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,IAAI,GAAG,IAAI;AAAA;AAAA,IAC7D,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,QAAQ,QAAQ;AAAA,EACjB;AACD;AAEA,MAAM,4BAA4B,CAAC,gBAAuC;AACzE,SAAO;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,QAAQ,QAAQ;AAAA,EACjB;AACD;AAEO,SAAS,6BAA6B;AAAA,EAC5C;AAAA,EACA;AACD,GAGkB;AACjB,SAAO;AAAA,IACN,MAAM,IAAI;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,QAAQ,QAAQ;AAAA,IAChB,MAAM;AAAA,EACP;AACD;AAEO,SAAS,mBACf,YACA,aACA,eACA,YACgB;AAChB,QAAM,OAAO,WAAW,cAAc;AAEtC,MAAI,YAAY;AACf,QAAI,WAAW,OAAO;AACrB,aAAO,EAAE,GAAG,0BAA0B,WAAW,GAAG,KAAK;AAAA,IAC1D,OAAO;AACN,aAAO,EAAE,GAAG,cAAc,WAAW,GAAG,KAAK;AAAA,IAC9C;AAAA,EACD;AAEA,MAAI,WAAW,SAAS,QAAQ;AAC/B,QAAI,WAAW,OAAO;AACrB,aAAO,EAAE,GAAG,qBAAqB,WAAW,GAAG,KAAK;AAAA,IACrD,OAAO;AACN,aAAO,EAAE,GAAG,yBAAyB,WAAW,GAAG,KAAK;AAAA,IACzD;AAAA,EACD;AAEA,SAAO,EAAE,GAAG,cAAc,WAAW,GAAG,KAAK;AAC9C;AAGO,SAAS,yBACf,SACA,QACA,QACA,SAAgB,CAAC,GAChB;AACD,QAAM,UAAU,QAAQ,aAAa,QAAQ,MAAM,QAAQ,GAAG;AAG9D,MAAI,WAAW,KAAK,WAAW,GAAG;AACjC,eAAW,SAAS,SAAS;AAC5B,YAAM,KAAK;AACX,YAAM,KAAK;AAAA,IACZ;AAAA,EACD;AAEA,MAAI,QAAQ,SAAS,UAAU,QAAQ,SAAS,GAAG;AAClD,WAAO,KAAK,GAAG,QAAQ,IAAI,IAAI,IAAI,CAAC;AAAA,EACrC,OAAO;AAEN,UAAM,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC;AAC7B,UAAM,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC;AAC7B,UAAM,OAAO,IAAI,KAAK,GAAG,CAAC;AAC1B,QAAI,SAAS,GAAG;AACf,aAAO,KAAK,CAAC;AAAA,IACd,OAAO;AACN,YAAM,MAAM,IAAI,IAAI,GAAG,CAAC;AACxB,YAAM,YAAY,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC,CAAC;AAClD,YAAM,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,SAAS,CAAC;AAC5C,YAAM,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK,CAAC,SAAS,CAAC;AAC7C,YAAM,0BAA0B,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,EAAE,CAAC;AACjE,aAAO,KAAK,GAAG,GAAG,IAAI,cAAc,GAAG,GAAG,yBAAyB,QAAQ,cAAc,GAAG,CAAC;AAAA,IAC9F;AAAA,EACD;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,UAAgC,SAAS,GAAG,SAAS,GAAG;AACjG,QAAM,SAAgB,CAAC;AAEvB,aAAW,WAAW,UAAU;AAC/B,6BAAyB,SAAS,QAAQ,QAAQ,MAAM;AAAA,EACzD;AAEA,SAAO;AACR;AAEO,SAAS,4BACf,OACA,aACA,eACC;AACD,SAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ,GAAG,aAAa,IAAI,cAAc,CAAC;AAAA,IAC3C,QAAQ,GAAG,cAAc,CAAC,IAAI,cAAc,CAAC;AAAA,IAC7C,MAAM;AAAA,EACP,EAAE,MAAM,MAAM,IAAI;AACnB;",
   "names": []
 }