canvas_erd 0.2.0 → 0.3.0

data/lib/canvas_erd/web/app.js

@@ -56,6 +56,23 @@ const frameColorControl = {
   swatches: document.querySelector("#frame-color-swatches"),
   custom: document.querySelector("#frame-custom-color")
 };
+const codeFormattingElement = document.querySelector("#code-formatting");
+const codeLanguageElement = document.querySelector("#code-language");
+const codeSourceElement = document.querySelector("#code-source");
+const codeLineNumbersButton = document.querySelector("#code-line-numbers");
+const codeSizeElement = document.querySelector("#code-size");
+const codeSourceFieldsElement = document.querySelector("#code-source-fields");
+const codeSourcePathElement = document.querySelector("#code-source-path");
+const codeSourceStartElement = document.querySelector("#code-source-start");
+const codeSourceEndElement = document.querySelector("#code-source-end");
+const sourceFilePathsElement = document.querySelector("#source-file-paths");
+const sourceDialogElement = document.querySelector("#source-dialog");
+const sourceFormElement = document.querySelector("#source-form");
+const sourcePathElement = document.querySelector("#source-path");
+const sourceStartElement = document.querySelector("#source-start");
+const sourceEndElement = document.querySelector("#source-end");
+const sourceErrorElement = document.querySelector("#source-error");
+const sourceSubmitButton = document.querySelector("#source-submit");
 const noteColorControls = [
   {
     property: "fill",
@@ -90,6 +107,8 @@ let lastCanvasPointer = null;
 const tableObjects = new Map();
 let relationshipObjects = [];
 const noteObjects = new Map();
+const codeObjects = new Map();
+const codeHighlightTimers = new Map();
 const arrowObjects = new Map();
 const frameObjects = new Map();
 const frameLabelObjects = new Map();
@@ -107,6 +126,10 @@ let frameMode = false;
 let drawingFrame = null;
 let framePreview = null;
 let lastNoteFormatting = CanvasERDDocument.inheritedNoteFormatting();
+let lastCodeLanguage = "ruby";
+let highlighting = { foreground: "#24292f", background: "#f6f8fa", languages: [] };
+let modelDetails = {};
+let sourceDialogPosition = null;
 const arrowEndpointHandles = new Map();
 const changeTracker = CanvasERDDocument.createChangeTracker(updateSaveButton);
 const layoutEngine = new ELK({ workerUrl: "/assets/elk-worker.min.js" });
@@ -208,7 +231,7 @@ function updateTableCaching() {
 
 function updateNoteSelectionPadding() {
   const padding = CanvasERDDocument.noteSelectionPadding(canvas.getZoom());
-  noteObjects.forEach((note) => {
+  [...noteObjects.values(), ...codeObjects.values()].forEach((note) => {
     if (note.padding === padding) return;
     note.padding = padding;
     note.setCoords();
@@ -569,29 +592,372 @@ function createNoteObject(note) {
     transparentCorners: false,
     lockScalingY: true
   }));
-  object._renderBackground = function (context) {
-    if (!this.backgroundColor) return;
-
-    const dimensions = this._getNonTransformedDimensions();
-    const bounds = CanvasERDDocument.paddedBackgroundBounds(
-      dimensions.x,
-      dimensions.y,
-      CanvasERDDocument.NOTE_PADDING
-    );
-    context.fillStyle = this.backgroundColor;
-    context.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
-    this._removeShadow(context);
-  };
+  object._renderBackground = renderPaddedBackground;
   object.canvasErdType = "note";
   object.noteId = note.id;
   return object;
 }
 
+function renderPaddedBackground(context) {
+  if (!this.backgroundColor) return;
+
+  const dimensions = this._getNonTransformedDimensions();
+  const bounds = CanvasERDDocument.paddedBackgroundBounds(
+    dimensions.x,
+    dimensions.y,
+    CanvasERDDocument.NOTE_PADDING
+  );
+  context.fillStyle = this.backgroundColor;
+  context.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
+  this._removeShadow(context);
+}
+
 function activeNoteObject() {
   const active = canvas?.getActiveObject();
   return active?.canvasErdType === "note" ? active : null;
 }
 
+class CodeTextbox extends fabric.Textbox {
+  _getLeftOffset() {
+    return super._getLeftOffset() + (this.gutterWidth || 0);
+  }
+
+  _wrapText(lines, desiredWidth) {
+    const wrapped = super._wrapText(lines, desiredWidth - (this.gutterWidth || 0));
+    this.dynamicMinWidth += this.gutterWidth || 0;
+    return wrapped;
+  }
+
+  gutterLabelAt(event) {
+    const block = findCodeBlock(this.codeBlockId);
+    if (!this.gutterWidth || !block || !this.canvas) return undefined;
+
+    const point = this.canvas.getScenePoint(event).transform(fabric.util.invertTransform(this.calcTransformMatrix()));
+    const x = point.x + this.width / 2;
+    if (x < -CanvasERDDocument.NOTE_PADDING || x > this.gutterWidth - this.fontSize * 0.3) return undefined;
+
+    const row = CanvasERDDocument.codeRowAt(
+      this._textLines.map((_, index) => this.getHeightOfLine(index)),
+      point.y - this._getTopOffset()
+    );
+    if (row < 0) return null;
+    const labels = CanvasERDDocument.codeLineLabels(block, this.text.split("\n").length);
+    return labels[this._styleMap[row].line] ?? null;
+  }
+
+  mouseUpHandler(options) {
+    if (this.gutterLabelAt(options.e) !== undefined) return;
+    super.mouseUpHandler(options);
+  }
+}
+
+function toggleCodeLineHighlight(object, label, extend) {
+  const block = findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  const labels = CanvasERDDocument.codeLineLabels(block, object.text.split("\n").length);
+  block.highlightedLines = extend && object.highlightAnchor !== undefined
+    ? CanvasERDDocument.highlightLineRange(block.highlightedLines, labels, object.highlightAnchor, label)
+    : CanvasERDDocument.toggleHighlightedLine(block.highlightedLines, label);
+  object.highlightAnchor = label;
+  canvas.requestRenderAll();
+  markDirty();
+}
+
+function codeGutterWidth(block, text) {
+  if (!block.showLineNumbers) return 0;
+  const labels = CanvasERDDocument.codeLineLabels(block, text.split("\n").length);
+  return CanvasERDDocument.codeGutterWidth(labels, CanvasERDDocument.codeFontSize(block));
+}
+
+function renderCodeBackground(context) {
+  renderPaddedBackground.call(this, context);
+  const block = findCodeBlock(this.codeBlockId);
+  if (!block) return;
+
+  const labels = CanvasERDDocument.codeLineLabels(block, this.text.split("\n").length);
+  const highlighted = new Set(block.highlightedLines || []);
+  const dimensions = this._getNonTransformedDimensions();
+  const padding = CanvasERDDocument.NOTE_PADDING;
+  context.save();
+  if (highlighted.size > 0) {
+    let rowTop = this._getTopOffset();
+    context.fillStyle = "#fff8c5";
+    this._textLines.forEach((_, index) => {
+      const height = this.getHeightOfLine(index);
+      if (highlighted.has(labels[this._styleMap[index].line])) {
+        context.fillRect(-dimensions.x / 2 - padding, rowTop, dimensions.x + padding * 2, height);
+      }
+      rowTop += height;
+    });
+  }
+  if (!this.gutterWidth) {
+    context.restore();
+    return;
+  }
+
+  const right = -this.width / 2 + this.gutterWidth - this.fontSize * 0.6;
+  const separator = -this.width / 2 + this.gutterWidth - this.fontSize * 0.3;
+  let top = this._getTopOffset();
+  context.strokeStyle = "#d0d7de";
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(separator, -dimensions.y / 2 - CanvasERDDocument.NOTE_PADDING);
+  context.lineTo(separator, dimensions.y / 2 + CanvasERDDocument.NOTE_PADDING);
+  context.stroke();
+  context.font = `${this.fontSize}px ${this.fontFamily}`;
+  context.fillStyle = "#8c959f";
+  context.textAlign = "right";
+  this._textLines.forEach((_, index) => {
+    const line = this._styleMap[index];
+    const label = line.offset === 0 ? labels[line.line] : null;
+    if (label !== null && label !== undefined) {
+      const baseline = top + this.getHeightOfLineImpl(index) - this.fontSize * this._fontSizeFraction;
+      context.fillText(String(label), right, baseline);
+    }
+    top += this.getHeightOfLine(index);
+  });
+  context.restore();
+}
+
+function updateCodeGutter(object) {
+  const block = findCodeBlock(object.codeBlockId);
+  const width = block ? codeGutterWidth(block, object.text) : 0;
+  if ((object.gutterWidth || 0) === width) return;
+  object.gutterWidth = width;
+  object.initDimensions();
+  object.setCoords();
+}
+
+function toggleCodeLineNumbers() {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  block.showLineNumbers = !block.showLineNumbers;
+  const previousWidth = object.gutterWidth || 0;
+  object.gutterWidth = codeGutterWidth(block, object.text);
+  object.set({ width: object.width + object.gutterWidth - previousWidth });
+  object.initDimensions();
+  object.setCoords();
+  updateObjectState(object);
+  renderArrows();
+  updateCodeFormattingControls();
+}
+
+function applyCodeSize(size) {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  const previousFontSize = CanvasERDDocument.codeFontSize(block);
+  block.size = size;
+  const fontSize = CanvasERDDocument.codeFontSize(block);
+  object.set({ fontSize, width: object.width * fontSize / previousFontSize });
+  object.gutterWidth = codeGutterWidth(block, object.text);
+  object.initDimensions();
+  object.setCoords();
+  updateObjectState(object);
+  renderArrows();
+}
+
+function createCodeObject(block) {
+  const borderColor = CanvasERDDocument.noteBorderColor(highlighting.background);
+  const object = new CodeTextbox(block.code, CanvasERDDocument.uncachedText({
+    ...CanvasERDDocument.codeCanvasGeometry(block),
+    gutterWidth: codeGutterWidth(block, block.code),
+    fill: highlighting.foreground,
+    backgroundColor: highlighting.background,
+    editable: !block.source,
+    padding: CanvasERDDocument.noteSelectionPadding(canvas.getZoom()),
+    borderColor,
+    editingBorderColor: borderColor,
+    cornerColor: borderColor,
+    transparentCorners: false,
+    lockScalingY: true
+  }));
+  object._renderBackground = renderCodeBackground;
+  object.canvasErdType = "code";
+  object.codeBlockId = block.id;
+  highlightCodeObject(object);
+  return object;
+}
+
+function findCodeBlock(id) {
+  return state.codeBlocks.find((candidate) => candidate.id === id);
+}
+
+function activeCodeObject() {
+  const active = canvas?.getActiveObject();
+  return active?.canvasErdType === "code" ? active : null;
+}
+
+function scheduleCodeHighlight(object, delay = 300) {
+  clearTimeout(codeHighlightTimers.get(object.codeBlockId));
+  codeHighlightTimers.set(object.codeBlockId, setTimeout(() => highlightCodeObject(object), delay));
+}
+
+async function highlightCodeObject(object) {
+  codeHighlightTimers.delete(object.codeBlockId);
+  const block = findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  const code = object.text;
+  try {
+    const response = await fetch("/api/highlight", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ code, language: block.language })
+    });
+    if (!response.ok) throw new Error(await response.text());
+
+    const result = await response.json();
+    if (codeObjects.get(block.id) !== object || object.text !== code) return;
+    if (result.code !== code) {
+      if (object.isEditing) return;
+      object.set({ text: result.code });
+      block.code = result.code;
+      markDirty();
+    }
+    object.styles = CanvasERDDocument.codeTokenStyles(result.runs);
+    object.initDimensions();
+    object.setCoords();
+    canvas.requestRenderAll();
+  } catch (error) {
+    showNotice(`Could not highlight code: ${error.message}`, true);
+  }
+}
+
+function updateCodeFormattingControls() {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  codeFormattingElement.hidden = !block;
+  if (!block) return;
+
+  lastCodeLanguage = block.language;
+  codeLanguageElement.value = block.language;
+  codeLineNumbersButton.setAttribute("aria-pressed", String(Boolean(block.showLineNumbers)));
+  codeSizeElement.value = block.size || "medium";
+  const fileSource = block.source?.path ? block.source : null;
+  codeSourceElement.hidden = !block.source?.model;
+  codeSourceElement.textContent = block.source?.model ? CanvasERDDocument.sourceReferenceLabel(block.source) : "";
+  codeSourceFieldsElement.hidden = !fileSource;
+  codeSourcePathElement.value = fileSource?.path || "";
+  codeSourceStartElement.value = fileSource?.startLine || "";
+  codeSourceEndElement.value = fileSource?.endLine || "";
+}
+
+async function applyCodeSource() {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block?.source?.path) return;
+
+  const source = CanvasERDDocument.sourceFromFields(
+    codeSourcePathElement.value,
+    codeSourceStartElement.value,
+    codeSourceEndElement.value
+  );
+  try {
+    if (!source) throw new Error("Enter a source file path.");
+    const result = await fetchSource(source);
+    if (source.path !== block.source.path) block.language = result.language;
+    block.source = source;
+    replaceCodeText(object, block, result.code);
+    markDirty();
+  } catch (error) {
+    showNotice(`Could not change source file: ${error.message}`, true);
+  }
+  if (activeCodeObject() === object) updateCodeFormattingControls();
+}
+
+function replaceCodeText(object, block, code) {
+  block.code = code;
+  object.set({ text: code });
+  object.styles = {};
+  updateCodeGutter(object);
+  object.setCoords();
+  renderArrows();
+  highlightCodeObject(object);
+}
+
+async function loadSourceFilePaths() {
+  try {
+    const response = await fetch("/api/source_files", { cache: "no-store" });
+    if (!response.ok) throw new Error(await response.text());
+
+    const result = await response.json();
+    sourceFilePathsElement.replaceChildren(...result.paths.map((path) => {
+      const option = document.createElement("option");
+      option.value = path;
+      return option;
+    }));
+  } catch (error) {
+    showNotice(`Could not list source files: ${error.message}`, true);
+  }
+}
+
+function renderCodeLanguages() {
+  codeLanguageElement.replaceChildren(...highlighting.languages.map((language) => {
+    const option = document.createElement("option");
+    option.value = language.tag;
+    option.textContent = language.title;
+    return option;
+  }));
+}
+
+function applyCodeLanguage(language) {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  block.language = language;
+  lastCodeLanguage = language;
+  highlightCodeObject(object);
+  markDirty();
+}
+
+function renderCodeBlocks() {
+  state.codeBlocks.forEach((block) => {
+    const object = createCodeObject(block);
+    codeObjects.set(block.id, object);
+    canvas.add(object);
+  });
+}
+
+function sourceUrl(source) {
+  if (source.model) {
+    return `/api/model_detail?${new URLSearchParams({ model: source.model, detail: source.detail })}`;
+  }
+
+  const query = new URLSearchParams({ path: source.path });
+  if (source.startLine) query.set("start", source.startLine);
+  if (source.endLine) query.set("end", source.endLine);
+  return `/api/source?${query}`;
+}
+
+async function fetchSource(source) {
+  const response = await fetch(sourceUrl(source), { cache: "no-store" });
+  if (!response.ok) throw new Error(await response.text());
+  return response.json();
+}
+
+async function refreshSourceCodeBlocks() {
+  const failures = [];
+  await Promise.all(state.codeBlocks.filter((block) => block.source).map(async (block) => {
+    try {
+      const result = await fetchSource(block.source);
+      const object = codeObjects.get(block.id);
+      if (result.lineNumbers) block.lineNumbers = result.lineNumbers;
+      canvas.requestRenderAll();
+      if (result.code === block.code || !object) return;
+      replaceCodeText(object, block, result.code);
+    } catch (error) {
+      failures.push(`${CanvasERDDocument.sourceReferenceLabel(block.source)}: ${error.message}`);
+    }
+  }));
+  if (failures.length > 0) showNotice(`Could not refresh source files: ${failures.join("; ")}`, true);
+}
+
 function activeTableEntityIds() {
   return CanvasERDDocument.selectedEntityIds(canvas?.getActiveObject());
 }
@@ -980,6 +1346,7 @@ function setFrameMode(active) {
     ...frameLabelObjects.values(),
     ...tableObjects.values(),
     ...noteObjects.values(),
+    ...codeObjects.values(),
     ...arrowObjects.values()
   ].forEach((object) => {
     object.selectable = !active;
@@ -1030,6 +1397,7 @@ function attachmentTarget(attachment) {
   if (!attachment) return null;
   if (attachment.type === "entity") return tableObjects.get(attachment.id);
   if (attachment.type === "note") return noteObjects.get(attachment.id);
+  if (attachment.type === "code") return codeObjects.get(attachment.id);
   return null;
 }
 
@@ -1044,7 +1412,7 @@ function resolveArrowEndpoint(endpoint) {
 }
 
 function attachableTargetAt(point) {
-  const objects = [...noteObjects.values(), ...tableObjects.values()].reverse();
+  const objects = [...noteObjects.values(), ...codeObjects.values(), ...tableObjects.values()].reverse();
   return objects.find((object) => {
     const bounds = object.getBoundingRect();
     return point.x >= bounds.left && point.x <= bounds.left + bounds.width &&
@@ -1220,6 +1588,7 @@ function setArrowMode(active) {
     ...frameLabelObjects.values(),
     ...tableObjects.values(),
     ...noteObjects.values(),
+    ...codeObjects.values(),
     ...arrowObjects.values()
   ].forEach((object) => {
     object.selectable = !active;
@@ -1395,6 +1764,117 @@ function addNote(position = canvas.getVpCenter()) {
   markDirty();
 }
 
+function insertCodeBlock(origin, block) {
+  if (frameMode) cancelFrameDrawing();
+  if (arrowMode) cancelArrowDrawing();
+  if (editingArrowId) finishArrowEndpointEditing();
+  Object.assign(block, {
+    id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `code-${Date.now()}`,
+    x: origin.x,
+    y: origin.y,
+    angle: 0
+  });
+  state.codeBlocks.push(block);
+
+  const object = createCodeObject(block);
+  codeObjects.set(block.id, object);
+  updateModelDetailToggles();
+  canvas.add(object);
+  restackCanvasObjects();
+  canvas.setActiveObject(object);
+  updateCodeFormattingControls();
+  canvas.requestRenderAll();
+  markDirty();
+  return object;
+}
+
+function addCodeBlock(position = canvas.getVpCenter()) {
+  const object = insertCodeBlock(CanvasERDDocument.notePositionAt(position), {
+    code: "# Double-click to edit",
+    width: 360,
+    language: lastCodeLanguage,
+    source: null
+  });
+  object.enterEditing();
+  object.selectAll();
+}
+
+function openSourceDialog(position = canvas.getVpCenter()) {
+  sourceDialogPosition = position;
+  sourceFormElement.reset();
+  sourceErrorElement.hidden = true;
+  sourceSubmitButton.disabled = false;
+  sourceDialogElement.showModal();
+  sourcePathElement.focus();
+  loadSourceFilePaths();
+}
+
+async function addSourceCodeBlock(event) {
+  event.preventDefault();
+  const source = CanvasERDDocument.sourceFromFields(
+    sourcePathElement.value,
+    sourceStartElement.value,
+    sourceEndElement.value
+  );
+  if (!source) return;
+
+  sourceSubmitButton.disabled = true;
+  try {
+    const result = await fetchSource(source);
+    sourceDialogElement.close();
+    insertCodeBlock(
+      CanvasERDDocument.notePositionAt(sourceDialogPosition),
+      { code: result.code, width: 520, language: result.language, source }
+    );
+  } catch (error) {
+    sourceErrorElement.textContent = error.message;
+    sourceErrorElement.hidden = false;
+  } finally {
+    sourceSubmitButton.disabled = false;
+  }
+}
+
+async function toggleModelDetail(entityId, detail) {
+  const existing = CanvasERDDocument.modelDetailBlock(state.codeBlocks, entityId, detail);
+  if (existing) {
+    state.arrows = state.arrows.filter((arrow) => (
+      ![arrow.start, arrow.end].some((endpoint) => endpoint.attachment?.type === "code" && endpoint.attachment.id === existing.id)
+    ));
+    removeCodeBlock(existing.id);
+    return;
+  }
+
+  const source = { model: entityId, detail };
+  try {
+    const result = await fetchSource(source);
+    const origin = CanvasERDDocument.modelDetailOrigin(state.positions[entityId]);
+    const block = {
+      code: result.code,
+      width: 520,
+      language: result.language,
+      lineNumbers: result.lineNumbers,
+      source
+    };
+    insertCodeBlock(origin, block);
+    state.arrows.push({
+      id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `arrow-${Date.now()}`,
+      start: { x: 0, y: 0, attachment: { type: "entity", id: entityId, x: 1, y: 0.5 } },
+      end: { x: 0, y: 0, attachment: { type: "code", id: block.id, x: 0, y: 0.5 } },
+      ...CanvasERDDocument.DEFAULT_ARROW_FORMATTING
+    });
+    renderArrows();
+  } catch (error) {
+    showNotice(`Could not show ${detail} for ${entityId}: ${error.message}`, true);
+  }
+}
+
+function updateModelDetailToggles() {
+  tableListElement.querySelectorAll("[data-detail]").forEach((button) => {
+    const block = CanvasERDDocument.modelDetailBlock(state.codeBlocks, button.dataset.entityId, button.dataset.detail);
+    button.setAttribute("aria-pressed", String(Boolean(block)));
+  });
+}
+
 function updateObjectState(object) {
   if (object.canvasErdType === "entity") {
     state.positions[object.entityId] = { x: object.left, y: object.top };
@@ -1404,6 +1884,11 @@ function updateObjectState(object) {
     if (!note) return;
     Object.assign(note, CanvasERDDocument.noteStateGeometry(object));
     scheduleRelationshipRender();
+  } else if (object.canvasErdType === "code") {
+    const block = findCodeBlock(object.codeBlockId);
+    if (!block) return;
+    Object.assign(block, CanvasERDDocument.codeStateGeometry(object));
+    scheduleRelationshipRender();
   } else if (object.canvasErdType === "frame") {
     const frame = state.frames.find((candidate) => candidate.id === object.frameId);
     if (!frame) return;
@@ -1439,19 +1924,45 @@ function removeActiveFrame() {
   return true;
 }
 
-function removeActiveNote() {
-  const active = canvas.getActiveObject();
-  if (!active || active.canvasErdType !== "note" || active.isEditing) return false;
-
+function detachArrows(type, id) {
   state.arrows.forEach((arrow) => {
     [arrow.start, arrow.end].forEach((endpoint) => {
-      if (endpoint.attachment?.type !== "note" || endpoint.attachment.id !== active.noteId) return;
+      if (endpoint.attachment?.type !== type || endpoint.attachment.id !== id) return;
       const point = resolveArrowEndpoint(endpoint);
       endpoint.x = point.x;
       endpoint.y = point.y;
       endpoint.attachment = null;
     });
   });
+}
+
+function removeActiveCodeBlock() {
+  const active = canvas.getActiveObject();
+  if (!active || active.canvasErdType !== "code" || active.isEditing) return false;
+
+  detachArrows("code", active.codeBlockId);
+  removeCodeBlock(active.codeBlockId);
+  return true;
+}
+
+function removeCodeBlock(id) {
+  const object = codeObjects.get(id);
+  clearTimeout(codeHighlightTimers.get(id));
+  codeHighlightTimers.delete(id);
+  if (canvas.getActiveObject() === object) canvas.discardActiveObject();
+  canvas.remove(object);
+  codeObjects.delete(id);
+  state.codeBlocks = state.codeBlocks.filter((block) => block.id !== id);
+  renderArrows();
+  updateModelDetailToggles();
+  markDirty();
+}
+
+function removeActiveNote() {
+  const active = canvas.getActiveObject();
+  if (!active || active.canvasErdType !== "note" || active.isEditing) return false;
+
+  detachArrows("note", active.noteId);
   canvas.discardActiveObject();
   canvas.remove(active);
   noteObjects.delete(active.noteId);
@@ -1512,9 +2023,24 @@ function renderTableList() {
     const text = document.createElement("span");
     text.textContent = entity.label;
     row.append(checkbox, text);
+    Object.entries(modelDetails[entity.id] || {}).forEach(([detail, count]) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "detail-toggle";
+      button.dataset.entityId = entity.id;
+      button.dataset.detail = detail;
+      button.textContent = detail;
+      button.title = `Show ${detail} (${count})`;
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        toggleModelDetail(entity.id, detail);
+      });
+      row.append(button);
+    });
     fragment.append(row);
   });
   tableListElement.replaceChildren(fragment);
+  updateModelDetailToggles();
 }
 
 function filterTableList() {
@@ -1551,6 +2077,7 @@ async function refreshSchema() {
     applicationSchema = schema;
     markDirty();
     showNotice(CanvasERDDocument.changeSummary(result.changes));
+    await refreshSourceCodeBlocks();
   } catch (error) {
     showNotice(`Could not refresh schema: ${error.message}`, true);
   } finally {
@@ -1672,6 +2199,7 @@ function displayDocument(documentData) {
     ...documentData.state,
     arrows: documentData.state.arrows || [],
     frames: documentData.state.frames || [],
+    codeBlocks: documentData.state.codeBlocks || [],
     tableHeaderColors: documentData.state.tableHeaderColors || {}
   };
   if (frameMode) cancelFrameDrawing();
@@ -1682,6 +2210,7 @@ function displayDocument(documentData) {
   tableObjects.clear();
   relationshipObjects = [];
   noteObjects.clear();
+  codeObjects.clear();
   arrowObjects.clear();
   frameObjects.clear();
   frameLabelObjects.clear();
@@ -1689,6 +2218,7 @@ function displayDocument(documentData) {
   renderFrames();
   renderTables();
   renderNotes();
+  renderCodeBlocks();
   renderArrows();
 
   if (Array.isArray(state.viewportTransform) && state.viewportTransform.length === 6) {
@@ -1756,6 +2286,7 @@ function diagramBounds() {
     ...frameLabelObjects.values(),
     ...tableObjects.values(),
     ...noteObjects.values(),
+    ...codeObjects.values(),
     ...arrowObjects.values(),
     ...relationshipObjects
   ];
@@ -1803,6 +2334,7 @@ function configureCanvasEvents() {
     updateNoteFormattingControls();
     updateTableFormattingControls();
     updateFrameFormattingControls();
+    updateCodeFormattingControls();
   };
   canvas.on("selection:created", selectionChanged);
   canvas.on("selection:updated", selectionChanged);
@@ -1830,6 +2362,16 @@ function configureCanvasEvents() {
   canvas.on("mouse:up", (eventData) => {
     if (arrowMode && drawingArrow) finishArrowDrawing(eventData);
   });
+  canvas.on("mouse:up", ({ target, e, isClick }) => {
+    if (!isClick || target?.canvasErdType !== "code") return;
+    const label = target.gutterLabelAt(e);
+    if (label !== null && label !== undefined) toggleCodeLineHighlight(target, label, e.shiftKey);
+  });
+  canvas.on("mouse:move", ({ target, e }) => {
+    if (target?.canvasErdType !== "code") return;
+    const label = target.gutterLabelAt(e);
+    target.hoverCursor = label !== null && label !== undefined ? "pointer" : null;
+  });
   canvas.on("mouse:down", ({ e, scenePoint }) => {
     if (!frameMode || spacePressed) return;
     const point = scenePoint || canvas.getScenePoint(e);
@@ -1860,7 +2402,14 @@ function configureCanvasEvents() {
     else if (eventData.target.canvasErdType === "arrow-endpoint") updateArrowEndpointHandle(eventData);
     else updateObjectState(eventData.target);
   });
-  canvas.on("text:changed", ({ target }) => updateObjectState(target));
+  canvas.on("text:changed", ({ target }) => {
+    if (target.canvasErdType === "code") updateCodeGutter(target);
+    updateObjectState(target);
+    if (target.canvasErdType === "code") scheduleCodeHighlight(target);
+  });
+  canvas.on("text:editing:exited", ({ target }) => {
+    if (target.canvasErdType === "code") scheduleCodeHighlight(target, 0);
+  });
 
   canvas.on("mouse:wheel", ({ e }) => {
     if (e.ctrlKey) {
@@ -1915,7 +2464,7 @@ function configureCanvasEvents() {
     const acceptsText = ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName) || event.target.isContentEditable;
     const noteFormatting = CanvasERDDocument.noteFormattingShortcut(event);
     const action = CanvasERDDocument.shortcutAction(event);
-    const bareAction = ["addNote", "arrow", "toggleTables", "layoutTables", "zoomIn", "zoomOut", "fit", "help"].includes(action);
+    const bareAction = ["addNote", "addCode", "arrow", "toggleTables", "layoutTables", "zoomIn", "zoomOut", "fit", "help"].includes(action);
 
     if (noteFormatting && activeNoteObject() && (!acceptsText || editing)) {
       event.preventDefault();
@@ -1944,6 +2493,8 @@ function configureCanvasEvents() {
         newDiagram();
       } else if (action === "addNote") {
         addNote(lastCanvasPointer || canvas.getVpCenter());
+      } else if (action === "addCode") {
+        addCodeBlock(lastCanvasPointer || canvas.getVpCenter());
       } else if (action === "arrow") {
         if (arrowMode) cancelArrowDrawing();
         else setArrowMode(true);
@@ -1982,8 +2533,8 @@ function configureCanvasEvents() {
       spacePressed = true;
       canvas.skipTargetFind = true;
       canvas.setCursor("grab");
-    } else if (["Delete", "Backspace"].includes(event.key) && (
-      removeActiveTables() || removeActiveArrows() || removeActiveFrame() || removeActiveNote()
+    } else if (["Delete", "Backspace"].includes(event.key) && !acceptsText && (
+      removeActiveTables() || removeActiveArrows() || removeActiveFrame() || removeActiveNote() || removeActiveCodeBlock()
     )) {
       event.preventDefault();
     }
@@ -2044,6 +2595,17 @@ function configureControls() {
     await loadDiagram(filename);
   });
   document.querySelector("#add-note").addEventListener("click", () => addNote());
+  document.querySelector("#add-code").addEventListener("click", () => addCodeBlock());
+  document.querySelector("#add-source").addEventListener("click", () => openSourceDialog());
+  sourceFormElement.addEventListener("submit", addSourceCodeBlock);
+  document.querySelector("#source-cancel").addEventListener("click", () => sourceDialogElement.close());
+  codeSourcePathElement.addEventListener("focus", loadSourceFilePaths);
+  [codeSourcePathElement, codeSourceStartElement, codeSourceEndElement].forEach((element) => {
+    element.addEventListener("change", applyCodeSource);
+  });
+  codeLanguageElement.addEventListener("change", () => applyCodeLanguage(codeLanguageElement.value));
+  codeLineNumbersButton.addEventListener("click", toggleCodeLineNumbers);
+  codeSizeElement.addEventListener("change", () => applyCodeSize(codeSizeElement.value));
   layoutTablesButton.addEventListener("click", layoutTables);
   document.querySelector("#zoom-in").addEventListener("click", () => zoom(1.2));
   document.querySelector("#zoom-out").addEventListener("click", () => zoom(1 / 1.2));
@@ -2121,6 +2683,7 @@ function initializeEditor(loadedDocument) {
     ...state,
     arrows: state.arrows || [],
     frames: state.frames || [],
+    codeBlocks: state.codeBlocks || [],
     tableHeaderColors: state.tableHeaderColors || {}
   };
   setDiagramName(loadedDocument.name);
@@ -2139,6 +2702,7 @@ function initializeEditor(loadedDocument) {
   renderFrames();
   renderTables();
   renderNotes();
+  renderCodeBlocks();
   renderArrows();
   if (Array.isArray(state.viewportTransform) && state.viewportTransform.length === 6) {
     canvas.setViewportTransform(state.viewportTransform);
@@ -2159,6 +2723,13 @@ fetch("/api/document", { cache: "no-store" })
   })
   .then(async (loadedDocument) => {
     if (!loadedDocument.state) loadedDocument.state = await createInitialState(loadedDocument.schema);
+    const response = await fetch("/api/highlighting", { cache: "no-store" });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    highlighting = await response.json();
+    renderCodeLanguages();
+    const detailsResponse = await fetch("/api/model_details", { cache: "no-store" });
+    if (!detailsResponse.ok) throw new Error(`HTTP ${detailsResponse.status}`);
+    modelDetails = await detailsResponse.json();
     return loadedDocument;
   })
   .then(initializeEditor)