canvas_erd 0.2.0 → 0.3.0

data/lib/canvas_erd/web/document.js

@@ -25,6 +25,7 @@
     paragraph: Object.freeze({ fontFamily: "Arial", fontSize: 15, fontWeight: "normal", lineHeight: 1.25 }),
     code: Object.freeze({ fontFamily: "Courier New", fontSize: 14, fontWeight: "normal", lineHeight: 1.2 })
   });
+  const CODE_FONT_SIZES = Object.freeze({ small: 12, medium: 14, large: 18 });
   const DEFAULT_TABLE_HEADER_COLOR = "#243b63";
   const DEFAULT_TABLE_HEADER_COLORS = DEFAULT_FOREGROUND_COLORS;
   const DEFAULT_ARROW_FORMATTING = Object.freeze({
@@ -305,6 +306,115 @@
     };
   }
 
+  function codeFontSize(block) {
+    return CODE_FONT_SIZES[block.size] || CODE_FONT_SIZES.medium;
+  }
+
+  function codeCanvasGeometry(block) {
+    const style = NOTE_PARAGRAPH_STYLES.code;
+    return {
+      left: block.x,
+      top: block.y,
+      width: block.width,
+      angle: block.angle ?? 0,
+      fontFamily: style.fontFamily,
+      fontSize: codeFontSize(block),
+      lineHeight: style.lineHeight
+    };
+  }
+
+  function codeStateGeometry(object) {
+    return {
+      x: object.left,
+      y: object.top,
+      width: object.width * object.scaleX,
+      angle: object.angle,
+      code: object.text
+    };
+  }
+
+  function codeTokenStyles(runs) {
+    const styles = {};
+    let line = 0;
+    let character = 0;
+    runs.forEach(([text, style]) => {
+      text.split("\n").forEach((segment, index) => {
+        if (index > 0) {
+          line += 1;
+          character = 0;
+        }
+        Array.from(segment).forEach(() => {
+          styles[line] = styles[line] || {};
+          styles[line][character] = { ...style };
+          character += 1;
+        });
+      });
+    });
+    return styles;
+  }
+
+  function sourceFromFields(path, startLine, endLine) {
+    const trimmed = String(path || "").trim();
+    if (!trimmed) return null;
+    const lineNumber = (value) => {
+      const number = Number.parseInt(value, 10);
+      return number > 0 ? number : null;
+    };
+    return { path: trimmed, startLine: lineNumber(startLine), endLine: lineNumber(endLine) };
+  }
+
+  function codeLineLabels(block, lineCount) {
+    if (block.source?.model) {
+      return Array.from({ length: lineCount }, (_, index) => block.lineNumbers?.[index] ?? null);
+    }
+    const first = block.source?.startLine || 1;
+    return Array.from({ length: lineCount }, (_, index) => first + index);
+  }
+
+  function codeGutterWidth(labels, fontSize) {
+    const digits = Math.max(1, ...labels.filter((label) => label !== null).map((label) => String(label).length));
+    return (digits + 2) * fontSize * 0.6;
+  }
+
+  function codeRowAt(rowHeights, y) {
+    let top = 0;
+    for (let index = 0; index < rowHeights.length; index += 1) {
+      if (y >= top && y < top + rowHeights[index]) return index;
+      top += rowHeights[index];
+    }
+    return -1;
+  }
+
+  function toggleHighlightedLine(lines = [], label) {
+    if (lines.includes(label)) return lines.filter((line) => line !== label);
+    return [...lines, label].sort((first, second) => first - second);
+  }
+
+  function highlightLineRange(lines = [], labels, anchor, label) {
+    const start = labels.indexOf(anchor);
+    const end = labels.indexOf(label);
+    if (start < 0 || end < 0) return toggleHighlightedLine(lines, label);
+
+    const range = labels.slice(Math.min(start, end), Math.max(start, end) + 1).filter((line) => line !== null);
+    if (!lines.includes(anchor)) return lines.filter((line) => !range.includes(line));
+    return [...new Set([...lines, ...range])].sort((first, second) => first - second);
+  }
+
+  function modelDetailBlock(codeBlocks, entityId, detail) {
+    return codeBlocks.find((block) => block.source?.model === entityId && block.source.detail === detail) || null;
+  }
+
+  function modelDetailOrigin(tablePosition) {
+    return { x: tablePosition.x + CARD_WIDTH + 80, y: tablePosition.y };
+  }
+
+  function sourceReferenceLabel(source) {
+    if (source.model) return `${source.model} ${source.detail}`;
+    if (!source.startLine && !source.endLine) return source.path;
+    if (source.startLine === source.endLine) return `${source.path}:${source.startLine}`;
+    return `${source.path}:${source.startLine || 1}-${source.endLine || "end"}`;
+  }
+
   function erdFilename(value) {
     const basename = String(value).trim().replace(/(?:\.erd)?\.png$/i, "");
     return `${basename || "diagram"}.erd.png`;
@@ -330,6 +440,7 @@
 
     return {
       n: "addNote",
+      c: "addCode",
       a: "arrow",
       t: "toggleTables",
       l: "layoutTables",
@@ -398,6 +509,7 @@
   function arrowAttachment(target) {
     if (target?.canvasErdType === "entity") return { type: "entity", id: target.entityId };
     if (target?.canvasErdType === "note") return { type: "note", id: target.noteId };
+    if (target?.canvasErdType === "code") return { type: "code", id: target.codeBlockId };
     return null;
   }
 
@@ -482,6 +594,7 @@
       tableHeaderColors: {},
       frames: [],
       notes: [],
+      codeBlocks: [],
       arrows: []
     };
   }
