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

Closes #532

editor/src/document/document_message_handler.rs

@@ -750,6 +750,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 			CreateEmptyFolder { mut container_path } => {
 				let id = generate_uuid();
 				container_path.push(id);
+				responses.push_back(DocumentMessage::DeselectAllLayers.into());
 				responses.push_back(DocumentOperation::CreateFolder { path: container_path.clone() }.into());
 				responses.push_back(
 					DocumentMessage::SetLayerExpansion {
@@ -1251,6 +1252,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 			SetSnapping,
 			DebugPrintDocument,
 			ZoomCanvasToFitAll,
+			CreateEmptyFolder,
 		);
 
 		if self.layer_metadata.values().any(|data| data.selected) {

editor/src/input/input_mapper.rs

@@ -28,7 +28,6 @@ impl Default for Mapping {
 
 		let mappings = mapping![
 			// Higher priority than entries in sections below
-			entry! {action=PortfolioMessage::Paste { clipboard: Clipboard::User }, key_down=KeyV, modifiers=[KeyControl]},
 			entry! {action=MovementMessage::PointerMove { snap_angle: KeyControl, wait_for_snap_angle_release: true, snap_zoom: KeyControl, zoom_from_viewport: None }, message=InputMapperMessage::PointerMove},
 			// Transform layers
 			entry! {action=TransformLayerMessage::ApplyTransformOperation, key_down=KeyEnter},
@@ -142,15 +141,13 @@ impl Default for Mapping {
 			// Colors
 			entry! {action=ToolMessage::ResetColors, key_down=KeyX, modifiers=[KeyShift, KeyControl]},
 			entry! {action=ToolMessage::SwapColors, key_down=KeyX, modifiers=[KeyShift]},
-			// Editor Actions
+			// Editor actions
 			entry! {action=FrontendMessage::TriggerFileUpload, key_down=KeyO, modifiers=[KeyControl]},
-			// Document Actions
-			entry! {action=PortfolioMessage::Paste { clipboard: Clipboard::User }, key_down=KeyV, modifiers=[KeyControl]},
+			// Document actions
 			entry! {action=DocumentMessage::Redo, key_down=KeyZ, modifiers=[KeyControl, KeyShift]},
 			entry! {action=DocumentMessage::Undo, key_down=KeyZ, modifiers=[KeyControl]},
 			entry! {action=DocumentMessage::DeselectAllLayers, key_down=KeyA, modifiers=[KeyControl, KeyAlt]},
 			entry! {action=DocumentMessage::SelectAllLayers, key_down=KeyA, modifiers=[KeyControl]},
-			entry! {action=DocumentMessage::CreateEmptyFolder { container_path: vec![] }, key_down=KeyN, modifiers=[KeyControl, KeyShift]},
 			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyDelete},
 			entry! {action=DocumentMessage::DeleteSelectedLayers, key_down=KeyBackspace},
 			entry! {action=DocumentMessage::ExportDocument, key_down=KeyE, modifiers=[KeyControl]},
@@ -158,11 +155,15 @@ impl Default for Mapping {
 			entry! {action=DocumentMessage::SaveDocument, key_down=KeyS, modifiers=[KeyControl, KeyShift]},
 			entry! {action=DocumentMessage::DebugPrintDocument, key_down=Key9},
 			entry! {action=DocumentMessage::ZoomCanvasToFitAll, key_down=Key0, modifiers=[KeyControl]},
-			// Initiate Transform Layers
+			entry! {action=DocumentMessage::DuplicateSelectedLayers, key_down=KeyD, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::GroupSelectedLayers, key_down=KeyG, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::UngroupSelectedLayers, key_down=KeyG, modifiers=[KeyControl, KeyShift]},
+			entry! {action=DocumentMessage::CreateEmptyFolder { container_path: vec![] }, key_down=KeyN, modifiers=[KeyControl, KeyShift]},
+			// Layer transformation
 			entry! {action=TransformLayerMessage::BeginGrab, key_down=KeyG},
 			entry! {action=TransformLayerMessage::BeginRotate, key_down=KeyR},
 			entry! {action=TransformLayerMessage::BeginScale, key_down=KeyS},
-			// Document movement
+			// Movement actions
 			entry! {action=MovementMessage::RotateCanvasBegin, key_down=Mmb, modifiers=[KeyControl]},
 			entry! {action=MovementMessage::ZoomCanvasBegin, key_down=Mmb, modifiers=[KeyShift]},
 			entry! {action=MovementMessage::TranslateCanvasBegin, key_down=Mmb},
@@ -181,17 +182,15 @@ impl Default for Mapping {
 			entry! {action=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(-1., 0.) }, key_down=KeyPageDown, modifiers=[KeyShift]},
 			entry! {action=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(0., 1.) }, key_down=KeyPageUp},
 			entry! {action=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(0., -1.) }, key_down=KeyPageDown},
-			// Document actions
+			// Portfolio actions
 			entry! {action=PortfolioMessage::NewDocument, key_down=KeyN, modifiers=[KeyControl]},
 			entry! {action=PortfolioMessage::NextDocument, key_down=KeyTab, modifiers=[KeyControl]},
 			entry! {action=PortfolioMessage::PrevDocument, key_down=KeyTab, modifiers=[KeyControl, KeyShift]},
 			entry! {action=PortfolioMessage::CloseAllDocumentsWithConfirmation, key_down=KeyW, modifiers=[KeyControl, KeyAlt]},
 			entry! {action=PortfolioMessage::CloseActiveDocumentWithConfirmation, key_down=KeyW, modifiers=[KeyControl]},
-			entry! {action=DocumentMessage::DuplicateSelectedLayers, key_down=KeyD, modifiers=[KeyControl]},
+			entry! {action=PortfolioMessage::Paste { clipboard: Clipboard::User }, key_down=KeyV, modifiers=[KeyControl]},
 			entry! {action=PortfolioMessage::Copy { clipboard: Clipboard::User }, key_down=KeyC, modifiers=[KeyControl]},
 			entry! {action=PortfolioMessage::Cut { clipboard: Clipboard::User }, key_down=KeyX, modifiers=[KeyControl]},
-			entry! {action=DocumentMessage::GroupSelectedLayers, key_down=KeyG, modifiers=[KeyControl]},
-			entry! {action=DocumentMessage::UngroupSelectedLayers, key_down=KeyG, modifiers=[KeyControl, KeyShift]},
 			// Nudging
 			entry! {action=DocumentMessage::NudgeSelectedLayers { delta_x: -SHIFT_NUDGE_AMOUNT, delta_y: -SHIFT_NUDGE_AMOUNT }, key_down=KeyArrowUp, modifiers=[KeyShift, KeyArrowLeft]},
 			entry! {action=DocumentMessage::NudgeSelectedLayers { delta_x: SHIFT_NUDGE_AMOUNT, delta_y: -SHIFT_NUDGE_AMOUNT }, key_down=KeyArrowUp, modifiers=[KeyShift, KeyArrowRight]},
@@ -218,10 +217,10 @@ impl Default for Mapping {
 			entry! {action=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }, key_down=KeyArrowRight, modifiers=[KeyArrowDown]},
 			entry! {action=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: 0. }, key_down=KeyArrowRight},
 			// Reorder Layers
-			entry! {action=DocumentMessage::ReorderSelectedLayers { relative_index_offset: isize::MAX }, key_down=KeyRightCurlyBracket, modifiers=[KeyControl]}, // TODO: Use KeyRightBracket with ctrl+shift modifiers once input system is fixed
+			entry! {action=DocumentMessage::ReorderSelectedLayers { relative_index_offset: isize::MAX }, key_down=KeyRightCurlyBracket, modifiers=[KeyControl]}, // TODO: Use KeyRightBracket with Ctrl+Shift modifiers once input system is fixed
 			entry! {action=DocumentMessage::ReorderSelectedLayers { relative_index_offset: 1 }, key_down=KeyRightBracket, modifiers=[KeyControl]},
 			entry! {action=DocumentMessage::ReorderSelectedLayers { relative_index_offset: -1 }, key_down=KeyLeftBracket, modifiers=[KeyControl]},
-			entry! {action=DocumentMessage::ReorderSelectedLayers { relative_index_offset: isize::MIN }, key_down=KeyLeftCurlyBracket, modifiers=[KeyControl]}, // TODO: Use KeyLeftBracket with ctrl+shift modifiers once input system is fixed
+			entry! {action=DocumentMessage::ReorderSelectedLayers { relative_index_offset: isize::MIN }, key_down=KeyLeftCurlyBracket, modifiers=[KeyControl]}, // TODO: Use KeyLeftBracket with Ctrl+Shift modifiers once input system is fixed
 			// Global Actions
 			entry! {action=GlobalMessage::LogInfo, key_down=Key1},
 			entry! {action=GlobalMessage::LogDebug, key_down=Key2},

frontend/assets/16px-solid/new-layer.svg

@@ -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>

frontend/assets/16px-solid/trash.svg

@@ -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>

frontend/src/components/panels/Document.vue

@@ -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>

frontend/src/components/panels/LayerTree.vue

@@ -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);
 		},

frontend/src/utilities/icons.ts

@@ -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 },

frontend/wasm/src/api.rs

@@ -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);
 	}