Redesign the Layers panel

frontend/src/components/panels/Layers.svelte

@@ -23,8 +23,6 @@
 	let list: LayoutCol | undefined;
 
 	const RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT = 20;
-	const LAYER_INDENT = 16;
-	const INSERT_MARK_MARGIN_LEFT = 4 + 32 + LAYER_INDENT;
 	const INSERT_MARK_OFFSET = 2;
 
 	type DraggingData = {
@@ -68,18 +66,6 @@
 		});
 	});
 
-	function layerIndent(layer: LayerPanelEntry): string {
-		return `${layer.path.length * LAYER_INDENT}px`;
-	}
-
-	function markIndent(path: BigUint64Array): string {
-		return `${INSERT_MARK_MARGIN_LEFT + path.length * LAYER_INDENT}px`;
-	}
-
-	function markTopOffset(height: number): string {
-		return `${height}px`;
-	}
-
 	function toggleLayerVisibility(path: BigUint64Array) {
 		editor.instance.toggleLayerVisibility(path);
 	}
@@ -171,15 +157,11 @@
 
 		if (treeChildren !== undefined && treeOffset !== undefined) {
 			Array.from(treeChildren).forEach((treeChild, index) => {
-				const layerComponents = treeChild.getElementsByClassName("layer");
+				const indexAttribute = treeChild.getAttribute("data-index");
-				if (layerComponents.length !== 1) return;
-				const child = layerComponents[0];
-
-				const indexAttribute = child.getAttribute("data-index");
 				if (!indexAttribute) return;
 				const { folderIndex, entry: layer } = layers[parseInt(indexAttribute, 10)];
 
-				const rect = child.getBoundingClientRect();
+				const rect = treeChild.getBoundingClientRect();
 				const position = rect.top + rect.height / 2;
 				const distance = position - clientY;
 
@@ -312,76 +294,70 @@
 	}
 </script>
 
-<LayoutCol class="layer-tree" on:dragleave={() => (dragInPanel = false)}>
+<LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}>
 	<LayoutRow class="options-bar" scrollableX={true}>
 		<WidgetLayout layout={layerTreeOptionsLayout} />
 	</LayoutRow>
-	<LayoutRow class="layer-tree-rows" scrollableY={true}>
+	<LayoutRow class="list-area" scrollableY={true}>
 		<LayoutCol class="list" bind:this={list} on:click={() => deselectAllLayers()} on:dragover={(e) => draggable && updateInsertLine(e)} on:dragend={() => draggable && drop()}>
 			{#each layers as listing, index (String(listing.entry.path.slice(-1)))}
 				<LayoutRow
-					class="layer-row"
+					class="layer"
 					classes={{
+						selected: fakeHighlight ? fakeHighlight.includes(listing.entry.path) : listing.entry.layerMetadata.selected,
 						"insert-folder": (draggingData?.highlightFolder || false) && draggingData?.insertFolder === listing.entry.path,
 					}}
+					styles={{ "--layer-indent-levels": `${listing.entry.path.length - 1}` }}
+					data-layer={String(listing.entry.path)}
+					data-index={index}
+					tooltip={listing.entry.tooltip}
+					{draggable}
+					on:dragstart={(e) => draggable && dragStart(e, listing)}
+					on:click={(e) => selectLayerWithModifiers(e, listing)}
 				>
-					<LayoutRow class="visibility">
-						<IconButton
-							action={(e) => (toggleLayerVisibility(listing.entry.path), e?.stopPropagation())}
-							size={24}
-							icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
-							tooltip={listing.entry.visible ? "Visible" : "Hidden"}
-						/>
-					</LayoutRow>
-
-					<div class="indent" style:margin-left={layerIndent(listing.entry)} />
-
 					{#if isGroupOrArtboard(listing.entry.layerType)}
 						<button class="expand-arrow" class:expanded={listing.entry.layerMetadata.expanded} on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.path)} tabindex="0" />
-					{/if}
+						{#if listing.entry.layerType === "Artboard"}
-					<LayoutRow
+							<IconLabel icon="Artboard" class={"layer-type-icon"} />
-						class="layer"
+						{:else if listing.entry.layerType === "Folder"}
-						classes={{
+							<IconLabel icon="Folder" class={"layer-type-icon"} />
-							selected: fakeHighlight ? fakeHighlight.includes(listing.entry.path) : listing.entry.layerMetadata.selected,
+						{/if}
-						}}
+					{:else}
-						data-layer={String(listing.entry.path)}
-						data-index={index}
-						tooltip={listing.entry.tooltip}
-						{draggable}
-						on:dragstart={(e) => draggable && dragStart(e, listing)}
-						on:click={(e) => selectLayerWithModifiers(e, listing)}
-					>
-						<LayoutRow class="layer-type-icon">
-							<IconLabel icon={listing.entry.layerType || "Info"} />
-						</LayoutRow>
-						<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
-							<input
-								data-text-input
-								type="text"
-								value={listing.entry.name}
-								placeholder={`Untitled ${listing.entry.layerType || "[Unknown Layer Type]"}`}
-								disabled={!listing.editingName}
-								on:blur={() => onEditLayerNameDeselect(listing)}
-								on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}
-								on:keydown={(e) => e.key === "Enter" && onEditLayerNameChange(listing, e)}
-								on:change={(e) => onEditLayerNameChange(listing, e)}
-							/>
-						</LayoutRow>
 						<div class="thumbnail">
 							{@html listing.entry.thumbnail}
 						</div>
+					{/if}
+					<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
+						<input
+							data-text-input
+							type="text"
+							value={listing.entry.name}
+							placeholder={`Untitled ${listing.entry.layerType || "[Unknown Layer Type]"}`}
+							disabled={!listing.editingName}
+							on:blur={() => onEditLayerNameDeselect(listing)}
+							on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}
+							on:keydown={(e) => e.key === "Enter" && onEditLayerNameChange(listing, e)}
+							on:change={(e) => onEditLayerNameChange(listing, e)}
+						/>
 					</LayoutRow>
