@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-core/exports/integrity.ts

@@ -0,0 +1,174 @@
+import type { Editor } from "../editor/Editor";
+import { getEditorStore } from "../editor/internal";
+import {
+  isBindingRecord,
+  type BindingId,
+  type ShapeId,
+} from "../schema/records";
+import type { ShapeSvgExporterRegistry } from "./svg";
+
+export type ExportIntegrityIssueKind =
+  | "missing-shape"
+  | "missing-bounds"
+  | "missing-exporter"
+  | "missing-binding-endpoint"
+  | "invalid-binding"
+  | "duplicate-exclusive-binding";
+
+export interface ExportIntegrityIssue {
+  kind: ExportIntegrityIssueKind;
+  id: ShapeId | BindingId;
+  canRepair: boolean;
+}
+
+export interface ExportIntegrityReport {
+  requestedShapeIds: ShapeId[];
+  issues: ExportIntegrityIssue[];
+  repairableIssueCount: number;
+  fatalIssueCount: number;
+  canExport: boolean;
+}
+
+export interface ExportIntegrityRepairResult {
+  before: ExportIntegrityReport;
+  after: ExportIntegrityReport;
+  repaired: boolean;
+}
+
+export function countExportIssueKinds(
+  issues: readonly ExportIntegrityIssue[],
+): Partial<Record<ExportIntegrityIssueKind, number>> {
+  const counts: Partial<Record<ExportIntegrityIssueKind, number>> = {};
+  for (const issue of issues) {
+    counts[issue.kind] = (counts[issue.kind] ?? 0) + 1;
+  }
+  return counts;
+}
+
+export function getExportIntegrityReport({
+  editor,
+  exporters,
+  shapeIds,
+}: {
+  editor: Editor;
+  exporters: ShapeSvgExporterRegistry;
+  shapeIds: Iterable<ShapeId>;
+}): ExportIntegrityReport {
+  const requestedShapeIds = Array.from(shapeIds);
+  const traversalShapeIds = editor.getShapeExportTraversalIds(requestedShapeIds);
+  const issues: ExportIntegrityIssue[] = [];
+
+  for (const id of traversalShapeIds) {
+    const shape = editor.getShape(id);
+    if (!shape) {
+      issues.push({ kind: "missing-shape", id, canRepair: false });
+      continue;
+    }
+
+    if (!isValidExportBounds(editor.computeShapeExportPageBounds(shape))) {
+      issues.push({ kind: "missing-bounds", id: shape.id, canRepair: false });
+    }
+
+    if (!exporters.get(shape.type)) {
+      issues.push({ kind: "missing-exporter", id: shape.id, canRepair: false });
+    }
+  }
+
+  const requestedShapeIdSet = new Set(traversalShapeIds);
+  const seenBindingIds = new Set<BindingId>();
+  for (const binding of getEditorStore(editor).getAll().filter(isBindingRecord)) {
+    if (
+      !requestedShapeIdSet.has(binding.fromId) &&
+      !requestedShapeIdSet.has(binding.toId)
+    ) {
+      continue;
+    }
+
+    const fromShape = editor.getShape(binding.fromId);
+    const toShape = editor.getShape(binding.toId);
+    if (!fromShape || !toShape) {
+      issues.push({
+        kind: "missing-binding-endpoint",
+        id: binding.id,
+        canRepair: true,
+      });
+      continue;
+    }
+
+    if (!editor.bindings.canBind(binding)) {
+      issues.push({
+        kind: "invalid-binding",
+        id: binding.id,
+        canRepair: true,
+      });
+      continue;
+    }
+
+    const duplicatesExistingBinding = editor.bindings
+      .getConflictingBindings(binding)
+      .some((candidate) => seenBindingIds.has(candidate.id));
+    if (duplicatesExistingBinding) {
+      issues.push({
+        kind: "duplicate-exclusive-binding",
+        id: binding.id,
+        canRepair: true,
+      });
+    }
+    seenBindingIds.add(binding.id);
+  }
+
+  const repairableIssueCount = issues.filter((issue) => issue.canRepair).length;
+  const fatalIssueCount = issues.length - repairableIssueCount;
+
+  return {
+    requestedShapeIds,
+    issues,
+    repairableIssueCount,
+    fatalIssueCount,
+    canExport: fatalIssueCount === 0,
+  };
+}
+
+function isValidExportBounds(bounds: { x: number; y: number; w: number; h: number }): boolean {
+  return (
+    Number.isFinite(bounds.x) &&
+    Number.isFinite(bounds.y) &&
+    Number.isFinite(bounds.w) &&
+    Number.isFinite(bounds.h) &&
+    bounds.w >= 0 &&
+    bounds.h >= 0
+  );
+}
+
+export function repairExportIntegrity({
+  editor,
+  exporters,
+  shapeIds,
+}: {
+  editor: Editor;
+  exporters: ShapeSvgExporterRegistry;
+  shapeIds: Iterable<ShapeId>;
+}): ExportIntegrityRepairResult {
+  const requestedShapeIds = Array.from(shapeIds);
+  const before = getExportIntegrityReport({
+    editor,
+    exporters,
+    shapeIds: requestedShapeIds,
+  });
+
+  if (before.repairableIssueCount > 0) {
+    editor.bindings.repairLoadedBindings("system");
+  }
+
+  const after = getExportIntegrityReport({
+    editor,
+    exporters,
+    shapeIds: requestedShapeIds,
+  });
+
+  return {
+    before,
+    after,
+    repaired: before.issues.length !== after.issues.length,
+  };
+}

