fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 06:08:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add plumbing for event system (#52)

Browse Source 
* Add plumbing for event system

* Apply review suggestions

* Add swap and reset color functions
This commit is contained in:
T0mstone
2021-03-28 23:39:33 +02:00
committed by GitHub
parent ea1f9f30f0
commit c437f1bd22
9 changed files with 352 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/package-lock.json
Generated
+89 -89
View File
@@ -605,6 +605,95 @@
"tslint": "^5.20.1",
"webpack": "^4.0.0",
"yorkie": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"@vue/cli-plugin-vuex": {
@@ -5386,95 +5475,6 @@
}
}
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"form-data": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
client/web/src/components/panels/ViewportPanel.vue
+22 -7
View File
@@ -12,7 +12,12 @@
</LayoutRow>
<LayoutRow :class="'tools-and-viewport'">
<LayoutCol :class="'tools'"></LayoutCol>
<LayoutCol :class="'viewport-container'" @click="canvasClick"></LayoutCol>
<LayoutCol
:class="'canvas'"
@mousedown="canvasMouseDown"
@mouseup="canvasMouseUp"
@mousemove="canvasMouseMove"
></LayoutCol>
</LayoutRow>
</LayoutCol>
</template>
@@ -57,7 +62,7 @@
flex: 0 0 32px;
}
.viewport-container {
.canvas {
background: #111;
flex: 1 1 100%;
}
@@ -78,11 +83,21 @@ export default defineComponent({
LayoutCol,
},
methods: {
async canvasClick(e: MouseEvent) {
console.log(e);
const { on_mouse_click } = await wasm;
on_mouse_click(e.offsetX, e.offsetY);
}
async canvasMouseDown(e: MouseEvent) {
console.log(e);
const { on_mouse_down } = await wasm;
on_mouse_down(e.offsetX, e.offsetY, e.buttons);
},
async canvasMouseUp(e: MouseEvent) {
console.log(e);
const { on_mouse_up } = await wasm;
on_mouse_up(e.offsetX, e.offsetY, e.buttons);
},
async canvasMouseMove(e: MouseEvent) {
console.log(e);
const { on_mouse_move } = await wasm;
on_mouse_move(e.offsetX, e.offsetY);
},
},
});
</script>
client/web/wasm/src/viewport.rs
+47 -30
View File
@@ -8,51 +8,68 @@ use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn select_tool(tool: String) -> Result<(), JsValue> {
EDITOR_STATE.with(|editor| match translate_tool(&tool) {
Some(tool) => {
editor.borrow_mut().tools.active_tool = tool;
Ok(())
}
Some(tool) => editor.borrow_mut().handle_event(events::Event::SelectTool(tool)).map_err(|err| Error::new(&err.to_string()).into()),
None => Err(Error::new(&format!("Couldn't select {} because it was not recognized as a valid tool", tool)).into()),
})
}
/// Mouse movement with the bounds of the canvas
#[wasm_bindgen]
pub fn on_mouse_move(x: u32, y: u32) {
EDITOR_STATE.with(|editor| {
let mut editor = editor.borrow_mut();
if editor.tools.mouse_is_clicked {
editor.tools.trace.append_point(x, y)
}
})
pub fn on_mouse_move(x: u32, y: u32) -> Result<(), JsValue> {
let ev = events::Event::MouseMovement(events::CanvasPosition { x, y });
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_event(ev)).map_err(|err| Error::new(&err.to_string()).into())
}
/// Mouse click within the bounds of the canvas
#[wasm_bindgen]
pub fn on_mouse_click(x: u32, y: u32) -> Result<(), JsValue> {
let ev = events::Event::Click(events::MouseState::from_pos(x, y));
EDITOR_STATE
.with(|editor| {
let mut editor = editor.borrow_mut();
editor.tools.mouse_is_clicked = true;
editor.tools.trace.clear();
editor.handle_event(ev)
})
.map_err(|err| Error::new(&err.to_string()).into())
pub fn on_mouse_down(x: u32, y: u32, mouse_keys: u8) -> Result<(), JsValue> {
let mouse_keys = events::MouseKeys::from_bits(mouse_keys).expect("invalid modifier keys");
let ev = events::Event::MouseDown(events::MouseState {
position: events::CanvasPosition { x, y },
mouse_keys,
});
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_event(ev)).map_err(|err| Error::new(&err.to_string()).into())
}
/// Mouse released
#[wasm_bindgen]
pub fn on_mouse_release() {
EDITOR_STATE.with(|editor| editor.borrow_mut().tools.mouse_is_clicked = false)
pub fn on_mouse_up(x: u32, y: u32, mouse_keys: u8) -> Result<(), JsValue> {
let mouse_keys = events::MouseKeys::from_bits(mouse_keys).expect("invalid modifier keys");
let ev = events::Event::MouseDown(events::MouseState {
position: events::CanvasPosition { x, y },
mouse_keys,
});
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_event(ev)).map_err(|err| Error::new(&err.to_string()).into())
}
/// Update working colors
/// Update primary color
#[wasm_bindgen]
pub fn update_colors(primary_color: Color, secondary_color: Color) {
EDITOR_STATE.with(|editor| {
let mut editor = editor.borrow_mut();
editor.tools.primary_color = primary_color.inner();
editor.tools.secondary_color = secondary_color.inner();
})
pub fn update_primary_color(primary_color: Color) -> Result<(), JsValue> {
EDITOR_STATE
.with(|editor| editor.borrow_mut().handle_event(events::Event::SelectPrimaryColor(primary_color.inner())))
.map_err(|err: editor_core::EditorError| Error::new(&err.to_string()).into())
}
/// Update secondary color
#[wasm_bindgen]
pub fn update_secondary_color(secondary_color: Color) -> Result<(), JsValue> {
EDITOR_STATE
.with(|editor| editor.borrow_mut().handle_event(events::Event::SelectSecondaryColor(secondary_color.inner())))
.map_err(|err: editor_core::EditorError| Error::new(&err.to_string()).into())
}
/// Swap primary and secondary color
#[wasm_bindgen]
pub fn swap_colors() -> Result<(), JsValue> {
EDITOR_STATE
.with(|editor| editor.borrow_mut().handle_event(events::Event::SwapColors))
.map_err(|err: editor_core::EditorError| Error::new(&err.to_string()).into())
}
/// Reset primary and secondary colors to their defaults
#[wasm_bindgen]
pub fn reset_colors() -> Result<(), JsValue> {
EDITOR_STATE
.with(|editor| editor.borrow_mut().handle_event(events::Event::ResetColors))
.map_err(|err: editor_core::EditorError| Error::new(&err.to_string()).into())
}