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

New overlay system that reimplements how overlays are drawn (#418)

Browse Source 
* New overlay system that reimplements how overlays are drawn

* Fix overlay message declaration

* Fix small mistake

* WIP (broken) changes to plumb the overlay document

* Fix confusion over messaging system architecture

* Removed log

* Overlay system working

* (broken) WIP overlay association

* Finish the overlay system (except test failure)

* Change back IDs in test

* Fixed test, but stilled fails due to revealed real problem with layer reordering selection

* Disable broken test that has a bug in issue #444

Co-authored-by: Dennis <dennis@kobert.dev>
Co-authored-by: otdavies <oliver@psyfer.io>
This commit is contained in:
Keavon Chambers
2021-12-30 09:48:39 -08:00
co-authored by Dennis otdavies
parent 1a70667f63
commit eb96eafe60
22 changed files with 416 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+19 -6
View File
@@ -119,7 +119,8 @@
</LayoutCol>
<LayoutCol :class="'canvas-area'">
<div class="canvas" ref="canvas">
<svg v-html="viewportSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
<svg class="artwork" v-html="artworkSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
</div>
</LayoutCol>
<LayoutCol :class="'bar-area'">
@@ -223,11 +224,18 @@
overflow: hidden;
svg {
background: #ffffff;
position: absolute;
// Fallback values if JS hasn't set these to integers yet
width: 100%;
height: 100%;
&.artwork {
background: #ffffff;
}
&.overlays {
user-select: none;
}
}
}
}
@@ -238,7 +246,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { UpdateCanvas, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages";
import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages";
import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -319,8 +327,12 @@ export default defineComponent({
},
},
mounted() {
this.editor.dispatcher.subscribeJsMessage(UpdateCanvas, (updateCanvas) => {
this.viewportSvg = updateCanvas.document;
this.editor.dispatcher.subscribeJsMessage(UpdateArtwork, (UpdateArtwork) => {
this.artworkSvg = UpdateArtwork.svg;
});
this.editor.dispatcher.subscribeJsMessage(UpdateOverlays, (updateOverlays) => {
this.overlaysSvg = updateOverlays.svg;
});
this.editor.dispatcher.subscribeJsMessage(UpdateScrollbars, (updateScrollbars) => {
@@ -367,7 +379,8 @@ export default defineComponent({
];
return {
viewportSvg: "",
artworkSvg: "",
overlaysSvg: "",
canvasSvgWidth: "100%",
canvasSvgHeight: "100%",
activeTool: "Select",
frontend/src/dispatcher/js-messages.ts
+8 -3
View File
@@ -126,8 +126,12 @@ export class DisplayConfirmationToCloseAllDocuments extends JsMessage {}
export class DisplayAboutGraphiteDialog extends JsMessage {}
export class UpdateCanvas extends JsMessage {
readonly document!: string;
export class UpdateArtwork extends JsMessage {
readonly svg!: string;
}
export class UpdateOverlays extends JsMessage {
readonly svg!: string;
}
const TupleToVec2 = Transform(({ value }) => ({ x: value[0], y: value[1] }));
@@ -328,7 +332,8 @@ type JSMessageFactory = (data: any, wasm: WasmInstance, instance: RustEditorInst
type MessageMaker = typeof JsMessage | JSMessageFactory;
export const messageConstructors: Record<string, MessageMaker> = {
UpdateCanvas,
UpdateArtwork,
UpdateOverlays,
UpdateScrollbars,
UpdateRulers,
ExportDocument,