decantr 0.9.0

package/src/chart/renderers/canvas.js

@@ -0,0 +1,179 @@
+/**
+ * Canvas 2D Renderer — renders scene graph to canvas.
+ * Used for datasets 3K-50K elements. DPI-aware.
+ * @module renderers/canvas
+ */
+
+import { arcToPath } from '../_scene.js';
+
+/**
+ * Render scene graph to Canvas 2D.
+ * @param {Object} sceneNode
+ * @returns {HTMLCanvasElement}
+ */
+export function renderCanvas(sceneNode) {
+  if (!sceneNode || sceneNode.type !== 'scene') {
+    const c = document.createElement('canvas');
+    c.width = 100; c.height = 100;
+    return c;
+  }
+
+  const { width, height, children } = sceneNode;
+  const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+  const canvas = document.createElement('canvas');
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  canvas.className = 'd-chart-svg'; // reuse class for sizing
+
+  const ctx = canvas.getContext('2d');
+  ctx.scale(dpr, dpr);
+
+  // Resolve CSS variables for colors
+  const colorCache = new Map();
+  const resolveColor = (color) => {
+    if (!color || color === 'none') return null;
+    if (color.startsWith('var(')) {
+      if (colorCache.has(color)) return colorCache.get(color);
+      const prop = color.match(/var\((--[^,)]+)/)?.[1];
+      if (prop && typeof getComputedStyle === 'function') {
+        const resolved = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+        if (resolved) { colorCache.set(color, resolved); return resolved; }
+      }
+      const fallback = color.match(/,\s*([^)]+)\)/)?.[1];
+      return fallback || '#666';
+    }
+    return color;
+  };
+
+  for (const child of children) {
+    renderNode(ctx, child, resolveColor);
+  }
+
+  return canvas;
+}
+
+function renderNode(ctx, node, resolveColor) {
+  if (!node) return;
+
+  ctx.save();
+
+  if (node.opacity != null) ctx.globalAlpha = node.opacity;
+
+  switch (node.type) {
+    case 'group': renderGroup(ctx, node, resolveColor); break;
+    case 'path': renderPath(ctx, node, resolveColor); break;
+    case 'rect': renderRect(ctx, node, resolveColor); break;
+    case 'circle': renderCircle(ctx, node, resolveColor); break;
+    case 'text': renderText(ctx, node, resolveColor); break;
+    case 'line': renderLine(ctx, node, resolveColor); break;
+    case 'arc': renderArc(ctx, node, resolveColor); break;
+    case 'polygon': renderPolygon(ctx, node, resolveColor); break;
+  }
+
+  ctx.restore();
+}
+
+function renderGroup(ctx, node, resolveColor) {
+  if (node.transform) {
+    const match = node.transform.match(/translate\(([^,]+),([^)]+)\)/);
+    if (match) ctx.translate(+match[1], +match[2]);
+  }
+  if (node.children) {
+    for (const child of node.children) renderNode(ctx, child, resolveColor);
+  }
+}
+
+function renderPath(ctx, node, resolveColor) {
+  if (!node.d) return;
+  const p = new Path2D(node.d);
+  const fill = resolveColor(node.fill);
+  const stroke = resolveColor(node.stroke);
+
+  if (fill) { ctx.fillStyle = fill; ctx.fill(p); }
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = node.strokeWidth || 1;
+    if (node.strokeLinecap) ctx.lineCap = node.strokeLinecap;
+    if (node.strokeLinejoin) ctx.lineJoin = node.strokeLinejoin;
+    if (node.strokeDash) ctx.setLineDash(node.strokeDash.split(',').map(Number));
+    ctx.stroke(p);
+    ctx.setLineDash([]);
+  }
+}
+
+function renderRect(ctx, node, resolveColor) {
+  const { x, y, w, h, rx } = node;
+  const fill = resolveColor(node.fill);
+  const stroke = resolveColor(node.stroke);
+
+  if (rx && rx > 0) {
+    const r = Math.min(rx, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+    if (fill) { ctx.fillStyle = fill; ctx.fill(); }
+    if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = node.strokeWidth || 1; ctx.stroke(); }
+  } else {
+    if (fill) { ctx.fillStyle = fill; ctx.fillRect(x, y, Math.max(0, w), Math.max(0, h)); }
+    if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = node.strokeWidth || 1; ctx.strokeRect(x, y, Math.max(0, w), Math.max(0, h)); }
+  }
+}
+
+function renderCircle(ctx, node, resolveColor) {
+  ctx.beginPath();
+  ctx.arc(node.cx, node.cy, node.r, 0, Math.PI * 2);
+  const fill = resolveColor(node.fill);
+  const stroke = resolveColor(node.stroke);
+  if (fill) { ctx.fillStyle = fill; ctx.fill(); }
+  if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = node.strokeWidth || 1; ctx.stroke(); }
+}
+
+function renderText(ctx, node, resolveColor) {
+  const fill = resolveColor(node.fill) || resolveColor('var(--d-muted)') || '#666';
+  ctx.fillStyle = fill;
+  ctx.font = `${node.fontWeight || ''} ${node.fontSize || '10px'} ${getComputedStyle(document.documentElement).getPropertyValue('--d-font').trim() || 'sans-serif'}`.trim();
+  ctx.textAlign = node.anchor === 'middle' ? 'center' : (node.anchor === 'end' ? 'right' : 'left');
+  ctx.textBaseline = node.baseline === 'middle' ? 'middle' : 'alphabetic';
+  ctx.fillText(node.content || '', node.x, node.y);
+}
+
+function renderLine(ctx, node, resolveColor) {
+  const stroke = resolveColor(node.stroke) || resolveColor('var(--d-border)') || '#ccc';
+  ctx.beginPath();
+  ctx.moveTo(node.x1, node.y1);
+  ctx.lineTo(node.x2, node.y2);
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = node.strokeWidth || 1;
+  if (node.strokeDash) ctx.setLineDash(node.strokeDash.split(',').map(Number));
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function renderArc(ctx, node, resolveColor) {
+  const d = arcToPath(node.cx, node.cy, node.outerR, node.innerR || 0, node.startAngle, node.endAngle);
+  const p = new Path2D(d);
+  const fill = resolveColor(node.fill);
+  if (fill) { ctx.fillStyle = fill; ctx.fill(p); }
+  if (node.stroke) { ctx.strokeStyle = resolveColor(node.stroke); ctx.lineWidth = node.strokeWidth || 1; ctx.stroke(p); }
+}
+
+function renderPolygon(ctx, node, resolveColor) {
+  if (!node.points || !node.points.length) return;
+  ctx.beginPath();
+  ctx.moveTo(node.points[0].x, node.points[0].y);
+  for (let i = 1; i < node.points.length; i++) ctx.lineTo(node.points[i].x, node.points[i].y);
+  ctx.closePath();
+  const fill = resolveColor(node.fill);
+  if (fill) { ctx.fillStyle = fill; ctx.fill(); }
+  if (node.stroke) { ctx.strokeStyle = resolveColor(node.stroke); ctx.lineWidth = node.strokeWidth || 1; ctx.stroke(); }
+}

package/src/chart/renderers/svg.js

@@ -0,0 +1,256 @@
+/**
+ * SVG Renderer — renders scene graph nodes to SVG DOM.
+ * Default renderer for datasets < 3K elements.
+ * All colors reference CSS custom properties for theme integration.
+ * @module renderers/svg
+ */
+
+import { arcToPath } from '../_scene.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Create an SVG element with attributes and children.
+ * @param {string} tag
+ * @param {Object} attrs
+ * @param {...(SVGElement|string)} children
+ * @returns {SVGElement}
+ */
+function svgEl(tag, attrs, ...children) {
+  const el = document.createElementNS(SVG_NS, tag);
+  if (attrs) {
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v !== undefined && v !== null && v !== false) el.setAttribute(k, String(v));
+    }
+  }
+  for (const c of children) {
+    if (typeof c === 'string') el.appendChild(document.createTextNode(c));
+    else if (c) el.appendChild(c);
+  }
+  return el;
+}
+
+/**
+ * Render a scene graph to an SVG element.
+ * @param {Object} sceneNode — root scene node
+ * @returns {SVGElement}
+ */
+export function renderSVG(sceneNode) {
+  if (!sceneNode || sceneNode.type !== 'scene') {
+    return svgEl('svg', { width: 100, height: 100 });
+  }
+
+  const { width, height, children } = sceneNode;
+  const root = svgEl('svg', {
+    class: 'd-chart-svg',
+    viewBox: `0 0 ${width} ${height}`,
+    width, height
+  });
+
+  // Collect gradient nodes from scene graph and render <defs>
+  const gradients = collectGradients(children);
+  if (gradients.length) {
+    const defs = svgEl('defs', null);
+    for (const g of gradients) defs.appendChild(renderGradient(g));
+    root.appendChild(defs);
+  }
+
+  for (const child of children) {
+    const el = renderNode(child);
+    if (el) root.appendChild(el);
+  }
+
+  return root;
+}
+
+/**
+ * Render a single scene node to SVG element.
+ * @param {Object} node
+ * @returns {SVGElement|null}
+ */
+function renderNode(node) {
+  if (!node) return null;
+
+  switch (node.type) {
+    case 'group': return renderGroup(node);
+    case 'path': return renderPath(node);
+    case 'rect': return renderRect(node);
+    case 'circle': return renderCircle(node);
+    case 'text': return renderText(node);
+    case 'line': return renderLine(node);
+    case 'arc': return renderArc(node);
+    case 'polygon': return renderPolygon(node);
+    case 'image': return renderImage(node);
+    case 'gradient': return null; // handled in <defs>
+    default: return null;
+  }
+}
+
+function renderGroup(node) {
+  const attrs = {};
+  if (node.transform) attrs.transform = node.transform;
+  if (node.class) attrs.class = node.class;
+  if (node.clip) attrs['clip-path'] = node.clip;
+  if (node.opacity != null) attrs.opacity = node.opacity;
+
+  const g = svgEl('g', attrs);
+  if (node.children) {
+    for (const child of node.children) {
+      const el = renderNode(child);
+      if (el) g.appendChild(el);
+    }
+  }
+  return g;
+}
+
+function renderPath(node) {
+  const attrs = { d: node.d };
+  if (node.fill) attrs.fill = node.fill; else attrs.fill = 'none';
+  if (node.stroke) attrs.stroke = node.stroke;
+  if (node.strokeWidth) attrs['stroke-width'] = node.strokeWidth;
+  if (node.strokeDash) attrs['stroke-dasharray'] = node.strokeDash;
+  if (node.strokeLinecap) attrs['stroke-linecap'] = node.strokeLinecap;
+  if (node.strokeLinejoin) attrs['stroke-linejoin'] = node.strokeLinejoin;
+  if (node.class) attrs.class = node.class;
+  if (node.opacity != null) attrs.opacity = node.opacity;
+  applyData(attrs, node);
+  return svgEl('path', attrs);
+}
+
+function renderRect(node) {
+  if (isNaN(node.x) || isNaN(node.y)) return null;
+  const attrs = {
+    x: node.x, y: node.y,
+    width: Math.max(0, node.w || 0),
+    height: Math.max(0, node.h || 0)
+  };
+  if (node.rx) attrs.rx = node.rx;
+  if (node.ry) attrs.ry = node.ry;
+  if (node.fill) attrs.fill = node.fill;
+  if (node.stroke) attrs.stroke = node.stroke;
+  if (node.strokeWidth) attrs['stroke-width'] = node.strokeWidth;
+  if (node.class) attrs.class = node.class;
+  if (node.opacity != null) attrs.opacity = node.opacity;
+  applyData(attrs, node);
+  return svgEl('rect', attrs);
+}
+
+function renderCircle(node) {
+  const attrs = { cx: node.cx, cy: node.cy, r: node.r };
+  if (node.fill) attrs.fill = node.fill;
+  if (node.stroke) attrs.stroke = node.stroke;
+  if (node.strokeWidth) attrs['stroke-width'] = node.strokeWidth;
+  if (node.class) attrs.class = node.class;
+  if (node.opacity != null) attrs.opacity = node.opacity;
+  applyData(attrs, node);
+  return svgEl('circle', attrs);
+}
+
+function renderText(node) {
+  if (isNaN(node.x) || isNaN(node.y)) return null;
+  const attrs = { x: node.x, y: node.y };
+  if (node.anchor) attrs['text-anchor'] = node.anchor;
+  if (node.baseline) attrs['dominant-baseline'] = node.baseline;
+  if (node.fill) attrs.fill = node.fill;
+  if (node.class) attrs.class = node.class;
+  if (node.fontSize) attrs['font-size'] = node.fontSize;
+  if (node.fontWeight) attrs['font-weight'] = node.fontWeight;
+  if (node.rotate) attrs.transform = `rotate(${node.rotate},${node.x},${node.y})`;
+  return svgEl('text', attrs, node.content || '');
+}
+
+function renderLine(node) {
+  const attrs = {
+    x1: node.x1, y1: node.y1,
+    x2: node.x2, y2: node.y2
+  };
+  if (node.stroke) attrs.stroke = node.stroke;
+  if (node.strokeWidth) attrs['stroke-width'] = node.strokeWidth;
+  if (node.strokeDash) attrs['stroke-dasharray'] = node.strokeDash;
+  if (node.class) attrs.class = node.class;
+  return svgEl('line', attrs);
+}
+
+function renderArc(node) {
+  const d = arcToPath(node.cx, node.cy, node.outerR, node.innerR || 0, node.startAngle, node.endAngle);
+  const attrs = { d };
+  if (node.fill) attrs.fill = node.fill;
+  if (node.stroke) attrs.stroke = node.stroke;
+  if (node.class) attrs.class = node.class;
+  if (node.opacity != null) attrs.opacity = node.opacity;
+  applyData(attrs, node);
+
+  // Pie slices get accessibility attrs
+  if (node.data) {
+    if (node.data.label) attrs['aria-label'] = node.data.ariaLabel || `${node.data.label}: ${node.data.value}`;
+    attrs.tabindex = '0';
+    attrs.role = 'listitem';
+  }
+
+  return svgEl('path', attrs);
+}
+
+function renderPolygon(node) {
+  if (!node.points || !node.points.length) return null;
+  const pointsStr = node.points.map(p => `${p.x},${p.y}`).join(' ');
+  const attrs = { points: pointsStr };
+  if (node.fill) attrs.fill = node.fill;
+  if (node.stroke) attrs.stroke = node.stroke;
+  if (node.strokeWidth) attrs['stroke-width'] = node.strokeWidth;
+  if (node.class) attrs.class = node.class;
+  if (node.opacity != null) attrs.opacity = node.opacity;
+  applyData(attrs, node);
+  return svgEl('polygon', attrs);
+}
+
+function renderImage(node) {
+  const attrs = {
+    x: node.x, y: node.y,
+    width: node.w, height: node.h,
+    href: node.href
+  };
+  if (node.class) attrs.class = node.class;
+  return svgEl('image', attrs);
+}
+
+// --- Gradient helpers ---
+
+function collectGradients(children) {
+  const result = [];
+  for (const child of children) {
+    if (child && child.type === 'gradient') result.push(child);
+    if (child && child.children) result.push(...collectGradients(child.children));
+  }
+  return result;
+}
+
+function renderGradient(node) {
+  const attrs = { id: node.id };
+  if (node.x1 != null) attrs.x1 = node.x1;
+  if (node.y1 != null) attrs.y1 = node.y1;
+  if (node.x2 != null) attrs.x2 = node.x2;
+  if (node.y2 != null) attrs.y2 = node.y2;
+  attrs.gradientUnits = 'userSpaceOnUse';
+
+  const grad = svgEl('linearGradient', attrs);
+  if (node.stops) {
+    for (const s of node.stops) {
+      const stopAttrs = { offset: s.offset };
+      if (s.color) stopAttrs['stop-color'] = s.color;
+      if (s.opacity != null) stopAttrs['stop-opacity'] = s.opacity;
+      grad.appendChild(svgEl('stop', stopAttrs));
+    }
+  }
+  return grad;
+}
+
+// --- Helpers ---
+
+function applyData(attrs, node) {
+  if (node.data) {
+    if (node.data.series) attrs['data-series'] = node.data.series;
+    if (node.data.label) attrs['data-label'] = node.data.label;
+    if (node.data.value != null) attrs['data-value'] = node.data.value;
+  }
+  if (node.key) attrs['data-key'] = node.key;
+}