mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 05:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add "New Folder"/"Delete Selected" buttons to layer panel

Browse source 
Closes #532
This commit is contained in:
Keavon Chambers 2022-03-02 21:55:32 -08:00
parent 8387ffe735
commit f128434e50
8 changed files with 67 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/assets/16px-solid/new-layer.svg Normal file
View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13,6h-2V4h-1v2H8v1h2v2h1V7h2V6z" />
<path d="M1,2v6.3L6.7,14H15V2H1z M14,13H7V8H2V3h12V13z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 175 B

7
frontend/assets/16px-solid/trash.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M11,6v7c0,0.5-0.4,1-0.9,1H4.9C4.4,14,4,13.5,4,13V6H11z M12,5H3v8c0,1.1,0.8,1.9,1.8,2h0h5.3h0c1-0.1,1.8-1,1.8-2V5z" />
<path d="M12,3h-2c0-1.1-0.9-2-2-2H7C5.9,1,5,1.9,5,3H3C2.4,3,2,3.4,2,4h11C13,3.4,12.6,3,12,3 M7,2h1c0.6,0,1,0.4,1,1H6C6,2.4,6.4,2,7,2" />
<path d="M6,12.5C6,12.8,5.8,13,5.5,13S5,12.8,5,12.5v-5C5,7.2,5.2,7,5.5,7S6,7.2,6,7.5V12.5z" />
<path d="M8,12.5C8,12.8,7.8,13,7.5,13S7,12.8,7,12.5v-5C7,7.2,7.2,7,7.5,7S8,7.2,8,7.5V12.5z" />
<path d="M10,12.5c0,0.3-0.2,0.5-0.5,0.5S9,12.8,9,12.5v-5C9,7.2,9.2,7,9.5,7S10,7.2,10,7.5V12.5z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 626 B

1
frontend/src/components/panels/Document.vue
View file

@ -53,6 +53,7 @@
<LayoutCol class="working-colors">
<SwatchPairInput />
<LayoutRow class="swap-and-reset">
<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
<IconButton :action="swapWorkingColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
<IconButton :action="resetWorkingColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
</LayoutRow>

28
frontend/src/components/panels/LayerTree.vue
View file

@ -28,6 +28,14 @@
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
</LayoutRow>
<LayoutRow class="button-bar">
<LayoutRow></LayoutRow>
<LayoutRow>
<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
<IconButton :action="createEmptyFolder" :icon="'NewLayer'" title="New Folder (Ctrl+Shift+N)" :size="16" />
<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="16" />
</LayoutRow>
</LayoutRow>
<LayoutRow class="layer-tree" :scrollableY="true">
<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
<LayoutRow
@ -111,7 +119,21 @@
}
}
.button-bar {
height: 24px;
flex: 0 0 auto;
justify-content: space-between;
align-items: center;
margin: 0 4px;
.layout-row {
flex: 0 0 auto;
gap: 4px;
}
}
.layer-tree {
margin-top: 4px;
// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
margin-bottom: -1px;
position: relative;
@ -366,6 +388,12 @@ export default defineComponent({
markTopOffset(height: number): string {
return `${height}px`;
},
async createEmptyFolder() {
this.editor.instance.create_empty_folder();
},
async deleteSelectedLayers() {
this.editor.instance.delete_selected_layers();
},
async toggleLayerVisibility(path: BigUint64Array) {
this.editor.instance.toggle_layer_visibility(path);
},

4
frontend/src/utilities/icons.ts
View file

@ -46,7 +46,9 @@ import File from "@/../assets/16px-solid/file.svg";
import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
import NewLayer from "@/../assets/16px-solid/new-layer.svg";
import Paste from "@/../assets/16px-solid/paste.svg";
import Trash from "@/../assets/16px-solid/trash.svg";
import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
@ -150,7 +152,9 @@ export const ICON_LIST = {
FlipHorizontal: { component: FlipHorizontal, size: size16 },
FlipVertical: { component: FlipVertical, size: size16 },
GraphiteLogo: { component: GraphiteLogo, size: size16 },
NewLayer: { component: NewLayer, size: size16 },
Paste: { component: Paste, size: size16 },
Trash: { component: Trash, size: size16 },
ViewModeNormal: { component: ViewModeNormal, size: size16 },
ViewModeOutline: { component: ViewModeOutline, size: size16 },
ViewModePixels: { component: ViewModePixels, size: size16 },

12
frontend/wasm/src/api.rs
View file

@ -418,6 +418,12 @@ impl JsEditorHandle {
self.dispatch(message);
}
/// Delete all selected layers
pub fn delete_selected_layers(&self) {
let message = DocumentMessage::DeleteSelectedLayers;
self.dispatch(message);
}
/// Reorder selected layer
pub fn reorder_selected_layers(&self, relative_index_offset: isize) {
let message = DocumentMessage::ReorderSelectedLayers { relative_index_offset };
@ -508,9 +514,9 @@ impl JsEditorHandle {
self.dispatch(message);
}
/// Requests the backend to add an empty folder inside the provided containing folder
pub fn add_folder(&self, container_path: Vec<LayerId>) {
let message = DocumentMessage::CreateEmptyFolder { container_path };
/// Creates an empty folder at the document root
pub fn create_empty_folder(&self) {
let message = DocumentMessage::CreateEmptyFolder { container_path: vec![] };
self.dispatch(message);
}