mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Options bar widgets for tools to control tool behavior (#283)

Browse source 
* Add JSON-backed options widget

* Add initial tool settings messaging to backend

* Add shape side selection with JSON deserialization

* Enforce minimum number of n-gon sides

* Make tool settings JSON errors safer

* Make tool settings JSON errors safer

* Refactor ToolOptions to ToolSettings

* Revert "Refactor ToolOptions to ToolSettings"

This reverts commit 651161fd16.

* Refactor all instances of "settings" to "options"

* Fix names and formatting

* Rearrange ToolOptions data to enforce types
This commit is contained in:
Henry Sloan 2021-07-21 01:07:48 -04:00 • committed by GitHub
parent bc733acb4c
commit 06c26f44d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 198 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

46
client/web/src/components/panels/Document.vue
View file

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

134
client/web/src/components/widgets/options/ToolOptions.vue Normal file
View file

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

13
client/web/wasm/src/document.rs
View file

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

26
core/editor/src/tool/mod.rs
View file

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

8
core/editor/src/tool/tool_message_handler.rs
View file

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

22
core/editor/src/tool/tool_options.rs Normal file
View file

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

20
core/editor/src/tool/tool_settings.rs
View file

@ -1,20 +0,0 @@
#[derive(Debug, Clone, Copy, Eq, PartialEq)]
pub enum ToolSettings {
Select { append_mode: SelectAppendMode },
Ellipse,
Shape { shape: Shape },
}
#[derive(Debug, Clone, Copy, Eq, PartialEq)]
pub enum SelectAppendMode {
New,
Add,
Subtract,
Intersect,
}
#[derive(Debug, Clone, Copy, Eq, PartialEq)]
pub enum Shape {
Star { vertices: u32 },
Polygon { vertices: u32 },
}

9
core/editor/src/tool/tools/shape.rs
View file

@ -1,5 +1,5 @@
use crate::input::{mouse::ViewportPosition, InputPreprocessor};
use crate::tool::{DocumentToolData, Fsm, ToolActionHandlerData};
use crate::tool::{DocumentToolData, Fsm, ShapeType, ToolActionHandlerData, ToolOptions, ToolType};
use crate::{document::Document, message_prelude::*};
use document_core::{layers::style, Operation};
use glam::{DAffine2, DVec2};
@ -70,7 +70,12 @@ impl Fsm for ShapeToolFsmState {
data.drag_start = input.mouse.position;
data.drag_current = input.mouse.position;
data.sides = 6;
data.sides = match tool_data.tool_options.get(&ToolType::Shape) {
Some(&ToolOptions::Shape {
shape_type: ShapeType::Polygon { vertices },
}) => vertices as u8,
_ => 6,
};
responses.push_back(Operation::MountWorkingFolder { path: vec![] }.into());
Dragging