living-documentation 7.42.0 → 7.44.0

package/dist/src/frontend/diagram/custom-shapes.js

@@ -0,0 +1,104 @@
+import { st } from './state.js';
+
+export const CUSTOM_SHAPE_TYPE = 'custom-shape';
+export const CUSTOM_SHAPE_TOOL_PREFIX = 'custom-shape:';
+export const CUSTOM_SHAPE_DEFAULT_SIZE = 65;
+
+export const DEFAULT_CUSTOM_ANCHORS = [
+  { id: 'N',  x: 0.5, y: 0   },
+  { id: 'NE', x: 1,   y: 0   },
+  { id: 'E',  x: 1,   y: 0.5 },
+  { id: 'SE', x: 1,   y: 1   },
+  { id: 'S',  x: 0.5, y: 1   },
+  { id: 'SW', x: 0,   y: 1   },
+  { id: 'W',  x: 0,   y: 0.5 },
+  { id: 'NW', x: 0,   y: 0   },
+];
+
+export function isCustomShapeTool(shape) {
+  return typeof shape === 'string' && shape.startsWith(CUSTOM_SHAPE_TOOL_PREFIX);
+}
+
+export function customShapeIdFromTool(shape) {
+  return isCustomShapeTool(shape) ? shape.slice(CUSTOM_SHAPE_TOOL_PREFIX.length) : null;
+}
+
+export function getCustomShapeDefinition(id) {
+  if (!id) return null;
+  return st.customShapeDefs && st.customShapeDefs.get(id) || null;
+}
+
+export function getCustomShapeDefaultSize(id) {
+  const def = getCustomShapeDefinition(id);
+  return [
+    (def && def.width) || CUSTOM_SHAPE_DEFAULT_SIZE,
+    (def && def.height) || CUSTOM_SHAPE_DEFAULT_SIZE,
+  ];
+}
+
+export function getCustomShapeAnchors(id) {
+  const def = getCustomShapeDefinition(id);
+  return def && Array.isArray(def.anchors) && def.anchors.length
+    ? def.anchors
+    : DEFAULT_CUSTOM_ANCHORS;
+}
+
+export function getCustomShapeLabelPlacement(id) {
+  const def = getCustomShapeDefinition(id);
+  return def && ['center', 'below', 'above', 'right', 'left'].includes(def.labelPlacement)
+    ? def.labelPlacement
+    : 'below';
+}
+
+export async function loadCustomShapeLibraries() {
+  try {
+    const res = await fetch('/api/shape-libraries');
+    if (!res.ok) throw new Error('shape libraries unavailable');
+    const store = await res.json();
+    const libraries = Array.isArray(store.libraries) ? store.libraries : [];
+    st.customShapeLibraries = libraries;
+    st.customShapeDefs = new Map();
+    libraries.forEach((library) => {
+      (library.shapes || []).forEach((shape) => st.customShapeDefs.set(shape.id, shape));
+    });
+  } catch {
+    st.customShapeLibraries = [];
+    st.customShapeDefs = new Map();
+  }
+}
+
+export function renderCustomShapeBar() {
+  const bar = document.getElementById('customShapeBar');
+  const body = document.getElementById('customShapeBarBody');
+  if (!bar || !body) return;
+
+  body.innerHTML = '';
+  const libraries = st.customShapeLibraries || [];
+  const shapes = libraries.flatMap((library) =>
+    (library.shapes || [])
+      .filter((shape) => shape.showInDiagram !== false)
+      .map((shape) => ({ ...shape, libraryName: library.name })),
+  );
+  bar.classList.toggle('hidden', shapes.length === 0);
+
+  shapes.forEach((shape) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'custom-shape-btn';
+    btn.title = `${shape.libraryName || ''}${shape.libraryName ? ' · ' : ''}${shape.name}`;
+    btn.dataset.customShapeId = shape.id;
+
+    const img = document.createElement('img');
+    img.src = shape.imageSrc;
+    img.alt = '';
+    img.draggable = false;
+    btn.appendChild(img);
+
+    btn.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('diagram:setTool', {
+        detail: { tool: 'addNode', shape: `${CUSTOM_SHAPE_TOOL_PREFIX}${shape.id}` },
+      }));
+    });
+    body.appendChild(btn);
+  });
+}

package/dist/src/frontend/diagram/main.js

@@ -3,7 +3,7 @@
 
 import { st, markDirty }      from './state.js';
 import { TOOL_BTN_MAP }       from './constants.js';
-import { showNodePanel, hideNodePanel, setNodeColor, setNodeBgOpacity, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp, stepRotate, toggleNodeLock } from './node-panel.js';
+import { showNodePanel, hideNodePanel, setNodeColor, setNodeBgOpacity, changeNodeFontSize, setTextAlign, setTextValign, setCustomShapeLabelPlacement, changeZOrder, activateStamp, cancelStamp, stepRotate, toggleNodeLock } from './node-panel.js';
 import { groupNodes, ungroupNodes } from './groups.js';
 import { showLinkPanel, hideLinkPanel } from './link-panel.js';
 import { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize, stepEdgeLabelRotation, clearEdgePorts, setEdgeColor, changeEdgeWidth, toggleEdgeLock, resetEdgeLabelWidth, stepEdgeLabelOffset, resetEdgeLabelOffset } from './edge-panel.js';
@@ -22,6 +22,7 @@ import { promptImageName } from './image-name-modal.js';
 import { showToast }       from './toast.js';
 import { t }               from './t.js';
 import { initEvidenceMode, toggleEvidenceMode } from './evidence.js';
+import { customShapeIdFromTool, isCustomShapeTool } from './custom-shapes.js';
 
 // ── Tool management ───────────────────────────────────────────────────────────
 
@@ -36,6 +37,12 @@ function setTool(tool, shape) {
   const key = tool === 'addNode' ? `addNode:${shape || st.pendingShape}` : tool;
   const btn = document.getElementById(TOOL_BTN_MAP[key]);
   if (btn) btn.classList.add('tool-active');
+  document.querySelectorAll('.custom-shape-btn').forEach((b) => {
+    b.classList.toggle(
+      'tool-active',
+      tool === 'addNode' && isCustomShapeTool(shape || st.pendingShape) && b.dataset.customShapeId === customShapeIdFromTool(shape || st.pendingShape),
+    );
+  });
 
   document.getElementById('vis-canvas').classList.toggle('cursor-crosshair', tool === 'addNode' || tool === 'addEdge');
 
@@ -157,6 +164,8 @@ initEvidenceMode();
 document.getElementById('nodePanel').addEventListener('click', (e) => {
   const colorBtn = e.target.closest('[data-color]');
   if (colorBtn) setNodeColor(colorBtn.dataset.color);
+  const labelPlacementBtn = e.target.closest('[data-label-placement]');
+  if (labelPlacementBtn) setCustomShapeLabelPlacement(labelPlacementBtn.dataset.labelPlacement);
 });
 document.getElementById('btnNodeLock').addEventListener('click', toggleNodeLock);
 document.getElementById('btnNodeLabelEdit').addEventListener('click', startLabelEdit);