canvas_erd 0.1.0

data/lib/canvas_erd/web/png.js

@@ -0,0 +1,146 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else root.CanvasERDPng = api;
+})(typeof globalThis === "object" ? globalThis : this, function () {
+  "use strict";
+
+  const SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
+  const KEYWORD = "CanvasERD";
+  const MAX_EXPORT_SIDE = 8192;
+  const MAX_EXPORT_PIXELS = 16 * 1024 * 1024;
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+  const crcTable = new Uint32Array(256);
+
+  for (let number = 0; number < 256; number += 1) {
+    let value = number;
+    for (let bit = 0; bit < 8; bit += 1) {
+      value = (value & 1) ? (0xedb88320 ^ (value >>> 1)) : (value >>> 1);
+    }
+    crcTable[number] = value >>> 0;
+  }
+
+  function concatenate(parts) {
+    const result = new Uint8Array(parts.reduce((total, part) => total + part.length, 0));
+    let offset = 0;
+    parts.forEach((part) => {
+      result.set(part, offset);
+      offset += part.length;
+    });
+    return result;
+  }
+
+  function readUint32(bytes, offset) {
+    return (
+      bytes[offset] * 0x1000000 +
+      (bytes[offset + 1] << 16) +
+      (bytes[offset + 2] << 8) +
+      bytes[offset + 3]
+    ) >>> 0;
+  }
+
+  function writeUint32(value) {
+    return new Uint8Array([
+      (value >>> 24) & 0xff,
+      (value >>> 16) & 0xff,
+      (value >>> 8) & 0xff,
+      value & 0xff
+    ]);
+  }
+
+  function crc32(bytes) {
+    let checksum = 0xffffffff;
+    bytes.forEach((byte) => {
+      checksum = crcTable[(checksum ^ byte) & 0xff] ^ (checksum >>> 8);
+    });
+    return (checksum ^ 0xffffffff) >>> 0;
+  }
+
+  function chunks(bytes) {
+    if (SIGNATURE.some((byte, index) => bytes[index] !== byte)) throw new Error("Not a PNG file");
+
+    const result = [];
+    let offset = SIGNATURE.length;
+    while (offset < bytes.length) {
+      if (offset + 12 > bytes.length) throw new Error("PNG chunk is truncated");
+      const length = readUint32(bytes, offset);
+      const end = offset + 12 + length;
+      if (end > bytes.length) throw new Error("PNG chunk is truncated");
+
+      const typeBytes = bytes.slice(offset + 4, offset + 8);
+      const data = bytes.slice(offset + 8, offset + 8 + length);
+      const checksum = readUint32(bytes, offset + 8 + length);
+      if (crc32(concatenate([typeBytes, data])) !== checksum) throw new Error("PNG chunk checksum is invalid");
+
+      const type = String.fromCharCode(...typeBytes);
+      result.push({ type, data, offset, end });
+      offset = end;
+      if (type === "IEND") return result;
+    }
+    throw new Error("PNG ended before its IEND chunk");
+  }
+
+  function createChunk(type, data) {
+    const typeBytes = encoder.encode(type);
+    return concatenate([
+      writeUint32(data.length),
+      typeBytes,
+      data,
+      writeUint32(crc32(concatenate([typeBytes, data])))
+    ]);
+  }
+
+  function metadataData(documentData) {
+    return concatenate([
+      encoder.encode(KEYWORD),
+      new Uint8Array(5),
+      encoder.encode(JSON.stringify(documentData))
+    ]);
+  }
+
+  function embedDocument(pngBytes, documentData) {
+    const parsedChunks = chunks(pngBytes);
+    const endChunk = parsedChunks.find((chunk) => chunk.type === "IEND");
+    const metadataChunk = createChunk("iTXt", metadataData(documentData));
+    return concatenate([
+      pngBytes.slice(0, endChunk.offset),
+      metadataChunk,
+      pngBytes.slice(endChunk.offset)
+    ]);
+  }
+
+  function extractDocument(pngBytes) {
+    const prefix = metadataData({}).slice(0, encoder.encode(KEYWORD).length + 5);
+    let json;
+    chunks(pngBytes).forEach((chunk) => {
+      const matches = chunk.type === "iTXt" && prefix.every((byte, index) => chunk.data[index] === byte);
+      if (matches) json = decoder.decode(chunk.data.slice(prefix.length));
+    });
+    if (!json) throw new Error("PNG does not contain an editable CanvasERD diagram");
+    return JSON.parse(json);
+  }
+
+  function bytesFromDataUrl(dataUrl) {
+    const marker = "data:image/png;base64,";
+    if (!dataUrl.startsWith(marker)) throw new Error("Expected a PNG data URL");
+    const binary = atob(dataUrl.slice(marker.length));
+    return Uint8Array.from(binary, (character) => character.charCodeAt(0));
+  }
+
+  function exportMultiplier(width, height) {
+    return Math.min(
+      1,
+      MAX_EXPORT_SIDE / width,
+      MAX_EXPORT_SIDE / height,
+      Math.sqrt(MAX_EXPORT_PIXELS / (width * height))
+    );
+  }
+
+  return {
+    embedDocument,
+    extractDocument,
+    bytesFromDataUrl,
+    exportMultiplier
+  };
+});

