canvas_erd 0.1.0

data/lib/canvas_erd/web/document.js

@@ -0,0 +1,473 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else root.CanvasERDDocument = api;
+})(typeof globalThis === "object" ? globalThis : this, function () {
+  "use strict";
+
+  const CARD_WIDTH = 300;
+  const HEADER_HEIGHT = 58;
+  const ROW_HEIGHT = 23;
+  const CARD_PADDING = 10;
+  const NOTE_PADDING = 12;
+  const CANVAS_FONT_FAMILY = "Arial";
+
+  function topLeft(options = {}) {
+    return {
+      originX: "left",
+      originY: "top",
+      ...options
+    };
+  }
+
+  function uncachedText(options = {}) {
+    return topLeft({ ...options, objectCaching: false });
+  }
+
+  function paddedBackgroundBounds(width, height, padding) {
+    return {
+      left: -width / 2 - padding,
+      top: -height / 2 - padding,
+      width: width + padding * 2,
+      height: height + padding * 2
+    };
+  }
+
+  function noteSelectionPadding(zoom) {
+    return NOTE_PADDING * zoom;
+  }
+
+  function noteCanvasGeometry(note) {
+    return {
+      left: note.x,
+      top: note.y,
+      width: note.width,
+      angle: note.angle ?? 0
+    };
+  }
+
+  function noteStateGeometry(object) {
+    return {
+      x: object.left,
+      y: object.top,
+      width: object.width * object.scaleX,
+      angle: object.angle,
+      text: object.text
+    };
+  }
+
+  function erdFilename(value) {
+    const basename = String(value).trim().replace(/(?:\.erd)?\.png$/i, "");
+    return `${basename || "diagram"}.erd.png`;
+  }
+
+  function diagramName(value) {
+    const name = String(value || "").trim().replace(/(?:\.erd)?\.png$/i, "");
+    return name || "Untitled ERD";
+  }
+
+  function confirmDiscardChanges(dirty, confirmDiscard) {
+    return !dirty || confirmDiscard("Discard unsaved changes to this diagram?");
+  }
+
+  function shortcutAction(event) {
+    const key = String(event.key).toLowerCase();
+    const command = event.metaKey || event.ctrlKey;
+    if (event.altKey) return null;
+
+    if (command) {
+      return { s: "save", o: "open", n: "new" }[key] || null;
+    }
+
+    return {
+      n: "addNote",
+      a: "arrow",
+      t: "toggleTables",
+      l: "layoutTables",
+      "+": "zoomIn",
+      "=": "zoomIn",
+      "-": "zoomOut",
+      "0": "fit",
+      "?": "help"
+    }[key] || null;
+  }
+
+  function isSaveShortcut(event) {
+    return shortcutAction(event) === "save";
+  }
+
+  function selectedDiagramFilename(filename, availableFilenames) {
+    return filename && availableFilenames.includes(filename) ? filename : "";
+  }
+
+  function notePositionAt(point) {
+    return { x: point.x - 110, y: point.y - 45 };
+  }
+
+  function snapPointToBounds(point, bounds) {
+    const right = bounds.left + bounds.width;
+    const bottom = bounds.top + bounds.height;
+    let x = Math.min(right, Math.max(bounds.left, point.x));
+    let y = Math.min(bottom, Math.max(bounds.top, point.y));
+    const edges = [
+      { distance: Math.abs(point.x - bounds.left), apply: () => { x = bounds.left; } },
+      { distance: Math.abs(point.x - right), apply: () => { x = right; } },
+      { distance: Math.abs(point.y - bounds.top), apply: () => { y = bounds.top; } },
+      { distance: Math.abs(point.y - bottom), apply: () => { y = bottom; } }
+    ];
+    edges.reduce((nearest, edge) => edge.distance < nearest.distance ? edge : nearest).apply();
+
+    return {
+      point: { x, y },
+      anchor: {
+        x: bounds.width === 0 ? 0 : (x - bounds.left) / bounds.width,
+        y: bounds.height === 0 ? 0 : (y - bounds.top) / bounds.height
+      }
+    };
+  }
+
+  function pointAtAnchor(bounds, anchor) {
+    return {
+      x: bounds.left + bounds.width * anchor.x,
+      y: bounds.top + bounds.height * anchor.y
+    };
+  }
+
+  function arrowAttachment(target) {
+    if (target?.canvasErdType === "entity") return { type: "entity", id: target.entityId };
+    if (target?.canvasErdType === "note") return { type: "note", id: target.noteId };
+    return null;
+  }
+
+  function canvasLayer(type) {
+    if (type === "relationship") return 0;
+    if (["arrow", "arrow-preview"].includes(type)) return 2;
+    if (type === "arrow-endpoint") return 3;
+    return 1;
+  }
+
+  function transformedArrowEndpoints(points, transform) {
+    const apply = (x, y) => ({
+      x: transform[0] * x + transform[2] * y + transform[4],
+      y: transform[1] * x + transform[3] * y + transform[5]
+    });
+    return {
+      start: apply(points.x1, points.y1),
+      end: apply(points.x2, points.y2)
+    };
+  }
+
+  function createChangeTracker(onChange = () => {}) {
+    let dirty = false;
+
+    return {
+      markDirty() {
+        if (dirty) return;
+        dirty = true;
+        onChange(dirty);
+      },
+      markClean() {
+        if (!dirty) return;
+        dirty = false;
+        onChange(dirty);
+      },
+      isDirty() {
+        return dirty;
+      }
+    };
+  }
+
+  function tableHeight(entity) {
+    const rows = Math.max(entity.attributes.length, 1);
+    return HEADER_HEIGHT + rows * ROW_HEIGHT + CARD_PADDING;
+  }
+
+  function layoutEntities(entities, options = {}) {
+    const margin = options.margin || 48;
+    const gapX = options.gapX || 90;
+    const gapY = options.gapY || 80;
+    const columns = options.columns || Math.max(1, Math.ceil(Math.sqrt(entities.length)));
+    const sorted = [...entities].sort((first, second) => first.id.localeCompare(second.id));
+    const positions = {};
+    let y = margin;
+
+    for (let index = 0; index < sorted.length; index += columns) {
+      const row = sorted.slice(index, index + columns);
+      const rowHeight = Math.max(...row.map(tableHeight));
+
+      row.forEach((entity, column) => {
+        positions[entity.id] = {
+          x: margin + column * (CARD_WIDTH + gapX),
+          y
+        };
+      });
+      y += rowHeight + gapY;
+    }
+
+    return positions;
+  }
+
+  function createState(schema, positions = layoutEntities(schema.entities)) {
+    return {
+      includedEntityIds: schema.entities.map((entity) => entity.id),
+      positions,
+      notes: [],
+      arrows: []
+    };
+  }
+
+  function recordsById(records) {
+    return new Map(records.map((record) => [record.id, record]));
+  }
+
+  function changedRecordIds(previousRecords, nextRecords) {
+    const previous = recordsById(previousRecords);
+    return nextRecords
+      .filter((record) => previous.has(record.id) && JSON.stringify(previous.get(record.id)) !== JSON.stringify(record))
+      .map((record) => record.id);
+  }
+
+  function recordChanges(previousRecords, nextRecords) {
+    const previousIds = new Set(previousRecords.map((record) => record.id));
+    const nextIds = new Set(nextRecords.map((record) => record.id));
+    return {
+      added: nextRecords.filter((record) => !previousIds.has(record.id)).map((record) => record.id),
+      removed: previousRecords.filter((record) => !nextIds.has(record.id)).map((record) => record.id),
+      updated: changedRecordIds(previousRecords, nextRecords)
+    };
+  }
+
+  function positionNewEntities(positions, entities) {
+    const unpositioned = entities.filter((entity) => !positions[entity.id]);
+    if (unpositioned.length === 0) return positions;
+
+    const positioned = entities.filter((entity) => positions[entity.id]);
+    const bottom = positioned.reduce((maximum, entity) => (
+      Math.max(maximum, positions[entity.id].y + tableHeight(entity))
+    ), 0);
+    const margin = 48;
+    const startY = positioned.length === 0 ? margin : bottom + 80;
+    const addedPositions = layoutEntities(unpositioned, { margin });
+
+    unpositioned.forEach((entity) => {
+      positions[entity.id] = {
+        x: addedPositions[entity.id].x,
+        y: addedPositions[entity.id].y - margin + startY
+      };
+    });
+    return positions;
+  }
+
+  function reconcileState(state, previousSchema, nextSchema) {
+    const previousEntityIds = new Set(previousSchema.entities.map((entity) => entity.id));
+    const nextEntityIds = new Set(nextSchema.entities.map((entity) => entity.id));
+    const positions = positionNewEntities(
+      Object.fromEntries(Object.entries(state.positions).map(([id, position]) => [id, { ...position }])),
+      nextSchema.entities
+    );
+
+    return {
+      state: {
+        ...state,
+        includedEntityIds: state.includedEntityIds.filter((id) => previousEntityIds.has(id) && nextEntityIds.has(id)),
+        positions,
+        notes: state.notes.map((note) => ({ ...note })),
+        arrows: (state.arrows || []).map((arrow) => ({
+          ...arrow,
+          start: { ...arrow.start, attachment: arrow.start.attachment ? { ...arrow.start.attachment } : null },
+          end: { ...arrow.end, attachment: arrow.end.attachment ? { ...arrow.end.attachment } : null }
+        }))
+      },
+      changes: {
+        entities: recordChanges(previousSchema.entities, nextSchema.entities),
+        relationships: recordChanges(previousSchema.relationships, nextSchema.relationships),
+        specializations: recordChanges(previousSchema.specializations, nextSchema.specializations)
+      }
+    };
+  }
+
+  function changeSummary(changes) {
+    const parts = [];
+    const entityChanges = changes.entities;
+    const relationshipChanges = changes.relationships;
+    const specializationChanges = changes.specializations;
+
+    if (entityChanges.added.length > 0) parts.push(`${entityChanges.added.length} added`);
+    if (entityChanges.updated.length > 0) parts.push(`${entityChanges.updated.length} updated`);
+    if (entityChanges.removed.length > 0) {
+      parts.push(`${entityChanges.removed.length} removed (${entityChanges.removed.join(", ")})`);
+    }
+
+    const connectionCount = [relationshipChanges, specializationChanges].reduce((total, records) => (
+      total + records.added.length + records.updated.length + records.removed.length
+    ), 0);
+    if (connectionCount > 0) {
+      parts.push(`${connectionCount} relationship ${connectionCount === 1 ? "change" : "changes"}`);
+    }
+
+    return parts.length === 0 ? "Schema refreshed: no changes." : `Schema refreshed: ${parts.join(", ")}.`;
+  }
+
+  function setEntityIncluded(state, entityId, included) {
+    const ids = new Set(state.includedEntityIds);
+    if (included) ids.add(entityId);
+    else ids.delete(entityId);
+
+    return {
+      ...state,
+      includedEntityIds: [...ids]
+    };
+  }
+
+  function selectedEntityIds(activeObject) {
+    if (!activeObject) return [];
+    const objects = activeObject.canvasErdType === "entity"
+      ? [activeObject]
+      : (typeof activeObject.getObjects === "function" ? activeObject.getObjects() : []);
+    return objects
+      .filter((object) => object.canvasErdType === "entity")
+      .map((object) => object.entityId);
+  }
+
+  function visibleRelationships(schema, includedEntityIds) {
+    const included = new Set(includedEntityIds);
+    return schema.relationships.filter((relationship) => (
+      included.has(relationship.source_id) && included.has(relationship.destination_id)
+    ));
+  }
+
+  function rangeLabel(range) {
+    if (range.maximum === null) return `${range.minimum}..*`;
+    if (range.minimum === range.maximum) return String(range.minimum);
+    return `${range.minimum}..${range.maximum}`;
+  }
+
+  function cardinalityLabel(relationship) {
+    return `${rangeLabel(relationship.cardinality.source)} — ${rangeLabel(relationship.cardinality.destination)}`;
+  }
+
+  function fitViewport(bounds, viewport, padding = 64, maximumZoom = 1) {
+    if (!bounds || bounds.width <= 0 || bounds.height <= 0) return [1, 0, 0, 1, 0, 0];
+
+    const availableWidth = Math.max(1, viewport.width - padding * 2);
+    const availableHeight = Math.max(1, viewport.height - padding * 2);
+    const zoom = Math.min(maximumZoom, availableWidth / bounds.width, availableHeight / bounds.height);
+    const centerX = bounds.left + bounds.width / 2;
+    const centerY = bounds.top + bounds.height / 2;
+
+    return [
+      zoom,
+      0,
+      0,
+      zoom,
+      viewport.width / 2 - centerX * zoom,
+      viewport.height / 2 - centerY * zoom
+    ];
+  }
+
+  function panViewport(transform, deltaX, deltaY) {
+    const nextTransform = [...transform];
+    nextTransform[4] -= deltaX;
+    nextTransform[5] -= deltaY;
+    return nextTransform;
+  }
+
+  function zoomForWheel(currentZoom, deltaY, minimumZoom = 0.15, maximumZoom = 2.5) {
+    return Math.min(maximumZoom, Math.max(minimumZoom, currentZoom * Math.exp(-deltaY * 0.01)));
+  }
+
+  function shouldCacheTable(zoom, retinaScaling, maximumEffectiveZoom = 3) {
+    return zoom * retinaScaling <= maximumEffectiveZoom;
+  }
+
+  function createPanScheduler(apply, schedule = globalThis.requestAnimationFrame) {
+    let frame = null;
+    let deltaX = 0;
+    let deltaY = 0;
+
+    return function schedulePan(nextDeltaX, nextDeltaY) {
+      deltaX += nextDeltaX;
+      deltaY += nextDeltaY;
+      if (frame !== null) return;
+
+      frame = schedule(() => {
+        const accumulatedX = deltaX;
+        const accumulatedY = deltaY;
+        frame = null;
+        deltaX = 0;
+        deltaY = 0;
+        apply(accumulatedX, accumulatedY);
+      });
+    };
+  }
+
+  function createPanQualityController(setRetina, options = {}) {
+    const schedule = options.schedule || globalThis.setTimeout;
+    const cancel = options.cancel || globalThis.clearTimeout;
+    const idleDelay = options.idleDelay || 150;
+    let restoreTimer = null;
+    let reduced = false;
+
+    function finish() {
+      if (restoreTimer !== null) cancel(restoreTimer);
+      restoreTimer = null;
+      if (!reduced) return;
+      reduced = false;
+      setRetina(true);
+    }
+
+    return {
+      begin() {
+        if (!reduced) {
+          reduced = true;
+          setRetina(false);
+        }
+        if (restoreTimer !== null) cancel(restoreTimer);
+        restoreTimer = schedule(finish, idleDelay);
+      },
+      finish
+    };
+  }
+
+  return {
+    CARD_WIDTH,
+    HEADER_HEIGHT,
+    ROW_HEIGHT,
+    NOTE_PADDING,
+    CANVAS_FONT_FAMILY,
+    topLeft,
+    uncachedText,
+    paddedBackgroundBounds,
+    noteSelectionPadding,
+    noteCanvasGeometry,
+    noteStateGeometry,
+    erdFilename,
+    diagramName,
+    confirmDiscardChanges,
+    shortcutAction,
+    isSaveShortcut,
+    selectedDiagramFilename,
+    notePositionAt,
+    snapPointToBounds,
+    pointAtAnchor,
+    arrowAttachment,
+    canvasLayer,
+    transformedArrowEndpoints,
+    createChangeTracker,
+    tableHeight,
+    layoutEntities,
+    createState,
+    reconcileState,
+    changeSummary,
+    setEntityIncluded,
+    selectedEntityIds,
+    visibleRelationships,
+    cardinalityLabel,
+    fitViewport,
+    panViewport,
+    zoomForWheel,
+    shouldCacheTable,
+    createPanScheduler,
+    createPanQualityController
+  };
+});

