Migrate build system from Webpack to Parcel (#1102)
* 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
Keavon Chambers
parent
c814abc347
commit
e6216009ee
|
|
@ -1,33 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Switch to the correct branch
|
||||
if [[ -z "${CF_PAGES_BRANCH}" ]]; then
|
||||
git switch master || git switch -c unknown-branch
|
||||
else
|
||||
git switch $CF_PAGES_BRANCH || git switch -c $CF_PAGES_BRANCH
|
||||
fi
|
||||
|
||||
# Install the latest version of the Rust toolchain
|
||||
echo 🔧 Install Rust
|
||||
curl https://sh.rustup.rs -sSf | sh -s -- -y
|
||||
export PATH=$PATH:/opt/buildhome/.cargo/bin
|
||||
echo rustc version:
|
||||
rustc --version
|
||||
|
||||
# Install the project's Node dependencies through npm
|
||||
echo 🚧 Install Node dependencies
|
||||
echo node version:
|
||||
node --version
|
||||
echo npm version:
|
||||
npm --version
|
||||
cd frontend
|
||||
npm ci
|
||||
|
||||
# Install the cargo-about Rust dependency that's used during the Webpack build process (in `webpack.config.js`)
|
||||
echo 📦 Install cargo-about
|
||||
cargo install cargo-about
|
||||
|
||||
# Build for production
|
||||
echo 👷 Build Graphite web client
|
||||
export NODE_ENV=production
|
||||
npm run build && mv public dist # `&&` is used here to preserve the exit code
|
||||
|
|
@ -13,6 +13,10 @@ env:
|
|||
jobs:
|
||||
build:
|
||||
runs-on: self-hosted
|
||||
permissions:
|
||||
contents: read
|
||||
deployments: write
|
||||
pull-requests: write
|
||||
env:
|
||||
RUSTC_WRAPPER: /usr/bin/sccache
|
||||
CARGO_INCREMENTAL: 0
|
||||
|
|
@ -20,6 +24,20 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Comment deploy start
|
||||
if: github.event_name != 'push'
|
||||
uses: mshick/add-pr-comment@v2
|
||||
with:
|
||||
message-id: cloudflare-deploy
|
||||
message: |
|
||||
### <span aria-hidden="true">🚧</span> Deploy Preview building...
|
||||
|
||||
| Name | Link |
|
||||
|---------------------------------|------------------------|
|
||||
|<span aria-hidden="true">🔨</span> Latest commit | ${{ github.sha }} |
|
||||
|<span aria-hidden="true">🔍</span> Latest deploy log | ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} |
|
||||
---
|
||||
|
||||
- name: 🔧 Set up Node
|
||||
uses: actions/setup-node@v1
|
||||
|
|
@ -40,11 +58,36 @@ jobs:
|
|||
- name: 🌐 Build Graphite web code
|
||||
env:
|
||||
NODE_ENV: production
|
||||
SKIP_CARGO_ABOUT: true
|
||||
run: |
|
||||
cd frontend
|
||||
mold -run npm run build
|
||||
|
||||
- name: Publish
|
||||
id: cloudflare
|
||||
uses: cloudflare/pages-action@1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: graphite-dev # e.g. 'my-project'
|
||||
directory: frontend/dist # e.g. 'dist'
|
||||
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Comment deploy url
|
||||
uses: mshick/add-pr-comment@v2
|
||||
with:
|
||||
message-id: cloudflare-deploy
|
||||
message: |
|
||||
### <span aria-hidden="true">✅</span> Deploy Preview ready!
|
||||
|
||||
|
||||
| Name | Link |
|
||||
|---------------------------------|------------------------|
|
||||
|<span aria-hidden="true">🔨</span> Latest commit | ${{ github.sha }} |
|
||||
|<span aria-hidden="true">🔍</span> Latest deploy log | ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} |
|
||||
|<span aria-hidden="true">😎</span> Deploy Preview Url | [${{ steps.cloudflare.outputs.url }}](${{ steps.cloudflare.outputs.url }}) |
|
||||
|<span aria-hidden="true">🌳</span> Environment | ${{ steps.cloudflare.outputs.environment }} |
|
||||
---
|
||||
|
||||
- name: 👕 Lint Graphite web formatting
|
||||
env:
|
||||
NODE_ENV: production
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
name: Deploy release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'latest-stable'
|
||||
|
||||
env:
|
||||
CARGO_TERM_COLOR: always
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: self-hosted
|
||||
permissions:
|
||||
contents: read
|
||||
deployments: write
|
||||
env:
|
||||
RUSTC_WRAPPER: /usr/bin/sccache
|
||||
CARGO_INCREMENTAL: 0
|
||||
SCCACHE_DIR: /var/lib/github-actions/.cache
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: 🔧 Set up Node
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: '16.x'
|
||||
|
||||
- name: 🚧 Install Node dependencies
|
||||
run: |
|
||||
cd frontend
|
||||
npm ci
|
||||
|
||||
- name: 🔼 Update Rust to latest stable
|
||||
run: |
|
||||
rustc --version
|
||||
rustup update stable
|
||||
rustc --version
|
||||
|
||||
- name: 🌐 Build Graphite web code
|
||||
env:
|
||||
NODE_ENV: production
|
||||
run: |
|
||||
cd frontend
|
||||
mold -run npm run build
|
||||
|
||||
- name: Publish
|
||||
id: cloudflare
|
||||
uses: cloudflare/pages-action@1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: graphite-editor
|
||||
directory: frontend/dist
|
||||
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
|
@ -48,9 +48,6 @@ opt-level = 1
|
|||
[profile.dev.package.graphene-std]
|
||||
opt-level = 1
|
||||
|
||||
[profile.dev.package.graphite-wasm]
|
||||
opt-level = 1
|
||||
|
||||
[profile.dev.package.autoquant]
|
||||
opt-level = 3
|
||||
|
||||
|
|
@ -60,5 +57,5 @@ opt-level = 3
|
|||
[profile.dev.package.xxhash-rust]
|
||||
opt-level = 3
|
||||
|
||||
#[profile.dev]
|
||||
#opt-level = 3
|
||||
[profile.dev]
|
||||
opt-level = 1
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
node_modules/
|
||||
wasm/pkg/
|
||||
public/build/
|
||||
dist/**
|
||||
!dist/.git-keep-directory
|
||||
.parcel-cache
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"transformers": {
|
||||
"*.svg": [
|
||||
"...",
|
||||
"@parcel/transformer-inline-string"
|
||||
],
|
||||
"*.svelte": [
|
||||
"parcel-transformer-svelte3-plus"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Graphite Editor</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- This script tag points to the source of the JS file we want to load and bundle -->
|
||||
<script type="module" src="src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -3,17 +3,24 @@
|
|||
"private": true,
|
||||
"description": "Graphite's web app frontend. Planned to be replaced by a native GUI written in Rust in the future.",
|
||||
"author": "Graphite Authors <contact@graphite.rs>",
|
||||
"browserslist": "> 1.5%, last 2 versions, not dead, not ie 11, not op_mini all, not ios_saf < 13",
|
||||
"type": "module",
|
||||
"alias": {
|
||||
"@graphite-frontend/*": "~/$1",
|
||||
"@graphite/../assets/*": "~/assets/$1",
|
||||
"@graphite/../public/*": "~/public/$1",
|
||||
"@graphite/*": "~/src/$1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run serve",
|
||||
"serve": "webpack serve || (npm run print-building-help && exit 1)",
|
||||
"build": "webpack build || (npm run print-building-help && exit 1)",
|
||||
"build-prod-unix": "NODE_ENV=production webpack build || (npm run print-building-help && exit 1)",
|
||||
"build-prod-windows": "set NODE_ENV=production && webpack build || (npm run print-building-help && exit 1)",
|
||||
"check": "svelte-check",
|
||||
"lint": "webpack lint || (npm run print-linting-help && exit 1)",
|
||||
"lint-no-fix": "webpack lint --no-fix || (npm run print-linting-help && exit 1)",
|
||||
"tauri:build": "webpack tauri:build",
|
||||
"tauri:serve": "webpack tauri:serve",
|
||||
"start": "npm run build-wasm && concurrently -k \"parcel serve index.html --port 8080\" \"npm run watch:wasm\" || (npm run print-building-help && exit 1)",
|
||||
"build": "npm run build-wasm-prod && npm run build-licenses && parcel build index.html || (npm run print-building-help && exit 1)",
|
||||
"build-licenses": "webpack build",
|
||||
"tauri:dev": "echo 'Make sure you build the wasm binary for tauri using `npm run tauri:build-wasm`' && parcel serve index.html --port 8080",
|
||||
"build-wasm": "wasm-pack build ./wasm --dev --target=web",
|
||||
"build-wasm-prod": "wasm-pack build ./wasm --release --target=web",
|
||||
"tauri:build-wasm": "wasm-pack build ./wasm --release --target=web -- --features tauri",
|
||||
"watch:wasm": "cargo watch --postpone --workdir wasm --shell \"wasm-pack build . --dev --target=web -- --color always\"",
|
||||
"--------------------": "",
|
||||
"print-building-help": "echo 'Graphite project failed to build. Did you remember to `npm install` the dependencies in `/frontend`?'",
|
||||
"print-linting-help": "echo 'Graphite project had lint errors, or may have otherwise failed. In the latter case, did you remember to `npm install` the dependencies in `/frontend`?'"
|
||||
},
|
||||
|
|
@ -24,35 +31,27 @@
|
|||
"reflect-metadata": "^0.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@parcel/transformer-inline-string": "^2.8.3",
|
||||
"@parcel/transformer-webmanifest": "^2.8.3",
|
||||
"@types/license-checker-webpack-plugin": "^0.2.1",
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/webpack": "^5.28.0",
|
||||
"@types/webpack-dev-server": "^4.7.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
||||
"@typescript-eslint/parser": "^5.48.0",
|
||||
"@wasm-tool/wasm-pack-plugin": "^1.6.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"eslint": "^8.31.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/webpack": "^5.28.1",
|
||||
"buffer": "^5.7.1",
|
||||
"concurrently": "^7.6.0",
|
||||
"license-checker-webpack-plugin": "^0.2.1",
|
||||
"prettier": "^2.8.2",
|
||||
"sass": "^1.57.1",
|
||||
"sass-loader": "^13.2.0",
|
||||
"svelte": "^3.55.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"svelte-check-plugin": "^1.0.4",
|
||||
"svelte-loader": "^3.1.4",
|
||||
"svelte-preprocess": "^5.0.0",
|
||||
"ts-loader": "^9.4.2",
|
||||
"parcel": "^2.8.3",
|
||||
"parcel-transformer-svelte3-plus": "^0.2.8",
|
||||
"postcss": "^8.4.21",
|
||||
"process": "^0.11.10",
|
||||
"svelte": "^3.56.0",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.9.4",
|
||||
"typescript": "^4.9.5",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
"webpack-cli": "^5.0.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"wasm-pack": "^0.10.3"
|
||||
"wasm-pack": "0.10.3"
|
||||
},
|
||||
"//": "Notes about dependency issues and incompatibilities should be added here when needed.",
|
||||
"homepage": "https://graphite.rs",
|
||||
|
|
|
|||
|
|
@ -23,12 +23,10 @@ graphite-editor = { version = "0.0.0", path = "../../editor" }
|
|||
chrono = "^0.4.23"
|
||||
tokio = {version ="1", features = ["full"] }
|
||||
ron = "0.8"
|
||||
|
||||
log = "0.4"
|
||||
fern = {version = "0.6", features = ["colored"] }
|
||||
futures = "0.3.25"
|
||||
|
||||
|
||||
[features]
|
||||
gpu = ["graphite-editor/gpu"]
|
||||
quantization = ["graphite-editor/quantization"]
|
||||
|
|
@ -37,4 +35,4 @@ quantization = ["graphite-editor/quantization"]
|
|||
default = [ "custom-protocol" ]
|
||||
# this feature is used for production builds where `devPath` points to the filesystem
|
||||
# DO NOT remove this
|
||||
custom-protocol = [ "tauri/custom-protocol" ]
|
||||
custom-protocol = ["tauri/custom-protocol"]
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ async fn main() {
|
|||
tauri::Builder::default()
|
||||
.invoke_handler(tauri::generate_handler![set_random_seed, handle_message])
|
||||
.setup(|_app| {
|
||||
//use tauri::Manager;
|
||||
//_app.get_window("main").unwrap().open_devtools();
|
||||
use tauri::Manager;
|
||||
_app.get_window("main").unwrap().open_devtools();
|
||||
Ok(())
|
||||
})
|
||||
.run(tauri::generate_context!())
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"$schema": "../node_modules/@tauri-apps/cli/schema.json",
|
||||
"build": {
|
||||
"beforeBuildCommand": "npm run build",
|
||||
"beforeDevCommand": "npm start",
|
||||
"distDir": "../public",
|
||||
"beforeBuildCommand": "npm run tauri:build-wasm",
|
||||
"beforeDevCommand": "npm run tauri:dev",
|
||||
"distDir": "../dist",
|
||||
"devPath": "http://127.0.0.1:8080/"
|
||||
},
|
||||
"package": {
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.widget-row {
|
||||
.widget-row.widget-row {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& + .text-button {
|
||||
&.text-button + .text-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
// This is a dummy entry point for webpack
|
||||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,12 @@
|
|||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": ["node", "svelte", "svelte/store", "svelte/motion", "svelte/transition", "svelte/animate", "svelte/easing"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~*": ["./*"],
|
||||
"/*": ["./*"],
|
||||
"@graphite-frontend/*": ["./*"],
|
||||
"@graphite/*": ["src/*"]
|
||||
},
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
|
|
@ -25,6 +28,10 @@
|
|||
"module": "commonjs",
|
||||
"useDefineForClassFields": false,
|
||||
"noImplicitOverride": true
|
||||
},
|
||||
"moduleTypes": {
|
||||
"webpack.config.ts": "cjs",
|
||||
"webpack-config-scripts/**/*": "cjs"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ graph-craft = { path = "../../node-graph/graph-craft" }
|
|||
log = "0.4"
|
||||
graphene-core = { path = "../../node-graph/gcore", features = ["async", "std", "alloc"] }
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
wasm-bindgen = { version = "0.2.73" }
|
||||
wasm-bindgen = { version = "0.2.84" }
|
||||
serde-wasm-bindgen = "0.4.1"
|
||||
js-sys = "0.3.55"
|
||||
wasm-bindgen-futures = "0.4.33"
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ pub fn set_random_seed(seed: u64) {
|
|||
|
||||
/// We directly interface with the updateImage JS function for massively increased performance over serializing and deserializing.
|
||||
/// This avoids creating a json with a list millions of numbers long.
|
||||
#[wasm_bindgen(module = "@graphite/wasm-communication/editor")]
|
||||
#[wasm_bindgen(module = "/../src/wasm-communication/editor.ts")]
|
||||
extern "C" {
|
||||
fn updateImage(path: Vec<u64>, mime: String, imageData: &[u8], transform: js_sys::Float64Array, document_id: u64);
|
||||
fn fetchImage(path: Vec<u64>, mime: String, document_id: u64, identifier: String);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ thread_local! {
|
|||
|
||||
/// Initialize the backend
|
||||
#[wasm_bindgen(start)]
|
||||
pub fn init() {
|
||||
pub fn init_graphite() {
|
||||
// Set up the panic hook
|
||||
panic::set_hook(Box::new(panic_hook));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,14 @@
|
|||
import * as path from "path";
|
||||
import fs from "fs";
|
||||
import { spawnSync } from "child_process";
|
||||
import WasmPackPlugin from "@wasm-tool/wasm-pack-plugin";
|
||||
import SvelteCheckPlugin from "svelte-check-plugin";
|
||||
import SveltePreprocess from "svelte-preprocess";
|
||||
import * as webpack from "webpack";
|
||||
import "webpack-dev-server";
|
||||
const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");
|
||||
|
||||
const mode = process.env.NODE_ENV === "production" ? "production" : "development";
|
||||
|
||||
const config: webpack.Configuration = {
|
||||
mode,
|
||||
entry: {
|
||||
bundle: ["./src/main.ts"]
|
||||
bundle: ["./src/main-webpack-licenses.ts"]
|
||||
},
|
||||
mode: "production",
|
||||
resolve: {
|
||||
alias: {
|
||||
// Note: Later in this config file, we'll automatically add paths from `tsconfig.compilerOptions.paths`
|
||||
|
|
@ -24,105 +18,15 @@ const config: webpack.Configuration = {
|
|||
mainFields: ["svelte", "browser", "module", "main"]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "public/build"),
|
||||
publicPath: "/build/",
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
publicPath: "/dist/",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "[name].[id].js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
// Rule: Svelte
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: "svelte-loader",
|
||||
options: {
|
||||
compilerOptions: {
|
||||
// Dev mode must be enabled for HMR to work!
|
||||
dev: mode === "development"
|
||||
},
|
||||
// TODO: Reenable in prod, see: https://github.com/sveltejs/rollup-plugin-svelte#extracting-css
|
||||
// emitCss: mode === "production",
|
||||
emitCss: false,
|
||||
hotReload: mode === "development",
|
||||
hotOptions: {
|
||||
// List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
|
||||
noPreserveState: false,
|
||||
optimistic: true,
|
||||
},
|
||||
preprocess: SveltePreprocess({
|
||||
scss: true,
|
||||
sass: true,
|
||||
}),
|
||||
onwarn(warning: { code: string; }, handler: (warn: any) => any) {
|
||||
const suppress = [
|
||||
"css-unused-selector",
|
||||
"unused-export-let",
|
||||
"a11y-no-noninteractive-tabindex",
|
||||
];
|
||||
if (suppress.includes(warning.code)) return;
|
||||
|
||||
handler(warning);
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// Required to prevent errors from Svelte on Webpack 5+
|
||||
// https://github.com/sveltejs/svelte-loader#usage
|
||||
{
|
||||
test: /node_modules\/svelte\/.*\.mjs$/,
|
||||
resolve: {
|
||||
fullySpecified: false
|
||||
}
|
||||
},
|
||||
|
||||
// Rule: SASS
|
||||
{
|
||||
test: /\.(scss|sass)$/,
|
||||
use: [
|
||||
"css-loader",
|
||||
"sass-loader"
|
||||
]
|
||||
},
|
||||
|
||||
// Rule: CSS
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
"css-loader",
|
||||
]
|
||||
},
|
||||
|
||||
// Rule: TypeScript
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: "ts-loader",
|
||||
exclude: /node_modules/
|
||||
},
|
||||
|
||||
// Rule: SVG
|
||||
{
|
||||
test: /\.svg$/,
|
||||
type: "asset/source",
|
||||
},
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
hot: true,
|
||||
rules: []
|
||||
},
|
||||
plugins: [
|
||||
// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
|
||||
// Use this JS to import the bundled Rust entry points: const wasm = import("@graphite/../wasm/pkg").then(panicProxy);
|
||||
// Then call WASM functions with: (await wasm).functionName()
|
||||
// https://github.com/wasm-tool/wasm-pack-plugin
|
||||
new WasmPackPlugin({
|
||||
crateDirectory: path.resolve(__dirname, "wasm"),
|
||||
// Remove when this issue is resolved: https://github.com/wasm-tool/wasm-pack-plugin/issues/93
|
||||
outDir: path.resolve(__dirname, "wasm/pkg"),
|
||||
watchDirectories: ["../editor", "../document-legacy", "../proc-macros", "../node-graph"].map((folder) => path.resolve(__dirname, folder)),
|
||||
}),
|
||||
|
||||
// License Checker Webpack Plugin validates the license compatibility of all dependencies which are compiled into the webpack bundle
|
||||
// It also writes the third-party license notices to a file which is displayed in the application
|
||||
// https://github.com/microsoft/license-checker-webpack-plugin
|
||||
|
|
@ -137,7 +41,6 @@ const config: webpack.Configuration = {
|
|||
|
||||
// new SvelteCheckPlugin(),
|
||||
],
|
||||
devtool: mode === "development" ? "source-map" : false,
|
||||
experiments: {
|
||||
asyncWebAssembly: true,
|
||||
},
|
||||
|
|
@ -189,7 +92,7 @@ interface Dependency extends PackageInfo {
|
|||
|
||||
function formatThirdPartyLicenses(jsLicenses: {dependencies: Dependency[]}): string {
|
||||
let rustLicenses: LicenseInfo[] | undefined;
|
||||
if (process.env.NODE_ENV === "production" && process.env.SKIP_CARGO_ABOUT === undefined) {
|
||||
if (process.env.SKIP_CARGO_ABOUT === undefined) {
|
||||
try {
|
||||
rustLicenses = generateRustLicenses();
|
||||
} catch (err) {
|
||||
|
|
@ -335,10 +238,10 @@ function htmlDecode(input: string): string {
|
|||
quot: `"`,
|
||||
};
|
||||
|
||||
return input.replace(/&([^;]+);/g, (entity, entityCode: string) => {
|
||||
return input.replace(/&([^;]+);/g, (entity: string, entityCode: string) => {
|
||||
let match;
|
||||
|
||||
const maybeEntity = Object.entries(htmlEntities).find((entry) => entry[1] === entityCode);
|
||||
const maybeEntity = Object.entries(htmlEntities).find(([key, _]) => key === entityCode);
|
||||
if (maybeEntity) {
|
||||
return maybeEntity[1];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Graphite",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Graphite",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"description": "A convenience package for calling the real package.json in ./frontend",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "cd frontend && npm start",
|
||||
"serve": "cd frontend && npm start"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue