canvas_erd 0.1.0 → 0.2.0

data/lib/canvas_erd/web/app.js

@@ -19,7 +19,64 @@ const noticeElement = document.querySelector("#notice");
 const shortcutHelpButton = document.querySelector("#shortcut-help");
 const shortcutPanelElement = document.querySelector("#shortcut-panel");
 const arrowButton = document.querySelector("#add-arrow");
+const frameButton = document.querySelector("#add-frame");
 const layoutTablesButton = document.querySelector("#layout-tables");
+const noteFormattingElement = document.querySelector("#note-formatting");
+const noteBoldButton = document.querySelector("#note-bold");
+const noteItalicButton = document.querySelector("#note-italic");
+const noteUnderlineButton = document.querySelector("#note-underline");
+const noteParagraphStyleElement = document.querySelector("#note-paragraph-style");
+const noteAlignmentElement = document.querySelector("#note-alignment");
+const tableFormattingElement = document.querySelector("#table-formatting");
+const tableHeaderColorControl = {
+  button: document.querySelector("#table-header-color-button"),
+  preview: document.querySelector("#table-header-color-preview"),
+  menu: document.querySelector("#table-header-color-menu"),
+  swatches: document.querySelector("#table-header-color-swatches"),
+  custom: document.querySelector("#table-header-custom-color")
+};
+const arrowFormattingElement = document.querySelector("#arrow-formatting");
+const arrowStartHeadElement = document.querySelector("#arrow-start-head");
+const arrowEndHeadElement = document.querySelector("#arrow-end-head");
+const arrowLineStyleElement = document.querySelector("#arrow-line-style");
+const arrowStrokeWidthElement = document.querySelector("#arrow-stroke-width");
+const arrowColorControl = {
+  button: document.querySelector("#arrow-color-button"),
+  preview: document.querySelector("#arrow-color-preview"),
+  menu: document.querySelector("#arrow-color-menu"),
+  swatches: document.querySelector("#arrow-color-swatches"),
+  custom: document.querySelector("#arrow-custom-color")
+};
+const frameFormattingElement = document.querySelector("#frame-formatting");
+const frameLineStyleElement = document.querySelector("#frame-line-style");
+const frameColorControl = {
+  button: document.querySelector("#frame-color-button"),
+  preview: document.querySelector("#frame-color-preview"),
+  menu: document.querySelector("#frame-color-menu"),
+  swatches: document.querySelector("#frame-color-swatches"),
+  custom: document.querySelector("#frame-custom-color")
+};
+const noteColorControls = [
+  {
+    property: "fill",
+    defaults: CanvasERDDocument.DEFAULT_FOREGROUND_COLORS,
+    button: document.querySelector("#note-text-color-button"),
+    preview: document.querySelector("#note-text-color-preview"),
+    menu: document.querySelector("#note-text-color-menu"),
+    swatches: document.querySelector("#note-text-color-swatches"),
+    custom: document.querySelector("#note-text-custom-color")
+  },
+  {
+    property: "backgroundColor",
+    defaults: CanvasERDDocument.DEFAULT_BACKGROUND_COLORS,
+    button: document.querySelector("#note-background-color-button"),
+    preview: document.querySelector("#note-background-color-preview"),
+    menu: document.querySelector("#note-background-color-menu"),
+    swatches: document.querySelector("#note-background-color-swatches"),
+    custom: document.querySelector("#note-background-custom-color"),
+    transparent: document.querySelector("#note-background-transparent")
+  }
+];
 
 let schema;
 let applicationSchema;
@@ -34,6 +91,8 @@ const tableObjects = new Map();
 let relationshipObjects = [];
 const noteObjects = new Map();
 const arrowObjects = new Map();
+const frameObjects = new Map();
+const frameLabelObjects = new Map();
 let noticeTimer;
 let currentDiagramFilename = null;
 let diagramsDirectory = "docs/erd";
@@ -44,6 +103,10 @@ let arrowMode = false;
 let drawingArrow = null;
 let arrowPreview = null;
 let editingArrowId = null;
+let frameMode = false;
+let drawingFrame = null;
+let framePreview = null;
+let lastNoteFormatting = CanvasERDDocument.inheritedNoteFormatting();
 const arrowEndpointHandles = new Map();
 const changeTracker = CanvasERDDocument.createChangeTracker(updateSaveButton);
 const layoutEngine = new ELK({ workerUrl: "/assets/elk-worker.min.js" });
