@canvas-harness/core 0.1.13 → 0.1.15

package/dist/index.cjs

@@ -4344,8 +4344,10 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   if (strokeVisible && !opts?.skipStroke) {
     ctx.strokeStyle = stroke;
     ctx.lineWidth = Math.max(strokeWidth, 1 / scale);
-    ctx.setLineDash(dashPatternFor(style?.strokeStyle, strokeWidth));
+    const dash = dashPatternFor(style?.strokeStyle, strokeWidth);
+    ctx.setLineDash(dash);
     ctx.stroke();
+    if (dash.length > 0) ctx.setLineDash([]);
   }
   if (needsScope) ctx.restore();
 };
@@ -5519,6 +5521,7 @@ var createRenderer = (opts) => {
     stats: () => loop.stats(),
     lastDrawCount: () => lastDrawn,
     getOverlaySet: () => [...overlaySet],
+    getAssetCache: () => assetCache,
     dispose() {
       loop.stop();
       unsubChange();
@@ -6114,9 +6117,14 @@ var makeContext = (cssW, cssH, scale, opts) => {
 };
 var paintScene = (ctx, store, nodes, scale, opts, edges) => {
   const theme = opts.theme;
+  const assetCache = opts.assetCache;
   for (const node of nodes) {
     drawWithNodeTransform(ctx, node, () => {
       if (isDrawablePrimitive(node.type)) drawShape(ctx, node, scale, theme);
+      if (assetCache) {
+        if (node.type === "image") paintImageNode(ctx, node, assetCache, theme);
+        else if (node.type === "icon") paintIconNode(ctx, node, assetCache, scale, theme);
+      }
       paintContent(ctx, node);
     });
   }
@@ -6228,10 +6236,30 @@ var renderNodeSvg = (node) => {
   const strokeWidth = node.style?.strokeWidth ?? 1.5;
   const opacity = node.style?.opacity ?? 1;
   const rotate = node.angle !== 0 ? ` transform="rotate(${node.angle * 180 / Math.PI} ${node.x + node.w / 2} ${node.y + node.h / 2})"` : "";
-  const shape = renderShapeSvg(node, fill, stroke, strokeWidth, opacity);
   const text = renderTextSvg(node);
+  if (node.type === "image") {
+    return `<g${rotate}>${renderImageNodeSvg(node, opacity)}${text}</g>`;
+  }
+  if (node.type === "icon") {
+    return `<g${rotate}>${renderIconNodeSvg(node, opacity)}${text}</g>`;
+  }
+  const shape = renderShapeSvg(node, fill, stroke, strokeWidth, opacity);
   return `<g${rotate}>${shape}${text}</g>`;
 };
+var renderImageNodeSvg = (node, opacity) => {
+  const data = node.data;
+  if (!data?.src) return "";
+  return `<image href="${escapeAttr(data.src)}" x="${node.x}" y="${node.y}" width="${node.w}" height="${node.h}" preserveAspectRatio="none" opacity="${opacity}" />`;
+};
+var renderIconNodeSvg = (node, opacity) => {
+  const data = node.data;
+  if (!data?.src) return "";
+  const colored = node.style?.iconColor ? applySvgColor(data.src, node.style.iconColor) : data.src;
+  const dim = extractSvgDimensions(colored);
+  const sx = node.w / dim.w;
+  const sy = node.h / dim.h;
+  return `<g transform="translate(${node.x} ${node.y}) scale(${sx} ${sy})" opacity="${opacity}">${colored}</g>`;
+};
 var renderShapeSvg = (node, fill, stroke, strokeWidth, opacity) => {
   const attrs = (extra) => `fill="${escapeAttr(fill)}" stroke="${escapeAttr(stroke)}" stroke-width="${strokeWidth}" opacity="${opacity}"${extra}`;
   switch (node.type) {
@@ -6653,6 +6681,7 @@ exports.clipSamples = clipSamples;
 exports.computeAutoFitHeight = computeAutoFitHeight;
 exports.computeEdgeGeometry = computeEdgeGeometry;
 exports.copy = copy;
+exports.createAssetCache = createAssetCache;
 exports.createCanvasStore = createCanvasStore;
 exports.createDefaultTextareaEditor = createDefaultTextareaEditor;
 exports.createFrameLoop = createFrameLoop;
@@ -6729,6 +6758,8 @@ exports.onMathJaxReady = onMathJaxReady;
 exports.opSchemas = opSchemas;
 exports.opSchemasAsAnthropicTools = opSchemasAsAnthropicTools;
 exports.paintBackground = paintBackground;
+exports.paintIconNode = paintIconNode;
+exports.paintImageNode = paintImageNode;
 exports.panByScreen = panByScreen;
 exports.paste = paste;
 exports.pointInNode = pointInNode;