jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Plumb Responses from WASM to JS in the page

This commit is contained in:
Keavon Chambers 2021-04-10 02:48:33 -07:00
parent 934286b1bd
commit 958d351505
8 changed files with 104 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/web/.eslintrc.js
View File

@ -19,6 +19,9 @@ module.exports = {
"linebreak-style": ["error", "unix"], "linebreak-style": ["error", "unix"],
indent: ["error", "tab"], indent: ["error", "tab"],
quotes: ["error", "double"], 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",
}],
}, },
}; };

153
client/web/src/components/panels/Document.vue
View File

@ -6,53 +6,27 @@
<ItemDivider /> <ItemDivider />
<IconButton :size="24" title="Horizontal Align Left"> <IconButton :size="24" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
<AlignHorizontalLeft /> <IconButton :size="24" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
</IconButton> <IconButton :size="24" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
<IconButton :size="24" title="Horizontal Align Center"> <IconButton :size="24" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
<AlignHorizontalCenter /> <IconButton :size="24" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
</IconButton> <IconButton :size="24" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
<IconButton :size="24" gapAfter title="Horizontal Align Right">
<AlignHorizontalRight />
</IconButton>
<IconButton :size="24" title="Vertical Align Top">
<AlignVerticalTop />
</IconButton>
<IconButton :size="24" title="Vertical Align Center">
<AlignVerticalCenter />
</IconButton>
<IconButton :size="24" title="Vertical Align Bottom">
<AlignVerticalBottom />
</IconButton>
<DropdownButton /> <DropdownButton />
<ItemDivider /> <ItemDivider />
<IconButton :size="24" title="Flip Horizontal"> <IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
<FlipHorizontal /> <IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
</IconButton>
<IconButton :size="24" title="Flip Vertical">
<FlipVertical />
</IconButton>
<DropdownButton /> <DropdownButton />
<ItemDivider /> <ItemDivider />
<IconButton :size="24" title="Boolean Union"> <IconButton :size="24" title="Boolean Union"><BooleanUnion /></IconButton>
<BooleanUnion /> <IconButton :size="24" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
</IconButton> <IconButton :size="24" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
<IconButton :size="24" title="Boolean Subtract Front"> <IconButton :size="24" title="Boolean Intersect"><BooleanIntersect /></IconButton>
<BooleanSubtractFront /> <IconButton :size="24" title="Boolean Difference"><BooleanDifference /></IconButton>
</IconButton>
<IconButton :size="24" title="Boolean Subtract Back">
<BooleanSubtractBack />
</IconButton>
<IconButton :size="24" title="Boolean Intersect">
<BooleanIntersect />
</IconButton>
<IconButton :size="24" title="Boolean Difference">
<BooleanDifference />
</IconButton>
<DropdownButton /> <DropdownButton />
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
@ -61,72 +35,36 @@
<LayoutRow :class="'shelf-and-viewport'"> <LayoutRow :class="'shelf-and-viewport'">
<LayoutCol :class="'shelf'"> <LayoutCol :class="'shelf'">
<div class="tools"> <div class="tools">
<ShelfItem active title="Select Tool (V)"> <ShelfItem active title="Select Tool (V)"><SelectTool /></ShelfItem>
<SelectTool /> <ShelfItem title="Crop Tool"><CropTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Navigate Tool"><NavigateTool /></ShelfItem>
<ShelfItem title="Crop Tool"> <ShelfItem title="Sample Tool"><SampleTool /></ShelfItem>
<CropTool />
</ShelfItem>
<ShelfItem title="Navigate Tool">
<NavigateTool />
</ShelfItem>
<ShelfItem title="Sample Tool">
<SampleTool />
</ShelfItem>
<ItemDivider horizontal /> <ItemDivider horizontal />
<ShelfItem title="Text Tool">
<TextTool /> <ShelfItem title="Text Tool"><TextTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Fill Tool"><FillTool /></ShelfItem>
<ShelfItem title="Fill Tool"> <ShelfItem title="Gradient Tool"><GradientTool /></ShelfItem>
<FillTool />
</ShelfItem>
<ShelfItem title="Gradient Tool">
<GradientTool />
</ShelfItem>
<ItemDivider horizontal /> <ItemDivider horizontal />
<ShelfItem title="Brush Tool">
<BrushTool /> <ShelfItem title="Brush Tool"><BrushTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Heal Tool"><HealTool /></ShelfItem>
<ShelfItem title="Heal Tool"> <ShelfItem title="Clone Tool"><CloneTool /></ShelfItem>
<HealTool /> <ShelfItem title="Patch Tool"><PatchTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Blur/Sharpen Tool"><BlurSharpenTool /></ShelfItem>
<ShelfItem title="Clone Tool"> <ShelfItem title="Relight Tool"><RelightTool /></ShelfItem>
<CloneTool />
</ShelfItem>
<ShelfItem title="Patch Tool">
<PatchTool />
</ShelfItem>
<ShelfItem title="Blur/Sharpen Tool">
<BlurSharpenTool />
</ShelfItem>
<ShelfItem title="Relight Tool">
<RelightTool />
</ShelfItem>
<ItemDivider horizontal /> <ItemDivider horizontal />
<ShelfItem title="Path Tool">
<PathTool /> <ShelfItem title="Path Tool"><PathTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Pen Tool"><PenTool /></ShelfItem>
<ShelfItem title="Pen Tool"> <ShelfItem title="Freehand Tool"><FreehandTool /></ShelfItem>
<PenTool /> <ShelfItem title="Spline Tool"><SplineTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Line Tool"><LineTool /></ShelfItem>
<ShelfItem title="Freehand Tool"> <ShelfItem title="Rectangle Tool (M)"><RectangleTool /></ShelfItem>
<FreehandTool /> <ShelfItem title="Ellipse Tool (E)"><EllipseTool /></ShelfItem>
</ShelfItem> <ShelfItem title="Shape Tool"><ShapeTool /></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>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="working-colors"> <div class="working-colors">
@ -157,7 +95,7 @@
@mouseup="canvasMouseUp" @mouseup="canvasMouseUp"
@mousemove="canvasMouseMove" @mousemove="canvasMouseMove"
> >
<svg></svg> <svg v-html="viewportSvg"></svg>
</div> </div>
</LayoutCol> </LayoutCol>
</LayoutRow> </LayoutRow>
@ -243,6 +181,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { registerResponseHandler, ResponseType } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue"; import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue"; import LayoutCol from "../layout/LayoutCol.vue";
import ShelfItem from "../widgets/ShelfItem.vue"; import ShelfItem from "../widgets/ShelfItem.vue";
@ -356,8 +295,16 @@ export default defineComponent({
}, },
}, },
mounted() { mounted() {
registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {
this.viewportSvg = responseData;
});
window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e)); window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e)); window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
}, },
data() {
return {
viewportSvg: "",
};
},
}); });
</script> </script>

