Options bar widgets for tools to control tool behavior

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

@@ -6,49 +6,7 @@
 
  <Separator :type="SeparatorType.Section" />
 
- <IconButton :icon="'AlignHorizontalLeft'" :size="24" title="Horizontal Align Left" />
- <IconButton :icon="'AlignHorizontalCenter'" :size="24" title="Horizontal Align Center" />
- <IconButton :icon="'AlignHorizontalRight'" :size="24" gapAfter title="Horizontal Align Right" />
-
- <Separator :type="SeparatorType.Unrelated" />
-
- <IconButton :icon="'AlignVerticalTop'" :size="24" title="Vertical Align Top" />
- <IconButton :icon="'AlignVerticalCenter'" :size="24" title="Vertical Align Center" />
- <IconButton :icon="'AlignVerticalBottom'" :size="24" title="Vertical Align Bottom" />
-
- <Separator :type="SeparatorType.Related" />
-
- <PopoverButton>
- <h3>Align</h3>
- <p>More alignment-related buttons will be here</p>
- </PopoverButton>
-
- <Separator :type="SeparatorType.Section" />
-
- <IconButton :icon="'FlipHorizontal'" :size="24" title="Flip Horizontal" />
- <IconButton :icon="'FlipVertical'" :size="24" title="Flip Vertical" />
-
- <Separator :type="SeparatorType.Related" />
-
- <PopoverButton>
- <h3>Flip</h3>
- <p>More flip-related buttons will be here</p>
- </PopoverButton>
-
- <Separator :type="SeparatorType.Section" />
-
- <IconButton :icon="'BooleanUnion'" :size="24" title="Boolean Union" />
- <IconButton :icon="'BooleanSubtractFront'" :size="24" title="Boolean Subtract Front" />
- <IconButton :icon="'BooleanSubtractBack'" :size="24" title="Boolean Subtract Back" />
- <IconButton :icon="'BooleanIntersect'" :size="24" title="Boolean Intersect" />
- <IconButton :icon="'BooleanDifference'" :size="24" title="Boolean Difference" />
-
- <Separator :type="SeparatorType.Related" />
-
- <PopoverButton>
- <h3>Boolean</h3>
- <p>More boolean-related buttons will be here</p>
- </PopoverButton>
+ <ToolOptions :activeTool="activeTool" />
  </div>
  <div class="spacer"></div>
  <div class="right side">
@@ -255,6 +213,7 @@ import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
 import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
+import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
 const modeMenuEntries: SectionsOfMenuListEntries = [
@@ -401,6 +360,7 @@ export default defineComponent({
  NumberInput,
  DropdownInput,
  OptionalInput,
+ ToolOptions,
 	},
 });
 </script>

