Rename Crop tool to Artboard tool

docs/design/inputs-and-keybindings.md

@@ -81,7 +81,7 @@
 | Tool            | Graphite     | Photoshop                                  | Illustrator                   | XD               | Affinity Designer             | Inkscape | Gimp     |
 | --------------- | ------------ | ------------------------------------------ | ----------------------------- | ---------------- | ----------------------------- | -------- | -------- |
 Select Tool       | <kbd>V</kbd> | **<kbd>V</kbd>**                           | <kbd>V</kbd>                  | <kbd>V</kbd>     | <kbd>V</kbd>                  |          |          |
-Crop Tool         | <kbd> </kbd> | <kbd>C</kbd>                               | <kbd>Shift</kbd><kbd>O</kbd>  | <kbd>A</kbd>     |                               |          |          |
+Artboard Tool     | <kbd> </kbd> | <kbd>C</kbd>                               | <kbd>Shift</kbd><kbd>O</kbd>  | <kbd>A</kbd>     |                               |          |          |
 Navigate Tool     | <kbd>Z</kbd> | **<kbd>Z</kbd>**/<kbd>H</kbd>/<kbd>R</kbd> | **<kbd>Z</kbd>**/<kbd>H</kbd> | **<kbd>Z</kbd>** | **<kbd>Z</kbd>**/<kbd>H</kbd> |          |          |
 Eyedropper Tool   | <kbd>I</kbd> | **<kbd>I</kbd>**                           | **<kbd>I</kbd>**              |                  | **<kbd>I</kbd>**              |          |          |
 Fill Tool         | <kbd>F</kbd> | <kbd>G</kbd>                               |                               |                  | <kbd>G</kbd>                  |          |          |
@@ -112,7 +112,7 @@ Excluding mouse inputs and modifier keys.
 - <kbd>R</kbd> Rotate the selected items. Type a number to rotate by that many degrees (`°` or `deg` or `degree` or `degrees`), or type a unit suffix (`turn` or `turns` or `rev` or `revs`, `rad` or `radians`, `min` or `minutes` or `'`, `sec` or `seconds` or `"`, `grad`).
 - <kbd>S</kbd> Scale the selected items. Hit X or Y to constrain to that global axis, hit X or Y again to constrain to that local axis. Type a number to scale along that axis by that factor (`fac` or `factor`), or type a unit suffix (`%`).
 
-##### Crop Tool
+##### Artboard Tool
 
 ##### Navigate Tool
 

docs/editor/1-overview.md

@@ -42,9 +42,9 @@ TODO: Add more to make a comprehensive list, finish writing definitions, separat
 - ## 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  
-  The infinite coordinate system that shows the visual output of an open *document* at the current zoom level and pan position. It is drawn in the document panel's *viewport* within the area inside the scroll bars on the bottom/right edges and the *rulers* on the top/left edges. The canvas can be panned and zoomed in order to display all or part of the artwork in any *frames*. A canvas has a coordinate system spanning infinitely in all directions with an origin always located at the top left of the primary *frame*. The purpose of an infinite canvas is to offer a convenient editing experience when there is no logical edge to the artwork, for example a loosely-arranged board of logo design concepts, a mood board, or whiteboard-style notes.
-- ## Frame  
-  An area inside a *canvas* that provides rectangular bounds to the artwork contained within, as well as default bounds for an exported image. This is also called an "artboard" in some other software. The *crop tool* adjusts the bounds and placement of frames in the *document* and each frame is stored in a "frame list" property of the *root layer*. When there is at least one frame, the infinite *canvas* area outside any frame displays a configurable background color. Artwork can be placed outside of a frame but it will appear mostly transparent. The purpose of using one frame is to provide convenient cropping to the edges of the artwork, such as a single digital painting or photograph. The purpose of using multiple frames is to work on related artwork with separate bounds, such as the layout for a book.
+  The infinite coordinate system that shows the visual output of an open *document* at the current zoom level and pan position. It is drawn in the document panel's *viewport* within the area inside the scroll bars on the bottom/right edges and the *rulers* on the top/left edges. The canvas can be panned and zoomed in order to display all or part of the artwork in any *frames*. A canvas has a coordinate system spanning infinitely in all directions with an origin always located at the top left of the primary *artboard*. The purpose of an infinite canvas is to offer a convenient editing experience when there is no logical edge to the artwork, for example a loosely-arranged board of logo design concepts, a mood board, or whiteboard-style notes.
+- ## Artboard  
+  An area inside a *canvas* that provides rectangular bounds to the artwork contained within, as well as default bounds for an exported image. The *Artboard tool* adjusts the bounds and placement of frames in the *document* and each artboard is stored in a "artboard list" property of the *root layer*. When there is at least one artboard, the infinite *canvas* area outside any artboard displays a configurable background color. Artwork can be placed outside of a artboard but it will appear mostly transparent. The purpose of using one artboard is to provide convenient cropping to the edges of the artwork, such as a single digital painting or photograph. The purpose of using multiple frames is to work on related artwork with separate bounds, such as the layout for a book.
 - ## Layer graph  
   A (directed acyclic) graph structure composed of *layers* with *connections* between their input and output *ports*. This is commonly referred to as a "node graph" in other software, but Graphite's layer graph is more suited towards layer-based compositing compared to traditional compositor node graphs.
 - ## Node  