2
client/web/src/components/widgets/ShelfItem.vue
View File

@ -14,7 +14,7 @@
} }
&.active { &.active {
background: #428bbb; background: #3194d6;
} }
svg { svg {

3
client/web/src/main.ts
View File

@ -1,4 +1,7 @@
import { createApp } from "vue"; import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import { attachResponseHandlerToPage } from "./response-handler";
attachResponseHandlerToPage();
createApp(App).mount("#app"); createApp(App).mount("#app");

30
client/web/src/response-handler.ts Normal file
View File

@ -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.`);
}
}

3
client/web/src/wasm-callback-processor.js
View File

@ -1,3 +0,0 @@
export function updateCanvas(svg) {
document.querySelector(".document .canvas svg").innerHTML = svg;
}

7
client/web/wasm/src/lib.rs
View File

@ -21,14 +21,15 @@ pub fn init() {
} }
fn handle_response(response: Response) { fn handle_response(response: Response) {
let response_type = response.to_string();
match response { 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" { extern "C" {
fn updateCanvas(svg: String); fn handleResponse(responseType: String, responseData: String);
} }
#[wasm_bindgen] #[wasm_bindgen]

13
core/editor/src/dispatcher/events.rs
View File

@ -1,7 +1,10 @@
use crate::tools::ToolType; use crate::tools::ToolType;
use crate::Color; use crate::Color;
use bitflags::bitflags; use bitflags::bitflags;
use std::ops::{Deref, DerefMut}; use std::{
fmt,
ops::{Deref, DerefMut},
};
#[derive(Debug, Clone)] #[derive(Debug, Clone)]
#[repr(C)] #[repr(C)]
@ -25,6 +28,14 @@ pub enum Response {
UpdateCanvas { document: String }, 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)] #[derive(Debug, Clone, Default)]
pub struct Trace(Vec<TracePoint>); pub struct Trace(Vec<TracePoint>);