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

Artboard nodes (#1328)

Browse Source 
* Create artboard nodes

* Update node when resizing artboard

* Render clipped artboards

* More stable feature

* Do not render old artboards

* Fix some issues with transforms

* Fix crash when drawing rectangle

* Format

* Allow renaming document from Properties panel

* Adjust artboard label styling

* Fix document graph refresh so artboards show up

* Make "Clear Artboards" coming soon

* Fix displaying an infinite canvas

* Show document name in node graph options bar

* info!() to debug!()

* Fix Properties panel not being cleared when all docs closed

* Remove dead code

* Remove debug logs added in this branch

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2023-07-27 07:35:17 +01:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent ad0dc3276e
commit 08f9be6aaf
26 changed files with 636 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.svelte
+29 -1
View File
@@ -18,6 +18,8 @@
UpdateDocumentScrollbars,
UpdateEyedropperSamplingState,
UpdateMouseCursor,
UpdateDocumentNodeRender,
UpdateDocumentTransform,
} from "@graphite/wasm-communication/messages";
import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
@@ -58,8 +60,10 @@
// Rendered SVG viewport data
let artworkSvg = "";
let nodeRenderSvg = "";
let artboardSvg = "";
let overlaysSvg = "";
let artworkTransform = "";
// Rasterized SVG viewport data, or none if it's not up-to-date
let rasterizedCanvas: HTMLCanvasElement | undefined = undefined;
@@ -140,12 +144,21 @@
export function updateDocumentOverlays(svg: string) {
overlaysSvg = svg;
}
export function updateDocumentArtboards(svg: string) {
artboardSvg = svg;
rasterizedCanvas = undefined;
}
export function updateDocumentNodeRender(svg: string) {
nodeRenderSvg = svg;
rasterizedCanvas = undefined;
}
export function updateDocumentTransform(transform: string) {
artworkTransform = transform;
}
export async function updateEyedropperSamplingState(mousePosition: XY | undefined, colorPrimary: string, colorSecondary: string): Promise<[number, number, number] | undefined> {
if (mousePosition === undefined) {
cursorEyedropper = false;
@@ -335,6 +348,16 @@
updateDocumentArtboards(data.svg);
});
editor.subscriptions.subscribeJsMessage(UpdateDocumentNodeRender, async (data) => {
await tick();
updateDocumentNodeRender(data.svg);
});
editor.subscriptions.subscribeJsMessage(UpdateDocumentTransform, async (data) => {
await tick();
updateDocumentTransform(data.transform);
});
editor.subscriptions.subscribeJsMessage(UpdateEyedropperSamplingState, async (data) => {
await tick();
@@ -445,6 +468,11 @@
<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
{@html artboardSvg}
</svg>
<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
<g id="transform-group" transform={artworkTransform}>
{@html nodeRenderSvg}
</g>
</svg>
<svg class="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
{@html artworkSvg}
</svg>
frontend/src/wasm-communication/messages.ts
+10
View File
@@ -445,6 +445,14 @@ export class UpdateDocumentArtboards extends JsMessage {
readonly svg!: string;
}
export class UpdateDocumentNodeRender extends JsMessage {
readonly svg!: string;
}
export class UpdateDocumentTransform extends JsMessage {
readonly transform!: string;
}
export class UpdateDocumentScrollbars extends JsMessage {
@TupleToVec2
readonly position!: XY;
@@ -1351,6 +1359,7 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateActiveDocument,
UpdateDialogDetails,
UpdateDocumentArtboards,
UpdateDocumentNodeRender,
UpdateDocumentArtwork,
UpdateDocumentBarLayout,
UpdateDocumentLayerDetails,
@@ -1359,6 +1368,7 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateDocumentOverlays,
UpdateDocumentRulers,
UpdateDocumentScrollbars,
UpdateDocumentTransform,
UpdateEyedropperSamplingState,
UpdateImageData,
UpdateInputHints,