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

Implement active tool visual syncing with tool shelf state

Browse source
This commit is contained in:
Keavon Chambers 2021-04-10 03:49:27 -07:00
parent 4c546b2819
commit c98bc770da
7 changed files with 102 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -35,36 +35,36 @@
<LayoutRow :class="'shelf-and-viewport'">
<LayoutCol :class="'shelf'">
<div class="tools">
<ShelfItem active title="Select Tool (V)"><SelectTool /></ShelfItem>
<ShelfItem title="Crop Tool"><CropTool /></ShelfItem>
<ShelfItem title="Navigate Tool"><NavigateTool /></ShelfItem>
<ShelfItem title="Sample Tool"><SampleTool /></ShelfItem>
<ShelfItem title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')"><SelectTool /></ShelfItem>
<ShelfItem title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')"><CropTool /></ShelfItem>
<ShelfItem title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')"><NavigateTool /></ShelfItem>
<ShelfItem title="Sample Tool" :active="activeTool === 'Sample'" @click="'tool not implemented' || selectTool('Sample')"><SampleTool /></ShelfItem>
<ItemDivider horizontal />
<ShelfItem title="Text Tool"><TextTool /></ShelfItem>
<ShelfItem title="Fill Tool"><FillTool /></ShelfItem>
<ShelfItem title="Gradient Tool"><GradientTool /></ShelfItem>
<ShelfItem title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')"><TextTool /></ShelfItem>
<ShelfItem title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')"><FillTool /></ShelfItem>
<ShelfItem title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')"><GradientTool /></ShelfItem>
<ItemDivider horizontal />
<ShelfItem title="Brush Tool"><BrushTool /></ShelfItem>
<ShelfItem title="Heal Tool"><HealTool /></ShelfItem>
<ShelfItem title="Clone Tool"><CloneTool /></ShelfItem>
<ShelfItem title="Patch Tool"><PatchTool /></ShelfItem>
<ShelfItem title="Blur/Sharpen Tool"><BlurSharpenTool /></ShelfItem>
<ShelfItem title="Relight Tool"><RelightTool /></ShelfItem>
<ShelfItem title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')"><BrushTool /></ShelfItem>
<ShelfItem title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')"><HealTool /></ShelfItem>
<ShelfItem title="Clone Tool" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')"><CloneTool /></ShelfItem>
<ShelfItem title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')"><PatchTool /></ShelfItem>
<ShelfItem title="Blur/Sharpen Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')"><BlurSharpenTool /></ShelfItem>
<ShelfItem title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')"><RelightTool /></ShelfItem>
<ItemDivider horizontal />
<ShelfItem title="Path Tool"><PathTool /></ShelfItem>
<ShelfItem title="Pen Tool"><PenTool /></ShelfItem>
<ShelfItem title="Freehand Tool"><FreehandTool /></ShelfItem>
<ShelfItem title="Spline Tool"><SplineTool /></ShelfItem>
<ShelfItem title="Line Tool"><LineTool /></ShelfItem>
<ShelfItem title="Rectangle Tool (M)"><RectangleTool /></ShelfItem>
<ShelfItem title="Ellipse Tool (E)"><EllipseTool /></ShelfItem>
<ShelfItem title="Shape Tool"><ShapeTool /></ShelfItem>
<ShelfItem title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')"><PathTool /></ShelfItem>
<ShelfItem title="Pen Tool" :active="activeTool === 'Pen'" @click="'tool not implemented' || selectTool('Pen')"><PenTool /></ShelfItem>
<ShelfItem title="Freehand Tool" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')"><FreehandTool /></ShelfItem>
<ShelfItem title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')"><SplineTool /></ShelfItem>
<ShelfItem title="Line Tool" :active="activeTool === 'Line'" @click="'tool not implemented' || selectTool('Line')"><LineTool /></ShelfItem>
<ShelfItem title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')"><RectangleTool /></ShelfItem>
<ShelfItem title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')"><EllipseTool /></ShelfItem>
<ShelfItem title="Shape Tool" :active="activeTool === 'Shape'" @click="'tool not implemented' || selectTool('Shape')"><ShapeTool /></ShelfItem>
</div>
<div class="spacer"></div>
<div class="working-colors">
@ -293,17 +293,26 @@ export default defineComponent({
const { on_key_up } = await wasm;
on_key_up(e.key);
},
async selectTool(toolName: string) {
const { select_tool } = await wasm;
select_tool(toolName);
},
},
mounted() {
registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {
this.viewportSvg = responseData;
this.viewportSvg = responseData.split("\n").map((shape, i) => shape.replace("#fff", `#${Math.floor(Math.abs(Math.sin(i + 1)) * 16777215).toString(16)}`)).join("\n");
});
registerResponseHandler(ResponseType.SetActiveTool, (responseData) => {
this.activeTool = responseData;
});
window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
},
data() {
return {
viewportSvg: "",
activeTool: "Select",
};
},
});

1
client/web/src/response-handler.ts
View file