data/lib/canvas_erd/web/styles.css

@@ -0,0 +1,439 @@
+:root {
+  color: #1f2937;
+  background: #f3f5f8;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+html,
+body,
+.app-shell {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  min-height: 2.25rem;
+  border: 1px solid #cbd3df;
+  border-radius: 0.45rem;
+  color: #263447;
+  background: #ffffff;
+  cursor: pointer;
+  padding: 0.35rem 0.75rem;
+}
+
+button:hover {
+  border-color: #91a1b8;
+  background: #f8fafc;
+}
+
+.icon-button[aria-pressed="true"] {
+  border-color: #2563eb;
+  color: #ffffff;
+  background: #2563eb;
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+#diagram-name,
+#saved-diagrams {
+  min-height: 2.25rem;
+  border: 1px solid #cbd3df;
+  border-radius: 0.45rem;
+  color: #263447;
+  background: #ffffff;
+  padding: 0.35rem 0.5rem;
+}
+
+#diagram-name {
+  width: 18rem;
+  max-width: 40vw;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+#saved-diagrams {
+  width: 12rem;
+  max-width: 20vw;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.diagram-toolbar {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  max-width: calc(100% - 5rem);
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.94);
+  padding: 0.55rem 0.65rem;
+  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.12);
+}
+
+.diagram-identity {
+  min-width: 0;
+}
+
+.diagram-name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.diagram-name-row h1 {
+  margin: 0;
+  overflow: hidden;
+  color: #172554;
+  font-size: 1.15rem;
+  letter-spacing: -0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diagram-identity p {
+  margin: 0.2rem 0 0;
+  overflow: hidden;
+  color: #66758a;
+  font-size: 0.78rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toolbar-actions,
+.button-group,
+.selection-actions,
+.sidebar-heading,
+.sidebar-actions,
+.canvas-footer,
+.canvas-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.icon-button {
+  width: 2.35rem;
+  flex: 0 0 auto;
+  padding: 0;
+}
+
+.icon-button svg {
+  width: 1.15rem;
+  height: 1.15rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.icon-button.compact,
+.icon-button.name-edit {
+  width: 1.9rem;
+  min-height: 1.9rem;
+}
+
+.icon-button.name-edit {
+  border-color: transparent;
+  background: transparent;
+}
+
+.button-group {
+  gap: 0;
+}
+
+.button-group button {
+  width: 2.35rem;
+  border-radius: 0;
+  padding: 0;
+  font-size: 1.25rem;
+}
+
+.button-group button:first-child {
+  border-radius: 0.45rem 0 0 0.45rem;
+}
+
+.button-group button:last-child {
+  margin-left: -1px;
+  border-radius: 0 0.45rem 0.45rem 0;
+}
+
+.workspace {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.sidebar {
+  position: absolute;
+  top: 6.25rem;
+  bottom: 3.75rem;
+  left: 0.75rem;
+  z-index: 2;
+  display: flex;
+  width: 17rem;
+  min-height: 0;
+  flex-direction: column;
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.94);
+  padding: 1rem;
+  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.12);
+}
+
+.sidebar-heading {
+  justify-content: space-between;
+  margin-bottom: 0.45rem;
+}
+
+.sidebar-content {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.sidebar.collapsed {
+  display: none;
+}
+
+.search-label {
+  color: #334155;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+#table-search {
+  width: 100%;
+  min-height: 2.4rem;
+  border: 1px solid #cbd3df;
+  border-radius: 0.45rem;
+  color: #1f2937;
+  background: #ffffff;
+  padding: 0.45rem 0.65rem;
+}
+
+.selection-actions {
+  margin: 0.55rem 0 0.65rem;
+}
+
+.selection-actions button {
+  min-height: 1.9rem;
+  padding: 0.2rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.table-list {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.table-option {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 2rem;
+  border-radius: 0.35rem;
+  cursor: pointer;
+  padding: 0.25rem 0.35rem;
+  font-size: 0.82rem;
+}
+
+.table-option:hover {
+  background: #f1f5f9;
+}
+
+.table-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-option input {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  accent-color: #2563eb;
+}
+
+.canvas-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background-color: #f7f8fb;
+  background-image: radial-gradient(#cbd4e1 0.8px, transparent 0.8px);
+  background-size: 20px 20px;
+}
+
+.canvas-tools {
+  position: absolute;
+  bottom: 0.75rem;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.94);
+  padding: 0.25rem;
+  transform: translateX(-50%);
+  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.12);
+}
+
+.canvas-panel .canvas-container {
+  position: absolute !important;
+  inset: 0;
+}
+
+.canvas-footer {
+  position: absolute;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 1;
+  justify-content: space-between;
+}
+
+.canvas-brand {
+  color: #64748b;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.canvas-brand:hover {
+  color: #243b63;
+  text-decoration: underline;
+}
+
+.shortcut-panel {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 3.75rem;
+  z-index: 2;
+  width: 18rem;
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.96);
+  padding: 0.8rem;
+  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.12);
+}
+
+.shortcut-panel h2 {
+  margin: 0 0 0.65rem;
+  color: #172554;
+  font-size: 0.9rem;
+}
+
+.shortcut-panel dl {
+  margin: 0;
+}
+
+.shortcut-panel dl div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-height: 1.8rem;
+  font-size: 0.76rem;
+}
+
+.shortcut-panel dt {
+  color: #526277;
+}
+
+.shortcut-panel dd {
+  margin: 0;
+  white-space: nowrap;
+}
+
+kbd {
+  border: 1px solid #cbd3df;
+  border-radius: 0.25rem;
+  color: #263447;
+  background: #f8fafc;
+  padding: 0.08rem 0.3rem;
+  font: 0.7rem ui-monospace, SFMono-Regular, Menlo, monospace;
+  box-shadow: 0 1px 0 #cbd3df;
+}
+
+.notice {
+  position: absolute;
+  top: 0.75rem;
+  left: 50%;
+  z-index: 1;
+  border: 1px solid #bfdbfe;
+  border-radius: 0.45rem;
+  color: #1e3a5f;
+  background: #eff6ff;
+  padding: 0.5rem 0.7rem;
+  font-size: 0.78rem;
+  transform: translateX(-50%);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
+}
+
+.notice.error {
+  color: #991b1b;
+  border-color: #fecaca;
+  background: #fff7f7;
+}
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border: 1px solid #d6deea;
+  border-radius: 0.6rem;
+  color: #526277;
+  background: #ffffff;
+  padding: 0.8rem 1rem;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
+}
+
+.loading.error {
+  color: #991b1b;
+  border-color: #fecaca;
+  background: #fff7f7;
+}