@@ -177,6 +240,7 @@ function truncate(value, length) {
 function createTableObject(entity) {
   const width = CanvasERDDocument.CARD_WIDTH;
   const height = CanvasERDDocument.tableHeight(entity);
+  const headerColor = CanvasERDDocument.tableHeaderColor(state, entity.id);
   const objects = [
     new fabric.Rect(CanvasERDDocument.topLeft({
       left: 0,
@@ -195,7 +259,7 @@ function createTableObject(entity) {
       top: 0,
       width,
       height: CanvasERDDocument.HEADER_HEIGHT,
-      fill: "#243b63",
+      fill: headerColor,
       rx: 8,
       ry: 8
     })),
@@ -204,7 +268,7 @@ function createTableObject(entity) {
       top: CanvasERDDocument.HEADER_HEIGHT - 8,
       width,
       height: 8,
-      fill: "#243b63"
+      fill: headerColor
     })),
     new fabric.FabricText(truncate(entity.label, 34), CanvasERDDocument.uncachedText({
       left: 14,
@@ -318,26 +382,73 @@ function relationStyle(relationship) {
   };
 }
 
+function createCardinalityObjects(geometry, style) {
+  const markerStyle = { ...style, strokeDashArray: null };
+  const objects = geometry.segments.map(({ start, end }) => (
+    new fabric.Line([start.x, start.y, end.x, end.y], markerStyle)
+  ));
+  geometry.circles.forEach(({ center, radius }) => {
+    objects.push(new fabric.Circle({
+      left: center.x,
+      top: center.y,
+      originX: "center",
+      originY: "center",
+      radius,
+      fill: "#f7f8fb",
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      selectable: false,
+      evented: false,
+      objectCaching: false
+    }));
+  });
+  if (geometry.label) {
+    objects.push(new fabric.FabricText(geometry.label, {
+      left: geometry.labelPosition.x,
+      top: geometry.labelPosition.y,
+      originX: "center",
+      originY: "center",
+      fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
+      fontSize: 10,
+      fill: "#526277",
+      backgroundColor: "#f7f8fb",
+      selectable: false,
+      evented: false
+    }));
+  }
+  return objects;
+}
+
 function createRelationshipObjects(relationship, source, destination) {
   const sourceBounds = tableBounds(source);
   const destinationBounds = tableBounds(destination);
   const style = relationStyle(relationship);
   let connector;
-  let labelPosition;
+  let sourceEndpoint;
+  let destinationEndpoint;
 
   if (source === destination) {
     const right = sourceBounds.left + sourceBounds.width;
     const top = sourceBounds.top;
     const centerY = top + sourceBounds.height / 2;
-    const points = [
+    sourceEndpoint = CanvasERDDocument.cardinalityEndpointGeometry(
       { x: right, y: centerY },
-      { x: right + 44, y: centerY },
-      { x: right + 44, y: top - 34 },
-      { x: right - 20, y: top - 34 },
-      { x: right - 20, y: top }
+      { x: 1, y: 0 },
+      relationship.cardinality.source
+    );
+    destinationEndpoint = CanvasERDDocument.cardinalityEndpointGeometry(
+      { x: right - 20, y: top },
+      { x: 0, y: -1 },
+      relationship.cardinality.destination
+    );
+    const points = [
+      sourceEndpoint.shaftPoint,
+      { x: right + 48, y: centerY },
+      { x: right + 48, y: top - 48 },
+      { x: right - 20, y: top - 48 },
+      destinationEndpoint.shaftPoint
     ];
     connector = new fabric.Polyline(points, style);
-    labelPosition = { x: right + 48, y: top - 28 };
   } else {
     const sourceCenter = {
       x: sourceBounds.left + sourceBounds.width / 2,
@@ -347,33 +458,31 @@ function createRelationshipObjects(relationship, source, destination) {
       x: destinationBounds.left + destinationBounds.width / 2,
       y: destinationBounds.top + destinationBounds.height / 2
     };
+    sourceEndpoint = CanvasERDDocument.relationshipEndpointGeometry(
+      sourceBounds,
+      destinationCenter,
+      relationship.cardinality.source
+    );
+    destinationEndpoint = CanvasERDDocument.relationshipEndpointGeometry(
+      destinationBounds,
+      sourceCenter,
+      relationship.cardinality.destination
+    );
     connector = new fabric.Line([
-      sourceCenter.x,
-      sourceCenter.y,
-      destinationCenter.x,
-      destinationCenter.y
+      sourceEndpoint.shaftPoint.x,
+      sourceEndpoint.shaftPoint.y,
+      destinationEndpoint.shaftPoint.x,
+      destinationEndpoint.shaftPoint.y
     ], style);
-    labelPosition = {
-      x: (sourceCenter.x + destinationCenter.x) / 2,
-      y: (sourceCenter.y + destinationCenter.y) / 2
-    };
   }
 
-  connector.canvasErdType = "relationship";
-  const label = new fabric.FabricText(CanvasERDDocument.cardinalityLabel(relationship), {
-    left: labelPosition.x,
-    top: labelPosition.y,
-    originX: "center",
-    originY: "center",
-    fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
-    fontSize: 10,
-    fill: "#526277",
-    backgroundColor: "#f7f8fb",
-    selectable: false,
-    evented: false
-  });
-  label.canvasErdType = "relationship";
-  return [connector, label];
+  const objects = [
+    connector,
+    ...createCardinalityObjects(sourceEndpoint, style),
+    ...createCardinalityObjects(destinationEndpoint, style)
+  ];
+  objects.forEach((object) => { object.canvasErdType = "relationship"; });
+  return objects;
 }
 
 function renderRelationships() {
@@ -390,7 +499,7 @@ function renderRelationships() {
     canvas.add(...objects);
   });
 
-  [...relationshipObjects].reverse().forEach((object) => canvas.sendObjectToBack(object));
+  restackCanvasObjects();
   canvas.requestRenderAll();
   updateStatus();
 }
@@ -448,17 +557,15 @@ async function layoutTables() {
 }
 
 function createNoteObject(note) {
+  const borderColor = CanvasERDDocument.noteBorderColor(
+    CanvasERDDocument.noteFormatting(note).backgroundColor
+  );
   const object = new fabric.Textbox(note.text, CanvasERDDocument.uncachedText({
     ...CanvasERDDocument.noteCanvasGeometry(note),
-    fill: "#4a3f12",
-    backgroundColor: "#fff2a8",
-    fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
-    fontSize: 15,
-    lineHeight: 1.25,
     padding: CanvasERDDocument.noteSelectionPadding(canvas.getZoom()),
-    borderColor: "#d09b16",
-    editingBorderColor: "#d09b16",
-    cornerColor: "#d09b16",
+    borderColor,
+    editingBorderColor: borderColor,
+    cornerColor: borderColor,
     transparentCorners: false,
     lockScalingY: true
   }));
@@ -480,6 +587,293 @@ function createNoteObject(note) {
   return object;
 }
 
+function activeNoteObject() {
+  const active = canvas?.getActiveObject();
+  return active?.canvasErdType === "note" ? active : null;
+}
+
+function activeTableEntityIds() {
+  return CanvasERDDocument.selectedEntityIds(canvas?.getActiveObject());
+}
+
+function updateNoteFormattingControls() {
+  const note = activeNoteObject();
+  noteFormattingElement.hidden = !note;
+  if (!note) return;
+
+  const formatting = CanvasERDDocument.noteFormatting(note);
+  lastNoteFormatting = CanvasERDDocument.inheritedNoteFormatting(formatting);
+  noteBoldButton.setAttribute("aria-pressed", String(formatting.fontWeight === "bold"));
+  noteItalicButton.setAttribute("aria-pressed", String(formatting.fontStyle === "italic"));
+  noteUnderlineButton.setAttribute("aria-pressed", String(formatting.underline));
+  noteColorControls.forEach((control) => {
+    const color = formatting[control.property];
+    control.preview.style.backgroundColor = color;
+    control.preview.classList.toggle("transparent-color", color === "transparent");
+    if (control.transparent) {
+      control.transparent.setAttribute("aria-pressed", String(color === "transparent"));
+    }
+    if (/^#[0-9a-f]{6}$/i.test(color)) control.custom.value = color;
+  });
+  noteParagraphStyleElement.value = formatting.paragraphStyle;
+  noteAlignmentElement.value = formatting.textAlign;
+}
+
+function closeNoteFormattingMenus() {
+  let closed = false;
+  noteColorControls.forEach((control) => {
+    if (!control.menu.hidden) closed = true;
+    control.menu.hidden = true;
+    control.button.setAttribute("aria-expanded", "false");
+  });
+  if (!tableHeaderColorControl.menu.hidden) closed = true;
+  tableHeaderColorControl.menu.hidden = true;
+  tableHeaderColorControl.button.setAttribute("aria-expanded", "false");
+  if (!arrowColorControl.menu.hidden) closed = true;
+  arrowColorControl.menu.hidden = true;
+  arrowColorControl.button.setAttribute("aria-expanded", "false");
+  if (!frameColorControl.menu.hidden) closed = true;
+  frameColorControl.menu.hidden = true;
+  frameColorControl.button.setAttribute("aria-expanded", "false");
+  return closed;
+}
+
+function renderColorSwatches(element, colors, defaults, currentColor, applyColor) {
+  const fragment = document.createDocumentFragment();
+  const sections = CanvasERDDocument.colorPaletteSections(colors, defaults);
+  const appendSwatches = (swatches) => swatches.forEach((color) => {
+    const swatch = document.createElement("button");
+    swatch.className = "color-swatch";
+    swatch.type = "button";
+    swatch.title = color;
+    swatch.setAttribute("aria-label", `Use ${color}`);
+    swatch.setAttribute("aria-pressed", String(color === currentColor));
+    swatch.style.backgroundColor = color;
+    swatch.classList.toggle("transparent-color", color === "transparent");
+    swatch.addEventListener("click", () => {
+      applyColor(color);
+      closeNoteFormattingMenus();
+    });
+    fragment.append(swatch);
+  });
+  appendSwatches(sections.defaults);
+  if (sections.custom.length > 0) {
+    const separator = document.createElement("div");
+    separator.className = "swatch-separator";
+    separator.setAttribute("role", "separator");
+    fragment.append(separator);
+    appendSwatches(sections.custom);
+  }
+  element.replaceChildren(fragment);
+}
+
+function renderNoteColorSwatches(control) {
+  const note = activeNoteObject();
+  if (!note) return;
+
+  const currentColor = CanvasERDDocument.noteFormatting(note)[control.property].toLowerCase();
+  renderColorSwatches(
+    control.swatches,
+    CanvasERDDocument.noteColorSwatches(state.notes, control.property, control.defaults),
+    control.defaults,
+    currentColor,
+    (color) => applyNoteFormatting({ [control.property]: color })
+  );
+}
+
+function toggleNoteColorMenu(control) {
+  const opening = control.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || !activeNoteObject()) return;
+
+  renderNoteColorSwatches(control);
+  control.menu.hidden = false;
+  control.button.setAttribute("aria-expanded", "true");
+}
+
+function updateTableFormattingControls() {
+  const entityIds = activeTableEntityIds();
+  tableFormattingElement.hidden = entityIds.length === 0;
+  if (entityIds.length === 0) return;
+
+  const color = CanvasERDDocument.selectedTableHeaderColor(state, entityIds);
+  tableHeaderColorControl.preview.style.backgroundColor = color || "#ffffff";
+  tableHeaderColorControl.preview.classList.toggle("mixed-color", color === null);
+  if (color) tableHeaderColorControl.custom.value = color;
+}
+
+function applyTableHeaderColor(color) {
+  const entityIds = activeTableEntityIds();
+  if (entityIds.length === 0) return;
+
+  state = CanvasERDDocument.setTableHeaderColor(state, entityIds, color);
+  entityIds.forEach((entityId) => {
+    const table = tableObjects.get(entityId);
+    if (!table) return;
+    table.getObjects().slice(1, 3).forEach((header) => header.set({ fill: color }));
+    table.dirty = true;
+  });
+  updateTableFormattingControls();
+  canvas.requestRenderAll();
+  markDirty();
+}
+
+function renderTableHeaderColorSwatches() {
+  const entityIds = activeTableEntityIds();
+  if (entityIds.length === 0) return;
+
+  renderColorSwatches(
+    tableHeaderColorControl.swatches,
+    CanvasERDDocument.tableHeaderColorSwatches(state.tableHeaderColors),
+    CanvasERDDocument.DEFAULT_TABLE_HEADER_COLORS,
+    CanvasERDDocument.selectedTableHeaderColor(state, entityIds),
+    applyTableHeaderColor
+  );
+}
+
+function toggleTableHeaderColorMenu() {
+  const opening = tableHeaderColorControl.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || activeTableEntityIds().length === 0) return;
+
+  renderTableHeaderColorSwatches();
+  tableHeaderColorControl.menu.hidden = false;
+  tableHeaderColorControl.button.setAttribute("aria-expanded", "true");
+}
+
+function editingArrow() {
+  return state.arrows.find((arrow) => arrow.id === editingArrowId) || null;
+}
+
+function updateArrowFormattingControls() {
+  const arrow = editingArrow();
+  arrowFormattingElement.hidden = !arrow;
+  if (!arrow) return;
+
+  const formatting = CanvasERDDocument.arrowFormatting(arrow);
+  arrowColorControl.preview.style.backgroundColor = formatting.color;
+  if (/^#[0-9a-f]{6}$/i.test(formatting.color)) arrowColorControl.custom.value = formatting.color;
+  arrowStartHeadElement.value = formatting.startHead;
+  arrowEndHeadElement.value = formatting.endHead;
+  arrowLineStyleElement.value = formatting.lineStyle;
+  arrowStrokeWidthElement.value = formatting.strokeWidth;
+}
+
+function applyArrowFormatting(changes) {
+  const arrow = editingArrow();
+  if (!arrow) return;
+
+  Object.assign(arrow, CanvasERDDocument.arrowFormatting({ ...arrow, ...changes }));
+  renderArrows();
+  updateArrowFormattingControls();
+  markDirty();
+}
+
+function renderArrowColorSwatches() {
+  const arrow = editingArrow();
+  if (!arrow) return;
+
+  renderColorSwatches(
+    arrowColorControl.swatches,
+    CanvasERDDocument.arrowColorSwatches(state.arrows),
+    CanvasERDDocument.DEFAULT_FOREGROUND_COLORS,
+    CanvasERDDocument.arrowFormatting(arrow).color.toLowerCase(),
+    (color) => applyArrowFormatting({ color })
+  );
+}
+
+function toggleArrowColorMenu() {
+  const opening = arrowColorControl.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || !editingArrow()) return;
+
+  renderArrowColorSwatches();
+  arrowColorControl.menu.hidden = false;
+  arrowColorControl.button.setAttribute("aria-expanded", "true");
+}
+
+function activeFrame() {
+  const active = canvas?.getActiveObject();
+  const frameId = ["frame", "frame-label"].includes(active?.canvasErdType) ? active.frameId : null;
+  return state.frames.find((frame) => frame.id === frameId) || null;
+}
+
+function updateFrameFormattingControls() {
+  const frame = activeFrame();
+  frameFormattingElement.hidden = !frame;
+  if (!frame) return;
+
+  const formatting = CanvasERDDocument.frameFormatting(frame);
+  frameColorControl.preview.style.backgroundColor = formatting.color;
+  if (/^#[0-9a-f]{6}$/i.test(formatting.color)) frameColorControl.custom.value = formatting.color;
+  frameLineStyleElement.value = formatting.lineStyle;
+}
+
+function applyFrameFormatting(changes) {
+  const frame = activeFrame();
+  if (!frame) return;
+
+  Object.assign(frame, CanvasERDDocument.frameFormatting({ ...frame, ...changes }));
+  frameObjects.get(frame.id)?.set({
+    stroke: frame.color,
+    strokeDashArray: CanvasERDDocument.arrowStrokeDashArray(frame.lineStyle),
+    strokeLineCap: frame.lineStyle === "dotted" ? "round" : "butt"
+  });
+  frameLabelObjects.get(frame.id)?.set({ fill: frame.color });
+  updateFrameFormattingControls();
+  canvas.requestRenderAll();
+  markDirty();
+}
+
+function renderFrameColorSwatches() {
+  const frame = activeFrame();
+  if (!frame) return;
+
+  renderColorSwatches(
+    frameColorControl.swatches,
+    CanvasERDDocument.frameColorSwatches(state.frames),
+    CanvasERDDocument.DEFAULT_FOREGROUND_COLORS,
+    CanvasERDDocument.frameFormatting(frame).color.toLowerCase(),
+    (color) => applyFrameFormatting({ color })
+  );
+}
+
+function toggleFrameColorMenu() {
+  const opening = frameColorControl.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || !activeFrame()) return;
+
+  renderFrameColorSwatches();
+  frameColorControl.menu.hidden = false;
+  frameColorControl.button.setAttribute("aria-expanded", "true");
+}
+
+function applyNoteFormatting(formatting) {
+  const note = activeNoteObject();
+  if (!note) return;
+
+  note.set(formatting);
+  const borderColor = CanvasERDDocument.noteBorderColor(note.backgroundColor);
+  note.set({ borderColor, editingBorderColor: borderColor, cornerColor: borderColor });
+  note.setCoords();
+  updateObjectState(note);
+  updateNoteFormattingControls();
+  canvas.requestRenderAll();
+}
+
+function toggleNoteFormatting(formatting) {
+  const note = activeNoteObject();
+  if (!note) return;
+
+  if (formatting === "bold") {
+    applyNoteFormatting({ fontWeight: note.fontWeight === "bold" ? "normal" : "bold" });
+  } else if (formatting === "italic") {
+    applyNoteFormatting({ fontStyle: note.fontStyle === "italic" ? "normal" : "italic" });
+  } else if (formatting === "underline") {
+    applyNoteFormatting({ underline: !note.underline });
+  }
+}
+
 function renderNotes() {
   state.notes.forEach((note) => {
     const object = createNoteObject(note);
@@ -488,6 +882,150 @@ function renderNotes() {
   });
 }
 
+function createFrameObject(frame) {
+  const formatting = CanvasERDDocument.frameFormatting(frame);
+  const object = new fabric.Rect(CanvasERDDocument.topLeft({
+    left: frame.x,
+    top: frame.y,
+    width: frame.width,
+    height: frame.height,
+    fill: "transparent",
+    stroke: formatting.color,
+    strokeWidth: 2,
+    strokeDashArray: CanvasERDDocument.arrowStrokeDashArray(formatting.lineStyle),
+    strokeLineCap: formatting.lineStyle === "dotted" ? "round" : "butt",
+    strokeUniform: true,
+    objectCaching: false,
+    perPixelTargetFind: true,
+    padding: 4,
+    borderColor: "#2563eb",
+    cornerColor: "#2563eb",
+    transparentCorners: false,
+    lockRotation: true,
+    lockSkewingX: true,
+    lockSkewingY: true
+  }));
+  object.setControlsVisibility({ mtr: false });
+  object.canvasErdType = "frame";
+  object.frameId = frame.id;
+  return object;
+}
+
+function createFrameLabelObject(frame) {
+  const label = typeof frame.label === "string" ? frame.label : "Frame";
+  const object = new fabric.IText(label, CanvasERDDocument.uncachedText({
+    ...CanvasERDDocument.frameLabelCanvasStyle(frame),
+    fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
+    fontSize: 15,
+    fontWeight: "bold",
+    padding: 3,
+    hasControls: false,
+    lockMovementX: true,
+    lockMovementY: true,
+    borderColor: "#2563eb",
+    editingBorderColor: "#2563eb"
+  }));
+  object.canvasErdType = "frame-label";
+  object.frameId = frame.id;
+  return object;
+}
+
+function renderFrames() {
+  frameObjects.forEach((object) => canvas.remove(object));
+  frameLabelObjects.forEach((object) => canvas.remove(object));
+  frameObjects.clear();
+  frameLabelObjects.clear();
+  state.frames.forEach((frame) => {
+    const object = createFrameObject(frame);
+    const label = createFrameLabelObject(frame);
+    frameObjects.set(frame.id, object);
+    frameLabelObjects.set(frame.id, label);
+    canvas.add(object, label);
+  });
+  restackCanvasObjects();
+  canvas.requestRenderAll();
+}
+
+function renderFramePreview() {
+  if (framePreview) canvas.remove(framePreview);
+  const bounds = CanvasERDDocument.frameBounds(drawingFrame.start, drawingFrame.end);
+  framePreview = new fabric.Rect(CanvasERDDocument.topLeft({
+    left: bounds.x,
+    top: bounds.y,
+    width: bounds.width,
+    height: bounds.height,
+    fill: "rgba(37, 99, 235, 0.03)",
+    stroke: "#2563eb",
+    strokeWidth: 2,
+    strokeDashArray: [7, 5],
+    selectable: false,
+    evented: false,
+    objectCaching: false
+  }));
+  framePreview.canvasErdType = "frame-preview";
+  canvas.add(framePreview);
+  restackCanvasObjects();
+  canvas.requestRenderAll();
+}
+
+function setFrameMode(active) {
+  if (active && arrowMode) cancelArrowDrawing();
+  if (active && editingArrowId) finishArrowEndpointEditing();
+  frameMode = active;
+  frameButton.setAttribute("aria-pressed", String(active));
+  canvas.selection = !active;
+  canvas.setCursor(active ? "crosshair" : "default");
+  [
+    ...frameObjects.values(),
+    ...frameLabelObjects.values(),
+    ...tableObjects.values(),
+    ...noteObjects.values(),
+    ...arrowObjects.values()
+  ].forEach((object) => {
+    object.selectable = !active;
+    object.evented = !active;
+  });
+  if (active) canvas.discardActiveObject();
+  canvas.requestRenderAll();
+}
+
+function cancelFrameDrawing() {
+  if (framePreview) canvas.remove(framePreview);
+  framePreview = null;
+  drawingFrame = null;
+  setFrameMode(false);
+}
+
+function finishFrameDrawing(point) {
+  if (!drawingFrame) return;
+  drawingFrame.end = point;
+  const bounds = CanvasERDDocument.frameBounds(drawingFrame.start, drawingFrame.end);
+  if (framePreview) canvas.remove(framePreview);
+  framePreview = null;
+
+  if (bounds.width >= 40 && bounds.height >= 30) {
+    const frame = {
+      id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `frame-${Date.now()}`,
+      label: "Frame",
+      ...bounds,
+      ...CanvasERDDocument.DEFAULT_FRAME_FORMATTING
+    };
+    state.frames.push(frame);
+    drawingFrame = null;
+    renderFrames();
+    setFrameMode(false);
+    const label = frameLabelObjects.get(frame.id);
+    canvas.setActiveObject(label);
+    label.enterEditing();
+    label.selectAll();
+    canvas.requestRenderAll();
+    markDirty();
+  } else {
+    drawingFrame = null;
+    setFrameMode(false);
+  }
+}
+
 function attachmentTarget(attachment) {
   if (!attachment) return null;
   if (attachment.type === "entity") return tableObjects.get(attachment.id);
@@ -530,13 +1068,58 @@ function arrowEndpoint(eventData) {
   return endpointAt(point, eventData.target, eventData.e.ctrlKey);
 }
 
+function drawArrowHead(context, point, angle, style, color, strokeWidth) {
+  if (style === "none") return;
+
+  const { length, halfWidth, radius } = CanvasERDDocument.arrowHeadGeometry(style, strokeWidth);
+  context.save();
+  context.translate(point.x, point.y);
+  context.rotate(angle);
+  context.fillStyle = color;
+  context.strokeStyle = color;
+  context.lineWidth = strokeWidth;
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  context.setLineDash([]);
+  context.beginPath();
+  if (style === "open") {
+    context.moveTo(-length, -halfWidth);
+    context.lineTo(0, 0);
+    context.lineTo(-length, halfWidth);
+    context.stroke();
+  } else if (["circle", "circle-open"].includes(style)) {
+    context.arc(-radius, 0, radius, 0, Math.PI * 2);
+    if (style === "circle-open") context.stroke();
+    else context.fill();
+  } else if (["diamond", "diamond-open"].includes(style)) {
+    context.moveTo(0, 0);
+    context.lineTo(-length / 2, -halfWidth);
+    context.lineTo(-length, 0);
+    context.lineTo(-length / 2, halfWidth);
+    context.closePath();
+    if (style === "diamond-open") context.stroke();
+    else context.fill();
+  } else {
+    context.moveTo(0, 0);
+    context.lineTo(-length, -halfWidth);
+    context.lineTo(-length, halfWidth);
+    context.closePath();
+    context.fill();
+  }
+  context.restore();
+}
+
 function createArrowObject(arrow, options = {}) {
   const start = resolveArrowEndpoint(arrow.start);
   const end = resolveArrowEndpoint(arrow.end);
+  const formatting = CanvasERDDocument.arrowFormatting(arrow);
+  const color = options.stroke || formatting.color;
   const object = new fabric.Line([start.x, start.y, end.x, end.y], {
-    stroke: options.stroke || "#334e75",
-    strokeWidth: 2.25,
-    fill: options.stroke || "#334e75",
+    stroke: color,
+    strokeWidth: formatting.strokeWidth,
+    strokeDashArray: CanvasERDDocument.arrowStrokeDashArray(formatting.lineStyle),
+    strokeLineCap: formatting.lineStyle === "dotted" ? "round" : "butt",
+    fill: color,
     objectCaching: false,
     perPixelTargetFind: true,
     padding: 6,
@@ -549,20 +1132,40 @@ function createArrowObject(arrow, options = {}) {
     lockSkewingY: true
   });
   object._render = function (context) {
-    fabric.Line.prototype._render.call(this, context);
     const points = this.calcLinePoints();
-    const angle = Math.atan2(points.y2 - points.y1, points.x2 - points.x1);
+    const shaft = CanvasERDDocument.shortenedArrowLinePoints(
+      points,
+      formatting.startHead,
+      formatting.endHead,
+      this.strokeWidth
+    );
     context.save();
-    context.translate(points.x2, points.y2);
-    context.rotate(angle);
-    context.fillStyle = this.stroke;
     context.beginPath();
-    context.moveTo(1, 0);
-    context.lineTo(-10, -5.5);
-    context.lineTo(-10, 5.5);
-    context.closePath();
-    context.fill();
+    context.moveTo(shaft.x1, shaft.y1);
+    context.lineTo(shaft.x2, shaft.y2);
+    context.strokeStyle = this.stroke;
+    context.lineWidth = this.strokeWidth;
+    context.lineCap = this.strokeLineCap;
+    context.setLineDash(this.strokeDashArray || []);
+    context.stroke();
     context.restore();
+    const angle = Math.atan2(points.y2 - points.y1, points.x2 - points.x1);
+    drawArrowHead(
+      context,
+      { x: points.x1, y: points.y1 },
+      angle + Math.PI,
+      formatting.startHead,
+      this.stroke,
+      this.strokeWidth
+    );
+    drawArrowHead(
+      context,
+      { x: points.x2, y: points.y2 },
+      angle,
+      formatting.endHead,
+      this.stroke,
+      this.strokeWidth
+    );
   };
   object.canvasErdType = options.preview ? "arrow-preview" : "arrow";
   object.arrowId = arrow.id;
@@ -606,15 +1209,20 @@ function renderArrowPreview() {
 }
 
 function setArrowMode(active) {
+  if (active && frameMode) cancelFrameDrawing();
   if (active && editingArrowId) finishArrowEndpointEditing();
   arrowMode = active;
   arrowButton.setAttribute("aria-pressed", String(active));
   canvas.selection = !active;
   canvas.setCursor(active ? "crosshair" : "default");
-  [...tableObjects.values(), ...noteObjects.values(), ...arrowObjects.values()].forEach((object) => {
+  [
+    ...frameObjects.values(),
+    ...frameLabelObjects.values(),
+    ...tableObjects.values(),
+    ...noteObjects.values(),
+    ...arrowObjects.values()
+  ].forEach((object) => {
     object.selectable = !active;
-  });
-  arrowObjects.forEach((object) => {
     object.evented = !active;
   });
   if (active) canvas.discardActiveObject();
@@ -700,6 +1308,7 @@ function beginArrowEndpointEditing(arrowId) {
     arrowEndpointHandles.set(endpointName, handle);
     canvas.add(handle);
   });
+  updateArrowFormattingControls();
   canvas.requestRenderAll();
 }
 
@@ -713,6 +1322,8 @@ function finishArrowEndpointEditing() {
     object.evented = true;
   }
   editingArrowId = null;
+  updateArrowFormattingControls();
+  closeNoteFormattingMenus();
   canvas.discardActiveObject();
   canvas.requestRenderAll();
 }
@@ -757,6 +1368,7 @@ function removeActiveArrows() {
 }
 
 function addNote(position = canvas.getVpCenter()) {
+  if (frameMode) cancelFrameDrawing();
   if (arrowMode) cancelArrowDrawing();
   if (editingArrowId) finishArrowEndpointEditing();
   const origin = CanvasERDDocument.notePositionAt(position);
@@ -766,7 +1378,8 @@ function addNote(position = canvas.getVpCenter()) {
     x: origin.x,
     y: origin.y,
     width: 220,
-    angle: 0
+    angle: 0,
+    ...lastNoteFormatting
   };
   state.notes.push(note);
 
@@ -777,6 +1390,7 @@ function addNote(position = canvas.getVpCenter()) {
   canvas.setActiveObject(object);
   object.enterEditing();
   object.selectAll();
+  updateNoteFormattingControls();
   canvas.requestRenderAll();
   markDirty();
 }
@@ -790,10 +1404,41 @@ function updateObjectState(object) {
     if (!note) return;
     Object.assign(note, CanvasERDDocument.noteStateGeometry(object));
     scheduleRelationshipRender();
+  } else if (object.canvasErdType === "frame") {
+    const frame = state.frames.find((candidate) => candidate.id === object.frameId);
+    if (!frame) return;
+    Object.assign(frame, {
+      x: object.left,
+      y: object.top,
+      width: object.width * object.scaleX,
+      height: object.height * object.scaleY
+    });
+    const label = frameLabelObjects.get(frame.id);
+    const position = CanvasERDDocument.frameLabelPosition(frame);
+    label?.set({ left: position.x, top: position.y });
+    label?.setCoords();
+  } else if (object.canvasErdType === "frame-label") {
+    const frame = state.frames.find((candidate) => candidate.id === object.frameId);
+    if (!frame) return;
+    frame.label = object.text;
   }
   markDirty();
 }
 
+function removeActiveFrame() {
+  const active = canvas.getActiveObject();
+  if (!["frame", "frame-label"].includes(active?.canvasErdType) || active.isEditing) return false;
+
+  const frameId = active.frameId;
+  canvas.discardActiveObject();
+  canvas.remove(frameObjects.get(frameId), frameLabelObjects.get(frameId));
+  frameObjects.delete(frameId);
+  frameLabelObjects.delete(frameId);
+  state.frames = state.frames.filter((frame) => frame.id !== frameId);
+  markDirty();
+  return true;
+}
+
 function removeActiveNote() {
   const active = canvas.getActiveObject();
   if (!active || active.canvasErdType !== "note" || active.isEditing) return false;
@@ -807,6 +1452,7 @@ function removeActiveNote() {
       endpoint.attachment = null;
     });
   });
+  canvas.discardActiveObject();
   canvas.remove(active);
   noteObjects.delete(active.noteId);
   state.notes = state.notes.filter((note) => note.id !== active.noteId);
@@ -1022,7 +1668,13 @@ async function saveDiagram() {
 
 function displayDocument(documentData) {
   schema = documentData.schema;
-  state = { ...documentData.state, arrows: documentData.state.arrows || [] };
+  state = {
+    ...documentData.state,
+    arrows: documentData.state.arrows || [],
+    frames: documentData.state.frames || [],
+    tableHeaderColors: documentData.state.tableHeaderColors || {}
+  };
+  if (frameMode) cancelFrameDrawing();
   if (arrowMode) cancelArrowDrawing();
   if (editingArrowId) finishArrowEndpointEditing();
   canvas.discardActiveObject();
@@ -1031,7 +1683,10 @@ function displayDocument(documentData) {
   relationshipObjects = [];
   noteObjects.clear();
   arrowObjects.clear();
+  frameObjects.clear();
+  frameLabelObjects.clear();
   renderTableList();
+  renderFrames();
   renderTables();
   renderNotes();
   renderArrows();
@@ -1097,6 +1752,8 @@ async function newDiagram() {
 
 function diagramBounds() {
   const objects = [
+    ...frameObjects.values(),
+    ...frameLabelObjects.values(),
     ...tableObjects.values(),
     ...noteObjects.values(),
     ...arrowObjects.values(),
@@ -1141,18 +1798,27 @@ function resizeCanvas() {
 }
 
 function configureCanvasEvents() {
-  canvas.on("mouse:dblclick", ({ target }) => {
-    if (target?.canvasErdType === "arrow") beginArrowEndpointEditing(target.arrowId);
-  });
+  const selectionChanged = () => {
+    closeNoteFormattingMenus();
+    updateNoteFormattingControls();
+    updateTableFormattingControls();
+    updateFrameFormattingControls();
+  };
+  canvas.on("selection:created", selectionChanged);
+  canvas.on("selection:updated", selectionChanged);
+  canvas.on("selection:cleared", selectionChanged);
   canvas.on("mouse:down", ({ target }) => {
     if (editingArrowId && target?.canvasErdType !== "arrow-endpoint") finishArrowEndpointEditing();
+    const arrowId = CanvasERDDocument.arrowIdForEndpointEditing(target);
+    if (arrowId) beginArrowEndpointEditing(arrowId);
   });
   canvas.on("mouse:down", (eventData) => {
     if (!arrowMode || spacePressed) return;
     drawingArrow = {
       id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `arrow-${Date.now()}`,
       start: arrowEndpoint(eventData),
-      end: arrowEndpoint(eventData)
+      end: arrowEndpoint(eventData),
+      ...CanvasERDDocument.DEFAULT_ARROW_FORMATTING
     };
     renderArrowPreview();
   });
@@ -1164,11 +1830,31 @@ function configureCanvasEvents() {
   canvas.on("mouse:up", (eventData) => {
     if (arrowMode && drawingArrow) finishArrowDrawing(eventData);
   });
+  canvas.on("mouse:down", ({ e, scenePoint }) => {
+    if (!frameMode || spacePressed) return;
+    const point = scenePoint || canvas.getScenePoint(e);
+    drawingFrame = { start: { x: point.x, y: point.y }, end: { x: point.x, y: point.y } };
+    renderFramePreview();
+  });
+  canvas.on("mouse:move", ({ e, scenePoint }) => {
+    if (!frameMode || !drawingFrame) return;
+    const point = scenePoint || canvas.getScenePoint(e);
+    drawingFrame.end = { x: point.x, y: point.y };
+    renderFramePreview();
+  });
+  canvas.on("mouse:up", ({ e, scenePoint }) => {
+    if (!frameMode || !drawingFrame) return;
+    const point = scenePoint || canvas.getScenePoint(e);
+    finishFrameDrawing({ x: point.x, y: point.y });
+  });
 
   canvas.on("object:moving", (eventData) => {
     if (eventData.target.canvasErdType === "arrow-endpoint") updateArrowEndpointHandle(eventData);
     else if (eventData.target.canvasErdType !== "arrow") updateObjectState(eventData.target);
   });
+  canvas.on("object:scaling", ({ target }) => {
+    if (target.canvasErdType === "frame") updateObjectState(target);
+  });
   canvas.on("object:modified", (eventData) => {
     if (eventData.target.canvasErdType === "arrow") updateArrowState(eventData.target);
     else if (eventData.target.canvasErdType === "arrow-endpoint") updateArrowEndpointHandle(eventData);
@@ -1227,9 +1913,22 @@ function configureCanvasEvents() {
   document.addEventListener("keydown", (event) => {
     const editing = canvas.getActiveObject() && canvas.getActiveObject().isEditing;
     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);
 
+    if (noteFormatting && activeNoteObject() && (!acceptsText || editing)) {
+      event.preventDefault();
+      if (!event.repeat) {
+        if (CanvasERDDocument.NOTE_PARAGRAPH_STYLES[noteFormatting]) {
+          applyNoteFormatting(CanvasERDDocument.noteParagraphStyleFormatting(noteFormatting));
+        } else {
+          toggleNoteFormatting(noteFormatting);
+        }
+      }
+      return;
+    }
+
     if (action && (!bareAction || (!editing && !acceptsText))) {
       event.preventDefault();
       if (event.repeat) return;
@@ -1264,12 +1963,17 @@ function configureCanvasEvents() {
       return;
     }
 
-    if (event.key === "Escape" && editingArrowId) {
+    if (event.key === "Escape" && closeNoteFormattingMenus()) {
+      event.preventDefault();
+    } else if (event.key === "Escape" && editingArrowId) {
       event.preventDefault();
       finishArrowEndpointEditing();
     } else if (event.key === "Escape" && arrowMode) {
       event.preventDefault();
       cancelArrowDrawing();
+    } else if (event.key === "Escape" && frameMode) {
+      event.preventDefault();
+      cancelFrameDrawing();
     } else if (event.key === "Escape" && !shortcutPanelElement.hidden) {
       event.preventDefault();
       showShortcutHelp(false);
@@ -1279,7 +1983,7 @@ function configureCanvasEvents() {
       canvas.skipTargetFind = true;
       canvas.setCursor("grab");
     } else if (["Delete", "Backspace"].includes(event.key) && (
-      removeActiveTables() || removeActiveArrows() || removeActiveNote()
+      removeActiveTables() || removeActiveArrows() || removeActiveFrame() || removeActiveNote()
     )) {
       event.preventDefault();
     }
@@ -1290,8 +1994,8 @@ function configureCanvasEvents() {
     spacePressed = false;
     isPanning = false;
     canvas.skipTargetFind = false;
-    canvas.selection = true;
-    canvas.setCursor(arrowMode ? "crosshair" : "default");
+    canvas.selection = !arrowMode && !frameMode;
+    canvas.setCursor(arrowMode || frameMode ? "crosshair" : "default");
   });
 }
 
@@ -1304,6 +2008,10 @@ function configureControls() {
     if (arrowMode) cancelArrowDrawing();
     else setArrowMode(true);
   });
+  frameButton.addEventListener("click", () => {
+    if (frameMode) cancelFrameDrawing();
+    else setFrameMode(true);
+  });
   saveButton.addEventListener("click", saveDiagram);
   newButton.addEventListener("click", newDiagram);
   openButton.addEventListener("click", () => {
@@ -1343,13 +2051,78 @@ function configureControls() {
   document.querySelector("#select-all").addEventListener("click", () => setAllTables(true));
   document.querySelector("#select-none").addEventListener("click", () => setAllTables(false));
   searchElement.addEventListener("input", filterTableList);
+  noteBoldButton.addEventListener("click", () => toggleNoteFormatting("bold"));
+  noteItalicButton.addEventListener("click", () => toggleNoteFormatting("italic"));
+  noteUnderlineButton.addEventListener("click", () => toggleNoteFormatting("underline"));
+  noteColorControls.forEach((control) => {
+    control.button.addEventListener("click", () => toggleNoteColorMenu(control));
+    control.custom.addEventListener("change", () => {
+      applyNoteFormatting({ [control.property]: control.custom.value });
+      closeNoteFormattingMenus();
+    });
+    control.transparent?.addEventListener("click", () => {
+      applyNoteFormatting({ [control.property]: "transparent" });
+      closeNoteFormattingMenus();
+    });
+  });
+  tableHeaderColorControl.button.addEventListener("click", toggleTableHeaderColorMenu);
+  tableHeaderColorControl.custom.addEventListener("change", () => {
+    applyTableHeaderColor(tableHeaderColorControl.custom.value);
+    closeNoteFormattingMenus();
+  });
+  arrowColorControl.button.addEventListener("click", toggleArrowColorMenu);
+  arrowColorControl.custom.addEventListener("change", () => {
+    applyArrowFormatting({ color: arrowColorControl.custom.value });
+    closeNoteFormattingMenus();
+  });
+  arrowStartHeadElement.addEventListener("change", () => {
+    applyArrowFormatting({ startHead: arrowStartHeadElement.value });
+  });
+  arrowEndHeadElement.addEventListener("change", () => {
+    applyArrowFormatting({ endHead: arrowEndHeadElement.value });
+  });
+  arrowLineStyleElement.addEventListener("change", () => {
+    applyArrowFormatting({ lineStyle: arrowLineStyleElement.value });
+  });
+  arrowStrokeWidthElement.addEventListener("change", () => {
+    applyArrowFormatting({ strokeWidth: arrowStrokeWidthElement.value });
+  });
+  frameColorControl.button.addEventListener("click", toggleFrameColorMenu);
+  frameColorControl.custom.addEventListener("change", () => {
+    applyFrameFormatting({ color: frameColorControl.custom.value });
+    closeNoteFormattingMenus();
+  });
+  frameLineStyleElement.addEventListener("change", () => {
+    applyFrameFormatting({ lineStyle: frameLineStyleElement.value });
+  });
+  document.addEventListener("pointerdown", (event) => {
+    const insideFormatting = noteFormattingElement.contains(event.target) ||
+      tableFormattingElement.contains(event.target) ||
+      arrowFormattingElement.contains(event.target) ||
+      frameFormattingElement.contains(event.target);
+    if (!insideFormatting) closeNoteFormattingMenus();
+  });
+  noteParagraphStyleElement.addEventListener("change", () => {
+    applyNoteFormatting(
+      CanvasERDDocument.noteParagraphStyleFormatting(noteParagraphStyleElement.value)
+    );
+  });
+  noteAlignmentElement.addEventListener("change", () => {
+    applyNoteFormatting({ textAlign: noteAlignmentElement.value });
+  });
 }
 
 function initializeEditor(loadedDocument) {
   schema = loadedDocument.schema;
-  applicationSchema = schema;
+  applicationSchema = loadedDocument.application_schema || schema;
+  currentDiagramFilename = loadedDocument.filename || null;
   state = loadedDocument.state || CanvasERDDocument.createState(schema);
-  state = { ...state, arrows: state.arrows || [] };
+  state = {
+    ...state,
+    arrows: state.arrows || [],
+    frames: state.frames || [],
+    tableHeaderColors: state.tableHeaderColors || {}
+  };
   setDiagramName(loadedDocument.name);
   canvas = new fabric.Canvas("erd-canvas", {
     backgroundColor: "transparent",
@@ -1363,6 +2136,7 @@ function initializeEditor(loadedDocument) {
   configureCanvasEvents();
   configureControls();
   renderTableList();
+  renderFrames();
   renderTables();
   renderNotes();
   renderArrows();
@@ -1373,7 +2147,8 @@ function initializeEditor(loadedDocument) {
     fitDiagram(false);
   }
   new ResizeObserver(resizeCanvas).observe(panelElement);
-  refreshSavedDiagrams().catch((error) => showNotice(`Could not list diagrams: ${error.message}`, true));
+  refreshSavedDiagrams(currentDiagramFilename)
+    .catch((error) => showNotice(`Could not list diagrams: ${error.message}`, true));
   loadingElement.hidden = true;
 }