data/lib/canvas_erd/web/index.html

@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>CanvasERD</title>
+    <link rel="stylesheet" href="/assets/styles.css">
+  </head>
+  <body>
+    <div class="app-shell">
+      <main class="workspace">
+        <section id="canvas-panel" class="canvas-panel" aria-label="Entity relationship diagram canvas">
+          <canvas id="erd-canvas"></canvas>
+
+          <div class="diagram-toolbar">
+            <div class="diagram-identity">
+              <div class="diagram-name-row">
+                <h1 id="diagram-name-display">Untitled ERD</h1>
+                <button id="edit-diagram-name" class="icon-button name-edit" type="button" aria-label="Edit diagram name" title="Edit diagram name">
+                  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M3 21L12 21H21" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.2218 5.82839L15.0503 2.99996L20 7.94971L17.1716 10.7781M12.2218 5.82839L6.61522 11.435C6.42769 11.6225 6.32233 11.8769 6.32233 12.1421L6.32233 16.6776L10.8579 16.6776C11.1231 16.6776 11.3774 16.5723 11.565 16.3847L17.1716 10.7781M12.2218 5.82839L17.1716 10.7781" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                </button>
+                <input id="diagram-name" type="text" value="Untitled ERD" aria-label="Diagram name" autocomplete="off" hidden>
+              </div>
+              <p id="status" aria-live="polite">Loading Rails ERD schema…</p>
+            </div>
+            <div class="toolbar-actions" aria-label="Diagram controls">
+              <button id="new-diagram" class="icon-button" type="button" aria-label="New diagram" title="New diagram (⌘/Ctrl-N)">
+                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M9 12H12M15 12H12M12 12V9M12 12V15" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 21.4V2.6C4 2.26863 4.26863 2 4.6 2H16.2515C16.4106 2 16.5632 2.06321 16.6757 2.17574L19.8243 5.32426C19.9368 5.43679 20 5.5894 20 5.74853V21.4C20 21.7314 19.7314 22 19.4 22H4.6C4.26863 22 4 21.7314 4 21.4Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 2V5.4C16 5.73137 16.2686 6 16.6 6H20" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+              </button>
+              <button id="open-diagram" class="icon-button" type="button" aria-label="Open diagram" title="Open diagram (⌘/Ctrl-O)" aria-expanded="false">
+                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H21.4C21.7314 7 22 7.26863 22 7.6V11M2 11V19.4C2 19.7314 2.26863 20 2.6 20H21.4C21.7314 20 22 19.7314 22 19.4V11M2 11H22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>              </button>
+              <select id="saved-diagrams" aria-label="Saved diagrams" hidden>
+                <option value="" selected>Untitled ERD</option>
+              </select>
+              <button id="save-diagram" class="icon-button" type="button" aria-label="Save diagram" title="Save diagram (⌘/Ctrl-S)" disabled>
+                <!-- <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 3h12l3 3v15H4V4a1 1 0 0 1 1-1Z"/><path d="M8 3v6h8V3M8 21v-8h8v8"/></svg> -->
+                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M3 19V5C3 3.89543 3.89543 3 5 3H16.1716C16.702 3 17.2107 3.21071 17.5858 3.58579L20.4142 6.41421C20.7893 6.78929 21 7.29799 21 7.82843V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z" stroke="#000000" stroke-width="1.5"></path><path d="M8.6 9H15.4C15.7314 9 16 8.73137 16 8.4V3.6C16 3.26863 15.7314 3 15.4 3H8.6C8.26863 3 8 3.26863 8 3.6V8.4C8 8.73137 8.26863 9 8.6 9Z" stroke="#000000" stroke-width="1.5"></path><path d="M6 13.6V21H18V13.6C18 13.2686 17.7314 13 17.4 13H6.6C6.26863 13 6 13.2686 6 13.6Z" stroke="#000000" stroke-width="1.5"></path></svg>
+              </button>
+            </div>
+          </div>
+
+          <aside id="tables-sidebar" class="sidebar collapsed" aria-label="Diagram tables">
+            <div class="sidebar-heading">
+              <label class="search-label" for="table-search">Tables</label>
+              <div class="sidebar-actions">
+                <button id="refresh-schema" class="icon-button compact" type="button" aria-label="Refresh schema" title="Refresh schema">
+                  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M21.1679 8C19.6247 4.46819 16.1006 2 11.9999 2C6.81459 2 2.55104 5.94668 2.04932 11" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 8H21.4C21.7314 8 22 7.73137 22 7.4V3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.88146 16C4.42458 19.5318 7.94874 22 12.0494 22C17.2347 22 21.4983 18.0533 22 13" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.04932 16H2.64932C2.31795 16 2.04932 16.2686 2.04932 16.6V21" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                </button>
+              </div>
+            </div>
+            <div class="sidebar-content">
+              <input id="table-search" type="search" placeholder="Filter tables…" autocomplete="off">
+              <div class="selection-actions">
+                <button id="select-all" type="button">Select all</button>
+                <button id="select-none" type="button">Clear</button>
+              </div>
+              <div id="table-list" class="table-list"></div>
+            </div>
+          </aside>
+
+          <div id="notice" class="notice" aria-live="polite" hidden></div>
+          <div id="shortcut-panel" class="shortcut-panel" role="dialog" aria-label="Keyboard shortcuts" hidden>
+            <h2>Keyboard shortcuts</h2>
+            <dl>
+              <div><dt>Open</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>O</kbd></dd></div>
+              <div><dt>New</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>N</kbd></dd></div>
+              <div><dt>Save</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>S</kbd></dd></div>
+              <div><dt>Add note at cursor</dt><dd><kbd>N</kbd></dd></div>
+              <div><dt>Arrow tool</dt><dd><kbd>A</kbd></dd></div>
+              <div><dt>Free arrow endpoint</dt><dd><kbd>Ctrl</kbd></dd></div>
+              <div><dt>Toggle tables</dt><dd><kbd>T</kbd></dd></div>
+              <div><dt>Layout tables</dt><dd><kbd>L</kbd></dd></div>
+              <div><dt>Zoom in</dt><dd><kbd>+</kbd></dd></div>
+              <div><dt>Zoom out</dt><dd><kbd>−</kbd></dd></div>
+              <div><dt>Fit diagram</dt><dd><kbd>0</kbd></dd></div>
+              <div><dt>Shortcut help</dt><dd><kbd>?</kbd></dd></div>
+            </dl>
+          </div>
+          <div class="canvas-tools" aria-label="Canvas tools">
+            <button id="toggle-tables" class="icon-button" type="button" aria-label="Show tables" title="Show tables (T)" aria-expanded="false">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 16.5H21" stroke="#000000" stroke-width="1.5"></path><path d="M3 12H21" stroke="#000000" stroke-width="1.5"></path><path d="M21 7.5H3" stroke="#000000" stroke-width="1.5"></path><path d="M12 21V3" stroke="#000000" stroke-width="1.5"></path></svg>
+            </button>
+            <button id="layout-tables" class="icon-button" type="button" aria-label="Layout tables" title="Layout tables (L)" aria-expanded="false">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M21 3.6V12H12V3H20.4C20.7314 3 21 3.26863 21 3.6Z" stroke="#000000" stroke-width="1.5"></path><path d="M21 20.4V12H12V21H20.4C20.7314 21 21 20.7314 21 20.4Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 12V3.6C3 3.26863 3.26863 3 3.6 3H12V12H3Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 12V20.4C3 20.7314 3.26863 21 3.6 21H12V12H3Z" stroke="#000000" stroke-width="1.5"></path></svg>
+            </button>
+            <button id="add-note" class="icon-button" type="button" aria-label="Add note" title="Add note (N)">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M12 8L12 16M12 8H8M12 8H16" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13.5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13.5M21 10.5V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V10.5" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path><path d="M19.5 13.5V10.5H22.5V13.5H19.5Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path><path d="M1.5 13.5V10.5H4.5V13.5H1.5Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path></svg>
+            </button>
+            <button id="add-arrow" class="icon-button" type="button" aria-label="Arrow tool" title="Arrow tool (A) · Double-click an arrow to edit endpoints · Hold Ctrl for a free endpoint" aria-pressed="false">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M6.00005 19L19 5.99996M19 5.99996V18.48M19 5.99996H6.52005" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+            </button>
+          </div>
+          <div class="canvas-footer">
+            <a class="canvas-brand" href="https://github.com/FASCINATION-works/CanvasERD" target="_blank" rel="noopener noreferrer">CanvasERD</a>
+            <div class="canvas-controls" aria-label="View controls">
+              <span class="button-group">
+                <button id="zoom-out" type="button" aria-label="Zoom out" title="Zoom out (−)">−</button>
+                <button id="zoom-in" type="button" aria-label="Zoom in" title="Zoom in (+)">+</button>
+              </span>
+              <button id="reset-view" class="icon-button" type="button" aria-label="Fit diagram" title="Fit diagram (0)">
+                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M9 9L4 4M4 4V8M4 4H8" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 9L20 4M20 4V8M20 4H16" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 15L20 20M20 20V16M20 20H16" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+              </button>
+              <button id="shortcut-help" class="icon-button" type="button" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)" aria-expanded="false">
+                <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none"color="#000000" aria-hidden="true" focusable="false"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 9C9 5.49997 14.5 5.5 14.5 9C14.5 11.5 12 10.9999 12 13.9999" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 18.01L12.01 17.9989" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+              </button>
+            </div>
+          </div>
+          <div id="loading" class="loading">Building diagram…</div>
+        </section>
+      </main>
+    </div>
+    <script src="/assets/elk-api.js" defer></script>
+    <script src="/assets/layout.js" defer></script>
+    <script src="/assets/fabric.min.js" defer></script>
+    <script src="/assets/document.js" defer></script>
+    <script src="/assets/png.js" defer></script>
+    <script src="/assets/app.js" defer></script>
+  </body>
+</html>

