github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-17 02:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Label edge rels with compact unicode symbols

Browse Source 
Dash variants alone cannot carry the growing rel roster: EDGE_STYLES entries gain a sym rendered as a small mid-edge label with a white backing (IsInstanceOf = "∈"; IsChildOf stays unlabeled as the background structure), and the legend shows the symbol. Convention from the abacus viewer EDGE_SYM dict.

Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro>
This commit is contained in:
Álvaro Tejero Cantero 2026-07-16 18:43:50 +02:00
parent 661eeb7dfd
commit dc6c97e446
No known key found for this signature in database
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
backend/resources/app/templates/graph-console.tmpl
View File

@ -366,11 +366,14 @@ Graph Console
}; };
const FALLBACK_STYLE = { color: "#5b7089", glyph: "circle", size: 14 }; const FALLBACK_STYLE = { color: "#5b7089", glyph: "circle", size: 14 };
// Edge style keyed on rel (wire field since slice-3); future edge // Edge style keyed on rel (wire field since slice-3); future edge
// attributes can feed styling the same way. Both rels stay grey — // attributes can feed styling the same way. All rels stay grey (chroma
// dash alone separates them, keeping all chroma for diff marks. // belongs to diff marks); identity comes from `sym`, a compact unicode
// rel label rendered mid-edge (abacus viewer EDGE_SYM convention) —
// dash variants alone cannot carry the growing rel roster. IsChildOf
// is the unlabeled default (the background tree structure).
const EDGE_STYLES = { const EDGE_STYLES = {
"IsChildOf": { stroke: "#b3b0a8" }, "IsChildOf": { stroke: "#b3b0a8" },
"IsInstanceOf": { stroke: "#8b98a9", lineDash: [4, 3] } "IsInstanceOf": { stroke: "#8b98a9", lineDash: [4, 3], sym: "∈" }
}; };
const FALLBACK_EDGE_STYLE = { stroke: "#b3b0a8" }; const FALLBACK_EDGE_STYLE = { stroke: "#b3b0a8" };
// --- graph diff: add/remove marks with step fade -------------------- // --- graph diff: add/remove marks with step fade --------------------
@ -828,6 +831,12 @@ Graph Console
const m = edgeMark(d); const m = edgeMark(d);
return m ? Math.max(diffFade(m), 0.15) : 1; return m ? Math.max(diffFade(m), 0.15) : 1;
}, },
labelText: function (d) { return edgeStyle(d.data.rel).sym || ""; },
labelFontSize: 9,
labelFill: "#52514e",
labelBackground: true,
labelBackgroundFill: "#ffffff",
labelBackgroundOpacity: 0.75,
endArrow: true, endArrow: true,
endArrowSize: 6 endArrowSize: 6
} }
@ -902,7 +911,7 @@ Graph Console
const s = edgeStyle(rel); const s = edgeStyle(rel);
items.push('<span style="margin-right: 1em; white-space: nowrap;">' items.push('<span style="margin-right: 1em; white-space: nowrap;">'
+ '<span style="color: ' + s.stroke + '; font-size: 14px;">' + '<span style="color: ' + s.stroke + '; font-size: 14px;">'
+ (s.lineDash ? "⇢" : "→") + '</span> ' + escapeHtml(s.sym || (s.lineDash ? "⇢" : "→")) + '</span> '
+ escapeHtml(rel) + "</span>"); + escapeHtml(rel) + "</span>");
}); });
if (anyLiveMarks()) { if (anyLiveMarks()) {