From 4c546b2819c52800d90f4cc4e07d4d9fd9fed97b Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Sat, 10 Apr 2021 02:48:33 -0700 Subject: [PATCH] Plumb Responses from WASM to JS in the page --- client/web/.eslintrc.js | 5 +- client/web/src/components/panels/Document.vue | 153 ++++++------------ .../web/src/components/widgets/ShelfItem.vue | 2 +- client/web/src/main.ts | 3 + client/web/src/response-handler.ts | 30 ++++ client/web/src/wasm-callback-processor.js | 3 - client/web/wasm/src/lib.rs | 7 +- core/editor/src/dispatcher/events.rs | 13 +- 8 files changed, 104 insertions(+), 112 deletions(-) create mode 100644 client/web/src/response-handler.ts delete mode 100644 client/web/src/wasm-callback-processor.js diff --git a/client/web/.eslintrc.js b/client/web/.eslintrc.js index e88b2c773..3910dc0b1 100644 --- a/client/web/.eslintrc.js +++ b/client/web/.eslintrc.js @@ -19,6 +19,9 @@ module.exports = { "linebreak-style": ["error", "unix"], indent: ["error", "tab"], quotes: ["error", "double"], - camelcase: ["error", { ignoreImports: true, ignoreDestructuring: true }], + camelcase: ["warn", { ignoreImports: true, ignoreDestructuring: true }], + "import/extensions": ["error", "ignorePackages", { + js: "never", jsx: "never", ts: "never", tsx: "never", + }], }, }; diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue index fcbfdbd5d..3ef3b9105 100644 --- a/client/web/src/components/panels/Document.vue +++ b/client/web/src/components/panels/Document.vue @@ -6,53 +6,27 @@ - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - + + - - - - - - - - - - - - - - - + + + + +
@@ -61,72 +35,36 @@
- - - - - - - - - - - - + + + + + - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + +
@@ -157,7 +95,7 @@ @mouseup="canvasMouseUp" @mousemove="canvasMouseMove" > - +
@@ -243,6 +181,7 @@ diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/ShelfItem.vue index 3c7fcb0c2..43cb5cfbb 100644 --- a/client/web/src/components/widgets/ShelfItem.vue +++ b/client/web/src/components/widgets/ShelfItem.vue @@ -14,7 +14,7 @@ } &.active { - background: #428bbb; + background: #3194d6; } svg { diff --git a/client/web/src/main.ts b/client/web/src/main.ts index b670de8b8..60ab2236b 100644 --- a/client/web/src/main.ts +++ b/client/web/src/main.ts @@ -1,4 +1,7 @@ import { createApp } from "vue"; import App from "./App.vue"; +import { attachResponseHandlerToPage } from "./response-handler"; + +attachResponseHandlerToPage(); createApp(App).mount("#app"); diff --git a/client/web/src/response-handler.ts b/client/web/src/response-handler.ts new file mode 100644 index 000000000..f9aed6019 --- /dev/null +++ b/client/web/src/response-handler.ts @@ -0,0 +1,30 @@ +type ResponseCallback = (responseData: string) => void; +type ResponseMap = { + [response: string]: ResponseCallback | undefined; +}; +declare global { + interface Window { responseMap: ResponseMap } +} + +export enum ResponseType { + UpdateCanvas = "UpdateCanvas", +} + +export function attachResponseHandlerToPage() { + window.responseMap = {}; +} + +export function registerResponseHandler(responseType: ResponseType, callback: ResponseCallback) { + window.responseMap[responseType] = callback; +} + +export function handleResponse(responseType: ResponseType, responseData: string) { + const callback = window.responseMap[responseType]; + + if (callback) { + callback(responseData); + } + else { + console.error(`Received a Response of type "${responseType}" but no handler was registered for it from the client.`); + } +} diff --git a/client/web/src/wasm-callback-processor.js b/client/web/src/wasm-callback-processor.js deleted file mode 100644 index ad0b61655..000000000 --- a/client/web/src/wasm-callback-processor.js +++ /dev/null @@ -1,3 +0,0 @@ -export function updateCanvas(svg) { - document.querySelector(".document .canvas svg").innerHTML = svg; -} diff --git a/client/web/wasm/src/lib.rs b/client/web/wasm/src/lib.rs index 5c81cb0ab..71d4c0342 100644 --- a/client/web/wasm/src/lib.rs +++ b/client/web/wasm/src/lib.rs @@ -21,14 +21,15 @@ pub fn init() { } fn handle_response(response: Response) { + let response_type = response.to_string(); match response { - Response::UpdateCanvas { document } => updateCanvas(document), + Response::UpdateCanvas { document } => handleResponse(response_type, document), } } -#[wasm_bindgen(module = "/../src/wasm-callback-processor.js")] +#[wasm_bindgen(module = "/../src/response-handler.ts")] extern "C" { - fn updateCanvas(svg: String); + fn handleResponse(responseType: String, responseData: String); } #[wasm_bindgen] diff --git a/core/editor/src/dispatcher/events.rs b/core/editor/src/dispatcher/events.rs index 11faaff6e..83fff32d8 100644 --- a/core/editor/src/dispatcher/events.rs +++ b/core/editor/src/dispatcher/events.rs @@ -1,7 +1,10 @@ use crate::tools::ToolType; use crate::Color; use bitflags::bitflags; -use std::ops::{Deref, DerefMut}; +use std::{ + fmt, + ops::{Deref, DerefMut}, +}; #[derive(Debug, Clone)] #[repr(C)] @@ -25,6 +28,14 @@ pub enum Response { UpdateCanvas { document: String }, } +impl fmt::Display for Response { + fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result { + match self { + Response::UpdateCanvas { document: _ } => write!(formatter, "UpdateCanvas"), + } + } +} + #[derive(Debug, Clone, Default)] pub struct Trace(Vec);