fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 04:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve the node graph with revamped top bar and disabling tools when graph is open (#2093)

Browse Source 
* Add "Fade Artwork" slider and disable tools when graph is open

* Add navigation and layer/node management buttons to graph top bar

* Reduce code duplication
This commit is contained in:
Keavon Chambers
2024-11-04 20:41:53 +00:00
committed by GitHub
parent 12ca06035c
commit f1b0d8fa87
19 changed files with 480 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.svelte
+1 -1
View File
@@ -504,7 +504,7 @@
<canvas class="overlays" width={canvasWidthRoundedToEven} height={canvasHeightRoundedToEven} style:width={canvasWidthCSS} style:height={canvasHeightCSS} data-overlays-canvas>
</canvas>
</div>
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
<Graph />
</div>
</LayoutCol>
frontend/src/components/views/Graph.svelte
+3 -3
View File
@@ -989,7 +989,7 @@
}
&.disabled {
background: var(--color-3-darkgray);
background: rgba(var(--color-4-dimgray-rgb), 0.33);
color: var(--color-a-softgray);
.icon-label {
@@ -1041,10 +1041,10 @@
}
&.selected {
background: rgba(var(--color-5-dullgray-rgb), 0.5);
background: rgba(var(--color-5-dullgray-rgb), 0.33);
&.in-selected-network {
background: rgba(var(--color-6-lowergray-rgb), 0.5);
background: rgba(var(--color-6-lowergray-rgb), 0.33);
}
}
frontend/src/components/widgets/WidgetSection.svelte
+10 -12
View File
@@ -27,18 +27,16 @@
<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
<div class="expand-arrow" />
<TextLabel bold={true}>{widgetData.name}</TextLabel>
{#if widgetData.pinned}
<IconButton
icon={"CheckboxChecked"}
tooltip={"Unpin this node so it's no longer shown here without a selection"}
size={24}
action={(e) => {
editor.handle.unpinNode(widgetData.id);
e?.stopPropagation();
}}
class={"show-only-on-hover"}
/>
{/if}
<IconButton
icon={widgetData.pinned ? "CheckboxChecked" : "CheckboxUnchecked"}
tooltip={widgetData.pinned ? "Unpin this node so it's no longer shown here when nothing is selected" : "Pin this node so it's shown here when nothing is selected"}
size={24}
action={(e) => {
editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
e?.stopPropagation();
}}
class={"show-only-on-hover"}
/>
<IconButton
icon={"Trash"}
tooltip={"Delete this node from the layer chain"}