@@ -544,6 +657,10 @@
         tableHeaderColors: { ...(state.tableHeaderColors || {}) },
         frames: (state.frames || []).map((frame) => ({ ...frame })),
         notes: state.notes.map((note) => ({ ...note })),
+        codeBlocks: (state.codeBlocks || []).map((block) => ({
+          ...block,
+          source: block.source ? { ...block.source } : null
+        })),
         arrows: (state.arrows || []).map((arrow) => ({
           ...arrow,
           start: { ...arrow.start, attachment: arrow.start.attachment ? { ...arrow.start.attachment } : null },
@@ -834,6 +951,20 @@
     frameLabelCanvasStyle,
     noteCanvasGeometry,
     noteStateGeometry,
+    CODE_FONT_SIZES,
+    codeFontSize,
+    codeCanvasGeometry,
+    codeStateGeometry,
+    codeTokenStyles,
+    sourceFromFields,
+    sourceReferenceLabel,
+    codeLineLabels,
+    codeGutterWidth,
+    codeRowAt,
+    toggleHighlightedLine,
+    highlightLineRange,
+    modelDetailBlock,
+    modelDetailOrigin,
     erdFilename,
     diagramName,
     confirmDiscardChanges,

data/lib/canvas_erd/web/index.html

@@ -66,6 +66,7 @@
               <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>Add code at cursor</dt><dd><kbd>C</kbd></dd></div>
               <div><dt>Bold note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>B</kbd></dd></div>
               <div><dt>Italic note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>I</kbd></dd></div>
               <div><dt>Underline note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>U</kbd></dd></div>
@@ -225,6 +226,61 @@
               </select>
             </label>
           </div>
+          <div id="code-formatting" class="code-formatting" role="toolbar" aria-label="Code formatting" hidden>
+            <label class="note-format-field">
+              <span>Language</span>
+              <select id="code-language" aria-label="Code language"></select>
+            </label>
+            <label class="note-format-field">
+              <span>Size</span>
+              <select id="code-size" aria-label="Code font size">
+                <option value="small">Small</option>
+                <option value="medium" selected>Medium</option>
+                <option value="large">Large</option>
+              </select>
+            </label>
+            <button id="code-line-numbers"class="format-button" type="button" aria-label="Line numbers" title="Line numbers" aria-pressed="false">#</button>
+            <span id="code-source" class="code-source" hidden></span>
+            <div id="code-source-fields" class="code-source-fields" hidden>
+              <label class="note-format-field">
+                <span>Path</span>
+                <input id="code-source-path" class="source-path-input" type="text" list="source-file-paths" autocomplete="off" aria-label="Source file path">
+              </label>
+              <label class="note-format-field">
+                <span>Lines</span>
+                <input id="code-source-start" class="line-input" type="number" min="1" placeholder="1" aria-label="Start line">
+              </label>
+              <label class="note-format-field">
+                <span>to</span>
+                <input id="code-source-end" class="line-input" type="number" min="1" placeholder="end" aria-label="End line">
+              </label>
+            </div>
+          </div>
+          <datalist id="source-file-paths"></datalist>
+          <dialog id="source-dialog" class="source-dialog" aria-labelledby="source-dialog-title">
+            <form id="source-form">
+              <h2 id="source-dialog-title">Add source file</h2>
+              <label class="source-field">
+                <span>Path</span>
+                <input id="source-path" class="source-path-input" type="text" list="source-file-paths" autocomplete="off" placeholder="app/models/book.rb" required>
+              </label>
+              <div class="source-lines">
+                <label class="source-field">
+                  <span>Start line</span>
+                  <input id="source-start" class="line-input" type="number" min="1" placeholder="1">
+                </label>
+                <label class="source-field">
+                  <span>End line</span>
+                  <input id="source-end" class="line-input" type="number" min="1" placeholder="end">
+                </label>
+              </div>
+              <p id="source-error" class="source-error" role="alert" hidden></p>
+              <div class="source-actions">
+                <button id="source-cancel" type="button">Cancel</button>
+                <button id="source-submit" type="submit">Add</button>
+              </div>
+            </form>
+          </dialog>
           <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>
@@ -238,6 +294,12 @@
             <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-code" class="icon-button" type="button" aria-label="Add code" title="Add code (C)">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M13.5 6L10 18.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 8.5L3 12L6.5 15.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.5 8.5L21 12L17.5 15.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+            </button>
+            <button id="add-source" class="icon-button" type="button" aria-label="Add source file" title="Add source file">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><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="M8 10L16 10" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 18L16 18" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 14L12 14" 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="add-arrow" class="icon-button" type="button" aria-label="Arrow tool" title="Arrow tool (A) · Select 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>

data/lib/canvas_erd/web/styles.css

@@ -324,7 +324,8 @@ select:focus-visible {
 .note-formatting,
 .table-formatting,
 .arrow-formatting,
-.frame-formatting {
+.frame-formatting,
+.code-formatting {
   position: absolute;
   bottom: 4rem;
   left: 50%;
@@ -515,7 +516,9 @@ select:focus-visible {
   padding: 0.2rem 0.35rem;
 }
 
-#arrow-stroke-width {
+#arrow-stroke-width,
+.source-path-input,
+.line-input {
   width: 4rem;
   min-height: 1.9rem;
   border: 1px solid #cbd3df;
@@ -645,3 +648,87 @@ kbd {
   border-color: #fecaca;
   background: #fff7f7;
 }
+
+.code-source {
+  color: #526277;
+  padding: 0 0.35rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+}
+
+.detail-toggle {
+  min-height: 1.4rem;
+  margin-left: auto;
+  border-radius: 999px;
+  color: #526277;
+  padding: 0 0.5rem;
+  font-size: 0.7rem;
+}
+
+.detail-toggle[aria-pressed="true"] {
+  border-color: #2563eb;
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+
+.code-source-fields {
+  display: flex;
+  align-items: center;
+}
+
+.note-format-field .source-path-input {
+  width: 18rem;
+}
+
+.source-dialog {
+  width: min(32rem, calc(100% - 2rem));
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  color: #263447;
+  padding: 1rem;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
+}
+
+.source-dialog::backdrop {
+  background: rgba(15, 23, 42, 0.2);
+}
+
+.source-dialog h2 {
+  margin: 0 0 0.8rem;
+  color: #172554;
+  font-size: 0.95rem;
+}
+
+.source-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  color: #526277;
+  font-size: 0.75rem;
+}
+
+.source-dialog .source-path-input,
+.source-dialog .line-input {
+  width: 100%;
+  min-height: 2.25rem;
+}
+
+.source-lines {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.source-error {
+  margin: 0.75rem 0 0;
+  color: #b91c1c;
+  font-size: 0.8rem;
+}
+
+.source-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}

data/lib/canvas_erd.rb

@@ -5,6 +5,9 @@ require "canvas_erd/diagram"
 require "canvas_erd/schema_provider"
 require "canvas_erd/png_document"
 require "canvas_erd/diagram_store"
+require "canvas_erd/highlighter"
+require "canvas_erd/source_files"
+require "canvas_erd/model_details"
 require "canvas_erd/application_loader"
 require "canvas_erd/browser"
 require "canvas_erd/server"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: canvas_erd
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Marc Heiligers
@@ -43,6 +43,26 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '4'
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -110,9 +130,12 @@ files:
 - lib/canvas_erd/cli.rb
 - lib/canvas_erd/diagram.rb
 - lib/canvas_erd/diagram_store.rb
+- lib/canvas_erd/highlighter.rb
+- lib/canvas_erd/model_details.rb
 - lib/canvas_erd/png_document.rb
 - lib/canvas_erd/schema_provider.rb
 - lib/canvas_erd/server.rb
+- lib/canvas_erd/source_files.rb
 - lib/canvas_erd/version.rb
 - lib/canvas_erd/web/app.js
 - lib/canvas_erd/web/document.js
@@ -142,14 +165,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '3.1'
+      version: '3.3'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.16
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Edit Rails ERD diagrams on an interactive canvas
 test_files: []