Rename the "Layers" panel to "Layer Graph"

README.md

@@ -12,7 +12,7 @@ If the Graphite project strikes your fancy, join our Discord community to chat w
 
 ## Design mockup
 
-This is a **work-in-progress mockup** of the document, properties, and layers panels. The mockup is a nonfunctional pixel-perfect prototype, not code. It is presently being replicated by a functional web UI.
+This is a **work-in-progress mockup** of the Document, Properties, and Layer Tree panels. The mockup is a nonfunctional pixel-perfect prototype, not code. It is presently being replicated by a functional web UI.
 
 ![Demo UI mockup](https://files.keavon.com/-/FatherlyGorgeousAmphiuma/capture.png)
 
@@ -22,7 +22,7 @@ This is a **work-in-progress mockup** of the document, properties, and layers pa
 
 Graphite is an open source, cross-platform digital content creation desktop and web application for 2D graphics editing, photo processing, vector art, digital painting, illustration, data visualization, and compositing. Inspired by the open source success story of Blender in the 3D domain, it aims to bring 2D content creation to new heights with efficient workflows influenced by Photoshop and Illustrator and backed by a powerful node-based, nondestructive approach proven by Houdini and Substance.
 
-The user experience of Graphite is of central importance, offering a meticulously-designed UI catering towards an intuitive and efficient artistic process. Users may draw and edit in the traditional interactive (WYSIWYG) viewport with the layers panel or jump in or out of the node graph at any time to tweak previous work and construct powerful procedural image generators that seamlessly sync with the interactive viewport. A core principle of the application is its 100% nondestructive workflow that is resolution-agnostic, meaning that raster-style image editing can be infinitely zoomed and scaled to any arbitrary resolution at a later time because editing is done by recording brush strokes, vector shapes, and other manipulations parametrically.
+The user experience of Graphite is of central importance, offering a meticulously-designed UI catering towards an intuitive and efficient artistic process. Users may draw and edit in the traditional interactive (WYSIWYG) viewport with the Layer Tree panel or jump in or out of the node graph at any time to tweak previous work and construct powerful procedural image generators that seamlessly sync with the interactive viewport. A core principle of the application is its 100% nondestructive workflow that is resolution-agnostic, meaning that raster-style image editing can be infinitely zoomed and scaled to any arbitrary resolution at a later time because editing is done by recording brush strokes, vector shapes, and other manipulations parametrically.
 
 One might use the painting tools on a small laptop display, zoom into specific areas to add detail to finish the artwork, then perhaps try changing the simulated brush style from a blunt pencil to a soft acrylic paintbrush after-the-fact, and finally export the complete drawing at ultra high resolution for printing on a large poster.
 

client/web/src/components/panel-system/DockablePanel.vue

@@ -166,10 +166,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Document from "../panels/DocumentPanel.vue";
-import Properties from "../panels/PropertiesPanel.vue";
-import Layers from "../panels/LayersPanel.vue";
-import Minimap from "../panels/MinimapPanel.vue";
+import Document from "../panels/Document.vue";
+import Properties from "../panels/Properties.vue";
+import LayerTree from "../panels/LayerTree.vue";
+import Minimap from "../panels/Minimap.vue";
 import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
 import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
 
@@ -177,7 +177,7 @@ export default defineComponent({
 	components: {
 		Document,
 		Properties,
-		Layers,
+		LayerTree,
 		Minimap,
 		CloseX,
 		VerticalEllipsis,

client/web/src/components/panel-system/PanelArea.vue

@@ -10,7 +10,7 @@
 			</LayoutRow>
 			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
 			<LayoutRow class="dockable-grid-subdivision">
-				<DockablePanel :panelType="'Layers'" :tabLabels="['Layers']" :tabActiveIndex="0" />
+				<DockablePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
 			<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;">

client/web/src/components/panels/Document.vue

@@ -10,8 +10,8 @@
 				<!-- <span class="label">Layer 1</span> -->
 			</div>
 		</LayoutRow>
-		<LayoutRow :class="'toolbar-and-viewport'">
-			<LayoutCol :class="'toolbar'"></LayoutCol>
+		<LayoutRow :class="'shelf-and-viewport'">
+			<LayoutCol :class="'shelf'"></LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<div
 					class="canvas"
@@ -61,8 +61,8 @@
 		}
 	}
 
-	.toolbar-and-viewport {
-		.toolbar {
+	.shelf-and-viewport {
+		.shelf {
 			flex: 0 0 32px;
 		}
 
@@ -79,9 +79,8 @@
 					height: 100%;
 				}
 			}
-
 		}
-}
+	}
 }
 </style>
 

docs/editor/1-overview.md

@@ -39,8 +39,8 @@ TODO: Add more to make a comprehensive list, finish writing definitions, separat
   The bar that spans horizontally across the top of a *panel* (located under the *tab bar*) which displays options related to the *panel*.
 - Viewport  
   The area that takes up the main space in a *panel* (located beneath the *options bar*) which displays the primary content of the *panel*.
-- Toolbar  
-  The bar that spans vertically across the left side of some *panels* (located left of the *viewport*) which displays a catalog of available items, such as document editing *tools* or common *nodes*.
+- Shelf  
+  The bar that spans vertically along the left side of some *panels* (located left of the *viewport*) which displays a catalog of available items, such as document editing *tools* or common *nodes*.
 - Tool  
   An instrument for interactively editing *documents* through a collection of related behavior. Each tool puts the editor into a mode that provides the ability to perform certain *operations* on the document interactively. Each *operation* is run based on the current context of mouse and modifier buttons, key presses, tool options, selected layers, editor state, and document state. The *operations* that get run are appended to the document history and update the underlying *layer graph* in real time.
 - Canvas  

docs/editor/index.md

@@ -26,13 +26,13 @@ Work in progress.
 		- Origin
 		- Transform
 		- Node-specific properties
-	- Layers
+	- Layer Tree
 		- Interface
 		- Compositing flow
 		- Groups
 		- Masks
 		- Isolation
-	- Graph
+	- Layer Graph
 		- Interface
 		- Layer/node equivalence
 		- Compositing flow