ggaction 0.0.24 → 0.0.26

package/src/renderers/svgSerialization.js

@@ -1,643 +1 @@
-import { collectTransitionGraphics } from "./transitionScene.js";
-import { isOwned } from "../core/immutable.js";
-import { validateGraphicClip } from "../grammar/schemas/graphicClip.js";
-import {
-  requireSingleOrderedGraphicByType,
-  walkGraphicTreeEvents
-} from "../grammar/schemas/graphicTree.js";
-import {
-  validateConcreteGraphicProperties,
-  validateConcreteGraphicValue
-} from "../grammar/schemas/concreteGraphic.js";
-import { resolvePathCommandBounds } from
-  "../grammar/schemas/graphicBounds.js";
-import {
-  isLinearGradientPaint,
-  resolveLinearGradientCoordinates,
-  validateFillPaint
-} from "../grammar/paint.js";
-import {
-  requireFiniteProperty,
-  requireStringProperty
-} from "./canvas/validation.js";
-import { normalizeRendererFontWeight } from "./text.js";
-import { validateRendererOptions } from "./options.js";
-
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-const SVG_OPTIONS = new Set(["title", "description", "resourceNamespace"]);
-const RESOURCE_NAMESPACE = /^[A-Za-z][A-Za-z0-9_-]*$/;
-const TEXT_ANCHORS = Object.freeze({
-  left: "start",
-  start: "start",
-  center: "middle",
-  right: "end",
-  end: "end"
-});
-const DOMINANT_BASELINES = Object.freeze({
-  top: "text-before-edge",
-  hanging: "hanging",
-  middle: "middle",
-  alphabetic: "alphabetic",
-  ideographic: "ideographic",
-  bottom: "text-after-edge"
-});
-
-const namespaceByGraphic = new WeakMap();
-
-function resourceNamespace(graphicSpec) {
-  const cached = namespaceByGraphic.get(graphicSpec);
-  if (cached !== undefined) return cached;
-  const serialized = JSON.stringify(graphicSpec);
-  let hash = 0xcbf29ce484222325n;
-  for (let index = 0; index < serialized.length; index += 1) {
-    hash ^= BigInt(serialized.charCodeAt(index));
-    hash = BigInt.asUintN(64, hash * 0x100000001b3n);
-  }
-  const namespace = hash.toString(36);
-  if (isOwned(graphicSpec)) namespaceByGraphic.set(graphicSpec, namespace);
-  return namespace;
-}
-
-function escapeText(value) {
-  for (const character of value) {
-    const point = character.codePointAt(0);
-    if (!(
-      point === 9 || point === 10 || point === 13 ||
-      (point >= 0x20 && point <= 0xd7ff) ||
-      (point >= 0xe000 && point <= 0xfffd) ||
-      (point >= 0x10000 && point <= 0x10ffff)
-    )) {
-      throw new TypeError("SVG output requires XML 1.0-compatible strings.");
-    }
-  }
-  return value
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;");
-}
-
-function escapeAttribute(value) {
-  return escapeText(String(value))
-    .replaceAll("\"", "&quot;")
-    .replaceAll("'", "&apos;");
-}
-
-function formatNumber(value) {
-  if (!Number.isFinite(value)) {
-    throw new TypeError("SVG renderer requires finite numeric output.");
-  }
-  return Object.is(value, -0) ? "0" : String(value);
-}
-
-function attributes(entries) {
-  return entries
-    .filter(([, value]) => value !== undefined)
-    .map(([name, value]) => `${name}="${escapeAttribute(value)}"`)
-    .join(" ");
-}
-
-function element(name, entries, content) {
-  const serialized = attributes(entries);
-  const opening = serialized.length === 0 ? `<${name}` : `<${name} ${serialized}`;
-  if (content === undefined) return `${opening}/>`;
-  return `${opening}>${content}</${name}>`;
-}
-
-function requireOpacity(properties, graphicId) {
-  const opacity = properties.opacity ?? 1;
-  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 1) {
-    throw new Error(`Graphic "${graphicId}" requires opacity from 0 to 1.`);
-  }
-  return opacity;
-}
-
-function requireStrokeDash(properties, graphicId) {
-  const strokeDash = properties.strokeDash ?? [];
-  if (
-    !Array.isArray(strokeDash) ||
-    !strokeDash.every(value => Number.isFinite(value) && value >= 0)
-  ) {
-    throw new Error(
-      `Graphic "${graphicId}" requires a non-negative finite strokeDash array.`
-    );
-  }
-  return strokeDash;
-}
-
-function strokeDetailAttributes(properties, strokeWidth) {
-  if (typeof properties.stroke !== "string" || !(strokeWidth > 0)) return [];
-  return [
-    ["stroke-linecap", Object.hasOwn(properties, "lineCap")
-      ? properties.lineCap
-      : undefined],
-    ["stroke-linejoin", Object.hasOwn(properties, "lineJoin")
-      ? properties.lineJoin
-      : undefined],
-    ["stroke-miterlimit", Object.hasOwn(properties, "miterLimit")
-      ? formatNumber(properties.miterLimit)
-      : undefined]
-  ];
-}
-
-function requireCanvasGeometry(id, canvas, { nested }) {
-  const properties = canvas.properties ?? {};
-  const width = requireFiniteProperty(properties, "width", id);
-  const height = requireFiniteProperty(properties, "height", id);
-  if (width < 0 || height < 0) {
-    const label = nested ? `Nested Canvas "${id}"` : "Canvas";
-    throw new Error(`${label} width and height must not be negative.`);
-  }
-  return {
-    ...(nested ? {
-      x: requireFiniteProperty(properties, "x", id),
-      y: requireFiniteProperty(properties, "y", id)
-    } : {}),
-    width,
-    height
-  };
-}
-
-function requireCanvasBackground(id, canvas) {
-  const background = canvas.properties?.background;
-  if (background === undefined) return undefined;
-  if (typeof background !== "string") {
-    throw new Error(
-      `Graphic "${id}" requires a string background property.`
-    );
-  }
-  return background;
-}
-
-function addLinearGradient(state, fill, bounds, graphicId) {
-  const coordinates = resolveLinearGradientCoordinates(fill, bounds);
-  const id =
-    `ggaction-gradient-${state.resourceNamespace}-${state.gradientCount}`;
-  state.gradientCount += 1;
-  const stops = fill.stops.map(stop => element("stop", [
-    ["offset", formatNumber(stop.offset)],
-    ["stop-color", stop.color]
-  ])).join("");
-  state.definitions.push(element("linearGradient", [
-    ["id", id],
-    ["gradientUnits", "userSpaceOnUse"],
-    ["x1", formatNumber(coordinates.from.x)],
-    ["y1", formatNumber(coordinates.from.y)],
-    ["x2", formatNumber(coordinates.to.x)],
-    ["y2", formatNumber(coordinates.to.y)]
-  ], stops));
-  return `url(#${id})`;
-}
-
-function serializeFill(state, fill, bounds, graphicId) {
-  validateFillPaint(fill, `${graphicId}.fill`);
-  if (!isLinearGradientPaint(fill)) return fill;
-  return addLinearGradient(state, fill, bounds, graphicId);
-}
-
-function serializeCircle(state, graphicId, properties) {
-  validateConcreteGraphicProperties("circle", properties);
-  const x = requireFiniteProperty(properties, "x", graphicId);
-  const y = requireFiniteProperty(properties, "y", graphicId);
-  const radius = requireFiniteProperty(properties, "radius", graphicId);
-  if (radius < 0) {
-    throw new Error(`Graphic "${graphicId}" requires a non-negative radius.`);
-  }
-  if (typeof properties.fill !== "string") {
-    throw new Error(`Graphic "${graphicId}" requires a string fill property.`);
-  }
-  let strokeWidth;
-  if (properties.stroke !== undefined) {
-    if (typeof properties.stroke !== "string") {
-      throw new Error(`Graphic "${graphicId}" requires a string stroke property.`);
-    }
-    strokeWidth = requireFiniteProperty(properties, "strokeWidth", graphicId);
-    if (strokeWidth < 0) {
-      throw new Error(
-        `Graphic "${graphicId}" requires a non-negative strokeWidth.`
-      );
-    }
-  }
-  return element("circle", [
-    ["cx", formatNumber(x)],
-    ["cy", formatNumber(y)],
-    ["r", formatNumber(radius)],
-    ["fill", properties.fill],
-    ["stroke", properties.stroke],
-    ["stroke-width", strokeWidth === undefined
-      ? undefined
-      : formatNumber(strokeWidth)],
-    ...strokeDetailAttributes(properties, strokeWidth),
-    ["opacity", formatNumber(requireOpacity(properties, graphicId))]
-  ]);
-}
-
-function serializeRect(state, graphicId, properties) {
-  validateConcreteGraphicProperties("rect", properties);
-  const x = requireFiniteProperty(properties, "x", graphicId);
-  const y = requireFiniteProperty(properties, "y", graphicId);
-  const width = requireFiniteProperty(properties, "width", graphicId);
-  const height = requireFiniteProperty(properties, "height", graphicId);
-  const strokeWidth = requireFiniteProperty(
-    properties,
-    "strokeWidth",
-    graphicId
-  );
-  if (width < 0 || height < 0 || strokeWidth < 0) {
-    throw new Error(
-      `Graphic "${graphicId}" requires non-negative rect dimensions and strokeWidth.`
-    );
-  }
-  if (properties.fill === undefined) {
-    throw new Error(`Graphic "${graphicId}" requires a fill property.`);
-  }
-  if (typeof properties.stroke !== "string") {
-    throw new Error(`Graphic "${graphicId}" requires a string stroke property.`);
-  }
-  const fill = serializeFill(state, properties.fill, {
-    left: x,
-    right: x + width,
-    top: y,
-    bottom: y + height
-  }, graphicId);
-  return element("rect", [
-    ["x", formatNumber(x)],
-    ["y", formatNumber(y)],
-    ["width", formatNumber(width)],
-    ["height", formatNumber(height)],
-    ["fill", fill],
-    ["stroke", properties.stroke],
-    ["stroke-width", formatNumber(strokeWidth)],
-    ...strokeDetailAttributes(properties, strokeWidth),
-    ["opacity", formatNumber(requireOpacity(properties, graphicId))],
-    ["style", properties.blend === "difference" ? "mix-blend-mode:difference" : undefined]
-  ]);
-}
-
-function serializeLine(state, graphicId, properties) {
-  validateConcreteGraphicProperties("line", properties);
-  const strokeWidth = requireFiniteProperty(
-    properties,
-    "strokeWidth",
-    graphicId
-  );
-  if (strokeWidth < 0) {
-    throw new Error(
-      `Graphic "${graphicId}" requires a non-negative strokeWidth.`
-    );
-  }
-  if (typeof properties.stroke !== "string") {
-    throw new Error(`Graphic "${graphicId}" requires a string stroke property.`);
-  }
-  const strokeDash = requireStrokeDash(properties, graphicId);
-  return element("line", [
-    ["x1", formatNumber(requireFiniteProperty(properties, "x1", graphicId))],
-    ["y1", formatNumber(requireFiniteProperty(properties, "y1", graphicId))],
-    ["x2", formatNumber(requireFiniteProperty(properties, "x2", graphicId))],
-    ["y2", formatNumber(requireFiniteProperty(properties, "y2", graphicId))],
-    ["fill", "none"],
-    ["stroke", properties.stroke],
-    ["stroke-width", formatNumber(strokeWidth)],
-    ...strokeDetailAttributes(properties, strokeWidth),
-    ["stroke-dasharray", strokeDash.length === 0
-      ? undefined
-      : strokeDash.map(formatNumber).join(" ")],
-    ["opacity", formatNumber(requireOpacity(properties, graphicId))]
-  ]);
-}
-
-function serializePathData(commands) {
-  return commands.map(command => {
-    if (command.op === "M" || command.op === "L") {
-      return `${command.op}${formatNumber(command.x)} ${formatNumber(command.y)}`;
-    }
-    if (command.op === "C") {
-      return `C${formatNumber(command.x1)} ${formatNumber(command.y1)} ` +
-        `${formatNumber(command.x2)} ${formatNumber(command.y2)} ` +
-        `${formatNumber(command.x)} ${formatNumber(command.y)}`;
-    }
-    return "Z";
-  }).join(" ");
-}
-
-function serializePath(state, graphicId, properties) {
-  validateConcreteGraphicProperties("path", properties);
-  const commands = properties.commands;
-  if (!Array.isArray(commands)) {
-    throw new Error(
-      `Graphic "${graphicId}" requires concrete path commands.`
-    );
-  }
-  const hasFill = properties.fill !== undefined;
-  const hasStroke = properties.stroke !== undefined;
-  if (!hasFill && !hasStroke) {
-    throw new Error(`Graphic "${graphicId}" requires a fill or stroke property.`);
-  }
-  if (hasFill && commands.at(-1).op !== "Z") {
-    throw new Error(`Graphic "${graphicId}" requires a final Z command when filled.`);
-  }
-  if (hasStroke && typeof properties.stroke !== "string") {
-    throw new Error(`Graphic "${graphicId}" requires a string stroke property.`);
-  }
-  const strokeWidth = hasStroke
-    ? requireFiniteProperty(properties, "strokeWidth", graphicId)
-    : undefined;
-  if (hasStroke && strokeWidth < 0) {
-    throw new Error(
-      `Graphic "${graphicId}" requires a non-negative strokeWidth.`
-    );
-  }
-  const strokeDash = requireStrokeDash(properties, graphicId);
-  let fill = "none";
-  if (hasFill) {
-    const bounds = resolvePathCommandBounds(commands);
-    if (bounds === undefined) {
-      throw new Error(`Graphic "${graphicId}" requires finite path fill bounds.`);
-    }
-    fill = serializeFill(state, properties.fill, bounds, graphicId);
-  }
-  return element("path", [
-    ["d", serializePathData(commands)],
-    ["fill", fill],
-    ["stroke", properties.stroke],
-    ["stroke-width", strokeWidth === undefined
-      ? undefined
-      : formatNumber(strokeWidth)],
-    ...strokeDetailAttributes(properties, strokeWidth),
-    ["stroke-dasharray", strokeDash.length === 0
-      ? undefined
-      : strokeDash.map(formatNumber).join(" ")],
-    ["opacity", formatNumber(requireOpacity(properties, graphicId))],
-    ["style", properties.blend === "difference" ? "mix-blend-mode:difference" : undefined]
-  ]);
-}
-
-function serializeText(state, graphicId, properties) {
-  validateConcreteGraphicProperties("text", properties);
-  const x = requireFiniteProperty(properties, "x", graphicId);
-  const y = requireFiniteProperty(properties, "y", graphicId);
-  const fontSize = requireFiniteProperty(properties, "fontSize", graphicId);
-  const rotation = properties.rotation ?? 0;
-  const opacity = requireOpacity(properties, graphicId);
-  const text = properties.text;
-  validateConcreteGraphicValue("text", "text", text);
-  const fill = requireStringProperty(properties, "fill", graphicId);
-  const fontFamily = requireStringProperty(
-    properties,
-    "fontFamily",
-    graphicId
-  );
-  const textAlign = requireStringProperty(
-    properties,
-    "textAlign",
-    graphicId
-  );
-  const textBaseline = requireStringProperty(
-    properties,
-    "textBaseline",
-    graphicId
-  );
-  const fontWeight = properties.fontWeight ?? "normal";
-  if (fontSize <= 0) {
-    throw new Error(`Graphic "${graphicId}" requires a positive fontSize.`);
-  }
-  if (!Number.isFinite(rotation)) {
-    throw new Error(`Graphic "${graphicId}" requires a finite rotation.`);
-  }
-  if (
-    !(
-      (typeof fontWeight === "string" && fontWeight.length > 0) ||
-      Number.isFinite(fontWeight)
-    )
-  ) {
-    throw new Error(`Graphic "${graphicId}" requires a valid fontWeight.`);
-  }
-  if (TEXT_ANCHORS[textAlign] === undefined) {
-    throw new Error(`Graphic "${graphicId}" has invalid textAlign.`);
-  }
-  if (DOMINANT_BASELINES[textBaseline] === undefined) {
-    throw new Error(`Graphic "${graphicId}" has invalid textBaseline.`);
-  }
-  const rotationDegrees = rotation * 180 / Math.PI;
-  return element("text", [
-    ["x", formatNumber(x)],
-    ["y", formatNumber(y)],
-    ["fill", fill],
-    ["font-family", fontFamily],
-    ["font-size", formatNumber(fontSize)],
-    ["font-weight", normalizeRendererFontWeight(fontWeight)],
-    ["font-style", properties.fontStyle],
-    ["text-anchor", TEXT_ANCHORS[textAlign]],
-    ["dominant-baseline", DOMINANT_BASELINES[textBaseline]],
-    ["opacity", formatNumber(opacity)],
-    ["transform", rotation === 0
-      ? undefined
-      : `rotate(${formatNumber(rotationDegrees)} ${formatNumber(x)} ${formatNumber(y)})`]
-  ], properties.lines === undefined ? escapeText(text) : properties.lines.map(line =>
-    element("tspan", [["x", formatNumber(x + line.x)], ["y", formatNumber(y + line.y)]], escapeText(line.text))
-  ).join(""));
-}
-
-function serializeConcreteGraphic(state, id, graphic) {
-  if (graphic.type === "collection") {
-    const items = (graphic.items ?? []).map(item =>
-      serializeConcreteGraphic(state, item.id ?? id, item)
-    ).join("");
-    return element("g", [], items);
-  }
-  const properties = graphic.properties ?? {};
-  if (graphic.type === "circle") {
-    return serializeCircle(state, id, properties);
-  }
-  if (graphic.type === "rect") {
-    return serializeRect(state, id, properties);
-  }
-  if (graphic.type === "line") {
-    return serializeLine(state, id, properties);
-  }
-  if (graphic.type === "path") {
-    return serializePath(state, id, properties);
-  }
-  if (graphic.type === "text") {
-    return serializeText(state, id, properties);
-  }
-  throw new Error(`SVG renderer does not support "${graphic.type}" yet.`);
-}
-
-function openNestedCanvas(state, id, canvas) {
-  const { x, y, width, height } = requireCanvasGeometry(
-    id,
-    canvas,
-    { nested: true }
-  );
-  const clipId = `ggaction-clip-${state.resourceNamespace}-${state.clipCount}`;
-  state.clipCount += 1;
-  state.definitions.push(element("clipPath", [["id", clipId]], element(
-    "rect",
-    [
-      ["x", "0"],
-      ["y", "0"],
-      ["width", formatNumber(width)],
-      ["height", formatNumber(height)]
-    ]
-  )));
-  const background = requireCanvasBackground(id, canvas);
-  const backgroundRect = background === undefined
-    ? ""
-    : element("rect", [
-      ["x", "0"],
-      ["y", "0"],
-      ["width", formatNumber(width)],
-      ["height", formatNumber(height)],
-      ["fill", background]
-    ]);
-  return `<g ${attributes([
-    ["transform", `translate(${formatNumber(x)} ${formatNumber(y)})`],
-    ["clip-path", `url(#${clipId})`]
-  ])}>${backgroundRect}`;
-}
-
-function serializeBody(graphicSpec, rootId, rootCanvas, width, height, state) {
-  const output = [];
-  const background = requireCanvasBackground(rootId, rootCanvas);
-  if (background !== undefined) {
-    output.push(element("rect", [
-      ["x", "0"],
-      ["y", "0"],
-      ["width", formatNumber(width)],
-      ["height", formatNumber(height)],
-      ["fill", background]
-    ]));
-  }
-  walkGraphicTreeEvents(graphicSpec, {
-    enter({ id, object }) {
-      if (id === rootId) return;
-      if (object.clip !== undefined) {
-        validateGraphicClip(object.clip, object.type);
-        const clipId = `ggaction-clip-${state.resourceNamespace}-${state.clipCount++}`;
-        state.definitions.push(element("clipPath", [["id", clipId]], element("rect",
-          Object.entries(object.clip).map(([key, value]) => [key, formatNumber(value)]))));
-        output.push(`<g clip-path="url(#${clipId})">`);
-      }
-      if (object.type === "canvas") {
-        output.push(openNestedCanvas(state, id, object));
-        return;
-      }
-      if (object.type === "collection") {
-        output.push("<g>");
-        return;
-      }
-      if (!Array.isArray(object.items)) {
-        output.push(serializeConcreteGraphic(state, id, object));
-      }
-    },
-    item({ id, object, owner }) {
-      output.push(serializeConcreteGraphic(state, id, {
-        ...object,
-        type: object.type ?? owner.type
-      }));
-    },
-    exit({ id, object }) {
-      if (
-        id !== rootId &&
-        (object.type === "collection" || object.type === "canvas")
-      ) {
-        output.push("</g>");
-      }
-      if (object.clip !== undefined) output.push("</g>");
-    }
-  });
-  return output.join("");
-}
-
-function requireSVGOptions(options) {
-  validateRendererOptions(options, SVG_OPTIONS, "renderToSVG options");
-  for (const key of SVG_OPTIONS) {
-    if (
-      options[key] !== undefined &&
-      (typeof options[key] !== "string" || options[key].length === 0)
-    ) {
-      throw new TypeError(`renderToSVG ${key} must be a non-empty string.`);
-    }
-  }
-  if (
-    options.resourceNamespace !== undefined &&
-    !RESOURCE_NAMESPACE.test(options.resourceNamespace)
-  ) {
-    throw new TypeError(
-      "renderToSVG resourceNamespace must start with a letter and contain only letters, numbers, _ or -."
-    );
-  }
-  return options;
-}
-
-export function renderToSVG(program, options = {}) {
-  const resolvedOptions = requireSVGOptions(options);
-  const graphicSpec = program?.graphicSpec;
-  if (
-    graphicSpec === null ||
-    typeof graphicSpec !== "object" ||
-    graphicSpec.objects === null ||
-    typeof graphicSpec.objects !== "object" ||
-    !Array.isArray(graphicSpec.order)
-  ) {
-    throw new TypeError("renderToSVG requires a program with a graphicSpec.");
-  }
-  const { id: rootId, object: rootCanvas } =
-    requireSingleOrderedGraphicByType(graphicSpec, "canvas");
-  const { width, height } = requireCanvasGeometry(
-    rootId,
-    rootCanvas,
-    { nested: false }
-  );
-  const state = {
-    clipCount: 1,
-    definitions: [],
-    gradientCount: 1,
-    resourceNamespace:
-      resolvedOptions.resourceNamespace ?? resourceNamespace(graphicSpec)
-  };
-  walkGraphicTreeEvents(graphicSpec, {
-    enter({object}) {
-      if (object.clip !== undefined) validateGraphicClip(object.clip, object.type);
-      if (object.properties?.blend === "difference") state.hasBlend = true;
-    },
-    item({object}) { if (object.properties?.blend === "difference") state.hasBlend = true; }
-  });
-  const body = serializeBody(
-    graphicSpec,
-    rootId,
-    rootCanvas,
-    width,
-    height,
-    state
-  );
-  const accessible = [
-    resolvedOptions.title === undefined
-      ? ""
-      : element("title", [], escapeText(resolvedOptions.title)),
-    resolvedOptions.description === undefined
-      ? ""
-      : element("desc", [], escapeText(resolvedOptions.description))
-  ].join("");
-  const definitions = state.definitions.length === 0
-    ? ""
-    : element("defs", [], state.definitions.join(""));
-  return element("svg", [
-    ["xmlns", SVG_NAMESPACE],
-    ["width", formatNumber(width)],
-    ["height", formatNumber(height)],
-    ["viewBox", `0 0 ${formatNumber(width)} ${formatNumber(height)}`],
-    ["style", state.hasBlend ? "isolation:isolate" : undefined]
-  ], `${accessible}${definitions}${body}`);
-}
-
-// Internal adapter: only concrete graphics and opaque correspondence keys enter here.
-export function renderTransitionGraphics(graphicSpec, identities) {
-  const scene = collectTransitionGraphics(graphicSpec, identities);
-  const state = { definitions: [], gradientCount: 1, clipCount: 1,
-    resourceNamespace: `scene-${resourceNamespace(graphicSpec)}` };
-  const nodes = scene.nodes.map(({ properties, clips, ...node }) => ({ ...node,
-    svg: serializeConcreteGraphic(state, node.key, { type: node.type, properties }) }));
-  return { version: 1, width: scene.width, height: scene.height,
-    definitions: state.definitions.join(""), nodes };
-}
+import{collectTransitionGraphics as F}from"./transitionScene.js";import{isOwned as V}from"../core/immutable.js";import{validateGraphicClip as b}from"../grammar/schemas/graphicClip.js";import{requireSingleOrderedGraphicByType as j,walkGraphicTreeEvents as q}from"../grammar/schemas/graphicTree.js";import{validateConcreteGraphicProperties as $,validateConcreteGraphicValue as D}from"../grammar/schemas/concreteGraphic.js";import{resolvePathCommandBounds as M}from"../grammar/schemas/graphicBounds.js";import{isLinearGradientPaint as L,resolveLinearGradientCoordinates as R,validateFillPaint as _}from"../grammar/paint.js";import{requireFiniteProperty as l,requireStringProperty as g}from"./canvas/validation.js";import{normalizeRendererFontWeight as Z}from"./text.js";import{validateRendererOptions as J}from"./options.js";const U="http://www.w3.org/2000/svg",C=new Set(["title","description","resourceNamespace"]),X=/^[A-Za-z][A-Za-z0-9_-]*$/,S=Object.freeze({left:"start",start:"start",center:"middle",right:"end",end:"end"}),v=Object.freeze({top:"text-before-edge",hanging:"hanging",middle:"middle",alphabetic:"alphabetic",ideographic:"ideographic",bottom:"text-after-edge"}),A=new WeakMap;function N(n){const t=A.get(n);if(t!==void 0)return t;const e=JSON.stringify(n);let r=3421674724,o=2216829733;for(let s=0;s<e.length;s+=1){o=(o^e.charCodeAt(s))>>>0;const u=o*435;r=Math.imul(r,435)+Math.imul(o,256)+Math.floor(u/4294967296)>>>0,o=u>>>0}const f=(BigInt(r)<<32n|BigInt(o)).toString(36);return V(n)&&A.set(n,f),f}function x(n){for(const t of n){const e=t.codePointAt(0);if(!(e===9||e===10||e===13||e>=32&&e<=55295||e>=57344&&e<=65533||e>=65536&&e<=1114111))throw new TypeError("SVG output requires XML 1.0-compatible strings.")}return n.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;")}function H(n){return x(String(n)).replaceAll('"',"&quot;").replaceAll("'","&apos;")}function i(n){if(!Number.isFinite(n))throw new TypeError("SVG renderer requires finite numeric output.");return Object.is(n,-0)?"0":String(n)}function O(n){return n.filter(([,t])=>t!==void 0).map(([t,e])=>`${t}="${H(e)}"`).join(" ")}function d(n,t,e){const r=O(t),o=r.length===0?`<${n}`:`<${n} ${r}`;return e===void 0?`${o}/>`:`${o}>${e}</${n}>`}function k(n,t){const e=n.opacity??1;if(!Number.isFinite(e)||e<0||e>1)throw new Error(`Graphic "${t}" requires opacity from 0 to 1.`);return e}function z(n,t){const e=n.strokeDash??[];if(!Array.isArray(e)||!e.every(r=>Number.isFinite(r)&&r>=0))throw new Error(`Graphic "${t}" requires a non-negative finite strokeDash array.`);return e}function G(n,t){return typeof n.stroke!="string"||!(t>0)?[]:[["stroke-linecap",Object.hasOwn(n,"lineCap")?n.lineCap:void 0],["stroke-linejoin",Object.hasOwn(n,"lineJoin")?n.lineJoin:void 0],["stroke-miterlimit",Object.hasOwn(n,"miterLimit")?i(n.miterLimit):void 0]]}function T(n,t,{nested:e}){const r=t.properties??{},o=l(r,"width",n),f=l(r,"height",n);if(o<0||f<0){const s=e?`Nested Canvas "${n}"`:"Canvas";throw new Error(`${s} width and height must not be negative.`)}return{...e?{x:l(r,"x",n),y:l(r,"y",n)}:{},width:o,height:f}}function W(n,t){const e=t.properties?.background;if(e!==void 0){if(typeof e!="string")throw new Error(`Graphic "${n}" requires a string background property.`);return e}}function K(n,t,e,r){const o=R(t,e),f=`ggaction-gradient-${n.resourceNamespace}-${n.gradientCount}`;n.gradientCount+=1;const s=t.stops.map(u=>d("stop",[["offset",i(u.offset)],["stop-color",u.color]])).join("");return n.definitions.push(d("linearGradient",[["id",f],["gradientUnits","userSpaceOnUse"],["x1",i(o.from.x)],["y1",i(o.from.y)],["x2",i(o.to.x)],["y2",i(o.to.y)]],s)),`url(#${f})`}function B(n,t,e,r){return _(t,`${r}.fill`),L(t)?K(n,t,e,r):t}function Q(n,t,e){$("circle",e);const r=l(e,"x",t),o=l(e,"y",t),f=l(e,"radius",t);if(f<0)throw new Error(`Graphic "${t}" requires a non-negative radius.`);if(typeof e.fill!="string")throw new Error(`Graphic "${t}" requires a string fill property.`);let s;if(e.stroke!==void 0){if(typeof e.stroke!="string")throw new Error(`Graphic "${t}" requires a string stroke property.`);if(s=l(e,"strokeWidth",t),s<0)throw new Error(`Graphic "${t}" requires a non-negative strokeWidth.`)}return d("circle",[["cx",i(r)],["cy",i(o)],["r",i(f)],["fill",e.fill],["stroke",e.stroke],["stroke-width",s===void 0?void 0:i(s)],...G(e,s),["opacity",i(k(e,t))]])}function Y(n,t,e){$("rect",e);const r=l(e,"x",t),o=l(e,"y",t),f=l(e,"width",t),s=l(e,"height",t),u=l(e,"strokeWidth",t);if(f<0||s<0||u<0)throw new Error(`Graphic "${t}" requires non-negative rect dimensions and strokeWidth.`);if(e.fill===void 0)throw new Error(`Graphic "${t}" requires a fill property.`);if(typeof e.stroke!="string")throw new Error(`Graphic "${t}" requires a string stroke property.`);const c=B(n,e.fill,{left:r,right:r+f,top:o,bottom:o+s},t);return d("rect",[["x",i(r)],["y",i(o)],["width",i(f)],["height",i(s)],["fill",c],["stroke",e.stroke],["stroke-width",i(u)],...G(e,u),["opacity",i(k(e,t))],["style",e.blend==="difference"?"mix-blend-mode:difference":void 0]])}function I(n,t,e){$("line",e);const r=l(e,"strokeWidth",t);if(r<0)throw new Error(`Graphic "${t}" requires a non-negative strokeWidth.`);if(typeof e.stroke!="string")throw new Error(`Graphic "${t}" requires a string stroke property.`);const o=z(e,t);return d("line",[["x1",i(l(e,"x1",t))],["y1",i(l(e,"y1",t))],["x2",i(l(e,"x2",t))],["y2",i(l(e,"y2",t))],["fill","none"],["stroke",e.stroke],["stroke-width",i(r)],...G(e,r),["stroke-dasharray",o.length===0?void 0:o.map(i).join(" ")],["opacity",i(k(e,t))]])}function ee(n){return n.map(t=>t.op==="M"||t.op==="L"?`${t.op}${i(t.x)} ${i(t.y)}`:t.op==="C"?`C${i(t.x1)} ${i(t.y1)} ${i(t.x2)} ${i(t.y2)} ${i(t.x)} ${i(t.y)}`:"Z").join(" ")}function te(n,t,e){$("path",e);const r=e.commands;if(!Array.isArray(r))throw new Error(`Graphic "${t}" requires concrete path commands.`);const o=e.fill!==void 0,f=e.stroke!==void 0;if(!o&&!f)throw new Error(`Graphic "${t}" requires a fill or stroke property.`);if(o&&r.at(-1).op!=="Z")throw new Error(`Graphic "${t}" requires a final Z command when filled.`);if(f&&typeof e.stroke!="string")throw new Error(`Graphic "${t}" requires a string stroke property.`);const s=f?l(e,"strokeWidth",t):void 0;if(f&&s<0)throw new Error(`Graphic "${t}" requires a non-negative strokeWidth.`);const u=z(e,t);let c="none";if(o){const a=M(r);if(a===void 0)throw new Error(`Graphic "${t}" requires finite path fill bounds.`);c=B(n,e.fill,a,t)}return d("path",[["d",ee(r)],["fill",c],["stroke",e.stroke],["stroke-width",s===void 0?void 0:i(s)],...G(e,s),["stroke-dasharray",u.length===0?void 0:u.map(i).join(" ")],["opacity",i(k(e,t))],["style",e.blend==="difference"?"mix-blend-mode:difference":void 0]])}function ne(n,t,e){$("text",e);const r=l(e,"x",t),o=l(e,"y",t),f=l(e,"fontSize",t),s=e.rotation??0,u=k(e,t),c=e.text;D("text","text",c);const a=g(e,"fill",t),y=g(e,"fontFamily",t),w=g(e,"textAlign",t),m=g(e,"textBaseline",t),h=e.fontWeight??"normal";if(f<=0)throw new Error(`Graphic "${t}" requires a positive fontSize.`);if(!Number.isFinite(s))throw new Error(`Graphic "${t}" requires a finite rotation.`);if(!(typeof h=="string"&&h.length>0||Number.isFinite(h)))throw new Error(`Graphic "${t}" requires a valid fontWeight.`);if(S[w]===void 0)throw new Error(`Graphic "${t}" has invalid textAlign.`);if(v[m]===void 0)throw new Error(`Graphic "${t}" has invalid textBaseline.`);const P=s*180/Math.PI;return d("text",[["x",i(r)],["y",i(o)],["fill",a],["font-family",y],["font-size",i(f)],["font-weight",Z(h)],["font-style",e.fontStyle],["text-anchor",S[w]],["dominant-baseline",v[m]],["opacity",i(u)],["transform",s===0?void 0:`rotate(${i(P)} ${i(r)} ${i(o)})`]],e.lines===void 0?x(c):e.lines.map(E=>d("tspan",[["x",i(r+E.x)],["y",i(o+E.y)]],x(E.text))).join(""))}function p(n,t,e){if(e.type==="collection"){const o=(e.items??[]).map(f=>p(n,f.id??t,f)).join("");return d("g",[],o)}const r=e.properties??{};if(e.type==="circle")return Q(n,t,r);if(e.type==="rect")return Y(n,t,r);if(e.type==="line")return I(n,t,r);if(e.type==="path")return te(n,t,r);if(e.type==="text")return ne(n,t,r);throw new Error(`SVG renderer does not support "${e.type}" yet.`)}function re(n,t,e){const{x:r,y:o,width:f,height:s}=T(t,e,{nested:!0}),u=`ggaction-clip-${n.resourceNamespace}-${n.clipCount}`;n.clipCount+=1,n.definitions.push(d("clipPath",[["id",u]],d("rect",[["x","0"],["y","0"],["width",i(f)],["height",i(s)]])));const c=W(t,e),a=c===void 0?"":d("rect",[["x","0"],["y","0"],["width",i(f)],["height",i(s)],["fill",c]]);return`<g ${O([["transform",`translate(${i(r)} ${i(o)})`],["clip-path",`url(#${u})`]])}>${a}`}function ie(n,t,e,r,o,f){const s=[],u=W(t,e);return u!==void 0&&s.push(d("rect",[["x","0"],["y","0"],["width",i(r)],["height",i(o)],["fill",u]])),q(n,{enter({id:c,object:a}){if(c!==t){if(a.clip!==void 0){b(a.clip,a.type);const y=`ggaction-clip-${f.resourceNamespace}-${f.clipCount++}`;f.definitions.push(d("clipPath",[["id",y]],d("rect",Object.entries(a.clip).map(([w,m])=>[w,i(m)])))),s.push(`<g clip-path="url(#${y})">`)}if(a.type==="canvas"){s.push(re(f,c,a));return}if(a.type==="collection"){s.push("<g>");return}Array.isArray(a.items)||s.push(p(f,c,a))}},item({id:c,object:a,owner:y}){s.push(p(f,c,{...a,type:a.type??y.type}))},exit({id:c,object:a}){c!==t&&(a.type==="collection"||a.type==="canvas")&&s.push("</g>"),a.clip!==void 0&&s.push("</g>")}}),s.join("")}function oe(n){J(n,C,"renderToSVG options");for(const t of C)if(n[t]!==void 0&&(typeof n[t]!="string"||n[t].length===0))throw new TypeError(`renderToSVG ${t} must be a non-empty string.`);if(n.resourceNamespace!==void 0&&!X.test(n.resourceNamespace))throw new TypeError("renderToSVG resourceNamespace must start with a letter and contain only letters, numbers, _ or -.");return n}function me(n,t={}){const e=oe(t),r=n?.graphicSpec;if(r===null||typeof r!="object"||r.objects===null||typeof r.objects!="object"||!Array.isArray(r.order))throw new TypeError("renderToSVG requires a program with a graphicSpec.");const{id:o,object:f}=j(r,"canvas"),{width:s,height:u}=T(o,f,{nested:!1});let c=e.resourceNamespace;const a={clipCount:1,definitions:[],gradientCount:1,get resourceNamespace(){return c??=N(r)}};q(r,{enter({object:h}){h.clip!==void 0&&b(h.clip,h.type),h.properties?.blend==="difference"&&(a.hasBlend=!0)},item({object:h}){h.properties?.blend==="difference"&&(a.hasBlend=!0)}});const y=ie(r,o,f,s,u,a),w=[e.title===void 0?"":d("title",[],x(e.title)),e.description===void 0?"":d("desc",[],x(e.description))].join(""),m=a.definitions.length===0?"":d("defs",[],a.definitions.join(""));return d("svg",[["xmlns",U],["width",i(s)],["height",i(u)],["viewBox",`0 0 ${i(s)} ${i(u)}`],["style",a.hasBlend?"isolation:isolate":void 0]],`${w}${m}${y}`)}function $e(n,t){const e=F(n,t);let r;const o={definitions:[],gradientCount:1,clipCount:1,get resourceNamespace(){return r??=`scene-${N(n)}`}},f=e.nodes.map(({properties:s,clips:u,...c})=>({...c,svg:p(o,c.key,{type:c.type,properties:s})}));return{version:1,width:e.width,height:e.height,definitions:o.definitions.join(""),nodes:f}}export{me as renderToSVG,$e as renderTransitionGraphics};

package/src/scene.js

@@ -5,9 +5,10 @@ import { resolveMarkItems, findSelectionPolicy } from "./materialization/selecti
 import { namespaceGraphicId } from "./selectors/graphicCapacity.js";
 import { findLayer } from "./selectors/layers.js";
 import { findDataset } from "./selectors/datasets.js";
-import { cloneAndFreeze } from "./core/immutable.js";
+import { cloneAndFreeze, isOwned } from "./core/immutable.js";
 
 const scenes = new WeakMap(), canvasScenes = new WeakMap();
+const ownedRowTokens = new WeakMap();
 function canonical(value) {
   if (value instanceof Date) return `date:${value.toISOString()}`;
   if (typeof value === "number" && !Number.isFinite(value)) return `number:${value}`;
@@ -37,8 +38,9 @@ function identities(program, project = id => id, scope = "", result = new Map())
     // derived array indexes. Unresolvable derived provenance deliberately fades.
     const rowTokens = new WeakMap();
     const rowToken = row => {
-      if (!rowTokens.has(row)) rowTokens.set(row, token(row));
-      return rowTokens.get(row);
+      const cache = isOwned(row) ? ownedRowTokens : rowTokens;
+      if (!cache.has(row)) cache.set(row, token(row));
+      return cache.get(row);
     };
     let items;
     try { items = resolveMarkItems(program, layer.id); }