+					<IconButton
+						class={"visibility"}
+						action={(e) => (toggleLayerVisibility(listing.entry.path), e?.stopPropagation())}
+						size={24}
+						icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
+						tooltip={listing.entry.visible ? "Visible" : "Hidden"}
+					/>
 				</LayoutRow>
 			{/each}
 		</LayoutCol>
 		{#if draggingData && !draggingData.highlightFolder && dragInPanel}
-			<div class="insert-mark" style:left={markIndent(draggingData.insertFolder)} style:top={markTopOffset(draggingData.markerHeight)} />
+			<div class="insert-mark" style:top={`${draggingData.markerHeight}px`} />
 		{/if}
 	</LayoutRow>
 </LayoutCol>
 
 <style lang="scss" global>
-	.layer-tree {
+	.layers {
 		// Options bar
 		.options-bar {
 			height: 32px;
@@ -389,8 +365,9 @@
 			margin: 0 4px;
 			align-items: center;
 
-			.widget-layout {
+			.widget-span {
 				width: 100%;
+				height: 100%;
 				min-width: 300px;
 			}
 
@@ -407,35 +384,32 @@
 		}
 
 		// Layer tree
-		.layer-tree-rows {
+		.list-area {
-			margin-top: 4px;
+			margin: 4px 0;
-			// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
-			margin-bottom: -1px;
 			position: relative;
 
-			.layer-row {
+			.layer {
 				flex: 0 0 auto;
 				align-items: center;
 				position: relative;
 				height: 32px;
 				margin: 0 4px;
-				border-bottom: 1px solid var(--color-4-dimgray);
+				padding-left: calc(4px + var(--layer-indent-levels) * 16px);
+				border-bottom: 1px solid var(--color-2-mildblack);
+				border-radius: 2px;
 
-				.visibility {
+				&.selected {
-					flex: 0 0 auto;
+					background: var(--color-4-dimgray);
-					height: 100%;
+				}
-					align-items: center;
 
-					.icon-button {
+				&.insert-folder {
-						height: 100%;
+					outline: 3px solid var(--color-e-nearwhite);
-						width: calc(24px + 2 * 4px);
+					outline-offset: -3px;
-					}
 				}
 
 				.expand-arrow {
 					padding: 0;
 					margin: 0;
-					margin-left: -16px;
 					width: 16px;
 					height: 100%;
 					border: none;
@@ -467,93 +441,83 @@
 					}
 				}
 
-				.layer {
+				.layer-type-icon {
-					align-items: center;
+					flex: 0 0 auto;
-					z-index: 1;
+					margin-left: 4px;
-					width: 100%;
+				}
-					height: 100%;
+
-					padding: 0 4px;
+				.thumbnail {
+					width: 36px;
+					height: 24px;
+					background: white;
 					border-radius: 2px;
-					margin-right: 8px;
+					flex: 0 0 auto;
 
-					&.selected {
+					svg {
-						background: var(--color-5-dullgray);
+						width: calc(100% - 4px);
+						height: calc(100% - 4px);
+						margin: 2px;
 					}
+				}
 
-					.layer-type-icon {
+				.layer-name {
-						flex: 0 0 auto;
+					flex: 1 1 100%;
-						margin: 0 4px;
+					margin: 0 8px;
-					}
 
-					.layer-name {
+					input {
-						flex: 1 1 100%;
+						color: inherit;
-						margin: 0 4px;
+						background: none;
+						border: none;
+						outline: none; // Ok for input element
+						margin: 0;
+						padding: 0;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						border-radius: 2px;
+						height: 24px;
+						width: 100%;
 
-						input {
+						&:disabled {
+							-webkit-user-select: none; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
+							user-select: none;
+							// Workaround for `user-select: none` not working on <input> elements
+							pointer-events: none;
+						}
+
+						&::placeholder {
+							opacity: 1;
 							color: inherit;
-							background: none;
+							font-style: italic;
-							border: none;
+						}
-							outline: none; // Ok for input element
-							margin: 0;
-							padding: 0;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-							overflow: hidden;
-							border-radius: 2px;
-							height: 24px;
-							width: 100%;
 
-							&:disabled {
+						&:focus {
-								-webkit-user-select: none; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
+							background: var(--color-1-nearblack);
-								user-select: none;
+							padding: 0 4px;
-								// Workaround for `user-select: none` not working on <input> elements
-								pointer-events: none;
-							}
 
 							&::placeholder {
-								opacity: 1;
+								opacity: 0.5;
-								color: inherit;
-								font-style: italic;
 							}
-
-							&:focus {
-								background: var(--color-1-nearblack);
-								padding: 0 4px;
-
-								&::placeholder {
-									opacity: 0.5;
-								}
-							}
-						}
-					}
-
-					.thumbnail {
-						width: 36px;
-						height: 24px;
-						margin: 2px 0;
-						margin-left: 4px;
-						background: white;
-						border-radius: 2px;
-						flex: 0 0 auto;
-
-						svg {
-							width: calc(100% - 4px);
-							height: calc(100% - 4px);
-							margin: 2px;
 						}
 					}
 				}
 
-				&.insert-folder .layer {
+				.visibility {
-					outline: 3px solid var(--color-e-nearwhite);
+					flex: 0 0 auto;
-					outline-offset: -3px;
+					align-items: center;
+					height: 100%;
+
+					.icon-button {
+						height: 100%;
+						width: calc(24px + 2 * 4px);
+					}
 				}
 			}
 
 			.insert-mark {
 				position: absolute;
-				// `left` is applied dynamically
+				left: 4px;
-				right: 0;
+				right: 4px;
 				background: var(--color-e-nearwhite);
 				margin-top: -2px;
 				height: 5px;

frontend/src/components/window/workspace/Panel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
 	import Document from "@graphite/components/panels/Document.svelte";
-	import LayerTree from "@graphite/components/panels/LayerTree.svelte";
+	import Layers from "@graphite/components/panels/Layers.svelte";
 	import Properties from "@graphite/components/panels/Properties.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
@@ -8,7 +8,7 @@
 
 	const PANEL_COMPONENTS = {
 		Document,
-		LayerTree,
+		Layers,
 		Properties,
 	};
 	type PanelTypes = keyof typeof PANEL_COMPONENTS;

frontend/src/components/window/workspace/Workspace.svelte

@@ -119,7 +119,7 @@
 			</LayoutRow>
 			<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
 			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">
-				<Panel panelType="LayerTree" tabLabels={[{ name: "Layers" }]} tabActiveIndex={0} />
+				<Panel panelType="Layers" tabLabels={[{ name: "Layers" }]} tabActiveIndex={0} />
 			</LayoutRow>
 		</LayoutCol>
 	</LayoutRow>