living-documentation 7.42.0 → 7.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/frontend/diagram/custom-shapes.js +104 -0
- package/dist/src/frontend/diagram/main.js +10 -1
- package/dist/src/frontend/diagram/network.js +1042 -531
- package/dist/src/frontend/diagram/node-panel.js +47 -0
- package/dist/src/frontend/diagram/node-rendering.js +190 -0
- package/dist/src/frontend/diagram/persistence.js +2 -0
- package/dist/src/frontend/diagram/ports.js +49 -14
- package/dist/src/frontend/diagram/selection-overlay.js +64 -13
- package/dist/src/frontend/diagram/state.js +2 -0
- package/dist/src/frontend/diagram.html +99 -0
- package/dist/src/frontend/i18n/en.json +15 -1
- package/dist/src/frontend/i18n/fr.json +15 -1
- package/dist/src/frontend/shape-editor.html +685 -0
- package/dist/src/routes/shape-libraries.d.ts +3 -0
- package/dist/src/routes/shape-libraries.d.ts.map +1 -0
- package/dist/src/routes/shape-libraries.js +116 -0
- package/dist/src/routes/shape-libraries.js.map +1 -0
- package/dist/src/server.d.ts.map +1 -1
- package/dist/src/server.js +3 -0
- package/dist/src/server.js.map +1 -1
- package/package.json +1 -1
|
@@ -85,6 +85,12 @@
|
|
|
85
85
|
.dark .panel-sep {
|
|
86
86
|
background: #374151;
|
|
87
87
|
}
|
|
88
|
+
#customShapeLabelPlacementControls {
|
|
89
|
+
display: contents;
|
|
90
|
+
}
|
|
91
|
+
#customShapeLabelPlacementControls.hidden {
|
|
92
|
+
display: none;
|
|
93
|
+
}
|
|
88
94
|
.edge-btn-active {
|
|
89
95
|
background: #fff7ed !important;
|
|
90
96
|
color: #ea580c !important;
|
|
@@ -286,6 +292,57 @@
|
|
|
286
292
|
background: #082f49;
|
|
287
293
|
color: #e0f2fe;
|
|
288
294
|
}
|
|
295
|
+
#customShapeBar {
|
|
296
|
+
position: absolute;
|
|
297
|
+
left: 0.75rem;
|
|
298
|
+
bottom: 0.75rem;
|
|
299
|
+
z-index: 9;
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
max-width: min(42rem, calc(100% - 1.5rem));
|
|
303
|
+
padding: 0.35rem;
|
|
304
|
+
gap: 0.25rem;
|
|
305
|
+
border: 1px solid #e5e7eb;
|
|
306
|
+
border-radius: 0.5rem;
|
|
307
|
+
background: rgba(255, 255, 255, 0.96);
|
|
308
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
|
|
309
|
+
}
|
|
310
|
+
.dark #customShapeBar {
|
|
311
|
+
border-color: #374151;
|
|
312
|
+
background: rgba(31, 41, 55, 0.96);
|
|
313
|
+
}
|
|
314
|
+
#customShapeBar.hidden {
|
|
315
|
+
display: none;
|
|
316
|
+
}
|
|
317
|
+
#customShapeBarBody {
|
|
318
|
+
display: flex;
|
|
319
|
+
gap: 0.25rem;
|
|
320
|
+
overflow-x: auto;
|
|
321
|
+
scrollbar-width: thin;
|
|
322
|
+
}
|
|
323
|
+
.custom-shape-btn {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
justify-content: center;
|
|
327
|
+
width: 2.25rem;
|
|
328
|
+
height: 2.25rem;
|
|
329
|
+
border-radius: 0.375rem;
|
|
330
|
+
border: 1px solid transparent;
|
|
331
|
+
background: transparent;
|
|
332
|
+
flex: 0 0 auto;
|
|
333
|
+
}
|
|
334
|
+
.custom-shape-btn:hover {
|
|
335
|
+
background: #f3f4f6;
|
|
336
|
+
}
|
|
337
|
+
.dark .custom-shape-btn:hover {
|
|
338
|
+
background: #111827;
|
|
339
|
+
}
|
|
340
|
+
.custom-shape-btn img {
|
|
341
|
+
max-width: 1.7rem;
|
|
342
|
+
max-height: 1.7rem;
|
|
343
|
+
object-fit: contain;
|
|
344
|
+
pointer-events: none;
|
|
345
|
+
}
|
|
289
346
|
</style>
|
|
290
347
|
</head>
|
|
291
348
|
<body
|
|
@@ -445,6 +502,13 @@
|
|
|
445
502
|
<path d="M1 9.5 L4 6.5 L6.5 9 L9 7 L13 10.5"/>
|
|
446
503
|
</svg>
|
|
447
504
|
</button>
|
|
505
|
+
<a
|
|
506
|
+
href="/shape-editor"
|
|
507
|
+
class="tool-btn"
|
|
508
|
+
data-i18n-title="diagram.toolbar.shape_editor"
|
|
509
|
+
>
|
|
510
|
+
✦
|
|
511
|
+
</a>
|
|
448
512
|
<div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
|
|
449
513
|
|
|
450
514
|
<button
|
|
@@ -641,6 +705,10 @@
|
|
|
641
705
|
<div class="relative flex-1 overflow-hidden bg-gray-50 dark:bg-gray-950">
|
|
642
706
|
<div id="vis-canvas" class="w-full h-full"></div>
|
|
643
707
|
|
|
708
|
+
<div id="customShapeBar" class="hidden">
|
|
709
|
+
<div id="customShapeBarBody"></div>
|
|
710
|
+
</div>
|
|
711
|
+
|
|
644
712
|
<!-- Debug overlay layer -->
|
|
645
713
|
<div id="debugLayer"></div>
|
|
646
714
|
|
|
@@ -880,6 +948,34 @@
|
|
|
880
948
|
</svg>
|
|
881
949
|
</button>
|
|
882
950
|
<div class="panel-sep"></div>
|
|
951
|
+
<div id="customShapeLabelPlacementControls" class="hidden">
|
|
952
|
+
<button
|
|
953
|
+
class="tool-btn !w-7 !h-6 font-mono text-[10px]"
|
|
954
|
+
data-label-placement="above"
|
|
955
|
+
data-i18n-title="diagram.node_panel.custom_label_above"
|
|
956
|
+
>T↑</button>
|
|
957
|
+
<button
|
|
958
|
+
class="tool-btn !w-7 !h-6 font-mono text-[10px]"
|
|
959
|
+
data-label-placement="below"
|
|
960
|
+
data-i18n-title="diagram.node_panel.custom_label_below"
|
|
961
|
+
>T↓</button>
|
|
962
|
+
<button
|
|
963
|
+
class="tool-btn !w-7 !h-6 font-mono text-[10px]"
|
|
964
|
+
data-label-placement="left"
|
|
965
|
+
data-i18n-title="diagram.node_panel.custom_label_left"
|
|
966
|
+
>←T</button>
|
|
967
|
+
<button
|
|
968
|
+
class="tool-btn !w-7 !h-6 font-mono text-[10px]"
|
|
969
|
+
data-label-placement="right"
|
|
970
|
+
data-i18n-title="diagram.node_panel.custom_label_right"
|
|
971
|
+
>T→</button>
|
|
972
|
+
<button
|
|
973
|
+
class="tool-btn !w-7 !h-6 font-mono text-[10px]"
|
|
974
|
+
data-label-placement="center"
|
|
975
|
+
data-i18n-title="diagram.node_panel.custom_label_center"
|
|
976
|
+
>T□</button>
|
|
977
|
+
<div class="panel-sep"></div>
|
|
978
|
+
</div>
|
|
883
979
|
<button
|
|
884
980
|
id="btnZOrderBack"
|
|
885
981
|
class="tool-btn !w-7 !h-6"
|
|
@@ -1308,6 +1404,7 @@
|
|
|
1308
1404
|
import { NODE_COLORS, NODE_L_RATIOS, DEFAULT_NODE_PALETTE, DEFAULT_EDGE_PALETTE, deriveNodeColors } from '/diagram/constants.js';
|
|
1309
1405
|
import { st } from '/diagram/state.js';
|
|
1310
1406
|
import { loadDiagramList } from '/diagram/persistence.js';
|
|
1407
|
+
import { loadCustomShapeLibraries, renderCustomShapeBar } from '/diagram/custom-shapes.js';
|
|
1311
1408
|
(async () => {
|
|
1312
1409
|
// diagramNodePalette: array of 15 bg hex strings (positional, matching DEFAULT_NODE_PALETTE)
|
|
1313
1410
|
// diagramEdgePalette: array of hex strings
|
|
@@ -1355,6 +1452,8 @@
|
|
|
1355
1452
|
btn.title = hex;
|
|
1356
1453
|
ec.appendChild(btn);
|
|
1357
1454
|
});
|
|
1455
|
+
await loadCustomShapeLibraries();
|
|
1456
|
+
renderCustomShapeBar();
|
|
1358
1457
|
window.applyI18n();
|
|
1359
1458
|
loadDiagramList();
|
|
1360
1459
|
})();
|
|
@@ -409,6 +409,7 @@
|
|
|
409
409
|
"diagram.toolbar.postit": "Post-it (P)",
|
|
410
410
|
"diagram.toolbar.text_free": "Free text (T)",
|
|
411
411
|
"diagram.toolbar.image": "Image — double-click on canvas to select a file, or paste (⌘V) from clipboard",
|
|
412
|
+
"diagram.toolbar.shape_editor": "Custom shape editor",
|
|
412
413
|
"diagram.toolbar.arrow": "Arrow (F)",
|
|
413
414
|
"diagram.toolbar.delete": "Delete (Del)",
|
|
414
415
|
"diagram.toolbar.align_guides": "Alignment guides — highlights same-type shape alignment",
|
|
@@ -442,6 +443,11 @@
|
|
|
442
443
|
"diagram.node_panel.align_top": "Align top",
|
|
443
444
|
"diagram.node_panel.align_middle": "Align middle",
|
|
444
445
|
"diagram.node_panel.align_bottom": "Align bottom",
|
|
446
|
+
"diagram.node_panel.custom_label_above": "Place custom shape label above this instance",
|
|
447
|
+
"diagram.node_panel.custom_label_below": "Place custom shape label below this instance",
|
|
448
|
+
"diagram.node_panel.custom_label_left": "Place custom shape label to the left of this instance",
|
|
449
|
+
"diagram.node_panel.custom_label_right": "Place custom shape label to the right of this instance",
|
|
450
|
+
"diagram.node_panel.custom_label_center": "Center custom shape label in this instance",
|
|
445
451
|
"diagram.node_panel.send_back": "Send to back",
|
|
446
452
|
"diagram.node_panel.bring_front": "Bring to front",
|
|
447
453
|
"diagram.node_panel.stamp_color": "Color stamp — select targets, click here, then click source",
|
|
@@ -516,5 +522,13 @@
|
|
|
516
522
|
"diagram.toast.confirm_delete": "Delete this diagram?",
|
|
517
523
|
"diagram.toast.new_diagram_title": "New diagram",
|
|
518
524
|
"diagram.toast.untitled": "Untitled",
|
|
519
|
-
"diagram.toast.diagram_linked": "Diagram \"{title}\" created and linked"
|
|
525
|
+
"diagram.toast.diagram_linked": "Diagram \"{title}\" created and linked",
|
|
526
|
+
|
|
527
|
+
"shape_editor.show_in_diagram_label": "Show in diagram palette",
|
|
528
|
+
"shape_editor.show_in_diagram_hint": "When disabled, existing diagram nodes still render but this shape is hidden from the bottom palette.",
|
|
529
|
+
"shape_editor.label_placement.below": "Below the shape",
|
|
530
|
+
"shape_editor.label_placement.above": "Above the shape",
|
|
531
|
+
"shape_editor.label_placement.right": "To the right",
|
|
532
|
+
"shape_editor.label_placement.left": "To the left",
|
|
533
|
+
"shape_editor.label_placement.center": "Centered in the shape"
|
|
520
534
|
}
|
|
@@ -409,6 +409,7 @@
|
|
|
409
409
|
"diagram.toolbar.postit": "Post-it (P)",
|
|
410
410
|
"diagram.toolbar.text_free": "Texte libre (T)",
|
|
411
411
|
"diagram.toolbar.image": "Image — double-clic sur le canvas pour choisir un fichier, ou coller (⌘V) depuis le presse-papier",
|
|
412
|
+
"diagram.toolbar.shape_editor": "Éditeur de formes personnalisées",
|
|
412
413
|
"diagram.toolbar.arrow": "Flèche (F)",
|
|
413
414
|
"diagram.toolbar.delete": "Supprimer (Suppr)",
|
|
414
415
|
"diagram.toolbar.align_guides": "Guides d'alignement — indique l'alignement entre formes du même type",
|
|
@@ -442,6 +443,11 @@
|
|
|
442
443
|
"diagram.node_panel.align_top": "Aligner en haut",
|
|
443
444
|
"diagram.node_panel.align_middle": "Centrer verticalement",
|
|
444
445
|
"diagram.node_panel.align_bottom": "Aligner en bas",
|
|
446
|
+
"diagram.node_panel.custom_label_above": "Placer le libellé de cette instance au-dessus",
|
|
447
|
+
"diagram.node_panel.custom_label_below": "Placer le libellé de cette instance dessous",
|
|
448
|
+
"diagram.node_panel.custom_label_left": "Placer le libellé de cette instance à gauche",
|
|
449
|
+
"diagram.node_panel.custom_label_right": "Placer le libellé de cette instance à droite",
|
|
450
|
+
"diagram.node_panel.custom_label_center": "Centrer le libellé dans cette instance",
|
|
445
451
|
"diagram.node_panel.send_back": "Envoyer en arrière",
|
|
446
452
|
"diagram.node_panel.bring_front": "Amener au premier plan",
|
|
447
453
|
"diagram.node_panel.stamp_color": "Tampon couleur — sélectionner les cibles, cliquer ici, puis cliquer la source",
|
|
@@ -516,5 +522,13 @@
|
|
|
516
522
|
"diagram.toast.confirm_delete": "Supprimer ce diagramme ?",
|
|
517
523
|
"diagram.toast.new_diagram_title": "Nouveau diagramme",
|
|
518
524
|
"diagram.toast.untitled": "Sans titre",
|
|
519
|
-
"diagram.toast.diagram_linked": "Diagramme \"{title}\" créé et lié"
|
|
525
|
+
"diagram.toast.diagram_linked": "Diagramme \"{title}\" créé et lié",
|
|
526
|
+
|
|
527
|
+
"shape_editor.show_in_diagram_label": "Afficher dans la palette du diagramme",
|
|
528
|
+
"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.",
|
|
529
|
+
"shape_editor.label_placement.below": "Sous la forme",
|
|
530
|
+
"shape_editor.label_placement.above": "Au-dessus de la forme",
|
|
531
|
+
"shape_editor.label_placement.right": "À droite",
|
|
532
|
+
"shape_editor.label_placement.left": "À gauche",
|
|
533
|
+
"shape_editor.label_placement.center": "Centré dans la forme"
|
|
520
534
|
}
|