editor/src/input/input_mapper.rs

@@ -49,12 +49,12 @@ impl Default for Mapping {
 			entry! {action=SelectToolMessage::EditLayer, message=InputMapperMessage::DoubleClick},
 			entry! {action=SelectToolMessage::Abort, key_down=Rmb},
 			entry! {action=SelectToolMessage::Abort, key_down=KeyEscape},
-			// Crop
-			entry! {action=CropToolMessage::PointerDown, key_down=Lmb},
-			entry! {action=CropToolMessage::PointerMove { constrain_axis_or_aspect: KeyShift, center: KeyAlt }, message=InputMapperMessage::PointerMove},
-			entry! {action=CropToolMessage::PointerUp, key_up=Lmb},
-			entry! {action=CropToolMessage::DeleteSelected, key_down=KeyDelete},
-			entry! {action=CropToolMessage::DeleteSelected, key_down=KeyBackspace},
+			// Artboard
+			entry! {action=ArtboardToolMessage::PointerDown, key_down=Lmb},
+			entry! {action=ArtboardToolMessage::PointerMove { constrain_axis_or_aspect: KeyShift, center: KeyAlt }, message=InputMapperMessage::PointerMove},
+			entry! {action=ArtboardToolMessage::PointerUp, key_up=Lmb},
+			entry! {action=ArtboardToolMessage::DeleteSelected, key_down=KeyDelete},
+			entry! {action=ArtboardToolMessage::DeleteSelected, key_down=KeyBackspace},
 			// Navigate
 			entry! {action=NavigateToolMessage::ClickZoom { zoom_in: false }, key_up=Lmb, modifiers=[KeyShift]},
 			entry! {action=NavigateToolMessage::ClickZoom { zoom_in: true }, key_up=Lmb},

editor/src/lib.rs

@@ -72,7 +72,7 @@ pub mod message_prelude {
 	pub use crate::layout::{LayoutMessage, LayoutMessageDiscriminant};
 	pub use crate::misc::derivable_custom_traits::{ToDiscriminant, TransitiveChild};
 	pub use crate::viewport_tools::tool_message::{ToolMessage, ToolMessageDiscriminant};
-	pub use crate::viewport_tools::tools::crop_tool::{CropToolMessage, CropToolMessageDiscriminant};
+	pub use crate::viewport_tools::tools::artboard_tool::{ArtboardToolMessage, ArtboardToolMessageDiscriminant};
 	pub use crate::viewport_tools::tools::ellipse_tool::{EllipseToolMessage, EllipseToolMessageDiscriminant};
 	pub use crate::viewport_tools::tools::eyedropper_tool::{EyedropperToolMessage, EyedropperToolMessageDiscriminant};
 	pub use crate::viewport_tools::tools::fill_tool::{FillToolMessage, FillToolMessageDiscriminant};

editor/src/misc/macros.rs

@@ -25,7 +25,7 @@ macro_rules! count_args {
 /// ```ignore
 /// let tools = gen_tools_hash_map! {
 ///     Select => select::Select,
-///     Crop => crop::Crop,
+///     Artboard => artboard::Artboard,
 /// };
 /// ```
 /// expands to
@@ -34,7 +34,7 @@ macro_rules! count_args {
 ///     let mut hash_map: std::collections::HashMap<crate::tool::ToolType, Box<dyn crate::tool::Tool>> = std::collections::HashMap::with_capacity(count_args!(/* Macro args */));
 ///
 ///     hash_map.insert(crate::tool::ToolType::Select, Box::new(select::Select::default()));
-///     hash_map.insert(crate::tool::ToolType::Crop, Box::new(crop::Crop::default()));
+///     hash_map.insert(crate::tool::ToolType::Artboard, Box::new(artboard::Artboard::default()));
 ///
 ///     hash_map
 /// };

editor/src/viewport_tools/tool.rs

@@ -79,7 +79,7 @@ impl Default for ToolFsmState {
 				tools: gen_tools_hash_map! {
 					// General
 					Select => select_tool::SelectTool,
-					Crop => crop_tool::CropTool,
+					Artboard => artboard_tool::ArtboardTool,
 					Navigate => navigate_tool::NavigateTool,
 					Eyedropper => eyedropper_tool::EyedropperTool,
 					Fill => fill_tool::FillTool,
@@ -127,7 +127,7 @@ impl ToolFsmState {
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
 pub enum ToolType {
 	Select,
-	Crop,
+	Artboard,
 	Navigate,
 	Eyedropper,
 	Text,
@@ -155,7 +155,7 @@ impl fmt::Display for ToolType {
 
 		let name = match_variant_name!(match (self) {
 			Select,
-			Crop,
+			Artboard,
 			Navigate,
 			Eyedropper,
 			Text,
@@ -192,7 +192,7 @@ pub fn standard_tool_message(tool: ToolType, message_type: StandardToolMessageTy
 	match message_type {
 		StandardToolMessageType::DocumentIsDirty => match tool {
 			ToolType::Select => Some(SelectToolMessage::DocumentIsDirty.into()),
-			ToolType::Crop => Some(CropToolMessage::DocumentIsDirty.into()),
+			ToolType::Artboard => Some(ArtboardToolMessage::DocumentIsDirty.into()),
 			ToolType::Navigate => None,   // Some(NavigateToolMessage::DocumentIsDirty.into()),
 			ToolType::Eyedropper => None, // Some(EyedropperToolMessage::DocumentIsDirty.into()),
 			ToolType::Text => Some(TextMessage::DocumentIsDirty.into()),
@@ -215,7 +215,7 @@ pub fn standard_tool_message(tool: ToolType, message_type: StandardToolMessageTy
 		},
 		StandardToolMessageType::Abort => match tool {
 			ToolType::Select => Some(SelectToolMessage::Abort.into()),
-			ToolType::Crop => Some(CropToolMessage::Abort.into()),
+			ToolType::Artboard => Some(ArtboardToolMessage::Abort.into()),
 			ToolType::Navigate => Some(NavigateToolMessage::Abort.into()),
 			ToolType::Eyedropper => Some(EyedropperToolMessage::Abort.into()),
 			ToolType::Text => Some(TextMessage::Abort.into()),
@@ -249,7 +249,7 @@ pub fn message_to_tool_type(message: &ToolMessage) -> ToolType {
 
 	match message {
 		Select(_) => ToolType::Select,
-		Crop(_) => ToolType::Crop,
+		Artboard(_) => ToolType::Artboard,
 		Navigate(_) => ToolType::Navigate,
 		Eyedropper(_) => ToolType::Eyedropper,
 		Text(_) => ToolType::Text,

editor/src/viewport_tools/tool_message.rs

@@ -15,7 +15,7 @@ pub enum ToolMessage {
 	Select(SelectToolMessage),
 	#[remain::unsorted]
 	#[child]
-	Crop(CropToolMessage),
+	Artboard(ArtboardToolMessage),
 	#[remain::unsorted]
 	#[child]
 	Navigate(NavigateToolMessage),

editor/src/viewport_tools/tools/artboard_tool.rs

@@ -18,15 +18,15 @@ use glam::{DVec2, Vec2Swizzles};
 use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
-pub struct CropTool {
-	fsm_state: CropToolFsmState,
-	data: CropToolData,
+pub struct ArtboardTool {
+	fsm_state: ArtboardToolFsmState,
+	data: ArtboardToolData,
 }
 
 #[remain::sorted]
-#[impl_message(Message, ToolMessage, Crop)]
+#[impl_message(Message, ToolMessage, Artboard)]
 #[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
-pub enum CropToolMessage {
+pub enum ArtboardToolMessage {
 	// Standard messages
 	#[remain::unsorted]
 	Abort,
@@ -43,7 +43,7 @@ pub enum CropToolMessage {
 	PointerUp,
 }
 
-impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for CropTool {
+impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for ArtboardTool {
 	fn process_action(&mut self, action: ToolMessage, data: ToolActionHandlerData<'a>, responses: &mut VecDeque<Message>) {
 		if action == ToolMessage::UpdateHints {
 			self.fsm_state.update_hints(responses);
@@ -63,27 +63,27 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for CropTool {
 		}
 	}
 
-	advertise_actions!(CropToolMessageDiscriminant; PointerDown, PointerUp, PointerMove, DeleteSelected, Abort);
+	advertise_actions!(ArtboardToolMessageDiscriminant; PointerDown, PointerUp, PointerMove, DeleteSelected, Abort);
 }
 
-impl PropertyHolder for CropTool {}
+impl PropertyHolder for ArtboardTool {}
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
-enum CropToolFsmState {
+enum ArtboardToolFsmState {
 	Ready,
 	Drawing,
 	ResizingBounds,
 	Dragging,
 }
 
-impl Default for CropToolFsmState {
+impl Default for ArtboardToolFsmState {
 	fn default() -> Self {
-		CropToolFsmState::Ready
+		ArtboardToolFsmState::Ready
 	}
 }
 
 #[derive(Clone, Debug, Default)]
-struct CropToolData {
+struct ArtboardToolData {
 	bounding_box_overlays: Option<BoundingBoxOverlays>,
 	selected_board: Option<LayerId>,
 	snap_handler: SnapHandler,
@@ -92,8 +92,8 @@ struct CropToolData {
 	drag_current: DVec2,
 }
 
-impl Fsm for CropToolFsmState {
-	type ToolData = CropToolData;
+impl Fsm for ArtboardToolFsmState {
+	type ToolData = ArtboardToolData;
 	type ToolOptions = ();
 
 	fn transition(
@@ -106,9 +106,9 @@ impl Fsm for CropToolFsmState {
 		input: &InputPreprocessorMessageHandler,
 		responses: &mut VecDeque<Message>,
 	) -> Self {
-		if let ToolMessage::Crop(event) = event {
+		if let ToolMessage::Artboard(event) = event {
 			match (self, event) {
-				(CropToolFsmState::Ready | CropToolFsmState::ResizingBounds | CropToolFsmState::Dragging, CropToolMessage::DocumentIsDirty) => {
+				(ArtboardToolFsmState::Ready | ArtboardToolFsmState::ResizingBounds | ArtboardToolFsmState::Dragging, ArtboardToolMessage::DocumentIsDirty) => {
 					let mut buffer = Vec::new();
 					match (
 						data.selected_board.map(|path| document.artboard_bounding_box_and_transform(&[path])).unwrap_or(None),
@@ -139,7 +139,7 @@ impl Fsm for CropToolFsmState {
 					buffer.into_iter().rev().for_each(|message| responses.push_front(message));
 					self
 				}
-				(CropToolFsmState::Ready, CropToolMessage::PointerDown) => {
+				(ArtboardToolFsmState::Ready, ArtboardToolMessage::PointerDown) => {
 					data.drag_start = input.mouse.position;
 					data.drag_current = input.mouse.position;
 
@@ -164,7 +164,7 @@ impl Fsm for CropToolFsmState {
 						data.snap_handler
 							.start_snap(document, document.bounding_boxes(None, Some(data.selected_board.unwrap())), snap_x, snap_y);
 
-						CropToolFsmState::ResizingBounds
+						ArtboardToolFsmState::ResizingBounds
 					} else {
 						let tolerance = DVec2::splat(SELECTION_TOLERANCE);
 						let quad = Quad::from_box([input.mouse.position - tolerance, input.mouse.position + tolerance]);
@@ -184,7 +184,7 @@ impl Fsm for CropToolFsmState {
 								.into(),
 							);
 
-							CropToolFsmState::Dragging
+							ArtboardToolFsmState::Dragging
 						} else {
 							let id = generate_uuid();
 							data.selected_board = Some(id);
@@ -202,11 +202,11 @@ impl Fsm for CropToolFsmState {
 
 							responses.push_back(PropertiesPanelMessage::ClearSelection.into());
 
-							CropToolFsmState::Drawing
+							ArtboardToolFsmState::Drawing
 						}
 					}
 				}
-				(CropToolFsmState::ResizingBounds, CropToolMessage::PointerMove { constrain_axis_or_aspect, center }) => {
+				(ArtboardToolFsmState::ResizingBounds, ArtboardToolMessage::PointerMove { constrain_axis_or_aspect, center }) => {
 					if let Some(bounds) = &data.bounding_box_overlays {
 						if let Some(movement) = &bounds.selected_edges {
 							let from_center = input.keyboard.get(center as usize);
@@ -230,9 +230,9 @@ impl Fsm for CropToolFsmState {
 							responses.push_back(ToolMessage::DocumentIsDirty.into());
 						}
 					}
-					CropToolFsmState::ResizingBounds
+					ArtboardToolFsmState::ResizingBounds
 				}
-				(CropToolFsmState::Dragging, CropToolMessage::PointerMove { constrain_axis_or_aspect, .. }) => {
+				(ArtboardToolFsmState::Dragging, ArtboardToolMessage::PointerMove { constrain_axis_or_aspect, .. }) => {
 					if let Some(bounds) = &data.bounding_box_overlays {
 						let axis_align = input.keyboard.get(constrain_axis_or_aspect as usize);
 
@@ -259,9 +259,9 @@ impl Fsm for CropToolFsmState {
 
 						data.drag_current = mouse_position + closest_move;
 					}
-					CropToolFsmState::Dragging
+					ArtboardToolFsmState::Dragging
 				}
-				(CropToolFsmState::Drawing, CropToolMessage::PointerMove { constrain_axis_or_aspect, center }) => {
+				(ArtboardToolFsmState::Drawing, ArtboardToolMessage::PointerMove { constrain_axis_or_aspect, center }) => {
 					let mouse_position = input.mouse.position;
 					let snapped_mouse_position = data.snap_handler.snap_position(responses, input.viewport_bounds.size(), document, mouse_position);
 
@@ -303,9 +303,9 @@ impl Fsm for CropToolFsmState {
 
 					responses.push_back(ToolMessage::DocumentIsDirty.into());
 
-					CropToolFsmState::Drawing
+					ArtboardToolFsmState::Drawing
 				}
-				(CropToolFsmState::Ready, CropToolMessage::PointerMove { .. }) => {
+				(ArtboardToolFsmState::Ready, ArtboardToolMessage::PointerMove { .. }) => {
 					let cursor = data.bounding_box_overlays.as_ref().map_or(MouseCursorIcon::Default, |bounds| bounds.get_cursor(input, false));
 
 					if data.cursor != cursor {
@@ -313,18 +313,18 @@ impl Fsm for CropToolFsmState {
 						responses.push_back(FrontendMessage::UpdateMouseCursor { cursor }.into());
 					}
 
-					CropToolFsmState::Ready
+					ArtboardToolFsmState::Ready
 				}
-				(CropToolFsmState::ResizingBounds, CropToolMessage::PointerUp) => {
+				(ArtboardToolFsmState::ResizingBounds, ArtboardToolMessage::PointerUp) => {
 					data.snap_handler.cleanup(responses);
 
 					if let Some(bounds) = &mut data.bounding_box_overlays {
 						bounds.original_transforms.clear();
 					}
 
-					CropToolFsmState::Ready
+					ArtboardToolFsmState::Ready
 				}
-				(CropToolFsmState::Drawing, CropToolMessage::PointerUp) => {
+				(ArtboardToolFsmState::Drawing, ArtboardToolMessage::PointerUp) => {
 					data.snap_handler.cleanup(responses);
 
 					if let Some(bounds) = &mut data.bounding_box_overlays {
@@ -333,25 +333,25 @@ impl Fsm for CropToolFsmState {
 
 					responses.push_back(ToolMessage::DocumentIsDirty.into());
 
-					CropToolFsmState::Ready
+					ArtboardToolFsmState::Ready
 				}
-				(CropToolFsmState::Dragging, CropToolMessage::PointerUp) => {
+				(ArtboardToolFsmState::Dragging, ArtboardToolMessage::PointerUp) => {
 					data.snap_handler.cleanup(responses);
 
 					if let Some(bounds) = &mut data.bounding_box_overlays {
 						bounds.original_transforms.clear();
 					}
 
-					CropToolFsmState::Ready
+					ArtboardToolFsmState::Ready
 				}
-				(_, CropToolMessage::DeleteSelected) => {
+				(_, ArtboardToolMessage::DeleteSelected) => {
 					if let Some(artboard) = data.selected_board.take() {
 						responses.push_back(ArtboardMessage::DeleteArtboard { artboard }.into());
 						responses.push_back(ToolMessage::DocumentIsDirty.into());
 					}
-					CropToolFsmState::Ready
+					ArtboardToolFsmState::Ready
 				}
-				(_, CropToolMessage::Abort) => {
+				(_, ArtboardToolMessage::Abort) => {
 					if let Some(bounding_box_overlays) = data.bounding_box_overlays.take() {
 						bounding_box_overlays.delete(responses);
 					}
@@ -366,7 +366,7 @@ impl Fsm for CropToolFsmState {
 					);
 
 					data.snap_handler.cleanup(responses);
-					CropToolFsmState::Ready
+					ArtboardToolFsmState::Ready
 				}
 				_ => self,
 			}
@@ -377,7 +377,7 @@ impl Fsm for CropToolFsmState {
 
 	fn update_hints(&self, responses: &mut VecDeque<Message>) {
 		let hint_data = match self {
-			CropToolFsmState::Ready => HintData(vec![
+			ArtboardToolFsmState::Ready => HintData(vec![
 				HintGroup(vec![HintInfo {
 					key_groups: vec![],
 					mouse: Some(MouseMotion::LmbDrag),
@@ -397,13 +397,13 @@ impl Fsm for CropToolFsmState {
 					plus: false,
 				}]),
 			]),
-			CropToolFsmState::Dragging => HintData(vec![HintGroup(vec![HintInfo {
+			ArtboardToolFsmState::Dragging => HintData(vec![HintGroup(vec![HintInfo {
 				key_groups: vec![KeysGroup(vec![Key::KeyShift])],
 				mouse: None,
 				label: String::from("Constrain to Axis"),
 				plus: false,
 			}])]),
-			CropToolFsmState::Drawing | CropToolFsmState::ResizingBounds => HintData(vec![HintGroup(vec![
+			ArtboardToolFsmState::Drawing | ArtboardToolFsmState::ResizingBounds => HintData(vec![HintGroup(vec![
 				HintInfo {
 					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
 					mouse: None,

editor/src/viewport_tools/tools/mod.rs

@@ -1,4 +1,4 @@
-pub mod crop_tool;
+pub mod artboard_tool;
 pub mod ellipse_tool;
 pub mod eyedropper_tool;
 pub mod fill_tool;

frontend/src/components/panels/Document.vue

@@ -17,7 +17,7 @@
 			<LayoutCol class="shelf">
 				<LayoutCol class="tools" :scrollableY="true">
 					<ShelfItemInput icon="GeneralSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
-					<ShelfItemInput icon="GeneralCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => selectTool('Crop')" />
+					<ShelfItemInput icon="GeneralArtboardTool" title="Artboard Tool" :active="activeTool === 'Artboard'" :action="() => selectTool('Artboard')" />
 					<ShelfItemInput icon="GeneralNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
 					<ShelfItemInput icon="GeneralEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
 					<ShelfItemInput icon="GeneralFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />

frontend/src/dispatcher/js-messages.ts

@@ -114,7 +114,7 @@ export class UpdateWorkingColors extends JsMessage {
 
 export type ToolName =
 	| "Select"
-	| "Crop"
+	| "Artboard"
 	| "Navigate"
 	| "Eyedropper"
 	| "Text"

frontend/src/utilities/icons.ts

@@ -78,7 +78,7 @@ import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-dow
 import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
 
 // 24px Two-Tone
-import GeneralCropTool from "@/../assets/24px-two-tone/general-crop-tool.svg";
+import GeneralArtboardTool from "@/../assets/24px-two-tone/general-artboard-tool.svg";
 import GeneralEyedropperTool from "@/../assets/24px-two-tone/general-eyedropper-tool.svg";
 import GeneralFillTool from "@/../assets/24px-two-tone/general-fill-tool.svg";
 import GeneralGradientTool from "@/../assets/24px-two-tone/general-gradient-tool.svg";
@@ -184,7 +184,7 @@ export const ICON_LIST = {
 	MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
 	MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
 
-	GeneralCropTool: { component: GeneralCropTool, size: size24 },
+	GeneralArtboardTool: { component: GeneralArtboardTool, size: size24 },
 	GeneralEyedropperTool: { component: GeneralEyedropperTool, size: size24 },
 	GeneralNavigateTool: { component: GeneralNavigateTool, size: size24 },
 	GeneralSelectTool: { component: GeneralSelectTool, size: size24 },

frontend/wasm/src/type_translators.rs

@@ -9,7 +9,7 @@ pub fn translate_tool_type(name: &str) -> Option<ToolType> {
 
 	match_string_to_enum!(match (name) {
 		Select,
-		Crop,
+		Artboard,
 		Navigate,
 		Eyedropper,
 		Text,