@ -8,6 +8,7 @@ declare global {
export enum ResponseType {
UpdateCanvas = "UpdateCanvas",
SetActiveTool = "SetActiveTool",
}
export function attachResponseHandlerToPage() {

1
client/web/wasm/src/lib.rs
View file

@ -24,6 +24,7 @@ fn handle_response(response: Response) {
let response_type = response.to_string();
match response {
Response::UpdateCanvas { document } => handleResponse(response_type, document),
Response::SetActiveTool { tool_name } => handleResponse(response_type, tool_name),
}
}

11
client/web/wasm/src/wrappers.rs
View file

@ -30,8 +30,19 @@ pub fn translate_tool(name: &str) -> Option<ToolType> {
"Crop" => Some(ToolType::Crop),
"Navigate" => Some(ToolType::Navigate),
"Sample" => Some(ToolType::Sample),
"Text" => Some(ToolType::Text),
"Fill" => Some(ToolType::Fill),
"Gradient" => Some(ToolType::Gradient),
"Brush" => Some(ToolType::Brush),
"Heal" => Some(ToolType::Heal),
"Clone" => Some(ToolType::Clone),
"Patch" => Some(ToolType::Patch),
"BlurSharpen" => Some(ToolType::BlurSharpen),
"Relight" => Some(ToolType::Relight),
"Path" => Some(ToolType::Path),
"Pen" => Some(ToolType::Pen),
"Freehand" => Some(ToolType::Freehand),
"Spline" => Some(ToolType::Spline),
"Line" => Some(ToolType::Line),
"Rectangle" => Some(ToolType::Rectangle),
"Ellipse" => Some(ToolType::Ellipse),

2
core/editor/src/dispatcher/events.rs
View file

@ -26,12 +26,14 @@ pub enum Event {
// TODO - Make Copy when possible
pub enum Response {
UpdateCanvas { document: String },
SetActiveTool { tool_name: String },
}
impl fmt::Display for Response {
fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
match self {
Response::UpdateCanvas { document: _ } => write!(formatter, "UpdateCanvas"),
Response::SetActiveTool { tool_name: _ } => write!(formatter, "SetActiveTool"),
}
}
}

20
core/editor/src/dispatcher/mod.rs
View file

@ -13,8 +13,9 @@ impl Dispatcher {
log::trace!("{:?}", event);
match event {
Event::SelectTool(tool_type) => {
editor_state.tool_state.active_tool_type = *tool_type;
Event::SelectTool(tool_name) => {
editor_state.tool_state.active_tool_type = *tool_name;
self.dispatch_response(Response::SetActiveTool { tool_name: tool_name.to_string() });
}
Event::SelectPrimaryColor(color) => {
editor_state.tool_state.primary_color = *color;
@ -56,14 +57,23 @@ impl Dispatcher {
log::set_max_level(log::LevelFilter::Trace);
log::debug!("set log verbosity to trace");
}
Key::KeyV => {
editor_state.tool_state.active_tool_type = ToolType::Select;
self.dispatch_response(Response::SetActiveTool {
tool_name: ToolType::Select.to_string(),
});
}
Key::KeyM => {
editor_state.tool_state.active_tool_type = ToolType::Rectangle;
self.dispatch_response(Response::SetActiveTool {
tool_name: ToolType::Rectangle.to_string(),
});
}
Key::KeyE => {
editor_state.tool_state.active_tool_type = ToolType::Ellipse;
}
Key::KeyV => {
editor_state.tool_state.active_tool_type = ToolType::Select;
self.dispatch_response(Response::SetActiveTool {
tool_name: ToolType::Ellipse.to_string(),
});
}
Key::KeyX => {
editor_state.tool_state.swap_colors();

44
core/editor/src/tools/mod.rs
View file

@ -14,7 +14,7 @@ use crate::Color;
use crate::Document;
use crate::EditorError;
use document_core::Operation;
use std::collections::HashMap;
use std::{collections::HashMap, fmt};
pub trait Tool {
fn handle_input(&mut self, event: &Event, document: &Document) -> (Vec<Response>, Vec<Operation>);
@ -44,7 +44,7 @@ impl Default for ToolFsmState {
trace: Trace::new(),
primary_color: Color::BLACK,
secondary_color: Color::WHITE,
active_tool_type: ToolType::Rectangle,
active_tool_type: ToolType::Select,
tools: gen_tools_hash_map! {
Select => select::Select,
Crop => crop::Crop,
@ -103,13 +103,51 @@ pub enum ToolType {
Crop,
Navigate,
Sample,
Text,
Fill,
Gradient,
Brush,
Heal,
Clone,
Patch,
BlurSharpen,
Relight,
Path,
Pen,
Freehand,
Spline,
Line,
Rectangle,
Ellipse,
Shape,
// all discriminats must be strictly smaller than TOOL_COUNT!
}
impl fmt::Display for ToolType {
fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
match self {
ToolType::Select => write!(formatter, "Select"),
ToolType::Crop => write!(formatter, "Crop"),
ToolType::Navigate => write!(formatter, "Navigate"),
ToolType::Sample => write!(formatter, "Sample"),
ToolType::Text => write!(formatter, "Text"),
ToolType::Fill => write!(formatter, "Fill"),
ToolType::Gradient => write!(formatter, "Gradient"),
ToolType::Brush => write!(formatter, "Brush"),
ToolType::Heal => write!(formatter, "Heal"),
ToolType::Clone => write!(formatter, "Clone"),
ToolType::Patch => write!(formatter, "Patch"),
ToolType::BlurSharpen => write!(formatter, "BlurSharpen"),
ToolType::Relight => write!(formatter, "Relight"),
ToolType::Path => write!(formatter, "Path"),
ToolType::Pen => write!(formatter, "Pen"),
ToolType::Freehand => write!(formatter, "Freehand"),
ToolType::Spline => write!(formatter, "Spline"),
ToolType::Line => write!(formatter, "Line"),
ToolType::Rectangle => write!(formatter, "Rectangle"),
ToolType::Ellipse => write!(formatter, "Ellipse"),
ToolType::Shape => write!(formatter, "Shape"),
}
}
}
impl ToolType {