mirror of
https://github.com/penpot/penpot.git
synced 2026-09-11 22:49:30 +00:00
✨ Highlight clicked node neighborhood in graph console
click-select behavior with degree 1: the clicked element keeps a black ring, direct neighbors stay full-strength, everything else dims to 0.2 opacity (inactive state); clicking empty canvas clears. Works on edges too (selects both endpoints) and composes with the node inspector on the same click. Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro>
This commit is contained in:
parent
e6dcd1af99
commit
18db1debf8
@ -820,6 +820,11 @@ Graph Console
|
|||||||
const m = nodeMark(d.id);
|
const m = nodeMark(d.id);
|
||||||
return m && m.kind === "removed" ? diffFade(m) : 1;
|
return m && m.kind === "removed" ? diffFade(m) : 1;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
selected: { stroke: "#0b0b0b", lineWidth: 2 },
|
||||||
|
active: {},
|
||||||
|
inactive: { opacity: 0.2, labelOpacity: 0.2 }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
edge: {
|
edge: {
|
||||||
@ -845,6 +850,11 @@ Graph Console
|
|||||||
labelBackgroundOpacity: 0.75,
|
labelBackgroundOpacity: 0.75,
|
||||||
endArrow: true,
|
endArrow: true,
|
||||||
endArrowSize: 6
|
endArrowSize: 6
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
selected: { lineWidth: 2 },
|
||||||
|
active: {},
|
||||||
|
inactive: { strokeOpacity: 0.1, labelOpacity: 0.1 }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
combo: {
|
combo: {
|
||||||
@ -860,7 +870,12 @@ Graph Console
|
|||||||
radius: 4
|
radius: 4
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
behaviors: ["zoom-canvas", "drag-canvas", "drag-element", "collapse-expand"],
|
behaviors: ["zoom-canvas", "drag-canvas", "drag-element", "collapse-expand",
|
||||||
|
// Click highlights the 1-degree neighborhood (selected node black
|
||||||
|
// ring, neighbors keep full strength, the rest dims); clicking
|
||||||
|
// empty canvas clears. Runs alongside the node:click inspector.
|
||||||
|
{ type: "click-select", degree: 1,
|
||||||
|
state: "selected", neighborState: "active", unselectedState: "inactive" }],
|
||||||
plugins: [{
|
plugins: [{
|
||||||
key: "toolbar",
|
key: "toolbar",
|
||||||
type: "toolbar",
|
type: "toolbar",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user