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

Plumb Responses from WASM to JS in the page

Browse source
This commit is contained in:
Keavon Chambers 2021-04-10 02:48:33 -07:00
parent 22fe11b950
commit 4c546b2819
8 changed files with 104 additions and 112 deletions
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"],
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",
}],
},
};

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

@ -6,53 +6,27 @@
<ItemDivider />
<IconButton :size="24" title="Horizontal Align Left">
<AlignHorizontalLeft />
</IconButton>
<IconButton :size="24" title="Horizontal Align Center">
<AlignHorizontalCenter />
</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>
<IconButton :size="24" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
<IconButton :size="24" title="Horizontal Align Center"><AlignHorizontalCenter /></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 />
<ItemDivider />
<IconButton :size="24" title="Flip Horizontal">
<FlipHorizontal />
</IconButton>
<IconButton :size="24" title="Flip Vertical">
<FlipVertical />
</IconButton>
<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
<DropdownButton />
<ItemDivider />
<IconButton :size="24" title="Boolean Union">
<BooleanUnion />
</IconButton>
<IconButton :size="24" title="Boolean Subtract Front">
<BooleanSubtractFront />
</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>
<IconButton :size="24" title="Boolean Union"><BooleanUnion /></IconButton>
<IconButton :size="24" title="Boolean Subtract Front"><BooleanSubtractFront /></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 />
</div>
<div class="spacer"></div>
@ -61,72 +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 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>
<ItemDivider horizontal />
<ShelfItem title="Text Tool">
<TextTool />
</ShelfItem>
<ShelfItem title="Fill Tool">
<FillTool />
</ShelfItem>
<ShelfItem title="Gradient Tool">
<GradientTool />
</ShelfItem>
<ShelfItem title="Text Tool"><TextTool /></ShelfItem>
<ShelfItem title="Fill Tool"><FillTool /></ShelfItem>
<ShelfItem title="Gradient Tool"><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"><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>
<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"><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>
</div>
<div class="spacer"></div>
<div class="working-colors">
@ -157,7 +95,7 @@
@mouseup="canvasMouseUp"
@mousemove="canvasMouseMove"
>
<svg></svg>
<svg v-html="viewportSvg"></svg>
</div>
</LayoutCol>
</LayoutRow>
@ -243,6 +181,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { registerResponseHandler, ResponseType } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import ShelfItem from "../widgets/ShelfItem.vue";
@ -356,8 +295,16 @@ export default defineComponent({
},
},
mounted() {
registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {
this.viewportSvg = responseData;
});
window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
},
data() {
return {
viewportSvg: "",
};
},
});
</script>

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

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

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

@ -1,4 +1,7 @@
import { createApp } from "vue";
import App from "./App.vue";
import { attachResponseHandlerToPage } from "./response-handler";
attachResponseHandlerToPage();
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) {
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]

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

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