client/web/src/components/widgets/options/ToolOptions.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="tool-options">
+ <template v-for="(option, index) in optionsMap.get(activeTool) || []" :key="index">
+ <IconButton v-if="option.kind === 'icon_button'" :icon="option.icon" :size="24" :title="option.title" />
+ <Separator v-if="option.kind === 'separator'" :type="option.type" />
+ <PopoverButton v-if="option.kind === 'popover_button'">
+ <h3>{{ option.title }}</h3>
+ <p>{{ option.placeholderText }}</p>
+ </PopoverButton>
+ <NumberInput v-if="option.kind === 'number_input'" :callback="option.callback" :initialValue="option.initial" :step="option.step" :min="option.min" :updateOnCallback="true" />
+ </template>
+	</div>
+</template>
+
+<style lang="scss">
+.tool-options {
+	height: 100%;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Separator, { SeparatorType } from "@/components/widgets/separators/Separator.vue";
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+
+const wasm = import("@/../wasm/pkg");
+
+type ToolOptionsList = Array<ToolOptions>;
+type ToolOptionsMap = Map<string, ToolOptionsList>;
+type ToolOptions = IconButtonOption | SeparatorOption | PopoverButtonOption | NumberInputOption;
+
+interface IconButtonOption {
+	kind: "icon_button";
+	icon: string;
+	title: string;
+}
+
+interface SeparatorOption {
+	kind: "separator";
+	type: SeparatorType;
+}
+
+interface PopoverButtonOption {
+	kind: "popover_button";
+	title: string;
+	placeholderText: string;
+}
+
+interface NumberInputOption {
+	kind: "number_input";
+	initial: number;
+	step: number;
+	min?: number;
+	callback?: Function;
+}
+
+export default defineComponent({
+	props: {
+ activeTool: { type: String },
+	},
+	computed: {},
+	methods: {
+ async setToolOptions(newValue: number) {
+ // TODO: Each value-input widget (i.e. not a button) should map to a field in an options struct,
+ // and updating a widget should send the whole updated struct to the backend.
+ // Later, it could send a single-field update to the backend.
+
+ const { set_tool_options } = await wasm;
+ // This is a placeholder call, using the Shape tool as an example
+ set_tool_options(this.$props.activeTool || "", { Shape: { shape_type: { Polygon: { vertices: newValue } } } });
+ },
+	},
+	data() {
+ const optionsMap: ToolOptionsMap = new Map([
+ [
+ "Select",
+ [
+ { kind: "icon_button", icon: "AlignHorizontalLeft", title: "Horizontal Align Left" },
+ { kind: "icon_button", icon: "AlignHorizontalCenter", title: "Horizontal Align Center" },
+ { kind: "icon_button", icon: "AlignHorizontalRight", title: "Horizontal Align Right" },
+
+ { kind: "separator", type: SeparatorType.Unrelated },
+
+ { kind: "icon_button", icon: "AlignVerticalTop", title: "Vertical Align Top" },
+ { kind: "icon_button", icon: "AlignVerticalCenter", title: "Vertical Align Center" },
+ { kind: "icon_button", icon: "AlignVerticalBottom", title: "Vertical Align Bottom" },
+
+ { kind: "separator", type: SeparatorType.Related },
+
+ { kind: "popover_button", title: "Align", placeholderText: "More alignment-related buttons will be here" },
+
+ { kind: "separator", type: SeparatorType.Section },
+
+ { kind: "icon_button", icon: "FlipHorizontal", title: "Flip Horizontal" },
+ { kind: "icon_button", icon: "FlipVertical", title: "Flip Vertical" },
+
+ { kind: "separator", type: SeparatorType.Related },
+
+ { kind: "popover_button", title: "Flip", placeholderText: "More flip-related buttons will be here" },
+
+ { kind: "separator", type: SeparatorType.Section },
+
+ { kind: "icon_button", icon: "BooleanUnion", title: "Boolean Union" },
+ { kind: "icon_button", icon: "BooleanSubtractFront", title: "Boolean Subtract Front" },
+ { kind: "icon_button", icon: "BooleanSubtractBack", title: "Boolean Subtract Back" },
+ { kind: "icon_button", icon: "BooleanIntersect", title: "Boolean Intersect" },
+ { kind: "icon_button", icon: "BooleanDifference", title: "Boolean Difference" },
+
+ { kind: "separator", type: SeparatorType.Related },
+
+ { kind: "popover_button", title: "Boolean", placeholderText: "More boolean-related buttons will be here" },
+ ],
+ ],
+ ["Shape", [{ kind: "number_input", initial: 6, step: 1, min: 3, callback: this.setToolOptions }]],
+ ]);
+
+ return {
+ optionsMap,
+ SeparatorType,
+ };
+	},
+	components: {
+ Separator,
+ IconButton,
+ PopoverButton,
+ NumberInput,
+	},
+});
+</script>

client/web/wasm/src/document.rs

@@ -4,6 +4,7 @@ use crate::EDITOR_STATE;
 use editor_core::input::input_preprocessor::ModifierKeys;
 use editor_core::input::mouse::ScrollDelta;
 use editor_core::message_prelude::*;
+use editor_core::tool::tool_options::ToolOptions;
 use editor_core::{
 	input::mouse::{MouseState, ViewportPosition},
 	LayerId,
@@ -23,6 +24,18 @@ pub fn select_tool(tool: String) -> Result<(), JsValue> {
 	})
 }
 
+/// Update the options for a given tool
+#[wasm_bindgen]
+pub fn set_tool_options(tool: String, options: &JsValue) -> Result<(), JsValue> {
+	match options.into_serde::<ToolOptions>() {
+ Ok(options) => EDITOR_STATE.with(|editor| match translate_tool(&tool) {
+ Some(tool) => editor.borrow_mut().handle_message(ToolMessage::SetToolOptions(tool, options)).map_err(convert_error),
+ None => Err(Error::new(&format!("Couldn't select {} because it was not recognized as a valid tool", tool)).into()),
+ }),
+ Err(err) => Err(Error::new(&format!("Invalud JSON for ToolOptions: {}", err)).into()),
+	}
+}
+
 #[wasm_bindgen]
 pub fn select_document(document: usize) -> Result<(), JsValue> {
 	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(DocumentMessage::SelectDocument(document)).map_err(convert_error))

core/editor/src/tool/mod.rs

@@ -1,5 +1,5 @@
 pub mod tool_message_handler;
-pub mod tool_settings;
+pub mod tool_options;
 pub mod tools;
 
 use crate::document::Document;
@@ -15,8 +15,8 @@ use std::{
 	fmt::{self, Debug},
 };
 pub use tool_message_handler::ToolMessageHandler;