package/_vendor/canvas-core/exports/svg.ts

@@ -0,0 +1,494 @@
+import { Box } from "../geometry/Box";
+import { Vec } from "../geometry/Vec";
+import type { Editor } from "../editor/Editor";
+import type {
+  AssetId,
+  ShapeId,
+  ShapeRecordBase,
+  ShapeRecord,
+} from "../schema/records";
+
+export type SvgAttributeValue = string | number | boolean | null | undefined;
+
+export interface SvgElementNode {
+  tag: string;
+  attrs?: Record<string, SvgAttributeValue>;
+  children?: SvgNode[];
+}
+
+export type SvgNode = SvgElementNode | string;
+
+export interface SvgExportContext {
+  editor: Editor;
+  bounds: Box;
+  addDef(def: SvgElementNode): string;
+  resolveAssetUrl(assetId: AssetId): string | null;
+}
+
+export interface ShapeSvgExporter<S extends ShapeRecordBase = ShapeRecordBase> {
+  type: S["type"];
+  toSvg(shape: S, context: SvgExportContext): SvgNode | null;
+}
+
+export interface SvgExportOptions {
+  padding?: number;
+  background?: string;
+}
+
+export interface SvgExportResult {
+  svg: string;
+  bounds: Box;
+  width: number;
+  height: number;
+  requestedShapeIds: ShapeId[];
+  exportedShapeIds: ShapeId[];
+  skippedShapes: SvgExportSkippedShape[];
+}
+
+export type SvgExportSkipReason =
+  | "missing-shape"
+  | "missing-bounds"
+  | "missing-exporter"
+  | "empty-output";
+
+export interface SvgExportSkippedShape {
+  id: ShapeId;
+  reason: SvgExportSkipReason;
+}
+
+export class ShapeSvgExporterRegistry {
+  private readonly registry = new Map<string, ShapeSvgExporter>();
+
+  register<S extends ShapeRecordBase>(exporter: ShapeSvgExporter<S>): void {
+    this.registry.set(exporter.type, exporter as ShapeSvgExporter);
+  }
+
+  get(type: ShapeRecordBase["type"]): ShapeSvgExporter | null {
+    return this.registry.get(type) ?? null;
+  }
+
+  has(type: ShapeRecordBase["type"]): boolean {
+    return this.registry.has(type);
+  }
+
+  unregister(type: ShapeRecordBase["type"]): boolean {
+    return this.registry.delete(type);
+  }
+
+  values(): IterableIterator<ShapeSvgExporter> {
+    return this.registry.values();
+  }
+}
+
+export function exportShapesToSvgString(
+  editor: Editor,
+  shapeIds: Iterable<ShapeId>,
+  exporters: ShapeSvgExporterRegistry,
+  options: SvgExportOptions = {},
+): SvgExportResult | null {
+  const requestedShapeIds = Array.from(shapeIds);
+  const traversalShapeIds = editor.getShapeExportTraversalIds(requestedShapeIds);
+  const traversalShapeIdSet = new Set<ShapeId>(traversalShapeIds);
+  const skippedShapes: SvgExportSkippedShape[] = [];
+  const shapes: ShapeRecord[] = [];
+
+  for (const id of traversalShapeIds) {
+    const shape = editor.getShape(id);
+    if (!shape) {
+      skippedShapes.push({ id, reason: "missing-shape" });
+      continue;
+    }
+    shapes.push(shape);
+  }
+
+  if (shapes.length === 0) {
+    return null;
+  }
+
+  const shapeBounds: Box[] = [];
+  for (const shape of shapes) {
+    const bounds = getClippedShapeExportPageBounds(
+      editor,
+      shape,
+      traversalShapeIdSet,
+    );
+    if (!bounds) {
+      continue;
+    }
+    if (!isValidBox(bounds)) {
+      skippedShapes.push({ id: shape.id, reason: "missing-bounds" });
+      continue;
+    }
+    shapeBounds.push(bounds);
+  }
+
+  if (shapeBounds.length === 0) {
+    return null;
+  }
+
+  const rawBounds = unionBoxes(shapeBounds);
+  const padding = options.padding ?? 16;
+  const bounds = rawBounds.expand(padding);
+  const defs: SvgElementNode[] = [];
+  const context: SvgExportContext = {
+    editor,
+    bounds,
+    addDef(def) {
+      const id = `land-svg-def-${defs.length + 1}`;
+      defs.push({
+        ...def,
+        attrs: { ...def.attrs, id },
+      });
+      return id;
+    },
+    resolveAssetUrl(assetId) {
+      return editor.resolveAssetUrl(assetId);
+    },
+  };
+
+  const exportedShapeIds: ShapeId[] = [];
+  const shapeNodes: SvgElementNode[] = [];
+  const clipPathIdByShapeId = new Map<ShapeId, string | null>();
+  for (const shape of shapes) {
+    const exporter = exporters.get(shape.type);
+    if (!exporter) {
+      skippedShapes.push({ id: shape.id, reason: "missing-exporter" });
+      continue;
+    }
+
+    const node = exporter.toSvg(shape, context);
+    if (!node) {
+      skippedShapes.push({ id: shape.id, reason: "empty-output" });
+      continue;
+    }
+
+    const exportBounds = editor.computeShapeExportBounds(shape);
+    if (!isValidBox(exportBounds)) {
+      skippedShapes.push({ id: shape.id, reason: "missing-bounds" });
+      continue;
+    }
+    const transform = editor.computeShapeExportToPageTransform(shape);
+
+    exportedShapeIds.push(shape.id);
+    const clipPathIds = getAncestorExportClipPathIds(
+      editor,
+      shape,
+      traversalShapeIdSet,
+      clipPathIdByShapeId,
+      context,
+    );
+    let shapeNode: SvgElementNode = {
+      tag: "g",
+      attrs: {
+        transform: transform.toSvgString(),
+        opacity: shape.opacity === 1 ? undefined : shape.opacity,
+      },
+      children: [node],
+    };
+
+    for (let index = clipPathIds.length - 1; index >= 0; index -= 1) {
+      shapeNode = {
+        tag: "g",
+        attrs: {
+          "clip-path": `url(#${clipPathIds[index]})`,
+        },
+        children: [shapeNode],
+      };
+    }
+
+    shapeNodes.push(shapeNode);
+  }
+
+  if (exportedShapeIds.length === 0) {
+    return null;
+  }
+
+  const width = Math.max(1, bounds.w);
+  const height = Math.max(1, bounds.h);
+  const children: SvgNode[] = [];
+  if (defs.length > 0) {
+    children.push({ tag: "defs", children: defs });
+  }
+  if (options.background) {
+    children.push({
+      tag: "rect",
+      attrs: {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.w,
+        height: bounds.h,
+        fill: options.background,
+      },
+    });
+  }
+  children.push(...shapeNodes);
+
+  const svg = renderSvgNode({
+    tag: "svg",
+    attrs: {
+      xmlns: "http://www.w3.org/2000/svg",
+      width,
+      height,
+      viewBox: `${formatNumber(bounds.x)} ${formatNumber(
+        bounds.y,
+      )} ${formatNumber(width)} ${formatNumber(height)}`,
+    },
+    children,
+  });
+
+  return {
+    svg,
+    bounds,
+    width,
+    height,
+    requestedShapeIds,
+    exportedShapeIds,
+    skippedShapes,
+  };
+}
+
+function getClippedShapeExportPageBounds(
+  editor: Editor,
+  shape: ShapeRecord,
+  traversalShapeIdSet: Set<ShapeId>,
+): Box | null {
+  let bounds = editor.computeShapeExportPageBounds(shape);
+  if (!isValidBox(bounds)) {
+    return bounds;
+  }
+
+  for (const clipBounds of getAncestorExportClipPageBounds(
+    editor,
+    shape,
+    traversalShapeIdSet,
+  )) {
+    const clippedBounds = intersectBoxes(bounds, clipBounds);
+    if (!clippedBounds) {
+      return null;
+    }
+    bounds = clippedBounds;
+  }
+
+  return bounds;
+}
+
+function getAncestorExportClipPageBounds(
+  editor: Editor,
+  shape: ShapeRecord,
+  traversalShapeIdSet: Set<ShapeId>,
+): Box[] {
+  const bounds: Box[] = [];
+  for (const ancestor of getExportClipAncestors(
+    editor,
+    shape,
+    traversalShapeIdSet,
+  )) {
+    const clipBounds = getShapeChildExportClipPageBounds(editor, ancestor);
+    if (clipBounds && isValidBox(clipBounds)) {
+      bounds.push(clipBounds);
+    }
+  }
+  return bounds;
+}
+
+function getAncestorExportClipPathIds(
+  editor: Editor,
+  shape: ShapeRecord,
+  traversalShapeIdSet: Set<ShapeId>,
+  clipPathIdByShapeId: Map<ShapeId, string | null>,
+  context: SvgExportContext,
+): string[] {
+  const clipPathIds: string[] = [];
+  for (const ancestor of getExportClipAncestors(
+    editor,
+    shape,
+    traversalShapeIdSet,
+  )) {
+    const clipPathId = getShapeChildExportClipPathId(
+      editor,
+      ancestor,
+      clipPathIdByShapeId,
+      context,
+    );
+    if (clipPathId) {
+      clipPathIds.push(clipPathId);
+    }
+  }
+  return clipPathIds;
+}
+
+function getExportClipAncestors(
+  editor: Editor,
+  shape: ShapeRecord,
+  traversalShapeIdSet: Set<ShapeId>,
+): ShapeRecord[] {
+  const ancestors: ShapeRecord[] = [];
+  const seen = new Set<ShapeId>();
+  let parentId = shape.parentId;
+
+  while (parentId.startsWith("shape:")) {
+    const ancestorId = parentId as ShapeId;
+    if (seen.has(ancestorId)) {
+      break;
+    }
+    seen.add(ancestorId);
+
+    const ancestor = editor.getShape(ancestorId);
+    if (!ancestor) {
+      break;
+    }
+    if (traversalShapeIdSet.has(ancestor.id)) {
+      ancestors.push(ancestor);
+    }
+    parentId = ancestor.parentId;
+  }
+
+  return ancestors.reverse();
+}
+
+function getShapeChildExportClipPathId(
+  editor: Editor,
+  shape: ShapeRecord,
+  clipPathIdByShapeId: Map<ShapeId, string | null>,
+  context: SvgExportContext,
+): string | null {
+  if (clipPathIdByShapeId.has(shape.id)) {
+    return clipPathIdByShapeId.get(shape.id) ?? null;
+  }
+
+  const util = editor.getShapeUtil(shape);
+  const clipBounds = util.getChildExportClipLocalBounds(shape);
+  if (!clipBounds || !isValidBox(clipBounds)) {
+    clipPathIdByShapeId.set(shape.id, null);
+    return null;
+  }
+
+  const id = context.addDef({
+    tag: "clipPath",
+    attrs: {
+      clipPathUnits: "userSpaceOnUse",
+    },
+    children: [
+      {
+        tag: "rect",
+        attrs: {
+          x: clipBounds.x,
+          y: clipBounds.y,
+          width: clipBounds.w,
+          height: clipBounds.h,
+          transform: editor
+            .computeShapeExportToPageTransform(shape)
+            .toSvgString(),
+        },
+      },
+    ],
+  });
+  clipPathIdByShapeId.set(shape.id, id);
+  return id;
+}
+
+function getShapeChildExportClipPageBounds(
+  editor: Editor,
+  shape: ShapeRecord,
+): Box | null {
+  const util = editor.getShapeUtil(shape);
+  const clipBounds = util.getChildExportClipLocalBounds(shape);
+  if (!clipBounds || !isValidBox(clipBounds)) {
+    return null;
+  }
+
+  const transform = editor.computeShapeExportToPageTransform(shape);
+  return Box.FromPoints(
+    [
+      new Vec(clipBounds.minX, clipBounds.minY),
+      new Vec(clipBounds.maxX, clipBounds.minY),
+      new Vec(clipBounds.maxX, clipBounds.maxY),
+      new Vec(clipBounds.minX, clipBounds.maxY),
+    ].map((point) => transform.applyToPoint(point)),
+  );
+}
+
+function intersectBoxes(a: Box, b: Box): Box | null {
+  const minX = Math.max(a.minX, b.minX);
+  const minY = Math.max(a.minY, b.minY);
+  const maxX = Math.min(a.maxX, b.maxX);
+  const maxY = Math.min(a.maxY, b.maxY);
+  if (maxX < minX || maxY < minY) {
+    return null;
+  }
+  return new Box(minX, minY, maxX - minX, maxY - minY);
+}
+
+export function renderSvgNode(node: SvgNode): string {
+  if (typeof node === "string") {
+    return escapeText(node);
+  }
+
+  const attrs = renderSvgAttributes(node.attrs ?? {});
+  const children = node.children?.map(renderSvgNode).join("") ?? "";
+  if (!children) {
+    return `<${node.tag}${attrs}/>`;
+  }
+  return `<${node.tag}${attrs}>${children}</${node.tag}>`;
+}
+
+function unionBoxes(boxes: Box[]): Box {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const box of boxes) {
+    minX = Math.min(minX, box.minX);
+    minY = Math.min(minY, box.minY);
+    maxX = Math.max(maxX, box.maxX);
+    maxY = Math.max(maxY, box.maxY);
+  }
+
+  return new Box(minX, minY, maxX - minX, maxY - minY);
+}
+
+function isValidBox(box: Box): boolean {
+  return (
+    Number.isFinite(box.x) &&
+    Number.isFinite(box.y) &&
+    Number.isFinite(box.w) &&
+    Number.isFinite(box.h) &&
+    box.w >= 0 &&
+    box.h >= 0
+  );
+}
+
+function renderSvgAttributes(attrs: Record<string, SvgAttributeValue>): string {
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value === undefined || value === null || value === false) {
+      continue;
+    }
+    parts.push(
+      `${key}="${escapeAttribute(
+        typeof value === "number" ? formatNumber(value) : String(value),
+      )}"`,
+    );
+  }
+  return parts.length === 0 ? "" : ` ${parts.join(" ")}`;
+}
+
+function escapeAttribute(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("\"", "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function escapeText(value: string): string {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+
+function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number(value.toFixed(4)).toString();
+}