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

Migrate build system from Webpack to Parcel (#1102)

Browse Source 
* Migrate webpack to parcel

* Always colour shell output

* Fix typos

* Fix updateImage function having undefined editorInstance

* Readd webpack for deployment builds (licence checker)

* Only use webpack for license generation

* Re add typscript support

* Fix cloudlare deploy

* Bump wasm-pack version

* Update ci script

* Print versions in ci script

* Use optional-dependencies for wasm-pack

* Execute wget after rust install

* Finding wasm-opt version

* Print wasm-opt version

* Revert test?

* Try to revert

* Deploy cloudflare via github actions

* Fix indentation in ci script

* Change project to graphite-dev

* Trigger ci

* Parcel ci (#1152)

* CI Test

* Add write permissions for pr

* Manually add cloudflare ci comment to prs

* Unskip cargo about

* Make compile on new versions of npm

* Add deployment script to rebuild editor.graphite.rs on tag creation

* Remove deploy script

* Comment out unused Svelte props causing warnings

* Many small fixes, including fixing @ imports

---------

Co-authored-by: hypercube <0hypercube@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Dennis Kobert
2023-04-25 00:43:27 +02:00
committed by GitHub
parent b0a3632868
commit 1180b19284
29 changed files with 4532 additions and 7616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/widgets/WidgetRow.svelte
View File

@@ -185,7 +185,7 @@
flex-direction: column;
}
.widget-row {
.widget-row.widget-row {
flex: 0 0 auto;
display: flex;
min-height: 32px;

2
frontend/src/components/widgets/buttons/TextButton.svelte
View File

@@ -76,7 +76,7 @@
}
}
& + .text-button {
&.text-button + .text-button {
margin-left: 8px;
}

4
frontend/src/components/widgets/inputs/ColorInput.svelte
View File

@@ -13,8 +13,8 @@
let open = false;
export let value: Color;
export let noTransparency = false; // TODO: Rename to allowTransparency, also implement allowNone
export let disabled = false; // TODO: Design and implement
// export let noTransparency = false; // TODO: Rename to allowTransparency, also implement allowNone
// export let disabled = false; // TODO: Design and implement
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;

2
frontend/src/components/window/title-bar/WindowButtonsMac.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
export let maximized = false;
// export let maximized = false;
</script>
<LayoutRow class="window-buttons-mac">

1
frontend/src/main-webpack-licenses.ts Normal file
View File

@@ -0,0 +1 @@
// This is a dummy entry point for webpack

248
frontend/src/utility-functions/icons.ts
View File

@@ -1,47 +1,47 @@
/* eslint-disable import/first */
// Graphics
import GraphiteLogotypeSolid from "@graphite/../assets/graphics/graphite-logotype-solid.svg";
import GraphiteLogotypeSolid from "@graphite-frontend/assets/graphics/graphite-logotype-solid.svg";
const GRAPHICS = {
GraphiteLogotypeSolid: { svg: GraphiteLogotypeSolid, size: undefined },
} as const;
// 12px Solid
import Add from "@graphite/../assets/icon-12px-solid/add.svg";
import Checkmark from "@graphite/../assets/icon-12px-solid/checkmark.svg";
import CloseX from "@graphite/../assets/icon-12px-solid/close-x.svg";
import DropdownArrow from "@graphite/../assets/icon-12px-solid/dropdown-arrow.svg";
import Edit from "@graphite/../assets/icon-12px-solid/edit.svg";
import Empty12px from "@graphite/../assets/icon-12px-solid/empty-12px.svg";
import FullscreenEnter from "@graphite/../assets/icon-12px-solid/fullscreen-enter.svg";
import FullscreenExit from "@graphite/../assets/icon-12px-solid/fullscreen-exit.svg";
import Grid from "@graphite/../assets/icon-12px-solid/grid.svg";
import Info from "@graphite/../assets/icon-12px-solid/info.svg";
import KeyboardArrowDown from "@graphite/../assets/icon-12px-solid/keyboard-arrow-down.svg";
import KeyboardArrowLeft from "@graphite/../assets/icon-12px-solid/keyboard-arrow-left.svg";
import KeyboardArrowRight from "@graphite/../assets/icon-12px-solid/keyboard-arrow-right.svg";
import KeyboardArrowUp from "@graphite/../assets/icon-12px-solid/keyboard-arrow-up.svg";
import KeyboardBackspace from "@graphite/../assets/icon-12px-solid/keyboard-backspace.svg";
import KeyboardCommand from "@graphite/../assets/icon-12px-solid/keyboard-command.svg";
import KeyboardControl from "@graphite/../assets/icon-12px-solid/keyboard-control.svg";
import KeyboardEnter from "@graphite/../assets/icon-12px-solid/keyboard-enter.svg";
import KeyboardOption from "@graphite/../assets/icon-12px-solid/keyboard-option.svg";
import KeyboardShift from "@graphite/../assets/icon-12px-solid/keyboard-shift.svg";
import KeyboardSpace from "@graphite/../assets/icon-12px-solid/keyboard-space.svg";
import KeyboardTab from "@graphite/../assets/icon-12px-solid/keyboard-tab.svg";
import Link from "@graphite/../assets/icon-12px-solid/link.svg";
import Overlays from "@graphite/../assets/icon-12px-solid/overlays.svg";
import Remove from "@graphite/../assets/icon-12px-solid/remove.svg";
import ResetColors from "@graphite/../assets/icon-12px-solid/reset-colors.svg";
import Snapping from "@graphite/../assets/icon-12px-solid/snapping.svg";
import Swap from "@graphite/../assets/icon-12px-solid/swap.svg";
import VerticalEllipsis from "@graphite/../assets/icon-12px-solid/vertical-ellipsis.svg";
import Warning from "@graphite/../assets/icon-12px-solid/warning.svg";
import WindowButtonWinClose from "@graphite/../assets/icon-12px-solid/window-button-win-close.svg";
import WindowButtonWinMaximize from "@graphite/../assets/icon-12px-solid/window-button-win-maximize.svg";
import WindowButtonWinMinimize from "@graphite/../assets/icon-12px-solid/window-button-win-minimize.svg";
import WindowButtonWinRestoreDown from "@graphite/../assets/icon-12px-solid/window-button-win-restore-down.svg";
import Add from "@graphite-frontend/assets/icon-12px-solid/add.svg";
import Checkmark from "@graphite-frontend/assets/icon-12px-solid/checkmark.svg";
import CloseX from "@graphite-frontend/assets/icon-12px-solid/close-x.svg";
import DropdownArrow from "@graphite-frontend/assets/icon-12px-solid/dropdown-arrow.svg";
import Edit from "@graphite-frontend/assets/icon-12px-solid/edit.svg";
import Empty12px from "@graphite-frontend/assets/icon-12px-solid/empty-12px.svg";
import FullscreenEnter from "@graphite-frontend/assets/icon-12px-solid/fullscreen-enter.svg";
import FullscreenExit from "@graphite-frontend/assets/icon-12px-solid/fullscreen-exit.svg";
import Grid from "@graphite-frontend/assets/icon-12px-solid/grid.svg";
import Info from "@graphite-frontend/assets/icon-12px-solid/info.svg";
import KeyboardArrowDown from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-down.svg";
import KeyboardArrowLeft from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-left.svg";
import KeyboardArrowRight from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-right.svg";
import KeyboardArrowUp from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-up.svg";
import KeyboardBackspace from "@graphite-frontend/assets/icon-12px-solid/keyboard-backspace.svg";
import KeyboardCommand from "@graphite-frontend/assets/icon-12px-solid/keyboard-command.svg";
import KeyboardControl from "@graphite-frontend/assets/icon-12px-solid/keyboard-control.svg";
import KeyboardEnter from "@graphite-frontend/assets/icon-12px-solid/keyboard-enter.svg";
import KeyboardOption from "@graphite-frontend/assets/icon-12px-solid/keyboard-option.svg";
import KeyboardShift from "@graphite-frontend/assets/icon-12px-solid/keyboard-shift.svg";
import KeyboardSpace from "@graphite-frontend/assets/icon-12px-solid/keyboard-space.svg";
import KeyboardTab from "@graphite-frontend/assets/icon-12px-solid/keyboard-tab.svg";
import Link from "@graphite-frontend/assets/icon-12px-solid/link.svg";
import Overlays from "@graphite-frontend/assets/icon-12px-solid/overlays.svg";
import Remove from "@graphite-frontend/assets/icon-12px-solid/remove.svg";
import ResetColors from "@graphite-frontend/assets/icon-12px-solid/reset-colors.svg";
import Snapping from "@graphite-frontend/assets/icon-12px-solid/snapping.svg";
import Swap from "@graphite-frontend/assets/icon-12px-solid/swap.svg";
import VerticalEllipsis from "@graphite-frontend/assets/icon-12px-solid/vertical-ellipsis.svg";
import Warning from "@graphite-frontend/assets/icon-12px-solid/warning.svg";
import WindowButtonWinClose from "@graphite-frontend/assets/icon-12px-solid/window-button-win-close.svg";
import WindowButtonWinMaximize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-maximize.svg";
import WindowButtonWinMinimize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-minimize.svg";
import WindowButtonWinRestoreDown from "@graphite-frontend/assets/icon-12px-solid/window-button-win-restore-down.svg";
const SOLID_12PX = {
Add: { svg: Add, size: 12 },
@@ -81,61 +81,61 @@ const SOLID_12PX = {
} as const;
// 16px Solid
import AlignBottom from "@graphite/../assets/icon-16px-solid/align-bottom.svg";
import AlignHorizontalCenter from "@graphite/../assets/icon-16px-solid/align-horizontal-center.svg";
import AlignLeft from "@graphite/../assets/icon-16px-solid/align-left.svg";
import AlignRight from "@graphite/../assets/icon-16px-solid/align-right.svg";
import AlignTop from "@graphite/../assets/icon-16px-solid/align-top.svg";
import AlignVerticalCenter from "@graphite/../assets/icon-16px-solid/align-vertical-center.svg";
import BooleanDifference from "@graphite/../assets/icon-16px-solid/boolean-difference.svg";
import BooleanIntersect from "@graphite/../assets/icon-16px-solid/boolean-intersect.svg";
import BooleanSubtractBack from "@graphite/../assets/icon-16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@graphite/../assets/icon-16px-solid/boolean-subtract-front.svg";
import BooleanUnion from "@graphite/../assets/icon-16px-solid/boolean-union.svg";
import CheckboxChecked from "@graphite/../assets/icon-16px-solid/checkbox-checked.svg";
import CheckboxUnchecked from "@graphite/../assets/icon-16px-solid/checkbox-unchecked.svg";
import Copy from "@graphite/../assets/icon-16px-solid/copy.svg";
import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
import EyeHidden from "@graphite/../assets/icon-16px-solid/eye-hidden.svg";
import EyeVisible from "@graphite/../assets/icon-16px-solid/eye-visible.svg";
import File from "@graphite/../assets/icon-16px-solid/file.svg";
import FlipHorizontal from "@graphite/../assets/icon-16px-solid/flip-horizontal.svg";
import FlipVertical from "@graphite/../assets/icon-16px-solid/flip-vertical.svg";
import Folder from "@graphite/../assets/icon-16px-solid/folder.svg";
import GraphiteLogo from "@graphite/../assets/icon-16px-solid/graphite-logo.svg";
import Layer from "@graphite/../assets/icon-16px-solid/layer.svg";
import NodeArtboard from "@graphite/../assets/icon-16px-solid/node-artboard.svg";
import NodeBlur from "@graphite/../assets/icon-16px-solid/node-blur.svg";
import NodeBrushwork from "@graphite/../assets/icon-16px-solid/node-brushwork.svg";
import NodeColorCorrection from "@graphite/../assets/icon-16px-solid/node-color-correction.svg";
import NodeGradient from "@graphite/../assets/icon-16px-solid/node-gradient.svg";
import NodeImage from "@graphite/../assets/icon-16px-solid/node-image.svg";
import NodeImaginate from "@graphite/../assets/icon-16px-solid/node-imaginate.svg";
import NodeMagicWand from "@graphite/../assets/icon-16px-solid/node-magic-wand.svg";
import NodeMask from "@graphite/../assets/icon-16px-solid/node-mask.svg";
import NodeMotionBlur from "@graphite/../assets/icon-16px-solid/node-motion-blur.svg";
import NodeNodes from "@graphite/../assets/icon-16px-solid/node-nodes.svg";
import NodeOutput from "@graphite/../assets/icon-16px-solid/node-output.svg";
import NodeShape from "@graphite/../assets/icon-16px-solid/node-shape.svg";
import NodeText from "@graphite/../assets/icon-16px-solid/node-text.svg";
import NodeTransform from "@graphite/../assets/icon-16px-solid/node-transform.svg";
import Paste from "@graphite/../assets/icon-16px-solid/paste.svg";
import Random from "@graphite/../assets/icon-16px-solid/random.svg";
import Regenerate from "@graphite/../assets/icon-16px-solid/regenerate.svg";
import Reload from "@graphite/../assets/icon-16px-solid/reload.svg";
import Rescale from "@graphite/../assets/icon-16px-solid/rescale.svg";
import Reset from "@graphite/../assets/icon-16px-solid/reset.svg";
import Settings from "@graphite/../assets/icon-16px-solid/settings.svg";
import Trash from "@graphite/../assets/icon-16px-solid/trash.svg";
import ViewModeNormal from "@graphite/../assets/icon-16px-solid/view-mode-normal.svg";
import ViewModeOutline from "@graphite/../assets/icon-16px-solid/view-mode-outline.svg";
import ViewModePixels from "@graphite/../assets/icon-16px-solid/view-mode-pixels.svg";
import ViewportDesignMode from "@graphite/../assets/icon-16px-solid/viewport-design-mode.svg";
import ViewportGuideMode from "@graphite/../assets/icon-16px-solid/viewport-guide-mode.svg";
import ViewportSelectMode from "@graphite/../assets/icon-16px-solid/viewport-select-mode.svg";
import ZoomIn from "@graphite/../assets/icon-16px-solid/zoom-in.svg";
import ZoomOut from "@graphite/../assets/icon-16px-solid/zoom-out.svg";
import ZoomReset from "@graphite/../assets/icon-16px-solid/zoom-reset.svg";
import AlignBottom from "@graphite-frontend/assets/icon-16px-solid/align-bottom.svg";
import AlignHorizontalCenter from "@graphite-frontend/assets/icon-16px-solid/align-horizontal-center.svg";
import AlignLeft from "@graphite-frontend/assets/icon-16px-solid/align-left.svg";
import AlignRight from "@graphite-frontend/assets/icon-16px-solid/align-right.svg";
import AlignTop from "@graphite-frontend/assets/icon-16px-solid/align-top.svg";
import AlignVerticalCenter from "@graphite-frontend/assets/icon-16px-solid/align-vertical-center.svg";
import BooleanDifference from "@graphite-frontend/assets/icon-16px-solid/boolean-difference.svg";
import BooleanIntersect from "@graphite-frontend/assets/icon-16px-solid/boolean-intersect.svg";
import BooleanSubtractBack from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-front.svg";
import BooleanUnion from "@graphite-frontend/assets/icon-16px-solid/boolean-union.svg";
import CheckboxChecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-checked.svg";
import CheckboxUnchecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-unchecked.svg";
import Copy from "@graphite-frontend/assets/icon-16px-solid/copy.svg";
import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg";
import EyeHidden from "@graphite-frontend/assets/icon-16px-solid/eye-hidden.svg";
import EyeVisible from "@graphite-frontend/assets/icon-16px-solid/eye-visible.svg";
import File from "@graphite-frontend/assets/icon-16px-solid/file.svg";
import FlipHorizontal from "@graphite-frontend/assets/icon-16px-solid/flip-horizontal.svg";
import FlipVertical from "@graphite-frontend/assets/icon-16px-solid/flip-vertical.svg";
import Folder from "@graphite-frontend/assets/icon-16px-solid/folder.svg";
import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-logo.svg";
import Layer from "@graphite-frontend/assets/icon-16px-solid/layer.svg";
import NodeArtboard from "@graphite-frontend/assets/icon-16px-solid/node-artboard.svg";
import NodeBlur from "@graphite-frontend/assets/icon-16px-solid/node-blur.svg";
import NodeBrushwork from "@graphite-frontend/assets/icon-16px-solid/node-brushwork.svg";
import NodeColorCorrection from "@graphite-frontend/assets/icon-16px-solid/node-color-correction.svg";
import NodeGradient from "@graphite-frontend/assets/icon-16px-solid/node-gradient.svg";
import NodeImage from "@graphite-frontend/assets/icon-16px-solid/node-image.svg";
import NodeImaginate from "@graphite-frontend/assets/icon-16px-solid/node-imaginate.svg";
import NodeMagicWand from "@graphite-frontend/assets/icon-16px-solid/node-magic-wand.svg";
import NodeMask from "@graphite-frontend/assets/icon-16px-solid/node-mask.svg";
import NodeMotionBlur from "@graphite-frontend/assets/icon-16px-solid/node-motion-blur.svg";
import NodeNodes from "@graphite-frontend/assets/icon-16px-solid/node-nodes.svg";
import NodeOutput from "@graphite-frontend/assets/icon-16px-solid/node-output.svg";
import NodeShape from "@graphite-frontend/assets/icon-16px-solid/node-shape.svg";
import NodeText from "@graphite-frontend/assets/icon-16px-solid/node-text.svg";
import NodeTransform from "@graphite-frontend/assets/icon-16px-solid/node-transform.svg";
import Paste from "@graphite-frontend/assets/icon-16px-solid/paste.svg";
import Random from "@graphite-frontend/assets/icon-16px-solid/random.svg";
import Regenerate from "@graphite-frontend/assets/icon-16px-solid/regenerate.svg";
import Reload from "@graphite-frontend/assets/icon-16px-solid/reload.svg";
import Rescale from "@graphite-frontend/assets/icon-16px-solid/rescale.svg";
import Reset from "@graphite-frontend/assets/icon-16px-solid/reset.svg";
import Settings from "@graphite-frontend/assets/icon-16px-solid/settings.svg";
import Trash from "@graphite-frontend/assets/icon-16px-solid/trash.svg";
import ViewModeNormal from "@graphite-frontend/assets/icon-16px-solid/view-mode-normal.svg";
import ViewModeOutline from "@graphite-frontend/assets/icon-16px-solid/view-mode-outline.svg";
import ViewModePixels from "@graphite-frontend/assets/icon-16px-solid/view-mode-pixels.svg";
import ViewportDesignMode from "@graphite-frontend/assets/icon-16px-solid/viewport-design-mode.svg";
import ViewportGuideMode from "@graphite-frontend/assets/icon-16px-solid/viewport-guide-mode.svg";
import ViewportSelectMode from "@graphite-frontend/assets/icon-16px-solid/viewport-select-mode.svg";
import ZoomIn from "@graphite-frontend/assets/icon-16px-solid/zoom-in.svg";
import ZoomOut from "@graphite-frontend/assets/icon-16px-solid/zoom-out.svg";
import ZoomReset from "@graphite-frontend/assets/icon-16px-solid/zoom-reset.svg";
const SOLID_16PX = {
AlignBottom: { svg: AlignBottom, size: 16 },
@@ -196,17 +196,17 @@ const SOLID_16PX = {
} as const;
// 16px Two-Tone
import MouseHintDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-drag.svg";
import MouseHintLmbDouble from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
import MouseHintLmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintLmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-lmb.svg";
import MouseHintMmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
import MouseHintMmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-mmb.svg";
import MouseHintNone from "@graphite/../assets/icon-16px-two-tone/mouse-hint-none.svg";
import MouseHintRmbDrag from "@graphite/../assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintRmb from "@graphite/../assets/icon-16px-two-tone/mouse-hint-rmb.svg";
import MouseHintScrollDown from "@graphite/../assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
import MouseHintScrollUp from "@graphite/../assets/icon-16px-two-tone/mouse-hint-scroll-up.svg";
import MouseHintDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-drag.svg";
import MouseHintLmbDouble from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
import MouseHintLmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintLmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb.svg";
import MouseHintMmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
import MouseHintMmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-mmb.svg";
import MouseHintNone from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-none.svg";
import MouseHintRmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintRmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb.svg";
import MouseHintScrollDown from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
import MouseHintScrollUp from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-scroll-up.svg";
const TWO_TONE_16PX = {
MouseHintDrag: { svg: MouseHintDrag, size: 16 },
@@ -223,29 +223,29 @@ const TWO_TONE_16PX = {
} as const;
// 24px Two-Tone
import GeneralArtboardTool from "@graphite/../assets/icon-24px-two-tone/general-artboard-tool.svg";
import GeneralEyedropperTool from "@graphite/../assets/icon-24px-two-tone/general-eyedropper-tool.svg";
import GeneralFillTool from "@graphite/../assets/icon-24px-two-tone/general-fill-tool.svg";
import GeneralGradientTool from "@graphite/../assets/icon-24px-two-tone/general-gradient-tool.svg";
import GeneralNavigateTool from "@graphite/../assets/icon-24px-two-tone/general-navigate-tool.svg";
import GeneralSelectTool from "@graphite/../assets/icon-24px-two-tone/general-select-tool.svg";
import RasterBrushTool from "@graphite/../assets/icon-24px-two-tone/raster-brush-tool.svg";
import RasterCloneTool from "@graphite/../assets/icon-24px-two-tone/raster-clone-tool.svg";
import RasterDetailTool from "@graphite/../assets/icon-24px-two-tone/raster-detail-tool.svg";
import RasterFrameTool from "@graphite/../assets/icon-24px-two-tone/raster-frame-tool.svg";
import RasterHealTool from "@graphite/../assets/icon-24px-two-tone/raster-heal-tool.svg";
import RasterImaginateTool from "@graphite/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
import RasterPatchTool from "@graphite/../assets/icon-24px-two-tone/raster-patch-tool.svg";
import RasterRelightTool from "@graphite/../assets/icon-24px-two-tone/raster-relight-tool.svg";
import VectorEllipseTool from "@graphite/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
import VectorFreehandTool from "@graphite/../assets/icon-24px-two-tone/vector-freehand-tool.svg";
import VectorLineTool from "@graphite/../assets/icon-24px-two-tone/vector-line-tool.svg";
import VectorPathTool from "@graphite/../assets/icon-24px-two-tone/vector-path-tool.svg";
import VectorPenTool from "@graphite/../assets/icon-24px-two-tone/vector-pen-tool.svg";
import VectorRectangleTool from "@graphite/../assets/icon-24px-two-tone/vector-rectangle-tool.svg";
import VectorShapeTool from "@graphite/../assets/icon-24px-two-tone/vector-shape-tool.svg";
import VectorSplineTool from "@graphite/../assets/icon-24px-two-tone/vector-spline-tool.svg";
import VectorTextTool from "@graphite/../assets/icon-24px-two-tone/vector-text-tool.svg";
import GeneralArtboardTool from "@graphite-frontend/assets/icon-24px-two-tone/general-artboard-tool.svg";
import GeneralEyedropperTool from "@graphite-frontend/assets/icon-24px-two-tone/general-eyedropper-tool.svg";
import GeneralFillTool from "@graphite-frontend/assets/icon-24px-two-tone/general-fill-tool.svg";
import GeneralGradientTool from "@graphite-frontend/assets/icon-24px-two-tone/general-gradient-tool.svg";
import GeneralNavigateTool from "@graphite-frontend/assets/icon-24px-two-tone/general-navigate-tool.svg";
import GeneralSelectTool from "@graphite-frontend/assets/icon-24px-two-tone/general-select-tool.svg";
import RasterBrushTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-brush-tool.svg";
import RasterCloneTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-clone-tool.svg";
import RasterDetailTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-detail-tool.svg";
import RasterFrameTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-frame-tool.svg";
import RasterHealTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-heal-tool.svg";
import RasterImaginateTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-imaginate-tool.svg";
import RasterPatchTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-patch-tool.svg";
import RasterRelightTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-relight-tool.svg";
import VectorEllipseTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-ellipse-tool.svg";
import VectorFreehandTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-freehand-tool.svg";
import VectorLineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-line-tool.svg";
import VectorPathTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-path-tool.svg";
import VectorPenTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-pen-tool.svg";
import VectorRectangleTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg";
import VectorShapeTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-shape-tool.svg";
import VectorSplineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-spline-tool.svg";
import VectorTextTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-text-tool.svg";
const TWO_TONE_24PX = {
GeneralArtboardTool: { svg: GeneralArtboardTool, size: 24 },

34
frontend/src/wasm-communication/editor.ts
View File

@@ -1,15 +1,15 @@
import type WasmBindgenPackage from "@graphite/../wasm/pkg";
import type WasmBindgenPackage from "@graphite-frontend/wasm/pkg";
import init, { setRandomSeed, wasmMemory, JsEditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
import { panicProxy } from "@graphite/utility-functions/panic-proxy";
import { type JsMessageType } from "@graphite/wasm-communication/messages";
import { createSubscriptionRouter, type SubscriptionRouter } from "@graphite/wasm-communication/subscription-router";
export type WasmRawInstance = typeof WasmBindgenPackage;
export type WasmEditorInstance = InstanceType<WasmRawInstance["JsEditorHandle"]>;
export type WasmRawInstance = WebAssembly.Memory;
export type WasmEditorInstance = JsEditorHandle;
export type Editor = Readonly<ReturnType<typeof createEditor>>;
// `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
let wasmImport: WasmRawInstance | undefined;
let editorInstance: WasmEditorInstance | undefined;
let wasmImport: WebAssembly.Memory | undefined;
export async function updateImage(path: BigUint64Array, mime: string, imageData: Uint8Array, transform: Float64Array, documentId: bigint): Promise<void> {
const blob = new Blob([imageData], { type: mime });
@@ -21,7 +21,7 @@ export async function updateImage(path: BigUint64Array, mime: string, imageData:
image.src = blobURL;
await image.decode();
editorInstance?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight,transform);
window["editorInstance"]?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight, transform);
}
export async function fetchImage(path: BigUint64Array, mime: string, documentId: bigint, url: string): Promise<void> {
@@ -35,7 +35,7 @@ export async function fetchImage(path: BigUint64Array, mime: string, documentId:
image.src = blobURL;
await image.decode();
editorInstance?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight, undefined);
window["editorInstance"]?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight, undefined);
}
const tauri = "__TAURI_METADATA__" in window && import("@tauri-apps/api");
@@ -44,7 +44,7 @@ export async function dispatchTauri(message: unknown): Promise<void> {
try {
const response = await (await tauri).invoke("handle_message", { message });
editorInstance?.tauriResponse(response);
window["editorInstance"]?.tauriResponse(response);
} catch {
// eslint-disable-next-line no-console
console.error("Failed to dispatch Tauri message");
@@ -58,18 +58,16 @@ export async function initWasm(): Promise<void> {
// Import the WASM module JS bindings and wrap them in the panic proxy
// eslint-disable-next-line import/no-cycle
wasmImport = await import("@graphite/../wasm/pkg");
await init();
wasmImport = await wasmMemory();
// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
const randomSeedFloat = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
const randomSeed = BigInt(randomSeedFloat);
wasmImport?.setRandomSeed(randomSeed);
// TODO: Tauri: reenable this
// try {
// await invoke("set_random_seed", { seed: randomSeedFloat });
// } catch {
// // Ignore errors
// }
setRandomSeed(randomSeed);
if (!tauri) return;
await (await tauri).invoke("set_random_seed", { seed: randomSeedFloat });
}
// Should be called after running `initWasm()` and its promise resolving
@@ -80,12 +78,12 @@ export function createEditor() {
const raw: WasmRawInstance = wasmImport;
// Instance: Object containing many functions from `editor_api.rs` that are part of the editor instance (generated by wasm-bindgen)
const instance: WasmEditorInstance = new raw.JsEditorHandle((messageType: JsMessageType, messageData: Record<string, unknown>): void => {
const instance: WasmEditorInstance = new JsEditorHandle((messageType: JsMessageType, messageData: Record<string, unknown>): void => {
// This callback is called by WASM when a FrontendMessage is received from the WASM wrapper editor instance
// We pass along the first two arguments then add our own `raw` and `instance` context for the last two arguments
subscriptions.handleJsMessage(messageType, messageData, raw, instance);
});
editorInstance = instance;
window["editorInstance"] = instance;
// Subscriptions: Allows subscribing to messages in JS that are sent from the WASM backend
const subscriptions: SubscriptionRouter = createSubscriptionRouter();

46
frontend/src/wasm-communication/messages.ts
View File

@@ -506,15 +506,15 @@ export class TriggerFileDownload extends JsMessage {
readonly name!: string;
}
export class TriggerLoadAutoSaveDocuments extends JsMessage {}
export class TriggerLoadAutoSaveDocuments extends JsMessage { }
export class TriggerLoadPreferences extends JsMessage {}
export class TriggerLoadPreferences extends JsMessage { }
export class TriggerOpenDocument extends JsMessage {}
export class TriggerOpenDocument extends JsMessage { }
export class TriggerImport extends JsMessage {}
export class TriggerImport extends JsMessage { }
export class TriggerPaste extends JsMessage {}
export class TriggerPaste extends JsMessage { }
export class TriggerRasterDownload extends JsMessage {
readonly svg!: string;
@@ -618,7 +618,7 @@ export class TriggerNodeGraphFrameGenerate extends JsMessage {
readonly imaginateNode!: BigUint64Array | undefined;
}
export class TriggerRefreshBoundsOfViewports extends JsMessage {}
export class TriggerRefreshBoundsOfViewports extends JsMessage { }
export class TriggerRevokeBlobUrl extends JsMessage {
readonly url!: string;
@@ -628,7 +628,7 @@ export class TriggerSavePreferences extends JsMessage {
readonly preferences!: Record<string, unknown>;
}
export class DocumentChanged extends JsMessage {}
export class DocumentChanged extends JsMessage { }
export class UpdateDocumentLayerTreeStructureJs extends JsMessage {
constructor(readonly layerId: bigint, readonly children: UpdateDocumentLayerTreeStructureJs[]) {
@@ -645,7 +645,7 @@ export function newUpdateDocumentLayerTreeStructure(input: { dataBuffer: DataBuf
const pointerNum = Number(input.dataBuffer.pointer);
const lengthNum = Number(input.dataBuffer.length);
const wasmMemoryBuffer = wasm.wasmMemory().buffer;
const wasmMemoryBuffer = wasm.buffer;
// Decode the folder structure encoding
const encoding = new DataView(wasmMemoryBuffer, pointerNum, lengthNum);
@@ -713,7 +713,7 @@ export class UpdateImageData extends JsMessage {
readonly imageData!: ImaginateImageData[];
}
export class DisplayRemoveEditableTextbox extends JsMessage {}
export class DisplayRemoveEditableTextbox extends JsMessage { }
export class UpdateDocumentLayerDetails extends JsMessage {
@Type(() => LayerPanelEntry)
@@ -772,7 +772,7 @@ export class ImaginateImageData {
readonly transform!: Float64Array ;
}
export class DisplayDialogDismiss extends JsMessage {}
export class DisplayDialogDismiss extends JsMessage { }
export class Font {
fontFamily!: string;
@@ -791,7 +791,7 @@ export class TriggerVisitLink extends JsMessage {
url!: string;
}
export class TriggerTextCommit extends JsMessage {}
export class TriggerTextCommit extends JsMessage { }
export class TriggerTextCopy extends JsMessage {
readonly copyText!: string;
@@ -801,7 +801,7 @@ export class TriggerAboutGraphiteLocalizedCommitDate extends JsMessage {
readonly commitDate!: string;
}
export class TriggerViewportResize extends JsMessage {}
export class TriggerViewportResize extends JsMessage { }
// WIDGET PROPS
@@ -1145,7 +1145,7 @@ export class PivotAssist extends WidgetProps {
// WIDGET
const widgetSubTypes = [
{ value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons"},
{ value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons" },
{ value: CheckboxInput, name: "CheckboxInput" },
{ value: ColorInput, name: "ColorInput" },
{ value: DropdownInput, name: "DropdownInput" },
@@ -1327,25 +1327,25 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
}
// WIDGET LAYOUTS
export class UpdateDialogDetails extends WidgetDiffUpdate {}
export class UpdateDialogDetails extends WidgetDiffUpdate { }
export class UpdateDocumentModeLayout extends WidgetDiffUpdate {}
export class UpdateDocumentModeLayout extends WidgetDiffUpdate { }
export class UpdateToolOptionsLayout extends WidgetDiffUpdate {}
export class UpdateToolOptionsLayout extends WidgetDiffUpdate { }
export class UpdateDocumentBarLayout extends WidgetDiffUpdate {}
export class UpdateDocumentBarLayout extends WidgetDiffUpdate { }
export class UpdateToolShelfLayout extends WidgetDiffUpdate {}
export class UpdateToolShelfLayout extends WidgetDiffUpdate { }
export class UpdateWorkingColorsLayout extends WidgetDiffUpdate {}
export class UpdateWorkingColorsLayout extends WidgetDiffUpdate { }
export class UpdatePropertyPanelOptionsLayout extends WidgetDiffUpdate {}
export class UpdatePropertyPanelOptionsLayout extends WidgetDiffUpdate { }
export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate {}
export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate { }
export class UpdateLayerTreeOptionsLayout extends WidgetDiffUpdate {}
export class UpdateLayerTreeOptionsLayout extends WidgetDiffUpdate { }
export class UpdateNodeGraphBarLayout extends WidgetDiffUpdate {}
export class UpdateNodeGraphBarLayout extends WidgetDiffUpdate { }
export class UpdateMenuBarLayout extends JsMessage {
layoutTarget!: unknown;