data/lib/canvas_erd/web/layout.js

@@ -0,0 +1,74 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else root.CanvasERDLayout = api;
+})(typeof globalThis === "object" ? globalThis : this, function () {
+  "use strict";
+
+  const MARGIN = 48;
+  const LAYOUT_OPTIONS = Object.freeze({
+    "elk.algorithm": "layered",
+    "elk.direction": "DOWN",
+    "elk.padding": `[top=${MARGIN},left=${MARGIN},bottom=${MARGIN},right=${MARGIN}]`,
+    "spacing.baseValue": 40,
+    "elk.layered.nodePlacement.bk.fixedAlignment": "NONE",
+    "elk.layered.unnecessaryBendpoints": true,
+    "elk.layered.wrapping.multiEdge.improveCuts": true,
+    "elk.layered.wrapping.multiEdge.improveWrappedEdges": true,
+    "elk.layered.edgeRouting.selfLoopDistribution": "EQUALLY"
+  });
+
+  function graphFor(schema, dimensions) {
+    const entityIds = new Set(schema.entities.map((entity) => entity.id));
+    return {
+      id: "root",
+      layoutOptions: { ...LAYOUT_OPTIONS },
+      children: schema.entities.map((entity) => ({
+        id: entity.id,
+        width: dimensions.width(entity),
+        height: dimensions.height(entity)
+      })),
+      edges: schema.relationships
+        .filter((relationship) => (
+          entityIds.has(relationship.source_id) && entityIds.has(relationship.destination_id)
+        ))
+        .map((relationship, index) => ({
+          id: `relationship-${index}`,
+          sources: [relationship.source_id],
+          targets: [relationship.destination_id]
+        }))
+    };
+  }
+
+  function schemaForEntityIds(schema, entityIds) {
+    const included = new Set(entityIds);
+    return {
+      ...schema,
+      entities: schema.entities.filter((entity) => included.has(entity.id)),
+      relationships: schema.relationships.filter((relationship) => (
+        included.has(relationship.source_id) && included.has(relationship.destination_id)
+      ))
+    };
+  }
+
+  function positionsFrom(graph) {
+    const children = graph.children || [];
+    if (children.length === 0) return {};
+    if (children.some((child) => !Number.isFinite(child.x) || !Number.isFinite(child.y))) {
+      throw new Error("ELK returned a node without a position");
+    }
+
+    const minimumX = Math.min(...children.map((child) => child.x));
+    const minimumY = Math.min(...children.map((child) => child.y));
+    return Object.fromEntries(children.map((child) => [
+      child.id,
+      { x: child.x - minimumX + MARGIN, y: child.y - minimumY + MARGIN }
+    ]));
+  }
+
+  async function layoutEntities(schema, engine, dimensions) {
+    return positionsFrom(await engine.layout(graphFor(schema, dimensions)));
+  }
+
+  return { MARGIN, LAYOUT_OPTIONS, graphFor, schemaForEntityIds, positionsFrom, layoutEntities };
+});