-use tool_settings::ToolSettings;
-pub use tool_settings::*;
+use tool_options::ToolOptions;
+pub use tool_options::*;
 use tools::*;
 
 pub mod tool_messages {
@@ -37,7 +37,7 @@ pub trait Fsm {
 pub struct DocumentToolData {
 	pub primary_color: Color,
 	pub secondary_color: Color,
-tool_settings: HashMap<ToolType, ToolSettings>,
+pub tool_options: HashMap<ToolType, ToolOptions>,
 }
 
 type SubToolMessageHandler = dyn for<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>>;
@@ -48,7 +48,7 @@ pub struct ToolData {
 
 impl fmt::Debug for ToolData {
 	fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
- f.debug_struct("ToolData").field("active_tool_type", &self.active_tool_type).field("tool_settings", &"[…]").finish()
+ f.debug_struct("ToolData").field("active_tool_type", &self.active_tool_type).field("tool_options", &"[…]").finish()
 	}
 }
 
@@ -89,7 +89,7 @@ impl Default for ToolFsmState {
  document_tool_data: DocumentToolData {
  primary_color: Color::BLACK,
  secondary_color: Color::WHITE,
-tool_settings: default_tool_settings(),
+tool_options: default_tool_options(),
  },
  }
 	}
@@ -105,8 +105,8 @@ impl ToolFsmState {
 	}
 }
 
-fn default_tool_settings() -> HashMap<ToolType, ToolSettings> {
-	let tool_init = |tool: ToolType| (tool, tool.default_settings());
+fn default_tool_options() -> HashMap<ToolType, ToolOptions> {
+	let tool_init = |tool: ToolType| (tool, tool.default_options());
 	std::array::IntoIter::new([
  tool_init(ToolType::Select),
  tool_init(ToolType::Ellipse),
@@ -174,12 +174,12 @@ impl fmt::Display for ToolType {
 }
 
 impl ToolType {
-	fn default_settings(&self) -> ToolSettings {
+	fn default_options(&self) -> ToolOptions {
  match self {
- ToolType::Select => ToolSettings::Select { append_mode: SelectAppendMode::New },
- ToolType::Ellipse => ToolSettings::Ellipse,
- ToolType::Shape => ToolSettings::Shape {
-shape: Shape::Polygon { vertices: 3 },
+ ToolType::Select => ToolOptions::Select { append_mode: SelectAppendMode::New },
+ ToolType::Ellipse => ToolOptions::Ellipse,
+ ToolType::Shape => ToolOptions::Shape {
+shape_type: ShapeType::Polygon { vertices: 6 },
  },
  _ => todo!(),
  }

core/editor/src/tool/tool_message_handler.rs

@@ -4,7 +4,7 @@ use document_core::color::Color;
 use crate::input::InputPreprocessor;
 use crate::{
 	document::Document,
-	tool::{ToolFsmState, ToolType},
+	tool::{tool_options::ToolOptions, ToolFsmState, ToolType},
 };
 use std::collections::VecDeque;
 
@@ -16,6 +16,7 @@ pub enum ToolMessage {
 	SelectSecondaryColor(Color),
 	SwapColors,
 	ResetColors,
+	SetToolOptions(ToolType, ToolOptions),
 	#[child]
 	Fill(FillMessage),
 	#[child]
@@ -89,6 +90,9 @@ impl MessageHandler<ToolMessage, (&Document, &InputPreprocessor)> for ToolMessag
  .into(),
  )
  }
+ SetToolOptions(tool_type, tool_options) => {
+ self.tool_state.document_tool_data.tool_options.insert(tool_type, tool_options);
+ }
  message => {
  let tool_type = match message {
  Fill(_) => ToolType::Fill,
@@ -111,7 +115,7 @@ impl MessageHandler<ToolMessage, (&Document, &InputPreprocessor)> for ToolMessag
  }
 	}
 	fn actions(&self) -> ActionList {
- let mut list = actions!(ToolMessageDiscriminant; ResetColors, SwapColors, SelectTool);
+ let mut list = actions!(ToolMessageDiscriminant; ResetColors, SwapColors, SelectTool, SetToolOptions);
  list.extend(self.tool_state.tool_data.active_tool().actions());
  list
 	}

core/editor/src/tool/tool_options.rs

@@ -0,0 +1,22 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Copy, Eq, PartialEq, Serialize, Deserialize)]
+pub enum ToolOptions {
+	Select { append_mode: SelectAppendMode },
+	Ellipse,
+	Shape { shape_type: ShapeType },
+}
+
+#[derive(Debug, Clone, Copy, Eq, PartialEq, Serialize, Deserialize)]
+pub enum SelectAppendMode {
+	New,
+	Add,
+	Subtract,
+	Intersect,
+}
+
+#[derive(Debug, Clone, Copy, Eq, PartialEq, Serialize, Deserialize)]
+pub enum ShapeType {
+	Star { vertices: u32 },
+	Polygon { vertices: u32 },
+}