living-documentation 7.43.0 → 7.45.0

package/dist/src/frontend/diagram/node-panel.js

@@ -3,9 +3,12 @@
 
 import { st, markDirty } from './state.js';
 import { SHAPE_DEFAULTS } from './node-rendering.js';
+import { CUSTOM_SHAPE_TYPE, getCustomShapeLabelPlacement } from './custom-shapes.js';
 import { pushSnapshot }   from './history.js';
 import { t }              from './t.js';
 
+const CUSTOM_LABEL_PLACEMENTS = ['below', 'above', 'right', 'left', 'center'];
+
 // ── Last-used style persistence (per shape type) ──────────────────────────────
 // Saves colorKey/fontSize/textAlign/textValign per shapeType to localStorage so
 // the next shape of that type is created with the same style.
@@ -90,6 +93,36 @@ function syncNodeFontSizeValue() {
   el.textContent = sizes.every((size) => size === first) ? String(first) : '–';
 }
 
+function selectedCustomShapeIds() {
+  return (st.selectedNodeIds || []).filter((id) => {
+    const n = st.nodes && st.nodes.get(id);
+    return n && n.shapeType === CUSTOM_SHAPE_TYPE;
+  });
+}
+
+function effectiveCustomShapeLabelPlacement(node) {
+  return CUSTOM_LABEL_PLACEMENTS.includes(node && node.labelPlacement)
+    ? node.labelPlacement
+    : getCustomShapeLabelPlacement(node && node.customShapeId);
+}
+
+function syncCustomShapeLabelPlacementControls() {
+  const controls = document.getElementById('customShapeLabelPlacementControls');
+  if (!controls) return;
+  const customIds = selectedCustomShapeIds();
+  controls.classList.toggle('hidden', customIds.length === 0);
+  if (!customIds.length) return;
+
+  const placements = customIds
+    .map((id) => effectiveCustomShapeLabelPlacement(st.nodes.get(id)))
+    .filter(Boolean);
+  const first = placements[0];
+  const shared = placements.length && placements.every((placement) => placement === first) ? first : null;
+  controls.querySelectorAll('[data-label-placement]').forEach((btn) => {
+    btn.classList.toggle('tool-active', !!shared && btn.dataset.labelPlacement === shared);
+  });
+}
+
 function setEdgeLocked(edge, locked) {
   if (!edge) return;
   const fromN = st.nodes && st.nodes.get(edge.from);
@@ -111,6 +144,7 @@ export function showNodePanel() {
   document.getElementById('nodePanelControls').classList.remove('hidden');
   syncNodeLockButton();
   syncNodeFontSizeValue();
+  syncCustomShapeLabelPlacementControls();
   // Sync the opacity slider with the first selected node's current value so the
   // slider reflects the live state rather than whatever position it was left at.
   const slider = document.getElementById('nodeBgOpacity');
@@ -219,6 +253,19 @@ export function setTextValign(valign) {
   markDirty();
 }
 
+export function setCustomShapeLabelPlacement(placement) {
+  if (!CUSTOM_LABEL_PLACEMENTS.includes(placement)) return;
+  const ids = selectedCustomShapeIds();
+  if (!ids.length) return;
+  pushSnapshot();
+  ids.forEach((id) => {
+    st.nodes.update({ id, labelPlacement: placement });
+  });
+  syncCustomShapeLabelPlacementControls();
+  forceRedraw();
+  markDirty();
+}
+
 // ── Stamp (format painter) ────────────────────────────────────────────────────
 // Uses a transparent DOM overlay (#stampOverlay) that intercepts canvas clicks
 // during stamp mode. This bypasses vis-network's event system entirely, avoiding

package/dist/src/frontend/diagram/node-rendering.js

@@ -6,7 +6,7 @@
 
 import { NODE_COLORS } from "./constants.js";
 import { st } from "./state.js";
-import { CUSTOM_SHAPE_TYPE, getCustomShapeDefinition } from "./custom-shapes.js";
+import { CUSTOM_SHAPE_TYPE, getCustomShapeDefinition, CUSTOM_SHAPE_DEFAULT_SIZE } from "./custom-shapes.js";
 
 // Returns the color object for a key, checking runtime overrides first.
 function getNodeColor(colorKey) {
@@ -187,13 +187,87 @@ function textLines(label) {
   return label ? String(label).split("\n") : [];
 }
 
-export function customShapeImageOffsetY(node, label) {
+function normalizeCustomLabelPlacement(value) {
+  return ["center", "below", "above", "right", "left"].includes(value) ? value : null;
+}
+
+function isExternalCustomLabelPlacement(placement) {
+  return ["above", "below", "right", "left"].includes(placement);
+}
+
+function measureTextWidth(line, fontSize, ctx) {
+  const font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+  if (ctx) {
+    const prevFont = ctx.font;
+    ctx.font = font;
+    const width = ctx.measureText(line).width;
+    ctx.font = prevFont;
+    return width;
+  }
+  if (typeof document === "undefined") return String(line).length * fontSize * 0.58;
+  if (!measureTextWidth._ctx) {
+    measureTextWidth._ctx = document.createElement("canvas").getContext("2d");
+  }
+  measureTextWidth._ctx.font = font;
+  return measureTextWidth._ctx.measureText(line).width;
+}
+
+export function customShapeLayout(node, label, ctx) {
   const def = getCustomShapeDefinition(node && node.customShapeId);
-  if (!def || def.labelPlacement !== "below" || !label) return 0;
+  const W =
+    (node && node.nodeWidth) || (def && def.width) || CUSTOM_SHAPE_DEFAULT_SIZE;
+  const H =
+    (node && node.nodeHeight) ||
+    (def && def.height) ||
+    CUSTOM_SHAPE_DEFAULT_SIZE;
+  const placement = normalizeCustomLabelPlacement(node && node.labelPlacement)
+    || normalizeCustomLabelPlacement(def && def.labelPlacement)
+    || "below";
   const fontSize = (node && node.fontSize) || 13;
   const lines = textLines(label);
-  if (!lines.length) return 0;
-  return -(lines.length * fontSize * 1.3 + 8) / 2;
+  const lineH = fontSize * 1.3;
+  if (!lines.length || !isExternalCustomLabelPlacement(placement)) {
+    return {
+      placement,
+      lines,
+      lineH,
+      imageOffsetX: 0,
+      imageOffsetY: 0,
+      labelBlockW: 0,
+      labelBlockH: 0,
+      totalW: W,
+      totalH: H,
+    };
+  }
+
+  const maxTextW = Math.max(...lines.map((line) => measureTextWidth(line, fontSize, ctx)));
+  const labelBlockW = maxTextW + 16;
+  const labelBlockH = lines.length * lineH + 8;
+  const horizontal = placement === "left" || placement === "right";
+  const totalW = horizontal ? W + labelBlockW : Math.max(W, labelBlockW);
+  const totalH = horizontal ? Math.max(H, labelBlockH) : H + labelBlockH;
+  const imageOffsetX = placement === "right" ? -labelBlockW / 2
+    : placement === "left" ? labelBlockW / 2
+      : 0;
+  const imageOffsetY = placement === "below" ? -labelBlockH / 2
+    : placement === "above" ? labelBlockH / 2
+      : 0;
+
+  return {
+    placement,
+    lines,
+    lineH,
+    imageOffsetX,
+    imageOffsetY,
+    labelBlockW,
+    labelBlockH,
+    totalW,
+    totalH,
+  };
+}
+
+export function customShapeImageOffsetY(node, label) {
+  return customShapeLayout(node, label).imageOffsetY;
 }
 
 // ── Shape renderers ───────────────────────────────────────────────────────────
@@ -671,8 +745,8 @@ export function makeCustomShapeRenderer(colorKey) {
   return function ({ ctx, x, y, id, state: visState, label }) {
     const n = st.nodes && st.nodes.get(id);
     const def = getCustomShapeDefinition(n && n.customShapeId);
-    const defaultW = def && def.width || 96;
-    const defaultH = def && def.height || 96;
+    const defaultW = (def && def.width) || CUSTOM_SHAPE_DEFAULT_SIZE;
+    const defaultH = (def && def.height) || CUSTOM_SHAPE_DEFAULT_SIZE;
     const {
       W,
       H,
@@ -684,11 +758,17 @@ export function makeCustomShapeRenderer(colorKey) {
       c,
     } = nodeData(id, defaultW, defaultH, colorKey || "c-gray");
     const img = getCachedImage(def && def.imageSrc, () => st.network && st.network.redraw());
-    const labelBelow = def && def.labelPlacement === "below";
-    const lines = textLines(label);
-    const belowLabelH = labelBelow && lines.length ? lines.length * fontSize * 1.3 + 8 : 0;
-    const imageOffsetY = labelBelow ? -belowLabelH / 2 : 0;
-    const totalH = H + belowLabelH;
+    const layout = customShapeLayout({ ...(n || {}), nodeWidth: W, nodeHeight: H, fontSize }, label, ctx);
+    const {
+      placement,
+      lines,
+      lineH,
+      imageOffsetX,
+      imageOffsetY,
+      totalW,
+      totalH,
+    } = layout;
+    const externalLabel = isExternalCustomLabelPlacement(placement) && lines.length;
     return {
       drawNode() {
         ctx.save();
@@ -696,12 +776,12 @@ export function makeCustomShapeRenderer(colorKey) {
         ctx.rotate(rotation);
 
         if (img) {
-          ctx.drawImage(img, -W / 2, imageOffsetY - H / 2, W, H);
+          ctx.drawImage(img, imageOffsetX - W / 2, imageOffsetY - H / 2, W, H);
         } else {
           ctx.fillStyle = visState.selected ? c.hbg : c.bg;
           ctx.strokeStyle = visState.selected ? "#f97316" : c.border;
           ctx.lineWidth = 1.5;
-          roundRect(ctx, -W / 2, imageOffsetY - H / 2, W, H, 4);
+          roundRect(ctx, imageOffsetX - W / 2, imageOffsetY - H / 2, W, H, 4);
           ctx.fill();
           ctx.stroke();
         }
@@ -710,21 +790,32 @@ export function makeCustomShapeRenderer(colorKey) {
           ctx.strokeStyle = visState.selected ? "#f97316" : c.border;
           ctx.lineWidth = visState.selected ? 2 : 1;
           ctx.setLineDash([4, 3]);
-          roundRect(ctx, -W / 2, -totalH / 2, W, totalH, 4);
+          roundRect(ctx, imageOffsetX - W / 2, imageOffsetY - H / 2, W, H, 4);
           ctx.stroke();
           ctx.setLineDash([]);
         }
 
-        if (labelBelow && lines.length) {
+        if (externalLabel) {
           ctx.save();
           if (labelRotation) ctx.rotate(labelRotation);
           ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
           ctx.fillStyle = c.font;
-          ctx.textAlign = "center";
-          ctx.textBaseline = "top";
-          const lineH = fontSize * 1.3;
-          const startY = imageOffsetY + H / 2 + 4;
-          lines.forEach((line, i) => ctx.fillText(line, 0, startY + i * lineH));
+          if (placement === "right" || placement === "left") {
+            const textX = placement === "right"
+              ? imageOffsetX + W / 2 + 8
+              : imageOffsetX - W / 2 - 8;
+            const startY = -((lines.length - 1) * lineH) / 2;
+            ctx.textAlign = placement === "right" ? "left" : "right";
+            ctx.textBaseline = "middle";
+            lines.forEach((line, i) => ctx.fillText(line, textX, startY + i * lineH));
+          } else {
+            ctx.textAlign = "center";
+            ctx.textBaseline = "top";
+            const startY = placement === "below"
+              ? imageOffsetY + H / 2 + 4
+              : -totalH / 2 + 4;
+            lines.forEach((line, i) => ctx.fillText(line, 0, startY + i * lineH));
+          }
           ctx.restore();
         } else {
           drawLabel(
@@ -739,10 +830,13 @@ export function makeCustomShapeRenderer(colorKey) {
             labelRotation,
           );
         }
+        ctx.save();
+        ctx.translate(imageOffsetX, imageOffsetY);
         drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
+        ctx.restore();
       },
-      nodeDimensions: { width: W, height: totalH },
+      nodeDimensions: { width: totalW, height: totalH },
     };
   };
 }
@@ -811,7 +905,7 @@ export const SHAPE_DEFAULTS = {
   "post-it": [120, 100],
   "text-free": [80, 30],
   image: [160, 120],
-  [CUSTOM_SHAPE_TYPE]: [96, 96],
+  [CUSTOM_SHAPE_TYPE]: [CUSTOM_SHAPE_DEFAULT_SIZE, CUSTOM_SHAPE_DEFAULT_SIZE],
   anchor: [8, 8],
 };
 

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

@@ -127,6 +127,7 @@ export async function saveDiagram() {
       id: n.id, label: n.label,
       shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
       customShapeId: n.customShapeId || null,
+      labelPlacement: n.labelPlacement || null,
       kind: n.kind || null, renderAs: n.renderAs || null,
       description: n.description || null,
       evidence: Array.isArray(n.evidence) ? n.evidence : null,

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

@@ -7,7 +7,7 @@
 // vis-network's native rendering unchanged.
 
 import { st } from './state.js';
-import { customShapeImageOffsetY, SHAPE_DEFAULTS } from './node-rendering.js';
+import { customShapeLayout, SHAPE_DEFAULTS } from './node-rendering.js';
 import { CUSTOM_SHAPE_TYPE, getCustomShapeAnchors } from './custom-shapes.js';
 
 /**
@@ -84,8 +84,10 @@ function nodeGeometry(nodeId) {
   const W = n.nodeWidth  || defaults[0];
   // 'circle' is always square (H = W); 'ellipse' uses its own height.
   const H = shapeType === 'circle' ? W : (n.nodeHeight || defaults[1]);
-  const imageOffsetY = shapeType === CUSTOM_SHAPE_TYPE ? customShapeImageOffsetY(n, n.label) : 0;
-  return { cx: pos.x, cy: pos.y, W, H, rotation: n.rotation || 0, shapeType, customShapeId: n.customShapeId || null, imageOffsetY };
+  const customLayout = shapeType === CUSTOM_SHAPE_TYPE ? customShapeLayout(n, n.label) : null;
+  const imageOffsetX = customLayout ? customLayout.imageOffsetX : 0;
+  const imageOffsetY = customLayout ? customLayout.imageOffsetY : 0;
+  return { cx: pos.x, cy: pos.y, W, H, rotation: n.rotation || 0, shapeType, customShapeId: n.customShapeId || null, imageOffsetX, imageOffsetY };
 }
 
 export function getPortKeys(nodeId) {
@@ -120,7 +122,7 @@ function controlNormalForEdge(nodeId, portKey) {
 export function getPortPosition(nodeId, portKey) {
   const geo = nodeGeometry(nodeId);
   if (!geo) return null;
-  const { cx, cy, W, H, rotation, shapeType, customShapeId, imageOffsetY } = geo;
+  const { cx, cy, W, H, rotation, shapeType, customShapeId, imageOffsetX, imageOffsetY } = geo;
   const offsets = shapeType === CUSTOM_SHAPE_TYPE ? null
                : shapeType === 'database'      ? PORT_OFFSETS_DATABASE
                : CIRCULAR_SHAPES.has(shapeType) ? PORT_OFFSETS_CIRC
@@ -128,7 +130,7 @@ export function getPortPosition(nodeId, portKey) {
   const [ox, oy] = shapeType === CUSTOM_SHAPE_TYPE
     ? customPortOffset(customShapeId, portKey) || [0, 0]
     : offsets[portKey] || [0, 0];
-  let dx = ox * W / 2;
+  let dx = ox * W / 2 + imageOffsetX;
   let dy = oy * H / 2 + imageOffsetY;
   if (rotation) {
     const cos = Math.cos(rotation), sin = Math.sin(rotation);

package/dist/src/frontend/diagram/selection-overlay.js

@@ -2,7 +2,8 @@
 // Dashed selection box, corner resize handles, and top-centre rotation handle.
 
 import { st, markDirty } from './state.js';
-import { visNodeProps, SHAPE_DEFAULTS } from './node-rendering.js';
+import { customShapeLayout, visNodeProps, SHAPE_DEFAULTS } from './node-rendering.js';
+import { CUSTOM_SHAPE_TYPE } from './custom-shapes.js';
 import { t }             from './t.js';
 import { pushSnapshot }  from './history.js';
 import { snapToGrid }    from './grid.js';
@@ -31,12 +32,71 @@ function nodeBounds(id) {
   return { minX: cx - hw, minY: cy - hh - headExtra, maxX: cx + hw, maxY: cy + hh };
 }
 
+function customShapeImageFrame(id) {
+  const n = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!n || !bodyNode || n.shapeType !== CUSTOM_SHAPE_TYPE) return null;
+  const defaults = SHAPE_DEFAULTS[CUSTOM_SHAPE_TYPE] || [96, 96];
+  const W = n.nodeWidth || defaults[0];
+  const H = n.nodeHeight || defaults[1];
+  const rotation = n.rotation || 0;
+  const layout = customShapeLayout(n, n.label);
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  const cx = bodyNode.x + layout.imageOffsetX * cos - layout.imageOffsetY * sin;
+  const cy = bodyNode.y + layout.imageOffsetX * sin + layout.imageOffsetY * cos;
+  return { cx, cy, W, H, rotation };
+}
+
+function syncOverlayHandles(width, height, pad) {
+  const rh = document.getElementById('rh-rotate');
+  rh.style.left = width / 2 + pad - 8 + 'px';
+  rh.style.top  = '-28px';
+
+  const lrh = document.getElementById('rh-label-rotate');
+  lrh.style.left = width / 2 + pad - 8 - 24 + 'px';
+  lrh.style.top  = '-28px';
+}
+
+function updateSingleCustomShapeOverlay(id) {
+  const frame = customShapeImageFrame(id);
+  if (!frame) return false;
+
+  const PAD = 10;
+  const scale = st.network.getScale();
+  const center = st.network.canvasToDOM({ x: frame.cx, y: frame.cy });
+  const width = frame.W * scale;
+  const height = frame.H * scale;
+  const ov = document.getElementById('selectionOverlay');
+  ov.style.display = 'block';
+  ov.style.left = center.x - width / 2 - PAD + 'px';
+  ov.style.top = center.y - height / 2 - PAD + 'px';
+  ov.style.width = width + PAD * 2 + 'px';
+  ov.style.height = height + PAD * 2 + 'px';
+  ov.style.transformOrigin = '50% 50%';
+  ov.style.transform = `rotate(${frame.rotation}rad)`;
+  syncOverlayHandles(width, height, PAD);
+  return true;
+}
+
 // ── Overlay position ──────────────────────────────────────────────────────────
 export function updateSelectionOverlay() {
   if (!st.network || !st.selectedNodeIds.length) { hideSelectionOverlay(); return; }
   // Anchor-only selections (free arrow drag) have no meaningful bounding box.
-  const hasNonAnchor = st.selectedNodeIds.some((id) => { const n = st.nodes && st.nodes.get(id); return !(n && n.shapeType === 'anchor'); });
-  if (!hasNonAnchor) { hideSelectionOverlay(); return; }
+  const nonAnchorIds = st.selectedNodeIds.filter((id) => { const n = st.nodes && st.nodes.get(id); return !(n && n.shapeType === 'anchor'); });
+  if (!nonAnchorIds.length) { hideSelectionOverlay(); return; }
+
+  const ov = document.getElementById('selectionOverlay');
+  ov.style.transform = '';
+  ov.style.transformOrigin = '';
+
+  if (nonAnchorIds.length === 1 && updateSingleCustomShapeOverlay(nonAnchorIds[0])) {
+    const anyLocked = st.selectedNodeIds.some((id) => { const n = st.nodes && st.nodes.get(id); return n && n.locked; });
+    ['rh-tl','rh-tr','rh-bl','rh-br','rh-rotate','rh-label-rotate'].forEach((handleId) => {
+      document.getElementById(handleId).style.display = anyLocked ? 'none' : '';
+    });
+    return;
+  }
 
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const id of st.selectedNodeIds) {
@@ -52,7 +112,6 @@ export function updateSelectionOverlay() {
   const PAD = 10;
   const tl  = st.network.canvasToDOM({ x: minX, y: minY });
   const br  = st.network.canvasToDOM({ x: maxX, y: maxY });
-  const ov  = document.getElementById('selectionOverlay');
   ov.style.display = 'block';
   ov.style.left    = tl.x - PAD + 'px';
   ov.style.top     = tl.y - PAD + 'px';
@@ -65,15 +124,7 @@ export function updateSelectionOverlay() {
     document.getElementById(id).style.display = anyLocked ? 'none' : '';
   });
 
-  // Position rotation handle: top-centre of the overlay, 28px above it.
-  const rh = document.getElementById('rh-rotate');
-  rh.style.left = (br.x - tl.x) / 2 + PAD - 8 + 'px';
-  rh.style.top  = '-28px';
-
-  // Position label rotation handle: top-centre offset left by 24px to avoid overlap.
-  const lrh = document.getElementById('rh-label-rotate');
-  lrh.style.left = (br.x - tl.x) / 2 + PAD - 8 - 24 + 'px';
-  lrh.style.top  = '-28px';
+  syncOverlayHandles(br.x - tl.x, br.y - tl.y, PAD);
 }
 
 export function hideSelectionOverlay() {

package/dist/src/frontend/diagram.html

@@ -85,6 +85,12 @@
       .dark .panel-sep {
         background: #374151;
       }
+      #customShapeLabelPlacementControls {
+        display: contents;
+      }
+      #customShapeLabelPlacementControls.hidden {
+        display: none;
+      }
       .edge-btn-active {
         background: #fff7ed !important;
         color: #ea580c !important;
@@ -942,6 +948,34 @@
             </svg>
           </button>
           <div class="panel-sep"></div>
+          <div id="customShapeLabelPlacementControls" class="hidden">
+            <button
+              class="tool-btn !w-7 !h-6 font-mono text-[10px]"
+              data-label-placement="above"
+              data-i18n-title="diagram.node_panel.custom_label_above"
+            >T↑</button>
+            <button
+              class="tool-btn !w-7 !h-6 font-mono text-[10px]"
+              data-label-placement="below"
+              data-i18n-title="diagram.node_panel.custom_label_below"
+            >T↓</button>
+            <button
+              class="tool-btn !w-7 !h-6 font-mono text-[10px]"
+              data-label-placement="left"
+              data-i18n-title="diagram.node_panel.custom_label_left"
+            >←T</button>
+            <button
+              class="tool-btn !w-7 !h-6 font-mono text-[10px]"
+              data-label-placement="right"
+              data-i18n-title="diagram.node_panel.custom_label_right"
+            >T→</button>
+            <button
+              class="tool-btn !w-7 !h-6 font-mono text-[10px]"
+              data-label-placement="center"
+              data-i18n-title="diagram.node_panel.custom_label_center"
+            >T□</button>
+            <div class="panel-sep"></div>
+          </div>
           <button
             id="btnZOrderBack"
             class="tool-btn !w-7 !h-6"

package/dist/src/frontend/i18n/en.json

@@ -443,6 +443,11 @@
   "diagram.node_panel.align_top": "Align top",
   "diagram.node_panel.align_middle": "Align middle",
   "diagram.node_panel.align_bottom": "Align bottom",
+  "diagram.node_panel.custom_label_above": "Place custom shape label above this instance",
+  "diagram.node_panel.custom_label_below": "Place custom shape label below this instance",
+  "diagram.node_panel.custom_label_left": "Place custom shape label to the left of this instance",
+  "diagram.node_panel.custom_label_right": "Place custom shape label to the right of this instance",
+  "diagram.node_panel.custom_label_center": "Center custom shape label in this instance",
   "diagram.node_panel.send_back": "Send to back",
   "diagram.node_panel.bring_front": "Bring to front",
   "diagram.node_panel.stamp_color": "Color stamp — select targets, click here, then click source",
@@ -517,5 +522,13 @@
   "diagram.toast.confirm_delete": "Delete this diagram?",
   "diagram.toast.new_diagram_title": "New diagram",
   "diagram.toast.untitled": "Untitled",
-  "diagram.toast.diagram_linked": "Diagram \"{title}\" created and linked"
+  "diagram.toast.diagram_linked": "Diagram \"{title}\" created and linked",
+
+  "shape_editor.show_in_diagram_label": "Show in diagram palette",
+  "shape_editor.show_in_diagram_hint": "When disabled, existing diagram nodes still render but this shape is hidden from the bottom palette.",
+  "shape_editor.label_placement.below": "Below the shape",
+  "shape_editor.label_placement.above": "Above the shape",
+  "shape_editor.label_placement.right": "To the right",
+  "shape_editor.label_placement.left": "To the left",
+  "shape_editor.label_placement.center": "Centered in the shape"
 }

package/dist/src/frontend/i18n/fr.json

@@ -443,6 +443,11 @@
   "diagram.node_panel.align_top": "Aligner en haut",
   "diagram.node_panel.align_middle": "Centrer verticalement",
   "diagram.node_panel.align_bottom": "Aligner en bas",
+  "diagram.node_panel.custom_label_above": "Placer le libellé de cette instance au-dessus",
+  "diagram.node_panel.custom_label_below": "Placer le libellé de cette instance dessous",
+  "diagram.node_panel.custom_label_left": "Placer le libellé de cette instance à gauche",
+  "diagram.node_panel.custom_label_right": "Placer le libellé de cette instance à droite",
+  "diagram.node_panel.custom_label_center": "Centrer le libellé dans cette instance",
   "diagram.node_panel.send_back": "Envoyer en arrière",
   "diagram.node_panel.bring_front": "Amener au premier plan",
   "diagram.node_panel.stamp_color": "Tampon couleur — sélectionner les cibles, cliquer ici, puis cliquer la source",
@@ -517,5 +522,13 @@
   "diagram.toast.confirm_delete": "Supprimer ce diagramme ?",
   "diagram.toast.new_diagram_title": "Nouveau diagramme",
   "diagram.toast.untitled": "Sans titre",
-  "diagram.toast.diagram_linked": "Diagramme \"{title}\" créé et lié"
+  "diagram.toast.diagram_linked": "Diagramme \"{title}\" créé et lié",
+
+  "shape_editor.show_in_diagram_label": "Afficher dans la palette du diagramme",
+  "shape_editor.show_in_diagram_hint": "Si désactivé, les nœuds existants restent rendus mais cette forme est masquée dans la palette du bas.",
+  "shape_editor.label_placement.below": "Sous la forme",
+  "shape_editor.label_placement.above": "Au-dessus de la forme",
+  "shape_editor.label_placement.right": "À droite",
+  "shape_editor.label_placement.left": "À gauche",
+  "shape_editor.label_placement.center": "Centré dans la forme"
 }