mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-23 19:08:11 +08:00
Implement artboards and document version enforcement (#466)
* - graphite document artboard implementation - autosave document load hitch fix - Autosave will delete saved files when graphite document version changes * formating * - top left 0,0 - fixed hitch on first document - vue calls first render * Revert * Merge branch 'master' into artboards * Small bug fixes and code review tweaks Co-authored-by: Oliver Davies <oliver@psyfer.io> Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
committed by
Keavon Chambers
co-authored by
Oliver Davies
Keavon Chambers
parent
8fedfb603e
commit
effc8354d1
@@ -124,6 +124,7 @@
|
||||
</LayoutCol>
|
||||
<LayoutCol :class="'canvas-area'">
|
||||
<div class="canvas" ref="canvas">
|
||||
<svg class="artboards" v-html="artboardSvg" :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>
|
||||
@@ -233,13 +234,12 @@
|
||||
// Fallback values if JS hasn't set these to integers yet
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// Allows dev tools to select the artwork without being blocked by the SVG containers
|
||||
pointer-events: none;
|
||||
|
||||
&.artwork {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&.overlays {
|
||||
user-select: none;
|
||||
// Prevent inheritance from reaching the child elements
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -251,7 +251,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation, ToolName } from "@/dispatcher/js-messages";
|
||||
import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation, ToolName, UpdateArtboards } from "@/dispatcher/js-messages";
|
||||
|
||||
import LayoutCol from "@/components/layout/LayoutCol.vue";
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
@@ -338,6 +338,10 @@ export default defineComponent({
|
||||
this.overlaysSvg = updateOverlays.svg;
|
||||
});
|
||||
|
||||
this.editor.dispatcher.subscribeJsMessage(UpdateArtboards, (updateArtboards) => {
|
||||
this.artboardSvg = updateArtboards.svg;
|
||||
});
|
||||
|
||||
this.editor.dispatcher.subscribeJsMessage(UpdateScrollbars, (updateScrollbars) => {
|
||||
this.scrollbarPos = updateScrollbars.position;
|
||||
this.scrollbarSize = updateScrollbars.size;
|
||||
@@ -383,6 +387,7 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
artworkSvg: "",
|
||||
artboardSvg: "",
|
||||
overlaysSvg: "",
|
||||
canvasSvgWidth: "100%",
|
||||
canvasSvgHeight: "100%",
|
||||
|
||||
Reference in New Issue
Block a user