mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-07 15:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add recursive folder expand/collapse to the Layers panel (#2419)

Browse source 
* added_recursion_fix

* Add tooltip and tidy up color visibility

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0SlowPoke0 2025-03-11 02:31:00 +05:30 • committed by GitHub
parent 7a3bb999a9
commit d2fc919ba6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 36 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/Editor.svelte
View file

@ -152,8 +152,11 @@
transparent calc((3px * sqrt(2) / 2) + 0.5px),
transparent calc(6px * sqrt(2) / 2)
);
--inheritance-dots-background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6" width="6px" height="6px" fill="%23444"><rect width="1" height="1" /><rect x="3" y="3" width="1" height="1" /></svg>\
--inheritance-dots-background-4-dimgray: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" width="4px" height="4px" fill="%23444"><rect width="1" height="1" /><rect x="2" y="2" width="1" height="1" /></svg>\
');
--inheritance-dots-background-6-lowergray: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" width="4px" height="4px" fill="%23666"><rect width="1" height="1" /><rect x="2" y="2" width="1" height="1" /></svg>\
');
// Array of 2x3 dots (fill: --color-e-nearwhite)

17
frontend/src/components/panels/Layers.svelte
View file

@ -135,8 +135,11 @@
editor.handle.toggleLayerLock(id);
}
function handleExpandArrowClick(id: bigint) {
editor.handle.toggleLayerExpansion(id);
function handleExpandArrowClickWithModifiers(e: MouseEvent, id: bigint) {
const accel = platformIsMac() ? e.metaKey : e.ctrlKey;
const collapseRecursive = e.altKey || accel;
editor.handle.toggleLayerExpansion(id, collapseRecursive);
e.stopPropagation();
}
async function onEditLayerName(listing: LayerListingInfo) {
@ -432,8 +435,10 @@
class="expand-arrow"
class:expanded={listing.entry.expanded}
disabled={!listing.entry.childrenPresent}
title={listing.entry.expanded ? "Collapse" : `Expand${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.id)}
title={listing.entry.expanded
? "Collapse (Click) / Collapse All (Alt Click)"
: `Expand (Click) / Expand All (Alt Click)${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
tabindex="0"
></button>
{/if}
@ -545,11 +550,11 @@
}
&.ancestor-of-selected .expand-arrow:not(.expanded) {
background-image: var(--inheritance-stripes-background);
background-image: var(--inheritance-dots-background-6-lowergray);
}
&.descendant-of-selected {
background-image: var(--inheritance-dots-background);
background-image: var(--inheritance-dots-background-4-dimgray);
}
&.selected-but-not-in-selected-network {

4
frontend/wasm/src/editor_api.rs
View file

@ -700,9 +700,9 @@ impl EditorHandle {
/// Toggle expansions state of a layer from the layer list
#[wasm_bindgen(js_name = toggleLayerExpansion)]
pub fn toggle_layer_expansion(&self, id: u64) {
pub fn toggle_layer_expansion(&self, id: u64, recursive: bool) {
let id = NodeId(id);
let message = DocumentMessage::ToggleLayerExpansion { id };
let message = DocumentMessage::ToggleLayerExpansion { id, recursive };
self.dispatch(message);
}