diff --git a/src/lib/litegraph/.cursor/rules/unit-test.mdc b/src/lib/litegraph/.cursor/rules/unit-test.mdc new file mode 100644 index 0000000000..2c6704f3e2 --- /dev/null +++ b/src/lib/litegraph/.cursor/rules/unit-test.mdc @@ -0,0 +1,21 @@ +--- +description: Creating unit tests +globs: +alwaysApply: false +--- + +# Creating unit tests + +- This project uses `vitest` for unit testing +- Tests are stored in the `test/` directory +- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux + - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms +- Tests should be mocked properly + - Mocks should be cleanly written and easy to understand + - Mocks should be re-usable where possible + +## Unit test style + +- Prefer the use of `test.extend` over loose variables + - To achieve this, import `test as baseTest` from `vitest` +- Never use `it`; `test` should be used in place of this \ No newline at end of file diff --git a/src/lib/litegraph/.github/workflows/dev-release.yml b/src/lib/litegraph/.github/workflows/dev-release.yml new file mode 100644 index 0000000000..d947abdfb3 --- /dev/null +++ b/src/lib/litegraph/.github/workflows/dev-release.yml @@ -0,0 +1,62 @@ +name: Create Dev Release +description: Create a nightly-style npm package for a development / experimental branch. Do not use "latest" tag. This will not have a GitHub release / tag by default. + +on: + workflow_dispatch: + inputs: + tag: + description: "npm tag (`ni pacakge@tag`)" + required: true + default: "subgraph" + gh-release: + description: "Draft a GitHub release" + type: boolean + required: false + default: false + +jobs: + create-release: + runs-on: ubuntu-latest + if: inputs.gh-release == true + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - uses: actions/setup-node@v3 + with: + node-version: lts/* + + - name: Get current version + id: current_version + run: | + CURRENT_VERSION=$(node -p "require('./package.json').version") + echo "version=$CURRENT_VERSION" >> $GITHUB_OUTPUT + + - name: Create release + id: create_release + uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + tag_name: v${{ steps.current_version.outputs.version }} + draft: true + prerelease: true + generate_release_notes: true + make_latest: "false" + + publish: + runs-on: ubuntu-latest + if: inputs.tag != 'latest' + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v3 + with: + node-version: lts/* + registry-url: "https://registry.npmjs.org" + + - run: npm ci + - run: npm run build + - run: npm publish --access public --tag ${{ inputs.tag }} + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/src/lib/litegraph/.github/workflows/github-release.yml b/src/lib/litegraph/.github/workflows/github-release.yml new file mode 100644 index 0000000000..22c1bcb7ea --- /dev/null +++ b/src/lib/litegraph/.github/workflows/github-release.yml @@ -0,0 +1,62 @@ +name: Create GitHub Release +description: Automatically creates a release when a PR is merged that both that changes package.json and has the Release label. + +on: + pull_request: + types: [closed] + branches: + - main + - master + paths: + - "package.json" + +jobs: + create-release: + runs-on: ubuntu-latest + if: > + github.event.pull_request.merged == true && + contains(github.event.pull_request.labels.*.name, 'Release') + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - uses: actions/setup-node@v3 + with: + node-version: lts/* + + - name: Get current version + id: current_version + run: | + CURRENT_VERSION=$(node -p "require('./package.json').version") + echo "version=$CURRENT_VERSION" >> $GITHUB_OUTPUT + + - name: Create release + id: create_release + uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + tag_name: v${{ steps.current_version.outputs.version }} + draft: false + prerelease: false + generate_release_notes: true + make_latest: "true" + + publish: + runs-on: ubuntu-latest + if: > + github.event.pull_request.merged == true && + contains(github.event.pull_request.labels.*.name, 'Release') + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v3 + with: + node-version: lts/* + registry-url: "https://registry.npmjs.org" + + - run: npm ci + - run: npm run build + - run: npm publish --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/src/lib/litegraph/.github/workflows/release-version.yml b/src/lib/litegraph/.github/workflows/release-version.yml new file mode 100644 index 0000000000..3638e17246 --- /dev/null +++ b/src/lib/litegraph/.github/workflows/release-version.yml @@ -0,0 +1,60 @@ +name: Release a New Version +description: Creates a PR to increment the version. When the PR is merged, it will automatically create a release. + +on: + workflow_dispatch: + inputs: + version_type: + description: Version increment type + required: true + default: patch + type: choice + options: [patch, minor, major, prepatch, preminor, premajor, prerelease] + pre_release: + description: Pre-release ID (suffix) + required: false + default: "" + type: string + +jobs: + bump-version: + runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: lts/* + cache: "npm" + + - name: Bump version + id: bump-version + run: | + npm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version + NEW_VERSION=$(node -p "require('./package.json').version") + echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT + + - name: Format PR string + id: capitalised + run: | + CAPITALISED_TYPE=${{ github.event.inputs.version_type }} + echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT + + - name: Create Pull Request + uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e + with: + token: ${{ secrets.PR_GH_TOKEN }} + commit-message: "[Release] Increment version to ${{ steps.bump-version.outputs.NEW_VERSION }}" + title: ${{ steps.bump-version.outputs.NEW_VERSION }} + body: | + ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }} + branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }} + base: master + labels: | + Release diff --git a/src/lib/litegraph/.github/workflows/test-comfyui-frontend.yml b/src/lib/litegraph/.github/workflows/test-comfyui-frontend.yml new file mode 100644 index 0000000000..d8f416fb6b --- /dev/null +++ b/src/lib/litegraph/.github/workflows/test-comfyui-frontend.yml @@ -0,0 +1,115 @@ +# This action should be kept in sync with +# https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/.github/workflows/test-ui.yaml + +name: Test ComfyUI Frontend + +on: + workflow_dispatch: + inputs: + frontend-branch: + description: "Frontend branch" + required: true + default: "main" + + push: + branches: [main, master] + paths-ignore: + - ".cursor/**" + - ".husky/**" + - ".vscode/**" + - ".github/ISSUE_TEMPLATE/**" + - "test/**" + + pull_request: + branches: [main, master] + paths-ignore: + - ".cursor/**" + - ".husky/**" + - ".vscode/**" + - ".github/ISSUE_TEMPLATE/**" + - "test/**" + +jobs: + test-comfyui-frontend: + runs-on: ubuntu-latest + steps: + - name: Checkout litegraph + uses: actions/checkout@v4 + with: + path: "litegraph" + + - name: Checkout ComfyUI + uses: actions/checkout@v4 + with: + repository: "comfyanonymous/ComfyUI" + path: "ComfyUI" + ref: master + + - name: Checkout ComfyUI_frontend + uses: actions/checkout@v4 + with: + repository: "Comfy-Org/ComfyUI_frontend" + path: "ComfyUI_frontend" + ref: ${{ inputs.frontend-branch }} + + - name: Checkout ComfyUI_devtools + uses: actions/checkout@v4 + with: + repository: "Comfy-Org/ComfyUI_devtools" + path: "ComfyUI/custom_nodes/ComfyUI_devtools" + + - uses: actions/setup-node@v4 + with: + node-version: lts/* + + - uses: actions/setup-python@v4 + with: + python-version: "3.10" + + - name: Install requirements + run: | + python -m pip install --upgrade pip + pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu + pip install -r requirements.txt + pip install wait-for-it + working-directory: ComfyUI + + - name: Build litegraph + run: | + npm ci + npm run build + working-directory: litegraph + + - name: Install updated litegraph in ComfyUI_frontend + run: | + npm ci + npm install ../litegraph + npm run build + working-directory: ComfyUI_frontend + + - name: Start ComfyUI server + run: | + python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist & + wait-for-it --service 127.0.0.1:8188 -t 600 + working-directory: ComfyUI + + - name: Run UI tests + run: | + npm run test:component + npm run test:unit + working-directory: ComfyUI_frontend + + - name: Install Playwright Browsers + run: npx playwright install chromium --with-deps + working-directory: ComfyUI_frontend + + - name: Run Playwright tests (chromium) + run: npx playwright test --project=chromium + working-directory: ComfyUI_frontend + + - uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: ComfyUI_frontend/playwright-report/ + retention-days: 30 diff --git a/src/lib/litegraph/.github/workflows/test-lint-format.yml b/src/lib/litegraph/.github/workflows/test-lint-format.yml new file mode 100644 index 0000000000..355639420e --- /dev/null +++ b/src/lib/litegraph/.github/workflows/test-lint-format.yml @@ -0,0 +1,35 @@ +name: Unit Test, Lint, and Format + +on: + push: + branches: [main, master, "dev*"] + pull_request: + branches: [main, master, "dev*"] + +jobs: + test: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - uses: actions/setup-node@v3 + with: + node-version: lts/* + + - name: Build + run: | + npm ci + npm run build + + - name: Run lint + run: | + npm run lint:ci + + - name: Run format + run: | + npm run format + + - name: Run vitest tests + run: | + npm test -- --reporter=verbose diff --git a/src/lib/litegraph/.gitignore b/src/lib/litegraph/.gitignore new file mode 100755 index 0000000000..5721fd8739 --- /dev/null +++ b/src/lib/litegraph/.gitignore @@ -0,0 +1,33 @@ +temp/ +temp/* +coverage/ + +# Editors +*.bak +.project + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +*.code-workspace +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/src/lib/litegraph/.husky/pre-commit b/src/lib/litegraph/.husky/pre-commit new file mode 100644 index 0000000000..a19f49ff7c --- /dev/null +++ b/src/lib/litegraph/.husky/pre-commit @@ -0,0 +1,5 @@ +if [[ "$OS" == "Windows_NT" ]]; then + npx.cmd lint-staged +else + npx lint-staged +fi diff --git a/src/lib/litegraph/.prettierrc b/src/lib/litegraph/.prettierrc new file mode 100755 index 0000000000..c3be0e5439 --- /dev/null +++ b/src/lib/litegraph/.prettierrc @@ -0,0 +1,8 @@ +{ + "singleQuote": false, + "semi": false, + "tabWidth": 2, + "trailingComma": "all", + "overrides": [{ "files": "*.ts", "options": { "requirePragma": true } }], + "arrowParens": "avoid" +} diff --git a/src/lib/litegraph/API.md b/src/lib/litegraph/API.md new file mode 100644 index 0000000000..59d728c073 --- /dev/null +++ b/src/lib/litegraph/API.md @@ -0,0 +1,203 @@ +# API + +This document is intended to provide a brief introduction to new Litegraph APIs. + + + + + +# CanvasPointer API + + + +CanvasPointer replaces much of the original pointer handling code. It provides a standard click, double-click, and drag UX for users. + + + + + +## Default behaviour changes + + + +- Dragging multiple items no longer requires that the shift key be held down + - Clicking an item when multiple nodes / etc are selected will still deselect everything else +- Clicking a connected link on an input no longer disconnects and reconnects it +- Double-clicking requires that both clicks occur nearby +- Provides much room for extension, configuration, and changes + +#### Bug fixes + +- Intermittent issue where clicking a node slightly displaces it +- Alt-clicking to add a reroute creates two undo steps + +### Selecting multiple items + +- `Ctrl + drag` - Begin multi-select +- `Ctrl + Shift + drag` - Add to selection + - `Ctrl + drag`, `Shift` - Alternate add to selection +- `Ctrl + drag`, `Alt` - Remove from selection + +### Click "drift" + +A small amount of buffering is performed between down/up events to prevent accidental micro-drag events. If either of the two controls are exceeded, the event will be considered a drag event, not a click. + +- `buffterTime` is the maximum time that tiny movements can be ignored (Default: 150ms) +- `maxClickDrift` controls how far a click can drift from its down event before it is considered a drag (Default: 6) + +### Double-click + +When double clicking, the double click callback is executed shortly after one normal click callback (if present). At present, dragging from the second click simply invalidates the event - nothing will happen. + +- `doubleClickTime` is the maximum time between two `down` events for them to be considered a double click (Default: 300ms) +- Distance between the two events must be less than `3 * maxClickDrift` + +### Configuration + +All above configuration is via class static. + +```ts +CanvasPointer.bufferTime = 150 +CanvasPointer.maxClickDrift = 6 +CanvasPointer.doubleClickTime = 300 +``` + + + + + + + +## Implementing + + + +Clicking, double-clicking, and dragging can now all be configured during the initial `pointerdown` event, and the correct callback(s) will be executed. + +A click event can be as simple as: + +```ts +if (node.isClickedInSpot(e.canvasX, e.canvasY)) + this.pointer.onClick = () => node.gotClickInSpot() +``` + +Full usage can be seen in the old `processMouseDown` handler, which is still in place (several monkey patches in the wild). + +### Registering a click or drag event + +Example usage: + +```typescript +const { pointer } = this +// Click / double click - executed on pointerup +pointer.onClick = e => node.executeClick(e) +pointer.onDoubleClick = node.gotDoubleClick + +// Drag events - executed on pointermove +pointer.onDragStart = e => { + node.isBeingDragged = true + canvas.startedDragging(e) +} +pointer.onDrag = () => {} +// finally() is preferred where possible, as it is guaranteed to run +pointer.onDragEnd = () => {} + +// Always run, regardless of outcome +pointer.finally = () => (node.isBeingDragged = false) +``` + +## Widgets + +Adds `onPointerDown` callback to node widgets. A few benefits of the new API: + +- Simplified usage +- Exposes callbacks like "double click", removing the need to time / measure multiple pointer events +- Unified UX - same API as used in the rest of Litegraph +- Honours the user's click speed and pointer accuracy settings + +#### Usage + +```ts +// Callbacks for each pointer action can be configured ahead of time +widget.onPointerDown = function (pointer, node, canvas) { + const e = pointer.eDown + const offsetFromNode = [e.canvasX - node.pos[0], e.canvasY - node.pos[1]] + + // Click events - no overlap with drag events + pointer.onClick = upEvent => { + // Provides access to the whole lifecycle of events in every callback + console.log(pointer.eDown) + console.log(pointer.eMove ?? "Pointer didn't move") + console.log(pointer.eUp) + } + pointer.onDoubleClick = upEvent => this.customFunction(upEvent) + + // Runs once before the first onDrag event + pointer.onDragStart = () => {} + // Receives every movement event + pointer.onDrag = moveEvent => {} + // The pointerup event of a drag + pointer.onDragEnd = upEvent => {} + + // Semantics of a "finally" block (try/catch). Once set, the block always executes. + pointer.finally = () => {} + + // Return true to cancel regular Litegraph handling of this click / drag + return true +} +``` + + + +### TypeScript & JSDoc + +In-IDE typing is available for use in at least mainstream editors. It can be added to JS projects using the @comfyorg/litegraph npm package. + +```ts +/** @import { IWidget } from './path/to/@comfyorg/litegraph/litegraph.d.ts' */ +/** @type IWidget */ +const widget = node.widgets[0] +widget.onPointerDown = function (pointer, node, canvas) {} +``` + +#### VS Code + +![image](https://github.com/user-attachments/assets/e14afd02-247f-44dc-acbf-6333027cd488) + +## Hovering over + +Adds API for downstream consumers to handle custom cursors. A bitwise enum of items, + +```typescript +type LGraphCanvasState = { + /** If `true`, pointer move events will set the canvas cursor style. */ + shouldSetCursor: boolean, + /** Bit flags indicating what is currently below the pointer. */ + hoveringOver: CanvasItem, + ... +} + +// Disable litegraph cursors +canvas.state.shouldSetCursor = false + +// Checking state - bit operators +if (canvas.state.hoveringOver & CanvasItem.ResizeSe) element.style.cursor = 'se-resize' +``` + + + +# Removed public interfaces + +All are unused and incomplete. Have bugs beyond just typescript typing, and are (currently) not worth maintaining. If any of these features are desired down the track, they can be reimplemented. + +- Live mode +- Subgraph +- `dragged_node` + +## LiteGraph + +These features have not been maintained, and would require refactoring / rewrites. As code search revealed them to be unused, they are being removed. + +- addNodeMethod +- compareObjects +- auto_sort_node_types (option) diff --git a/src/lib/litegraph/CLAUDE.md b/src/lib/litegraph/CLAUDE.md new file mode 100644 index 0000000000..c04edd40c3 --- /dev/null +++ b/src/lib/litegraph/CLAUDE.md @@ -0,0 +1,62 @@ +- This codebase has extensive eslint autofix rules and IDEs are configured to use eslint as the format on save tool. Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns. Review the results and correct any remaining eslint errors. +- Take advantage of `TypedArray` `subarray` when appropriate. +- The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangles size and position. +- Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement. +- Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred. +- You are allowed to research code on https://developer.mozilla.org/ and https://stackoverflow.com without asking. +- When adding features, always write vitest unit tests using cursor rules in @.cursor +- When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`. + +# Bash commands + +- `npm run typecheck` Run the typechecker +- `npm run build` Build the project +- `npm run lint:fix` Run ESLint + +# Code style + +- Always prefer best practices when writing code. +- Write using concise, legible, and easily maintainable code. +- Avoid repetition where possible, but not at the expense of code legibility. +- Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code. + +# Workflow + +- Be sure to typecheck when you’re done making a series of code changes +- Prefer running single tests, and not the whole test suite, for performance + +# Testing Guidelines + +## Avoiding Circular Dependencies in Tests + +**CRITICAL**: When writing tests for subgraph-related code, always import from the barrel export to avoid circular dependency issues: + +```typescript +// ✅ CORRECT - Use barrel import +import { LGraph, Subgraph, SubgraphNode } from "@/litegraph" + +// ❌ WRONG - Direct imports cause circular dependency +import { LGraph } from "@/LGraph" +import { Subgraph } from "@/subgraph/Subgraph" +import { SubgraphNode } from "@/subgraph/SubgraphNode" +``` + +**Root cause**: `LGraph` and `Subgraph` have a circular dependency: +- `LGraph.ts` imports `Subgraph` (creates instances with `new Subgraph()`) +- `Subgraph.ts` extends `LGraph` + +The barrel export (`@/litegraph`) handles this properly, but direct imports cause module loading failures. + +## Test Setup for Subgraphs + +Use the provided test helpers for consistent setup: + +```typescript +import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +function createTestSetup() { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + return { subgraph, subgraphNode } +} +``` diff --git a/src/lib/litegraph/CONTRIBUTING.md b/src/lib/litegraph/CONTRIBUTING.md new file mode 100755 index 0000000000..45043616b4 --- /dev/null +++ b/src/lib/litegraph/CONTRIBUTING.md @@ -0,0 +1,9 @@ +# Contribution Rules +There are some simple rules that everyone should follow: + +### Do not commit files from build folder +> I usually have horrible merge conflicts when I upload the build version that take me too much time to solve, but I want to keep the build version in the repo, so I guess it would be better if only one of us does the built, which would be me. +> https://github.com/jagenjo/litegraph.js/pull/155#issuecomment-656602861 +Those files will be updated by owner. + + diff --git a/src/lib/litegraph/LICENSE b/src/lib/litegraph/LICENSE new file mode 100755 index 0000000000..1b52aa11c1 --- /dev/null +++ b/src/lib/litegraph/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2013 by Javi Agenjo + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/src/lib/litegraph/README.md b/src/lib/litegraph/README.md new file mode 100755 index 0000000000..1d79f8c7ce --- /dev/null +++ b/src/lib/litegraph/README.md @@ -0,0 +1,173 @@ +# @ComfyOrg/litegraph + +This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend). + +It is a fork of the original `litegraph.js`. Some APIs may by unchanged, however it is largely incompatible with the original. + +Some early highlights: + +- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1) +- Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3) +- Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7) +- Emit search box triggering custom events () +- Truncate overflowing combo widget text () +- Sort node based on ID on graph serialization () +- Fix empty input not used when connecting links () +- Batch output connection move/disconnect () +- And now with hundreds more... + +# Install + +`npm i @comfyorg/litegraph` + +# litegraph.js + +A TypeScript library to create graphs in the browser similar to Unreal Blueprints. + +
+ +Description of the original litegraph.js + +A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs. + +It can be integrated easily in any existing web applications and graphs can be run without the need of the editor. + +
+ +![Node Graph](imgs/node_graph_example.png "Node graph example") + +## Features + +- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture) +- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...) +- Optimized to support hundreds of nodes per graph (on editor but also on execution) +- Customizable theme (colors, shapes, background) +- Callbacks to personalize every action/drawing/event of nodes +- Graphs can be executed in NodeJS +- Highly customizable nodes (color, shape, widgets, custom rendering) +- Easy to integrate in any JS application (one single file, no dependencies) +- Typescript support + +## Installation + +You can install it using npm + +```bash +npm install @comfyorg/litegraph +``` + +## How to code a new Node type + +Here is an example of how to build a node that sums two inputs: + +```ts +import { LiteGraph, LGraphNode } from "./litegraph" + +class MyAddNode extends LGraphNode { + // Name to show + title = "Sum" + + constructor() { + this.addInput("A", "number") + this.addInput("B", "number") + this.addOutput("A+B", "number") + this.properties.precision = 1 + } + + // Function to call when the node is executed + onExecute() { + var A = this.getInputData(0) + if (A === undefined) A = 0 + var B = this.getInputData(1) + if (B === undefined) B = 0 + this.setOutputData(0, A + B) + } +} + +// Register the node type +LiteGraph.registerNodeType("basic/sum", MyAddNode) +``` + +## Server side + +It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc). + +```ts +import { LiteGraph, LGraph } from "./litegraph.js" + +const graph = new LGraph() + +const firstNode = LiteGraph.createNode("basic/sum") +graph.add(firstNode) + +const secondNode = LiteGraph.createNode("basic/sum") +graph.add(secondNode) + +firstNode.connect(0, secondNode, 1) + +graph.start() +``` + +## Projects using it + +### [ComfyUI](https://github.com/comfyanonymous/ComfyUI) + +![ComfyUI default workflow](https://github.com/comfyanonymous/ComfyUI/blob/6efe561c2a7321501b1b27f47039c7616dda1860/comfyui_screenshot.png "ComfyUI default workflow") + +### Projects using the original litegraph.js + +
+ +Click to expand + +### [webglstudio.org](http://webglstudio.org) + +![WebGLStudio](imgs/webglstudio.gif "WebGLStudio") + +### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html) + +![MOI Elephant](imgs/elephant.gif "MOI Elephant") + +### Mynodes + +![MyNodes](imgs/mynodes.png "MyNodes") + +
+ +## Feedback + +Please [open an issue](https://github.com/Comfy-Org/litegraph.js/issues/) on the GitHub repo. + +# Development + +Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x + +## Releasing + +Use GitHub actions to release normal versions. + +1. Run the `Release a New Version` action, selecting the version incrment type +1. Merge the resultion PR +1. A GitHub release is automatically published on merge + +### Pre-release + +The action directly translates `Version increment type` to the npm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument. + +e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only. +Use `patch` when ready to remove the pre-release suffix. + +## Contributors + +You can find the [current list of contributors](https://github.com/Comfy-Org/litegraph.js/graphs/contributors) on GitHub. + +### Contributors (pre-fork) + +- atlasan +- kriffe +- rappestad +- InventivetalentDev +- NateScarlet +- coderofsalvation +- ilyabesk +- gausszhou diff --git a/src/lib/litegraph/eslint.config.js b/src/lib/litegraph/eslint.config.js new file mode 100644 index 0000000000..6acefd7915 --- /dev/null +++ b/src/lib/litegraph/eslint.config.js @@ -0,0 +1,310 @@ +import eslint from "@eslint/js" +import stylistic from "@stylistic/eslint-plugin" +import eslintPluginAntfu from "eslint-plugin-antfu" +import jsdoc from "eslint-plugin-jsdoc" +import eslintPluginSimpleImportSort from "eslint-plugin-simple-import-sort" +import eslintPluginUnicorn from "eslint-plugin-unicorn" +import unusedImports from "eslint-plugin-unused-imports" +import globals from "globals" +import tseslint from "typescript-eslint" + +const rules = Object.fromEntries( + Object.entries(eslintPluginAntfu.rules).map(([id]) => [`antfu/${id}`, "off"]), +) +const antfuLint = { + name: "antfu/without-if-newline-or-imports", + plugins: { antfu: eslintPluginAntfu }, + rules, +} + +const unicornRecommended = eslintPluginUnicorn.configs.recommended + +export default tseslint.config( + { ignores: [".*/**", "dist/**", "scripts/**"] }, + { files: ["**/*.{js,mjs,ts,mts}"] }, + eslint.configs.recommended, + ...tseslint.configs.recommendedTypeChecked, + stylistic.configs.customize({ + quotes: "double", + braceStyle: "1tbs", + commaDangle: "always-multiline", + }), + { + languageOptions: { + globals: { ...globals.browser }, + parserOptions: { + projectService: { + allowDefaultProject: [ + "eslint.config.js", + "lint-staged.config.js", + "vite.config.mts", + ], + }, + tsconfigRootDir: import.meta.dirname, + }, + }, + settings: { + jsdoc: { + mode: "typescript", + }, + }, + }, + { + ignores: ["./dist/**/*"], + }, + + // Unicorn + unicornRecommended, + { + rules: { + // Temporarily disabled + // See https://github.com/Comfy-Org/litegraph.js/issues/629 + "unicorn/no-lonely-if": "off", + "unicorn/no-this-assignment": "off", + "unicorn/no-useless-switch-case": "off", + "unicorn/no-zero-fractions": "off", + "unicorn/prefer-blob-reading-methods": "off", + "unicorn/prefer-default-parameters": "off", + "unicorn/prefer-math-min-max": "off", + "unicorn/prefer-query-selector": "off", + "unicorn/prefer-spread": "off", + "unicorn/prefer-structured-clone": "off", + "unicorn/prefer-switch": "off", + "unicorn/prefer-ternary": "off", + + // Disable rules + "unicorn/consistent-function-scoping": "off", + "unicorn/explicit-length-check": "off", + "unicorn/filename-case": "off", + "unicorn/no-negated-condition": "off", + "unicorn/no-new-array": "off", + "unicorn/no-null": "off", + "unicorn/prefer-global-this": "off", + "unicorn/prefer-number-properties": "off", + "unicorn/prefer-string-raw": "off", + "unicorn/prefer-string-slice": "off", + "unicorn/prevent-abbreviations": "off", + "unicorn/require-number-to-fixed-digits-argument": "off", + "unicorn/switch-case-braces": "off", + + // Node rules: dev dependency config, etc. + "unicorn/prefer-module": "error", + "unicorn/prefer-node-protocol": "error", + }, + }, + + // JSDoc + jsdoc.configs["flat/contents-typescript-error"], + jsdoc.configs["flat/logical-typescript-error"], + jsdoc.configs["flat/stylistic-typescript-error"], + { + rules: { + "jsdoc/check-param-names": [ + "error", + { + disableMissingParamChecks: true, + disableExtraPropertyReporting: true, + checkRestProperty: false, + checkDestructured: false, + }, + ], + "jsdoc/check-tag-names": ["error", { definedTags: ["remarks"] }], + "jsdoc/multiline-blocks": "error", + // Disabling + "jsdoc/empty-tags": "off", + "jsdoc/lines-before-block": "off", + "jsdoc/match-description": "off", + "jsdoc/no-undefined-types": "off", + "jsdoc/text-escaping": "off", + "jsdoc/valid-types": "off", + "jsdoc/informative-docs": "off", + }, + }, + + // Base, TypeScript, and Stylistic + { + rules: { + "prefer-template": "error", + + // TODO: Update when TypeScript has been cleaned + // https://github.com/Comfy-Org/litegraph.js/issues/657 + "@typescript-eslint/no-unnecessary-type-assertion": "off", + "prefer-spread": "off", + "no-empty": "off", + "no-prototype-builtins": "off", + "no-var": "error", + "no-fallthrough": "off", + + "no-empty-pattern": ["error", { allowObjectPatternsAsParameters: true }], + + "@typescript-eslint/ban-ts-comment": "off", + "@typescript-eslint/no-this-alias": "off", + + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unsafe-member-access": "off", + "@typescript-eslint/no-unsafe-assignment": "off", + "@typescript-eslint/no-unsafe-argument": "off", + "@typescript-eslint/no-unsafe-call": "off", + "@typescript-eslint/no-unsafe-return": "off", + + "@typescript-eslint/no-base-to-string": "off", + "@typescript-eslint/restrict-plus-operands": "off", + "@typescript-eslint/no-implied-eval": "off", + "@typescript-eslint/unbound-method": "off", + "@typescript-eslint/no-unsafe-enum-comparison": "off", + "@typescript-eslint/no-for-in-array": "off", + "@typescript-eslint/only-throw-error": "off", + "@typescript-eslint/no-duplicate-type-constituents": "off", + "@typescript-eslint/no-empty-object-type": "off", + + // "@typescript-eslint/prefer-readonly-parameter-types": "error", + // "@typescript-eslint/no-unsafe-function-type": "off", + + "@stylistic/max-len": [ + "off", + { + code: 100, + comments: 130, + ignoreStrings: true, + ignoreTemplateLiterals: true, + ignoreComments: true, + }, + ], + + // "@stylistic/multiline-comment-style": ["error", "starred-block"], + "@stylistic/curly-newline": [ + "error", + { consistent: true, multiline: true }, + ], + // "@stylistic/object-property-newline": ["error", { allowAllPropertiesOnSameLine: true }], + // "@stylistic/object-property-newline": "error", + "@stylistic/one-var-declaration-per-line": "error", + + "@stylistic/array-bracket-newline": ["error", { multiline: true }], + "@stylistic/array-element-newline": [ + "error", + { consistent: true, multiline: true }, + ], + + "@stylistic/function-paren-newline": ["error", "multiline-arguments"], + + "@stylistic/array-bracket-spacing": "error", + "@stylistic/arrow-parens": "error", + "@stylistic/arrow-spacing": "error", + "@stylistic/block-spacing": "error", + "@stylistic/brace-style": "error", + "@stylistic/comma-dangle": "error", + "@stylistic/comma-spacing": "error", + "@stylistic/comma-style": "error", + "@stylistic/computed-property-spacing": "error", + "@stylistic/dot-location": "error", + "@stylistic/eol-last": "error", + "@stylistic/indent": ["error", 2, { VariableDeclarator: "first" }], + "@stylistic/indent-binary-ops": "error", + "@stylistic/key-spacing": "error", + "@stylistic/keyword-spacing": "error", + "@stylistic/lines-between-class-members": "error", + "@stylistic/max-statements-per-line": "error", + "@stylistic/member-delimiter-style": "error", + "@stylistic/multiline-ternary": "error", + "@stylistic/new-parens": "error", + "@stylistic/no-extra-parens": "error", + "@stylistic/no-floating-decimal": "error", + "@stylistic/no-mixed-operators": "error", + "@stylistic/no-mixed-spaces-and-tabs": "error", + "@stylistic/no-multi-spaces": "error", + "@stylistic/no-multiple-empty-lines": "error", + "@stylistic/no-tabs": "error", + "@stylistic/no-trailing-spaces": "error", + "@stylistic/no-whitespace-before-property": "error", + "@stylistic/object-curly-spacing": "error", + "@stylistic/operator-linebreak": [ + "error", + "after", + { overrides: { "?": "before", ":": "before" } }, + ], + "@stylistic/padded-blocks": "error", + "@stylistic/quote-props": "error", + "@stylistic/quotes": "error", + "@stylistic/rest-spread-spacing": "error", + "@stylistic/semi": "error", + "@stylistic/semi-spacing": "error", + "@stylistic/semi-style": ["error", "first"], + "@stylistic/space-before-blocks": "error", + "@stylistic/space-before-function-paren": "error", + "@stylistic/space-in-parens": "error", + "@stylistic/space-infix-ops": "error", + "@stylistic/space-unary-ops": "error", + "@stylistic/spaced-comment": "error", + "@stylistic/template-curly-spacing": "error", + "@stylistic/template-tag-spacing": "error", + "@stylistic/type-annotation-spacing": "error", + "@stylistic/type-generic-spacing": "error", + "@stylistic/type-named-tuple-spacing": "error", + "@stylistic/wrap-iife": "error", + "@stylistic/yield-star-spacing": "error", + }, + }, + { + rules: { + "@typescript-eslint/no-unused-vars": "error", + }, + files: ["test/**/*.ts"], + }, + { + plugins: { + "unused-imports": unusedImports, + }, + rules: { + "@typescript-eslint/no-unused-vars": "off", + "unused-imports/no-unused-imports": "error", + "unused-imports/no-unused-vars": [ + "error", + { + vars: "all", + varsIgnorePattern: "^_", + args: "after-used", + argsIgnorePattern: "^_", + }, + ], + }, + }, + + // Antfu + antfuLint, + { + rules: { + "antfu/consistent-chaining": "error", + "antfu/consistent-list-newline": "error", + "antfu/curly": "error", + "antfu/import-dedupe": "error", + "antfu/no-import-dist": "error", + "antfu/no-ts-export-equal": "error", + "antfu/top-level-function": "error", + }, + }, + + // Sort imports + { + plugins: { + "simple-import-sort": eslintPluginSimpleImportSort, + }, + rules: { + "simple-import-sort/imports": [ + "error", + { + // The default grouping, but with type imports first as a separate group. + groups: [ + ["^.*\\u0000$"], + ["^\\u0000"], + ["^node:"], + ["^@?\\w"], + ["^"], + ["^\\."], + ], + }, + ], + "simple-import-sort/exports": "error", + }, + }, +) diff --git a/src/lib/litegraph/imgs/elephant.gif b/src/lib/litegraph/imgs/elephant.gif new file mode 100755 index 0000000000..3bd28df3c0 Binary files /dev/null and b/src/lib/litegraph/imgs/elephant.gif differ diff --git a/src/lib/litegraph/imgs/mynodes.png b/src/lib/litegraph/imgs/mynodes.png new file mode 100755 index 0000000000..29ed2ff9cd Binary files /dev/null and b/src/lib/litegraph/imgs/mynodes.png differ diff --git a/src/lib/litegraph/imgs/node_graph_example.png b/src/lib/litegraph/imgs/node_graph_example.png new file mode 100755 index 0000000000..1ff51fac9a Binary files /dev/null and b/src/lib/litegraph/imgs/node_graph_example.png differ diff --git a/src/lib/litegraph/imgs/webglstudio.gif b/src/lib/litegraph/imgs/webglstudio.gif new file mode 100755 index 0000000000..7ba42947a7 Binary files /dev/null and b/src/lib/litegraph/imgs/webglstudio.gif differ diff --git a/src/lib/litegraph/lint-staged.config.js b/src/lib/litegraph/lint-staged.config.js new file mode 100644 index 0000000000..8dc7f8a743 --- /dev/null +++ b/src/lib/litegraph/lint-staged.config.js @@ -0,0 +1,17 @@ +export default { + "*.css": stagedFiles => `prettier --write ${stagedFiles.join(" ")}`, + + "*.js": stagedFiles => prettierAndEslint(stagedFiles), + + "*.{ts,mts}": stagedFiles => [ + ...prettierAndEslint(stagedFiles), + "tsc", + ], +} + +function prettierAndEslint(fileNames) { + return [ + `prettier --write ${fileNames.join(" ")}`, + `eslint --fix ${fileNames.join(" ")}`, + ] +} diff --git a/src/lib/litegraph/package-lock.json b/src/lib/litegraph/package-lock.json new file mode 100644 index 0000000000..a753121a72 --- /dev/null +++ b/src/lib/litegraph/package-lock.json @@ -0,0 +1,6046 @@ +{ + "name": "@comfyorg/litegraph", + "version": "0.17.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "@comfyorg/litegraph", + "version": "0.17.0", + "license": "MIT", + "devDependencies": { + "@eslint/js": "^9.21.0", + "@stylistic/eslint-plugin": "^2.13.0", + "@types/eslint__js": "^8.42.3", + "@types/node": "^22.13.9", + "eslint": "^9.21.0", + "eslint-plugin-antfu": "^3.1.0", + "eslint-plugin-jsdoc": "^50.6.3", + "eslint-plugin-simple-import-sort": "^12.1.1", + "eslint-plugin-unicorn": "^57.0.0", + "eslint-plugin-unused-imports": "^4.1.4", + "globals": "^15.12.0", + "husky": "^9.1.7", + "jsdom": "^25.0.1", + "lint-staged": "^15.2.10", + "prettier": "^3.3.3", + "ts-node": "^10.9.2", + "typescript": "^5.8.3", + "typescript-eslint": "^8.26.0", + "vite": "^6.3.5", + "vite-plugin-dts": "^4.5.4", + "vitest": "^3.1.3" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", + "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.25.9", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.2.tgz", + "integrity": "sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.27.1" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/types": { + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz", + "integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@cspotcode/source-map-support": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", + "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "0.3.9" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, + "node_modules/@es-joy/jsdoccomment": { + "version": "0.49.0", + "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.49.0.tgz", + "integrity": "sha512-xjZTSFgECpb9Ohuk5yMX5RhUEbfeQcuOp8IF60e+wyzWEF0M5xeSgqsfLtvPEX8BIyOX9saZqzuGPmZ8oWc+5Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "comment-parser": "1.4.1", + "esquery": "^1.6.0", + "jsdoc-type-pratt-parser": "~4.1.0" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz", + "integrity": "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.0.tgz", + "integrity": "sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.0.tgz", + "integrity": "sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.0.tgz", + "integrity": "sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.0.tgz", + "integrity": "sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.0.tgz", + "integrity": "sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.0.tgz", + "integrity": "sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.0.tgz", + "integrity": "sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.0.tgz", + "integrity": "sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.0.tgz", + "integrity": "sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.0.tgz", + "integrity": "sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.0.tgz", + "integrity": "sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.0.tgz", + "integrity": "sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.0.tgz", + "integrity": "sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.0.tgz", + "integrity": "sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.0.tgz", + "integrity": "sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz", + "integrity": "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.0.tgz", + "integrity": "sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.0.tgz", + "integrity": "sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.0.tgz", + "integrity": "sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.0.tgz", + "integrity": "sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.0.tgz", + "integrity": "sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.0.tgz", + "integrity": "sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.0.tgz", + "integrity": "sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.0.tgz", + "integrity": "sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", + "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "eslint-visitor-keys": "^3.4.3" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz", + "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/config-array": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz", + "integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/object-schema": "^2.1.6", + "debug": "^4.3.1", + "minimatch": "^3.1.2" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/config-array/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@eslint/core": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz", + "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.0.tgz", + "integrity": "sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^10.0.1", + "globals": "^14.0.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/eslintrc/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@eslint/eslintrc/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@eslint/js": { + "version": "9.21.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.21.0.tgz", + "integrity": "sha512-BqStZ3HX8Yz6LvsF5ByXYrtigrV5AXADWLAGc7PH/1SxOb7/FIYYMszZZWiUou/GB9P2lXWk2SV4d+Z8h0nknw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/object-schema": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz", + "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/plugin-kit": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz", + "integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.12.0", + "levn": "^0.4.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@humanfs/core": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", + "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/node": { + "version": "0.16.6", + "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz", + "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@humanfs/core": "^0.19.1", + "@humanwhocodes/retry": "^0.3.0" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz", + "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/retry": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz", + "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@microsoft/api-extractor": { + "version": "7.52.8", + "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.52.8.tgz", + "integrity": "sha512-cszYIcjiNscDoMB1CIKZ3My61+JOhpERGlGr54i6bocvGLrcL/wo9o+RNXMBrb7XgLtKaizZWUpqRduQuHQLdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@microsoft/api-extractor-model": "7.30.6", + "@microsoft/tsdoc": "~0.15.1", + "@microsoft/tsdoc-config": "~0.17.1", + "@rushstack/node-core-library": "5.13.1", + "@rushstack/rig-package": "0.5.3", + "@rushstack/terminal": "0.15.3", + "@rushstack/ts-command-line": "5.0.1", + "lodash": "~4.17.15", + "minimatch": "~3.0.3", + "resolve": "~1.22.1", + "semver": "~7.5.4", + "source-map": "~0.6.1", + "typescript": "5.8.2" + }, + "bin": { + "api-extractor": "bin/api-extractor" + } + }, + "node_modules/@microsoft/api-extractor-model": { + "version": "7.30.6", + "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.30.6.tgz", + "integrity": "sha512-znmFn69wf/AIrwHya3fxX6uB5etSIn6vg4Q4RB/tb5VDDs1rqREc+AvMC/p19MUN13CZ7+V/8pkYPTj7q8tftg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@microsoft/tsdoc": "~0.15.1", + "@microsoft/tsdoc-config": "~0.17.1", + "@rushstack/node-core-library": "5.13.1" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/minimatch": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", + "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "license": "ISC", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/typescript": { + "version": "5.8.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz", + "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/@microsoft/tsdoc": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.1.tgz", + "integrity": "sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@microsoft/tsdoc-config": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.17.1.tgz", + "integrity": "sha512-UtjIFe0C6oYgTnad4q1QP4qXwLhe6tIpNTRStJ2RZEPIkqQPREAwE5spzVxsdn9UaEMUqhh0AqSx3X4nWAKXWw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@microsoft/tsdoc": "0.15.1", + "ajv": "~8.12.0", + "jju": "~1.4.0", + "resolve": "~1.22.2" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", + "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz", + "integrity": "sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.2.tgz", + "integrity": "sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.2.tgz", + "integrity": "sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.2.tgz", + "integrity": "sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.2.tgz", + "integrity": "sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.2.tgz", + "integrity": "sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.2.tgz", + "integrity": "sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.2.tgz", + "integrity": "sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.2.tgz", + "integrity": "sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.2.tgz", + "integrity": "sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loongarch64-gnu": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.2.tgz", + "integrity": "sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.2.tgz", + "integrity": "sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.2.tgz", + "integrity": "sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-musl": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.2.tgz", + "integrity": "sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.2.tgz", + "integrity": "sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.2.tgz", + "integrity": "sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.2.tgz", + "integrity": "sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.2.tgz", + "integrity": "sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.2.tgz", + "integrity": "sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.2.tgz", + "integrity": "sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rushstack/node-core-library": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.13.1.tgz", + "integrity": "sha512-5yXhzPFGEkVc9Fu92wsNJ9jlvdwz4RNb2bMso+/+TH0nMm1jDDDsOIf4l8GAkPxGuwPw5DH24RliWVfSPhlW/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "~8.13.0", + "ajv-draft-04": "~1.0.0", + "ajv-formats": "~3.0.1", + "fs-extra": "~11.3.0", + "import-lazy": "~4.0.0", + "jju": "~1.4.0", + "resolve": "~1.22.1", + "semver": "~7.5.4" + }, + "peerDependencies": { + "@types/node": "*" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@rushstack/node-core-library/node_modules/ajv": { + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz", + "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.4.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "license": "ISC", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@rushstack/rig-package": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.5.3.tgz", + "integrity": "sha512-olzSSjYrvCNxUFZowevC3uz8gvKr3WTpHQ7BkpjtRpA3wK+T0ybep/SRUMfr195gBzJm5gaXw0ZMgjIyHqJUow==", + "dev": true, + "license": "MIT", + "dependencies": { + "resolve": "~1.22.1", + "strip-json-comments": "~3.1.1" + } + }, + "node_modules/@rushstack/terminal": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.15.3.tgz", + "integrity": "sha512-DGJ0B2Vm69468kZCJkPj3AH5nN+nR9SPmC0rFHtzsS4lBQ7/dgOwtwVxYP7W9JPDMuRBkJ4KHmWKr036eJsj9g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rushstack/node-core-library": "5.13.1", + "supports-color": "~8.1.1" + }, + "peerDependencies": { + "@types/node": "*" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@rushstack/terminal/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "node_modules/@rushstack/ts-command-line": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-5.0.1.tgz", + "integrity": "sha512-bsbUucn41UXrQK7wgM8CNM/jagBytEyJqXw/umtI8d68vFm1Jwxh1OtLrlW7uGZgjCWiiPH6ooUNa1aVsuVr3Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rushstack/terminal": "0.15.3", + "@types/argparse": "1.0.38", + "argparse": "~1.0.9", + "string-argv": "~0.3.1" + } + }, + "node_modules/@stylistic/eslint-plugin": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.13.0.tgz", + "integrity": "sha512-RnO1SaiCFHn666wNz2QfZEFxvmiNRqhzaMXHXxXXKt+MEP7aajlPxUSMIQpKAaJfverpovEYqjBOXDq6dDcaOQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/utils": "^8.13.0", + "eslint-visitor-keys": "^4.2.0", + "espree": "^10.3.0", + "estraverse": "^5.3.0", + "picomatch": "^4.0.2" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "peerDependencies": { + "eslint": ">=8.40.0" + } + }, + "node_modules/@stylistic/eslint-plugin/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/@tsconfig/node10": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", + "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tsconfig/node12": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", + "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tsconfig/node14": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", + "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tsconfig/node16": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", + "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/argparse": { + "version": "1.0.38", + "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", + "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/eslint": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", + "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "*", + "@types/json-schema": "*" + } + }, + "node_modules/@types/eslint__js": { + "version": "8.42.3", + "resolved": "https://registry.npmjs.org/@types/eslint__js/-/eslint__js-8.42.3.tgz", + "integrity": "sha512-alfG737uhmPdnvkrLdZLcEKJ/B8s9Y4hrZ+YAdzUeoArBlSUERA2E87ROfOaS4jd/C45fzOoZzidLc1IPwLqOw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/eslint": "*" + } + }, + "node_modules/@types/estree": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", + "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/node": { + "version": "22.13.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.9.tgz", + "integrity": "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, + "node_modules/@types/normalize-package-data": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz", + "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.26.0.tgz", + "integrity": "sha512-cLr1J6pe56zjKYajK6SSSre6nl1Gj6xDp1TY0trpgPzjVbgDwd09v2Ws37LABxzkicmUjhEeg/fAUjPJJB1v5Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/regexpp": "^4.10.0", + "@typescript-eslint/scope-manager": "8.26.0", + "@typescript-eslint/type-utils": "8.26.0", + "@typescript-eslint/utils": "8.26.0", + "@typescript-eslint/visitor-keys": "8.26.0", + "graphemer": "^1.4.0", + "ignore": "^5.3.1", + "natural-compare": "^1.4.0", + "ts-api-utils": "^2.0.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", + "eslint": "^8.57.0 || ^9.0.0", + "typescript": ">=4.8.4 <5.9.0" + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.26.0.tgz", + "integrity": "sha512-mNtXP9LTVBy14ZF3o7JG69gRPBK/2QWtQd0j0oH26HcY/foyJJau6pNUez7QrM5UHnSvwlQcJXKsk0I99B9pOA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/scope-manager": "8.26.0", + "@typescript-eslint/types": "8.26.0", + "@typescript-eslint/typescript-estree": "8.26.0", + "@typescript-eslint/visitor-keys": "8.26.0", + "debug": "^4.3.4" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0", + "typescript": ">=4.8.4 <5.9.0" + } + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.26.0.tgz", + "integrity": "sha512-E0ntLvsfPqnPwng8b8y4OGuzh/iIOm2z8U3S9zic2TeMLW61u5IH2Q1wu0oSTkfrSzwbDJIB/Lm8O3//8BWMPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.26.0", + "@typescript-eslint/visitor-keys": "8.26.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.26.0.tgz", + "integrity": "sha512-ruk0RNChLKz3zKGn2LwXuVoeBcUMh+jaqzN461uMMdxy5H9epZqIBtYj7UiPXRuOpaALXGbmRuZQhmwHhaS04Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/typescript-estree": "8.26.0", + "@typescript-eslint/utils": "8.26.0", + "debug": "^4.3.4", + "ts-api-utils": "^2.0.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0", + "typescript": ">=4.8.4 <5.9.0" + } + }, + "node_modules/@typescript-eslint/types": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.26.0.tgz", + "integrity": "sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.26.0.tgz", + "integrity": "sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.26.0", + "@typescript-eslint/visitor-keys": "8.26.0", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "is-glob": "^4.0.3", + "minimatch": "^9.0.4", + "semver": "^7.6.0", + "ts-api-utils": "^2.0.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "typescript": ">=4.8.4 <5.9.0" + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.26.0.tgz", + "integrity": "sha512-2L2tU3FVwhvU14LndnQCA2frYC8JnPDVKyQtWFPf8IYFMt/ykEN1bPolNhNbCVgOmdzTlWdusCTKA/9nKrf8Ig==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.4.0", + "@typescript-eslint/scope-manager": "8.26.0", + "@typescript-eslint/types": "8.26.0", + "@typescript-eslint/typescript-estree": "8.26.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0", + "typescript": ">=4.8.4 <5.9.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.26.0.tgz", + "integrity": "sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.26.0", + "eslint-visitor-keys": "^4.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@vitest/expect": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.1.3.tgz", + "integrity": "sha512-7FTQQuuLKmN1Ig/h+h/GO+44Q1IlglPlR2es4ab7Yvfx+Uk5xsv+Ykk+MEt/M2Yn/xGmzaLKxGw2lgy2bwuYqg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/spy": "3.1.3", + "@vitest/utils": "3.1.3", + "chai": "^5.2.0", + "tinyrainbow": "^2.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/mocker": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.1.3.tgz", + "integrity": "sha512-PJbLjonJK82uCWHjzgBJZuR7zmAOrSvKk1QBxrennDIgtH4uK0TB1PvYmc0XBCigxxtiAVPfWtAdy4lpz8SQGQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/spy": "3.1.3", + "estree-walker": "^3.0.3", + "magic-string": "^0.30.17" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "msw": "^2.4.9", + "vite": "^5.0.0 || ^6.0.0" + }, + "peerDependenciesMeta": { + "msw": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, + "node_modules/@vitest/mocker/node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0" + } + }, + "node_modules/@vitest/pretty-format": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.1.3.tgz", + "integrity": "sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyrainbow": "^2.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/runner": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.1.3.tgz", + "integrity": "sha512-Tae+ogtlNfFei5DggOsSUvkIaSuVywujMj6HzR97AHK6XK8i3BuVyIifWAm/sE3a15lF5RH9yQIrbXYuo0IFyA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/utils": "3.1.3", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/snapshot": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.1.3.tgz", + "integrity": "sha512-XVa5OPNTYUsyqG9skuUkFzAeFnEzDp8hQu7kZ0N25B1+6KjGm4hWLtURyBbsIAOekfWQ7Wuz/N/XXzgYO3deWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "3.1.3", + "magic-string": "^0.30.17", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/spy": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.1.3.tgz", + "integrity": "sha512-x6w+ctOEmEXdWaa6TO4ilb7l9DxPR5bwEb6hILKuxfU1NqWT2mpJD9NJN7t3OTfxmVlOMrvtoFJGdgyzZ605lQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyspy": "^3.0.2" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.1.3.tgz", + "integrity": "sha512-2Ltrpht4OmHO9+c/nmHtF09HWiyWdworqnHIwjfvDyWjuwKbdkcS9AnhsDn+8E2RM4x++foD1/tNuLPVvWG1Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "3.1.3", + "loupe": "^3.1.3", + "tinyrainbow": "^2.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@volar/language-core": { + "version": "2.4.13", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.13.tgz", + "integrity": "sha512-MnQJ7eKchJx5Oz+YdbqyFUk8BN6jasdJv31n/7r6/WwlOOv7qzvot6B66887l2ST3bUW4Mewml54euzpJWA6bg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/source-map": "2.4.13" + } + }, + "node_modules/@volar/source-map": { + "version": "2.4.13", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.13.tgz", + "integrity": "sha512-l/EBcc2FkvHgz2ZxV+OZK3kMSroMr7nN3sZLF2/f6kWW66q8+tEL4giiYyFjt0BcubqJhBt6soYIrAPhg/Yr+Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@volar/typescript": { + "version": "2.4.13", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.13.tgz", + "integrity": "sha512-Ukz4xv84swJPupZeoFsQoeJEOm7U9pqsEnaGGgt5ni3SCTa22m8oJP5Nng3Wed7Uw5RBELdLxxORX8YhJPyOgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/language-core": "2.4.13", + "path-browserify": "^1.0.1", + "vscode-uri": "^3.0.8" + } + }, + "node_modules/@vue/compiler-core": { + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.14.tgz", + "integrity": "sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.27.2", + "@vue/shared": "3.5.14", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.1" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.14.tgz", + "integrity": "sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-core": "3.5.14", + "@vue/shared": "3.5.14" + } + }, + "node_modules/@vue/compiler-vue2": { + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz", + "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==", + "dev": true, + "license": "MIT", + "dependencies": { + "de-indent": "^1.0.2", + "he": "^1.2.0" + } + }, + "node_modules/@vue/language-core": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.0.tgz", + "integrity": "sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/language-core": "~2.4.11", + "@vue/compiler-dom": "^3.5.0", + "@vue/compiler-vue2": "^2.7.16", + "@vue/shared": "^3.5.0", + "alien-signals": "^0.4.9", + "minimatch": "^9.0.3", + "muggle-string": "^0.4.1", + "path-browserify": "^1.0.1" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@vue/shared": { + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.14.tgz", + "integrity": "sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/acorn": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", + "dev": true, + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/acorn-walk": { + "version": "8.3.3", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz", + "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==", + "dev": true, + "license": "MIT", + "dependencies": { + "acorn": "^8.11.0" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/agent-base": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", + "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ajv-draft-04": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz", + "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "ajv": "^8.5.0" + }, + "peerDependenciesMeta": { + "ajv": { + "optional": true + } + } + }, + "node_modules/ajv-formats": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz", + "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "^8.0.0" + }, + "peerDependencies": { + "ajv": "^8.0.0" + }, + "peerDependenciesMeta": { + "ajv": { + "optional": true + } + } + }, + "node_modules/alien-signals": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.4.14.tgz", + "integrity": "sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/ansi-escapes": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz", + "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==", + "dev": true, + "license": "MIT", + "dependencies": { + "environment": "^1.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/are-docs-informative": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz", + "integrity": "sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + } + }, + "node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true, + "license": "MIT" + }, + "node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "license": "MIT", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/assertion-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + } + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", + "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", + "update-browserslist-db": "^1.1.1" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/builtin-modules": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-4.0.0.tgz", + "integrity": "sha512-p1n8zyCkt1BVrKNFymOHjcDSAl7oq/gUvfgULv2EblgpPVQlQr9yHnWjg9IJ2MhfwPqiYqMMrr01OY7yQoK2yA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cac": { + "version": "6.7.14", + "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", + "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001701", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001701.tgz", + "integrity": "sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/chai": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/chai/-/chai-5.2.0.tgz", + "integrity": "sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==", + "dev": true, + "license": "MIT", + "dependencies": { + "assertion-error": "^2.0.1", + "check-error": "^2.1.1", + "deep-eql": "^5.0.1", + "loupe": "^3.1.0", + "pathval": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/check-error": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", + "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 16" + } + }, + "node_modules/ci-info": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz", + "integrity": "sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/sibiraj-s" + } + ], + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/clean-regexp": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz", + "integrity": "sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==", + "dev": true, + "license": "MIT", + "dependencies": { + "escape-string-regexp": "^1.0.5" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/clean-regexp/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/cli-cursor": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz", + "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==", + "dev": true, + "license": "MIT", + "dependencies": { + "restore-cursor": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cli-truncate": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz", + "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==", + "dev": true, + "license": "MIT", + "dependencies": { + "slice-ansi": "^5.0.0", + "string-width": "^7.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/colorette": { + "version": "2.0.20", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", + "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", + "dev": true, + "license": "MIT" + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/commander": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", + "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/comment-parser": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.1.tgz", + "integrity": "sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 12.0.0" + } + }, + "node_modules/compare-versions": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.1.tgz", + "integrity": "sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==", + "dev": true, + "license": "MIT" + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true, + "license": "MIT" + }, + "node_modules/confbox": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz", + "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/core-js-compat": { + "version": "3.40.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.40.0.tgz", + "integrity": "sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.24.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, + "node_modules/create-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", + "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/cross-spawn": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/cssstyle": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz", + "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==", + "dev": true, + "license": "MIT", + "dependencies": { + "rrweb-cssom": "^0.7.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/data-urls": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", + "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==", + "dev": true, + "license": "MIT", + "dependencies": { + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/de-indent": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", + "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==", + "dev": true, + "license": "MIT" + }, + "node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/decimal.js": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", + "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", + "dev": true, + "license": "MIT" + }, + "node_modules/deep-eql": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", + "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.3.1" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.5.105", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.105.tgz", + "integrity": "sha512-ccp7LocdXx3yBhwiG0qTQ7XFrK48Ua2pxIxBdJO8cbddp/MvbBtPFzvnTchtyHQTsgqqczO8cdmAIbpMa0u2+g==", + "dev": true, + "license": "ISC" + }, + "node_modules/emoji-regex": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz", + "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==", + "dev": true, + "license": "MIT" + }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/environment": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz", + "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/es-module-lexer": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz", + "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==", + "dev": true, + "license": "MIT" + }, + "node_modules/esbuild": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz", + "integrity": "sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.25.0", + "@esbuild/android-arm": "0.25.0", + "@esbuild/android-arm64": "0.25.0", + "@esbuild/android-x64": "0.25.0", + "@esbuild/darwin-arm64": "0.25.0", + "@esbuild/darwin-x64": "0.25.0", + "@esbuild/freebsd-arm64": "0.25.0", + "@esbuild/freebsd-x64": "0.25.0", + "@esbuild/linux-arm": "0.25.0", + "@esbuild/linux-arm64": "0.25.0", + "@esbuild/linux-ia32": "0.25.0", + "@esbuild/linux-loong64": "0.25.0", + "@esbuild/linux-mips64el": "0.25.0", + "@esbuild/linux-ppc64": "0.25.0", + "@esbuild/linux-riscv64": "0.25.0", + "@esbuild/linux-s390x": "0.25.0", + "@esbuild/linux-x64": "0.25.0", + "@esbuild/netbsd-arm64": "0.25.0", + "@esbuild/netbsd-x64": "0.25.0", + "@esbuild/openbsd-arm64": "0.25.0", + "@esbuild/openbsd-x64": "0.25.0", + "@esbuild/sunos-x64": "0.25.0", + "@esbuild/win32-arm64": "0.25.0", + "@esbuild/win32-ia32": "0.25.0", + "@esbuild/win32-x64": "0.25.0" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint": { + "version": "9.21.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.21.0.tgz", + "integrity": "sha512-KjeihdFqTPhOMXTt7StsDxriV4n66ueuF/jfPNC3j/lduHwr/ijDwJMsF+wyMJethgiKi5wniIE243vi07d3pg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.12.1", + "@eslint/config-array": "^0.19.2", + "@eslint/core": "^0.12.0", + "@eslint/eslintrc": "^3.3.0", + "@eslint/js": "9.21.0", + "@eslint/plugin-kit": "^0.2.7", + "@humanfs/node": "^0.16.6", + "@humanwhocodes/module-importer": "^1.0.1", + "@humanwhocodes/retry": "^0.4.2", + "@types/estree": "^1.0.6", + "@types/json-schema": "^7.0.15", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.6", + "debug": "^4.3.2", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^8.2.0", + "eslint-visitor-keys": "^4.2.0", + "espree": "^10.3.0", + "esquery": "^1.5.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^8.0.0", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } + } + }, + "node_modules/eslint-plugin-antfu": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-antfu/-/eslint-plugin-antfu-3.1.0.tgz", + "integrity": "sha512-BKlJcpIG8OGyU5JwQCdyTGaLuRgItheEYinhNroCx3bcuz2bCSYK0eNzJvPy2TY8yyz0uSSRxr5KHuQ1WOdOKg==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "eslint": "*" + } + }, + "node_modules/eslint-plugin-jsdoc": { + "version": "50.6.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.6.3.tgz", + "integrity": "sha512-NxbJyt1M5zffPcYZ8Nb53/8nnbIScmiLAMdoe0/FAszwb7lcSiX3iYBTsuF7RV84dZZJC8r3NghomrUXsmWvxQ==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@es-joy/jsdoccomment": "~0.49.0", + "are-docs-informative": "^0.0.2", + "comment-parser": "1.4.1", + "debug": "^4.3.6", + "escape-string-regexp": "^4.0.0", + "espree": "^10.1.0", + "esquery": "^1.6.0", + "parse-imports": "^2.1.1", + "semver": "^7.6.3", + "spdx-expression-parse": "^4.0.0", + "synckit": "^0.9.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0" + } + }, + "node_modules/eslint-plugin-simple-import-sort": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz", + "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "eslint": ">=5.0.0" + } + }, + "node_modules/eslint-plugin-unicorn": { + "version": "57.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-57.0.0.tgz", + "integrity": "sha512-zUYYa6zfNdTeG9BISWDlcLmz16c+2Ck2o5ZDHh0UzXJz3DEP7xjmlVDTzbyV0W+XksgZ0q37WEWzN2D2Ze+g9Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.25.9", + "@eslint-community/eslint-utils": "^4.4.1", + "ci-info": "^4.1.0", + "clean-regexp": "^1.0.0", + "core-js-compat": "^3.40.0", + "esquery": "^1.6.0", + "globals": "^15.15.0", + "indent-string": "^5.0.0", + "is-builtin-module": "^4.0.0", + "jsesc": "^3.1.0", + "pluralize": "^8.0.0", + "read-package-up": "^11.0.0", + "regexp-tree": "^0.1.27", + "regjsparser": "^0.12.0", + "semver": "^7.7.1", + "strip-indent": "^4.0.0" + }, + "engines": { + "node": ">=18.18" + }, + "funding": { + "url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1" + }, + "peerDependencies": { + "eslint": ">=9.20.0" + } + }, + "node_modules/eslint-plugin-unused-imports": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.4.tgz", + "integrity": "sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@typescript-eslint/eslint-plugin": "^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0", + "eslint": "^9.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "@typescript-eslint/eslint-plugin": { + "optional": true + } + } + }, + "node_modules/eslint-scope": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz", + "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", + "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/eslint/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/eslint/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/espree": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz", + "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "acorn": "^8.14.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esquery": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", + "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true, + "license": "MIT" + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "dev": true, + "license": "MIT" + }, + "node_modules/execa": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz", + "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cross-spawn": "^7.0.3", + "get-stream": "^8.0.1", + "human-signals": "^5.0.0", + "is-stream": "^3.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^5.1.0", + "onetime": "^6.0.0", + "signal-exit": "^4.1.0", + "strip-final-newline": "^3.0.0" + }, + "engines": { + "node": ">=16.17" + }, + "funding": { + "url": "https://github.com/sindresorhus/execa?sponsor=1" + } + }, + "node_modules/expect-type": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.1.tgz", + "integrity": "sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/exsolve": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.5.tgz", + "integrity": "sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-glob": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true, + "license": "MIT" + }, + "node_modules/fastq": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz", + "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "license": "MIT", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/find-up-simple": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/find-up-simple/-/find-up-simple-1.0.0.tgz", + "integrity": "sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "license": "MIT", + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/flatted": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", + "dev": true, + "license": "ISC" + }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "dev": true, + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fs-extra": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", + "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-east-asian-width": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz", + "integrity": "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/get-stream": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", + "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/globals": { + "version": "15.15.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz", + "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true, + "license": "MIT" + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true, + "license": "MIT", + "bin": { + "he": "bin/he" + } + }, + "node_modules/hosted-git-info": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz", + "integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==", + "dev": true, + "license": "ISC", + "dependencies": { + "lru-cache": "^10.0.1" + }, + "engines": { + "node": "^16.14.0 || >=18.0.0" + } + }, + "node_modules/html-encoding-sniffer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz", + "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "whatwg-encoding": "^3.1.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", + "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/https-proxy-agent": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz", + "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.0.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/human-signals": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz", + "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=16.17.0" + } + }, + "node_modules/husky": { + "version": "9.1.7", + "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz", + "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==", + "dev": true, + "license": "MIT", + "bin": { + "husky": "bin.js" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/typicode" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/import-fresh": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/import-lazy": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", + "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.19" + } + }, + "node_modules/indent-string": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", + "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/index-to-position": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/index-to-position/-/index-to-position-0.1.2.tgz", + "integrity": "sha512-MWDKS3AS1bGCHLBA2VLImJz42f7bJh8wQsTGCzI3j519/CASStoDONUBVz2I/VID0MpiX3SGSnbOD2xUalbE5g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-builtin-module": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-4.0.0.tgz", + "integrity": "sha512-rWP3AMAalQSesXO8gleROyL2iKU73SX5Er66losQn9rWOWL4Gef0a/xOEOVqjWGMuR2vHG3FJ8UUmT700O8oFg==", + "dev": true, + "license": "MIT", + "dependencies": { + "builtin-modules": "^4.0.0" + }, + "engines": { + "node": ">=18.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-core-module": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz", + "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/is-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz", + "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true, + "license": "ISC" + }, + "node_modules/jju": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz", + "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==", + "dev": true, + "license": "MIT" + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/js-yaml/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/jsdoc-type-pratt-parser": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz", + "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/jsdom": { + "version": "25.0.1", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz", + "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssstyle": "^4.1.0", + "data-urls": "^5.0.0", + "decimal.js": "^10.4.3", + "form-data": "^4.0.0", + "html-encoding-sniffer": "^4.0.0", + "http-proxy-agent": "^7.0.2", + "https-proxy-agent": "^7.0.5", + "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.12", + "parse5": "^7.1.2", + "rrweb-cssom": "^0.7.1", + "saxes": "^6.0.0", + "symbol-tree": "^3.2.4", + "tough-cookie": "^5.0.0", + "w3c-xmlserializer": "^5.0.0", + "webidl-conversions": "^7.0.0", + "whatwg-encoding": "^3.1.1", + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.0.0", + "ws": "^8.18.0", + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "canvas": "^2.11.2" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, + "node_modules/jsesc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "json-buffer": "3.0.1" + } + }, + "node_modules/kolorist": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz", + "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/lilconfig": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", + "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/lint-staged": { + "version": "15.2.10", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.10.tgz", + "integrity": "sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "~5.3.0", + "commander": "~12.1.0", + "debug": "~4.3.6", + "execa": "~8.0.1", + "lilconfig": "~3.1.2", + "listr2": "~8.2.4", + "micromatch": "~4.0.8", + "pidtree": "~0.6.0", + "string-argv": "~0.3.2", + "yaml": "~2.5.0" + }, + "bin": { + "lint-staged": "bin/lint-staged.js" + }, + "engines": { + "node": ">=18.12.0" + }, + "funding": { + "url": "https://opencollective.com/lint-staged" + } + }, + "node_modules/lint-staged/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/listr2": { + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.5.tgz", + "integrity": "sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cli-truncate": "^4.0.0", + "colorette": "^2.0.20", + "eventemitter3": "^5.0.1", + "log-update": "^6.1.0", + "rfdc": "^1.4.1", + "wrap-ansi": "^9.0.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/local-pkg": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz", + "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "mlly": "^1.7.4", + "pkg-types": "^2.0.1", + "quansync": "^0.2.8" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true, + "license": "MIT" + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/log-update": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz", + "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-escapes": "^7.0.0", + "cli-cursor": "^5.0.0", + "slice-ansi": "^7.1.0", + "strip-ansi": "^7.1.0", + "wrap-ansi": "^9.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-update/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/log-update/node_modules/is-fullwidth-code-point": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz", + "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==", + "dev": true, + "license": "MIT", + "dependencies": { + "get-east-asian-width": "^1.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-update/node_modules/slice-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz", + "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "is-fullwidth-code-point": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/loupe": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz", + "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==", + "dev": true, + "license": "MIT" + }, + "node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/magic-string": { + "version": "0.30.17", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", + "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, + "node_modules/make-error": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", + "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", + "dev": true, + "license": "ISC" + }, + "node_modules/merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true, + "license": "MIT" + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mimic-fn": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", + "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/mimic-function": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz", + "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/min-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/minimatch/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/mlly": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz", + "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "acorn": "^8.14.0", + "pathe": "^2.0.1", + "pkg-types": "^1.3.0", + "ufo": "^1.5.4" + } + }, + "node_modules/mlly/node_modules/confbox": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz", + "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==", + "dev": true, + "license": "MIT" + }, + "node_modules/mlly/node_modules/pkg-types": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz", + "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "confbox": "^0.1.8", + "mlly": "^1.7.4", + "pathe": "^2.0.1" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/muggle-string": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz", + "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/nanoid": { + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true, + "license": "MIT" + }, + "node_modules/node-releases": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "dev": true, + "license": "MIT" + }, + "node_modules/normalize-package-data": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.2.tgz", + "integrity": "sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "hosted-git-info": "^7.0.0", + "semver": "^7.3.5", + "validate-npm-package-license": "^3.0.4" + }, + "engines": { + "node": "^16.14.0 || >=18.0.0" + } + }, + "node_modules/npm-run-path": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^4.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/npm-run-path/node_modules/path-key": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz", + "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/nwsapi": { + "version": "2.2.13", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz", + "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/onetime": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz", + "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "mimic-fn": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/optionator": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", + "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", + "dev": true, + "license": "MIT", + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-imports": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/parse-imports/-/parse-imports-2.2.1.tgz", + "integrity": "sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==", + "dev": true, + "license": "Apache-2.0 AND MIT", + "dependencies": { + "es-module-lexer": "^1.5.3", + "slashes": "^3.0.12" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/parse-json": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-8.1.0.tgz", + "integrity": "sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.22.13", + "index-to-position": "^0.1.2", + "type-fest": "^4.7.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parse5": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", + "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "entities": "^4.5.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", + "dev": true, + "license": "MIT" + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, + "license": "MIT" + }, + "node_modules/pathe": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", + "dev": true, + "license": "MIT" + }, + "node_modules/pathval": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz", + "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.16" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pidtree": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz", + "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==", + "dev": true, + "license": "MIT", + "bin": { + "pidtree": "bin/pidtree.js" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/pkg-types": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz", + "integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==", + "dev": true, + "license": "MIT", + "dependencies": { + "confbox": "^0.2.1", + "exsolve": "^1.0.1", + "pathe": "^2.0.3" + } + }, + "node_modules/pluralize": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz", + "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss": { + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.8", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/quansync": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz", + "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/antfu" + }, + { + "type": "individual", + "url": "https://github.com/sponsors/sxzz" + } + ], + "license": "MIT" + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/read-package-up": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/read-package-up/-/read-package-up-11.0.0.tgz", + "integrity": "sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "find-up-simple": "^1.0.0", + "read-pkg": "^9.0.0", + "type-fest": "^4.6.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/read-pkg": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-9.0.1.tgz", + "integrity": "sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/normalize-package-data": "^2.4.3", + "normalize-package-data": "^6.0.0", + "parse-json": "^8.0.0", + "type-fest": "^4.6.0", + "unicorn-magic": "^0.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/regexp-tree": { + "version": "0.1.27", + "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz", + "integrity": "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==", + "dev": true, + "license": "MIT", + "bin": { + "regexp-tree": "bin/regexp-tree" + } + }, + "node_modules/regjsparser": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz", + "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "jsesc": "~3.0.2" + }, + "bin": { + "regjsparser": "bin/parser" + } + }, + "node_modules/regjsparser/node_modules/jsesc": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", + "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-core-module": "^2.16.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/restore-cursor": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz", + "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==", + "dev": true, + "license": "MIT", + "dependencies": { + "onetime": "^7.0.0", + "signal-exit": "^4.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/restore-cursor/node_modules/onetime": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz", + "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "mimic-function": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/reusify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", + "dev": true, + "license": "MIT", + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/rfdc": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz", + "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==", + "dev": true, + "license": "MIT" + }, + "node_modules/rollup": { + "version": "4.40.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.2.tgz", + "integrity": "sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.7" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.40.2", + "@rollup/rollup-android-arm64": "4.40.2", + "@rollup/rollup-darwin-arm64": "4.40.2", + "@rollup/rollup-darwin-x64": "4.40.2", + "@rollup/rollup-freebsd-arm64": "4.40.2", + "@rollup/rollup-freebsd-x64": "4.40.2", + "@rollup/rollup-linux-arm-gnueabihf": "4.40.2", + "@rollup/rollup-linux-arm-musleabihf": "4.40.2", + "@rollup/rollup-linux-arm64-gnu": "4.40.2", + "@rollup/rollup-linux-arm64-musl": "4.40.2", + "@rollup/rollup-linux-loongarch64-gnu": "4.40.2", + "@rollup/rollup-linux-powerpc64le-gnu": "4.40.2", + "@rollup/rollup-linux-riscv64-gnu": "4.40.2", + "@rollup/rollup-linux-riscv64-musl": "4.40.2", + "@rollup/rollup-linux-s390x-gnu": "4.40.2", + "@rollup/rollup-linux-x64-gnu": "4.40.2", + "@rollup/rollup-linux-x64-musl": "4.40.2", + "@rollup/rollup-win32-arm64-msvc": "4.40.2", + "@rollup/rollup-win32-ia32-msvc": "4.40.2", + "@rollup/rollup-win32-x64-msvc": "4.40.2", + "fsevents": "~2.3.2" + } + }, + "node_modules/rrweb-cssom": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz", + "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==", + "dev": true, + "license": "MIT" + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true, + "license": "MIT" + }, + "node_modules/saxes": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", + "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", + "dev": true, + "license": "ISC", + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=v12.22.7" + } + }, + "node_modules/semver": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==", + "dev": true, + "license": "ISC" + }, + "node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/slashes": { + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/slashes/-/slashes-3.0.12.tgz", + "integrity": "sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==", + "dev": true, + "license": "ISC" + }, + "node_modules/slice-ansi": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz", + "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.0.0", + "is-fullwidth-code-point": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/spdx-correct": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz", + "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "spdx-expression-parse": "^3.0.0", + "spdx-license-ids": "^3.0.0" + } + }, + "node_modules/spdx-correct/node_modules/spdx-expression-parse": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "spdx-exceptions": "^2.1.0", + "spdx-license-ids": "^3.0.0" + } + }, + "node_modules/spdx-exceptions": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz", + "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==", + "dev": true, + "license": "CC-BY-3.0" + }, + "node_modules/spdx-expression-parse": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz", + "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "spdx-exceptions": "^2.1.0", + "spdx-license-ids": "^3.0.0" + } + }, + "node_modules/spdx-license-ids": { + "version": "3.0.21", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.21.tgz", + "integrity": "sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==", + "dev": true, + "license": "CC0-1.0" + }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "dev": true, + "license": "BSD-3-Clause" + }, + "node_modules/stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", + "dev": true, + "license": "MIT" + }, + "node_modules/std-env": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz", + "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==", + "dev": true, + "license": "MIT" + }, + "node_modules/string-argv": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", + "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.6.19" + } + }, + "node_modules/string-width": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz", + "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/strip-final-newline": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz", + "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/strip-indent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", + "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", + "dev": true, + "license": "MIT", + "dependencies": { + "min-indent": "^1.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/symbol-tree": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", + "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", + "dev": true, + "license": "MIT" + }, + "node_modules/synckit": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz", + "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, + "node_modules/tinybench": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", + "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/tinyexec": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz", + "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==", + "dev": true, + "license": "MIT" + }, + "node_modules/tinyglobby": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz", + "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.4.4", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz", + "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/tinypool": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz", + "integrity": "sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.0.0 || >=20.0.0" + } + }, + "node_modules/tinyrainbow": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz", + "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tinyspy": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz", + "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tldts": { + "version": "6.1.58", + "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.58.tgz", + "integrity": "sha512-MQJrJhjHOYGYb8DobR6Y4AdDbd4TYkyQ+KBDVc5ODzs1cbrvPpfN1IemYi9jfipJ/vR1YWvrDli0hg1y19VRoA==", + "dev": true, + "license": "MIT", + "dependencies": { + "tldts-core": "^6.1.58" + }, + "bin": { + "tldts": "bin/cli.js" + } + }, + "node_modules/tldts-core": { + "version": "6.1.58", + "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.58.tgz", + "integrity": "sha512-dR936xmhBm7AeqHIhCWwK765gZ7dFyL+IqLSFAjJbFlUXGMLCb8i2PzlzaOuWBuplBTaBYseSb565nk/ZEM0Bg==", + "dev": true, + "license": "MIT" + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/tough-cookie": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz", + "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "tldts": "^6.1.32" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/tr46": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz", + "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==", + "dev": true, + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/ts-api-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.1.tgz", + "integrity": "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.12" + }, + "peerDependencies": { + "typescript": ">=4.8.4" + } + }, + "node_modules/ts-node": { + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", + "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspotcode/source-map-support": "^0.8.0", + "@tsconfig/node10": "^1.0.7", + "@tsconfig/node12": "^1.0.7", + "@tsconfig/node14": "^1.0.0", + "@tsconfig/node16": "^1.0.2", + "acorn": "^8.4.1", + "acorn-walk": "^8.1.1", + "arg": "^4.1.0", + "create-require": "^1.1.0", + "diff": "^4.0.1", + "make-error": "^1.1.1", + "v8-compile-cache-lib": "^3.0.1", + "yn": "3.1.1" + }, + "bin": { + "ts-node": "dist/bin.js", + "ts-node-cwd": "dist/bin-cwd.js", + "ts-node-esm": "dist/bin-esm.js", + "ts-node-script": "dist/bin-script.js", + "ts-node-transpile-only": "dist/bin-transpile.js", + "ts-script": "dist/bin-script-deprecated.js" + }, + "peerDependencies": { + "@swc/core": ">=1.2.50", + "@swc/wasm": ">=1.2.50", + "@types/node": "*", + "typescript": ">=2.7" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "@swc/wasm": { + "optional": true + } + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD" + }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "license": "MIT", + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/type-fest": { + "version": "4.35.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.35.0.tgz", + "integrity": "sha512-2/AwEFQDFEy30iOLjrvHDIH7e4HEWH+f1Yl1bI5XMqzuoCUqwYCdxachgsgv0og/JdVZUhbfjcJAoHj5L1753A==", + "dev": true, + "license": "(MIT OR CC0-1.0)", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/typescript": { + "version": "5.8.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz", + "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/typescript-eslint": { + "version": "8.26.0", + "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.26.0.tgz", + "integrity": "sha512-PtVz9nAnuNJuAVeUFvwztjuUgSnJInODAUx47VDwWPXzd5vismPOtPtt83tzNXyOjVQbPRp786D6WFW/M2koIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/eslint-plugin": "8.26.0", + "@typescript-eslint/parser": "8.26.0", + "@typescript-eslint/utils": "8.26.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0", + "typescript": ">=4.8.4 <5.9.0" + } + }, + "node_modules/ufo": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz", + "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==", + "dev": true, + "license": "MIT" + }, + "node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, + "node_modules/unicorn-magic": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz", + "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", + "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "punycode": "^2.1.0" + } + }, + "node_modules/v8-compile-cache-lib": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", + "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", + "dev": true, + "license": "MIT" + }, + "node_modules/validate-npm-package-license": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", + "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "spdx-correct": "^3.0.0", + "spdx-expression-parse": "^3.0.0" + } + }, + "node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "spdx-exceptions": "^2.1.0", + "spdx-license-ids": "^3.0.0" + } + }, + "node_modules/vite": { + "version": "6.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", + "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.25.0", + "fdir": "^6.4.4", + "picomatch": "^4.0.2", + "postcss": "^8.5.3", + "rollup": "^4.34.9", + "tinyglobby": "^0.2.13" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "jiti": ">=1.21.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vite-node": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.1.3.tgz", + "integrity": "sha512-uHV4plJ2IxCl4u1up1FQRrqclylKAogbtBfOTwcuJ28xFi+89PZ57BRh+naIRvH70HPwxy5QHYzg1OrEaC7AbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "cac": "^6.7.14", + "debug": "^4.4.0", + "es-module-lexer": "^1.7.0", + "pathe": "^2.0.3", + "vite": "^5.0.0 || ^6.0.0" + }, + "bin": { + "vite-node": "vite-node.mjs" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/vite-node/node_modules/debug": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", + "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/vite-plugin-dts": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-4.5.4.tgz", + "integrity": "sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@microsoft/api-extractor": "^7.50.1", + "@rollup/pluginutils": "^5.1.4", + "@volar/typescript": "^2.4.11", + "@vue/language-core": "2.2.0", + "compare-versions": "^6.1.1", + "debug": "^4.4.0", + "kolorist": "^1.8.0", + "local-pkg": "^1.0.0", + "magic-string": "^0.30.17" + }, + "peerDependencies": { + "typescript": "*", + "vite": "*" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, + "node_modules/vite-plugin-dts/node_modules/debug": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", + "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/fdir": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz", + "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/vitest": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.1.3.tgz", + "integrity": "sha512-188iM4hAHQ0km23TN/adso1q5hhwKqUpv+Sd6p5sOuh6FhQnRNW3IsiIpvxqahtBabsJ2SLZgmGSpcYK4wQYJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/expect": "3.1.3", + "@vitest/mocker": "3.1.3", + "@vitest/pretty-format": "^3.1.3", + "@vitest/runner": "3.1.3", + "@vitest/snapshot": "3.1.3", + "@vitest/spy": "3.1.3", + "@vitest/utils": "3.1.3", + "chai": "^5.2.0", + "debug": "^4.4.0", + "expect-type": "^1.2.1", + "magic-string": "^0.30.17", + "pathe": "^2.0.3", + "std-env": "^3.9.0", + "tinybench": "^2.9.0", + "tinyexec": "^0.3.2", + "tinyglobby": "^0.2.13", + "tinypool": "^1.0.2", + "tinyrainbow": "^2.0.0", + "vite": "^5.0.0 || ^6.0.0", + "vite-node": "3.1.3", + "why-is-node-running": "^2.3.0" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@types/debug": "^4.1.12", + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "@vitest/browser": "3.1.3", + "@vitest/ui": "3.1.3", + "happy-dom": "*", + "jsdom": "*" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@types/debug": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@vitest/browser": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + } + } + }, + "node_modules/vitest/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/vscode-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz", + "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/w3c-xmlserializer": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", + "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-encoding": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz", + "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/whatwg-mimetype": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/whatwg-url": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz", + "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==", + "dev": true, + "license": "MIT", + "dependencies": { + "tr46": "^5.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/why-is-node-running": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz", + "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==", + "dev": true, + "license": "MIT", + "dependencies": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + }, + "bin": { + "why-is-node-running": "cli.js" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/word-wrap": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/wrap-ansi": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz", + "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "string-width": "^7.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/ws": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xml-name-validator": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz", + "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18" + } + }, + "node_modules/xmlchars": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", + "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", + "dev": true, + "license": "MIT" + }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true, + "license": "ISC" + }, + "node_modules/yaml": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz", + "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==", + "dev": true, + "license": "ISC", + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/yn": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", + "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + } + } +} diff --git a/src/lib/litegraph/package.json b/src/lib/litegraph/package.json new file mode 100644 index 0000000000..f2bdc2ba96 --- /dev/null +++ b/src/lib/litegraph/package.json @@ -0,0 +1,72 @@ +{ + "name": "@comfyorg/litegraph", + "version": "0.17.0", + "type": "module", + "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.", + "main": "./dist/litegraph.umd.js", + "module": "./dist/litegraph.es.js", + "types": "./dist/litegraph.d.ts", + "style": "./dist/css/litegraph.css", + "exports": { + ".": { + "types": "./dist/litegraph.d.ts", + "import": "./dist/litegraph.es.js", + "require": "./dist/litegraph.umd.js" + }, + "./style.css": "./dist/css/litegraph.css", + "./dist/*": "./dist/*.d.ts" + }, + "directories": { + "doc": "doc" + }, + "private": false, + "scripts": { + "build": "tsc && vite build", + "dev": "vite", + "preview": "vite preview", + "watch": "vite build --watch", + "test": "vitest", + "lint": "eslint", + "lint:fix": "eslint --fix", + "lint:ci": "eslint src", + "format": "prettier --check './src/*.{js,ts,tsx,vue,mts}'", + "format:fix": "prettier --write './src/*.{js,ts,tsx,vue,mts}'", + "typecheck": "tsc" + }, + "repository": { + "type": "git", + "url": "git@github.com:Comfy-Org/litegraph.js.git" + }, + "author": "comfyorg", + "license": "MIT", + "files": [ + "dist" + ], + "bugs": { + "url": "https://github.com/Comfy-Org/litegraph.js/issues" + }, + "homepage": "https://github.com/Comfy-Org/litegraph.js", + "devDependencies": { + "@eslint/js": "^9.21.0", + "@stylistic/eslint-plugin": "^2.13.0", + "@types/eslint__js": "^8.42.3", + "@types/node": "^22.13.9", + "eslint": "^9.21.0", + "eslint-plugin-antfu": "^3.1.0", + "eslint-plugin-jsdoc": "^50.6.3", + "eslint-plugin-simple-import-sort": "^12.1.1", + "eslint-plugin-unicorn": "^57.0.0", + "eslint-plugin-unused-imports": "^4.1.4", + "globals": "^15.12.0", + "husky": "^9.1.7", + "jsdom": "^25.0.1", + "lint-staged": "^15.2.10", + "prettier": "^3.3.3", + "ts-node": "^10.9.2", + "typescript": "^5.8.3", + "typescript-eslint": "^8.26.0", + "vite": "^6.3.5", + "vite-plugin-dts": "^4.5.4", + "vitest": "^3.1.3" + } +} diff --git a/src/lib/litegraph/public/css/litegraph.css b/src/lib/litegraph/public/css/litegraph.css new file mode 100644 index 0000000000..ec23023ebf --- /dev/null +++ b/src/lib/litegraph/public/css/litegraph.css @@ -0,0 +1,638 @@ +/* this CSS contains only the basic CSS needed to run the app and use it */ + +.lgraphcanvas { + /*cursor: crosshair;*/ + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + outline: none; + font-family: Tahoma, sans-serif; +} + +.lgraphcanvas * { + box-sizing: border-box; +} + +.litegraph.litecontextmenu { + font-family: Tahoma, sans-serif; + position: fixed; + top: 100px; + left: 100px; + min-width: 100px; + color: #aaf; + padding: 0; + box-shadow: 0 0 10px black !important; + background-color: #2e2e2e !important; + z-index: 10; + max-height: -webkit-fill-available; + overflow-y: auto; +} + +/* Enable scrolling overflow in Firefox */ +@supports not (max-height: -webkit-fill-available) { + .litegraph.litecontextmenu { + max-height: 80vh; + overflow-y: scroll; + } +} + +.litegraph.litecontextmenu.dark { + background-color: #000 !important; +} + +.litegraph.litecontextmenu .litemenu-title img { + margin-top: 2px; + margin-left: 2px; + margin-right: 4px; +} + +.litegraph.litecontextmenu .litemenu-entry { + margin: 2px; + padding: 2px; +} + +.litegraph.litecontextmenu .litemenu-entry.submenu { + background-color: #2e2e2e !important; +} + +.litegraph.litecontextmenu.dark .litemenu-entry.submenu { + background-color: #000 !important; +} + +.litegraph .litemenubar ul { + font-family: Tahoma, sans-serif; + margin: 0; + padding: 0; +} + +.litegraph .litemenubar li { + font-size: 14px; + color: #999; + display: inline-block; + min-width: 50px; + padding-left: 10px; + padding-right: 10px; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + cursor: pointer; +} + +.litegraph .litemenubar li:hover { + background-color: #777; + color: #eee; +} + +.litegraph .litegraph .litemenubar-panel { + position: absolute; + top: 5px; + left: 5px; + min-width: 100px; + background-color: #444; + box-shadow: 0 0 3px black; + padding: 4px; + border-bottom: 2px solid #aaf; + z-index: 10; +} + +.litegraph .litemenu-entry, +.litemenu-title { + font-size: 12px; + color: #aaa; + padding: 0 0 0 4px; + margin: 2px; + padding-left: 2px; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: pointer; +} + +.litegraph .litemenu-entry .icon { + display: inline-block; + width: 12px; + height: 12px; + margin: 2px; + vertical-align: top; +} + +.litegraph .litemenu-entry.checked .icon { + background-color: #aaf; +} + +.litegraph .litemenu-entry .more { + float: right; + padding-right: 5px; +} + +.litegraph .litemenu-entry.disabled { + opacity: 0.5; + cursor: default; +} + +.litegraph .litemenu-entry.separator { + display: block; + border-top: 1px solid #333; + border-bottom: 1px solid #666; + width: 100%; + height: 0px; + margin: 3px 0 2px 0; + background-color: transparent; + padding: 0 !important; + cursor: default !important; +} + +.litegraph .litemenu-entry.has_submenu { + border-right: 2px solid cyan; +} + +.litegraph .litemenu-title { + color: #dde; + background-color: #111; + margin: 0; + padding: 2px; + cursor: default; +} + +.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) { + background-color: #444 !important; + color: #eee; + transition: all 0.2s; +} + +.litegraph .litemenu-entry .property_name { + display: inline-block; + text-align: left; + min-width: 80px; + min-height: 1.2em; +} + +.litegraph .litemenu-entry .property_value { + display: inline-block; + background-color: rgba(0, 0, 0, 0.5); + text-align: right; + min-width: 80px; + min-height: 1.2em; + vertical-align: middle; + padding-right: 10px; +} + +.litegraph.litesearchbox { + font-family: Tahoma, sans-serif; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + padding-top: 4px; +} + +.litegraph.litesearchbox input, +.litegraph.litesearchbox select { + margin-top: 3px; + min-width: 60px; + min-height: 1.5em; + background-color: black; + border: 0; + color: white; + padding-left: 10px; + margin-right: 5px; + max-width: 300px; +} + +.litegraph.litesearchbox .name { + display: inline-block; + min-width: 60px; + min-height: 1.5em; + padding-left: 10px; +} + +.litegraph.litesearchbox .helper { + overflow: auto; + max-height: 200px; + margin-top: 2px; +} + +.litegraph.lite-search-item { + font-family: Tahoma, sans-serif; + background-color: rgba(0, 0, 0, 0.5); + color: white; + padding-top: 2px; +} + +.litegraph.lite-search-item.not_in_filter { + /*background-color: rgba(50, 50, 50, 0.5);*/ + /*color: #999;*/ + color: #b99; + font-style: italic; +} + +.litegraph.lite-search-item.generic_type { + /*background-color: rgba(50, 50, 50, 0.5);*/ + /*color: #DD9;*/ + color: #999; + font-style: italic; +} + +.litegraph.lite-search-item:hover, +.litegraph.lite-search-item.selected { + cursor: pointer; + background-color: white; + color: black; +} + +.litegraph.lite-search-item-type { + display: inline-block; + background: rgba(0, 0, 0, 0.2); + margin-left: 5px; + font-size: 14px; + padding: 2px 5px; + position: relative; + top: -2px; + opacity: 0.8; + border-radius: 4px; +} + +/* DIALOGs ******/ + +.litegraph .dialog { + position: absolute; + top: 50%; + left: 50%; + margin-top: -150px; + margin-left: -200px; + + background-color: #2a2a2a; + + min-width: 400px; + min-height: 200px; + box-shadow: 0 0 4px #111; + border-radius: 6px; +} + +.litegraph .dialog.settings { + left: 10px; + top: 10px; + height: calc(100% - 20px); + margin: auto; + max-width: 50%; +} + +.litegraph .dialog.centered { + top: 50px; + left: 50%; + position: absolute; + transform: translateX(-50%); + min-width: 600px; + min-height: 300px; + height: calc(100% - 100px); + margin: auto; +} + +.litegraph .dialog .close { + float: right; + margin: 4px; + margin-right: 10px; + cursor: pointer; + font-size: 1.4em; +} + +.litegraph .dialog .close:hover { + color: white; +} + +.litegraph .dialog .dialog-header { + color: #aaa; + border-bottom: 1px solid #161616; +} + +.litegraph .dialog .dialog-header { + height: 40px; +} +.litegraph .dialog .dialog-footer { + height: 50px; + padding: 10px; + margin: 0; + border-top: 1px solid #1a1a1a; +} + +.litegraph .dialog .dialog-header .dialog-title { + font: 20px "Arial"; + margin: 4px; + padding: 4px 10px; + display: inline-block; +} + +.litegraph .dialog .dialog-content, +.litegraph .dialog .dialog-alt-content { + height: calc(100% - 90px); + width: 100%; + min-height: 100px; + display: inline-block; + color: #aaa; + /*background-color: black;*/ + overflow: auto; +} + +.litegraph .dialog .dialog-content h3 { + margin: 10px; +} + +.litegraph .dialog .dialog-content .connections { + flex-direction: row; +} + +.litegraph .dialog .dialog-content .connections .connections_side { + width: calc(50% - 5px); + min-height: 100px; + background-color: black; + display: flex; +} + +.litegraph .dialog .node_type { + font-size: 1.2em; + display: block; + margin: 10px; +} + +.litegraph .dialog .node_desc { + opacity: 0.5; + display: block; + margin: 10px; +} + +.litegraph .dialog .separator { + display: block; + width: calc(100% - 4px); + height: 1px; + border-top: 1px solid #000; + border-bottom: 1px solid #333; + margin: 10px 2px; + padding: 0; +} + +.litegraph .dialog .property { + margin-bottom: 2px; + padding: 4px; +} + +.litegraph .dialog .property:hover { + background: #545454; +} + +.litegraph .dialog .property_name { + color: #737373; + display: inline-block; + text-align: left; + vertical-align: top; + width: 160px; + padding-left: 4px; + overflow: hidden; + margin-right: 6px; +} + +.litegraph .dialog .property:hover .property_name { + color: white; +} + +.litegraph .dialog .property_value { + display: inline-block; + text-align: right; + color: #aaa; + background-color: #1a1a1a; + /*width: calc( 100% - 122px );*/ + max-width: calc(100% - 162px); + min-width: 200px; + max-height: 300px; + min-height: 20px; + padding: 4px; + padding-right: 12px; + overflow: hidden; + cursor: pointer; + border-radius: 3px; +} + +.litegraph .dialog .property_value:hover { + color: white; +} + +.litegraph .dialog .property.boolean .property_value { + padding-right: 30px; + color: #a88; + /*width: auto; + float: right;*/ +} + +.litegraph .dialog .property.boolean.bool-on .property_name { + color: #8a8; +} +.litegraph .dialog .property.boolean.bool-on .property_value { + color: #8a8; +} + +.litegraph .dialog .btn { + border: 0; + border-radius: 4px; + padding: 4px 20px; + margin-left: 0px; + background-color: #060606; + color: #8e8e8e; +} + +.litegraph .dialog .btn:hover { + background-color: #111; + color: #fff; +} + +.litegraph .dialog .btn.delete:hover { + background-color: #f33; + color: black; +} + +.litegraph .bullet_icon { + margin-left: 10px; + border-radius: 10px; + width: 12px; + height: 12px; + background-color: #666; + display: inline-block; + margin-top: 2px; + margin-right: 4px; + transition: background-color 0.1s ease 0s; + -moz-transition: background-color 0.1s ease 0s; +} + +.litegraph .bullet_icon:hover { + background-color: #698; + cursor: pointer; +} + +/* OLD */ + +.graphcontextmenu { + padding: 4px; + min-width: 100px; +} + +.graphcontextmenu-title { + color: #dde; + background-color: #222; + margin: 0; + padding: 2px; + cursor: default; +} + +.graphmenu-entry { + box-sizing: border-box; + margin: 2px; + padding-left: 20px; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + transition: all linear 0.3s; +} + +.graphmenu-entry.event, +.litemenu-entry.event { + border-left: 8px solid orange; + padding-left: 12px; +} + +.graphmenu-entry.disabled { + opacity: 0.3; +} + +.graphmenu-entry.submenu { + border-right: 2px solid #eee; +} + +.graphmenu-entry:hover { + background-color: #555; +} + +.graphmenu-entry.separator { + background-color: #111; + border-bottom: 1px solid #666; + height: 1px; + width: calc(100% - 20px); + -moz-width: calc(100% - 20px); + -webkit-width: calc(100% - 20px); +} + +.graphmenu-entry .property_name { + display: inline-block; + text-align: left; + min-width: 80px; + min-height: 1.2em; +} + +.graphmenu-entry .property_value, +.litemenu-entry .property_value { + display: inline-block; + background-color: rgba(0, 0, 0, 0.5); + text-align: right; + min-width: 80px; + min-height: 1.2em; + vertical-align: middle; + padding-right: 10px; +} + +.graphdialog { + position: absolute; + top: 10px; + left: 10px; + min-height: 2em; + background-color: #333; + font-size: 1.2em; + box-shadow: 0 0 10px black !important; + z-index: 10; +} + +.graphdialog.rounded { + border-radius: 12px; + padding-right: 2px; +} + +.graphdialog .name { + display: inline-block; + min-width: 60px; + min-height: 1.5em; + padding-left: 10px; +} + +.graphdialog input, +.graphdialog textarea, +.graphdialog select { + margin: 3px; + min-width: 60px; + min-height: 1.5em; + background-color: black; + border: 0; + color: white; + padding-left: 10px; + outline: none; +} + +.graphdialog textarea { + min-height: 150px; +} + +.graphdialog button { + margin-top: 3px; + vertical-align: top; + background-color: #999; + border: 0; +} + +.graphdialog button.rounded, +.graphdialog input.rounded { + border-radius: 0 12px 12px 0; +} + +.graphdialog .helper { + overflow: auto; + max-height: 200px; +} + +.graphdialog .help-item { + padding-left: 10px; +} + +.graphdialog .help-item:hover, +.graphdialog .help-item.selected { + cursor: pointer; + background-color: white; + color: black; +} + +.litegraph .dialog { + min-height: 0; +} +.litegraph .dialog .dialog-content { + display: block; +} +.litegraph .graphdialog { + display: flex; + align-items: center; + border-radius: 20px; + padding: 4px 10px; + position: fixed; +} +.litegraph .graphdialog .name { + padding: 0; + min-height: 0; + font-size: 16px; + vertical-align: middle; +} +.litegraph .graphdialog .value { + font-size: 16px; + min-height: 0; + margin: 0 10px; + padding: 2px 5px; +} +.litegraph .graphdialog input[type="checkbox"] { + width: 16px; + height: 16px; +} +.litegraph .graphdialog button { + padding: 4px 18px; + border-radius: 20px; + cursor: pointer; +} diff --git a/src/lib/litegraph/src/CanvasPointer.ts b/src/lib/litegraph/src/CanvasPointer.ts new file mode 100644 index 0000000000..eba3a02003 --- /dev/null +++ b/src/lib/litegraph/src/CanvasPointer.ts @@ -0,0 +1,290 @@ +import type { CompassCorners } from "./interfaces" +import type { CanvasPointerEvent } from "./types/events" + +import { dist2 } from "./measure" + +/** + * Allows click and drag actions to be declared ahead of time during a pointerdown event. + * + * By default, it retains the most recent event of each type until it is reset (on pointerup). + * - {@link eDown} + * - {@link eMove} + * - {@link eUp} + * + * Depending on whether the user clicks or drags the pointer, only the appropriate callbacks are called: + * - {@link onClick} + * - {@link onDoubleClick} + * - {@link onDragStart} + * - {@link onDrag} + * - {@link onDragEnd} + * - {@link finally} + * @see + * - {@link LGraphCanvas.processMouseDown} + * - {@link LGraphCanvas.processMouseMove} + * - {@link LGraphCanvas.processMouseUp} + */ +export class CanvasPointer { + /** Maximum time in milliseconds to ignore click drift */ + static bufferTime = 150 + + /** Maximum gap between pointerup and pointerdown events to be considered as a double click */ + static doubleClickTime = 300 + + /** Maximum offset from click location */ + static get maxClickDrift() { + return this.#maxClickDrift + } + + static set maxClickDrift(value) { + this.#maxClickDrift = value + this.#maxClickDrift2 = value * value + } + + static #maxClickDrift = 6 + /** {@link maxClickDrift} squared. Used to calculate click drift without `sqrt`. */ + static #maxClickDrift2 = this.#maxClickDrift ** 2 + + /** The element this PointerState should capture input against when dragging. */ + element: Element + /** Pointer ID used by drag capture. */ + pointerId?: number + + /** Set to true when if the pointer moves far enough after a down event, before the corresponding up event is fired. */ + dragStarted: boolean = false + + /** The {@link eUp} from the last successful click */ + eLastDown?: CanvasPointerEvent + + /** Used downstream for touch event support. */ + isDouble: boolean = false + /** Used downstream for touch event support. */ + isDown: boolean = false + + /** The resize handle currently being hovered or dragged */ + resizeDirection?: CompassCorners + + /** + * If `true`, {@link eDown}, {@link eMove}, and {@link eUp} will be set to + * `undefined` when {@link reset} is called. + * + * Default: `true` + */ + clearEventsOnReset: boolean = true + + /** The last pointerdown event for the primary button */ + eDown?: CanvasPointerEvent + /** The last pointermove event for the primary button */ + eMove?: CanvasPointerEvent + /** The last pointerup event for the primary button */ + eUp?: CanvasPointerEvent + + /** + * If set, as soon as the mouse moves outside the click drift threshold, this action is run once. + * @param pointer [DEPRECATED] This parameter will be removed in a future release. + * @param eMove The pointermove event of this ongoing drag action. + * + * It is possible for no `pointermove` events to occur, but still be far from + * the original `pointerdown` event. In this case, {@link eMove} will be null, and + * {@link onDragEnd} will be called immediately after {@link onDragStart}. + */ + onDragStart?(pointer: this, eMove?: CanvasPointerEvent): unknown + + /** + * Called on pointermove whilst dragging. + * @param eMove The pointermove event of this ongoing drag action + */ + onDrag?(eMove: CanvasPointerEvent): unknown + + /** + * Called on pointerup after dragging (i.e. not called if clicked). + * @param upEvent The pointerup or pointermove event that triggered this callback + */ + onDragEnd?(upEvent: CanvasPointerEvent): unknown + + /** + * Callback that will be run once, the next time a pointerup event appears to be a normal click. + * @param upEvent The pointerup or pointermove event that triggered this callback + */ + onClick?(upEvent: CanvasPointerEvent): unknown + + /** + * Callback that will be run once, the next time a pointerup event appears to be a normal click. + * @param upEvent The pointerup or pointermove event that triggered this callback + */ + onDoubleClick?(upEvent: CanvasPointerEvent): unknown + + /** + * Run-once callback, called at the end of any click or drag, whether or not it was successful in any way. + * + * The setter of this callback will call the existing value before replacing it. + * Therefore, simply setting this value twice will execute the first callback. + */ + get finally() { + return this.#finally + } + + set finally(value) { + try { + this.#finally?.() + } finally { + this.#finally = value + } + } + + #finally?: () => unknown + + constructor(element: Element) { + this.element = element + } + + /** + * Callback for `pointerdown` events. To be used as the event handler (or called by it). + * @param e The `pointerdown` event + */ + down(e: CanvasPointerEvent): void { + this.reset() + this.eDown = e + this.pointerId = e.pointerId + this.element.setPointerCapture(e.pointerId) + } + + /** + * Callback for `pointermove` events. To be used as the event handler (or called by it). + * @param e The `pointermove` event + */ + move(e: CanvasPointerEvent): void { + const { eDown } = this + if (!eDown) return + + // No buttons down, but eDown exists - clean up & leave + if (!e.buttons) { + this.reset() + return + } + + // Primary button released - treat as pointerup. + if (!(e.buttons & eDown.buttons)) { + this.#completeClick(e) + this.reset() + return + } + this.eMove = e + this.onDrag?.(e) + + // Dragging, but no callback to run + if (this.dragStarted) return + + const longerThanBufferTime = e.timeStamp - eDown.timeStamp > CanvasPointer.bufferTime + if (longerThanBufferTime || !this.#hasSamePosition(e, eDown)) { + this.#setDragStarted(e) + } + } + + /** + * Callback for `pointerup` events. To be used as the event handler (or called by it). + * @param e The `pointerup` event + */ + up(e: CanvasPointerEvent): boolean { + if (e.button !== this.eDown?.button) return false + + this.#completeClick(e) + const { dragStarted } = this + this.reset() + return !dragStarted + } + + #completeClick(e: CanvasPointerEvent): void { + const { eDown } = this + if (!eDown) return + + this.eUp = e + + if (this.dragStarted) { + // A move event already started drag + this.onDragEnd?.(e) + } else if (!this.#hasSamePosition(e, eDown)) { + // Teleport without a move event (e.g. tab out, move, tab back) + this.#setDragStarted() + this.onDragEnd?.(e) + } else if (this.onDoubleClick && this.#isDoubleClick()) { + // Double-click event + this.onDoubleClick(e) + this.eLastDown = undefined + } else { + // Normal click event + this.onClick?.(e) + this.eLastDown = eDown + } + } + + /** + * Checks if two events occurred near each other - not further apart than the maximum click drift. + * @param a The first event to compare + * @param b The second event to compare + * @param tolerance2 The maximum distance (squared) before the positions are considered different + * @returns `true` if the two events were no more than {@link maxClickDrift} apart, otherwise `false` + */ + #hasSamePosition( + a: PointerEvent, + b: PointerEvent, + tolerance2 = CanvasPointer.#maxClickDrift2, + ): boolean { + const drift = dist2(a.clientX, a.clientY, b.clientX, b.clientY) + return drift <= tolerance2 + } + + /** + * Checks whether the pointer is currently past the max click drift threshold. + * @returns `true` if the latest pointer event is past the the click drift threshold + */ + #isDoubleClick(): boolean { + const { eDown, eLastDown } = this + if (!eDown || !eLastDown) return false + + // Use thrice the drift distance for double-click gap + const tolerance2 = (3 * CanvasPointer.#maxClickDrift) ** 2 + const diff = eDown.timeStamp - eLastDown.timeStamp + return diff > 0 && + diff < CanvasPointer.doubleClickTime && + this.#hasSamePosition(eDown, eLastDown, tolerance2) + } + + #setDragStarted(eMove?: CanvasPointerEvent): void { + this.dragStarted = true + this.onDragStart?.(this, eMove) + delete this.onDragStart + } + + /** + * Resets the state of this {@link CanvasPointer} instance. + * + * The {@link finally} callback is first executed, then all callbacks and intra-click + * state is cleared. + */ + reset(): void { + // The setter executes the callback before clearing it + this.finally = undefined + delete this.onClick + delete this.onDoubleClick + delete this.onDragStart + delete this.onDrag + delete this.onDragEnd + + this.isDown = false + this.isDouble = false + this.dragStarted = false + this.resizeDirection = undefined + + if (this.clearEventsOnReset) { + this.eDown = undefined + this.eMove = undefined + this.eUp = undefined + } + + const { element, pointerId } = this + this.pointerId = undefined + if (typeof pointerId === "number" && element.hasPointerCapture(pointerId)) { + element.releasePointerCapture(pointerId) + } + } +} diff --git a/src/lib/litegraph/src/ContextMenu.ts b/src/lib/litegraph/src/ContextMenu.ts new file mode 100644 index 0000000000..b6b7b55f13 --- /dev/null +++ b/src/lib/litegraph/src/ContextMenu.ts @@ -0,0 +1,387 @@ +import type { ContextMenuDivElement, IContextMenuOptions, IContextMenuValue } from "./interfaces" + +import { LiteGraph } from "./litegraph" + +// TODO: Replace this pattern with something more modern. +export interface ContextMenu { + constructor: new (...args: ConstructorParameters>) => ContextMenu +} + +/** + * ContextMenu from LiteGUI + */ +// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging +export class ContextMenu { + options: IContextMenuOptions + parentMenu?: ContextMenu + root: ContextMenuDivElement + current_submenu?: ContextMenu + lock?: boolean + + controller: AbortController = new AbortController() + + /** + * @todo Interface for values requires functionality change - currently accepts + * an array of strings, functions, objects, nulls, or undefined. + * @param values (allows object { title: "Nice text", callback: function ... }) + * @param options [optional] Some options:\ + * - title: title to show on top of the menu + * - callback: function to call when an option is clicked, it receives the item information + * - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback + * - event: you can pass a MouseEvent, this way the ContextMenu appears in that position + */ + constructor(values: readonly (string | IContextMenuValue | null)[], options: IContextMenuOptions) { + options ||= {} + this.options = options + + // to link a menu with its parent + const parent = options.parentMenu + if (parent) { + if (!(parent instanceof ContextMenu)) { + console.error("parentMenu must be of class ContextMenu, ignoring it") + options.parentMenu = undefined + } else { + this.parentMenu = parent + this.parentMenu.lock = true + this.parentMenu.current_submenu = this + } + if (parent.options?.className === "dark") { + options.className = "dark" + } + } + + // use strings because comparing classes between windows doesnt work + const eventClass = options.event + ? options.event.constructor.name + : null + if ( + eventClass !== "MouseEvent" && + eventClass !== "CustomEvent" && + eventClass !== "PointerEvent" + ) { + console.error(`Event passed to ContextMenu is not of type MouseEvent or CustomEvent. Ignoring it. (${eventClass})`) + options.event = undefined + } + + const root: ContextMenuDivElement = document.createElement("div") + let classes = "litegraph litecontextmenu litemenubar-panel" + if (options.className) classes += ` ${options.className}` + root.className = classes + root.style.minWidth = "100" + root.style.minHeight = "100" + + // Close the context menu when a click occurs outside this context menu or its submenus + const { signal } = this.controller + const eventOptions = { capture: true, signal } + + if (!this.parentMenu) { + document.addEventListener("pointerdown", (e) => { + if (e.target instanceof Node && !this.containsNode(e.target)) { + this.close() + } + }, eventOptions) + } + + // this prevents the default context browser menu to open in case this menu was created when pressing right button + root.addEventListener("pointerup", e => e.preventDefault(), eventOptions) + + // Right button + root.addEventListener( + "contextmenu", + (e) => { + if (e.button === 2) e.preventDefault() + }, + eventOptions, + ) + + root.addEventListener( + "pointerdown", + (e) => { + if (e.button == 2) { + this.close() + e.preventDefault() + } + }, + eventOptions, + ) + + this.root = root + + // title + if (options.title) { + const element = document.createElement("div") + element.className = "litemenu-title" + element.innerHTML = options.title + root.append(element) + } + + // entries + for (let i = 0; i < values.length; i++) { + const value = values[i] + let name = Array.isArray(values) ? value : String(i) + + if (typeof name !== "string") { + name = name != null + ? (name.content === undefined ? String(name) : name.content) + : name + } + + this.addItem(name, value, options) + } + + // insert before checking position + const ownerDocument = (options.event?.target as Node | null | undefined)?.ownerDocument + const root_document = ownerDocument || document + + if (root_document.fullscreenElement) + root_document.fullscreenElement.append(root) + else + root_document.body.append(root) + + // compute best position + let left = options.left || 0 + let top = options.top || 0 + if (options.event) { + left = options.event.clientX - 10 + top = options.event.clientY - 10 + if (options.title) top -= 20 + + if (parent) { + const rect = parent.root.getBoundingClientRect() + left = rect.left + rect.width + } + + const body_rect = document.body.getBoundingClientRect() + const root_rect = root.getBoundingClientRect() + if (body_rect.height == 0) + console.error("document.body height is 0. That is dangerous, set html,body { height: 100%; }") + + if (body_rect.width && left > body_rect.width - root_rect.width - 10) + left = body_rect.width - root_rect.width - 10 + if (body_rect.height && top > body_rect.height - root_rect.height - 10) + top = body_rect.height - root_rect.height - 10 + } + + root.style.left = `${left}px` + root.style.top = `${top}px` + + if (LiteGraph.context_menu_scaling && options.scale) { + root.style.transform = `scale(${Math.round(options.scale * 4) * 0.25})` + } + } + + /** + * Checks if {@link node} is inside this context menu or any of its submenus + * @param node The {@link Node} to check + * @param visited A set of visited menus to avoid circular references + * @returns `true` if {@link node} is inside this context menu or any of its submenus + */ + containsNode(node: Node, visited: Set = new Set()): boolean { + if (visited.has(this)) return false + visited.add(this) + + return this.current_submenu?.containsNode(node, visited) || this.root.contains(node) + } + + addItem( + name: string | null, + value: string | IContextMenuValue | null, + options: IContextMenuOptions, + ): HTMLElement { + options ||= {} + + const element: ContextMenuDivElement = document.createElement("div") + element.className = "litemenu-entry submenu" + + let disabled = false + + if (value === null) { + element.classList.add("separator") + } else { + const innerHtml = name === null ? "" : String(name) + if (typeof value === "string") { + element.innerHTML = innerHtml + } else { + element.innerHTML = value?.title ?? innerHtml + + if (value.disabled) { + disabled = true + element.classList.add("disabled") + element.setAttribute("aria-disabled", "true") + } + if (value.submenu || value.has_submenu) { + element.classList.add("has_submenu") + element.setAttribute("aria-haspopup", "true") + element.setAttribute("aria-expanded", "false") + } + if (value.className) element.className += ` ${value.className}` + } + element.value = value + element.setAttribute("role", "menuitem") + + if (typeof value === "function") { + element.dataset["value"] = String(name) + element.onclick_callback = value + } else { + element.dataset["value"] = String(value) + } + } + + this.root.append(element) + if (!disabled) element.addEventListener("click", inner_onclick) + if (!disabled && options.autoopen) + element.addEventListener("pointerenter", inner_over) + + const setAriaExpanded = () => { + const entries = this.root.querySelectorAll("div.litemenu-entry.has_submenu") + if (entries) { + for (const entry of entries) { + entry.setAttribute("aria-expanded", "false") + } + } + element.setAttribute("aria-expanded", "true") + } + + function inner_over(this: ContextMenuDivElement, e: MouseEvent) { + const value = this.value + if (!value || !(value as IContextMenuValue).has_submenu) return + + // if it is a submenu, autoopen like the item was clicked + inner_onclick.call(this, e) + setAriaExpanded() + } + + // menu option clicked + const that = this + function inner_onclick(this: ContextMenuDivElement, e: MouseEvent) { + const value = this.value + let close_parent = true + + that.current_submenu?.close(e) + if ( + (value as IContextMenuValue)?.has_submenu || + (value as IContextMenuValue)?.submenu + ) { + setAriaExpanded() + } + + // global callback + if (options.callback) { + const r = options.callback.call( + this, + value, + options, + e, + that, + options.node, + ) + if (r === true) close_parent = false + } + + // special cases + if (typeof value === "object") { + if ( + value.callback && + !options.ignore_item_callbacks && + value.disabled !== true + ) { + // item callback + const r = value.callback.call( + this, + value, + options, + e, + that, + options.extra, + ) + if (r === true) close_parent = false + } + if (value.submenu) { + if (!value.submenu.options) throw "ContextMenu submenu needs options" + + new that.constructor(value.submenu.options, { + callback: value.submenu.callback, + event: e, + parentMenu: that, + ignore_item_callbacks: value.submenu.ignore_item_callbacks, + title: value.submenu.title, + extra: value.submenu.extra, + autoopen: options.autoopen, + }) + close_parent = false + } + } + + if (close_parent && !that.lock) that.close() + } + + return element + } + + close(e?: MouseEvent, ignore_parent_menu?: boolean): void { + this.controller.abort() + this.root.remove() + if (this.parentMenu && !ignore_parent_menu) { + this.parentMenu.lock = false + this.parentMenu.current_submenu = undefined + if (e === undefined) { + this.parentMenu.close() + } else if (e && !ContextMenu.isCursorOverElement(e, this.parentMenu.root)) { + ContextMenu.trigger( + this.parentMenu.root, + `${LiteGraph.pointerevents_method}leave`, + e, + ) + } + } + this.current_submenu?.close(e, true) + } + + /** @deprecated Likely unused, however code search was inconclusive (too many results to check by hand). */ + // this code is used to trigger events easily (used in the context menu mouseleave + static trigger( + element: HTMLDivElement, + event_name: string, + params: MouseEvent, + ): CustomEvent { + const evt = document.createEvent("CustomEvent") + evt.initCustomEvent(event_name, true, true, params) + if (element.dispatchEvent) element.dispatchEvent(evt) + // else nothing seems bound here so nothing to do + return evt + } + + // returns the top most menu + getTopMenu(): ContextMenu { + return this.options.parentMenu + ? this.options.parentMenu.getTopMenu() + : this + } + + getFirstEvent(): MouseEvent | undefined { + return this.options.parentMenu + ? this.options.parentMenu.getFirstEvent() + : this.options.event + } + + /** @deprecated Unused. */ + static isCursorOverElement( + event: MouseEvent, + element: HTMLDivElement, + ): boolean { + const left = event.clientX + const top = event.clientY + const rect = element.getBoundingClientRect() + if (!rect) return false + + if ( + top > rect.top && + top < rect.top + rect.height && + left > rect.left && + left < rect.left + rect.width + ) { + return true + } + return false + } +} diff --git a/src/lib/litegraph/src/CurveEditor.ts b/src/lib/litegraph/src/CurveEditor.ts new file mode 100644 index 0000000000..f9395e71e5 --- /dev/null +++ b/src/lib/litegraph/src/CurveEditor.ts @@ -0,0 +1,195 @@ +import type { Point, Rect } from "./interfaces" + +import { clamp, LGraphCanvas } from "./litegraph" +import { distance } from "./measure" + +// used by some widgets to render a curve editor + +export class CurveEditor { + points: Point[] + selected: number + nearest: number + size: Rect | null + must_update: boolean + margin: number + _nearest?: number + + constructor(points: Point[]) { + this.points = points + this.selected = -1 + this.nearest = -1 + // stores last size used + this.size = null + this.must_update = true + this.margin = 5 + } + + static sampleCurve(f: number, points: Point[]): number | undefined { + if (!points) return + + for (let i = 0; i < points.length - 1; ++i) { + const p = points[i] + const pn = points[i + 1] + if (pn[0] < f) continue + + const r = pn[0] - p[0] + if (Math.abs(r) < 0.000_01) return p[1] + + const local_f = (f - p[0]) / r + return p[1] * (1.0 - local_f) + pn[1] * local_f + } + return 0 + } + + draw( + ctx: CanvasRenderingContext2D, + size: Rect, + graphcanvas?: LGraphCanvas, + background_color?: string, + line_color?: string, + inactive = false, + ): void { + const points = this.points + if (!points) return + + this.size = size + const w = size[0] - this.margin * 2 + const h = size[1] - this.margin * 2 + + line_color = line_color || "#666" + + ctx.save() + ctx.translate(this.margin, this.margin) + + if (background_color) { + ctx.fillStyle = "#111" + ctx.fillRect(0, 0, w, h) + ctx.fillStyle = "#222" + ctx.fillRect(w * 0.5, 0, 1, h) + ctx.strokeStyle = "#333" + ctx.strokeRect(0, 0, w, h) + } + ctx.strokeStyle = line_color + if (inactive) ctx.globalAlpha = 0.5 + ctx.beginPath() + for (const p of points) { + ctx.lineTo(p[0] * w, (1.0 - p[1]) * h) + } + ctx.stroke() + ctx.globalAlpha = 1 + if (!inactive) { + for (const [i, p] of points.entries()) { + ctx.fillStyle = this.selected == i + ? "#FFF" + : (this.nearest == i ? "#DDD" : "#AAA") + ctx.beginPath() + ctx.arc(p[0] * w, (1.0 - p[1]) * h, 2, 0, Math.PI * 2) + ctx.fill() + } + } + ctx.restore() + } + + // localpos is mouse in curve editor space + onMouseDown(localpos: Point, graphcanvas: LGraphCanvas): boolean | undefined { + const points = this.points + if (!points) return + if (localpos[1] < 0) return + + // this.captureInput(true); + if (this.size == null) throw new Error("CurveEditor.size was null or undefined.") + const w = this.size[0] - this.margin * 2 + const h = this.size[1] - this.margin * 2 + const x = localpos[0] - this.margin + const y = localpos[1] - this.margin + const pos: Point = [x, y] + const max_dist = 30 / graphcanvas.ds.scale + // search closer one + this.selected = this.getCloserPoint(pos, max_dist) + // create one + if (this.selected == -1) { + const point: Point = [x / w, 1 - y / h] + points.push(point) + points.sort(function (a, b) { + return a[0] - b[0] + }) + this.selected = points.indexOf(point) + this.must_update = true + } + if (this.selected != -1) return true + } + + onMouseMove(localpos: Point, graphcanvas: LGraphCanvas): void { + const points = this.points + if (!points) return + + const s = this.selected + if (s < 0) return + + if (this.size == null) throw new Error("CurveEditor.size was null or undefined.") + const x = (localpos[0] - this.margin) / (this.size[0] - this.margin * 2) + const y = (localpos[1] - this.margin) / (this.size[1] - this.margin * 2) + const curvepos: Point = [ + localpos[0] - this.margin, + localpos[1] - this.margin, + ] + const max_dist = 30 / graphcanvas.ds.scale + this._nearest = this.getCloserPoint(curvepos, max_dist) + const point = points[s] + if (point) { + const is_edge_point = s == 0 || s == points.length - 1 + if ( + !is_edge_point && + (localpos[0] < -10 || + localpos[0] > this.size[0] + 10 || + localpos[1] < -10 || + localpos[1] > this.size[1] + 10) + ) { + points.splice(s, 1) + this.selected = -1 + return + } + // not edges + if (!is_edge_point) point[0] = clamp(x, 0, 1) + else point[0] = s == 0 ? 0 : 1 + point[1] = 1.0 - clamp(y, 0, 1) + points.sort(function (a, b) { + return a[0] - b[0] + }) + this.selected = points.indexOf(point) + this.must_update = true + } + } + + // Former params: localpos, graphcanvas + onMouseUp(): boolean { + this.selected = -1 + return false + } + + getCloserPoint(pos: Point, max_dist: number): number { + const points = this.points + if (!points) return -1 + + max_dist = max_dist || 30 + if (this.size == null) throw new Error("CurveEditor.size was null or undefined.") + const w = this.size[0] - this.margin * 2 + const h = this.size[1] - this.margin * 2 + const num = points.length + const p2: Point = [0, 0] + let min_dist = 1_000_000 + let closest = -1 + + for (let i = 0; i < num; ++i) { + const p = points[i] + p2[0] = p[0] * w + p2[1] = (1.0 - p[1]) * h + const dist = distance(pos, p2) + if (dist > min_dist || dist > max_dist) continue + + closest = i + min_dist = dist + } + return closest + } +} diff --git a/src/lib/litegraph/src/DragAndScale.ts b/src/lib/litegraph/src/DragAndScale.ts new file mode 100644 index 0000000000..8a56988604 --- /dev/null +++ b/src/lib/litegraph/src/DragAndScale.ts @@ -0,0 +1,311 @@ +import type { Point, ReadOnlyRect, Rect } from "./interfaces" + +import { EaseFunction, Rectangle } from "./litegraph" + +export interface DragAndScaleState { + /** + * The offset from the top-left of the current canvas viewport to `[0, 0]` in graph space. + * Or said another way, the inverse offset of the viewport. + */ + offset: [number, number] + /** The scale of the graph. */ + scale: number +} + +export type AnimationOptions = { + /** Duration of the animation in milliseconds. */ + duration?: number + /** Relative target zoom level. 1 means the view is fit exactly on the bounding box. */ + zoom?: number + /** The animation easing function (curve) */ + easing?: EaseFunction +} + +export class DragAndScale { + /** + * The state of this DragAndScale instance. + * + * Implemented as a POCO that can be proxied without side-effects. + */ + state: DragAndScaleState + lastState: DragAndScaleState = { + offset: [0, 0], + scale: 0, + } + + /** Maximum scale (zoom in) */ + max_scale: number + /** Minimum scale (zoom out) */ + min_scale: number + enabled: boolean + last_mouse: Point + element: HTMLCanvasElement + visible_area: Rectangle + dragging?: boolean + viewport?: Rect + + onredraw?(das: DragAndScale): void + onChanged?(scale: number, offset: Point): void + + get offset(): [number, number] { + return this.state.offset + } + + set offset(value: Point) { + this.state.offset[0] = value[0] + this.state.offset[1] = value[1] + } + + get scale(): number { + return this.state.scale + } + + set scale(value: number) { + this.state.scale = value + } + + constructor(element: HTMLCanvasElement) { + this.state = { + offset: [0, 0], + scale: 1, + } + this.max_scale = 10 + this.min_scale = 0.1 + this.enabled = true + this.last_mouse = [0, 0] + this.visible_area = new Rectangle() + + this.element = element + } + + /** + * Returns `true` if the current state has changed from the previous state. + * @returns `true` if the current state has changed from the previous state, otherwise `false`. + */ + #stateHasChanged(): boolean { + const current = this.state + const previous = this.lastState + + return current.scale !== previous.scale || + current.offset[0] !== previous.offset[0] || + current.offset[1] !== previous.offset[1] + } + + computeVisibleArea(viewport: Rect | undefined): void { + const { scale, offset, visible_area } = this + + if (this.#stateHasChanged()) { + this.onChanged?.(scale, offset) + copyState(this.state, this.lastState) + } + + if (!this.element) { + visible_area[0] = visible_area[1] = visible_area[2] = visible_area[3] = 0 + return + } + let { width, height } = this.element + let startx = -offset[0] + let starty = -offset[1] + if (viewport) { + startx += viewport[0] / scale + starty += viewport[1] / scale + width = viewport[2] + height = viewport[3] + } + const endx = startx + width / scale + const endy = starty + height / scale + visible_area[0] = startx + visible_area[1] = starty + visible_area.resizeBottomRight(endx, endy) + } + + toCanvasContext(ctx: CanvasRenderingContext2D): void { + ctx.scale(this.scale, this.scale) + ctx.translate(this.offset[0], this.offset[1]) + } + + convertOffsetToCanvas(pos: Point): Point { + return [ + (pos[0] + this.offset[0]) * this.scale, + (pos[1] + this.offset[1]) * this.scale, + ] + } + + convertCanvasToOffset(pos: Point, out?: Point): Point { + out = out || [0, 0] + out[0] = pos[0] / this.scale - this.offset[0] + out[1] = pos[1] / this.scale - this.offset[1] + return out + } + + /** @deprecated Has not been kept up to date */ + mouseDrag(x: number, y: number): void { + this.offset[0] += x / this.scale + this.offset[1] += y / this.scale + + this.onredraw?.(this) + } + + changeScale(value: number, zooming_center?: Point, roundToScaleOne = true): void { + if (value < this.min_scale) { + value = this.min_scale + } else if (value > this.max_scale) { + value = this.max_scale + } + if (value == this.scale) return + + const rect = this.element.getBoundingClientRect() + if (!rect) return + + zooming_center = zooming_center ?? [rect.width * 0.5, rect.height * 0.5] + + const normalizedCenter: Point = [ + zooming_center[0] - rect.x, + zooming_center[1] - rect.y, + ] + const center = this.convertCanvasToOffset(normalizedCenter) + this.scale = value + if (roundToScaleOne && Math.abs(this.scale - 1) < 0.01) this.scale = 1 + const new_center = this.convertCanvasToOffset(normalizedCenter) + const delta_offset = [ + new_center[0] - center[0], + new_center[1] - center[1], + ] + + this.offset[0] += delta_offset[0] + this.offset[1] += delta_offset[1] + + this.onredraw?.(this) + } + + changeDeltaScale(value: number, zooming_center?: Point): void { + this.changeScale(this.scale * value, zooming_center) + } + + /** + * Fits the view to the specified bounds. + * @param bounds The bounds to fit the view to, defined by a rectangle. + */ + fitToBounds(bounds: ReadOnlyRect, { zoom = 0.75 }: { zoom?: number } = {}): void { + const cw = this.element.width / window.devicePixelRatio + const ch = this.element.height / window.devicePixelRatio + let targetScale = this.scale + + if (zoom > 0) { + const targetScaleX = (zoom * cw) / Math.max(bounds[2], 300) + const targetScaleY = (zoom * ch) / Math.max(bounds[3], 300) + + // Choose the smaller scale to ensure the node fits into the viewport + // Ensure we don't go over the max scale + targetScale = Math.min(targetScaleX, targetScaleY, this.max_scale) + } + + const scaledWidth = cw / targetScale + const scaledHeight = ch / targetScale + + // Calculate the target position to center the bounds in the viewport + const targetX = -bounds[0] - (bounds[2] * 0.5) + (scaledWidth * 0.5) + const targetY = -bounds[1] - (bounds[3] * 0.5) + (scaledHeight * 0.5) + + // Apply the changes immediately + this.offset[0] = targetX + this.offset[1] = targetY + this.scale = targetScale + } + + /** + * Starts an animation to fit the view around the specified selection of nodes. + * @param bounds The bounds to animate the view to, defined by a rectangle. + */ + animateToBounds( + bounds: ReadOnlyRect, + setDirty: () => void, + { + duration = 350, + zoom = 0.75, + easing = EaseFunction.EASE_IN_OUT_QUAD, + }: AnimationOptions = {}, + ) { + if (!(duration > 0)) throw new RangeError("Duration must be greater than 0") + + const easeFunctions = { + linear: (t: number) => t, + easeInQuad: (t: number) => t * t, + easeOutQuad: (t: number) => t * (2 - t), + easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t), + } + const easeFunction = easeFunctions[easing] ?? easeFunctions.linear + + const startTimestamp = performance.now() + const cw = this.element.width / window.devicePixelRatio + const ch = this.element.height / window.devicePixelRatio + const startX = this.offset[0] + const startY = this.offset[1] + const startX2 = startX - (cw / this.scale) + const startY2 = startY - (ch / this.scale) + const startScale = this.scale + let targetScale = startScale + + if (zoom > 0) { + const targetScaleX = (zoom * cw) / Math.max(bounds[2], 300) + const targetScaleY = (zoom * ch) / Math.max(bounds[3], 300) + + // Choose the smaller scale to ensure the node fits into the viewport + // Ensure we don't go over the max scale + targetScale = Math.min(targetScaleX, targetScaleY, this.max_scale) + } + const scaledWidth = cw / targetScale + const scaledHeight = ch / targetScale + + const targetX = -bounds[0] - (bounds[2] * 0.5) + (scaledWidth * 0.5) + const targetY = -bounds[1] - (bounds[3] * 0.5) + (scaledHeight * 0.5) + const targetX2 = targetX - scaledWidth + const targetY2 = targetY - scaledHeight + + const animate = (timestamp: number) => { + const elapsed = timestamp - startTimestamp + const progress = Math.min(elapsed / duration, 1) + const easedProgress = easeFunction(progress) + + const currentX = startX + ((targetX - startX) * easedProgress) + const currentY = startY + ((targetY - startY) * easedProgress) + this.offset[0] = currentX + this.offset[1] = currentY + + if (zoom > 0) { + const currentX2 = startX2 + ((targetX2 - startX2) * easedProgress) + const currentY2 = startY2 + ((targetY2 - startY2) * easedProgress) + const currentWidth = Math.abs(currentX2 - currentX) + const currentHeight = Math.abs(currentY2 - currentY) + + this.scale = Math.min(cw / currentWidth, ch / currentHeight) + } + + setDirty() + + if (progress < 1) { + animationId = requestAnimationFrame(animate) + } else { + cancelAnimationFrame(animationId) + } + } + let animationId = requestAnimationFrame(animate) + } + + reset(): void { + this.scale = 1 + this.offset[0] = 0 + this.offset[1] = 0 + } +} + +/** + * Copies the values of one state into another, preserving references. + * @param from The state to copy values from. + * @param to The state to copy values into. + */ +function copyState(from: DragAndScaleState, to: DragAndScaleState): void { + to.scale = from.scale + to.offset[0] = from.offset[0] + to.offset[1] = from.offset[1] +} diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts new file mode 100644 index 0000000000..10eaf43e88 --- /dev/null +++ b/src/lib/litegraph/src/LGraph.ts @@ -0,0 +1,1936 @@ +import type { DragAndScaleState } from "./DragAndScale" +import type { LGraphEventMap } from "./infrastructure/LGraphEventMap" +import type { + Dictionary, + IContextMenuValue, + LinkNetwork, + LinkSegment, + MethodNames, + OptionalProps, + Point, + Positionable, +} from "./interfaces" +import type { + ExportedSubgraph, + ISerialisedGraph, + ISerialisedNode, + Serialisable, + SerialisableGraph, + SerialisableReroute, +} from "./types/serialisation" +import type { UUID } from "@/utils/uuid" + +import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from "@/constants" +import { createUuidv4, zeroUuid } from "@/utils/uuid" + +import { CustomEventTarget } from "./infrastructure/CustomEventTarget" +import { LGraphCanvas } from "./LGraphCanvas" +import { LGraphGroup } from "./LGraphGroup" +import { LGraphNode, type NodeId } from "./LGraphNode" +import { LiteGraph, SubgraphNode } from "./litegraph" +import { type LinkId, LLink } from "./LLink" +import { MapProxyHandler } from "./MapProxyHandler" +import { alignOutsideContainer, alignToContainer, createBounds } from "./measure" +import { Reroute, type RerouteId } from "./Reroute" +import { stringOrEmpty } from "./strings" +import { type GraphOrSubgraph, Subgraph } from "./subgraph/Subgraph" +import { SubgraphInput } from "./subgraph/SubgraphInput" +import { SubgraphOutput } from "./subgraph/SubgraphOutput" +import { findUsedSubgraphIds, getBoundaryLinks, groupResolvedByOutput, mapSubgraphInputsAndLinks, mapSubgraphOutputsAndLinks, multiClone, splitPositionables } from "./subgraph/subgraphUtils" +import { Alignment, LGraphEventMode } from "./types/globalEnums" +import { getAllNestedItems } from "./utils/collections" + +export interface LGraphState { + lastGroupId: number + lastNodeId: number + lastLinkId: number + lastRerouteId: number +} + +type ParamsArray, K extends MethodNames> = + Parameters[1] extends undefined + ? Parameters | Parameters[0] + : Parameters + +/** Configuration used by {@link LGraph} `config`. */ +export interface LGraphConfig { + /** @deprecated Legacy config - unused */ + align_to_grid?: any + links_ontop?: any +} + +export interface LGraphExtra extends Dictionary { + reroutes?: SerialisableReroute[] + linkExtensions?: { id: number, parentId: number | undefined }[] + ds?: DragAndScaleState +} + +export interface BaseLGraph { + /** The root graph. */ + readonly rootGraph: LGraph +} + +/** + * LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop. + * supported callbacks: + * + onNodeAdded: when a new node is added to the graph + * + onNodeRemoved: when a node inside this graph is removed + */ +export class LGraph implements LinkNetwork, BaseLGraph, Serialisable { + static serialisedSchemaVersion = 1 as const + + static STATUS_STOPPED = 1 + static STATUS_RUNNING = 2 + + /** List of LGraph properties that are manually handled by {@link LGraph.configure}. */ + static readonly ConfigureProperties = new Set([ + "nodes", + "groups", + "links", + "state", + "reroutes", + "floatingLinks", + "id", + "subgraphs", + "definitions", + "inputs", + "outputs", + "widgets", + "inputNode", + "outputNode", + "extra", + ]) + + id: UUID = zeroUuid + revision: number = 0 + + _version: number = -1 + /** The backing store for links. Keys are wrapped in String() */ + _links: Map = new Map() + /** + * Indexed property access is deprecated. + * Backwards compatibility with a Proxy has been added, but will eventually be removed. + * + * Use {@link Map} methods: + * ``` + * const linkId = 123 + * const link = graph.links.get(linkId) + * // Deprecated: const link = graph.links[linkId] + * ``` + */ + links: Map & Record + list_of_graphcanvas: LGraphCanvas[] | null + status: number = LGraph.STATUS_STOPPED + + state: LGraphState = { + lastGroupId: 0, + lastNodeId: 0, + lastLinkId: 0, + lastRerouteId: 0, + } + + readonly events = new CustomEventTarget() + readonly _subgraphs: Map = new Map() + + _nodes: (LGraphNode | SubgraphNode)[] = [] + _nodes_by_id: Record = {} + _nodes_in_order: LGraphNode[] = [] + _nodes_executable: LGraphNode[] | null = null + _groups: LGraphGroup[] = [] + iteration: number = 0 + globaltime: number = 0 + /** @deprecated Unused */ + runningtime: number = 0 + fixedtime: number = 0 + fixedtime_lapse: number = 0.01 + elapsed_time: number = 0.01 + last_update_time: number = 0 + starttime: number = 0 + catch_errors: boolean = true + execution_timer_id?: number | null + errors_in_execution?: boolean + /** @deprecated Unused */ + execution_time!: number + _last_trigger_time?: number + filter?: string + /** Must contain serialisable values, e.g. primitive types */ + config: LGraphConfig = {} + vars: Dictionary = {} + nodes_executing: boolean[] = [] + nodes_actioning: (string | boolean)[] = [] + nodes_executedAction: string[] = [] + extra: LGraphExtra = {} + + /** @deprecated Deserialising a workflow sets this unused property. */ + version?: number + + /** @returns Whether the graph has no items */ + get empty(): boolean { + return this._nodes.length + this._groups.length + this.reroutes.size === 0 + } + + /** @returns All items on the canvas that can be selected */ + *positionableItems(): Generator { + for (const node of this._nodes) yield node + for (const group of this._groups) yield group + for (const reroute of this.reroutes.values()) yield reroute + return + } + + /** Internal only. Not required for serialisation; calculated on deserialise. */ + #lastFloatingLinkId: number = 0 + + #floatingLinks: Map = new Map() + get floatingLinks(): ReadonlyMap { + return this.#floatingLinks + } + + #reroutes = new Map() + /** All reroutes in this graph. */ + public get reroutes(): Map { + return this.#reroutes + } + + get rootGraph(): LGraph { + return this + } + + get isRootGraph(): boolean { + return this.rootGraph === this + } + + /** @deprecated See {@link state}.{@link LGraphState.lastNodeId lastNodeId} */ + get last_node_id() { + return this.state.lastNodeId + } + + set last_node_id(value) { + this.state.lastNodeId = value + } + + /** @deprecated See {@link state}.{@link LGraphState.lastLinkId lastLinkId} */ + get last_link_id() { + return this.state.lastLinkId + } + + set last_link_id(value) { + this.state.lastLinkId = value + } + + onAfterStep?(): void + onBeforeStep?(): void + onPlayEvent?(): void + onStopEvent?(): void + onAfterExecute?(): void + onExecuteStep?(): void + onNodeAdded?(node: LGraphNode): void + onNodeRemoved?(node: LGraphNode): void + onTrigger?(action: string, param: unknown): void + onBeforeChange?(graph: LGraph, info?: LGraphNode): void + onAfterChange?(graph: LGraph, info?: LGraphNode | null): void + onConnectionChange?(node: LGraphNode): void + on_change?(graph: LGraph): void + onSerialize?(data: ISerialisedGraph | SerialisableGraph): void + onConfigure?(data: ISerialisedGraph | SerialisableGraph): void + onGetNodeMenuOptions?(options: (IContextMenuValue | null)[], node: LGraphNode): void + + private _input_nodes?: LGraphNode[] + + /** + * See {@link LGraph} + * @param o data from previous serialization [optional] + */ + constructor(o?: ISerialisedGraph | SerialisableGraph) { + if (LiteGraph.debug) console.log("Graph created") + + /** @see MapProxyHandler */ + const links = this._links + MapProxyHandler.bindAllMethods(links) + const handler = new MapProxyHandler() + this.links = new Proxy(links, handler) as Map & Record + + this.list_of_graphcanvas = null + this.clear() + + if (o) this.configure(o) + } + + /** + * Removes all nodes from this graph + */ + clear(): void { + this.stop() + this.status = LGraph.STATUS_STOPPED + + this.id = zeroUuid + this.revision = 0 + + this.state = { + lastGroupId: 0, + lastNodeId: 0, + lastLinkId: 0, + lastRerouteId: 0, + } + + // used to detect changes + this._version = -1 + this._subgraphs.clear() + + // safe clear + if (this._nodes) { + for (const _node of this._nodes) { + _node.onRemoved?.() + } + } + + // nodes + this._nodes = [] + this._nodes_by_id = {} + // nodes sorted in execution order + this._nodes_in_order = [] + // nodes that contain onExecute sorted in execution order + this._nodes_executable = null + + this._links.clear() + this.reroutes.clear() + this.#floatingLinks.clear() + + this.#lastFloatingLinkId = 0 + + // other scene stuff + this._groups = [] + + // iterations + this.iteration = 0 + + // custom data + this.config = {} + this.vars = {} + // to store custom data + this.extra = {} + + // timing + this.globaltime = 0 + this.runningtime = 0 + this.fixedtime = 0 + this.fixedtime_lapse = 0.01 + this.elapsed_time = 0.01 + this.last_update_time = 0 + this.starttime = 0 + + this.catch_errors = true + + this.nodes_executing = [] + this.nodes_actioning = [] + this.nodes_executedAction = [] + + // notify canvas to redraw + this.change() + + this.canvasAction(c => c.clear()) + } + + get subgraphs(): Map { + return this.rootGraph._subgraphs + } + + get nodes() { + return this._nodes + } + + get groups() { + return this._groups + } + + /** + * Attach Canvas to this graph + */ + attachCanvas(canvas: LGraphCanvas): void { + if (!(canvas instanceof LGraphCanvas)) { + throw new TypeError("attachCanvas expects an LGraphCanvas instance") + } + + this.primaryCanvas = canvas + + this.list_of_graphcanvas ??= [] + if (!this.list_of_graphcanvas.includes(canvas)) { + this.list_of_graphcanvas.push(canvas) + } + + if (canvas.graph === this) return + + canvas.graph?.detachCanvas(canvas) + canvas.graph = this + canvas.subgraph = undefined + } + + /** + * Detach Canvas from this graph + */ + detachCanvas(canvas: LGraphCanvas): void { + canvas.graph = null + const canvases = this.list_of_graphcanvas + if (canvases) { + const pos = canvases.indexOf(canvas) + if (pos !== -1) canvases.splice(pos, 1) + } + } + + /** + * @deprecated Will be removed in 0.9 + * Starts running this graph every interval milliseconds. + * @param interval amount of milliseconds between executions, if 0 then it renders to the monitor refresh rate + */ + start(interval?: number): void { + if (this.status == LGraph.STATUS_RUNNING) return + this.status = LGraph.STATUS_RUNNING + + this.onPlayEvent?.() + this.sendEventToAllNodes("onStart") + + // launch + this.starttime = LiteGraph.getTime() + this.last_update_time = this.starttime + interval ||= 0 + + // execute once per frame + if ( + interval == 0 && + typeof window != "undefined" && + window.requestAnimationFrame + ) { + const on_frame = () => { + if (this.execution_timer_id != -1) return + + window.requestAnimationFrame(on_frame) + this.onBeforeStep?.() + this.runStep(1, !this.catch_errors) + this.onAfterStep?.() + } + this.execution_timer_id = -1 + on_frame() + } else { + // execute every 'interval' ms + this.execution_timer_id = setInterval(() => { + // execute + this.onBeforeStep?.() + this.runStep(1, !this.catch_errors) + this.onAfterStep?.() + }, interval) + } + } + + /** + * @deprecated Will be removed in 0.9 + * Stops the execution loop of the graph + */ + stop(): void { + if (this.status == LGraph.STATUS_STOPPED) return + + this.status = LGraph.STATUS_STOPPED + + this.onStopEvent?.() + + if (this.execution_timer_id != null) { + if (this.execution_timer_id != -1) { + clearInterval(this.execution_timer_id) + } + this.execution_timer_id = null + } + + this.sendEventToAllNodes("onStop") + } + + /** + * Run N steps (cycles) of the graph + * @param num number of steps to run, default is 1 + * @param do_not_catch_errors [optional] if you want to try/catch errors + * @param limit max number of nodes to execute (used to execute from start to a node) + */ + runStep(num: number, do_not_catch_errors: boolean, limit?: number): void { + num = num || 1 + + const start = LiteGraph.getTime() + this.globaltime = 0.001 * (start - this.starttime) + + const nodes = this._nodes_executable || this._nodes + if (!nodes) return + + limit = limit || nodes.length + + if (do_not_catch_errors) { + // iterations + for (let i = 0; i < num; i++) { + for (let j = 0; j < limit; ++j) { + const node = nodes[j] + // FIXME: Looks like copy/paste broken logic - checks for "on", executes "do" + if (node.mode == LGraphEventMode.ALWAYS && node.onExecute) { + // wrap node.onExecute(); + node.doExecute?.() + } + } + + this.fixedtime += this.fixedtime_lapse + this.onExecuteStep?.() + } + + this.onAfterExecute?.() + } else { + try { + // iterations + for (let i = 0; i < num; i++) { + for (let j = 0; j < limit; ++j) { + const node = nodes[j] + if (node.mode == LGraphEventMode.ALWAYS) { + node.onExecute?.() + } + } + + this.fixedtime += this.fixedtime_lapse + this.onExecuteStep?.() + } + + this.onAfterExecute?.() + this.errors_in_execution = false + } catch (error) { + this.errors_in_execution = true + if (LiteGraph.throw_errors) throw error + + if (LiteGraph.debug) console.log("Error during execution:", error) + this.stop() + } + } + + const now = LiteGraph.getTime() + let elapsed = now - start + if (elapsed == 0) elapsed = 1 + + this.execution_time = 0.001 * elapsed + this.globaltime += 0.001 * elapsed + this.iteration += 1 + this.elapsed_time = (now - this.last_update_time) * 0.001 + this.last_update_time = now + this.nodes_executing = [] + this.nodes_actioning = [] + this.nodes_executedAction = [] + } + + /** + * Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than + * nodes with only inputs. + */ + updateExecutionOrder(): void { + this._nodes_in_order = this.computeExecutionOrder(false) + this._nodes_executable = [] + for (const node of this._nodes_in_order) { + if (node.onExecute) { + this._nodes_executable.push(node) + } + } + } + + // This is more internal, it computes the executable nodes in order and returns it + computeExecutionOrder( + only_onExecute: boolean, + set_level?: boolean, + ): LGraphNode[] { + const L: LGraphNode[] = [] + const S: LGraphNode[] = [] + const M: Dictionary = {} + // to avoid repeating links + const visited_links: Record = {} + const remaining_links: Record = {} + + // search for the nodes without inputs (starting nodes) + for (const node of this._nodes) { + if (only_onExecute && !node.onExecute) { + continue + } + + // add to pending nodes + M[node.id] = node + + // num of input connections + let num = 0 + if (node.inputs) { + for (const input of node.inputs) { + if (input?.link != null) { + num += 1 + } + } + } + + if (num == 0) { + // is a starting node + S.push(node) + if (set_level) node._level = 1 + } else { + // num of input links + if (set_level) node._level = 0 + remaining_links[node.id] = num + } + } + + while (true) { + // get an starting node + const node = S.shift() + if (node === undefined) break + + // add to ordered list + L.push(node) + // remove from the pending nodes + delete M[node.id] + + if (!node.outputs) continue + + // for every output + for (const output of node.outputs) { + // not connected + // TODO: Confirm functionality, clean condition + if (output?.links == null || output.links.length == 0) + continue + + // for every connection + for (const link_id of output.links) { + const link = this._links.get(link_id) + if (!link) continue + + // already visited link (ignore it) + if (visited_links[link.id]) continue + + const target_node = this.getNodeById(link.target_id) + if (target_node == null) { + visited_links[link.id] = true + continue + } + + if (set_level) { + node._level ??= 0 + if (!target_node._level || target_node._level <= node._level) { + target_node._level = node._level + 1 + } + } + + // mark as visited + visited_links[link.id] = true + // reduce the number of links remaining + remaining_links[target_node.id] -= 1 + + // if no more links, then add to starters array + if (remaining_links[target_node.id] == 0) S.push(target_node) + } + } + } + + // the remaining ones (loops) + for (const i in M) { + L.push(M[i]) + } + + if (L.length != this._nodes.length && LiteGraph.debug) + console.warn("something went wrong, nodes missing") + + /** Ensure type is set */ + type OrderedLGraphNode = LGraphNode & { order: number } + + /** Sets the order property of each provided node to its index in {@link nodes}. */ + function setOrder(nodes: LGraphNode[]): asserts nodes is OrderedLGraphNode[] { + const l = nodes.length + for (let i = 0; i < l; ++i) { + nodes[i].order = i + } + } + + // save order number in the node + setOrder(L) + + // sort now by priority + L.sort(function (A, B) { + // @ts-expect-error ctor props + const Ap = A.constructor.priority || A.priority || 0 + // @ts-expect-error ctor props + const Bp = B.constructor.priority || B.priority || 0 + // if same priority, sort by order + + return Ap == Bp + ? A.order - B.order + : Ap - Bp + }) + + // save order number in the node, again... + setOrder(L) + + return L + } + + /** + * Positions every node in a more readable manner + */ + arrange(margin?: number, layout?: string): void { + margin = margin || 100 + + const nodes = this.computeExecutionOrder(false, true) + const columns: LGraphNode[][] = [] + for (const node of nodes) { + const col = node._level || 1 + columns[col] ||= [] + columns[col].push(node) + } + + let x = margin + + for (const column of columns) { + if (!column) continue + + let max_size = 100 + let y = margin + LiteGraph.NODE_TITLE_HEIGHT + for (const node of column) { + node.pos[0] = layout == LiteGraph.VERTICAL_LAYOUT ? y : x + node.pos[1] = layout == LiteGraph.VERTICAL_LAYOUT ? x : y + const max_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 1 : 0 + if (node.size[max_size_index] > max_size) { + max_size = node.size[max_size_index] + } + const node_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 0 : 1 + y += node.size[node_size_index] + margin + LiteGraph.NODE_TITLE_HEIGHT + } + x += max_size + margin + } + + this.setDirtyCanvas(true, true) + } + + /** + * Returns the amount of time the graph has been running in milliseconds + * @returns number of milliseconds the graph has been running + */ + getTime(): number { + return this.globaltime + } + + /** + * Returns the amount of time accumulated using the fixedtime_lapse var. + * This is used in context where the time increments should be constant + * @returns number of milliseconds the graph has been running + */ + getFixedTime(): number { + return this.fixedtime + } + + /** + * Returns the amount of time it took to compute the latest iteration. + * Take into account that this number could be not correct + * if the nodes are using graphical actions + * @returns number of milliseconds it took the last cycle + */ + getElapsedTime(): number { + return this.elapsed_time + } + + /** + * @deprecated Will be removed in 0.9 + * Sends an event to all the nodes, useful to trigger stuff + * @param eventname the name of the event (function to be called) + * @param params parameters in array format + */ + sendEventToAllNodes( + eventname: string, + params?: object | object[], + mode?: LGraphEventMode, + ): void { + mode = mode || LGraphEventMode.ALWAYS + + const nodes = this._nodes_in_order || this._nodes + if (!nodes) return + + for (const node of nodes) { + // @ts-expect-error deprecated + if (!node[eventname] || node.mode != mode) continue + if (params === undefined) { + // @ts-expect-error deprecated + node[eventname]() + } else if (params && params.constructor === Array) { + // @ts-expect-error deprecated + node[eventname].apply(node, params) + } else { + // @ts-expect-error deprecated + node[eventname](params) + } + } + } + + /** + * Runs an action on every canvas registered to this graph. + * @param action Action to run for every canvas + */ + canvasAction(action: (canvas: LGraphCanvas) => void): void { + const canvases = this.list_of_graphcanvas + if (!canvases) return + for (const canvas of canvases) action(canvas) + } + + /** @deprecated See {@link LGraph.canvasAction} */ + sendActionToCanvas>( + action: T, + params?: ParamsArray, + ): void { + const { list_of_graphcanvas } = this + if (!list_of_graphcanvas) return + + for (const c of list_of_graphcanvas) { + c[action]?.apply(c, params) + } + } + + /** + * Adds a new node instance to this graph + * @param node the instance of the node + */ + add( + node: LGraphNode | LGraphGroup, + skip_compute_order?: boolean, + ): LGraphNode | null | undefined { + if (!node) return + const { state } = this + + // Ensure created items are snapped + if (LiteGraph.alwaysSnapToGrid) { + const snapTo = this.getSnapToGridSize() + if (snapTo) node.snapToGrid(snapTo) + } + + // LEGACY: This was changed from constructor === LGraphGroup + // groups + if (node instanceof LGraphGroup) { + // Assign group ID + if (node.id == null || node.id === -1) node.id = ++state.lastGroupId + if (node.id > state.lastGroupId) state.lastGroupId = node.id + + this._groups.push(node) + this.setDirtyCanvas(true) + this.change() + node.graph = this + this._version++ + return + } + + // nodes + if (node.id != -1 && this._nodes_by_id[node.id] != null) { + console.warn( + "LiteGraph: there is already a node with this ID, changing it", + ) + node.id = LiteGraph.use_uuids + ? LiteGraph.uuidv4() + : ++state.lastNodeId + } + + if (this._nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES) { + throw "LiteGraph: max number of nodes in a graph reached" + } + + // give him an id + if (LiteGraph.use_uuids) { + if (node.id == null || node.id == -1) + node.id = LiteGraph.uuidv4() + } else { + if (node.id == null || node.id == -1) { + node.id = ++state.lastNodeId + } else if (typeof node.id === "number" && state.lastNodeId < node.id) { + state.lastNodeId = node.id + } + } + + node.graph = this + this._version++ + + this._nodes.push(node) + this._nodes_by_id[node.id] = node + + node.onAdded?.(this) + + if (this.config.align_to_grid) node.alignToGrid() + + if (!skip_compute_order) this.updateExecutionOrder() + + this.onNodeAdded?.(node) + + this.setDirtyCanvas(true) + this.change() + + // to chain actions + return node + } + + /** + * Removes a node from the graph + * @param node the instance of the node + */ + remove(node: LGraphNode | LGraphGroup): void { + // LEGACY: This was changed from constructor === LiteGraph.LGraphGroup + if (node instanceof LGraphGroup) { + this.canvasAction(c => c.deselect(node)) + + const index = this._groups.indexOf(node) + if (index != -1) { + this._groups.splice(index, 1) + } + node.graph = undefined + this._version++ + this.setDirtyCanvas(true, true) + this.change() + return + } + + // not found + if (this._nodes_by_id[node.id] == null) { + console.warn("LiteGraph: node not found", node) + return + } + // cannot be removed + if (node.ignore_remove) { + console.warn("LiteGraph: node cannot be removed", node) + return + } + + // sure? - almost sure is wrong + this.beforeChange() + + const { inputs, outputs } = node + + // disconnect inputs + if (inputs) { + for (const [i, slot] of inputs.entries()) { + if (slot.link != null) node.disconnectInput(i, true) + } + } + + // disconnect outputs + if (outputs) { + for (const [i, slot] of outputs.entries()) { + if (slot.links?.length) node.disconnectOutput(i) + } + } + + // Floating links + for (const link of this.floatingLinks.values()) { + if (link.origin_id === node.id || link.target_id === node.id) { + this.removeFloatingLink(link) + } + } + + // callback + node.onRemoved?.() + + node.graph = null + this._version++ + + // remove from canvas render + const { list_of_graphcanvas } = this + if (list_of_graphcanvas) { + for (const canvas of list_of_graphcanvas) { + if (canvas.selected_nodes[node.id]) + delete canvas.selected_nodes[node.id] + + canvas.deselect(node) + } + } + + // remove from containers + const pos = this._nodes.indexOf(node) + if (pos != -1) this._nodes.splice(pos, 1) + + delete this._nodes_by_id[node.id] + + this.onNodeRemoved?.(node) + + // close panels + this.canvasAction(c => c.checkPanels()) + + this.setDirtyCanvas(true, true) + // sure? - almost sure is wrong + this.afterChange() + this.change() + + this.updateExecutionOrder() + } + + /** + * Returns a node by its id. + */ + getNodeById(id: NodeId | null | undefined): LGraphNode | null { + return id != null + ? this._nodes_by_id[id] + : null + } + + /** + * Returns a list of nodes that matches a class + * @param classObject the class itself (not an string) + * @returns a list with all the nodes of this type + */ + // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type + findNodesByClass(classObject: Function, result?: LGraphNode[]): LGraphNode[] { + result = result || [] + result.length = 0 + const { _nodes } = this + for (const node of _nodes) { + if (node.constructor === classObject) + result.push(node) + } + return result + } + + /** + * Returns a list of nodes that matches a type + * @param type the name of the node type + * @returns a list with all the nodes of this type + */ + findNodesByType(type: string, result: LGraphNode[]): LGraphNode[] { + const matchType = type.toLowerCase() + result = result || [] + result.length = 0 + const { _nodes } = this + for (const node of _nodes) { + if (node.type?.toLowerCase() == matchType) + result.push(node) + } + return result + } + + /** + * Returns the first node that matches a name in its title + * @param title the name of the node to search + * @returns the node or null + */ + findNodeByTitle(title: string): LGraphNode | null { + const { _nodes } = this + for (const node of _nodes) { + if (node.title == title) + return node + } + return null + } + + /** + * Returns a list of nodes that matches a name + * @param title the name of the node to search + * @returns a list with all the nodes with this name + */ + findNodesByTitle(title: string): LGraphNode[] { + const result: LGraphNode[] = [] + const { _nodes } = this + for (const node of _nodes) { + if (node.title == title) + result.push(node) + } + return result + } + + /** + * Returns the top-most node in this position of the canvas + * @param x the x coordinate in canvas space + * @param y the y coordinate in canvas space + * @param nodeList a list with all the nodes to search from, by default is all the nodes in the graph + * @returns the node at this position or null + */ + getNodeOnPos( + x: number, + y: number, + nodeList?: LGraphNode[], + ): LGraphNode | null { + const nodes = nodeList || this._nodes + let i = nodes.length + while (--i >= 0) { + const node = nodes[i] + if (node.isPointInside(x, y)) return node + } + return null + } + + /** + * Returns the top-most group in that position + * @param x The x coordinate in canvas space + * @param y The y coordinate in canvas space + * @returns The group or null + */ + getGroupOnPos(x: number, y: number): LGraphGroup | undefined { + return this._groups.toReversed().find(g => g.isPointInside(x, y)) + } + + /** + * Returns the top-most group with a titlebar in the provided position. + * @param x The x coordinate in canvas space + * @param y The y coordinate in canvas space + * @returns The group or null + */ + getGroupTitlebarOnPos(x: number, y: number): LGraphGroup | undefined { + return this._groups.toReversed().find(g => g.isPointInTitlebar(x, y)) + } + + /** + * Finds a reroute a the given graph point + * @param x X co-ordinate in graph space + * @param y Y co-ordinate in graph space + * @returns The first reroute under the given co-ordinates, or undefined + */ + getRerouteOnPos(x: number, y: number, reroutes?: Iterable): Reroute | undefined { + for (const reroute of reroutes ?? this.reroutes.values()) { + if (reroute.containsPoint([x, y])) return reroute + } + } + + /** + * Snaps the provided items to a grid. + * + * Item positions are reounded to the nearest multiple of {@link LiteGraph.CANVAS_GRID_SIZE}. + * + * When {@link LiteGraph.alwaysSnapToGrid} is enabled + * and the grid size is falsy, a default of 1 is used. + * @param items The items to be snapped to the grid + * @todo Currently only snaps nodes. + */ + snapToGrid(items: Set): void { + const snapTo = this.getSnapToGridSize() + if (!snapTo) return + + for (const item of getAllNestedItems(items)) { + if (!item.pinned) item.snapToGrid(snapTo) + } + } + + /** + * Finds the size of the grid that items should be snapped to when moved. + * @returns The size of the grid that items should be snapped to + */ + getSnapToGridSize(): number { + // Default to 1 when always snapping + return LiteGraph.alwaysSnapToGrid + ? LiteGraph.CANVAS_GRID_SIZE || 1 + : LiteGraph.CANVAS_GRID_SIZE + } + + /** + * @deprecated Will be removed in 0.9 + * Checks that the node type matches the node type registered, + * used when replacing a nodetype by a newer version during execution + * this replaces the ones using the old version with the new version + */ + checkNodeTypes() { + const { _nodes } = this + for (const [i, node] of _nodes.entries()) { + const ctor = LiteGraph.registered_node_types[node.type] + if (node.constructor == ctor) continue + + console.log("node being replaced by newer version:", node.type) + const newnode = LiteGraph.createNode(node.type) + if (!newnode) continue + _nodes[i] = newnode + newnode.configure(node.serialize()) + newnode.graph = this + this._nodes_by_id[newnode.id] = newnode + + if (node.inputs) newnode.inputs = [...node.inputs] + if (node.outputs) newnode.outputs = [...node.outputs] + } + this.updateExecutionOrder() + } + + // ********** GLOBALS ***************** + trigger(action: string, param: unknown) { + this.onTrigger?.(action, param) + } + + /** @todo Clean up - never implemented. */ + triggerInput(name: string, value: any): void { + const nodes = this.findNodesByTitle(name) + for (const node of nodes) { + // @ts-expect-error + node.onTrigger(value) + } + } + + /** @todo Clean up - never implemented. */ + setCallback(name: string, func: any): void { + const nodes = this.findNodesByTitle(name) + for (const node of nodes) { + // @ts-expect-error + node.setTrigger(func) + } + } + + // used for undo, called before any change is made to the graph + beforeChange(info?: LGraphNode): void { + this.onBeforeChange?.(this, info) + this.canvasAction(c => c.onBeforeChange?.(this)) + } + + // used to resend actions, called after any change is made to the graph + afterChange(info?: LGraphNode | null): void { + this.onAfterChange?.(this, info) + this.canvasAction(c => c.onAfterChange?.(this)) + } + + /** + * clears the triggered slot animation in all links (stop visual animation) + */ + clearTriggeredSlots(): void { + for (const link_info of this._links.values()) { + if (!link_info) continue + + if (link_info._last_time) link_info._last_time = 0 + } + } + + /* Called when something visually changed (not the graph!) */ + change(): void { + if (LiteGraph.debug) { + console.log("Graph changed") + } + this.canvasAction(c => c.setDirty(true, true)) + this.on_change?.(this) + } + + setDirtyCanvas(fg: boolean, bg?: boolean): void { + this.canvasAction(c => c.setDirty(fg, bg)) + } + + addFloatingLink(link: LLink): LLink { + if (link.id === -1) { + link.id = ++this.#lastFloatingLinkId + } + this.#floatingLinks.set(link.id, link) + + const slot = link.target_id !== -1 + ? this.getNodeById(link.target_id)?.inputs?.[link.target_slot] + : this.getNodeById(link.origin_id)?.outputs?.[link.origin_slot] + if (slot) { + slot._floatingLinks ??= new Set() + slot._floatingLinks.add(link) + } else { + console.warn(`Adding invalid floating link: target/slot: [${link.target_id}/${link.target_slot}] origin/slot: [${link.origin_id}/${link.origin_slot}]`) + } + + const reroutes = LLink.getReroutes(this, link) + for (const reroute of reroutes) { + reroute.floatingLinkIds.add(link.id) + } + return link + } + + removeFloatingLink(link: LLink): void { + this.#floatingLinks.delete(link.id) + + const slot = link.target_id !== -1 + ? this.getNodeById(link.target_id)?.inputs?.[link.target_slot] + : this.getNodeById(link.origin_id)?.outputs?.[link.origin_slot] + if (slot) { + slot._floatingLinks?.delete(link) + } + + const reroutes = LLink.getReroutes(this, link) + for (const reroute of reroutes) { + reroute.floatingLinkIds.delete(link.id) + if (reroute.floatingLinkIds.size === 0) { + delete reroute.floating + } + + if (reroute.totalLinks === 0) this.removeReroute(reroute.id) + } + } + + /** + * Finds the link with the provided ID. + * @param id ID of link to find + * @returns The link with the provided {@link id}, otherwise `undefined`. Always returns `undefined` if `id` is nullish. + */ + getLink(id: null | undefined): undefined + getLink(id: LinkId | null | undefined): LLink | undefined + getLink(id: LinkId | null | undefined): LLink | undefined { + return id == null ? undefined : this._links.get(id) + } + + /** + * Finds the reroute with the provided ID. + * @param id ID of reroute to find + * @returns The reroute with the provided {@link id}, otherwise `undefined`. Always returns `undefined` if `id` is nullish. + */ + getReroute(id: null | undefined): undefined + getReroute(id: RerouteId | null | undefined): Reroute | undefined + getReroute(id: RerouteId | null | undefined): Reroute | undefined { + return id == null ? undefined : this.reroutes.get(id) + } + + /** + * Configures a reroute on the graph where ID is already known (probably deserialisation). + * Creates the object if it does not exist. + * @param serialisedReroute See {@link SerialisableReroute} + */ + setReroute({ id, parentId, pos, linkIds, floating }: OptionalProps): Reroute { + id ??= ++this.state.lastRerouteId + if (id > this.state.lastRerouteId) this.state.lastRerouteId = id + + const reroute = this.reroutes.get(id) ?? new Reroute(id, this) + reroute.update(parentId, pos, linkIds, floating) + this.reroutes.set(id, reroute) + return reroute + } + + /** + * Creates a new reroute and adds it to the graph. + * @param pos Position in graph space + * @param before The existing link segment (reroute, link) that will be after this reroute, + * going from the node output to input. + * @returns The newly created reroute - typically ignored. + */ + createReroute(pos: Point, before: LinkSegment): Reroute { + const rerouteId = ++this.state.lastRerouteId + const linkIds = before instanceof Reroute + ? before.linkIds + : [before.id] + const floatingLinkIds = before instanceof Reroute + ? before.floatingLinkIds + : [before.id] + const reroute = new Reroute(rerouteId, this, pos, before.parentId, linkIds, floatingLinkIds) + this.reroutes.set(rerouteId, reroute) + for (const linkId of linkIds) { + const link = this._links.get(linkId) + if (!link) continue + if (link.parentId === before.parentId) link.parentId = rerouteId + + const reroutes = LLink.getReroutes(this, link) + for (const x of reroutes.filter(x => x.parentId === before.parentId)) { + x.parentId = rerouteId + } + } + + for (const linkId of floatingLinkIds) { + const link = this.floatingLinks.get(linkId) + if (!link) continue + if (link.parentId === before.parentId) link.parentId = rerouteId + + const reroutes = LLink.getReroutes(this, link) + for (const x of reroutes.filter(x => x.parentId === before.parentId)) { + x.parentId = rerouteId + } + } + + return reroute + } + + /** + * Removes a reroute from the graph + * @param id ID of reroute to remove + */ + removeReroute(id: RerouteId): void { + const { reroutes } = this + const reroute = reroutes.get(id) + if (!reroute) return + + this.canvasAction(c => c.deselect(reroute)) + + // Extract reroute from the reroute chain + const { parentId, linkIds, floatingLinkIds } = reroute + for (const reroute of reroutes.values()) { + if (reroute.parentId === id) reroute.parentId = parentId + } + + for (const linkId of linkIds) { + const link = this._links.get(linkId) + if (link && link.parentId === id) link.parentId = parentId + } + + for (const linkId of floatingLinkIds) { + const link = this.floatingLinks.get(linkId) + if (!link) { + console.warn(`Removed reroute had floating link ID that did not exist [${linkId}]`) + continue + } + + // A floating link is a unique branch; if there is no parent reroute, or + // the parent reroute has any other links, remove this floating link. + const floatingReroutes = LLink.getReroutes(this, link) + const lastReroute = floatingReroutes.at(-1) + const secondLastReroute = floatingReroutes.at(-2) + + if (reroute !== lastReroute) { + continue + } else if (secondLastReroute?.totalLinks !== 1) { + this.removeFloatingLink(link) + } else if (link.parentId === id) { + link.parentId = parentId + secondLastReroute.floating = reroute.floating + } + } + + reroutes.delete(id) + // This does not belong here; it should be handled by the caller, or run by a remove-many API. + // https://github.com/Comfy-Org/litegraph.js/issues/898 + this.setDirtyCanvas(false, true) + } + + /** + * Destroys a link + */ + removeLink(link_id: LinkId): void { + const link = this._links.get(link_id) + if (!link) return + + const node = this.getNodeById(link.target_id) + node?.disconnectInput(link.target_slot, false) + + link.disconnect(this) + } + + /** + * Creates a new subgraph definition, and adds it to the graph. + * @param data Exported data (typically serialised) to configure the new subgraph with + * @returns The newly created subgraph definition. + */ + createSubgraph(data: ExportedSubgraph): Subgraph { + const { id } = data + + const subgraph = new Subgraph(this.rootGraph, data) + this.subgraphs.set(id, subgraph) + + // FE: Create node defs + this.rootGraph.events.dispatch("subgraph-created", { subgraph, data }) + return subgraph + } + + convertToSubgraph(items: Set): { subgraph: Subgraph, node: SubgraphNode } { + if (items.size === 0) throw new Error("Cannot convert to subgraph: nothing to convert") + const { state, revision, config } = this + + const { boundaryLinks, boundaryFloatingLinks, internalLinks, boundaryInputLinks, boundaryOutputLinks } = getBoundaryLinks(this, items) + const { nodes, reroutes, groups } = splitPositionables(items) + + const boundingRect = createBounds(items) + if (!boundingRect) throw new Error("Failed to create bounding rect for subgraph") + + const resolvedInputLinks = boundaryInputLinks.map(x => x.resolve(this)) + const resolvedOutputLinks = boundaryOutputLinks.map(x => x.resolve(this)) + + const clonedNodes = multiClone(nodes) + + // Inputs, outputs, and links + const links = internalLinks.map(x => x.asSerialisable()) + const inputs = mapSubgraphInputsAndLinks(resolvedInputLinks, links) + const outputs = mapSubgraphOutputsAndLinks(resolvedOutputLinks, links) + + // Prepare subgraph data + const data = { + id: createUuidv4(), + name: "New Subgraph", + inputNode: { + id: SUBGRAPH_INPUT_ID, + bounding: [0, 0, 75, 100], + }, + outputNode: { + id: SUBGRAPH_OUTPUT_ID, + bounding: [0, 0, 75, 100], + }, + inputs, + outputs, + widgets: [], + version: LGraph.serialisedSchemaVersion, + state, + revision, + config, + links, + nodes: clonedNodes, + reroutes: structuredClone([...reroutes].map(reroute => reroute.asSerialisable())), + groups: structuredClone([...groups].map(group => group.serialize())), + } satisfies ExportedSubgraph + + const subgraph = this.createSubgraph(data) + subgraph.configure(data) + + // Position the subgraph input nodes + subgraph.inputNode.arrange() + subgraph.outputNode.arrange() + const { boundingRect: inputRect } = subgraph.inputNode + const { boundingRect: outputRect } = subgraph.outputNode + alignOutsideContainer(inputRect, Alignment.MidLeft, boundingRect, [50, 0]) + alignOutsideContainer(outputRect, Alignment.MidRight, boundingRect, [50, 0]) + + // Remove items converted to subgraph + for (const resolved of resolvedInputLinks) resolved.inputNode?.disconnectInput(resolved.inputNode.inputs.indexOf(resolved.input!), true) + for (const resolved of resolvedOutputLinks) resolved.outputNode?.disconnectOutput(resolved.outputNode.outputs.indexOf(resolved.output!), resolved.inputNode) + + for (const node of nodes) this.remove(node) + for (const reroute of reroutes) this.removeReroute(reroute.id) + for (const group of groups) this.remove(group) + + this.rootGraph.events.dispatch("convert-to-subgraph", { + subgraph, + bounds: boundingRect, + exportedSubgraph: data, + boundaryLinks, + resolvedInputLinks, + resolvedOutputLinks, + boundaryFloatingLinks, + internalLinks, + }) + + // Create subgraph node object + const subgraphNode = LiteGraph.createNode(subgraph.id, subgraph.name, { + inputs: structuredClone(inputs), + outputs: structuredClone(outputs), + }) + if (!subgraphNode) throw new Error("Failed to create subgraph node") + + // Resize to inputs/outputs + subgraphNode.setSize(subgraphNode.computeSize()) + + // Center the subgraph node + alignToContainer(subgraphNode._posSize, Alignment.Centre | Alignment.Middle, boundingRect) + + // Add the subgraph node to the graph + this.add(subgraphNode) + + // Group matching input links + const groupedByOutput = groupResolvedByOutput(resolvedInputLinks) + + // Reconnect input links in parent graph + let i = 0 + for (const [, connections] of groupedByOutput.entries()) { + const [firstResolved, ...others] = connections + const { output, outputNode, link, subgraphInput } = firstResolved + + // Special handling: Subgraph input node + i++ + if (link.origin_id === SUBGRAPH_INPUT_ID) { + link.target_id = subgraphNode.id + link.target_slot = i - 1 + if (subgraphInput instanceof SubgraphInput) { + subgraphInput.connect(subgraphNode.findInputSlotByType(link.type, true, true), subgraphNode, link.parentId) + } else { + throw new TypeError("Subgraph input node is not a SubgraphInput") + } + console.debug("Reconnect input links in parent graph", { ...link }, this.links.get(link.id), this.links.get(link.id) === link) + + for (const resolved of others) { + resolved.link.disconnect(this) + } + continue + } + + if (!output || !outputNode) { + console.warn("Convert to Subgraph reconnect: Failed to resolve input link", connections[0]) + continue + } + + const input = subgraphNode.findInputSlotByType(link.type, true, true) + outputNode.connectSlots( + output, + subgraphNode, + input, + link.parentId, + ) + } + + // Group matching links + const outputsGroupedByOutput = groupResolvedByOutput(resolvedOutputLinks) + + // Reconnect output links in parent graph + i = 0 + for (const [, connections] of outputsGroupedByOutput.entries()) { + // Special handling: Subgraph output node + i++ + for (const connection of connections) { + const { input, inputNode, link, subgraphOutput } = connection + if (link.target_id === SUBGRAPH_OUTPUT_ID) { + link.origin_id = subgraphNode.id + link.origin_slot = i - 1 + this.links.set(link.id, link) + if (subgraphOutput instanceof SubgraphOutput) { + subgraphOutput.connect(subgraphNode.findOutputSlotByType(link.type, true, true), subgraphNode, link.parentId) + } else { + throw new TypeError("Subgraph input node is not a SubgraphInput") + } + continue + } + + if (!input || !inputNode) { + console.warn("Convert to Subgraph reconnect: Failed to resolve output link", connection) + continue + } + + const output = subgraphNode.outputs[i - 1] + subgraphNode.connectSlots( + output, + inputNode, + input, + link.parentId, + ) + } + } + + return { subgraph, node: subgraphNode as SubgraphNode } + } + + /** + * Resolve a path of subgraph node IDs into a list of subgraph nodes. + * Not intended to be run from subgraphs. + * @param nodeIds An ordered list of node IDs, from the root graph to the most nested subgraph node + * @returns An ordered list of nested subgraph nodes. + */ + resolveSubgraphIdPath(nodeIds: readonly NodeId[]): SubgraphNode[] { + const result: SubgraphNode[] = [] + let currentGraph: GraphOrSubgraph = this.rootGraph + + for (const nodeId of nodeIds) { + const node: LGraphNode | null = currentGraph.getNodeById(nodeId) + if (!node) throw new Error(`Node [${nodeId}] not found. ID Path: ${nodeIds.join(":")}`) + if (!node.isSubgraphNode()) throw new Error(`Node [${nodeId}] is not a SubgraphNode. ID Path: ${nodeIds.join(":")}`) + + result.push(node) + currentGraph = node.subgraph + } + + return result + } + + /** + * Creates a Object containing all the info about this graph, it can be serialized + * @deprecated Use {@link asSerialisable}, which returns the newer schema version. + * @returns value of the node + */ + serialize(option?: { sortNodes: boolean }): ISerialisedGraph { + const { config, state, groups, nodes, reroutes, extra, floatingLinks, definitions } = this.asSerialisable(option) + const linkArray = [...this._links.values()] + const links = linkArray.map(x => x.serialize()) + + if (reroutes?.length) { + // Link parent IDs cannot go in 0.4 schema arrays + extra.linkExtensions = linkArray + .filter(x => x.parentId !== undefined) + .map(x => ({ id: x.id, parentId: x.parentId })) + } + + extra.reroutes = reroutes?.length ? reroutes : undefined + return { + id: this.id, + revision: this.revision, + last_node_id: state.lastNodeId, + last_link_id: state.lastLinkId, + nodes, + links, + floatingLinks, + groups, + definitions, + config, + extra, + version: LiteGraph.VERSION, + } + } + + /** @returns The drag and scale state of the first attached canvas, otherwise `undefined`. */ + #getDragAndScale(): DragAndScaleState | undefined { + const ds = this.list_of_graphcanvas?.at(0)?.ds + if (ds) return { scale: ds.scale, offset: ds.offset } + } + + /** + * Prepares a shallow copy of this object for immediate serialisation or structuredCloning. + * The return value should be discarded immediately. + * @param options Serialise options = currently `sortNodes: boolean`, whether to sort nodes by ID. + * @returns A shallow copy of parts of this graph, with shallow copies of its serialisable objects. + * Mutating the properties of the return object may result in changes to your graph. + * It is intended for use with {@link structuredClone} or {@link JSON.stringify}. + */ + asSerialisable(options?: { sortNodes: boolean }): SerialisableGraph & Required> { + const { id, revision, config, state } = this + + const nodeList = !LiteGraph.use_uuids && options?.sortNodes + // @ts-expect-error If LiteGraph.use_uuids is false, ids are numbers. + ? [...this._nodes].sort((a, b) => a.id - b.id) + : this._nodes + + const nodes = nodeList.map(node => node.serialize()) + const groups = this._groups.map(x => x.serialize()) + + const links = this._links.size ? [...this._links.values()].map(x => x.asSerialisable()) : undefined + const floatingLinks = this.floatingLinks.size ? [...this.floatingLinks.values()].map(x => x.asSerialisable()) : undefined + const reroutes = this.reroutes.size ? [...this.reroutes.values()].map(x => x.asSerialisable()) : undefined + + // Save scale and offset + const extra = { ...this.extra } + if (LiteGraph.saveViewportWithGraph) extra.ds = this.#getDragAndScale() + if (!extra.ds) delete extra.ds + + const data: ReturnType = { + id, + revision, + version: LGraph.serialisedSchemaVersion, + config, + state, + groups, + nodes, + links, + floatingLinks, + reroutes, + extra, + } + + if (this.isRootGraph && this._subgraphs.size) { + const usedSubgraphIds = findUsedSubgraphIds(this, this._subgraphs) + const usedSubgraphs = [...this._subgraphs.values()] + .filter(subgraph => usedSubgraphIds.has(subgraph.id)) + .map(x => x.asSerialisable()) + + if (usedSubgraphs.length > 0) { + data.definitions = { subgraphs: usedSubgraphs } + } + } + + this.onSerialize?.(data) + return data + } + + protected _configureBase(data: ISerialisedGraph | SerialisableGraph): void { + const { id, extra } = data + + // Create a new graph ID if none is provided + if (id) { + this.id = id + } else if (this.id === zeroUuid) { + this.id = createUuidv4() + } + + // Extra + this.extra = extra ? structuredClone(extra) : {} + + // Ensure auto-generated serialisation data is removed from extra + delete this.extra.linkExtensions + } + + /** + * Configure a graph from a JSON string + * @param data The deserialised object to configure this graph from + * @param keep_old If `true`, the graph will not be cleared prior to + * adding the configuration. + */ + configure( + data: ISerialisedGraph | SerialisableGraph, + keep_old?: boolean, + ): boolean | undefined { + const options: LGraphEventMap["configuring"] = { + data, + clearGraph: !keep_old, + } + const mayContinue = this.events.dispatch("configuring", options) + if (!mayContinue) return + + try { + // TODO: Finish typing configure() + if (!data) return + if (options.clearGraph) this.clear() + + this._configureBase(data) + + let reroutes: SerialisableReroute[] | undefined + + // TODO: Determine whether this should this fall back to 0.4. + if (data.version === 0.4) { + const { extra } = data + // Deprecated - old schema version, links are arrays + if (Array.isArray(data.links)) { + for (const linkData of data.links) { + const link = LLink.createFromArray(linkData) + this._links.set(link.id, link) + } + } + // #region `extra` embeds for v0.4 + + // LLink parentIds + if (Array.isArray(extra?.linkExtensions)) { + for (const linkEx of extra.linkExtensions) { + const link = this._links.get(linkEx.id) + if (link) link.parentId = linkEx.parentId + } + } + + // Reroutes + reroutes = extra?.reroutes + + // #endregion `extra` embeds for v0.4 + } else { + // New schema - one version so far, no check required. + + // State + if (data.state) { + const { lastGroupId, lastLinkId, lastNodeId, lastRerouteId } = data.state + const { state } = this + if (lastGroupId != null) state.lastGroupId = lastGroupId + if (lastLinkId != null) state.lastLinkId = lastLinkId + if (lastNodeId != null) state.lastNodeId = lastNodeId + if (lastRerouteId != null) state.lastRerouteId = lastRerouteId + } + + // Links + if (Array.isArray(data.links)) { + for (const linkData of data.links) { + const link = LLink.create(linkData) + this._links.set(link.id, link) + } + } + + reroutes = data.reroutes + } + + // Reroutes + if (Array.isArray(reroutes)) { + for (const rerouteData of reroutes) { + this.setReroute(rerouteData) + } + } + + const nodesData = data.nodes + + // copy all stored fields + for (const i in data) { + if (LGraph.ConfigureProperties.has(i)) continue + + // @ts-expect-error #574 Legacy property assignment + this[i] = data[i] + } + + // Subgraph definitions + const subgraphs = data.definitions?.subgraphs + if (subgraphs) { + for (const subgraph of subgraphs) this.createSubgraph(subgraph) + for (const subgraph of subgraphs) this.subgraphs.get(subgraph.id)?.configure(subgraph) + } + + let error = false + const nodeDataMap = new Map() + + // create nodes + this._nodes = [] + if (nodesData) { + for (const n_info of nodesData) { + // stored info + let node = LiteGraph.createNode(String(n_info.type), n_info.title) + if (!node) { + if (LiteGraph.debug) console.log("Node not found or has errors:", n_info.type) + + // in case of error we create a replacement node to avoid losing info + node = new LGraphNode("") + node.last_serialization = n_info + node.has_errors = true + error = true + // continue; + } + + // id it or it will create a new id + node.id = n_info.id + // add before configure, otherwise configure cannot create links + this.add(node, true) + nodeDataMap.set(node.id, n_info) + } + + // configure nodes afterwards so they can reach each other + for (const [id, nodeData] of nodeDataMap) { + this.getNodeById(id)?.configure(nodeData) + } + } + + // Floating links + if (Array.isArray(data.floatingLinks)) { + for (const linkData of data.floatingLinks) { + const floatingLink = LLink.create(linkData) + this.addFloatingLink(floatingLink) + + if (floatingLink.id > this.#lastFloatingLinkId) this.#lastFloatingLinkId = floatingLink.id + } + } + + // Drop broken reroutes + for (const reroute of this.reroutes.values()) { + // Drop broken links, and ignore reroutes with no valid links + if (!reroute.validateLinks(this._links, this.floatingLinks)) { + this.reroutes.delete(reroute.id) + } + } + + // groups + this._groups.length = 0 + const groupData = data.groups + if (groupData) { + for (const data of groupData) { + // TODO: Search/remove these global object refs + const group = new LiteGraph.LGraphGroup() + group.configure(data) + this.add(group) + } + } + + this.updateExecutionOrder() + + this.onConfigure?.(data) + this._version++ + + // Ensure the primary canvas is set to the correct graph + const { primaryCanvas } = this + const subgraphId = primaryCanvas?.subgraph?.id + if (subgraphId) { + const subgraph = this.subgraphs.get(subgraphId) + if (subgraph) { + primaryCanvas.setGraph(subgraph) + } else { + primaryCanvas.setGraph(this) + } + } + + this.setDirtyCanvas(true, true) + return error + } finally { + this.events.dispatch("configured") + } + } + + #canvas?: LGraphCanvas + get primaryCanvas(): LGraphCanvas | undefined { + return this.rootGraph.#canvas + } + + set primaryCanvas(canvas: LGraphCanvas) { + this.rootGraph.#canvas = canvas + } + + load(url: string | Blob | URL | File, callback: () => void) { + const that = this + + // from file + if (url instanceof Blob || url instanceof File) { + const reader = new FileReader() + reader.addEventListener("load", function (event) { + const result = stringOrEmpty(event.target?.result) + const data = JSON.parse(result) + that.configure(data) + callback?.() + }) + + reader.readAsText(url) + return + } + + // is a string, then an URL + const req = new XMLHttpRequest() + req.open("GET", url, true) + req.send(null) + req.addEventListener("load", function () { + if (req.status !== 200) { + console.error("Error loading graph:", req.status, req.response) + return + } + const data = JSON.parse(req.response) + that.configure(data) + callback?.() + }) + req.addEventListener("error", (err) => { + console.error("Error loading graph:", err) + }) + } +} diff --git a/src/lib/litegraph/src/LGraphBadge.ts b/src/lib/litegraph/src/LGraphBadge.ts new file mode 100644 index 0000000000..8e613c2af9 --- /dev/null +++ b/src/lib/litegraph/src/LGraphBadge.ts @@ -0,0 +1,126 @@ +import { LGraphIcon, type LGraphIconOptions } from "./LGraphIcon" + +export enum BadgePosition { + TopLeft = "top-left", + TopRight = "top-right", +} + +export interface LGraphBadgeOptions { + text: string + fgColor?: string + bgColor?: string + fontSize?: number + padding?: number + height?: number + cornerRadius?: number + iconOptions?: LGraphIconOptions + xOffset?: number + yOffset?: number +} + +export class LGraphBadge { + text: string + fgColor: string + bgColor: string + fontSize: number + padding: number + height: number + cornerRadius: number + icon?: LGraphIcon + xOffset: number + yOffset: number + + constructor({ + text, + fgColor = "white", + bgColor = "#0F1F0F", + fontSize = 12, + padding = 6, + height = 20, + cornerRadius = 5, + iconOptions, + xOffset = 0, + yOffset = 0, + }: LGraphBadgeOptions) { + this.text = text + this.fgColor = fgColor + this.bgColor = bgColor + this.fontSize = fontSize + this.padding = padding + this.height = height + this.cornerRadius = cornerRadius + if (iconOptions) { + this.icon = new LGraphIcon(iconOptions) + } + this.xOffset = xOffset + this.yOffset = yOffset + } + + get visible() { + return (this.text?.length ?? 0) > 0 || !!this.icon + } + + getWidth(ctx: CanvasRenderingContext2D) { + if (!this.visible) return 0 + const { font } = ctx + let iconWidth = 0 + if (this.icon) { + ctx.font = `${this.icon.fontSize}px '${this.icon.fontFamily}'` + iconWidth = ctx.measureText(this.icon.unicode).width + this.padding + } + ctx.font = `${this.fontSize}px sans-serif` + const textWidth = this.text ? ctx.measureText(this.text).width : 0 + ctx.font = font + return iconWidth + textWidth + this.padding * 2 + } + + draw( + ctx: CanvasRenderingContext2D, + x: number, + y: number, + ): void { + if (!this.visible) return + + x += this.xOffset + y += this.yOffset + + const { font, fillStyle, textBaseline, textAlign } = ctx + + ctx.font = `${this.fontSize}px sans-serif` + const badgeWidth = this.getWidth(ctx) + const badgeX = 0 + + // Draw badge background + ctx.fillStyle = this.bgColor + ctx.beginPath() + if (ctx.roundRect) { + ctx.roundRect(x + badgeX, y, badgeWidth, this.height, this.cornerRadius) + } else { + // Fallback for browsers that don't support roundRect + ctx.rect(x + badgeX, y, badgeWidth, this.height) + } + ctx.fill() + + let drawX = x + badgeX + this.padding + const centerY = y + this.height / 2 + + // Draw icon if present + if (this.icon) { + this.icon.draw(ctx, drawX, centerY) + drawX += this.icon.fontSize + this.padding / 2 + 4 + } + + // Draw badge text + if (this.text) { + ctx.fillStyle = this.fgColor + ctx.textBaseline = "middle" + ctx.textAlign = "left" + ctx.fillText(this.text, drawX, centerY + 1) + } + + ctx.font = font + ctx.fillStyle = fillStyle + ctx.textBaseline = textBaseline + ctx.textAlign = textAlign + } +} diff --git a/src/lib/litegraph/src/LGraphButton.ts b/src/lib/litegraph/src/LGraphButton.ts new file mode 100644 index 0000000000..1ee27c6f82 --- /dev/null +++ b/src/lib/litegraph/src/LGraphButton.ts @@ -0,0 +1,89 @@ +import { Rectangle } from "./infrastructure/Rectangle" +import { LGraphBadge, type LGraphBadgeOptions } from "./LGraphBadge" + +export interface LGraphButtonOptions extends LGraphBadgeOptions { + name?: string // To identify the button +} + +export class LGraphButton extends LGraphBadge { + name?: string + _last_area: Rectangle = new Rectangle() + + constructor(options: LGraphButtonOptions) { + super(options) + this.name = options.name + } + + override getWidth(ctx: CanvasRenderingContext2D): number { + if (!this.visible) return 0 + + const { font } = ctx + ctx.font = `${this.fontSize}px 'PrimeIcons'` + + // For icon buttons, just measure the text width without padding + const textWidth = this.text ? ctx.measureText(this.text).width : 0 + + ctx.font = font + return textWidth + } + + /** + * @internal + * + * Draws the button and updates its last rendered area for hit detection. + * @param ctx The canvas rendering context. + * @param x The x-coordinate to draw the button at. + * @param y The y-coordinate to draw the button at. + */ + override draw(ctx: CanvasRenderingContext2D, x: number, y: number): void { + if (!this.visible) { + return + } + + const width = this.getWidth(ctx) + + // Update the hit area + this._last_area[0] = x + this.xOffset + this._last_area[1] = y + this.yOffset + this._last_area[2] = width + this._last_area[3] = this.height + + // Custom drawing for buttons - no background, just icon/text + const adjustedX = x + this.xOffset + const adjustedY = y + this.yOffset + + const { font, fillStyle, textBaseline, textAlign } = ctx + + // Use the same color as the title text (usually white) + const titleTextColor = ctx.fillStyle || "white" + + // Draw as icon-only without background + ctx.font = `${this.fontSize}px 'PrimeIcons'` + ctx.fillStyle = titleTextColor + ctx.textBaseline = "middle" + ctx.textAlign = "center" + + const centerX = adjustedX + width / 2 + const centerY = adjustedY + this.height / 2 + + if (this.text) { + ctx.fillText(this.text, centerX, centerY) + } + + // Restore context + ctx.font = font + ctx.fillStyle = fillStyle + ctx.textBaseline = textBaseline + ctx.textAlign = textAlign + } + + /** + * Checks if a point is inside the button's last rendered area. + * @param x The x-coordinate of the point. + * @param y The y-coordinate of the point. + * @returns `true` if the point is inside the button, otherwise `false`. + */ + isPointInside(x: number, y: number): boolean { + return this._last_area.containsPoint([x, y]) + } +} diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts new file mode 100644 index 0000000000..d5cc1d150f --- /dev/null +++ b/src/lib/litegraph/src/LGraphCanvas.ts @@ -0,0 +1,7812 @@ +import type { ContextMenu } from "./ContextMenu" +import type { CustomEventDispatcher, ICustomEventTarget } from "./infrastructure/CustomEventTarget" +import type { LGraphCanvasEventMap } from "./infrastructure/LGraphCanvasEventMap" +import type { + CanvasColour, + ColorOption, + ConnectingLink, + ContextMenuDivElement, + DefaultConnectionColors, + Dictionary, + Direction, + IBoundaryNodes, + IColorable, + IContextMenuOptions, + IContextMenuValue, + INodeInputSlot, + INodeOutputSlot, + INodeSlot, + INodeSlotContextItem, + ISlotType, + LinkSegment, + NullableProperties, + Point, + Positionable, + ReadOnlyPoint, + ReadOnlyRect, + Rect, + Size, +} from "./interfaces" +import type { LGraph } from "./LGraph" +import type { + CanvasPointerEvent, + CanvasPointerExtensions, +} from "./types/events" +import type { ClipboardItems, SubgraphIO } from "./types/serialisation" +import type { NeverNever } from "./types/utility" +import type { PickNevers } from "./types/utility" +import type { IBaseWidget } from "./types/widgets" +import type { UUID } from "./utils/uuid" + +import { LinkConnector } from "@/canvas/LinkConnector" + +import { isOverNodeInput, isOverNodeOutput } from "./canvas/measureSlots" +import { CanvasPointer } from "./CanvasPointer" +import { type AnimationOptions, DragAndScale } from "./DragAndScale" +import { strokeShape } from "./draw" +import { NullGraphError } from "./infrastructure/NullGraphError" +import { LGraphGroup } from "./LGraphGroup" +import { LGraphNode, type NodeId, type NodeProperty } from "./LGraphNode" +import { createUuidv4, LiteGraph, Rectangle, SubgraphNode } from "./litegraph" +import { type LinkId, LLink } from "./LLink" +import { + containsRect, + createBounds, + distance, + findPointOnCurve, + isInRect, + isInRectangle, + isPointInRect, + overlapBounding, + snapPoint, +} from "./measure" +import { NodeInputSlot } from "./node/NodeInputSlot" +import { Reroute, type RerouteId } from "./Reroute" +import { stringOrEmpty } from "./strings" +import { Subgraph } from "./subgraph/Subgraph" +import { SubgraphInputNode } from "./subgraph/SubgraphInputNode" +import { SubgraphIONodeBase } from "./subgraph/SubgraphIONodeBase" +import { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode" +import { + CanvasItem, + LGraphEventMode, + LinkDirection, + LinkMarkerShape, + LinkRenderType, + RenderShape, + TitleMode, +} from "./types/globalEnums" +import { alignNodes, distributeNodes, getBoundaryNodes } from "./utils/arrange" +import { findFirstNode, getAllNestedItems } from "./utils/collections" +import { BaseWidget } from "./widgets/BaseWidget" +import { toConcreteWidget } from "./widgets/widgetMap" + +interface IShowSearchOptions { + node_to?: LGraphNode | null + node_from?: LGraphNode | null + slot_from: number | INodeOutputSlot | INodeInputSlot | null | undefined + type_filter_in?: ISlotType + type_filter_out?: ISlotType | false + + // TODO check for registered_slot_[in/out]_types not empty // this will be checked for functionality enabled : filter on slot type, in and out + do_type_filter?: boolean + show_general_if_none_on_typefilter?: boolean + show_general_after_typefiltered?: boolean + hide_on_mouse_leave?: boolean + show_all_if_empty?: boolean + show_all_on_open?: boolean +} + +interface ICreateNodeOptions { + /** input */ + nodeFrom?: SubgraphInputNode | LGraphNode | null + /** input */ + slotFrom?: number | INodeOutputSlot | INodeInputSlot | SubgraphIO | null + /** output */ + nodeTo?: SubgraphOutputNode | LGraphNode | null + /** output */ + slotTo?: number | INodeOutputSlot | INodeInputSlot | SubgraphIO | null + /** pass the event coords */ + + /** Create the connection from a reroute */ + afterRerouteId?: RerouteId + + // FIXME: Should not be optional + /** choose a nodetype to add, AUTO to set at first good */ + nodeType?: string + e?: CanvasPointerEvent + allow_searchbox?: boolean +} + +interface ICreateDefaultNodeOptions extends ICreateNodeOptions { + /** Position of new node */ + position: Point + /** adjust x,y */ + posAdd?: Point + /** alpha, adjust the position x,y based on the new node size w,h */ + posSizeFix?: Point +} + +interface HasShowSearchCallback { + /** See {@link LGraphCanvas.showSearchBox} */ + showSearchBox: ( + event: MouseEvent, + options?: IShowSearchOptions, + ) => HTMLDivElement | void +} + +interface ICloseable { + close(): void +} + +interface IDialogExtensions extends ICloseable { + modified(): void + is_modified: boolean +} + +interface IDialog extends HTMLDivElement, IDialogExtensions {} +type PromptDialog = Omit + +interface IDialogOptions { + position?: Point + event?: MouseEvent + checkForInput?: boolean + closeOnLeave?: boolean + onclose?(): void +} + +/** @inheritdoc {@link LGraphCanvas.state} */ +export interface LGraphCanvasState { + /** {@link Positionable} items are being dragged on the canvas. */ + draggingItems: boolean + /** The canvas itself is being dragged. */ + draggingCanvas: boolean + /** The canvas is read-only, preventing changes to nodes, disconnecting links, moving items, etc. */ + readOnly: boolean + + /** Bit flags indicating what is currently below the pointer. */ + hoveringOver: CanvasItem + /** If `true`, pointer move events will set the canvas cursor style. */ + shouldSetCursor: boolean + + /** + * Dirty flag indicating that {@link selectedItems} has changed. + * Downstream consumers may reset to false once actioned. + */ + selectionChanged: boolean +} + +/** + * The items created by a clipboard paste operation. + * Includes maps of original copied IDs to newly created items. + */ +interface ClipboardPasteResult { + /** All successfully created items */ + created: Positionable[] + /** Map: original node IDs to newly created nodes */ + nodes: Map + /** Map: original link IDs to new link IDs */ + links: Map + /** Map: original reroute IDs to newly created reroutes */ + reroutes: Map + /** Map: original subgraph IDs to newly created subgraphs */ + subgraphs: Map +} + +/** Options for {@link LGraphCanvas.pasteFromClipboard}. */ +interface IPasteFromClipboardOptions { + /** If `true`, always attempt to connect inputs of pasted nodes - including to nodes that were not pasted. */ + connectInputs?: boolean + /** The position to paste the items at. */ + position?: Point +} + +interface ICreatePanelOptions { + closable?: any + window?: any + onOpen?: () => void + onClose?: () => void + width?: any + height?: any +} + +const cursors = { + NE: "nesw-resize", + SE: "nwse-resize", + SW: "nesw-resize", + NW: "nwse-resize", +} as const + +/** + * This class is in charge of rendering one graph inside a canvas. And provides all the interaction required. + * Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked + */ +export class LGraphCanvas implements CustomEventDispatcher { + // Optimised buffers used during rendering + static #temp = new Float32Array(4) + static #temp_vec2 = new Float32Array(2) + static #tmp_area = new Float32Array(4) + static #margin_area = new Float32Array(4) + static #link_bounding = new Float32Array(4) + static #lTempA: Point = new Float32Array(2) + static #lTempB: Point = new Float32Array(2) + static #lTempC: Point = new Float32Array(2) + + static DEFAULT_BACKGROUND_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=" + + static DEFAULT_EVENT_LINK_COLOR = "#A86" + + /** Link type to colour dictionary. */ + static link_type_colors: Dictionary = { + "-1": LGraphCanvas.DEFAULT_EVENT_LINK_COLOR, + "number": "#AAA", + "node": "#DCA", + } + + static gradients: Record = {} + + static search_limit = -1 + static node_colors: Record = { + red: { color: "#322", bgcolor: "#533", groupcolor: "#A88" }, + brown: { color: "#332922", bgcolor: "#593930", groupcolor: "#b06634" }, + green: { color: "#232", bgcolor: "#353", groupcolor: "#8A8" }, + blue: { color: "#223", bgcolor: "#335", groupcolor: "#88A" }, + pale_blue: { + color: "#2a363b", + bgcolor: "#3f5159", + groupcolor: "#3f789e", + }, + cyan: { color: "#233", bgcolor: "#355", groupcolor: "#8AA" }, + purple: { color: "#323", bgcolor: "#535", groupcolor: "#a1309b" }, + yellow: { color: "#432", bgcolor: "#653", groupcolor: "#b58b2a" }, + black: { color: "#222", bgcolor: "#000", groupcolor: "#444" }, + } + + /** + * @internal Exclusively a workaround for design limitation in {@link LGraphNode.computeSize}. + */ + static _measureText?: (text: string, fontStyle?: string) => number + + /** + * The state of this canvas, e.g. whether it is being dragged, or read-only. + * + * Implemented as a POCO that can be proxied without side-effects. + */ + state: LGraphCanvasState = { + draggingItems: false, + draggingCanvas: false, + readOnly: false, + hoveringOver: CanvasItem.Nothing, + shouldSetCursor: true, + selectionChanged: false, + } + + #subgraph?: Subgraph + get subgraph(): Subgraph | undefined { + return this.#subgraph + } + + set subgraph(value: Subgraph | undefined) { + if (value !== this.#subgraph) { + this.#subgraph = value + if (value) this.dispatch("litegraph:set-graph", { oldGraph: this.#subgraph, newGraph: value }) + } + } + + /** Dispatches a custom event on the canvas. */ + dispatch>(type: T, detail: LGraphCanvasEventMap[T]): boolean + dispatch>(type: T): boolean + dispatch(type: T, detail?: LGraphCanvasEventMap[T]) { + const event = new CustomEvent(type as string, { detail, bubbles: true }) + return this.canvas.dispatchEvent(event) + } + + dispatchEvent(type: TEvent, detail: LGraphCanvasEventMap[TEvent]) { + this.canvas.dispatchEvent(new CustomEvent(type, { detail })) + } + + #updateCursorStyle() { + if (!this.state.shouldSetCursor) return + + const crosshairItems = + CanvasItem.Node | + CanvasItem.RerouteSlot | + CanvasItem.SubgraphIoNode | + CanvasItem.SubgraphIoSlot + + let cursor = "default" + if (this.state.draggingCanvas) { + cursor = "grabbing" + } else if (this.state.readOnly) { + cursor = "grab" + } else if (this.pointer.resizeDirection) { + cursor = cursors[this.pointer.resizeDirection] ?? cursors.SE + } else if (this.state.hoveringOver & crosshairItems) { + cursor = "crosshair" + } else if (this.state.hoveringOver & CanvasItem.Reroute) { + cursor = "grab" + } + + this.canvas.style.cursor = cursor + } + + // Whether the canvas was previously being dragged prior to pressing space key. + // null if space key is not pressed. + private _previously_dragging_canvas: boolean | null = null + + // #region Legacy accessors + /** @deprecated @inheritdoc {@link LGraphCanvasState.readOnly} */ + get read_only(): boolean { + return this.state.readOnly + } + + set read_only(value: boolean) { + this.state.readOnly = value + this.#updateCursorStyle() + } + + get isDragging(): boolean { + return this.state.draggingItems + } + + set isDragging(value: boolean) { + this.state.draggingItems = value + } + + get hoveringOver(): CanvasItem { + return this.state.hoveringOver + } + + set hoveringOver(value: CanvasItem) { + this.state.hoveringOver = value + this.#updateCursorStyle() + } + + /** @deprecated Replace all references with {@link pointer}.{@link CanvasPointer.isDown isDown}. */ + get pointer_is_down() { + return this.pointer.isDown + } + + /** @deprecated Replace all references with {@link pointer}.{@link CanvasPointer.isDouble isDouble}. */ + get pointer_is_double() { + return this.pointer.isDouble + } + + /** @deprecated @inheritdoc {@link LGraphCanvasState.draggingCanvas} */ + get dragging_canvas(): boolean { + return this.state.draggingCanvas + } + + set dragging_canvas(value: boolean) { + this.state.draggingCanvas = value + this.#updateCursorStyle() + } + + /** + * @deprecated Use {@link LGraphNode.titleFontStyle} instead. + */ + get title_text_font(): string { + return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}` + } + // #endregion Legacy accessors + + get inner_text_font(): string { + return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}` + } + + #maximumFrameGap = 0 + /** Maximum frames per second to render. 0: unlimited. Default: 0 */ + public get maximumFps() { + return this.#maximumFrameGap > Number.EPSILON ? this.#maximumFrameGap / 1000 : 0 + } + + public set maximumFps(value) { + this.#maximumFrameGap = value > Number.EPSILON ? 1000 / value : 0 + } + + /** + * @deprecated Use {@link LiteGraphGlobal.ROUND_RADIUS} instead. + */ + get round_radius() { + return LiteGraph.ROUND_RADIUS + } + + /** + * @deprecated Use {@link LiteGraphGlobal.ROUND_RADIUS} instead. + */ + set round_radius(value: number) { + LiteGraph.ROUND_RADIUS = value + } + + /** + * Render low quality when zoomed out. + */ + get low_quality(): boolean { + return this.ds.scale < this.low_quality_zoom_threshold + } + + options: { + skip_events?: any + viewport?: any + skip_render?: any + autoresize?: any + } + + background_image: string + readonly ds: DragAndScale + readonly pointer: CanvasPointer + zoom_modify_alpha: boolean + zoom_speed: number + node_title_color: string + default_link_color: string + default_connection_color: { + input_off: string + input_on: string + output_off: string + output_on: string + } + + default_connection_color_byType: Dictionary + default_connection_color_byTypeOff: Dictionary + + /** Gets link colours. Extremely basic impl. until the legacy object dictionaries are removed. */ + colourGetter: DefaultConnectionColors = { + getConnectedColor: (type: string) => + this.default_connection_color_byType[type] || + this.default_connection_color.output_on, + getDisconnectedColor: (type: string) => + this.default_connection_color_byTypeOff[type] || + this.default_connection_color_byType[type] || + this.default_connection_color.output_off, + } + + highquality_render: boolean + use_gradients: boolean + editor_alpha: number + pause_rendering: boolean + clear_background: boolean + clear_background_color: string + render_only_selected: boolean + show_info: boolean + allow_dragcanvas: boolean + allow_dragnodes: boolean + allow_interaction: boolean + multi_select: boolean + allow_searchbox: boolean + allow_reconnect_links: boolean + align_to_grid: boolean + drag_mode: boolean + dragging_rectangle: Rect | null + filter?: string | null + set_canvas_dirty_on_mouse_event: boolean + always_render_background: boolean + render_shadows: boolean + render_canvas_border: boolean + render_connections_shadows: boolean + render_connections_border: boolean + render_curved_connections: boolean + render_connection_arrows: boolean + render_collapsed_slots: boolean + render_execution_order: boolean + render_link_tooltip: boolean + + /** Shape of the markers shown at the midpoint of links. Default: Circle */ + linkMarkerShape: LinkMarkerShape = LinkMarkerShape.Circle + links_render_mode: number + /** Zoom threshold for low quality rendering. Zoom below this threshold will render low quality. */ + low_quality_zoom_threshold: number = 0.6 + /** mouse in canvas coordinates, where 0,0 is the top-left corner of the blue rectangle */ + readonly mouse: Point + /** mouse in graph coordinates, where 0,0 is the top-left corner of the blue rectangle */ + readonly graph_mouse: Point + /** @deprecated LEGACY: REMOVE THIS, USE {@link graph_mouse} INSTEAD */ + canvas_mouse: Point + /** to personalize the search box */ + onSearchBox?: (helper: Element, str: string, canvas: LGraphCanvas) => any + onSearchBoxSelection?: (name: any, event: any, canvas: LGraphCanvas) => void + onMouse?: (e: CanvasPointerEvent) => boolean + /** to render background objects (behind nodes and connections) in the canvas affected by transform */ + onDrawBackground?: (ctx: CanvasRenderingContext2D, visible_area: any) => void + /** to render foreground objects (above nodes and connections) in the canvas affected by transform */ + onDrawForeground?: (arg0: CanvasRenderingContext2D, arg1: any) => void + connections_width: number + /** The current node being drawn by {@link drawNode}. This should NOT be used to determine the currently selected node. See {@link selectedItems} */ + current_node: LGraphNode | null + /** used for widgets */ + node_widget?: [LGraphNode, IBaseWidget] | null + /** The link to draw a tooltip for. */ + over_link_center?: LinkSegment + last_mouse_position: Point + /** The visible area of this canvas. Tightly coupled with {@link ds}. */ + visible_area: Rectangle + /** Contains all links and reroutes that were rendered. Repopulated every render cycle. */ + renderedPaths: Set = new Set() + /** @deprecated Replaced by {@link renderedPaths}, but length is set to 0 by some extensions. */ + visible_links: LLink[] = [] + /** @deprecated This array is populated and cleared to support legacy extensions. The contents are ignored by Litegraph. */ + connecting_links: ConnectingLink[] | null + linkConnector = new LinkConnector(links => this.connecting_links = links) + /** The viewport of this canvas. Tightly coupled with {@link ds}. */ + readonly viewport?: Rect + autoresize: boolean + static active_canvas: LGraphCanvas + frame = 0 + last_draw_time = 0 + render_time = 0 + fps = 0 + /** @deprecated See {@link LGraphCanvas.selectedItems} */ + selected_nodes: Dictionary = {} + /** All selected nodes, groups, and reroutes */ + selectedItems: Set = new Set() + /** The group currently being resized. */ + resizingGroup: LGraphGroup | null = null + /** @deprecated See {@link LGraphCanvas.selectedItems} */ + selected_group: LGraphGroup | null = null + /** The nodes that are currently visible on the canvas. */ + visible_nodes: LGraphNode[] = [] + /** + * The IDs of the nodes that are currently visible on the canvas. More + * performant than {@link visible_nodes} for visibility checks. + */ + #visible_node_ids: Set = new Set() + node_over?: LGraphNode + node_capturing_input?: LGraphNode | null + highlighted_links: Dictionary = {} + + #visibleReroutes: Set = new Set() + + dirty_canvas: boolean = true + dirty_bgcanvas: boolean = true + /** A map of nodes that require selective-redraw */ + dirty_nodes = new Map() + dirty_area?: Rect | null + /** @deprecated Unused */ + node_in_panel?: LGraphNode | null + last_mouse: ReadOnlyPoint = [0, 0] + last_mouseclick: number = 0 + graph: LGraph | Subgraph | null + get _graph(): LGraph | Subgraph { + if (!this.graph) throw new NullGraphError() + return this.graph + } + + canvas: HTMLCanvasElement & ICustomEventTarget + bgcanvas: HTMLCanvasElement + ctx: CanvasRenderingContext2D + _events_binded?: boolean + _mousedown_callback?(e: PointerEvent): void + _mousewheel_callback?(e: WheelEvent): void + _mousemove_callback?(e: PointerEvent): void + _mouseup_callback?(e: PointerEvent): void + _mouseout_callback?(e: PointerEvent): void + _mousecancel_callback?(e: PointerEvent): void + _key_callback?(e: KeyboardEvent): void + bgctx?: CanvasRenderingContext2D | null + is_rendering?: boolean + /** @deprecated Panels */ + block_click?: boolean + /** @deprecated Panels */ + last_click_position?: Point | null + resizing_node?: LGraphNode | null + /** @deprecated See {@link LGraphCanvas.resizingGroup} */ + selected_group_resizing?: boolean + /** @deprecated See {@link pointer}.{@link CanvasPointer.dragStarted dragStarted} */ + last_mouse_dragging?: boolean + onMouseDown?: (arg0: CanvasPointerEvent) => void + _highlight_pos?: Point + _highlight_input?: INodeInputSlot + // TODO: Check if panels are used + /** @deprecated Panels */ + node_panel?: any + /** @deprecated Panels */ + options_panel?: any + _bg_img?: HTMLImageElement + _pattern?: CanvasPattern + _pattern_img?: HTMLImageElement + // TODO: This looks like another panel thing + prompt_box?: PromptDialog | null + search_box?: HTMLDivElement + /** @deprecated Panels */ + SELECTED_NODE?: LGraphNode + /** @deprecated Panels */ + NODEPANEL_IS_OPEN?: boolean + + /** Once per frame check of snap to grid value. @todo Update on change. */ + #snapToGrid?: number + /** Set on keydown, keyup. @todo */ + #shiftDown: boolean = false + + /** If true, enable drag zoom. Ctrl+Shift+Drag Up/Down: zoom canvas. */ + dragZoomEnabled: boolean = false + /** The start position of the drag zoom. */ + #dragZoomStart: { pos: Point, scale: number } | null = null + + getMenuOptions?(): IContextMenuValue[] + getExtraMenuOptions?( + canvas: LGraphCanvas, + options: IContextMenuValue[], + ): IContextMenuValue[] + static active_node: LGraphNode + /** called before modifying the graph */ + onBeforeChange?(graph: LGraph): void + /** called after modifying the graph */ + onAfterChange?(graph: LGraph): void + onClear?: () => void + /** called after moving a node @deprecated Does not handle multi-node move, and can return the wrong node. */ + onNodeMoved?: (node_dragged: LGraphNode | undefined) => void + /** @deprecated Called with the deprecated {@link selected_nodes} when the selection changes. Replacement not yet impl. */ + onSelectionChange?: (selected: Dictionary) => void + /** called when rendering a tooltip */ + onDrawLinkTooltip?: ( + ctx: CanvasRenderingContext2D, + link: LLink | null, + canvas?: LGraphCanvas, + ) => boolean + + /** to render foreground objects not affected by transform (for GUIs) */ + onDrawOverlay?: (ctx: CanvasRenderingContext2D) => void + onRenderBackground?: ( + canvas: HTMLCanvasElement, + ctx: CanvasRenderingContext2D, + ) => boolean + + onNodeDblClicked?: (n: LGraphNode) => void + onShowNodePanel?: (n: LGraphNode) => void + onNodeSelected?: (node: LGraphNode) => void + onNodeDeselected?: (node: LGraphNode) => void + onRender?: (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void + + /** + * Creates a new instance of LGraphCanvas. + * @param canvas The canvas HTML element (or its id) to use, or null / undefined to leave blank. + * @param graph The graph that owns this canvas. + * @param options + */ + constructor( + canvas: HTMLCanvasElement, + graph: LGraph, + options?: LGraphCanvas["options"], + ) { + options ||= {} + this.options = options + + // if(graph === undefined) + // throw ("No graph assigned"); + this.background_image = LGraphCanvas.DEFAULT_BACKGROUND_IMAGE + + this.ds = new DragAndScale(canvas) + this.pointer = new CanvasPointer(canvas) + + this.linkConnector.events.addEventListener("link-created", () => this.#dirty()) + + // @deprecated Workaround: Keep until connecting_links is removed. + this.linkConnector.events.addEventListener("reset", () => { + this.connecting_links = null + this.dirty_bgcanvas = true + }) + + // Dropped a link on the canvas + this.linkConnector.events.addEventListener("dropped-on-canvas", (customEvent) => { + if (!this.connecting_links) return + + const e = customEvent.detail + this.emitEvent({ + subType: "empty-release", + originalEvent: e, + linkReleaseContext: { links: this.connecting_links }, + }) + + const firstLink = this.linkConnector.renderLinks[0] + + // No longer in use + // add menu when releasing link in empty space + if (LiteGraph.release_link_on_empty_shows_menu) { + const linkReleaseContext = this.linkConnector.state.connectingTo === "input" + ? { + node_from: firstLink.node as LGraphNode, + slot_from: firstLink.fromSlot as INodeOutputSlot, + type_filter_in: firstLink.fromSlot.type, + } + : { + node_to: firstLink.node as LGraphNode, + slot_to: firstLink.fromSlot as INodeInputSlot, + type_filter_out: firstLink.fromSlot.type, + } + + const afterRerouteId = firstLink.fromReroute?.id + + if ("shiftKey" in e && e.shiftKey) { + if (this.allow_searchbox) { + this.showSearchBox(e as unknown as MouseEvent, linkReleaseContext as IShowSearchOptions) + } + } else if (this.linkConnector.state.connectingTo === "input") { + this.showConnectionMenu({ nodeFrom: firstLink.node as LGraphNode, slotFrom: firstLink.fromSlot as INodeOutputSlot, e, afterRerouteId }) + } else { + this.showConnectionMenu({ nodeTo: firstLink.node as LGraphNode, slotTo: firstLink.fromSlot as INodeInputSlot, e, afterRerouteId }) + } + } + }) + + // otherwise it generates ugly patterns when scaling down too much + this.zoom_modify_alpha = true + // in range (1.01, 2.5). Less than 1 will invert the zoom direction + this.zoom_speed = 1.1 + + this.node_title_color = LiteGraph.NODE_TITLE_COLOR + this.default_link_color = LiteGraph.LINK_COLOR + this.default_connection_color = { + input_off: "#778", + input_on: "#7F7", + output_off: "#778", + output_on: "#7F7", + } + this.default_connection_color_byType = { + /* number: "#7F7", + string: "#77F", + boolean: "#F77", */ + } + this.default_connection_color_byTypeOff = { + /* number: "#474", + string: "#447", + boolean: "#744", */ + } + + this.highquality_render = true + // set to true to render titlebar with gradients + this.use_gradients = false + // used for transition + this.editor_alpha = 1 + this.pause_rendering = false + this.clear_background = true + this.clear_background_color = "#222" + + this.render_only_selected = true + this.show_info = true + this.allow_dragcanvas = true + this.allow_dragnodes = true + // allow to control widgets, buttons, collapse, etc + this.allow_interaction = true + // allow selecting multi nodes without pressing extra keys + this.multi_select = false + this.allow_searchbox = true + // allows to change a connection with having to redo it again + this.allow_reconnect_links = true + // snap to grid + this.align_to_grid = false + + this.drag_mode = false + this.dragging_rectangle = null + + // allows to filter to only accept some type of nodes in a graph + this.filter = null + + // forces to redraw the canvas on mouse events (except move) + this.set_canvas_dirty_on_mouse_event = true + this.always_render_background = false + this.render_shadows = true + this.render_canvas_border = true + // too much cpu + this.render_connections_shadows = false + this.render_connections_border = true + this.render_curved_connections = false + this.render_connection_arrows = false + this.render_collapsed_slots = true + this.render_execution_order = false + this.render_link_tooltip = true + + this.links_render_mode = LinkRenderType.SPLINE_LINK + + this.mouse = [0, 0] + this.graph_mouse = [0, 0] + this.canvas_mouse = this.graph_mouse + + this.connections_width = 3 + + this.current_node = null + this.node_widget = null + this.last_mouse_position = [0, 0] + this.visible_area = this.ds.visible_area + // Explicitly null-checked + this.connecting_links = null + + // to constraint render area to a portion of the canvas + this.viewport = options.viewport || null + + // link canvas and graph + this.graph = graph + graph?.attachCanvas(this) + + // TypeScript strict workaround: cannot use method to initialize properties. + this.canvas = undefined! + this.bgcanvas = undefined! + this.ctx = undefined! + + this.setCanvas(canvas, options.skip_events) + this.clear() + + LGraphCanvas._measureText = (text: string, fontStyle = this.inner_text_font) => { + const { ctx } = this + const { font } = ctx + try { + ctx.font = fontStyle + return ctx.measureText(text).width + } finally { + ctx.font = font + } + } + + if (!options.skip_render) { + this.startRendering() + } + + this.autoresize = options.autoresize + } + + static onGroupAdd(info: unknown, entry: unknown, mouse_event: MouseEvent): void { + const canvas = LGraphCanvas.active_canvas + + const group = new LiteGraph.LGraphGroup() + group.pos = canvas.convertEventToCanvasOffset(mouse_event) + if (!canvas.graph) throw new NullGraphError() + canvas.graph.add(group) + } + + /** + * @deprecated Functionality moved to {@link getBoundaryNodes}. The new function returns null on failure, instead of an object with all null properties. + * Determines the furthest nodes in each direction + * @param nodes the nodes to from which boundary nodes will be extracted + * @returns + */ + static getBoundaryNodes( + nodes: LGraphNode[] | Dictionary, + ): NullableProperties { + const _nodes = Array.isArray(nodes) ? nodes : Object.values(nodes) + return ( + getBoundaryNodes(_nodes) ?? { + top: null, + right: null, + bottom: null, + left: null, + } + ) + } + + /** + * @deprecated Functionality moved to {@link alignNodes}. The new function does not set dirty canvas. + * @param nodes a list of nodes + * @param direction Direction to align the nodes + * @param align_to Node to align to (if null, align to the furthest node in the given direction) + */ + static alignNodes( + nodes: Dictionary, + direction: Direction, + align_to?: LGraphNode, + ): void { + alignNodes(Object.values(nodes), direction, align_to) + LGraphCanvas.active_canvas.setDirty(true, true) + } + + static onNodeAlign( + value: IContextMenuValue, + options: IContextMenuOptions, + event: MouseEvent, + prev_menu: ContextMenu, + node: LGraphNode, + ): void { + new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], { + event, + callback: inner_clicked, + parentMenu: prev_menu, + }) + + function inner_clicked(value: string) { + alignNodes( + Object.values(LGraphCanvas.active_canvas.selected_nodes), + value.toLowerCase() as Direction, + node, + ) + LGraphCanvas.active_canvas.setDirty(true, true) + } + } + + static onGroupAlign( + value: IContextMenuValue, + options: IContextMenuOptions, + event: MouseEvent, + prev_menu: ContextMenu, + ): void { + new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], { + event, + callback: inner_clicked, + parentMenu: prev_menu, + }) + + function inner_clicked(value: string) { + alignNodes( + Object.values(LGraphCanvas.active_canvas.selected_nodes), + value.toLowerCase() as Direction, + ) + LGraphCanvas.active_canvas.setDirty(true, true) + } + } + + static createDistributeMenu( + value: IContextMenuValue, + options: IContextMenuOptions, + event: MouseEvent, + prev_menu: ContextMenu, + ): void { + new LiteGraph.ContextMenu(["Vertically", "Horizontally"], { + event, + callback: inner_clicked, + parentMenu: prev_menu, + }) + + function inner_clicked(value: string) { + const canvas = LGraphCanvas.active_canvas + distributeNodes(Object.values(canvas.selected_nodes), value === "Horizontally") + canvas.setDirty(true, true) + } + } + + static onMenuAdd( + value: unknown, + options: unknown, + e: MouseEvent, + prev_menu?: ContextMenu, + callback?: (node: LGraphNode | null) => void, + ): boolean | undefined { + const canvas = LGraphCanvas.active_canvas + const ref_window = canvas.getCanvasWindow() + const { graph } = canvas + if (!graph) return + + inner_onMenuAdded("", prev_menu) + return false + + type AddNodeMenu = Omit, "callback"> & { + callback: ( + value: { value: string }, + event: Event, + mouseEvent: MouseEvent, + contextMenu: ContextMenu + ) => void + } + + function inner_onMenuAdded(base_category: string, prev_menu?: ContextMenu): void { + if (!graph) return + + const categories = LiteGraph + .getNodeTypesCategories(canvas.filter || graph.filter) + .filter(category => category.startsWith(base_category)) + const entries: AddNodeMenu[] = [] + + for (const category of categories) { + if (!category) continue + + const base_category_regex = new RegExp(`^(${base_category})`) + const category_name = category + .replace(base_category_regex, "") + .split("/", 1)[0] + const category_path = + base_category === "" + ? `${category_name}/` + : `${base_category}${category_name}/` + + let name = category_name + // in case it has a namespace like "shader::math/rand" it hides the namespace + if (name.includes("::")) name = name.split("::", 2)[1] + + const index = entries.findIndex(entry => entry.value === category_path) + if (index === -1) { + entries.push({ + value: category_path, + content: name, + has_submenu: true, + callback: function (value, event, mouseEvent, contextMenu) { + inner_onMenuAdded(value.value, contextMenu) + }, + }) + } + } + + const nodes = LiteGraph.getNodeTypesInCategory( + base_category.slice(0, -1), + canvas.filter || graph.filter, + ) + + for (const node of nodes) { + if (node.skip_list) continue + + const entry: AddNodeMenu = { + value: node.type, + content: node.title, + has_submenu: false, + callback: function (value, event, mouseEvent, contextMenu) { + if (!canvas.graph) throw new NullGraphError() + + const first_event = contextMenu.getFirstEvent() + canvas.graph.beforeChange() + const node = LiteGraph.createNode(value.value) + if (node) { + if (!first_event) throw new TypeError("Context menu event was null. This should not occur in normal usage.") + node.pos = canvas.convertEventToCanvasOffset(first_event) + canvas.graph.add(node) + } else { + console.warn("Failed to create node of type:", value.value) + } + + callback?.(node) + canvas.graph.afterChange() + }, + } + + entries.push(entry) + } + + // @ts-expect-error Remove param ref_window - unused + new LiteGraph.ContextMenu(entries, { event: e, parentMenu: prev_menu }, ref_window) + } + } + + static onMenuCollapseAll() {} + static onMenuNodeEdit() {} + + /** @param _options Parameter is never used */ + static showMenuNodeOptionalOutputs( + v: unknown, + /** Unused - immediately overwritten */ + _options: INodeOutputSlot[], + e: MouseEvent, + prev_menu: ContextMenu, + node: LGraphNode, + ): boolean | undefined { + if (!node) return + + const canvas = LGraphCanvas.active_canvas + + let entries: (IContextMenuValue | null)[] = [] + + if (LiteGraph.do_add_triggers_slots && node.findOutputSlot("onExecuted") == -1) { + entries.push({ content: "On Executed", value: ["onExecuted", LiteGraph.EVENT, { nameLocked: true }], className: "event" }) + } + // add callback for modifing the menu elements onMenuNodeOutputs + const retEntries = node.onMenuNodeOutputs?.(entries) + if (retEntries) entries = retEntries + + if (!entries.length) return + + new LiteGraph.ContextMenu( + entries, + { + event: e, + callback: inner_clicked, + parentMenu: prev_menu, + node, + }, + ) + + function inner_clicked(this: ContextMenuDivElement, v: IContextMenuValue, e: any, prev: any) { + if (!node) return + + // TODO: This is a static method, so the below "that" appears broken. + if (v.callback) v.callback.call(this, node, v, e, prev) + + if (!v.value) return + + const value = v.value[1] + + if (value && + (typeof value === "object" || Array.isArray(value))) { + // submenu why? + const entries = [] + for (const i in value) { + entries.push({ content: i, value: value[i] }) + } + new LiteGraph.ContextMenu(entries, { + event: e, + callback: inner_clicked, + parentMenu: prev_menu, + node, + }) + return false + } + + const { graph } = node + if (!graph) throw new NullGraphError() + + graph.beforeChange() + node.addOutput(v.value[0], v.value[1], v.value[2]) + + // a callback to the node when adding a slot + node.onNodeOutputAdd?.(v.value) + canvas.setDirty(true, true) + graph.afterChange() + } + + return false + } + + /** @param value Parameter is never used */ + static onShowMenuNodeProperties( + value: NodeProperty | undefined, + options: unknown, + e: MouseEvent, + prev_menu: ContextMenu, + node: LGraphNode, + ): boolean | undefined { + if (!node || !node.properties) return + + const canvas = LGraphCanvas.active_canvas + const ref_window = canvas.getCanvasWindow() + + const entries: IContextMenuValue[] = [] + for (const i in node.properties) { + value = node.properties[i] !== undefined ? node.properties[i] : " " + if (typeof value == "object") + value = JSON.stringify(value) + const info = node.getPropertyInfo(i) + if (info.type == "enum" || info.type == "combo") + value = LGraphCanvas.getPropertyPrintableValue(value, info.values) + + // value could contain invalid html characters, clean that + value = LGraphCanvas.decodeHTML(stringOrEmpty(value)) + entries.push({ + content: + `${info.label || i}` + + `${value}`, + value: i, + }) + } + if (!entries.length) { + return + } + + new LiteGraph.ContextMenu( + entries, + { + event: e, + callback: inner_clicked, + parentMenu: prev_menu, + allow_html: true, + node, + }, + // @ts-expect-error Unused + ref_window, + ) + + function inner_clicked(this: ContextMenuDivElement, v: { value: any }) { + if (!node) return + + const rect = this.getBoundingClientRect() + canvas.showEditPropertyValue(node, v.value, { + position: [rect.left, rect.top], + }) + } + + return false + } + + /** @deprecated */ + static decodeHTML(str: string): string { + const e = document.createElement("div") + e.textContent = str + return e.innerHTML + } + + static onMenuResizeNode( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): void { + if (!node) return + + const fApplyMultiNode = function (node: LGraphNode) { + node.setSize(node.computeSize()) + } + + const canvas = LGraphCanvas.active_canvas + if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) { + fApplyMultiNode(node) + } else { + for (const i in canvas.selected_nodes) { + fApplyMultiNode(canvas.selected_nodes[i]) + } + } + + canvas.setDirty(true, true) + } + + // TODO refactor :: this is used fot title but not for properties! + static onShowPropertyEditor( + item: { property: keyof LGraphNode, type: string }, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): void { + const property = item.property || "title" + const value = node[property] + + const title = document.createElement("span") + title.className = "name" + title.textContent = property + + const input = document.createElement("input") + Object.assign(input, { type: "text", className: "value", autofocus: true }) + + const button = document.createElement("button") + button.textContent = "OK" + + // TODO refactor :: use createDialog ? + const dialog = Object.assign(document.createElement("div"), { + is_modified: false, + className: "graphdialog", + close: () => dialog.remove(), + }) + dialog.append(title, input, button) + + input.value = String(value) + input.addEventListener("blur", function () { + this.focus() + }) + input.addEventListener("keydown", (e: KeyboardEvent) => { + dialog.is_modified = true + if (e.key == "Escape") { + // ESC + dialog.close() + } else if (e.key == "Enter") { + // save + inner() + } else if (!e.target || !("localName" in e.target) || e.target.localName != "textarea") { + return + } + e.preventDefault() + e.stopPropagation() + }) + + const canvas = LGraphCanvas.active_canvas + const canvasEl = canvas.canvas + + const rect = canvasEl.getBoundingClientRect() + const offsetx = rect ? -20 - rect.left : -20 + const offsety = rect ? -20 - rect.top : -20 + + if (e) { + dialog.style.left = `${e.clientX + offsetx}px` + dialog.style.top = `${e.clientY + offsety}px` + } else { + dialog.style.left = `${canvasEl.width * 0.5 + offsetx}px` + dialog.style.top = `${canvasEl.height * 0.5 + offsety}px` + } + + button.addEventListener("click", inner) + + if (canvasEl.parentNode == null) throw new TypeError("canvasEl.parentNode was null") + canvasEl.parentNode.append(dialog) + + input.focus() + + let dialogCloseTimer: number + dialog.addEventListener("mouseleave", function () { + if (LiteGraph.dialog_close_on_mouse_leave) { + if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave) { + dialogCloseTimer = setTimeout( + dialog.close, + LiteGraph.dialog_close_on_mouse_leave_delay, + ) + } + } + }) + dialog.addEventListener("mouseenter", function () { + if (LiteGraph.dialog_close_on_mouse_leave) { + if (dialogCloseTimer) clearTimeout(dialogCloseTimer) + } + }) + + function inner() { + if (input) setValue(input.value) + } + + function setValue(value: NodeProperty) { + if (item.type == "Number") { + value = Number(value) + } else if (item.type == "Boolean") { + value = Boolean(value) + } + // @ts-expect-error Requires refactor. + node[property] = value + dialog.remove() + canvas.setDirty(true, true) + } + } + + static getPropertyPrintableValue(value: unknown, values: unknown[] | object | undefined): string | undefined { + if (!values) return String(value) + + if (Array.isArray(values)) { + return String(value) + } + + if (typeof values === "object") { + let desc_value = "" + for (const k in values) { + // @ts-expect-error deprecated #578 + if (values[k] != value) continue + + desc_value = k + break + } + return `${String(value)} (${desc_value})` + } + } + + static onMenuNodeCollapse( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): void { + if (!node.graph) throw new NullGraphError() + + node.graph.beforeChange() + + const fApplyMultiNode = function (node: LGraphNode) { + node.collapse() + } + + const graphcanvas = LGraphCanvas.active_canvas + if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) { + fApplyMultiNode(node) + } else { + for (const i in graphcanvas.selected_nodes) { + fApplyMultiNode(graphcanvas.selected_nodes[i]) + } + } + + node.graph.afterChange() + } + + static onMenuToggleAdvanced( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): void { + if (!node.graph) throw new NullGraphError() + + node.graph.beforeChange() + const fApplyMultiNode = function (node: LGraphNode) { + node.toggleAdvanced() + } + + const graphcanvas = LGraphCanvas.active_canvas + if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) { + fApplyMultiNode(node) + } else { + for (const i in graphcanvas.selected_nodes) { + fApplyMultiNode(graphcanvas.selected_nodes[i]) + } + } + node.graph.afterChange() + } + + static onMenuNodeMode( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): boolean { + new LiteGraph.ContextMenu( + LiteGraph.NODE_MODES, + { event: e, callback: inner_clicked, parentMenu: menu, node }, + ) + + function inner_clicked(v: string) { + if (!node) return + + const kV = Object.values(LiteGraph.NODE_MODES).indexOf(v) + const fApplyMultiNode = function (node: LGraphNode) { + if (kV !== -1 && LiteGraph.NODE_MODES[kV]) { + node.changeMode(kV) + } else { + console.warn(`unexpected mode: ${v}`) + node.changeMode(LGraphEventMode.ALWAYS) + } + } + + const graphcanvas = LGraphCanvas.active_canvas + if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) { + fApplyMultiNode(node) + } else { + for (const i in graphcanvas.selected_nodes) { + fApplyMultiNode(graphcanvas.selected_nodes[i]) + } + } + } + + return false + } + + /** @param value Parameter is never used */ + static onMenuNodeColors( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): boolean { + if (!node) throw "no node for color" + + const values: IContextMenuValue[] = [] + values.push({ + value: null, + content: "No color", + }) + + for (const i in LGraphCanvas.node_colors) { + const color = LGraphCanvas.node_colors[i] + value = { + value: i, + content: `${i}`, + } + values.push(value) + } + new LiteGraph.ContextMenu(values, { + event: e, + callback: inner_clicked, + parentMenu: menu, + node, + }) + + function inner_clicked(v: IContextMenuValue) { + if (!node) return + + const fApplyColor = function (item: IColorable) { + const colorOption = v.value ? LGraphCanvas.node_colors[v.value] : null + item.setColorOption(colorOption) + } + + const canvas = LGraphCanvas.active_canvas + if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) { + fApplyColor(node) + } else { + for (const i in canvas.selected_nodes) { + fApplyColor(canvas.selected_nodes[i]) + } + } + canvas.setDirty(true, true) + } + + return false + } + + static onMenuNodeShapes( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu?: ContextMenu, + node?: LGraphNode, + ): boolean { + if (!node) throw "no node passed" + + new LiteGraph.ContextMenu(LiteGraph.VALID_SHAPES, { + event: e, + callback: inner_clicked, + parentMenu: menu, + node, + }) + + function inner_clicked(v: typeof LiteGraph.VALID_SHAPES[number]) { + if (!node) return + if (!node.graph) throw new NullGraphError() + + node.graph.beforeChange() + + const fApplyMultiNode = function (node: LGraphNode) { + node.shape = v + } + + const canvas = LGraphCanvas.active_canvas + if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) { + fApplyMultiNode(node) + } else { + for (const i in canvas.selected_nodes) { + fApplyMultiNode(canvas.selected_nodes[i]) + } + } + + node.graph.afterChange() + canvas.setDirty(true) + } + + return false + } + + static onMenuNodeRemove(): void { + LGraphCanvas.active_canvas.deleteSelected() + } + + static onMenuNodeClone( + value: IContextMenuValue, + options: IContextMenuOptions, + e: MouseEvent, + menu: ContextMenu, + node: LGraphNode, + ): void { + const { graph } = node + if (!graph) throw new NullGraphError() + graph.beforeChange() + + const newSelected = new Set() + + const fApplyMultiNode = function (node: LGraphNode, newNodes: Set): void { + if (node.clonable === false) return + + const newnode = node.clone() + if (!newnode) return + + newnode.pos = [node.pos[0] + 5, node.pos[1] + 5] + if (!node.graph) throw new NullGraphError() + + node.graph.add(newnode) + newNodes.add(newnode) + } + + const canvas = LGraphCanvas.active_canvas + if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) { + fApplyMultiNode(node, newSelected) + } else { + for (const i in canvas.selected_nodes) { + fApplyMultiNode(canvas.selected_nodes[i], newSelected) + } + } + + if (newSelected.size) { + canvas.selectNodes([...newSelected]) + } + + graph.afterChange() + + canvas.setDirty(true, true) + } + + /** + * clears all the data inside + * + */ + clear(): void { + this.frame = 0 + this.last_draw_time = 0 + this.render_time = 0 + this.fps = 0 + + // this.scale = 1; + // this.offset = [0,0]; + this.dragging_rectangle = null + + this.selected_nodes = {} + this.selected_group = null + this.selectedItems.clear() + this.state.selectionChanged = true + this.onSelectionChange?.(this.selected_nodes) + + this.visible_nodes = [] + this.node_over = undefined + this.node_capturing_input = null + this.connecting_links = null + this.highlighted_links = {} + + this.dragging_canvas = false + + this.#dirty() + this.dirty_area = null + + this.node_in_panel = null + this.node_widget = null + + this.last_mouse = [0, 0] + this.last_mouseclick = 0 + this.pointer.reset() + this.visible_area.set([0, 0, 0, 0]) + + this.onClear?.() + } + + /** + * Assigns a new graph to this canvas. + */ + setGraph(newGraph: LGraph | Subgraph): void { + const { graph } = this + if (newGraph === graph) return + + this.clear() + newGraph.attachCanvas(this) + + this.dispatch("litegraph:set-graph", { newGraph, oldGraph: graph }) + this.#dirty() + } + + openSubgraph(subgraph: Subgraph): void { + const { graph } = this + if (!graph) throw new NullGraphError() + + const options = { bubbles: true, detail: { subgraph, closingGraph: graph }, cancelable: true } + const mayContinue = this.canvas.dispatchEvent(new CustomEvent("subgraph-opening", options)) + if (!mayContinue) return + + this.clear() + this.subgraph = subgraph + this.setGraph(subgraph) + + this.canvas.dispatchEvent(new CustomEvent("subgraph-opened", options)) + } + + /** + * @returns the visually active graph (in case there are more in the stack) + */ + getCurrentGraph(): LGraph | null { + return this.graph + } + + /** + * Finds the canvas if required, throwing on failure. + * @param canvas Canvas element, or its element ID + * @returns The canvas element + * @throws If {@link canvas} is an element ID that does not belong to a valid HTML canvas element + */ + #validateCanvas( + canvas: string | HTMLCanvasElement, + ): HTMLCanvasElement & { data?: LGraphCanvas } { + if (typeof canvas === "string") { + const el = document.getElementById(canvas) + if (!(el instanceof HTMLCanvasElement)) throw "Error validating LiteGraph canvas: Canvas element not found" + return el + } + return canvas + } + + /** + * Sets the current HTML canvas element. + * Calls bindEvents to add input event listeners, and (re)creates the background canvas. + * @param canvas The canvas element to assign, or its HTML element ID. If null or undefined, the current reference is cleared. + * @param skip_events If true, events on the previous canvas will not be removed. Has no effect on the first invocation. + */ + setCanvas(canvas: string | HTMLCanvasElement, skip_events?: boolean) { + const element = this.#validateCanvas(canvas) + if (element === this.canvas) return + // maybe detach events from old_canvas + if (!element && this.canvas && !skip_events) this.unbindEvents() + + this.canvas = element + this.ds.element = element + this.pointer.element = element + + if (!element) return + + // TODO: classList.add + element.className += " lgraphcanvas" + element.data = this + + // Background canvas: To render objects behind nodes (background, links, groups) + this.bgcanvas = document.createElement("canvas") + this.bgcanvas.width = this.canvas.width + this.bgcanvas.height = this.canvas.height + + const ctx = element.getContext?.("2d") + if (ctx == null) { + if (element.localName != "canvas") { + throw `Element supplied for LGraphCanvas must be a element, you passed a ${element.localName}` + } + throw "This browser doesn't support Canvas" + } + this.ctx = ctx + + if (!skip_events) this.bindEvents() + } + + /** Captures an event and prevents default - returns false. */ + _doNothing(e: Event): boolean { + // console.log("pointerevents: _doNothing "+e.type); + e.preventDefault() + return false + } + + /** Captures an event and prevents default - returns true. */ + _doReturnTrue(e: Event): boolean { + e.preventDefault() + return true + } + + /** + * binds mouse, keyboard, touch and drag events to the canvas + */ + bindEvents(): void { + if (this._events_binded) { + console.warn("LGraphCanvas: events already bound") + return + } + + const { canvas } = this + // hack used when moving canvas between windows + const { document } = this.getCanvasWindow() + + this._mousedown_callback = this.processMouseDown.bind(this) + this._mousewheel_callback = this.processMouseWheel.bind(this) + this._mousemove_callback = this.processMouseMove.bind(this) + this._mouseup_callback = this.processMouseUp.bind(this) + this._mouseout_callback = this.processMouseOut.bind(this) + this._mousecancel_callback = this.processMouseCancel.bind(this) + + canvas.addEventListener("pointerdown", this._mousedown_callback, true) + canvas.addEventListener("wheel", this._mousewheel_callback, false) + + canvas.addEventListener("pointerup", this._mouseup_callback, true) + canvas.addEventListener("pointermove", this._mousemove_callback) + canvas.addEventListener("pointerout", this._mouseout_callback) + canvas.addEventListener("pointercancel", this._mousecancel_callback, true) + + canvas.addEventListener("contextmenu", this._doNothing) + + // Keyboard + this._key_callback = this.processKey.bind(this) + + canvas.addEventListener("keydown", this._key_callback, true) + // keyup event must be bound on the document + document.addEventListener("keyup", this._key_callback, true) + + canvas.addEventListener("dragover", this._doNothing, false) + canvas.addEventListener("dragend", this._doNothing, false) + canvas.addEventListener("dragenter", this._doReturnTrue, false) + + this._events_binded = true + } + + /** + * unbinds mouse events from the canvas + */ + unbindEvents(): void { + if (!this._events_binded) { + console.warn("LGraphCanvas: no events bound") + return + } + + // console.log("pointerevents: unbindEvents"); + const { document } = this.getCanvasWindow() + const { canvas } = this + + // Assertions: removing nullish is fine. + canvas.removeEventListener("pointercancel", this._mousecancel_callback!) + canvas.removeEventListener("pointerout", this._mouseout_callback!) + canvas.removeEventListener("pointermove", this._mousemove_callback!) + canvas.removeEventListener("pointerup", this._mouseup_callback!) + canvas.removeEventListener("pointerdown", this._mousedown_callback!) + canvas.removeEventListener("wheel", this._mousewheel_callback!) + canvas.removeEventListener("keydown", this._key_callback!) + document.removeEventListener("keyup", this._key_callback!) + canvas.removeEventListener("contextmenu", this._doNothing) + canvas.removeEventListener("dragenter", this._doReturnTrue) + + this._mousedown_callback = undefined + this._mousewheel_callback = undefined + this._key_callback = undefined + + this._events_binded = false + } + + /** + * Ensures the canvas will be redrawn on the next frame by setting the dirty flag(s). + * Without parameters, this function does nothing. + * @todo Impl. `setDirty()` or similar as shorthand to redraw everything. + * @param fgcanvas If true, marks the foreground canvas as dirty (nodes and anything drawn on top of them). Default: false + * @param bgcanvas If true, mark the background canvas as dirty (background, groups, links). Default: false + */ + setDirty(fgcanvas: boolean, bgcanvas?: boolean): void { + if (fgcanvas) this.dirty_canvas = true + if (bgcanvas) this.dirty_bgcanvas = true + } + + /** Marks the entire canvas as dirty. */ + #dirty(): void { + this.dirty_canvas = true + this.dirty_bgcanvas = true + } + + #linkConnectorDrop(): void { + const { graph, linkConnector, pointer } = this + if (!graph) throw new NullGraphError() + + pointer.onDragEnd = upEvent => linkConnector.dropLinks(graph, upEvent) + pointer.finally = () => this.linkConnector.reset(true) + } + + /** + * Used to attach the canvas in a popup + * @returns returns the window where the canvas is attached (the DOM root node) + */ + getCanvasWindow(): Window { + if (!this.canvas) return window + + const doc = this.canvas.ownerDocument + // @ts-expect-error Check if required + return doc.defaultView || doc.parentWindow + } + + /** + * starts rendering the content of the canvas when needed + * + */ + startRendering(): void { + // already rendering + if (this.is_rendering) return + + this.is_rendering = true + renderFrame.call(this) + + /** Render loop */ + function renderFrame(this: LGraphCanvas) { + if (!this.pause_rendering) { + this.draw() + } + + const window = this.getCanvasWindow() + if (this.is_rendering) { + if (this.#maximumFrameGap > 0) { + // Manual FPS limit + const gap = this.#maximumFrameGap - (LiteGraph.getTime() - this.last_draw_time) + setTimeout(renderFrame.bind(this), Math.max(1, gap)) + } else { + // FPS limited by refresh rate + window.requestAnimationFrame(renderFrame.bind(this)) + } + } + } + } + + /** + * stops rendering the content of the canvas (to save resources) + * + */ + stopRendering(): void { + this.is_rendering = false + /* + if(this.rendering_timer_id) + { + clearInterval(this.rendering_timer_id); + this.rendering_timer_id = null; + } + */ + } + + /* LiteGraphCanvas input */ + // used to block future mouse events (because of im gui) + blockClick(): void { + this.block_click = true + this.last_mouseclick = 0 + } + + /** + * Gets the widget at the current cursor position. + * @param node Optional node to check for widgets under cursor + * @returns The widget located at the current cursor position, if any is found. + * @deprecated Use {@link LGraphNode.getWidgetOnPos} instead. + * ```ts + * const [x, y] = canvas.graph_mouse + * const widget = canvas.node_over?.getWidgetOnPos(x, y, true) + * ``` + */ + getWidgetAtCursor(node?: LGraphNode): IBaseWidget | undefined { + node ??= this.node_over + return node?.getWidgetOnPos(this.graph_mouse[0], this.graph_mouse[1], true) + } + + /** + * Clears highlight and mouse-over information from nodes that should not have it. + * + * Intended to be called when the pointer moves away from a node. + * @param node The node that the mouse is now over + * @param e MouseEvent that is triggering this + */ + updateMouseOverNodes(node: LGraphNode | null, e: CanvasPointerEvent): void { + if (!this.graph) throw new NullGraphError() + + const { pointer } = this + const nodes = this.graph._nodes + for (const otherNode of nodes) { + if (otherNode.mouseOver && node != otherNode) { + // mouse leave + if (!pointer.eDown) pointer.resizeDirection = undefined + otherNode.mouseOver = undefined + this._highlight_input = undefined + this._highlight_pos = undefined + this.linkConnector.overWidget = undefined + + // Hover transitions + // TODO: Implement single lerp ease factor for current progress on hover in/out. + // In drawNode, multiply by ease factor and differential value (e.g. bg alpha +0.5). + otherNode.lostFocusAt = LiteGraph.getTime() + + this.node_over?.onMouseLeave?.(e) + this.node_over = undefined + this.dirty_canvas = true + } + } + } + + processMouseDown(e: PointerEvent): void { + if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && !e.altKey && e.buttons) { + this.#dragZoomStart = { pos: [e.x, e.y], scale: this.ds.scale } + return + } + + const { graph, pointer } = this + this.adjustMouseEvent(e) + if (e.isPrimary) pointer.down(e) + + if (this.set_canvas_dirty_on_mouse_event) this.dirty_canvas = true + + if (!graph) return + + const ref_window = this.getCanvasWindow() + LGraphCanvas.active_canvas = this + + const x = e.clientX + const y = e.clientY + this.ds.viewport = this.viewport + const is_inside = !this.viewport || isInRect(x, y, this.viewport) + + if (!is_inside) return + + const node = graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes) ?? undefined + + this.mouse[0] = x + this.mouse[1] = y + this.graph_mouse[0] = e.canvasX + this.graph_mouse[1] = e.canvasY + this.last_click_position = [this.mouse[0], this.mouse[1]] + + pointer.isDouble = pointer.isDown && e.isPrimary + pointer.isDown = true + + this.canvas.focus() + + LiteGraph.closeAllContextMenus(ref_window) + + if (this.onMouse?.(e) == true) return + + // left button mouse / single finger + if (e.button === 0 && !pointer.isDouble) { + this.#processPrimaryButton(e, node) + } else if (e.button === 1) { + this.#processMiddleButton(e, node) + } else if ( + (e.button === 2 || pointer.isDouble) && + this.allow_interaction && + !this.read_only + ) { + // Right / aux button + const { linkConnector, subgraph } = this + + // Sticky select - won't remove single nodes + if (subgraph?.inputNode.containsPoint(this.graph_mouse)) { + // Subgraph input node + this.processSelect(subgraph.inputNode, e, true) + subgraph.inputNode.onPointerDown(e, pointer, linkConnector) + } else if (subgraph?.outputNode.containsPoint(this.graph_mouse)) { + // Subgraph output node + this.processSelect(subgraph.outputNode, e, true) + subgraph.outputNode.onPointerDown(e, pointer, linkConnector) + } else { + if (node) { + this.processSelect(node, e, true) + } else if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) { + // Reroutes + const reroute = graph.getRerouteOnPos(e.canvasX, e.canvasY, this.#visibleReroutes) + if (reroute) { + if (e.altKey) { + pointer.onClick = (upEvent) => { + if (upEvent.altKey) { + // Ensure deselected + if (reroute.selected) { + this.deselect(reroute) + this.onSelectionChange?.(this.selected_nodes) + } + reroute.remove() + } + } + } else { + this.processSelect(reroute, e, true) + } + } + } + + // Show context menu for the node or group under the pointer + pointer.onClick ??= () => this.processContextMenu(node, e) + } + } + + this.last_mouse = [x, y] + this.last_mouseclick = LiteGraph.getTime() + this.last_mouse_dragging = true + + graph.change() + + // this is to ensure to defocus(blur) if a text input element is on focus + if ( + !ref_window.document.activeElement || + (ref_window.document.activeElement.nodeName.toLowerCase() != "input" && + ref_window.document.activeElement.nodeName.toLowerCase() != "textarea") + ) { + e.preventDefault() + } + e.stopPropagation() + + this.onMouseDown?.(e) + } + + /** + * Returns the first matching positionable item at the given co-ordinates. + * + * Order of preference: + * - Subgraph IO Nodes + * - Reroutes + * - Group titlebars + * @param x The x coordinate in canvas space + * @param y The y coordinate in canvas space + * @returns The positionable item or undefined + */ + #getPositionableOnPos(x: number, y: number): Positionable | undefined { + const ioNode = this.subgraph?.getIoNodeOnPos(x, y) + if (ioNode) return ioNode + + for (const reroute of this.#visibleReroutes) { + if (reroute.containsPoint([x, y])) return reroute + } + + return this.graph?.getGroupTitlebarOnPos(x, y) + } + + #processPrimaryButton(e: CanvasPointerEvent, node: LGraphNode | undefined) { + const { pointer, graph, linkConnector, subgraph } = this + if (!graph) throw new NullGraphError() + + const x = e.canvasX + const y = e.canvasY + + // Modifiers + const ctrlOrMeta = e.ctrlKey || e.metaKey + + // Multi-select drag rectangle + if (ctrlOrMeta && !e.altKey && LiteGraph.canvasNavigationMode === "legacy") { + this.#setupNodeSelectionDrag(e, pointer, node) + + return + } + + if (this.read_only) { + pointer.finally = () => this.dragging_canvas = false + this.dragging_canvas = true + return + } + + // clone node ALT dragging + if (LiteGraph.alt_drag_do_clone_nodes && e.altKey && !e.ctrlKey && node && this.allow_interaction) { + let newType = node.type + + if (node instanceof SubgraphNode) { + const cloned = node.subgraph + .clone() + .asSerialisable() + + const subgraph = graph.createSubgraph(cloned) + subgraph.configure(cloned) + newType = subgraph.id + } + + const node_data = node.clone()?.serialize() + if (node_data?.type != null) { + const cloned = LiteGraph.createNode(newType) + if (cloned) { + cloned.configure(node_data) + cloned.pos[0] += 5 + cloned.pos[1] += 5 + + if (this.allow_dragnodes) { + pointer.onDragStart = (pointer) => { + graph.add(cloned, false) + this.#startDraggingItems(cloned, pointer) + } + pointer.onDragEnd = e => this.#processDraggedItems(e) + } else { + // TODO: Check if before/after change are necessary here. + graph.beforeChange() + graph.add(cloned, false) + graph.afterChange() + } + + return + } + } + } + + // Node clicked + if (node && (this.allow_interaction || node.flags.allow_interaction)) { + this.#processNodeClick(e, ctrlOrMeta, node) + } else { + // Subgraph IO nodes + if (subgraph) { + const { inputNode, outputNode } = subgraph + + if (processSubgraphIONode(this, inputNode)) return + if (processSubgraphIONode(this, outputNode)) return + + function processSubgraphIONode(canvas: LGraphCanvas, ioNode: SubgraphInputNode | SubgraphOutputNode) { + if (!ioNode.containsPoint([x, y])) return false + + ioNode.onPointerDown(e, pointer, linkConnector) + pointer.onClick ??= () => canvas.processSelect(ioNode, e) + pointer.onDragStart ??= () => canvas.#startDraggingItems(ioNode, pointer, true) + pointer.onDragEnd ??= eUp => canvas.#processDraggedItems(eUp) + return true + } + } + + // Reroutes + if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) { + for (const reroute of this.#visibleReroutes) { + const overReroute = reroute.containsPoint([x, y]) + if (!reroute.isSlotHovered && !overReroute) continue + + if (overReroute) { + pointer.onClick = () => this.processSelect(reroute, e) + if (!e.shiftKey) { + pointer.onDragStart = pointer => this.#startDraggingItems(reroute, pointer, true) + pointer.onDragEnd = e => this.#processDraggedItems(e) + } + } + + if (reroute.isOutputHovered || (overReroute && e.shiftKey)) { + linkConnector.dragFromReroute(graph, reroute) + this.#linkConnectorDrop() + } + + if (reroute.isInputHovered) { + linkConnector.dragFromRerouteToOutput(graph, reroute) + this.#linkConnectorDrop() + } + + reroute.hideSlots() + this.dirty_bgcanvas = true + return + } + } + + // Links - paths of links & reroutes + // Set the width of the line for isPointInStroke checks + const { lineWidth } = this.ctx + this.ctx.lineWidth = this.connections_width + 7 + const dpi = window?.devicePixelRatio || 1 + + for (const linkSegment of this.renderedPaths) { + const centre = linkSegment._pos + if (!centre) continue + + // If we shift click on a link then start a link from that input + if ( + (e.shiftKey || e.altKey) && + linkSegment.path && + this.ctx.isPointInStroke(linkSegment.path, x * dpi, y * dpi) + ) { + this.ctx.lineWidth = lineWidth + + if (e.shiftKey && !e.altKey) { + linkConnector.dragFromLinkSegment(graph, linkSegment) + this.#linkConnectorDrop() + + return + } else if (e.altKey && !e.shiftKey) { + const newReroute = graph.createReroute([x, y], linkSegment) + pointer.onDragStart = pointer => this.#startDraggingItems(newReroute, pointer) + pointer.onDragEnd = e => this.#processDraggedItems(e) + return + } + } else if (isInRectangle(x, y, centre[0] - 4, centre[1] - 4, 8, 8)) { + this.ctx.lineWidth = lineWidth + + pointer.onClick = () => this.showLinkMenu(linkSegment, e) + pointer.onDragStart = () => this.dragging_canvas = true + pointer.finally = () => this.dragging_canvas = false + + // clear tooltip + this.over_link_center = undefined + return + } + } + + // Restore line width + this.ctx.lineWidth = lineWidth + + // Groups + const group = graph.getGroupOnPos(x, y) + this.selected_group = group ?? null + if (group) { + if (group.isInResize(x, y)) { + // Resize group + const b = group.boundingRect + const offsetX = x - (b[0] + b[2]) + const offsetY = y - (b[1] + b[3]) + + pointer.onDragStart = () => this.resizingGroup = group + pointer.onDrag = (eMove) => { + if (this.read_only) return + + // Resize only by the exact pointer movement + const pos: Point = [ + eMove.canvasX - group.pos[0] - offsetX, + eMove.canvasY - group.pos[1] - offsetY, + ] + // Unless snapping. + if (this.#snapToGrid) snapPoint(pos, this.#snapToGrid) + + const resized = group.resize(pos[0], pos[1]) + if (resized) this.dirty_bgcanvas = true + } + pointer.finally = () => this.resizingGroup = null + } else { + const f = group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE + const headerHeight = f * 1.4 + if ( + isInRectangle( + x, + y, + group.pos[0], + group.pos[1], + group.size[0], + headerHeight, + ) + ) { + // In title bar + pointer.onClick = () => this.processSelect(group, e) + pointer.onDragStart = (pointer) => { + group.recomputeInsideNodes() + this.#startDraggingItems(group, pointer, true) + } + pointer.onDragEnd = e => this.#processDraggedItems(e) + } + } + + pointer.onDoubleClick = () => { + this.emitEvent({ + subType: "group-double-click", + originalEvent: e, + group, + }) + } + } else { + pointer.onDoubleClick = () => { + // Double click within group should not trigger the searchbox. + if (this.allow_searchbox) { + this.showSearchBox(e) + e.preventDefault() + } + this.emitEvent({ + subType: "empty-double-click", + originalEvent: e, + }) + } + } + } + + if ( + !pointer.onDragStart && + !pointer.onClick && + !pointer.onDrag && + this.allow_dragcanvas + ) { + // allow dragging canvas if canvas is not in standard, or read-only (pan mode in standard) + if (LiteGraph.canvasNavigationMode !== "standard" || this.read_only) { + pointer.onClick = () => this.processSelect(null, e) + pointer.finally = () => this.dragging_canvas = false + this.dragging_canvas = true + } else { + this.#setupNodeSelectionDrag(e, pointer) + } + } + } + + #setupNodeSelectionDrag(e: CanvasPointerEvent, pointer: CanvasPointer, node?: LGraphNode | undefined): void { + const dragRect = new Float32Array(4) + + dragRect[0] = e.canvasX + dragRect[1] = e.canvasY + dragRect[2] = 1 + dragRect[3] = 1 + + pointer.onClick = (eUp) => { + // Click, not drag + const clickedItem = node ?? this.#getPositionableOnPos(eUp.canvasX, eUp.canvasY) + this.processSelect(clickedItem, eUp) + } + pointer.onDragStart = () => this.dragging_rectangle = dragRect + pointer.onDragEnd = upEvent => this.#handleMultiSelect(upEvent, dragRect) + pointer.finally = () => this.dragging_rectangle = null + } + + /** + * Processes a pointerdown event inside the bounds of a node. Part of {@link processMouseDown}. + * @param e The pointerdown event + * @param ctrlOrMeta Ctrl or meta key is pressed + * @param node The node to process a click event for + */ + #processNodeClick( + e: CanvasPointerEvent, + ctrlOrMeta: boolean, + node: LGraphNode, + ): void { + const { pointer, graph, linkConnector } = this + if (!graph) throw new NullGraphError() + + const x = e.canvasX + const y = e.canvasY + + pointer.onClick = () => this.processSelect(node, e) + + // Immediately bring to front + if (!node.flags.pinned) { + this.bringToFront(node) + } + + // Collapse toggle + const inCollapse = node.isPointInCollapse(x, y) + if (inCollapse) { + pointer.onClick = () => { + node.collapse() + this.setDirty(true, true) + } + } else if (!node.flags.collapsed) { + const { inputs, outputs } = node + + // Outputs + if (outputs) { + for (const [i, output] of outputs.entries()) { + const link_pos = node.getOutputPos(i) + if (isInRectangle(x, y, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) { + // Drag multiple output links + if (e.shiftKey && (output.links?.length || output._floatingLinks?.size)) { + linkConnector.moveOutputLink(graph, output) + this.#linkConnectorDrop() + return + } + + // New output link + linkConnector.dragNewFromOutput(graph, node, output) + this.#linkConnectorDrop() + + if (LiteGraph.shift_click_do_break_link_from) { + if (e.shiftKey) { + node.disconnectOutput(i) + } + } else if (LiteGraph.ctrl_alt_click_do_break_link) { + if (ctrlOrMeta && e.altKey && !e.shiftKey) { + node.disconnectOutput(i) + } + } + + // TODO: Move callbacks to the start of this closure (onInputClick is already correct). + pointer.onDoubleClick = () => node.onOutputDblClick?.(i, e) + pointer.onClick = () => node.onOutputClick?.(i, e) + + return + } + } + } + + // Inputs + if (inputs) { + for (const [i, input] of inputs.entries()) { + const link_pos = node.getInputPos(i) + const isInSlot = input instanceof NodeInputSlot + ? isInRect(x, y, input.boundingRect) + : isInRectangle(x, y, link_pos[0] - 15, link_pos[1] - 10, 30, 20) + + if (isInSlot) { + pointer.onDoubleClick = () => node.onInputDblClick?.(i, e) + pointer.onClick = () => node.onInputClick?.(i, e) + + const shouldBreakLink = LiteGraph.ctrl_alt_click_do_break_link && + ctrlOrMeta && + e.altKey && + !e.shiftKey + if (input.link !== null || input._floatingLinks?.size) { + // Existing link + if (shouldBreakLink || LiteGraph.click_do_break_link_to) { + node.disconnectInput(i, true) + } else if (e.shiftKey || this.allow_reconnect_links) { + linkConnector.moveInputLink(graph, input) + } + } + + // Dragging a new link from input to output + if (!linkConnector.isConnecting) { + linkConnector.dragNewFromInput(graph, node, input) + } + + this.#linkConnectorDrop() + this.dirty_bgcanvas = true + + return + } + } + } + } + + // Click was inside the node, but not on input/output, or resize area + const pos: Point = [x - node.pos[0], y - node.pos[1]] + + // Widget + const widget = node.getWidgetOnPos(x, y) + if (widget) { + this.#processWidgetClick(e, node, widget) + this.node_widget = [node, widget] + } else { + // Node background + pointer.onDoubleClick = () => { + // Double-click + // Check if it's a double click on the title bar + // Note: pos[1] is the y-coordinate of the node's body + // If clicking on node header (title), pos[1] is negative + if (pos[1] < 0 && !inCollapse) { + node.onNodeTitleDblClick?.(e, pos, this) + } else if (node instanceof SubgraphNode) { + this.openSubgraph(node.subgraph) + } + + node.onDblClick?.(e, pos, this) + this.emitEvent({ + subType: "node-double-click", + originalEvent: e, + node, + }) + this.processNodeDblClicked(node) + } + + // Mousedown callback - can block drag + if (node.onMouseDown?.(e, pos, this) || !this.allow_dragnodes) + return + + // Check for resize AFTER checking all other interaction areas + if (!node.flags.collapsed) { + const resizeDirection = node.findResizeDirection(x, y) + if (resizeDirection) { + pointer.resizeDirection = resizeDirection + const startBounds = new Rectangle(node.pos[0], node.pos[1], node.size[0], node.size[1]) + + pointer.onDragStart = () => { + graph.beforeChange() + this.resizing_node = node + } + + pointer.onDrag = (eMove) => { + if (this.read_only) return + + const deltaX = eMove.canvasX - x + const deltaY = eMove.canvasY - y + + const newBounds = new Rectangle(startBounds.x, startBounds.y, startBounds.width, startBounds.height) + + // Handle resize based on the direction + switch (resizeDirection) { + case "NE": // North-East (top-right) + newBounds.y = startBounds.y + deltaY + newBounds.width = startBounds.width + deltaX + newBounds.height = startBounds.height - deltaY + break + case "SE": // South-East (bottom-right) + newBounds.width = startBounds.width + deltaX + newBounds.height = startBounds.height + deltaY + break + case "SW": // South-West (bottom-left) + newBounds.x = startBounds.x + deltaX + newBounds.width = startBounds.width - deltaX + newBounds.height = startBounds.height + deltaY + break + case "NW": // North-West (top-left) + newBounds.x = startBounds.x + deltaX + newBounds.y = startBounds.y + deltaY + newBounds.width = startBounds.width - deltaX + newBounds.height = startBounds.height - deltaY + break + } + + // Apply snapping to position changes + if (this.#snapToGrid) { + if (resizeDirection.includes("N") || resizeDirection.includes("W")) { + const originalX = newBounds.x + const originalY = newBounds.y + + snapPoint(newBounds.pos, this.#snapToGrid) + + // Adjust size to compensate for snapped position + if (resizeDirection.includes("N")) { + newBounds.height += originalY - newBounds.y + } + if (resizeDirection.includes("W")) { + newBounds.width += originalX - newBounds.x + } + } + + snapPoint(newBounds.size, this.#snapToGrid) + } + + // Apply snapping to size changes + + // Enforce minimum size + const min = node.computeSize() + if (newBounds.width < min[0]) { + // If resizing from left, adjust position to maintain right edge + if (resizeDirection.includes("W")) { + newBounds.x = startBounds.x + startBounds.width - min[0] + } + newBounds.width = min[0] + } + if (newBounds.height < min[1]) { + // If resizing from top, adjust position to maintain bottom edge + if (resizeDirection.includes("N")) { + newBounds.y = startBounds.y + startBounds.height - min[1] + } + newBounds.height = min[1] + } + + node.pos = newBounds.pos + node.setSize(newBounds.size) + + this.#dirty() + } + + pointer.onDragEnd = () => { + this.#dirty() + graph.afterChange(node) + } + pointer.finally = () => { + this.resizing_node = null + pointer.resizeDirection = undefined + } + + // Set appropriate cursor for resize direction + this.canvas.style.cursor = cursors[resizeDirection] + return + } + } + + // Drag node + pointer.onDragStart = pointer => this.#startDraggingItems(node, pointer, true) + pointer.onDragEnd = e => this.#processDraggedItems(e) + } + + this.dirty_canvas = true + } + + #processWidgetClick(e: CanvasPointerEvent, node: LGraphNode, widget: IBaseWidget) { + const { pointer } = this + + // Custom widget - CanvasPointer + if (typeof widget.onPointerDown === "function") { + const handled = widget.onPointerDown(pointer, node, this) + if (handled) return + } + + const oldValue = widget.value + + const pos = this.graph_mouse + const x = pos[0] - node.pos[0] + const y = pos[1] - node.pos[1] + + const widgetInstance = toConcreteWidget(widget, node, false) + if (widgetInstance) { + pointer.onClick = () => widgetInstance.onClick({ + e, + node, + canvas: this, + }) + pointer.onDrag = eMove => widgetInstance.onDrag?.({ + e: eMove, + node, + canvas: this, + }) + } else if (widget.mouse) { + const result = widget.mouse(e, [x, y], node) + if (result != null) this.dirty_canvas = result + } + + // value changed + if (oldValue != widget.value) { + node.onWidgetChanged?.(widget.name, widget.value, oldValue, widget) + if (!node.graph) throw new NullGraphError() + node.graph._version++ + } + + // Clean up state var + pointer.finally = () => { + // Legacy custom widget callback + if (widget.mouse) { + const { eUp } = pointer + if (!eUp) return + const { canvasX, canvasY } = eUp + widget.mouse(eUp, [canvasX - node.pos[0], canvasY - node.pos[1]], node) + } + + this.node_widget = null + } + } + + /** + * Pointer middle button click processing. Part of {@link processMouseDown}. + * @param e The pointerdown event + * @param node The node to process a click event for + */ + #processMiddleButton(e: CanvasPointerEvent, node: LGraphNode | undefined) { + const { pointer } = this + + if ( + LiteGraph.middle_click_slot_add_default_node && + node && + this.allow_interaction && + !this.read_only && + !this.connecting_links && + !node.flags.collapsed + ) { + // not dragging mouse to connect two slots + let mClikSlot: INodeSlot | false = false + let mClikSlot_index: number | false = false + let mClikSlot_isOut: boolean = false + const { inputs, outputs } = node + + // search for outputs + if (outputs) { + for (const [i, output] of outputs.entries()) { + const link_pos = node.getOutputPos(i) + if (isInRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) { + mClikSlot = output + mClikSlot_index = i + mClikSlot_isOut = true + break + } + } + } + + // search for inputs + if (inputs) { + for (const [i, input] of inputs.entries()) { + const link_pos = node.getInputPos(i) + if (isInRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) { + mClikSlot = input + mClikSlot_index = i + mClikSlot_isOut = false + break + } + } + } + // Middle clicked a slot + if (mClikSlot && mClikSlot_index !== false) { + const alphaPosY = + 0.5 - + (mClikSlot_index + 1) / + (mClikSlot_isOut ? outputs.length : inputs.length) + const node_bounding = node.getBounding() + // estimate a position: this is a bad semi-bad-working mess .. REFACTOR with + // a correct autoplacement that knows about the others slots and nodes + const posRef: Point = [ + !mClikSlot_isOut + ? node_bounding[0] + : node_bounding[0] + node_bounding[2], + e.canvasY - 80, + ] + + pointer.onClick = () => this.createDefaultNodeForSlot({ + nodeFrom: !mClikSlot_isOut ? null : node, + slotFrom: !mClikSlot_isOut ? null : mClikSlot_index, + nodeTo: !mClikSlot_isOut ? node : null, + slotTo: !mClikSlot_isOut ? mClikSlot_index : null, + position: posRef, + nodeType: "AUTO", + posAdd: [!mClikSlot_isOut ? -30 : 30, -alphaPosY * 130], + posSizeFix: [!mClikSlot_isOut ? -1 : 0, 0], + }) + } + } + + // Drag canvas using middle mouse button + if (this.allow_dragcanvas) { + pointer.onDragStart = () => this.dragging_canvas = true + pointer.finally = () => this.dragging_canvas = false + } + } + + #processDragZoom(e: PointerEvent): void { + // stop canvas zoom action + if (!e.buttons) { + this.#dragZoomStart = null + return + } + + const start = this.#dragZoomStart + if (!start) throw new TypeError("Drag-zoom state object was null") + if (!this.graph) throw new NullGraphError() + + // calculate delta + const deltaY = e.y - start.pos[1] + const startScale = start.scale + + const scale = startScale - deltaY / 100 + + this.ds.changeScale(scale, start.pos) + this.graph.change() + } + + /** + * Called when a mouse move event has to be processed + */ + processMouseMove(e: PointerEvent): void { + if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && this.#dragZoomStart) { + this.#processDragZoom(e) + return + } + + if (this.autoresize) this.resize() + + if (this.set_canvas_dirty_on_mouse_event) this.dirty_canvas = true + + const { graph, resizingGroup, linkConnector, pointer, subgraph } = this + if (!graph) return + + LGraphCanvas.active_canvas = this + this.adjustMouseEvent(e) + const mouse: ReadOnlyPoint = [e.clientX, e.clientY] + this.mouse[0] = mouse[0] + this.mouse[1] = mouse[1] + const delta = [ + mouse[0] - this.last_mouse[0], + mouse[1] - this.last_mouse[1], + ] + this.last_mouse = mouse + const { canvasX: x, canvasY: y } = e + this.graph_mouse[0] = x + this.graph_mouse[1] = y + + if (e.isPrimary) pointer.move(e) + + /** See {@link state}.{@link LGraphCanvasState.hoveringOver hoveringOver} */ + let underPointer = CanvasItem.Nothing + if (subgraph) { + underPointer |= subgraph.inputNode.onPointerMove(e) + underPointer |= subgraph.outputNode.onPointerMove(e) + } + + if (this.block_click) { + e.preventDefault() + return + } + + e.dragging = this.last_mouse_dragging + + if (this.node_widget) { + // Legacy widget mouse callbacks for pointermove events + const [node, widget] = this.node_widget + + if (widget?.mouse) { + const relativeX = x - node.pos[0] + const relativeY = y - node.pos[1] + const result = widget.mouse(e, [relativeX, relativeY], node) + if (result != null) this.dirty_canvas = result + } + } + + // get node over + const node = graph.getNodeOnPos( + x, + y, + this.visible_nodes, + ) + + const dragRect = this.dragging_rectangle + if (dragRect) { + dragRect[2] = x - dragRect[0] + dragRect[3] = y - dragRect[1] + this.dirty_canvas = true + } else if (resizingGroup) { + // Resizing a group + underPointer |= CanvasItem.Group + pointer.resizeDirection = "SE" + } else if (this.dragging_canvas) { + this.ds.offset[0] += delta[0] / this.ds.scale + this.ds.offset[1] += delta[1] / this.ds.scale + this.#dirty() + } else if ( + (this.allow_interaction || node?.flags.allow_interaction) && + !this.read_only + ) { + if (linkConnector.isConnecting) this.dirty_canvas = true + + // remove mouseover flag + this.updateMouseOverNodes(node, e) + + // mouse over a node + if (node) { + underPointer |= CanvasItem.Node + + if (node.redraw_on_mouse) this.dirty_canvas = true + + // For input/output hovering + // to store the output of isOverNodeInput + const pos: Point = [0, 0] + const inputId = isOverNodeInput(node, x, y, pos) + const outputId = isOverNodeOutput(node, x, y, pos) + const overWidget = node.getWidgetOnPos(x, y, true) ?? undefined + + if (!node.mouseOver) { + // mouse enter + node.mouseOver = {} + this.node_over = node + this.dirty_canvas = true + + for (const reroute of this.#visibleReroutes) { + reroute.hideSlots() + this.dirty_bgcanvas = true + } + node.onMouseEnter?.(e) + } + + // in case the node wants to do something + node.onMouseMove?.(e, [x - node.pos[0], y - node.pos[1]], this) + + // The input the mouse is over has changed + const { mouseOver } = node + if ( + mouseOver.inputId !== inputId || + mouseOver.outputId !== outputId || + mouseOver.overWidget !== overWidget + ) { + mouseOver.inputId = inputId + mouseOver.outputId = outputId + mouseOver.overWidget = overWidget + + // State reset + linkConnector.overWidget = undefined + + // Check if link is over anything it could connect to - record position of valid target for snap / highlight + if (linkConnector.isConnecting) { + const firstLink = linkConnector.renderLinks.at(0) + + // Default: nothing highlighted + let highlightPos: Point | undefined + let highlightInput: INodeInputSlot | undefined + + if (!firstLink || !linkConnector.isNodeValidDrop(node)) { + // No link, or none of the dragged links may be dropped here + } else if (linkConnector.state.connectingTo === "input") { + if (overWidget) { + // Check widgets first - inputId is only valid if over the input socket + const slot = node.getSlotFromWidget(overWidget) + + if (slot && linkConnector.isInputValidDrop(node, slot)) { + highlightInput = slot + highlightPos = node.getInputSlotPos(slot) + linkConnector.overWidget = overWidget + } + } + + // Not over a valid widget - treat drop on invalid widget same as node background + if (!linkConnector.overWidget) { + if (inputId === -1 && outputId === -1) { + // Node background / title under the pointer + const result = node.findInputByType(firstLink.fromSlot.type) + if (result) { + highlightInput = result.slot + highlightPos = node.getInputSlotPos(result.slot) + } + } else if ( + inputId != -1 && + node.inputs[inputId] && + LiteGraph.isValidConnection(firstLink.fromSlot.type, node.inputs[inputId].type) + ) { + highlightPos = pos + // XXX CHECK THIS + highlightInput = node.inputs[inputId] + } + + if (highlightInput) { + const widget = node.getWidgetFromSlot(highlightInput) + if (widget) linkConnector.overWidget = widget + } + } + } else if (linkConnector.state.connectingTo === "output") { + // Connecting from an input to an output + if (inputId === -1 && outputId === -1) { + const result = node.findOutputByType(firstLink.fromSlot.type) + if (result) { + highlightPos = node.getOutputPos(result.index) + } + } else { + // check if I have a slot below de mouse + if ( + outputId != -1 && + node.outputs[outputId] && + LiteGraph.isValidConnection(firstLink.fromSlot.type, node.outputs[outputId].type) + ) { + highlightPos = pos + } + } + } + this._highlight_pos = highlightPos + this._highlight_input = highlightInput + } + + this.dirty_canvas = true + } + + // Resize direction - only show resize cursor if not over inputs/outputs/widgets + if (!pointer.eDown) { + if (inputId === -1 && outputId === -1 && !overWidget) { + pointer.resizeDirection = node.findResizeDirection(x, y) + } else { + // Clear resize direction when over inputs/outputs/widgets + pointer.resizeDirection &&= undefined + } + } + } else { + // Reroutes + underPointer = this.#updateReroutes(underPointer) + + // Not over a node + const segment = this.#getLinkCentreOnPos(e) + if (this.over_link_center !== segment) { + underPointer |= CanvasItem.Link + this.over_link_center = segment + this.dirty_bgcanvas = true + } + + if (this.canvas) { + const group = graph.getGroupOnPos(x, y) + if ( + group && + !e.ctrlKey && + !this.read_only && + group.isInResize(x, y) + ) { + pointer.resizeDirection = "SE" + } else { + pointer.resizeDirection &&= undefined + } + } + } + + // send event to node if capturing input (used with widgets that allow drag outside of the area of the node) + if (this.node_capturing_input && this.node_capturing_input != node) { + this.node_capturing_input.onMouseMove?.( + e, + [ + x - this.node_capturing_input.pos[0], + y - this.node_capturing_input.pos[1], + ], + this, + ) + } + + // Items being dragged + if (this.isDragging) { + const selected = this.selectedItems + const allItems = e.ctrlKey ? selected : getAllNestedItems(selected) + + const deltaX = delta[0] / this.ds.scale + const deltaY = delta[1] / this.ds.scale + for (const item of allItems) { + item.move(deltaX, deltaY, true) + } + + this.#dirty() + } + } + + this.hoveringOver = underPointer + + e.preventDefault() + return + } + + /** + * Updates the hover / snap state of all visible reroutes. + * @returns The original value of {@link underPointer}, with any found reroute items added. + */ + #updateReroutes(underPointer: CanvasItem): CanvasItem { + const { graph, pointer, linkConnector } = this + if (!graph) throw new NullGraphError() + + // Update reroute hover state + if (!pointer.isDown) { + let anyChanges = false + for (const reroute of this.#visibleReroutes) { + anyChanges ||= reroute.updateVisibility(this.graph_mouse) + + if (reroute.isSlotHovered) underPointer |= CanvasItem.RerouteSlot + } + if (anyChanges) this.dirty_bgcanvas = true + } else if (linkConnector.isConnecting) { + // Highlight the reroute that the mouse is over + for (const reroute of this.#visibleReroutes) { + if (reroute.containsPoint(this.graph_mouse)) { + if (linkConnector.isRerouteValidDrop(reroute)) { + linkConnector.overReroute = reroute + this._highlight_pos = reroute.pos + } + + return underPointer |= CanvasItem.RerouteSlot + } + } + } + + this._highlight_pos &&= undefined + linkConnector.overReroute &&= undefined + return underPointer + } + + /** + * Start dragging an item, optionally including all other selected items. + * + * ** This function sets the {@link CanvasPointer.finally}() callback. ** + * @param item The item that the drag event started on + * @param pointer The pointer event that initiated the drag, e.g. pointerdown + * @param sticky If `true`, the item is added to the selection - see {@link processSelect} + */ + #startDraggingItems(item: Positionable, pointer: CanvasPointer, sticky = false): void { + this.emitBeforeChange() + this.graph?.beforeChange() + // Ensure that dragging is properly cleaned up, on success or failure. + pointer.finally = () => { + this.isDragging = false + this.graph?.afterChange() + this.emitAfterChange() + } + + this.processSelect(item, pointer.eDown, sticky) + this.isDragging = true + } + + /** + * Handles shared clean up and placement after items have been dragged. + * @param e The event that completed the drag, e.g. pointerup, pointermove + */ + #processDraggedItems(e: CanvasPointerEvent): void { + const { graph } = this + if (e.shiftKey || LiteGraph.alwaysSnapToGrid) + graph?.snapToGrid(this.selectedItems) + + this.dirty_canvas = true + this.dirty_bgcanvas = true + + // TODO: Replace legacy behaviour: callbacks were never extended for multiple items + this.onNodeMoved?.(findFirstNode(this.selectedItems)) + } + + /** + * Called when a mouse up event has to be processed + */ + processMouseUp(e: PointerEvent): void { + // early exit for extra pointer + if (e.isPrimary === false) return + + const { graph, pointer } = this + if (!graph) return + + LGraphCanvas.active_canvas = this + + this.adjustMouseEvent(e) + + const now = LiteGraph.getTime() + e.click_time = now - this.last_mouseclick + + /** The mouseup event occurred near the mousedown event. */ + /** Normal-looking click event - mouseUp occurred near mouseDown, without dragging. */ + const isClick = pointer.up(e) + if (isClick === true) { + pointer.isDown = false + pointer.isDouble = false + // Required until all link behaviour is added to Pointer API + this.connecting_links = null + this.dragging_canvas = false + + graph.change() + + e.stopPropagation() + e.preventDefault() + return + } + + this.last_mouse_dragging = false + this.last_click_position = null + + // used to avoid sending twice a click in an immediate button + this.block_click &&= false + + if (e.button === 0) { + // left button + this.selected_group = null + + this.isDragging = false + + const x = e.canvasX + const y = e.canvasY + + if (!this.linkConnector.isConnecting) { + this.dirty_canvas = true + + // @ts-expect-error Unused param + this.node_over?.onMouseUp?.(e, [x - this.node_over.pos[0], y - this.node_over.pos[1]], this) + this.node_capturing_input?.onMouseUp?.(e, [ + x - this.node_capturing_input.pos[0], + y - this.node_capturing_input.pos[1], + ]) + } + } else if (e.button === 1) { + // middle button + this.dirty_canvas = true + this.dragging_canvas = false + } else if (e.button === 2) { + // right button + this.dirty_canvas = true + } + + pointer.isDown = false + pointer.isDouble = false + + graph.change() + + e.stopPropagation() + e.preventDefault() + return + } + + /** + * Called when the mouse moves off the canvas. Clears all node hover states. + * @param e + */ + processMouseOut(e: PointerEvent): void { + // TODO: Check if document.contains(e.relatedTarget) - handle mouseover node textarea etc. + this.adjustMouseEvent(e) + this.updateMouseOverNodes(null, e) + } + + processMouseCancel(): void { + console.warn("Pointer cancel!") + this.pointer.reset() + } + + /** + * Called when a mouse wheel event has to be processed + */ + processMouseWheel(e: WheelEvent): void { + if (!this.graph || !this.allow_dragcanvas) return + + // TODO: Mouse wheel zoom rewrite + // @ts-expect-error + const delta = e.wheelDeltaY ?? e.detail * -60 + + this.adjustMouseEvent(e) + + const pos: Point = [e.clientX, e.clientY] + if (this.viewport && !isPointInRect(pos, this.viewport)) return + + let { scale } = this.ds + + if (LiteGraph.canvasNavigationMode === "legacy" || (LiteGraph.canvasNavigationMode === "standard" && e.ctrlKey)) { + if (delta > 0) { + scale *= this.zoom_speed + } else if (delta < 0) { + scale *= 1 / (this.zoom_speed) + } + this.ds.changeScale(scale, [e.clientX, e.clientY]) + } else if ( + LiteGraph.macTrackpadGestures && + (!LiteGraph.macGesturesRequireMac || navigator.userAgent.includes("Mac")) + ) { + if (e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) { + if (e.deltaY > 0) { + scale *= 1 / this.zoom_speed + } else if (e.deltaY < 0) { + scale *= this.zoom_speed + } + this.ds.changeScale(scale, [e.clientX, e.clientY]) + } else if (e.ctrlKey) { + scale *= 1 + e.deltaY * (1 - this.zoom_speed) * 0.18 + this.ds.changeScale(scale, [e.clientX, e.clientY], false) + } else if (e.shiftKey) { + this.ds.offset[0] -= e.deltaY * 1.18 * (1 / scale) + } else { + this.ds.offset[0] -= e.deltaX * 1.18 * (1 / scale) + this.ds.offset[1] -= e.deltaY * 1.18 * (1 / scale) + } + } + + this.graph.change() + + e.preventDefault() + return + } + + #noItemsSelected(): void { + const event = new CustomEvent("litegraph:no-items-selected", { bubbles: true }) + this.canvas.dispatchEvent(event) + } + + /** + * process a key event + */ + processKey(e: KeyboardEvent): void { + this.#shiftDown = e.shiftKey + + const { graph } = this + if (!graph) return + + let block_default = false + // @ts-expect-error + if (e.target.localName == "input") return + + if (e.type == "keydown") { + // TODO: Switch + if (e.key === " ") { + // space + this.read_only = true + if (this._previously_dragging_canvas === null) { + this._previously_dragging_canvas = this.dragging_canvas + } + this.dragging_canvas = this.pointer.isDown + block_default = true + } else if (e.key === "Escape") { + // esc + if (this.linkConnector.isConnecting) { + this.linkConnector.reset() + e.preventDefault() + return + } + this.node_panel?.close() + this.options_panel?.close() + if (this.node_panel || this.options_panel) block_default = true + } else if (e.keyCode === 65 && e.ctrlKey) { + // select all Control A + this.selectItems() + block_default = true + } else if (e.keyCode === 67 && (e.metaKey || e.ctrlKey) && !e.shiftKey) { + // copy + if (this.selected_nodes) { + this.copyToClipboard() + block_default = true + } + } else if (e.keyCode === 86 && (e.metaKey || e.ctrlKey)) { + // paste + this.pasteFromClipboard({ connectInputs: e.shiftKey }) + } else if (e.key === "Delete" || e.key === "Backspace") { + // delete or backspace + // @ts-expect-error + if (e.target.localName != "input" && e.target.localName != "textarea") { + if (this.selectedItems.size === 0) { + this.#noItemsSelected() + return + } + + this.deleteSelected() + block_default = true + } + } + + // TODO + for (const node of Object.values(this.selected_nodes)) { + node.onKeyDown?.(e) + } + } else if (e.type == "keyup") { + if (e.key === " ") { + // space + this.read_only = false + this.dragging_canvas = (this._previously_dragging_canvas ?? false) && this.pointer.isDown + this._previously_dragging_canvas = null + } + + for (const node of Object.values(this.selected_nodes)) { + node.onKeyUp?.(e) + } + } + + // TODO: Do we need to remeasure and recalculate everything on every key down/up? + graph.change() + + if (block_default) { + e.preventDefault() + e.stopImmediatePropagation() + } + } + + /** + * Copies canvas items to an internal, app-specific clipboard backed by local storage. + * When called without parameters, it copies {@link selectedItems}. + * @param items The items to copy. If nullish, all selected items are copied. + */ + copyToClipboard(items?: Iterable): void { + const serialisable: Required = { + nodes: [], + groups: [], + reroutes: [], + links: [], + subgraphs: [], + } + + const subgraphs = new Set() + + // Create serialisable objects + for (const item of items ?? this.selectedItems) { + if (item instanceof LGraphNode) { + // Nodes + if (item.clonable === false) continue + + const cloned = item.clone()?.serialize() + if (!cloned) continue + + cloned.id = item.id + serialisable.nodes.push(cloned) + + // Links + if (item.inputs) { + for (const { link: linkId } of item.inputs) { + if (linkId == null) continue + + const link = this.graph?._links.get(linkId)?.asSerialisable() + if (link) serialisable.links.push(link) + } + } + + // Find all unique referenced subgraphs + if (item instanceof SubgraphNode) { + subgraphs.add(item.subgraph) + } + } else if (item instanceof LGraphGroup) { + // Groups + serialisable.groups.push(item.serialize()) + } else if (item instanceof Reroute) { + // Reroutes + serialisable.reroutes.push(item.asSerialisable()) + } + } + + // Add unique subgraph entries + // TODO: Must find all nested subgraphs + for (const subgraph of subgraphs) { + const cloned = subgraph + .clone(true) + .asSerialisable() + serialisable.subgraphs.push(cloned) + } + + localStorage.setItem( + "litegrapheditor_clipboard", + JSON.stringify(serialisable), + ) + } + + emitEvent(detail: LGraphCanvasEventMap["litegraph:canvas"]): void { + this.canvas.dispatchEvent( + new CustomEvent("litegraph:canvas", { + bubbles: true, + detail, + }), + ) + } + + /** @todo Refactor to where it belongs - e.g. Deleting / creating nodes is not actually canvas event. */ + emitBeforeChange(): void { + this.emitEvent({ + subType: "before-change", + }) + } + + /** @todo See {@link emitBeforeChange} */ + emitAfterChange(): void { + this.emitEvent({ + subType: "after-change", + }) + } + + /** + * Pastes the items from the canvas "clipbaord" - a local storage variable. + */ + _pasteFromClipboard(options: IPasteFromClipboardOptions = {}): ClipboardPasteResult | undefined { + const { + connectInputs = false, + position = this.graph_mouse, + } = options + + // if ctrl + shift + v is off, return when isConnectUnselected is true (shift is pressed) to maintain old behavior + if (!LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs && connectInputs) return + + const data = localStorage.getItem("litegrapheditor_clipboard") + if (!data) return + + const { graph } = this + if (!graph) throw new NullGraphError() + graph.beforeChange() + + // Parse & initialise + const parsed: ClipboardItems = JSON.parse(data) + parsed.nodes ??= [] + parsed.groups ??= [] + parsed.reroutes ??= [] + parsed.links ??= [] + parsed.subgraphs ??= [] + + // Find top-left-most boundary + let offsetX = Infinity + let offsetY = Infinity + for (const item of [...parsed.nodes, ...parsed.reroutes]) { + if (item.pos == null) throw new TypeError("Invalid node encounterd on paste. `pos` was null.") + + if (item.pos[0] < offsetX) offsetX = item.pos[0] + if (item.pos[1] < offsetY) offsetY = item.pos[1] + } + + // TODO: Remove when implementing `asSerialisable` + if (parsed.groups) { + for (const group of parsed.groups) { + if (group.bounding[0] < offsetX) offsetX = group.bounding[0] + if (group.bounding[1] < offsetY) offsetY = group.bounding[1] + } + } + + const results: ClipboardPasteResult = { + created: [], + nodes: new Map(), + links: new Map(), + reroutes: new Map(), + subgraphs: new Map(), + } + const { created, nodes, links, reroutes } = results + + // const failedNodes: ISerialisedNode[] = [] + + // Subgraphs + for (const info of parsed.subgraphs) { + // SubgraphV2: Remove always-clone behaviour + const originalId = info.id + info.id = createUuidv4() + + const subgraph = graph.createSubgraph(info) + subgraph.configure(info) + results.subgraphs.set(originalId, subgraph) + } + + // Groups + for (const info of parsed.groups) { + info.id = -1 + + const group = new LGraphGroup() + group.configure(info) + graph.add(group) + created.push(group) + } + + // Nodes + for (const info of parsed.nodes) { + // If the subgraph was cloned, update references to use the new subgraph ID. + const subgraph = results.subgraphs.get(info.type) + if (subgraph) info.type = subgraph.id + + const node = info.type == null ? null : LiteGraph.createNode(info.type) + if (!node) { + // failedNodes.push(info) + continue + } + + nodes.set(info.id, node) + info.id = -1 + + node.configure(info) + graph.add(node) + + created.push(node) + } + + // Reroutes + for (const info of parsed.reroutes) { + const { id, ...rerouteInfo } = info + + const reroute = graph.setReroute(rerouteInfo) + created.push(reroute) + reroutes.set(id, reroute) + } + + // Remap reroute parentIds for pasted reroutes + for (const reroute of reroutes.values()) { + if (reroute.parentId == null) continue + + const mapped = reroutes.get(reroute.parentId) + if (mapped) reroute.parentId = mapped.id + } + + // Links + for (const info of parsed.links) { + // Find the copied node / reroute ID + let outNode: LGraphNode | null | undefined = nodes.get(info.origin_id) + let afterRerouteId: number | undefined + if (info.parentId != null) afterRerouteId = reroutes.get(info.parentId)?.id + + // If it wasn't copied, use the original graph value + if (connectInputs && LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs) { + outNode ??= graph.getNodeById(info.origin_id) + afterRerouteId ??= info.parentId + } + + const inNode = nodes.get(info.target_id) + if (inNode) { + const link = outNode?.connect( + info.origin_slot, + inNode, + info.target_slot, + afterRerouteId, + ) + if (link) links.set(info.id, link) + } + } + + // Remap linkIds + for (const reroute of reroutes.values()) { + const ids = [...reroute.linkIds].map(x => links.get(x)?.id ?? x) + reroute.update(reroute.parentId, undefined, ids, reroute.floating) + + // Remove any invalid items + if (!reroute.validateLinks(graph.links, graph.floatingLinks)) { + graph.removeReroute(reroute.id) + } + } + + // Adjust positions + for (const item of created) { + item.pos[0] += position[0] - offsetX + item.pos[1] += position[1] - offsetY + } + + // TODO: Report failures, i.e. `failedNodes` + + this.selectItems(created) + + graph.afterChange() + + return results + } + + pasteFromClipboard(options: IPasteFromClipboardOptions = {}): void { + this.emitBeforeChange() + try { + this._pasteFromClipboard(options) + } finally { + this.emitAfterChange() + } + } + + processNodeDblClicked(n: LGraphNode): void { + this.onShowNodePanel?.(n) + this.onNodeDblClicked?.(n) + + this.setDirty(true) + } + + #handleMultiSelect(e: CanvasPointerEvent, dragRect: Float32Array) { + // Process drag + // Convert Point pair (pos, offset) to Rect + const { graph, selectedItems, subgraph } = this + if (!graph) throw new NullGraphError() + + const w = Math.abs(dragRect[2]) + const h = Math.abs(dragRect[3]) + if (dragRect[2] < 0) dragRect[0] -= w + if (dragRect[3] < 0) dragRect[1] -= h + dragRect[2] = w + dragRect[3] = h + + // Select nodes - any part of the node is in the select area + const isSelected = new Set() + const notSelected: Positionable[] = [] + + if (subgraph) { + const { inputNode, outputNode } = subgraph + + if (overlapBounding(dragRect, inputNode.boundingRect)) { + addPositionable(inputNode) + } + if (overlapBounding(dragRect, outputNode.boundingRect)) { + addPositionable(outputNode) + } + } + + for (const nodeX of graph._nodes) { + if (overlapBounding(dragRect, nodeX.boundingRect)) { + addPositionable(nodeX) + } + } + + // Select groups - the group is wholly inside the select area + for (const group of graph.groups) { + if (!containsRect(dragRect, group._bounding)) continue + + group.recomputeInsideNodes() + addPositionable(group) + } + + // Select reroutes - the centre point is inside the select area + for (const reroute of graph.reroutes.values()) { + if (!isPointInRect(reroute.pos, dragRect)) continue + + selectedItems.add(reroute) + reroute.selected = true + addPositionable(reroute) + } + + if (e.shiftKey) { + // Add to selection + for (const item of notSelected) this.select(item) + } else if (e.altKey) { + // Remove from selection + for (const item of isSelected) this.deselect(item) + } else { + // Replace selection + for (const item of selectedItems.values()) { + if (!isSelected.has(item)) this.deselect(item) + } + for (const item of notSelected) this.select(item) + } + this.onSelectionChange?.(this.selected_nodes) + + function addPositionable(item: Positionable): void { + if (!item.selected || !selectedItems.has(item)) notSelected.push(item) + else isSelected.add(item) + } + } + + /** + * Determines whether to select or deselect an item that has received a pointer event. Will deselect other nodes if + * @param item Canvas item to select/deselect + * @param e The MouseEvent to handle + * @param sticky Prevents deselecting individual nodes (as used by aux/right-click) + * @remarks + * Accessibility: anyone using {@link mutli_select} always deselects when clicking empty space. + */ + processSelect( + item: TPositionable | null | undefined, + e: CanvasPointerEvent | undefined, + sticky: boolean = false, + ): void { + const addModifier = e?.shiftKey + const subtractModifier = e != null && (e.metaKey || e.ctrlKey) + const eitherModifier = addModifier || subtractModifier + const modifySelection = eitherModifier || this.multi_select + + if (!item) { + if (!eitherModifier || this.multi_select) this.deselectAll() + } else if (!item.selected || !this.selectedItems.has(item)) { + if (!modifySelection) this.deselectAll(item) + this.select(item) + } else if (modifySelection && !sticky) { + this.deselect(item) + } else if (!sticky) { + this.deselectAll(item) + } else { + return + } + this.onSelectionChange?.(this.selected_nodes) + this.setDirty(true) + } + + /** + * Selects a {@link Positionable} item. + * @param item The canvas item to add to the selection. + */ + select(item: TPositionable): void { + if (item.selected && this.selectedItems.has(item)) return + + item.selected = true + this.selectedItems.add(item) + this.state.selectionChanged = true + if (!(item instanceof LGraphNode)) return + + // Node-specific handling + item.onSelected?.() + this.selected_nodes[item.id] = item + + this.onNodeSelected?.(item) + + // Highlight links + if (item.inputs) { + for (const input of item.inputs) { + if (input.link == null) continue + this.highlighted_links[input.link] = true + } + } + if (item.outputs) { + for (const id of item.outputs.flatMap(x => x.links)) { + if (id == null) continue + this.highlighted_links[id] = true + } + } + } + + /** + * Deselects a {@link Positionable} item. + * @param item The canvas item to remove from the selection. + */ + deselect(item: TPositionable): void { + if (!item.selected && !this.selectedItems.has(item)) return + + item.selected = false + this.selectedItems.delete(item) + this.state.selectionChanged = true + if (!(item instanceof LGraphNode)) return + + // Node-specific handling + item.onDeselected?.() + delete this.selected_nodes[item.id] + + this.onNodeDeselected?.(item) + + // Should be moved to top of function, and throw if null + const { graph } = this + if (!graph) return + + // Clear link highlight + if (item.inputs) { + for (const input of item.inputs) { + if (input.link == null) continue + + const node = LLink.getOriginNode(graph, input.link) + if (node && this.selectedItems.has(node)) continue + + delete this.highlighted_links[input.link] + } + } + if (item.outputs) { + for (const id of item.outputs.flatMap(x => x.links)) { + if (id == null) continue + + const node = LLink.getTargetNode(graph, id) + if (node && this.selectedItems.has(node)) continue + + delete this.highlighted_links[id] + } + } + } + + /** @deprecated See {@link LGraphCanvas.processSelect} */ + processNodeSelected(item: LGraphNode, e: CanvasPointerEvent): void { + this.processSelect( + item, + e, + e && (e.shiftKey || e.metaKey || e.ctrlKey || this.multi_select), + ) + } + + /** @deprecated See {@link LGraphCanvas.select} */ + selectNode(node: LGraphNode, add_to_current_selection?: boolean): void { + if (node == null) { + this.deselectAll() + } else { + this.selectNodes([node], add_to_current_selection) + } + } + + get empty(): boolean { + if (!this.graph) throw new NullGraphError() + return this.graph.empty + } + + get positionableItems() { + if (!this.graph) throw new NullGraphError() + return this.graph.positionableItems() + } + + /** + * Selects several items. + * @param items Items to select - if falsy, all items on the canvas will be selected + * @param add_to_current_selection If set, the items will be added to the current selection instead of replacing it + */ + selectItems(items?: Positionable[], add_to_current_selection?: boolean): void { + const itemsToSelect = items ?? this.positionableItems + if (!add_to_current_selection) this.deselectAll() + for (const item of itemsToSelect) this.select(item) + this.onSelectionChange?.(this.selected_nodes) + this.setDirty(true) + } + + /** + * selects several nodes (or adds them to the current selection) + * @deprecated See {@link LGraphCanvas.selectItems} + */ + selectNodes(nodes?: LGraphNode[], add_to_current_selection?: boolean): void { + this.selectItems(nodes, add_to_current_selection) + } + + /** @deprecated See {@link LGraphCanvas.deselect} */ + deselectNode(node: LGraphNode): void { + this.deselect(node) + } + + /** + * Deselects all items on the canvas. + * @param keepSelected If set, this item will not be removed from the selection. + */ + deselectAll(keepSelected?: Positionable): void { + if (!this.graph) return + + const selected = this.selectedItems + if (!selected.size) return + + let wasSelected: Positionable | undefined + for (const sel of selected) { + if (sel === keepSelected) { + wasSelected = sel + continue + } + sel.onDeselected?.() + sel.selected = false + } + selected.clear() + if (wasSelected) selected.add(wasSelected) + + this.setDirty(true) + + // Legacy code + const oldNode = keepSelected?.id == null ? null : this.selected_nodes[keepSelected.id] + this.selected_nodes = {} + this.current_node = null + this.highlighted_links = {} + + if (keepSelected instanceof LGraphNode) { + // Handle old object lookup + if (oldNode) this.selected_nodes[oldNode.id] = oldNode + + // Highlight links + if (keepSelected.inputs) { + for (const input of keepSelected.inputs) { + if (input.link == null) continue + this.highlighted_links[input.link] = true + } + } + if (keepSelected.outputs) { + for (const id of keepSelected.outputs.flatMap(x => x.links)) { + if (id == null) continue + this.highlighted_links[id] = true + } + } + } + + this.state.selectionChanged = true + this.onSelectionChange?.(this.selected_nodes) + } + + /** @deprecated See {@link LGraphCanvas.deselectAll} */ + deselectAllNodes(): void { + this.deselectAll() + } + + /** + * Deletes all selected items from the graph. + * @todo Refactor deletion task to LGraph. Selection is a canvas property, delete is a graph action. + */ + deleteSelected(): void { + const { graph } = this + if (!graph) throw new NullGraphError() + + this.emitBeforeChange() + graph.beforeChange() + + for (const item of this.selectedItems) { + if (item instanceof LGraphNode) { + const node = item + if (node.block_delete) continue + node.connectInputToOutput() + graph.remove(node) + this.onNodeDeselected?.(node) + } else if (item instanceof LGraphGroup) { + graph.remove(item) + } else if (item instanceof Reroute) { + graph.removeReroute(item.id) + } + } + + this.selected_nodes = {} + this.selectedItems.clear() + this.current_node = null + this.highlighted_links = {} + + this.state.selectionChanged = true + this.onSelectionChange?.(this.selected_nodes) + this.setDirty(true) + graph.afterChange() + this.emitAfterChange() + } + + /** + * deletes all nodes in the current selection from the graph + * @deprecated See {@link LGraphCanvas.deleteSelected} + */ + deleteSelectedNodes(): void { + this.deleteSelected() + } + + /** + * centers the camera on a given node + */ + centerOnNode(node: LGraphNode): void { + const dpi = window?.devicePixelRatio || 1 + this.ds.offset[0] = + -node.pos[0] - + node.size[0] * 0.5 + + (this.canvas.width * 0.5) / (this.ds.scale * dpi) + this.ds.offset[1] = + -node.pos[1] - + node.size[1] * 0.5 + + (this.canvas.height * 0.5) / (this.ds.scale * dpi) + this.setDirty(true, true) + } + + /** + * adds some useful properties to a mouse event, like the position in graph coordinates + */ + adjustMouseEvent( + e: T & Partial, + ): asserts e is T & CanvasPointerEvent { + let clientX_rel = e.clientX + let clientY_rel = e.clientY + + if (this.canvas) { + const b = this.canvas.getBoundingClientRect() + clientX_rel -= b.left + clientY_rel -= b.top + } + + e.safeOffsetX = clientX_rel + e.safeOffsetY = clientY_rel + + // TODO: Find a less brittle way to do this + + // Only set deltaX and deltaY if not already set. + // If deltaX and deltaY are already present, they are read-only. + // Setting them would result browser error => zoom in/out feature broken. + if (e.deltaX === undefined) + e.deltaX = clientX_rel - this.last_mouse_position[0] + if (e.deltaY === undefined) + e.deltaY = clientY_rel - this.last_mouse_position[1] + + this.last_mouse_position[0] = clientX_rel + this.last_mouse_position[1] = clientY_rel + + e.canvasX = clientX_rel / this.ds.scale - this.ds.offset[0] + e.canvasY = clientY_rel / this.ds.scale - this.ds.offset[1] + } + + /** + * changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom + */ + setZoom(value: number, zooming_center: Point) { + this.ds.changeScale(value, zooming_center) + this.#dirty() + } + + /** + * converts a coordinate from graph coordinates to canvas2D coordinates + */ + convertOffsetToCanvas(pos: Point, out: Point): Point { + // @ts-expect-error Unused param + return this.ds.convertOffsetToCanvas(pos, out) + } + + /** + * converts a coordinate from Canvas2D coordinates to graph space + */ + convertCanvasToOffset(pos: Point, out?: Point): Point { + return this.ds.convertCanvasToOffset(pos, out) + } + + // converts event coordinates from canvas2D to graph coordinates + convertEventToCanvasOffset(e: MouseEvent): Point { + const rect = this.canvas.getBoundingClientRect() + // TODO: -> this.ds.convertCanvasToOffset + return this.convertCanvasToOffset([ + e.clientX - rect.left, + e.clientY - rect.top, + ]) + } + + /** + * brings a node to front (above all other nodes) + */ + bringToFront(node: LGraphNode): void { + const { graph } = this + if (!graph) throw new NullGraphError() + + const i = graph._nodes.indexOf(node) + if (i == -1) return + + graph._nodes.splice(i, 1) + graph._nodes.push(node) + } + + /** + * sends a node to the back (below all other nodes) + */ + sendToBack(node: LGraphNode): void { + const { graph } = this + if (!graph) throw new NullGraphError() + + const i = graph._nodes.indexOf(node) + if (i == -1) return + + graph._nodes.splice(i, 1) + graph._nodes.unshift(node) + } + + /** + * Determines which nodes are visible and populates {@link out} with the results. + * @param nodes The list of nodes to check - if falsy, all nodes in the graph will be checked + * @param out Array to write visible nodes into - if falsy, a new array is created instead + * @returns Array passed ({@link out}), or a new array containing all visible nodes + */ + computeVisibleNodes(nodes?: LGraphNode[], out?: LGraphNode[]): LGraphNode[] { + const visible_nodes = out || [] + visible_nodes.length = 0 + if (!this.graph) throw new NullGraphError() + + const _nodes = nodes || this.graph._nodes + for (const node of _nodes) { + node.updateArea(this.ctx) + // Not in visible area + if (!overlapBounding(this.visible_area, node.renderArea)) continue + + visible_nodes.push(node) + } + return visible_nodes + } + + /** + * Checks if a node is visible on the canvas. + * @param node The node to check + * @returns `true` if the node is visible, otherwise `false` + */ + isNodeVisible(node: LGraphNode): boolean { + return this.#visible_node_ids.has(node.id) + } + + /** + * renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes) + */ + draw(force_canvas?: boolean, force_bgcanvas?: boolean): void { + if (!this.canvas || this.canvas.width == 0 || this.canvas.height == 0) return + + // fps counting + const now = LiteGraph.getTime() + this.render_time = (now - this.last_draw_time) * 0.001 + this.last_draw_time = now + + if (this.graph) this.ds.computeVisibleArea(this.viewport) + + // Compute node size before drawing links. + if (this.dirty_canvas || force_canvas) { + this.computeVisibleNodes(undefined, this.visible_nodes) + // Update visible node IDs + this.#visible_node_ids = new Set(this.visible_nodes.map(node => node.id)) + + // Arrange subgraph IO nodes + const { subgraph } = this + if (subgraph) { + subgraph.inputNode.arrange() + subgraph.outputNode.arrange() + } + } + + if ( + this.dirty_bgcanvas || + force_bgcanvas || + this.always_render_background || + (this.graph?._last_trigger_time && + now - this.graph._last_trigger_time < 1000) + ) { + this.drawBackCanvas() + } + + if (this.dirty_canvas || force_canvas) this.drawFrontCanvas() + + this.fps = this.render_time ? 1.0 / this.render_time : 0 + this.frame++ + } + + /** + * draws the front canvas (the one containing all the nodes) + */ + drawFrontCanvas(): void { + this.dirty_canvas = false + + const { ctx, canvas, graph, linkConnector } = this + + // @ts-expect-error + if (ctx.start2D && !this.viewport) { + // @ts-expect-error + ctx.start2D() + ctx.restore() + ctx.setTransform(1, 0, 0, 1, 0, 0) + } + + // clip dirty area if there is one, otherwise work in full canvas + const area = this.viewport || this.dirty_area + if (area) { + ctx.save() + ctx.beginPath() + ctx.rect(area[0], area[1], area[2], area[3]) + ctx.clip() + } + + // TODO: Set snapping value when changed instead of once per frame + this.#snapToGrid = this.#shiftDown || LiteGraph.alwaysSnapToGrid + ? this.graph?.getSnapToGridSize() + : undefined + + // clear + // canvas.width = canvas.width; + if (this.clear_background) { + if (area) ctx.clearRect(area[0], area[1], area[2], area[3]) + else ctx.clearRect(0, 0, canvas.width, canvas.height) + } + + // draw bg canvas + if (this.bgcanvas == this.canvas) { + this.drawBackCanvas() + } else { + const scale = window.devicePixelRatio + ctx.drawImage( + this.bgcanvas, + 0, + 0, + this.bgcanvas.width / scale, + this.bgcanvas.height / scale, + ) + } + + // rendering + this.onRender?.(canvas, ctx) + + // info widget + if (this.show_info) { + this.renderInfo(ctx, area ? area[0] : 0, area ? area[1] : 0) + } + + if (graph) { + // apply transformations + ctx.save() + this.ds.toCanvasContext(ctx) + + // draw nodes + const { visible_nodes } = this + const drawSnapGuides = this.#snapToGrid && this.isDragging + + for (const node of visible_nodes) { + ctx.save() + + // Draw snap shadow + if (drawSnapGuides && this.selectedItems.has(node)) + this.drawSnapGuide(ctx, node) + + // Localise co-ordinates to node position + ctx.translate(node.pos[0], node.pos[1]) + + // Draw + this.drawNode(node, ctx) + + ctx.restore() + } + + // Draw subgraph IO nodes + this.subgraph?.draw(ctx, this.colourGetter, this.linkConnector.renderLinks[0]?.fromSlot, this.editor_alpha) + + // on top (debug) + if (this.render_execution_order) { + this.drawExecutionOrder(ctx) + } + + // connections ontop? + if (graph.config.links_ontop) { + this.drawConnections(ctx) + } + + if (linkConnector.isConnecting) { + // current connection (the one being dragged by the mouse) + const { renderLinks } = linkConnector + const highlightPos = this.#getHighlightPosition() + ctx.lineWidth = this.connections_width + + for (const renderLink of renderLinks) { + const { fromSlot, fromPos: pos, fromDirection, dragDirection } = renderLink + const connShape = fromSlot.shape + const connType = fromSlot.type + + const colour = connType === LiteGraph.EVENT + ? LiteGraph.EVENT_LINK_COLOR + : LiteGraph.CONNECTING_LINK_COLOR + + // the connection being dragged by the mouse + this.renderLink( + ctx, + pos, + highlightPos, + null, + false, + null, + colour, + fromDirection, + dragDirection, + ) + + ctx.beginPath() + if (connType === LiteGraph.EVENT || connShape === RenderShape.BOX) { + ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10) + ctx.rect( + highlightPos[0] - 6 + 0.5, + highlightPos[1] - 5 + 0.5, + 14, + 10, + ) + } else if (connShape === RenderShape.ARROW) { + ctx.moveTo(pos[0] + 8, pos[1] + 0.5) + ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5) + ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5) + ctx.closePath() + } else { + ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2) + ctx.arc(highlightPos[0], highlightPos[1], 4, 0, Math.PI * 2) + } + ctx.fill() + } + + // Gradient half-border over target node + this.#renderSnapHighlight(ctx, highlightPos) + } + + // Area-selection rectangle + if (this.dragging_rectangle) { + const { eDown, eMove } = this.pointer + ctx.strokeStyle = "#FFF" + + if (eDown && eMove) { + // Do not scale the selection box + const transform = ctx.getTransform() + const ratio = Math.max(1, window.devicePixelRatio) + ctx.setTransform(ratio, 0, 0, ratio, 0, 0) + + const x = eDown.safeOffsetX + const y = eDown.safeOffsetY + ctx.strokeRect(x, y, eMove.safeOffsetX - x, eMove.safeOffsetY - y) + + ctx.setTransform(transform) + } else { + // Fallback to legacy behaviour + const [x, y, w, h] = this.dragging_rectangle + ctx.strokeRect(x, y, w, h) + } + } + + // on top of link center + if (!this.isDragging && this.over_link_center && this.render_link_tooltip) { + this.drawLinkTooltip(ctx, this.over_link_center) + } else { + this.onDrawLinkTooltip?.(ctx, null) + } + + // custom info + this.onDrawForeground?.(ctx, this.visible_area) + + ctx.restore() + } + + this.onDrawOverlay?.(ctx) + + if (area) ctx.restore() + } + + /** @returns If the pointer is over a link centre marker, the link segment it belongs to. Otherwise, `undefined`. */ + #getLinkCentreOnPos(e: CanvasPointerEvent): LinkSegment | undefined { + for (const linkSegment of this.renderedPaths) { + const centre = linkSegment._pos + if (!centre) continue + + if (isInRectangle(e.canvasX, e.canvasY, centre[0] - 4, centre[1] - 4, 8, 8)) { + return linkSegment + } + } + } + + /** Get the target snap / highlight point in graph space */ + #getHighlightPosition(): ReadOnlyPoint { + return LiteGraph.snaps_for_comfy + ? this.linkConnector.state.snapLinksPos ?? this._highlight_pos ?? this.graph_mouse + : this.graph_mouse + } + + /** + * Renders indicators showing where a link will connect if released. + * Partial border over target node and a highlight over the slot itself. + * @param ctx Canvas 2D context + */ + #renderSnapHighlight( + ctx: CanvasRenderingContext2D, + highlightPos: ReadOnlyPoint, + ): void { + const linkConnectorSnap = !!this.linkConnector.state.snapLinksPos + if (!this._highlight_pos && !linkConnectorSnap) return + + ctx.fillStyle = "#ffcc00" + ctx.beginPath() + const shape = this._highlight_input?.shape + + if (shape === RenderShape.ARROW) { + ctx.moveTo(highlightPos[0] + 8, highlightPos[1] + 0.5) + ctx.lineTo(highlightPos[0] - 4, highlightPos[1] + 6 + 0.5) + ctx.lineTo(highlightPos[0] - 4, highlightPos[1] - 6 + 0.5) + ctx.closePath() + } else { + ctx.arc(highlightPos[0], highlightPos[1], 6, 0, Math.PI * 2) + } + ctx.fill() + + const { linkConnector } = this + const { overReroute, overWidget } = linkConnector + if (!LiteGraph.snap_highlights_node || !linkConnector.isConnecting || linkConnectorSnap) return + + // Reroute highlight + overReroute?.drawHighlight(ctx, "#ffcc00aa") + + // Ensure we're mousing over a node and connecting a link + const node = this.node_over + if (!node) return + + const { strokeStyle, lineWidth } = ctx + + const area = node.boundingRect + const gap = 3 + const radius = LiteGraph.ROUND_RADIUS + gap + + const x = area[0] - gap + const y = area[1] - gap + const width = area[2] + gap * 2 + const height = area[3] + gap * 2 + + ctx.beginPath() + ctx.roundRect(x, y, width, height, radius) + + // TODO: Currently works on LTR slots only. Add support for other directions. + const start = linkConnector.state.connectingTo === "output" ? 0 : 1 + const inverter = start ? -1 : 1 + + // Radial highlight centred on highlight pos + const hx = highlightPos[0] + const hy = highlightPos[1] + const gRadius = width < height + ? width + : width * Math.max(height / width, 0.5) + + const gradient = ctx.createRadialGradient(hx, hy, 0, hx, hy, gRadius) + gradient.addColorStop(1, "#00000000") + gradient.addColorStop(0, "#ffcc00aa") + + // Linear gradient over half the node. + const linearGradient = ctx.createLinearGradient(x, y, x + width, y) + linearGradient.addColorStop(0.5, "#00000000") + linearGradient.addColorStop(start + 0.67 * inverter, "#ddeeff33") + linearGradient.addColorStop(start + inverter, "#ffcc0055") + + /** + * Workaround for a canvas render issue. + * In Chromium 129 (2024-10-15), rounded corners can be rendered with the wrong part of a gradient colour. + * Occurs only at certain thicknesses / arc sizes. + */ + ctx.setLineDash([radius, radius * 0.001]) + + ctx.lineWidth = 1 + ctx.strokeStyle = linearGradient + ctx.stroke() + + if (overWidget) { + const { computedHeight } = overWidget + + ctx.beginPath() + const { pos: [nodeX, nodeY] } = node + const height = LiteGraph.NODE_WIDGET_HEIGHT + if ( + overWidget.type.startsWith("custom") && + computedHeight != null && + computedHeight > height * 2 + ) { + // Most likely DOM widget text box + ctx.rect( + nodeX + 9, + nodeY + overWidget.y + 9, + (overWidget.width ?? area[2]) - 18, + computedHeight - 18, + ) + } else { + // Regular widget, probably + ctx.roundRect( + nodeX + BaseWidget.margin, + nodeY + overWidget.y, + overWidget.width ?? area[2], + height, + height * 0.5, + ) + } + ctx.stroke() + } + + ctx.strokeStyle = gradient + ctx.stroke() + + ctx.setLineDash([]) + ctx.lineWidth = lineWidth + ctx.strokeStyle = strokeStyle + } + + /** + * draws some useful stats in the corner of the canvas + */ + renderInfo(ctx: CanvasRenderingContext2D, x: number, y: number): void { + x = x || 10 + y = y || this.canvas.offsetHeight - 80 + + ctx.save() + ctx.translate(x, y) + + ctx.font = `10px ${LiteGraph.DEFAULT_FONT}` + ctx.fillStyle = "#888" + ctx.textAlign = "left" + if (this.graph) { + ctx.fillText(`T: ${this.graph.globaltime.toFixed(2)}s`, 5, 13 * 1) + ctx.fillText(`I: ${this.graph.iteration}`, 5, 13 * 2) + ctx.fillText(`N: ${this.graph._nodes.length} [${this.visible_nodes.length}]`, 5, 13 * 3) + ctx.fillText(`V: ${this.graph._version}`, 5, 13 * 4) + ctx.fillText(`FPS:${this.fps.toFixed(2)}`, 5, 13 * 5) + } else { + ctx.fillText("No graph selected", 5, 13 * 1) + } + ctx.restore() + } + + /** + * draws the back canvas (the one containing the background and the connections) + */ + drawBackCanvas(): void { + const canvas = this.bgcanvas + if ( + canvas.width != this.canvas.width || + canvas.height != this.canvas.height + ) { + canvas.width = this.canvas.width + canvas.height = this.canvas.height + } + + if (!this.bgctx) { + this.bgctx = this.bgcanvas.getContext("2d") + } + const ctx = this.bgctx + if (!ctx) throw new TypeError("Background canvas context was null.") + + const viewport = this.viewport || [0, 0, ctx.canvas.width, ctx.canvas.height] + + // clear + if (this.clear_background) { + ctx.clearRect(viewport[0], viewport[1], viewport[2], viewport[3]) + } + + const bg_already_painted = this.onRenderBackground + ? this.onRenderBackground(canvas, ctx) + : false + + // reset in case of error + if (!this.viewport) { + const scale = window.devicePixelRatio + ctx.restore() + ctx.setTransform(scale, 0, 0, scale, 0, 0) + } + + if (this.graph) { + // apply transformations + ctx.save() + this.ds.toCanvasContext(ctx) + + // render BG + if ( + this.ds.scale < 1.5 && + !bg_already_painted && + this.clear_background_color + ) { + ctx.fillStyle = this.clear_background_color + ctx.fillRect( + this.visible_area[0], + this.visible_area[1], + this.visible_area[2], + this.visible_area[3], + ) + } + + if (this.background_image && this.ds.scale > 0.5 && !bg_already_painted) { + if (this.zoom_modify_alpha) { + ctx.globalAlpha = (1.0 - 0.5 / this.ds.scale) * this.editor_alpha + } else { + ctx.globalAlpha = this.editor_alpha + } + ctx.imageSmoothingEnabled = false + if (!this._bg_img || this._bg_img.name != this.background_image) { + this._bg_img = new Image() + this._bg_img.name = this.background_image + this._bg_img.src = this.background_image + const that = this + this._bg_img.addEventListener("load", function () { + that.draw(true, true) + }) + } + + let pattern = this._pattern + if (pattern == null && this._bg_img.width > 0) { + pattern = ctx.createPattern(this._bg_img, "repeat") ?? undefined + this._pattern_img = this._bg_img + this._pattern = pattern + } + + // NOTE: This ridiculous kludge provides a significant performance increase when rendering many large (> canvas width) paths in HTML canvas. + // I could find no documentation or explanation. Requires that the BG image is set. + if (pattern) { + ctx.fillStyle = pattern + ctx.fillRect( + this.visible_area[0], + this.visible_area[1], + this.visible_area[2], + this.visible_area[3], + ) + ctx.fillStyle = "transparent" + } + + ctx.globalAlpha = 1.0 + ctx.imageSmoothingEnabled = true + } + + // groups + if (this.graph._groups.length) { + this.drawGroups(canvas, ctx) + } + + this.onDrawBackground?.(ctx, this.visible_area) + + // DEBUG: show clipping area + // ctx.fillStyle = "red"; + // ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20); + // bg + if (this.render_canvas_border) { + ctx.strokeStyle = "#235" + ctx.strokeRect(0, 0, canvas.width, canvas.height) + } + + if (this.render_connections_shadows) { + ctx.shadowColor = "#000" + ctx.shadowOffsetX = 0 + ctx.shadowOffsetY = 0 + ctx.shadowBlur = 6 + } else { + ctx.shadowColor = "rgba(0,0,0,0)" + } + + // draw connections + this.drawConnections(ctx) + + ctx.shadowColor = "rgba(0,0,0,0)" + + // restore state + ctx.restore() + } + + this.dirty_bgcanvas = false + // Forces repaint of the front canvas. + this.dirty_canvas = true + } + + /** + * draws the given node inside the canvas + */ + drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void { + this.current_node = node + + const color = node.renderingColor + const bgcolor = node.renderingBgColor + + const { low_quality, editor_alpha } = this + ctx.globalAlpha = editor_alpha + + if (this.render_shadows && !low_quality) { + ctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR + ctx.shadowOffsetX = 2 * this.ds.scale + ctx.shadowOffsetY = 2 * this.ds.scale + ctx.shadowBlur = 3 * this.ds.scale + } else { + ctx.shadowColor = "transparent" + } + + // custom draw collapsed method (draw after shadows because they are affected) + if (node.flags.collapsed && node.onDrawCollapsed?.(ctx, this) == true) + return + + // clip if required (mask) + const shape = node._shape || RenderShape.BOX + const size = LGraphCanvas.#temp_vec2 + size.set(node.renderingSize) + + if (node.collapsed) { + ctx.font = this.inner_text_font + } + + if (node.clip_area) { + // Start clipping + ctx.save() + ctx.beginPath() + if (shape == RenderShape.BOX) { + ctx.rect(0, 0, size[0], size[1]) + } else if (shape == RenderShape.ROUND) { + ctx.roundRect(0, 0, size[0], size[1], [10]) + } else if (shape == RenderShape.CIRCLE) { + ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI * 2) + } + ctx.clip() + } + + // draw shape + this.drawNodeShape( + node, + ctx, + size, + color, + bgcolor, + !!node.selected, + ) + + // Render title buttons (if not collapsed) + if (node.title_buttons && !node.flags.collapsed) { + const title_height = LiteGraph.NODE_TITLE_HEIGHT + let current_x = size[0] // Start flush with right edge + + for (let i = 0; i < node.title_buttons.length; i++) { + const button = node.title_buttons[i] + if (!button.visible) { + continue + } + + const button_width = button.getWidth(ctx) + current_x -= button_width + + // Center button vertically in title bar + const button_y = -title_height + (title_height - button.height) / 2 + + button.draw(ctx, current_x, button_y) + current_x -= 2 + } + } + + if (!low_quality) { + node.drawBadges(ctx) + } + + ctx.shadowColor = "transparent" + + // TODO: Legacy behaviour: onDrawForeground received ctx in this state + ctx.strokeStyle = LiteGraph.NODE_BOX_OUTLINE_COLOR + + // Draw Foreground + node.onDrawForeground?.(ctx, this, this.canvas) + + // connection slots + ctx.font = this.inner_text_font + + // render inputs and outputs + node._setConcreteSlots() + if (!node.collapsed) { + node.arrange() + node.drawSlots(ctx, { + fromSlot: this.linkConnector.renderLinks[0]?.fromSlot as INodeOutputSlot | INodeInputSlot, + colorContext: this.colourGetter, + editorAlpha: this.editor_alpha, + lowQuality: this.low_quality, + }) + + ctx.textAlign = "left" + ctx.globalAlpha = 1 + + this.drawNodeWidgets(node, null, ctx) + } else if (this.render_collapsed_slots) { + node.drawCollapsedSlots(ctx) + } + + if (node.clip_area) { + ctx.restore() + } + + ctx.globalAlpha = 1.0 + } + + /** + * Draws the link mouseover effect and tooltip. + * @param ctx Canvas 2D context to draw on + * @param link The link to render the mouseover effect for + * @remarks + * Called against {@link LGraphCanvas.over_link_center}. + * @todo Split tooltip from hover, so it can be drawn / eased separately + */ + drawLinkTooltip(ctx: CanvasRenderingContext2D, link: LinkSegment): void { + const pos = link._pos + ctx.fillStyle = "black" + ctx.beginPath() + if (this.linkMarkerShape === LinkMarkerShape.Arrow) { + const transform = ctx.getTransform() + ctx.translate(pos[0], pos[1]) + // Assertion: Number.isFinite guarantees this is a number. + if (Number.isFinite(link._centreAngle)) ctx.rotate(link._centreAngle as number) + ctx.moveTo(-2, -3) + ctx.lineTo(+4, 0) + ctx.lineTo(-2, +3) + ctx.setTransform(transform) + } else if ( + this.linkMarkerShape == null || + this.linkMarkerShape === LinkMarkerShape.Circle + ) { + ctx.arc(pos[0], pos[1], 3, 0, Math.PI * 2) + } + ctx.fill() + + // @ts-expect-error TODO: Better value typing + const { data } = link + if (data == null) return + + // @ts-expect-error TODO: Better value typing + if (this.onDrawLinkTooltip?.(ctx, link, this) == true) return + + let text: string | null = null + + if (typeof data === "number") + text = data.toFixed(2) + else if (typeof data === "string") + text = `"${data}"` + else if (typeof data === "boolean") + text = String(data) + else if (data.toToolTip) + text = data.toToolTip() + else + text = `[${data.constructor.name}]` + + if (text == null) return + + // Hard-coded tooltip limit + text = text.substring(0, 30) + + ctx.font = "14px Courier New" + const info = ctx.measureText(text) + const w = info.width + 20 + const h = 24 + ctx.shadowColor = "black" + ctx.shadowOffsetX = 2 + ctx.shadowOffsetY = 2 + ctx.shadowBlur = 3 + ctx.fillStyle = "#454" + ctx.beginPath() + ctx.roundRect(pos[0] - w * 0.5, pos[1] - 15 - h, w, h, [3]) + ctx.moveTo(pos[0] - 10, pos[1] - 15) + ctx.lineTo(pos[0] + 10, pos[1] - 15) + ctx.lineTo(pos[0], pos[1] - 5) + ctx.fill() + ctx.shadowColor = "transparent" + ctx.textAlign = "center" + ctx.fillStyle = "#CEC" + ctx.fillText(text, pos[0], pos[1] - 15 - h * 0.3) + } + + /** + * Draws the shape of the given node on the canvas + * @param node The node to draw + * @param ctx 2D canvas rendering context used to draw + * @param size Size of the background to draw, in graph units. Differs from node size if collapsed, etc. + * @param fgcolor Foreground colour - used for text + * @param bgcolor Background colour of the node + * @param _selected Whether to render the node as selected. Likely to be removed in future, as current usage is simply the selected property of the node. + */ + drawNodeShape( + node: LGraphNode, + ctx: CanvasRenderingContext2D, + size: Size, + fgcolor: CanvasColour, + bgcolor: CanvasColour, + _selected: boolean, + ): void { + // Rendering options + ctx.strokeStyle = fgcolor + ctx.fillStyle = bgcolor + + const title_height = LiteGraph.NODE_TITLE_HEIGHT + const { low_quality } = this + + const { collapsed } = node.flags + const shape = node.renderingShape + const { title_mode } = node + + const render_title = title_mode == TitleMode.TRANSPARENT_TITLE || title_mode == TitleMode.NO_TITLE + ? false + : true + + // Normalised node dimensions + const area = LGraphCanvas.#tmp_area + area.set(node.boundingRect) + area[0] -= node.pos[0] + area[1] -= node.pos[1] + + const old_alpha = ctx.globalAlpha + + // Draw node background (shape) + ctx.beginPath() + if (shape == RenderShape.BOX || low_quality) { + ctx.rect(area[0], area[1], area[2], area[3]) + } else if (shape == RenderShape.ROUND || shape == RenderShape.CARD) { + ctx.roundRect( + area[0], + area[1], + area[2], + area[3], + shape == RenderShape.CARD + ? [LiteGraph.ROUND_RADIUS, LiteGraph.ROUND_RADIUS, 0, 0] + : [LiteGraph.ROUND_RADIUS], + ) + } else if (shape == RenderShape.CIRCLE) { + ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI * 2) + } + ctx.fill() + + // Separator - title bar <-> body + if (!collapsed && render_title) { + ctx.shadowColor = "transparent" + ctx.fillStyle = "rgba(0,0,0,0.2)" + ctx.fillRect(0, -1, area[2], 2) + } + ctx.shadowColor = "transparent" + + node.onDrawBackground?.(ctx) + + // Title bar background (remember, it is rendered ABOVE the node) + if (render_title || title_mode == TitleMode.TRANSPARENT_TITLE) { + node.drawTitleBarBackground(ctx, { + scale: this.ds.scale, + low_quality, + }) + + // title box + node.drawTitleBox(ctx, { + scale: this.ds.scale, + low_quality, + box_size: 10, + }) + + ctx.globalAlpha = old_alpha + + // title text + node.drawTitleText(ctx, { + scale: this.ds.scale, + default_title_color: this.node_title_color, + low_quality, + }) + + // custom title render + node.onDrawTitle?.(ctx) + } + + // Draw stroke styles + for (const getStyle of Object.values(node.strokeStyles)) { + const strokeStyle = getStyle.call(node) + if (strokeStyle) { + strokeShape(ctx, area, { + shape, + title_height, + title_mode, + collapsed, + ...strokeStyle, + }) + } + } + + node.drawProgressBar(ctx) + + // these counter helps in conditioning drawing based on if the node has been executed or an action occurred + if (node.execute_triggered != null && node.execute_triggered > 0) node.execute_triggered-- + if (node.action_triggered != null && node.action_triggered > 0) node.action_triggered-- + } + + /** + * Draws a snap guide for a {@link Positionable} item. + * + * Initial design was a simple white rectangle representing the location the + * item would land if dropped. + * @param ctx The 2D canvas context to draw on + * @param item The item to draw a snap guide for + * @param shape The shape of the snap guide to draw + * @todo Update to align snapping with boundingRect + * @todo Shapes + */ + drawSnapGuide( + ctx: CanvasRenderingContext2D, + item: Positionable, + shape = RenderShape.ROUND, + ) { + const snapGuide = LGraphCanvas.#temp + snapGuide.set(item.boundingRect) + + // Not all items have pos equal to top-left of bounds + const { pos } = item + const offsetX = pos[0] - snapGuide[0] + const offsetY = pos[1] - snapGuide[1] + + // Normalise boundingRect to pos to snap + snapGuide[0] += offsetX + snapGuide[1] += offsetY + if (this.#snapToGrid) snapPoint(snapGuide, this.#snapToGrid) + snapGuide[0] -= offsetX + snapGuide[1] -= offsetY + + const { globalAlpha } = ctx + ctx.globalAlpha = 1 + ctx.beginPath() + const [x, y, w, h] = snapGuide + if (shape === RenderShape.CIRCLE) { + const midX = x + (w * 0.5) + const midY = y + (h * 0.5) + const radius = Math.min(w * 0.5, h * 0.5) + ctx.arc(midX, midY, radius, 0, Math.PI * 2) + } else { + ctx.rect(x, y, w, h) + } + + ctx.lineWidth = 0.5 + ctx.strokeStyle = "#FFFFFF66" + ctx.fillStyle = "#FFFFFF22" + ctx.fill() + ctx.stroke() + ctx.globalAlpha = globalAlpha + } + + drawConnections(ctx: CanvasRenderingContext2D): void { + this.renderedPaths.clear() + if (this.links_render_mode === LinkRenderType.HIDDEN_LINK) return + + const { graph, subgraph } = this + if (!graph) throw new NullGraphError() + + const visibleReroutes: Reroute[] = [] + + const now = LiteGraph.getTime() + const { visible_area } = this + LGraphCanvas.#margin_area[0] = visible_area[0] - 20 + LGraphCanvas.#margin_area[1] = visible_area[1] - 20 + LGraphCanvas.#margin_area[2] = visible_area[2] + 40 + LGraphCanvas.#margin_area[3] = visible_area[3] + 40 + + // draw connections + ctx.lineWidth = this.connections_width + + ctx.fillStyle = "#AAA" + ctx.strokeStyle = "#AAA" + ctx.globalAlpha = this.editor_alpha + // for every node + const nodes = graph._nodes + for (const node of nodes) { + // for every input (we render just inputs because it is easier as every slot can only have one input) + const { inputs } = node + if (!inputs?.length) continue + + for (const [i, input] of inputs.entries()) { + if (!input || input.link == null) continue + + const link_id = input.link + const link = graph._links.get(link_id) + if (!link) continue + + const endPos = node.getInputPos(i) + + // find link info + const start_node = graph.getNodeById(link.origin_id) + if (start_node == null) continue + + const outputId = link.origin_slot + const startPos: Point = outputId === -1 + ? [start_node.pos[0] + 10, start_node.pos[1] + 10] + : start_node.getOutputPos(outputId) + + const output = start_node.outputs[outputId] + if (!output) continue + + this.#renderAllLinkSegments(ctx, link, startPos, endPos, visibleReroutes, now, output.dir, input.dir) + } + } + + if (subgraph) { + for (const output of subgraph.inputNode.slots) { + if (!output.linkIds.length) continue + + // find link info + for (const linkId of output.linkIds) { + const resolved = LLink.resolve(linkId, graph) + if (!resolved) continue + + const { link, inputNode, input } = resolved + if (!inputNode || !input) continue + + const endPos = inputNode.getInputPos(link.target_slot) + + this.#renderAllLinkSegments(ctx, link, output.pos, endPos, visibleReroutes, now, input.dir, input.dir) + } + } + + for (const input of subgraph.outputNode.slots) { + if (!input.linkIds.length) continue + + // find link info + const resolved = LLink.resolve(input.linkIds[0], graph) + if (!resolved) continue + + const { link, outputNode, output } = resolved + if (!outputNode || !output) continue + + const startPos = outputNode.getOutputPos(link.origin_slot) + + this.#renderAllLinkSegments(ctx, link, startPos, input.pos, visibleReroutes, now, output.dir, input.dir) + } + } + + if (graph.floatingLinks.size > 0) { + this.#renderFloatingLinks(ctx, graph, visibleReroutes, now) + } + + const rerouteSet = this.#visibleReroutes + rerouteSet.clear() + + // Render reroutes, ordered by number of non-floating links + visibleReroutes.sort((a, b) => a.linkIds.size - b.linkIds.size) + for (const reroute of visibleReroutes) { + rerouteSet.add(reroute) + + if ( + this.#snapToGrid && + this.isDragging && + this.selectedItems.has(reroute) + ) { + this.drawSnapGuide(ctx, reroute, RenderShape.CIRCLE) + } + reroute.draw(ctx, this._pattern) + + // Never draw slots when the pointer is down + if (!this.pointer.isDown) reroute.drawSlots(ctx) + } + ctx.globalAlpha = 1 + } + + #renderFloatingLinks(ctx: CanvasRenderingContext2D, graph: LGraph, visibleReroutes: Reroute[], now: number) { + // Render floating links with 3/4 current alpha + const { globalAlpha } = ctx + ctx.globalAlpha = globalAlpha * 0.33 + + // Floating reroutes + for (const link of graph.floatingLinks.values()) { + const reroutes = LLink.getReroutes(graph, link) + const firstReroute = reroutes[0] + const reroute = reroutes.at(-1) + if (!firstReroute || !reroute?.floating) continue + + // Input not connected + if (reroute.floating.slotType === "input") { + const node = graph.getNodeById(link.target_id) + if (!node) continue + + const startPos = firstReroute.pos + const endPos = node.getInputPos(link.target_slot) + const endDirection = node.inputs[link.target_slot]?.dir + + firstReroute._dragging = true + this.#renderAllLinkSegments(ctx, link, startPos, endPos, visibleReroutes, now, LinkDirection.CENTER, endDirection, true) + } else { + const node = graph.getNodeById(link.origin_id) + if (!node) continue + + const startPos = node.getOutputPos(link.origin_slot) + const endPos = reroute.pos + const startDirection = node.outputs[link.origin_slot]?.dir + + link._dragging = true + this.#renderAllLinkSegments(ctx, link, startPos, endPos, visibleReroutes, now, startDirection, LinkDirection.CENTER, true) + } + } + ctx.globalAlpha = globalAlpha + } + + #renderAllLinkSegments( + ctx: CanvasRenderingContext2D, + link: LLink, + startPos: Point, + endPos: Point, + visibleReroutes: Reroute[], + now: number, + startDirection?: LinkDirection, + endDirection?: LinkDirection, + disabled: boolean = false, + ) { + const { graph, renderedPaths } = this + if (!graph) return + + // Get all points this link passes through + const reroutes = LLink.getReroutes(graph, link) + const points: [Point, ...Point[], Point] = [ + startPos, + ...reroutes.map(x => x.pos), + endPos, + ] + + // Bounding box of all points (bezier overshoot on long links will be cut) + const pointsX = points.map(x => x[0]) + const pointsY = points.map(x => x[1]) + LGraphCanvas.#link_bounding[0] = Math.min(...pointsX) + LGraphCanvas.#link_bounding[1] = Math.min(...pointsY) + LGraphCanvas.#link_bounding[2] = Math.max(...pointsX) - LGraphCanvas.#link_bounding[0] + LGraphCanvas.#link_bounding[3] = Math.max(...pointsY) - LGraphCanvas.#link_bounding[1] + + // skip links outside of the visible area of the canvas + if (!overlapBounding(LGraphCanvas.#link_bounding, LGraphCanvas.#margin_area)) + return + + const start_dir = startDirection || LinkDirection.RIGHT + const end_dir = endDirection || LinkDirection.LEFT + + // Has reroutes + if (reroutes.length) { + let startControl: Point | undefined + + const l = reroutes.length + for (let j = 0; j < l; j++) { + const reroute = reroutes[j] + + // Only render once + if (!renderedPaths.has(reroute)) { + renderedPaths.add(reroute) + visibleReroutes.push(reroute) + reroute._colour = link.color || + LGraphCanvas.link_type_colors[link.type] || + this.default_link_color + + const prevReroute = graph.getReroute(reroute.parentId) + const rerouteStartPos = prevReroute?.pos ?? startPos + reroute.calculateAngle(this.last_draw_time, graph, rerouteStartPos) + + // Skip the first segment if it is being dragged + if (!reroute._dragging) { + this.renderLink( + ctx, + rerouteStartPos, + reroute.pos, + link, + false, + 0, + null, + startControl === undefined ? start_dir : LinkDirection.CENTER, + LinkDirection.CENTER, + { + startControl, + endControl: reroute.controlPoint, + reroute, + disabled, + }, + ) + } + } + + if (!startControl && reroutes.at(-1)?.floating?.slotType === "input") { + // Floating link connected to an input + startControl = [0, 0] + } else { + // Calculate start control for the next iter control point + const nextPos = reroutes[j + 1]?.pos ?? endPos + const dist = Math.min(Reroute.maxSplineOffset, distance(reroute.pos, nextPos) * 0.25) + startControl = [dist * reroute.cos, dist * reroute.sin] + } + } + + // Skip the last segment if it is being dragged + if (link._dragging) return + + // Use runtime fallback; TypeScript cannot evaluate this correctly. + const segmentStartPos = points.at(-2) ?? startPos + + // Render final link segment + this.renderLink( + ctx, + segmentStartPos, + endPos, + link, + false, + 0, + null, + LinkDirection.CENTER, + end_dir, + { startControl, disabled }, + ) + // Skip normal render when link is being dragged + } else if (!link._dragging) { + this.renderLink( + ctx, + startPos, + endPos, + link, + false, + 0, + null, + start_dir, + end_dir, + ) + } + renderedPaths.add(link) + + // event triggered rendered on top + if (link?._last_time && now - link._last_time < 1000) { + const f = 2.0 - (now - link._last_time) * 0.002 + const tmp = ctx.globalAlpha + ctx.globalAlpha = tmp * f + this.renderLink( + ctx, + startPos, + endPos, + link, + true, + f, + "white", + start_dir, + end_dir, + ) + ctx.globalAlpha = tmp + } + } + + /** + * draws a link between two points + * @param ctx Canvas 2D rendering context + * @param a start pos + * @param b end pos + * @param link the link object with all the link info + * @param skip_border ignore the shadow of the link + * @param flow show flow animation (for events) + * @param color the color for the link + * @param start_dir the direction enum + * @param end_dir the direction enum + */ + renderLink( + ctx: CanvasRenderingContext2D, + a: ReadOnlyPoint, + b: ReadOnlyPoint, + link: LLink | null, + skip_border: boolean, + flow: number | null, + color: CanvasColour | null, + start_dir: LinkDirection, + end_dir: LinkDirection, + { + startControl, + endControl, + reroute, + num_sublines = 1, + disabled = false, + }: { + /** When defined, render data will be saved to this reroute instead of the {@link link}. */ + reroute?: Reroute + /** Offset of the bezier curve control point from {@link a point a} (output side) */ + startControl?: ReadOnlyPoint + /** Offset of the bezier curve control point from {@link b point b} (input side) */ + endControl?: ReadOnlyPoint + /** Number of sublines (useful to represent vec3 or rgb) @todo If implemented, refactor calculations out of the loop */ + num_sublines?: number + /** Whether this is a floating link segment */ + disabled?: boolean + } = {}, + ): void { + const linkColour = + link != null && this.highlighted_links[link.id] + ? "#FFF" + : color || + link?.color || + (link?.type != null && LGraphCanvas.link_type_colors[link.type]) || + this.default_link_color + const startDir = start_dir || LinkDirection.RIGHT + const endDir = end_dir || LinkDirection.LEFT + + const dist = this.links_render_mode == LinkRenderType.SPLINE_LINK && (!endControl || !startControl) + ? distance(a, b) + : 0 + + // TODO: Subline code below was inserted in the wrong place - should be before this statement + if (this.render_connections_border && !this.low_quality) { + ctx.lineWidth = this.connections_width + 4 + } + ctx.lineJoin = "round" + num_sublines ||= 1 + if (num_sublines > 1) ctx.lineWidth = 0.5 + + // begin line shape + const path = new Path2D() + + /** The link or reroute we're currently rendering */ + const linkSegment = reroute ?? link + if (linkSegment) linkSegment.path = path + + const innerA = LGraphCanvas.#lTempA + const innerB = LGraphCanvas.#lTempB + + /** Reference to {@link reroute._pos} if present, or {@link link._pos} if present. Caches the centre point of the link. */ + const pos: Point = linkSegment?._pos ?? [0, 0] + + for (let i = 0; i < num_sublines; i++) { + const offsety = (i - (num_sublines - 1) * 0.5) * 5 + innerA[0] = a[0] + innerA[1] = a[1] + innerB[0] = b[0] + innerB[1] = b[1] + + if (this.links_render_mode == LinkRenderType.SPLINE_LINK) { + if (endControl) { + innerB[0] = b[0] + endControl[0] + innerB[1] = b[1] + endControl[1] + } else { + this.#addSplineOffset(innerB, endDir, dist) + } + if (startControl) { + innerA[0] = a[0] + startControl[0] + innerA[1] = a[1] + startControl[1] + } else { + this.#addSplineOffset(innerA, startDir, dist) + } + path.moveTo(a[0], a[1] + offsety) + path.bezierCurveTo( + innerA[0], + innerA[1] + offsety, + innerB[0], + innerB[1] + offsety, + b[0], + b[1] + offsety, + ) + + // Calculate centre point + findPointOnCurve(pos, a, b, innerA, innerB, 0.5) + + if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) { + const justPastCentre = LGraphCanvas.#lTempC + findPointOnCurve(justPastCentre, a, b, innerA, innerB, 0.51) + + linkSegment._centreAngle = Math.atan2( + justPastCentre[1] - pos[1], + justPastCentre[0] - pos[0], + ) + } + } else { + const l = this.links_render_mode == LinkRenderType.LINEAR_LINK ? 15 : 10 + switch (startDir) { + case LinkDirection.LEFT: + innerA[0] += -l + break + case LinkDirection.RIGHT: + innerA[0] += l + break + case LinkDirection.UP: + innerA[1] += -l + break + case LinkDirection.DOWN: + innerA[1] += l + break + } + switch (endDir) { + case LinkDirection.LEFT: + innerB[0] += -l + break + case LinkDirection.RIGHT: + innerB[0] += l + break + case LinkDirection.UP: + innerB[1] += -l + break + case LinkDirection.DOWN: + innerB[1] += l + break + } + if (this.links_render_mode == LinkRenderType.LINEAR_LINK) { + path.moveTo(a[0], a[1] + offsety) + path.lineTo(innerA[0], innerA[1] + offsety) + path.lineTo(innerB[0], innerB[1] + offsety) + path.lineTo(b[0], b[1] + offsety) + + // Calculate centre point + pos[0] = (innerA[0] + innerB[0]) * 0.5 + pos[1] = (innerA[1] + innerB[1]) * 0.5 + + if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) { + linkSegment._centreAngle = Math.atan2( + innerB[1] - innerA[1], + innerB[0] - innerA[0], + ) + } + } else if (this.links_render_mode == LinkRenderType.STRAIGHT_LINK) { + const midX = (innerA[0] + innerB[0]) * 0.5 + + path.moveTo(a[0], a[1]) + path.lineTo(innerA[0], innerA[1]) + path.lineTo(midX, innerA[1]) + path.lineTo(midX, innerB[1]) + path.lineTo(innerB[0], innerB[1]) + path.lineTo(b[0], b[1]) + + // Calculate centre point + pos[0] = midX + pos[1] = (innerA[1] + innerB[1]) * 0.5 + + if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) { + const diff = innerB[1] - innerA[1] + if (Math.abs(diff) < 4) linkSegment._centreAngle = 0 + else if (diff > 0) linkSegment._centreAngle = Math.PI * 0.5 + else linkSegment._centreAngle = -(Math.PI * 0.5) + } + } else { + return + } + } + } + + // rendering the outline of the connection can be a little bit slow + if (this.render_connections_border && !this.low_quality && !skip_border) { + ctx.strokeStyle = "rgba(0,0,0,0.5)" + ctx.stroke(path) + } + + ctx.lineWidth = this.connections_width + ctx.fillStyle = ctx.strokeStyle = linkColour + ctx.stroke(path) + + // render arrow in the middle + if ( + this.ds.scale >= 0.6 && + this.highquality_render && + linkSegment + ) { + // render arrow + if (this.render_connection_arrows) { + // compute two points in the connection + const posA = this.computeConnectionPoint(a, b, 0.25, startDir, endDir) + const posB = this.computeConnectionPoint(a, b, 0.26, startDir, endDir) + const posC = this.computeConnectionPoint(a, b, 0.75, startDir, endDir) + const posD = this.computeConnectionPoint(a, b, 0.76, startDir, endDir) + + // compute the angle between them so the arrow points in the right direction + let angleA = 0 + let angleB = 0 + if (this.render_curved_connections) { + angleA = -Math.atan2(posB[0] - posA[0], posB[1] - posA[1]) + angleB = -Math.atan2(posD[0] - posC[0], posD[1] - posC[1]) + } else { + angleB = angleA = b[1] > a[1] ? 0 : Math.PI + } + + // render arrow + const transform = ctx.getTransform() + ctx.translate(posA[0], posA[1]) + ctx.rotate(angleA) + ctx.beginPath() + ctx.moveTo(-5, -3) + ctx.lineTo(0, +7) + ctx.lineTo(+5, -3) + ctx.fill() + ctx.setTransform(transform) + + ctx.translate(posC[0], posC[1]) + ctx.rotate(angleB) + ctx.beginPath() + ctx.moveTo(-5, -3) + ctx.lineTo(0, +7) + ctx.lineTo(+5, -3) + ctx.fill() + ctx.setTransform(transform) + } + + // Draw link centre marker + ctx.beginPath() + if (this.linkMarkerShape === LinkMarkerShape.Arrow) { + const transform = ctx.getTransform() + ctx.translate(pos[0], pos[1]) + if (linkSegment._centreAngle) ctx.rotate(linkSegment._centreAngle) + // The math is off, but it currently looks better in chromium + ctx.moveTo(-3.2, -5) + ctx.lineTo(+7, 0) + ctx.lineTo(-3.2, +5) + ctx.setTransform(transform) + } else if ( + this.linkMarkerShape == null || + this.linkMarkerShape === LinkMarkerShape.Circle + ) { + ctx.arc(pos[0], pos[1], 5, 0, Math.PI * 2) + } + if (disabled) { + const { fillStyle, globalAlpha } = ctx + ctx.fillStyle = this._pattern ?? "#797979" + ctx.globalAlpha = 0.75 + ctx.fill() + ctx.globalAlpha = globalAlpha + ctx.fillStyle = fillStyle + } + ctx.fill() + + if (LLink._drawDebug) { + const { fillStyle, font, globalAlpha, lineWidth, strokeStyle } = ctx + ctx.globalAlpha = 1 + ctx.lineWidth = 4 + ctx.fillStyle = "white" + ctx.strokeStyle = "black" + ctx.font = "16px Arial" + + const text = String(linkSegment.id) + const { width, actualBoundingBoxAscent } = ctx.measureText(text) + const x = pos[0] - width * 0.5 + const y = pos[1] + actualBoundingBoxAscent * 0.5 + ctx.strokeText(text, x, y) + ctx.fillText(text, x, y) + + ctx.font = font + ctx.globalAlpha = globalAlpha + ctx.lineWidth = lineWidth + ctx.fillStyle = fillStyle + ctx.strokeStyle = strokeStyle + } + } + + // render flowing points + if (flow) { + ctx.fillStyle = linkColour + for (let i = 0; i < 5; ++i) { + const f = (LiteGraph.getTime() * 0.001 + i * 0.2) % 1 + const flowPos = this.computeConnectionPoint(a, b, f, startDir, endDir) + ctx.beginPath() + ctx.arc(flowPos[0], flowPos[1], 5, 0, 2 * Math.PI) + ctx.fill() + } + } + } + + /** + * Finds a point along a spline represented by a to b, with spline endpoint directions dictacted by start_dir and end_dir. + * @param a Start point + * @param b End point + * @param t Time: distance between points (e.g 0.25 is 25% along the line) + * @param start_dir Spline start direction + * @param end_dir Spline end direction + * @returns The point at {@link t} distance along the spline a-b. + */ + computeConnectionPoint( + a: ReadOnlyPoint, + b: ReadOnlyPoint, + t: number, + start_dir: LinkDirection, + end_dir: LinkDirection, + ): Point { + start_dir ||= LinkDirection.RIGHT + end_dir ||= LinkDirection.LEFT + + const dist = distance(a, b) + const pa: Point = [a[0], a[1]] + const pb: Point = [b[0], b[1]] + + this.#addSplineOffset(pa, start_dir, dist) + this.#addSplineOffset(pb, end_dir, dist) + + const c1 = (1 - t) * (1 - t) * (1 - t) + const c2 = 3 * ((1 - t) * (1 - t)) * t + const c3 = 3 * (1 - t) * (t * t) + const c4 = t * t * t + + const x = c1 * a[0] + c2 * pa[0] + c3 * pb[0] + c4 * b[0] + const y = c1 * a[1] + c2 * pa[1] + c3 * pb[1] + c4 * b[1] + return [x, y] + } + + /** + * Modifies an existing point, adding a single-axis offset. + * @param point The point to add the offset to + * @param direction The direction to add the offset in + * @param dist Distance to offset + * @param factor Distance is mulitplied by this value. Default: 0.25 + */ + #addSplineOffset( + point: Point, + direction: LinkDirection, + dist: number, + factor = 0.25, + ): void { + switch (direction) { + case LinkDirection.LEFT: + point[0] += dist * -factor + break + case LinkDirection.RIGHT: + point[0] += dist * factor + break + case LinkDirection.UP: + point[1] += dist * -factor + break + case LinkDirection.DOWN: + point[1] += dist * factor + break + } + } + + drawExecutionOrder(ctx: CanvasRenderingContext2D): void { + ctx.shadowColor = "transparent" + ctx.globalAlpha = 0.25 + + ctx.textAlign = "center" + ctx.strokeStyle = "white" + ctx.globalAlpha = 0.75 + + const { visible_nodes } = this + for (const node of visible_nodes) { + ctx.fillStyle = "black" + ctx.fillRect( + node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT, + node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, + LiteGraph.NODE_TITLE_HEIGHT, + LiteGraph.NODE_TITLE_HEIGHT, + ) + if (node.order == 0) { + ctx.strokeRect( + node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT + 0.5, + node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT + 0.5, + LiteGraph.NODE_TITLE_HEIGHT, + LiteGraph.NODE_TITLE_HEIGHT, + ) + } + ctx.fillStyle = "#FFF" + ctx.fillText( + stringOrEmpty(node.order), + node.pos[0] + LiteGraph.NODE_TITLE_HEIGHT * -0.5, + node.pos[1] - 6, + ) + } + ctx.globalAlpha = 1 + } + + /** + * draws the widgets stored inside a node + * @deprecated Use {@link LGraphNode.drawWidgets} instead. + * @remarks Currently there are extensions hijacking this function, so we cannot remove it. + */ + drawNodeWidgets( + node: LGraphNode, + _posY: null, + ctx: CanvasRenderingContext2D, + ): void { + node.drawWidgets(ctx, { + lowQuality: this.low_quality, + editorAlpha: this.editor_alpha, + }) + } + + /** + * draws every group area in the background + */ + drawGroups(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): void { + if (!this.graph) return + + const groups = this.graph._groups + + ctx.save() + ctx.globalAlpha = 0.5 * this.editor_alpha + const drawSnapGuides = this.#snapToGrid && this.isDragging + + for (const group of groups) { + // out of the visible area + if (!overlapBounding(this.visible_area, group._bounding)) { + continue + } + + // Draw snap shadow + if (drawSnapGuides && this.selectedItems.has(group)) + this.drawSnapGuide(ctx, group) + + group.draw(this, ctx) + } + + ctx.restore() + } + + /** + * resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode + * @todo Remove or rewrite + */ + resize(width?: number, height?: number): void { + if (!width && !height) { + const parent = this.canvas.parentElement + if (!parent) throw new TypeError("Attempted to resize canvas, but parent element was null.") + width = parent.offsetWidth + height = parent.offsetHeight + } + + if (this.canvas.width == width && this.canvas.height == height) return + + this.canvas.width = width ?? 0 + this.canvas.height = height ?? 0 + this.bgcanvas.width = this.canvas.width + this.bgcanvas.height = this.canvas.height + this.setDirty(true, true) + } + + onNodeSelectionChange(): void {} + + /** + * Determines the furthest nodes in each direction for the currently selected nodes + */ + boundaryNodesForSelection(): NullableProperties { + return LGraphCanvas.getBoundaryNodes(this.selected_nodes) + } + + showLinkMenu(segment: LinkSegment, e: CanvasPointerEvent): boolean { + const { graph } = this + if (!graph) throw new NullGraphError() + + const title = "data" in segment && segment.data != null + ? segment.data.constructor.name + : undefined + + const { origin_id, origin_slot } = segment + if (origin_id == null || origin_slot == null) { + new LiteGraph.ContextMenu(["Link has no origin"], { + event: e, + title, + }) + return false + } + + const node_left = graph.getNodeById(origin_id) + const fromType = node_left?.outputs?.[origin_slot]?.type + + const options = ["Add Node", "Add Reroute", null, "Delete", null] + + const menu = new LiteGraph.ContextMenu(options, { + event: e, + title, + callback: inner_clicked.bind(this), + }) + + return false + + function inner_clicked(this: LGraphCanvas, v: string, options: unknown, e: MouseEvent) { + if (!graph) throw new NullGraphError() + + switch (v) { + case "Add Node": + LGraphCanvas.onMenuAdd(null, null, e, menu, (node) => { + if (!node?.inputs?.length || !node?.outputs?.length || origin_slot == null) return + + // leave the connection type checking inside connectByType + const options = { afterRerouteId: segment.parentId } + if (node_left?.connectByType(origin_slot, node, fromType ?? "*", options)) { + node.pos[0] -= node.size[0] * 0.5 + } + }) + break + + case "Add Reroute": { + try { + this.emitBeforeChange() + this.adjustMouseEvent(e) + graph.createReroute(segment._pos, segment) + this.setDirty(false, true) + } catch (error) { + console.error(error) + } finally { + this.emitAfterChange() + } + break + } + + case "Delete": + graph.removeLink(segment.id) + break + default: + } + } + } + + createDefaultNodeForSlot(optPass: ICreateDefaultNodeOptions): boolean { + type DefaultOptions = ICreateDefaultNodeOptions & { + posAdd: Point + posSizeFix: Point + } + + const opts = Object.assign({ + nodeFrom: null, + slotFrom: null, + nodeTo: null, + slotTo: null, + position: [0, 0], + nodeType: undefined, + posAdd: [0, 0], + posSizeFix: [0, 0], + }, optPass) + const { afterRerouteId } = opts + + const isFrom = opts.nodeFrom && opts.slotFrom !== null + const isTo = !isFrom && opts.nodeTo && opts.slotTo !== null + + if (!isFrom && !isTo) { + console.warn(`No data passed to createDefaultNodeForSlot`, opts.nodeFrom, opts.slotFrom, opts.nodeTo, opts.slotTo) + return false + } + if (!opts.nodeType) { + console.warn("No type to createDefaultNodeForSlot") + return false + } + + const nodeX = isFrom ? opts.nodeFrom : opts.nodeTo + if (!nodeX) throw new TypeError("nodeX was null when creating default node for slot.") + + let slotX = isFrom ? opts.slotFrom : opts.slotTo + + let iSlotConn: number | false = false + if (nodeX instanceof SubgraphIONodeBase) { + if (typeof slotX !== "object" || !slotX) { + console.warn("Cant get slot information", slotX) + return false + } + const { name } = slotX + iSlotConn = nodeX.slots.findIndex(s => s.name === name) + slotX = nodeX.slots[iSlotConn] + if (!slotX) { + console.warn("Cant get slot information", slotX) + return false + } + } else { + switch (typeof slotX) { + case "string": + iSlotConn = isFrom ? nodeX.findOutputSlot(slotX, false) : nodeX.findInputSlot(slotX, false) + slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX] + break + case "object": + if (slotX === null) { + console.warn("Cant get slot information", slotX) + return false + } + + // ok slotX + iSlotConn = isFrom ? nodeX.findOutputSlot(slotX.name) : nodeX.findInputSlot(slotX.name) + break + case "number": + iSlotConn = slotX + slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX] + break + case "undefined": + default: + console.warn("Cant get slot information", slotX) + return false + } + } + + // check for defaults nodes for this slottype + const fromSlotType = slotX.type == LiteGraph.EVENT ? "_event_" : slotX.type + const slotTypesDefault = isFrom + ? LiteGraph.slot_types_default_out + : LiteGraph.slot_types_default_in + if (slotTypesDefault?.[fromSlotType]) { + // TODO: Remove "any" kludge + let nodeNewType: any = false + if (typeof slotTypesDefault[fromSlotType] == "object") { + for (const typeX in slotTypesDefault[fromSlotType]) { + if ( + opts.nodeType == slotTypesDefault[fromSlotType][typeX] || + opts.nodeType == "AUTO" + ) { + nodeNewType = slotTypesDefault[fromSlotType][typeX] + break + } + } + } else if ( + opts.nodeType == slotTypesDefault[fromSlotType] || + opts.nodeType == "AUTO" + ) { + nodeNewType = slotTypesDefault[fromSlotType] + } + if (nodeNewType) { + // TODO: Remove "any" kludge + let nodeNewOpts: any = false + if (typeof nodeNewType == "object" && nodeNewType.node) { + nodeNewOpts = nodeNewType + nodeNewType = nodeNewType.node + } + + // that.graph.beforeChange(); + const newNode = LiteGraph.createNode(nodeNewType) + if (newNode) { + // if is object pass options + if (nodeNewOpts) { + if (nodeNewOpts.properties) { + for (const i in nodeNewOpts.properties) { + newNode.addProperty(i, nodeNewOpts.properties[i]) + } + } + if (nodeNewOpts.inputs) { + newNode.inputs = [] + for (const i in nodeNewOpts.inputs) { + newNode.addOutput( + nodeNewOpts.inputs[i][0], + nodeNewOpts.inputs[i][1], + ) + } + } + if (nodeNewOpts.outputs) { + newNode.outputs = [] + for (const i in nodeNewOpts.outputs) { + newNode.addOutput( + nodeNewOpts.outputs[i][0], + nodeNewOpts.outputs[i][1], + ) + } + } + if (nodeNewOpts.title) { + newNode.title = nodeNewOpts.title + } + if (nodeNewOpts.json) { + newNode.configure(nodeNewOpts.json) + } + } + + // add the node + if (!this.graph) throw new NullGraphError() + + this.graph.add(newNode) + newNode.pos = [ + opts.position[0] + opts.posAdd[0] + (opts.posSizeFix[0] ? opts.posSizeFix[0] * newNode.size[0] : 0), + opts.position[1] + opts.posAdd[1] + (opts.posSizeFix[1] ? opts.posSizeFix[1] * newNode.size[1] : 0), + ] + + // Interim API - allow the link connection to be canceled. + // TODO: https://github.com/Comfy-Org/litegraph.js/issues/946 + const detail = { node: newNode, opts } + const mayConnectLinks = this.canvas.dispatchEvent(new CustomEvent("connect-new-default-node", { detail, cancelable: true })) + if (!mayConnectLinks) return true + + // connect the two! + if (isFrom) { + if (!opts.nodeFrom) throw new TypeError("createDefaultNodeForSlot - nodeFrom was null") + opts.nodeFrom.connectByType(iSlotConn, newNode, fromSlotType, { afterRerouteId }) + } else { + if (!opts.nodeTo) throw new TypeError("createDefaultNodeForSlot - nodeTo was null") + opts.nodeTo.connectByTypeOutput(iSlotConn, newNode, fromSlotType, { afterRerouteId }) + } + + // if connecting in between + if (isFrom && isTo) { + // TODO + } + + return true + } + console.log(`failed creating ${nodeNewType}`) + } + } + return false + } + + showConnectionMenu(optPass: Partial): ContextMenu | undefined { + const opts = Object.assign({ + nodeFrom: null, + slotFrom: null, + nodeTo: null, + slotTo: null, + e: undefined, + allow_searchbox: this.allow_searchbox, + showSearchBox: this.showSearchBox, + }, optPass || {}) + const dirty = () => this.#dirty() + const that = this + const { graph } = this + const { afterRerouteId } = opts + + const isFrom = opts.nodeFrom && opts.slotFrom + const isTo = !isFrom && opts.nodeTo && opts.slotTo + + if (!isFrom && !isTo) { + console.warn("No data passed to showConnectionMenu") + return + } + + const nodeX = isFrom ? opts.nodeFrom : opts.nodeTo + if (!nodeX) throw new TypeError("nodeX was null when creating default node for slot.") + let slotX = isFrom ? opts.slotFrom : opts.slotTo + + let iSlotConn: number + if (nodeX instanceof SubgraphIONodeBase) { + if (typeof slotX !== "object" || !slotX) { + console.warn("Cant get slot information", slotX) + return + } + const { name } = slotX + iSlotConn = nodeX.slots.findIndex(s => s.name === name) + // If it's not found in the main slots, it might be the empty slot from a Subgraph node. + // In that case, the original `slotX` object is the correct one, so don't overwrite it. + if (iSlotConn !== -1) { + slotX = nodeX.slots[iSlotConn] + } + if (!slotX) { + console.warn("Cant get slot information", slotX) + return + } + } else { + switch (typeof slotX) { + case "string": + iSlotConn = isFrom + ? nodeX.findOutputSlot(slotX, false) + : nodeX.findInputSlot(slotX, false) + slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX] + break + case "object": + if (slotX === null) { + console.warn("Cant get slot information", slotX) + return + } + + // ok slotX + iSlotConn = isFrom + ? nodeX.findOutputSlot(slotX.name) + : nodeX.findInputSlot(slotX.name) + break + case "number": + iSlotConn = slotX + slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX] + break + default: + console.warn("Cant get slot information", slotX) + return + } + } + + const options = ["Add Node", "Add Reroute", null] + + if (opts.allow_searchbox) { + options.push("Search", null) + } + + // get defaults nodes for this slottype + const fromSlotType = slotX.type == LiteGraph.EVENT ? "_event_" : slotX.type + const slotTypesDefault = isFrom + ? LiteGraph.slot_types_default_out + : LiteGraph.slot_types_default_in + if (slotTypesDefault?.[fromSlotType]) { + if (typeof slotTypesDefault[fromSlotType] == "object") { + for (const typeX in slotTypesDefault[fromSlotType]) { + options.push(slotTypesDefault[fromSlotType][typeX]) + } + } else { + options.push(slotTypesDefault[fromSlotType]) + } + } + + // build menu + const menu = new LiteGraph.ContextMenu(options, { + event: opts.e, + extra: slotX, + title: + (slotX && slotX.name != "" + ? slotX.name + (fromSlotType ? " | " : "") + : "") + (slotX && fromSlotType ? fromSlotType : ""), + callback: inner_clicked, + }) + + return menu + + // callback + function inner_clicked(v: string | undefined, options: IContextMenuOptions, e: MouseEvent) { + switch (v) { + case "Add Node": + LGraphCanvas.onMenuAdd(null, null, e, menu, function (node) { + if (!node) return + + if (isFrom) { + if (!opts.nodeFrom) throw new TypeError("Cannot add node to SubgraphInputNode: nodeFrom was null") + const slot = opts.nodeFrom.connectByType(iSlotConn, node, fromSlotType, { afterRerouteId }) + if (!slot) console.warn("Failed to make new connection.") + // } + } else { + if (!opts.nodeTo) throw new TypeError("Cannot add node to SubgraphInputNode: nodeTo was null") + opts.nodeTo.connectByTypeOutput(iSlotConn, node, fromSlotType, { afterRerouteId }) + } + }) + break + case "Add Reroute":{ + const node = isFrom ? opts.nodeFrom : opts.nodeTo + const slot = options.extra + + if (!graph) throw new NullGraphError() + if (!node) throw new TypeError("Cannot add reroute: node was null") + if (!slot) throw new TypeError("Cannot add reroute: slot was null") + if (!opts.e) throw new TypeError("Cannot add reroute: CanvasPointerEvent was null") + + if (node instanceof SubgraphIONodeBase) { + throw new TypeError("Cannot add floating reroute to Subgraph IO Nodes") + } else { + const reroute = node.connectFloatingReroute([opts.e.canvasX, opts.e.canvasY], slot, afterRerouteId) + if (!reroute) throw new Error("Failed to create reroute") + } + + dirty() + break + } + case "Search": + if (isFrom) { + // @ts-expect-error Subgraph + opts.showSearchBox(e, { node_from: opts.nodeFrom, slot_from: slotX, type_filter_in: fromSlotType }) + } else { + // @ts-expect-error Subgraph + opts.showSearchBox(e, { node_to: opts.nodeTo, slot_from: slotX, type_filter_out: fromSlotType }) + } + break + default: { + const customProps = { + position: [opts.e?.canvasX ?? 0, opts.e?.canvasY ?? 0], + nodeType: v, + afterRerouteId, + } satisfies Partial + + const options = Object.assign(opts, customProps) + if (!that.createDefaultNodeForSlot(options)) + break + } + } + } + } + + // refactor: there are different dialogs, some uses createDialog some dont + prompt( + title: string, + value: any, + callback: (arg0: any) => void, + event: CanvasPointerEvent, + multiline?: boolean, + ): HTMLDivElement { + const that = this + title = title || "" + + const customProperties = { + is_modified: false, + className: "graphdialog rounded", + innerHTML: multiline + ? " " + : " ", + close() { + that.prompt_box = null + if (dialog.parentNode) { + dialog.remove() + } + }, + } satisfies Partial + + const div = document.createElement("div") + const dialog: PromptDialog = Object.assign(div, customProperties) + + const graphcanvas = LGraphCanvas.active_canvas + const { canvas } = graphcanvas + if (!canvas.parentNode) throw new TypeError("canvas element parentNode was null when opening a prompt.") + canvas.parentNode.append(dialog) + + if (this.ds.scale > 1) dialog.style.transform = `scale(${this.ds.scale})` + + let dialogCloseTimer: number + let prevent_timeout = 0 + LiteGraph.pointerListenerAdd(dialog, "leave", function () { + if (prevent_timeout) return + if (LiteGraph.dialog_close_on_mouse_leave) { + if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave) { + dialogCloseTimer = setTimeout( + dialog.close, + LiteGraph.dialog_close_on_mouse_leave_delay, + ) + } + } + }) + LiteGraph.pointerListenerAdd(dialog, "enter", function () { + if (LiteGraph.dialog_close_on_mouse_leave && dialogCloseTimer) + clearTimeout(dialogCloseTimer) + }) + const selInDia = dialog.querySelectorAll("select") + if (selInDia) { + // if filtering, check focus changed to comboboxes and prevent closing + for (const selIn of selInDia) { + selIn.addEventListener("click", function () { + prevent_timeout++ + }) + selIn.addEventListener("blur", function () { + prevent_timeout = 0 + }) + selIn.addEventListener("change", function () { + prevent_timeout = -1 + }) + } + } + this.prompt_box?.close() + this.prompt_box = dialog + + const name_element: HTMLSpanElement | null = dialog.querySelector(".name") + if (!name_element) throw new TypeError("name_element was null") + + name_element.textContent = title + const value_element: HTMLInputElement | null = dialog.querySelector(".value") + if (!value_element) throw new TypeError("value_element was null") + + value_element.value = value + value_element.select() + + const input = value_element + input.addEventListener("keydown", function (e: KeyboardEvent) { + dialog.is_modified = true + if (e.key == "Escape") { + // ESC + dialog.close() + } else if ( + e.key == "Enter" && + (e.target as Element).localName != "textarea" + ) { + if (callback) { + callback(this.value) + } + dialog.close() + } else { + return + } + e.preventDefault() + e.stopPropagation() + }) + + const button = dialog.querySelector("button") + if (!button) throw new TypeError("button was null when opening prompt") + + button.addEventListener("click", function () { + callback?.(input.value) + that.setDirty(true) + dialog.close() + }) + + const rect = canvas.getBoundingClientRect() + let offsetx = -20 + let offsety = -20 + if (rect) { + offsetx -= rect.left + offsety -= rect.top + } + + if (event) { + dialog.style.left = `${event.clientX + offsetx}px` + dialog.style.top = `${event.clientY + offsety}px` + } else { + dialog.style.left = `${canvas.width * 0.5 + offsetx}px` + dialog.style.top = `${canvas.height * 0.5 + offsety}px` + } + + setTimeout(function () { + input.focus() + const clickTime = Date.now() + function handleOutsideClick(e: Event) { + if (e.target === canvas && Date.now() - clickTime > 256) { + dialog.close() + canvas.parentElement?.removeEventListener("click", handleOutsideClick) + canvas.parentElement?.removeEventListener("touchend", handleOutsideClick) + } + } + canvas.parentElement?.addEventListener("click", handleOutsideClick) + canvas.parentElement?.addEventListener("touchend", handleOutsideClick) + }, 10) + + return dialog + } + + showSearchBox( + event: MouseEvent, + searchOptions?: IShowSearchOptions, + ): HTMLDivElement { + // proposed defaults + const options: IShowSearchOptions = { + slot_from: null, + node_from: null, + node_to: null, + // TODO check for registered_slot_[in/out]_types not empty + // this will be checked for functionality enabled : filter on slot type, in and out + do_type_filter: LiteGraph.search_filter_enabled, + + // these are default: pass to set initially set values + // @ts-expect-error + type_filter_in: false, + + type_filter_out: false, + show_general_if_none_on_typefilter: true, + show_general_after_typefiltered: true, + hide_on_mouse_leave: LiteGraph.search_hide_on_mouse_leave, + show_all_if_empty: true, + show_all_on_open: LiteGraph.search_show_all_on_open, + } + Object.assign(options, searchOptions) + + // console.log(options); + const that = this + const graphcanvas = LGraphCanvas.active_canvas + const { canvas } = graphcanvas + const root_document = canvas.ownerDocument || document + + const div = document.createElement("div") + const dialog = Object.assign(div, { + close(this: typeof div) { + that.search_box = undefined + this.blur() + canvas.focus() + root_document.body.style.overflow = "" + + // important, if canvas loses focus keys wont be captured + setTimeout(() => canvas.focus(), 20) + dialog.remove() + }, + } satisfies Partial & ICloseable) + dialog.className = "litegraph litesearchbox graphdialog rounded" + dialog.innerHTML = "Search " + if (options.do_type_filter) { + dialog.innerHTML += "" + dialog.innerHTML += "" + } + const helper = document.createElement("div") + helper.className = "helper" + dialog.append(helper) + + if (root_document.fullscreenElement) { + root_document.fullscreenElement.append(dialog) + } else { + root_document.body.append(dialog) + root_document.body.style.overflow = "hidden" + } + + // dialog element has been appended + let selIn + let selOut + if (options.do_type_filter) { + selIn = dialog.querySelector(".slot_in_type_filter") + selOut = dialog.querySelector(".slot_out_type_filter") + } + + if (this.ds.scale > 1) { + dialog.style.transform = `scale(${this.ds.scale})` + } + + // hide on mouse leave + if (options.hide_on_mouse_leave) { + // FIXME: Remove "any" kludge + let prevent_timeout: any = false + let timeout_close: number | null = null + LiteGraph.pointerListenerAdd(dialog, "enter", function () { + if (timeout_close) { + clearTimeout(timeout_close) + timeout_close = null + } + }) + dialog.addEventListener("pointerleave", function () { + if (prevent_timeout) return + + const hideDelay = options.hide_on_mouse_leave + const delay = typeof hideDelay === "number" ? hideDelay : 500 + timeout_close = setTimeout(dialog.close, delay) + }) + // if filtering, check focus changed to comboboxes and prevent closing + if (options.do_type_filter) { + if (!selIn) throw new TypeError("selIn was null when showing search box") + if (!selOut) throw new TypeError("selOut was null when showing search box") + + selIn.addEventListener("click", function () { + prevent_timeout++ + }) + selIn.addEventListener("blur", function () { + prevent_timeout = 0 + }) + selIn.addEventListener("change", function () { + prevent_timeout = -1 + }) + selOut.addEventListener("click", function () { + prevent_timeout++ + }) + selOut.addEventListener("blur", function () { + prevent_timeout = 0 + }) + selOut.addEventListener("change", function () { + prevent_timeout = -1 + }) + } + } + + // @ts-expect-error Panel? + that.search_box?.close() + that.search_box = dialog + + let first: string | null = null + let timeout: number | null = null + let selected: ChildNode | null = null + + const maybeInput = dialog.querySelector("input") + if (!maybeInput) throw new TypeError("Could not create search input box.") + + const input = maybeInput + + if (input) { + input.addEventListener("blur", function () { + this.focus() + }) + input.addEventListener("keydown", function (e) { + if (e.key == "ArrowUp") { + // UP + changeSelection(false) + } else if (e.key == "ArrowDown") { + // DOWN + changeSelection(true) + } else if (e.key == "Escape") { + // ESC + dialog.close() + } else if (e.key == "Enter") { + if (selected instanceof HTMLElement) { + select(unescape(String(selected.dataset["type"]))) + } else if (first) { + select(first) + } else { + dialog.close() + } + } else { + if (timeout) { + clearInterval(timeout) + } + timeout = setTimeout(refreshHelper, 10) + return + } + e.preventDefault() + e.stopPropagation() + e.stopImmediatePropagation() + return true + }) + } + + // if should filter on type, load and fill selected and choose elements if passed + if (options.do_type_filter) { + if (selIn) { + const aSlots = LiteGraph.slot_types_in + const nSlots = aSlots.length + + if ( + options.type_filter_in == LiteGraph.EVENT || + options.type_filter_in == LiteGraph.ACTION + ) { + options.type_filter_in = "_event_" + } + for (let iK = 0; iK < nSlots; iK++) { + const opt = document.createElement("option") + opt.value = aSlots[iK] + opt.innerHTML = aSlots[iK] + selIn.append(opt) + if ( + // @ts-expect-error + options.type_filter_in !== false && + String(options.type_filter_in).toLowerCase() == + String(aSlots[iK]).toLowerCase() + ) { + opt.selected = true + } + } + selIn.addEventListener("change", function () { + refreshHelper() + }) + } + if (selOut) { + const aSlots = LiteGraph.slot_types_out + + if ( + options.type_filter_out == LiteGraph.EVENT || + options.type_filter_out == LiteGraph.ACTION + ) { + options.type_filter_out = "_event_" + } + for (const aSlot of aSlots) { + const opt = document.createElement("option") + opt.value = aSlot + opt.innerHTML = aSlot + selOut.append(opt) + if ( + options.type_filter_out !== false && + String(options.type_filter_out).toLowerCase() == + String(aSlot).toLowerCase() + ) { + opt.selected = true + } + } + selOut.addEventListener("change", function () { + refreshHelper() + }) + } + } + + // compute best position + const rect = canvas.getBoundingClientRect() + + const left = (event ? event.clientX : rect.left + rect.width * 0.5) - 80 + const top = (event ? event.clientY : rect.top + rect.height * 0.5) - 20 + dialog.style.left = `${left}px` + dialog.style.top = `${top}px` + + // To avoid out of screen problems + if (event.layerY > rect.height - 200) { + helper.style.maxHeight = `${rect.height - event.layerY - 20}px` + } + requestAnimationFrame(function () { + input.focus() + }) + if (options.show_all_on_open) refreshHelper() + + function select(name: string) { + if (name) { + if (that.onSearchBoxSelection) { + that.onSearchBoxSelection(name, event, graphcanvas) + } else { + if (!graphcanvas.graph) throw new NullGraphError() + + graphcanvas.graph.beforeChange() + const node = LiteGraph.createNode(name) + if (node) { + node.pos = graphcanvas.convertEventToCanvasOffset(event) + graphcanvas.graph.add(node, false) + } + + // join node after inserting + if (options.node_from) { + // FIXME: any + let iS: any = false + switch (typeof options.slot_from) { + case "string": + iS = options.node_from.findOutputSlot(options.slot_from) + break + case "object": + if (options.slot_from == null) throw new TypeError("options.slot_from was null when showing search box") + + iS = options.slot_from.name + ? options.node_from.findOutputSlot(options.slot_from.name) + : -1 + // @ts-expect-error change interface check + if (iS == -1 && options.slot_from.slot_index !== undefined) iS = options.slot_from.slot_index + break + case "number": + iS = options.slot_from + break + default: + // try with first if no name set + iS = 0 + } + if (options.node_from.outputs[iS] !== undefined) { + if (iS !== false && iS > -1) { + if (node == null) throw new TypeError("options.slot_from was null when showing search box") + + options.node_from.connectByType(iS, node, options.node_from.outputs[iS].type) + } + } else { + // console.warn("cant find slot " + options.slot_from); + } + } + if (options.node_to) { + // FIXME: any + let iS: any = false + switch (typeof options.slot_from) { + case "string": + iS = options.node_to.findInputSlot(options.slot_from) + break + case "object": + if (options.slot_from == null) throw new TypeError("options.slot_from was null when showing search box") + + iS = options.slot_from.name + ? options.node_to.findInputSlot(options.slot_from.name) + : -1 + // @ts-expect-error change interface check + if (iS == -1 && options.slot_from.slot_index !== undefined) iS = options.slot_from.slot_index + break + case "number": + iS = options.slot_from + break + default: + // try with first if no name set + iS = 0 + } + if (options.node_to.inputs[iS] !== undefined) { + if (iS !== false && iS > -1) { + if (node == null) throw new TypeError("options.slot_from was null when showing search box") + // try connection + options.node_to.connectByTypeOutput(iS, node, options.node_to.inputs[iS].type) + } + } else { + // console.warn("cant find slot_nodeTO " + options.slot_from); + } + } + + graphcanvas.graph.afterChange() + } + } + + dialog.close() + } + + function changeSelection(forward: boolean) { + const prev = selected + if (!selected) { + selected = forward + ? helper.childNodes[0] + : helper.childNodes[helper.childNodes.length] + } else if (selected instanceof Element) { + selected.classList.remove("selected") + selected = forward + ? selected.nextSibling + : selected.previousSibling + selected ||= prev + } + + if (selected instanceof Element) { + selected.classList.add("selected") + selected.scrollIntoView({ block: "end", behavior: "smooth" }) + } + } + + function refreshHelper() { + timeout = null + let str = input.value + first = null + helper.innerHTML = "" + if (!str && !options.show_all_if_empty) return + + if (that.onSearchBox) { + const list = that.onSearchBox(helper, str, graphcanvas) + if (list) { + for (const item of list) { + addResult(item) + } + } + } else { + let c = 0 + str = str.toLowerCase() + if (!graphcanvas.graph) throw new NullGraphError() + + const filter = graphcanvas.filter || graphcanvas.graph.filter + + // FIXME: any + // filter by type preprocess + let sIn: any = false + let sOut: any = false + if (options.do_type_filter && that.search_box) { + sIn = that.search_box.querySelector(".slot_in_type_filter") + sOut = that.search_box.querySelector(".slot_out_type_filter") + } + + const keys = Object.keys(LiteGraph.registered_node_types) + const filtered = keys.filter(x => inner_test_filter(x)) + + for (const item of filtered) { + addResult(item) + if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) + break + } + + // add general type if filtering + if ( + options.show_general_after_typefiltered && + (sIn.value || sOut.value) + ) { + // FIXME: Undeclared variable again + // @ts-expect-error + filtered_extra = [] + for (const i in LiteGraph.registered_node_types) { + if ( + inner_test_filter(i, { + inTypeOverride: sIn && sIn.value ? "*" : false, + outTypeOverride: sOut && sOut.value ? "*" : false, + }) + ) { + // @ts-expect-error + filtered_extra.push(i) + } + } + // @ts-expect-error + for (const extraItem of filtered_extra) { + addResult(extraItem, "generic_type") + if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) + break + } + } + + // check il filtering gave no results + if ( + (sIn.value || sOut.value) && + helper.childNodes.length == 0 && + options.show_general_if_none_on_typefilter + ) { + // @ts-expect-error + filtered_extra = [] + for (const i in LiteGraph.registered_node_types) { + if (inner_test_filter(i, { skipFilter: true })) + // @ts-expect-error + filtered_extra.push(i) + } + // @ts-expect-error + for (const extraItem of filtered_extra) { + addResult(extraItem, "not_in_filter") + if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) + break + } + } + + function inner_test_filter( + type: string, + optsIn?: { + inTypeOverride?: string | boolean + outTypeOverride?: string | boolean + skipFilter?: boolean + }, + ): boolean { + optsIn = optsIn || {} + const optsDef = { + skipFilter: false, + inTypeOverride: false, + outTypeOverride: false, + } + const opts = Object.assign(optsDef, optsIn) + const ctor = LiteGraph.registered_node_types[type] + if (filter && ctor.filter != filter) return false + if ( + (!options.show_all_if_empty || str) && + !type.toLowerCase().includes(str) && + (!ctor.title || !ctor.title.toLowerCase().includes(str)) + ) { + return false + } + + // filter by slot IN, OUT types + if (options.do_type_filter && !opts.skipFilter) { + const sType = type + + let sV = opts.inTypeOverride !== false + ? opts.inTypeOverride + : sIn.value + // type is stored + if (sIn && sV && LiteGraph.registered_slot_in_types[sV]?.nodes) { + const doesInc = LiteGraph.registered_slot_in_types[sV].nodes.includes(sType) + if (doesInc === false) return false + } + + sV = sOut.value + if (opts.outTypeOverride !== false) sV = opts.outTypeOverride + // type is stored + if (sOut && sV && LiteGraph.registered_slot_out_types[sV]?.nodes) { + const doesInc = LiteGraph.registered_slot_out_types[sV].nodes.includes(sType) + if (doesInc === false) return false + } + } + return true + } + } + + function addResult(type: string, className?: string): void { + const help = document.createElement("div") + first ||= type + + const nodeType = LiteGraph.registered_node_types[type] + if (nodeType?.title) { + help.textContent = nodeType?.title + const typeEl = document.createElement("span") + typeEl.className = "litegraph lite-search-item-type" + typeEl.textContent = type + help.append(typeEl) + } else { + help.textContent = type + } + + help.dataset["type"] = escape(type) + help.className = "litegraph lite-search-item" + if (className) { + help.className += ` ${className}` + } + help.addEventListener("click", function () { + select(unescape(String(this.dataset["type"]))) + }) + helper.append(help) + } + } + + return dialog + } + + showEditPropertyValue( + node: LGraphNode, + property: string, + options: IDialogOptions, + ): IDialog | undefined { + if (!node || node.properties[property] === undefined) return + + options = options || {} + + const info = node.getPropertyInfo(property) + const { type } = info + + let input_html = "" + + if ( + type == "string" || + type == "number" || + type == "array" || + type == "object" + ) { + input_html = "" + } else if ((type == "enum" || type == "combo") && info.values) { + input_html = "" + } else if (type == "boolean" || type == "toggle") { + const checked = node.properties[property] ? "checked" : "" + input_html = `` + } else { + console.warn(`unknown type: ${type}`) + return + } + + const dialog = this.createDialog( + `${info.label || property}${input_html}`, + options, + ) + + let input: HTMLInputElement | HTMLSelectElement | null + if ((type == "enum" || type == "combo") && info.values) { + input = dialog.querySelector("select") + input?.addEventListener("change", function (e) { + dialog.modified() + setValue((e.target as HTMLSelectElement)?.value) + }) + } else if (type == "boolean" || type == "toggle") { + input = dialog.querySelector("input") + input?.addEventListener("click", function () { + dialog.modified() + // @ts-expect-error + setValue(!!input.checked) + }) + } else { + input = dialog.querySelector("input") + if (input) { + input.addEventListener("blur", function () { + this.focus() + }) + + let v = node.properties[property] !== undefined + ? node.properties[property] + : "" + if (type !== "string") { + v = JSON.stringify(v) + } + + // @ts-expect-error + input.value = v + input.addEventListener("keydown", function (e) { + if (e.key == "Escape") { + // ESC + dialog.close() + } else if (e.key == "Enter") { + // ENTER + // save + inner() + } else { + dialog.modified() + return + } + e.preventDefault() + e.stopPropagation() + }) + } + } + input?.focus() + + const button = dialog.querySelector("button") + if (!button) throw new TypeError("Show edit property value button was null.") + button.addEventListener("click", inner) + + function inner() { + setValue(input?.value) + } + const dirty = () => this.#dirty() + + function setValue(value: string | number | undefined) { + if ( + info?.values && + typeof info.values === "object" && + info.values[value] != undefined + ) { + value = info.values[value] + } + + if (typeof node.properties[property] == "number") { + value = Number(value) + } + if (type == "array" || type == "object") { + // @ts-expect-error JSON.parse doesn't care. + value = JSON.parse(value) + } + node.properties[property] = value + if (node.graph) { + node.graph._version++ + } + node.onPropertyChanged?.(property, value) + options.onclose?.() + dialog.close() + dirty() + } + + return dialog + } + + // TODO refactor, theer are different dialog, some uses createDialog, some dont + createDialog(html: string, options: IDialogOptions): IDialog { + const def_options = { + checkForInput: false, + closeOnLeave: true, + closeOnLeave_checkModified: true, + } + options = Object.assign(def_options, options || {}) + + const customProperties = { + className: "graphdialog", + innerHTML: html, + is_modified: false, + modified() { + this.is_modified = true + }, + close(this: IDialog) { + this.remove() + }, + } satisfies Partial + + const div = document.createElement("div") + const dialog: IDialog = Object.assign(div, customProperties) + + const rect = this.canvas.getBoundingClientRect() + let offsetx = -20 + let offsety = -20 + if (rect) { + offsetx -= rect.left + offsety -= rect.top + } + + if (options.position) { + offsetx += options.position[0] + offsety += options.position[1] + } else if (options.event) { + offsetx += options.event.clientX + offsety += options.event.clientY + } else { + // centered + offsetx += this.canvas.width * 0.5 + offsety += this.canvas.height * 0.5 + } + + dialog.style.left = `${offsetx}px` + dialog.style.top = `${offsety}px` + + if (!this.canvas.parentNode) throw new TypeError("Canvas parent element was null.") + this.canvas.parentNode.append(dialog) + + // acheck for input and use default behaviour: save on enter, close on esc + if (options.checkForInput) { + const aI = dialog.querySelectorAll("input") + if (aI) { + for (const iX of aI) { + iX.addEventListener("keydown", function (e) { + dialog.modified() + if (e.key == "Escape") { + dialog.close() + } else if (e.key != "Enter") { + return + } + e.preventDefault() + e.stopPropagation() + }) + iX.focus() + } + } + } + + let dialogCloseTimer: number + let prevent_timeout = 0 + dialog.addEventListener("mouseleave", function () { + if (prevent_timeout) return + + if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave) { + dialogCloseTimer = setTimeout( + dialog.close, + LiteGraph.dialog_close_on_mouse_leave_delay, + ) + } + }) + dialog.addEventListener("mouseenter", function () { + if (options.closeOnLeave || LiteGraph.dialog_close_on_mouse_leave) { + if (dialogCloseTimer) clearTimeout(dialogCloseTimer) + } + }) + const selInDia = dialog.querySelectorAll("select") + // if filtering, check focus changed to comboboxes and prevent closing + if (selInDia) { + for (const selIn of selInDia) { + selIn.addEventListener("click", function () { + prevent_timeout++ + }) + selIn.addEventListener("blur", function () { + prevent_timeout = 0 + }) + selIn.addEventListener("change", function () { + prevent_timeout = -1 + }) + } + } + + return dialog + } + + createPanel(title: string, options: ICreatePanelOptions) { + options = options || {} + + const ref_window = options.window || window + // TODO: any kludge + const root: any = document.createElement("div") + root.className = "litegraph dialog" + root.innerHTML = "
" + root.header = root.querySelector(".dialog-header") + + if (options.width) + root.style.width = options.width + (typeof options.width === "number" ? "px" : "") + if (options.height) + root.style.height = options.height + (typeof options.height === "number" ? "px" : "") + if (options.closable) { + const close = document.createElement("span") + close.innerHTML = "✕" + close.classList.add("close") + close.addEventListener("click", function () { + root.close() + }) + root.header.append(close) + } + root.title_element = root.querySelector(".dialog-title") + root.title_element.textContent = title + root.content = root.querySelector(".dialog-content") + root.alt_content = root.querySelector(".dialog-alt-content") + root.footer = root.querySelector(".dialog-footer") + + root.close = function () { + if (typeof root.onClose == "function") root.onClose() + root.remove() + this.remove() + } + + // function to swap panel content + root.toggleAltContent = function (force: unknown) { + let vTo: string + let vAlt: string + if (force !== undefined) { + vTo = force ? "block" : "none" + vAlt = force ? "none" : "block" + } else { + vTo = root.alt_content.style.display != "block" ? "block" : "none" + vAlt = root.alt_content.style.display != "block" ? "none" : "block" + } + root.alt_content.style.display = vTo + root.content.style.display = vAlt + } + + root.toggleFooterVisibility = function (force: unknown) { + let vTo: string + if (force !== undefined) { + vTo = force ? "block" : "none" + } else { + vTo = root.footer.style.display != "block" ? "block" : "none" + } + root.footer.style.display = vTo + } + + root.clear = function () { + this.content.innerHTML = "" + } + + root.addHTML = function (code: string, classname: string, on_footer: any) { + const elem = document.createElement("div") + if (classname) elem.className = classname + elem.innerHTML = code + if (on_footer) root.footer.append(elem) + else root.content.append(elem) + return elem + } + + root.addButton = function (name: any, callback: any, options: any) { + // TODO: any kludge + const elem: any = document.createElement("button") + elem.textContent = name + elem.options = options + elem.classList.add("btn") + elem.addEventListener("click", callback) + root.footer.append(elem) + return elem + } + + root.addSeparator = function () { + const elem = document.createElement("div") + elem.className = "separator" + root.content.append(elem) + } + + root.addWidget = function (type: string, name: any, value: unknown, options: { label?: any, type?: any, values?: any, callback?: any }, callback: (arg0: any, arg1: any, arg2: any) => void) { + options = options || {} + let str_value = String(value) + type = type.toLowerCase() + if (type == "number" && typeof value === "number") str_value = value.toFixed(3) + + // FIXME: any kludge + const elem: HTMLDivElement & { options?: unknown, value?: unknown } = document.createElement("div") + elem.className = "property" + elem.innerHTML = "" + const nameSpan = elem.querySelector(".property_name") + if (!nameSpan) throw new TypeError("Property name element was null.") + + nameSpan.textContent = options.label || name + // TODO: any kludge + const value_element: HTMLSpanElement | null = elem.querySelector(".property_value") + if (!value_element) throw new TypeError("Property name element was null.") + value_element.textContent = str_value + elem.dataset["property"] = name + elem.dataset["type"] = options.type || type + elem.options = options + elem.value = value + + if (type == "code") { + elem.addEventListener("click", function () { + root.inner_showCodePad(this.dataset["property"]) + }) + } else if (type == "boolean") { + elem.classList.add("boolean") + if (value) elem.classList.add("bool-on") + elem.addEventListener("click", () => { + const propname = elem.dataset["property"] + elem.value = !elem.value + elem.classList.toggle("bool-on") + if (!value_element) throw new TypeError("Property name element was null.") + + value_element.textContent = elem.value + ? "true" + : "false" + innerChange(propname, elem.value) + }) + } else if (type == "string" || type == "number") { + if (!value_element) throw new TypeError("Property name element was null.") + value_element.setAttribute("contenteditable", "true") + value_element.addEventListener("keydown", function (e) { + // allow for multiline + if (e.code == "Enter" && (type != "string" || !e.shiftKey)) { + e.preventDefault() + this.blur() + } + }) + value_element.addEventListener("blur", function () { + let v: string | number | null = this.textContent + const propname = this.parentElement?.dataset["property"] + const proptype = this.parentElement?.dataset["type"] + if (proptype == "number") v = Number(v) + innerChange(propname, v) + }) + } else if (type == "enum" || type == "combo") { + const str_value = LGraphCanvas.getPropertyPrintableValue(value, options.values) + if (!value_element) throw new TypeError("Property name element was null.") + value_element.textContent = str_value ?? "" + + value_element.addEventListener("click", function (event) { + const values = options.values || [] + const propname = this.parentElement?.dataset["property"] + const inner_clicked = (v: string | null) => { + // node.setProperty(propname,v); + // graphcanvas.dirty_canvas = true; + this.textContent = v + innerChange(propname, v) + return false + } + new LiteGraph.ContextMenu( + values, + { + event, + className: "dark", + callback: inner_clicked, + }, + // @ts-expect-error + ref_window, + ) + }) + } + + root.content.append(elem) + + function innerChange(name: string | undefined, value: unknown) { + options.callback?.(name, value, options) + callback?.(name, value, options) + } + + return elem + } + + if (typeof root.onOpen == "function") root.onOpen() + + return root + } + + closePanels(): void { + type MightHaveClose = HTMLDivElement & Partial + document.querySelector("#node-panel")?.close?.() + document.querySelector("#option-panel")?.close?.() + } + + showShowNodePanel(node: LGraphNode): void { + this.SELECTED_NODE = node + this.closePanels() + const ref_window = this.getCanvasWindow() + const panel = this.createPanel(node.title || "", { + closable: true, + window: ref_window, + onOpen: () => { + this.NODEPANEL_IS_OPEN = true + }, + onClose: () => { + this.NODEPANEL_IS_OPEN = false + this.node_panel = null + }, + }) + this.node_panel = panel + panel.id = "node-panel" + panel.node = node + panel.classList.add("settings") + + const inner_refresh = () => { + // clear + panel.content.innerHTML = "" + // @ts-expect-error ctor props + panel.addHTML(`${node.type}${node.constructor.desc || ""}`) + + panel.addHTML("

Properties

") + + const fUpdate = (name: string, value: string | number | boolean | object | undefined) => { + if (!this.graph) throw new NullGraphError() + this.graph.beforeChange(node) + switch (name) { + case "Title": + if (typeof value !== "string") throw new TypeError("Attempting to set title to non-string value.") + + node.title = value + break + case "Mode": { + if (typeof value !== "string") throw new TypeError("Attempting to set mode to non-string value.") + + const kV = Object.values(LiteGraph.NODE_MODES).indexOf(value) + if (kV !== -1 && LiteGraph.NODE_MODES[kV]) { + node.changeMode(kV) + } else { + console.warn(`unexpected mode: ${value}`) + } + break + } + case "Color": + if (typeof value !== "string") throw new TypeError("Attempting to set colour to non-string value.") + + if (LGraphCanvas.node_colors[value]) { + node.color = LGraphCanvas.node_colors[value].color + node.bgcolor = LGraphCanvas.node_colors[value].bgcolor + } else { + console.warn(`unexpected color: ${value}`) + } + break + default: + node.setProperty(name, value) + break + } + this.graph.afterChange() + this.dirty_canvas = true + } + + panel.addWidget("string", "Title", node.title, {}, fUpdate) + + const mode = node.mode == null ? undefined : LiteGraph.NODE_MODES[node.mode] + panel.addWidget("combo", "Mode", mode, { values: LiteGraph.NODE_MODES }, fUpdate) + + const nodeCol = node.color !== undefined + ? Object.keys(LGraphCanvas.node_colors).filter(function (nK) { return LGraphCanvas.node_colors[nK].color == node.color }) + : "" + + panel.addWidget("combo", "Color", nodeCol, { values: Object.keys(LGraphCanvas.node_colors) }, fUpdate) + + for (const pName in node.properties) { + const value = node.properties[pName] + const info = node.getPropertyInfo(pName) + + // in case the user wants control over the side panel widget + if (node.onAddPropertyToPanel?.(pName, panel)) continue + + panel.addWidget(info.widget || info.type, pName, value, info, fUpdate) + } + + panel.addSeparator() + + node.onShowCustomPanelInfo?.(panel) + + // clear + panel.footer.innerHTML = "" + panel.addButton("Delete", function () { + if (node.block_delete) return + if (!node.graph) throw new NullGraphError() + + node.graph.remove(node) + panel.close() + }).classList.add("delete") + } + + panel.inner_showCodePad = function (propname: string) { + panel.classList.remove("settings") + panel.classList.add("centered") + + panel.alt_content.innerHTML = "" + const textarea: HTMLTextAreaElement = panel.alt_content.querySelector("textarea") + const fDoneWith = function () { + panel.toggleAltContent(false) + panel.toggleFooterVisibility(true) + textarea.remove() + panel.classList.add("settings") + panel.classList.remove("centered") + inner_refresh() + } + textarea.value = String(node.properties[propname]) + textarea.addEventListener("keydown", function (e: KeyboardEvent) { + if (e.code == "Enter" && e.ctrlKey) { + node.setProperty(propname, textarea.value) + fDoneWith() + } + }) + panel.toggleAltContent(true) + panel.toggleFooterVisibility(false) + textarea.style.height = "calc(100% - 40px)" + + const assign = panel.addButton("Assign", function () { + node.setProperty(propname, textarea.value) + fDoneWith() + }) + panel.alt_content.append(assign) + const button = panel.addButton("Close", fDoneWith) + button.style.float = "right" + panel.alt_content.append(button) + } + + inner_refresh() + + if (!this.canvas.parentNode) throw new TypeError("showNodePanel - this.canvas.parentNode was null") + this.canvas.parentNode.append(panel) + } + + checkPanels(): void { + if (!this.canvas) return + + if (!this.canvas.parentNode) throw new TypeError("checkPanels - this.canvas.parentNode was null") + const panels = this.canvas.parentNode.querySelectorAll(".litegraph.dialog") + for (const panel of panels) { + // @ts-expect-error Panel + if (!panel.node) continue + // @ts-expect-error Panel + if (!panel.node.graph || panel.graph != this.graph) panel.close() + } + } + + getCanvasMenuOptions(): IContextMenuValue[] { + let options: IContextMenuValue[] + if (this.getMenuOptions) { + options = this.getMenuOptions() + } else { + options = [ + { + content: "Add Node", + has_submenu: true, + callback: LGraphCanvas.onMenuAdd, + }, + { content: "Add Group", callback: LGraphCanvas.onGroupAdd }, + // { content: "Arrange", callback: that.graph.arrange }, + // {content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll } + ] + if (Object.keys(this.selected_nodes).length > 1) { + options.push({ + content: "Convert to Subgraph 🆕", + callback: () => { + if (!this.selectedItems.size) throw new Error("Convert to Subgraph: Nothing selected.") + this._graph.convertToSubgraph(this.selectedItems) + }, + }, { + content: "Align", + has_submenu: true, + callback: LGraphCanvas.onGroupAlign, + }) + } + } + + const extra = this.getExtraMenuOptions?.(this, options) + return Array.isArray(extra) + ? options.concat(extra) + : options + } + + // called by processContextMenu to extract the menu list + getNodeMenuOptions(node: LGraphNode) { + let options: (IContextMenuValue | IContextMenuValue | IContextMenuValue | IContextMenuValue | IContextMenuValue | null)[] + + if (node.getMenuOptions) { + options = node.getMenuOptions(this) + } else { + options = [ + { + content: "Inputs", + has_submenu: true, + disabled: true, + }, + { + content: "Outputs", + has_submenu: true, + disabled: true, + callback: LGraphCanvas.showMenuNodeOptionalOutputs, + }, + null, + { + content: "Convert to Subgraph 🆕", + callback: () => { + if (!this.selectedItems.size) throw new Error("Convert to Subgraph: Nothing selected.") + this._graph.convertToSubgraph(this.selectedItems) + }, + }, + { + content: "Properties", + has_submenu: true, + callback: LGraphCanvas.onShowMenuNodeProperties, + }, + { + content: "Properties Panel", + callback: function (item: any, options: any, e: any, menu: any, node: LGraphNode) { LGraphCanvas.active_canvas.showShowNodePanel(node) }, + }, + null, + { + content: "Title", + callback: LGraphCanvas.onShowPropertyEditor, + }, + { + content: "Mode", + has_submenu: true, + callback: LGraphCanvas.onMenuNodeMode, + }, + ] + if (node.resizable !== false) { + options.push({ + content: "Resize", + callback: LGraphCanvas.onMenuResizeNode, + }) + } + if (node.collapsible) { + options.push({ + content: node.collapsed ? "Expand" : "Collapse", + callback: LGraphCanvas.onMenuNodeCollapse, + }) + } + if (node.widgets?.some(w => w.advanced)) { + options.push({ + content: node.showAdvanced ? "Hide Advanced" : "Show Advanced", + callback: LGraphCanvas.onMenuToggleAdvanced, + }) + } + options.push( + { + content: node.pinned ? "Unpin" : "Pin", + callback: () => { + for (const i in this.selected_nodes) { + const node = this.selected_nodes[i] + node.pin() + } + this.setDirty(true, true) + }, + }, + { + content: "Colors", + has_submenu: true, + callback: LGraphCanvas.onMenuNodeColors, + }, + { + content: "Shapes", + has_submenu: true, + callback: LGraphCanvas.onMenuNodeShapes, + }, + null, + ) + } + + const extra = node.getExtraMenuOptions?.(this, options) + if (Array.isArray(extra) && extra.length > 0) { + extra.push(null) + options = extra.concat(options) + } + + if (node.clonable !== false) { + options.push({ + content: "Clone", + callback: LGraphCanvas.onMenuNodeClone, + }) + } + + if (Object.keys(this.selected_nodes).length > 1) { + options.push({ + content: "Align Selected To", + has_submenu: true, + callback: LGraphCanvas.onNodeAlign, + }, { + content: "Distribute Nodes", + has_submenu: true, + callback: LGraphCanvas.createDistributeMenu, + }) + } + + options.push(null, { + content: "Remove", + disabled: !(node.removable !== false && !node.block_delete), + callback: LGraphCanvas.onMenuNodeRemove, + }) + + node.graph?.onGetNodeMenuOptions?.(options, node) + + return options + } + + /** @deprecated */ + getGroupMenuOptions(group: LGraphGroup) { + console.warn("LGraphCanvas.getGroupMenuOptions is deprecated, use LGraphGroup.getMenuOptions instead") + return group.getMenuOptions() + } + + processContextMenu(node: LGraphNode | undefined, event: CanvasPointerEvent): void { + const canvas = LGraphCanvas.active_canvas + const ref_window = canvas.getCanvasWindow() + + // TODO: Remove type kludge + let menu_info: (IContextMenuValue | string | null)[] + const options: IContextMenuOptions = { + event, + callback: inner_option_clicked, + extra: node, + } + + if (node) { + options.title = node.displayType ?? node.type ?? undefined + LGraphCanvas.active_node = node + + // check if mouse is in input + const slot = node.getSlotInPosition(event.canvasX, event.canvasY) + if (slot) { + // on slot + menu_info = [] + if (node.getSlotMenuOptions) { + menu_info = node.getSlotMenuOptions(slot) + } else { + if (slot.output?.links?.length || slot.input?.link != null) { + menu_info.push({ content: "Disconnect Links", slot }) + } + + const _slot = slot.input || slot.output + if (!_slot) throw new TypeError("Both in put and output slots were null when processing context menu.") + + if (_slot.removable) { + menu_info.push( + _slot.locked + ? "Cannot remove" + : { content: "Remove Slot", slot }, + ) + } + if (!_slot.nameLocked && !(("link" in _slot) && _slot.widget)) { + menu_info.push({ content: "Rename Slot", slot }) + } + + if (node.getExtraSlotMenuOptions) { + menu_info.push(...node.getExtraSlotMenuOptions(slot)) + } + } + // @ts-expect-error Slot type can be number and has number checks + options.title = (slot.input ? slot.input.type : slot.output.type) || "*" + if (slot.input && slot.input.type == LiteGraph.ACTION) + options.title = "Action" + + if (slot.output && slot.output.type == LiteGraph.EVENT) + options.title = "Event" + } else { + // on node + menu_info = this.getNodeMenuOptions(node) + } + } else { + menu_info = this.getCanvasMenuOptions() + if (!this.graph) throw new NullGraphError() + + // Check for reroutes + if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) { + const reroute = this.graph.getRerouteOnPos(event.canvasX, event.canvasY, this.#visibleReroutes) + if (reroute) { + menu_info.unshift({ + content: "Delete Reroute", + callback: () => { + if (!this.graph) throw new NullGraphError() + + this.graph.removeReroute(reroute.id) + }, + }, null) + } + } + + const group = this.graph.getGroupOnPos( + event.canvasX, + event.canvasY, + ) + if (group) { + // on group + menu_info.push(null, { + content: "Edit Group", + has_submenu: true, + submenu: { + title: "Group", + extra: group, + options: group.getMenuOptions(), + }, + }) + } + } + + // show menu + if (!menu_info) return + + // @ts-expect-error Remove param ref_window - unused + new LiteGraph.ContextMenu(menu_info, options, ref_window) + + const createDialog = (options: IDialogOptions) => this.createDialog( + "Name", + options, + ) + const setDirty = () => this.setDirty(true) + + function inner_option_clicked(v: IContextMenuValue, options: IDialogOptions) { + if (!v) return + + if (v.content == "Remove Slot") { + if (!node?.graph) throw new NullGraphError() + + const info = v.slot + if (!info) throw new TypeError("Found-slot info was null when processing context menu.") + + node.graph.beforeChange() + if (info.input) { + node.removeInput(info.slot) + } else if (info.output) { + node.removeOutput(info.slot) + } + node.graph.afterChange() + return + } else if (v.content == "Disconnect Links") { + if (!node?.graph) throw new NullGraphError() + + const info = v.slot + if (!info) throw new TypeError("Found-slot info was null when processing context menu.") + + node.graph.beforeChange() + if (info.output) { + node.disconnectOutput(info.slot) + } else if (info.input) { + node.disconnectInput(info.slot, true) + } + node.graph.afterChange() + return + } else if (v.content == "Rename Slot") { + if (!node) throw new TypeError("`node` was null when processing the context menu.") + + const info = v.slot + if (!info) throw new TypeError("Found-slot info was null when processing context menu.") + + const slot_info = info.input + ? node.getInputInfo(info.slot) + : node.getOutputInfo(info.slot) + const dialog = createDialog(options) + + const input = dialog.querySelector("input") + if (input && slot_info) { + input.value = slot_info.label || "" + } + const inner = function () { + if (!node.graph) throw new NullGraphError() + + node.graph.beforeChange() + if (input?.value) { + if (slot_info) { + slot_info.label = input.value + } + setDirty() + } + dialog.close() + node.graph.afterChange() + } + dialog.querySelector("button")?.addEventListener("click", inner) + if (!input) throw new TypeError("Input element was null when processing context menu.") + + input.addEventListener("keydown", function (e) { + dialog.is_modified = true + if (e.key == "Escape") { + // ESC + dialog.close() + } else if (e.key == "Enter") { + // save + inner() + } else if ((e.target as Element).localName != "textarea") { + return + } + e.preventDefault() + e.stopPropagation() + }) + input.focus() + } + } + } + + /** + * Starts an animation to fit the view around the specified selection of nodes. + * @param bounds The bounds to animate the view to, defined by a rectangle. + */ + animateToBounds(bounds: ReadOnlyRect, options: AnimationOptions = {}) { + const setDirty = () => this.setDirty(true, true) + this.ds.animateToBounds(bounds, setDirty, options) + } + + /** + * Fits the view to the selected nodes with animation. + * If nothing is selected, the view is fitted around all items in the graph. + */ + fitViewToSelectionAnimated(options: AnimationOptions = {}) { + const items = this.selectedItems.size + ? Array.from(this.selectedItems) + : this.positionableItems + const bounds = createBounds(items) + if (!bounds) throw new TypeError("Attempted to fit to view but could not calculate bounds.") + + const setDirty = () => this.setDirty(true, true) + this.ds.animateToBounds(bounds, setDirty, options) + } +} diff --git a/src/lib/litegraph/src/LGraphGroup.ts b/src/lib/litegraph/src/LGraphGroup.ts new file mode 100644 index 0000000000..5b159e9154 --- /dev/null +++ b/src/lib/litegraph/src/LGraphGroup.ts @@ -0,0 +1,350 @@ +import type { + ColorOption, + IColorable, + IContextMenuValue, + IPinnable, + Point, + Positionable, + Size, +} from "./interfaces" +import type { LGraph } from "./LGraph" +import type { ISerialisedGroup } from "./types/serialisation" + +import { NullGraphError } from "@/infrastructure/NullGraphError" + +import { strokeShape } from "./draw" +import { LGraphCanvas } from "./LGraphCanvas" +import { LGraphNode } from "./LGraphNode" +import { LiteGraph } from "./litegraph" +import { + containsCentre, + containsRect, + createBounds, + isInRectangle, + isPointInRect, + snapPoint, +} from "./measure" + +export interface IGraphGroupFlags extends Record { + pinned?: true +} + +export class LGraphGroup implements Positionable, IPinnable, IColorable { + static minWidth = 140 + static minHeight = 80 + static resizeLength = 10 + static padding = 4 + static defaultColour = "#335" + + id: number + color?: string + title: string + font?: string + font_size: number = LiteGraph.DEFAULT_GROUP_FONT || 24 + _bounding: Float32Array = new Float32Array([ + 10, + 10, + LGraphGroup.minWidth, + LGraphGroup.minHeight, + ]) + + _pos: Point = this._bounding.subarray(0, 2) + _size: Size = this._bounding.subarray(2, 4) + /** @deprecated See {@link _children} */ + _nodes: LGraphNode[] = [] + _children: Set = new Set() + graph?: LGraph + flags: IGraphGroupFlags = {} + selected?: boolean + + constructor(title?: string, id?: number) { + // TODO: Object instantiation pattern requires too much boilerplate and null checking. ID should be passed in via constructor. + this.id = id ?? -1 + this.title = title || "Group" + + const { pale_blue } = LGraphCanvas.node_colors + this.color = pale_blue ? pale_blue.groupcolor : "#AAA" + } + + /** @inheritdoc {@link IColorable.setColorOption} */ + setColorOption(colorOption: ColorOption | null): void { + if (colorOption == null) { + delete this.color + } else { + this.color = colorOption.groupcolor + } + } + + /** @inheritdoc {@link IColorable.getColorOption} */ + getColorOption(): ColorOption | null { + return Object.values(LGraphCanvas.node_colors).find( + colorOption => colorOption.groupcolor === this.color, + ) ?? null + } + + /** Position of the group, as x,y co-ordinates in graph space */ + get pos() { + return this._pos + } + + set pos(v) { + if (!v || v.length < 2) return + + this._pos[0] = v[0] + this._pos[1] = v[1] + } + + /** Size of the group, as width,height in graph units */ + get size() { + return this._size + } + + set size(v) { + if (!v || v.length < 2) return + + this._size[0] = Math.max(LGraphGroup.minWidth, v[0]) + this._size[1] = Math.max(LGraphGroup.minHeight, v[1]) + } + + get boundingRect() { + return this._bounding + } + + get nodes() { + return this._nodes + } + + get titleHeight() { + return this.font_size * 1.4 + } + + get children(): ReadonlySet { + return this._children + } + + get pinned() { + return !!this.flags.pinned + } + + /** + * Prevents the group being accidentally moved or resized by mouse interaction. + * Toggles pinned state if no value is provided. + */ + pin(value?: boolean): void { + const newState = value === undefined ? !this.pinned : value + + if (newState) this.flags.pinned = true + else delete this.flags.pinned + } + + unpin(): void { + this.pin(false) + } + + configure(o: ISerialisedGroup): void { + this.id = o.id + this.title = o.title + this._bounding.set(o.bounding) + this.color = o.color + this.flags = o.flags || this.flags + if (o.font_size) this.font_size = o.font_size + } + + serialize(): ISerialisedGroup { + const b = this._bounding + return { + id: this.id, + title: this.title, + bounding: [...b], + color: this.color, + font_size: this.font_size, + flags: this.flags, + } + } + + /** + * Draws the group on the canvas + * @param graphCanvas + * @param ctx + */ + draw(graphCanvas: LGraphCanvas, ctx: CanvasRenderingContext2D): void { + const { padding, resizeLength, defaultColour } = LGraphGroup + const font_size = this.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE + + const [x, y] = this._pos + const [width, height] = this._size + const color = this.color || defaultColour + + // Titlebar + ctx.globalAlpha = 0.25 * graphCanvas.editor_alpha + ctx.fillStyle = color + ctx.strokeStyle = color + ctx.beginPath() + ctx.rect(x + 0.5, y + 0.5, width, font_size * 1.4) + ctx.fill() + + // Group background, border + ctx.fillStyle = color + ctx.strokeStyle = color + ctx.beginPath() + ctx.rect(x + 0.5, y + 0.5, width, height) + ctx.fill() + ctx.globalAlpha = graphCanvas.editor_alpha + ctx.stroke() + + // Resize marker + ctx.beginPath() + ctx.moveTo(x + width, y + height) + ctx.lineTo(x + width - resizeLength, y + height) + ctx.lineTo(x + width, y + height - resizeLength) + ctx.fill() + + // Title + ctx.font = `${font_size}px ${LiteGraph.GROUP_FONT}` + ctx.textAlign = "left" + ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size) + + if (LiteGraph.highlight_selected_group && this.selected) { + strokeShape(ctx, this._bounding, { + title_height: this.titleHeight, + padding, + }) + } + } + + resize(width: number, height: number): boolean { + if (this.pinned) return false + + this._size[0] = Math.max(LGraphGroup.minWidth, width) + this._size[1] = Math.max(LGraphGroup.minHeight, height) + return true + } + + move(deltaX: number, deltaY: number, skipChildren: boolean = false): void { + if (this.pinned) return + + this._pos[0] += deltaX + this._pos[1] += deltaY + if (skipChildren === true) return + + for (const item of this._children) { + item.move(deltaX, deltaY) + } + } + + /** @inheritdoc */ + snapToGrid(snapTo: number): boolean { + return this.pinned ? false : snapPoint(this.pos, snapTo) + } + + recomputeInsideNodes(): void { + if (!this.graph) throw new NullGraphError() + const { nodes, reroutes, groups } = this.graph + const children = this._children + this._nodes.length = 0 + children.clear() + + // Move nodes we overlap the centre point of + for (const node of nodes) { + if (containsCentre(this._bounding, node.boundingRect)) { + this._nodes.push(node) + children.add(node) + } + } + + // Move reroutes we overlap the centre point of + for (const reroute of reroutes.values()) { + if (isPointInRect(reroute.pos, this._bounding)) + children.add(reroute) + } + + // Move groups we wholly contain + for (const group of groups) { + if (containsRect(this._bounding, group._bounding)) + children.add(group) + } + + groups.sort((a, b) => { + if (a === this) { + return children.has(b) ? -1 : 0 + } else if (b === this) { + return children.has(a) ? 1 : 0 + } else { + return 0 + } + }) + } + + /** + * Resizes and moves the group to neatly fit all given {@link objects}. + * @param objects All objects that should be inside the group + * @param padding Value in graph units to add to all sides of the group. Default: 10 + */ + resizeTo(objects: Iterable, padding: number = 10): void { + const boundingBox = createBounds(objects, padding) + if (boundingBox === null) return + + this.pos[0] = boundingBox[0] + this.pos[1] = boundingBox[1] - this.titleHeight + this.size[0] = boundingBox[2] + this.size[1] = boundingBox[3] + this.titleHeight + } + + /** + * Add nodes to the group and adjust the group's position and size accordingly + * @param nodes The nodes to add to the group + * @param padding The padding around the group + */ + addNodes(nodes: LGraphNode[], padding: number = 10): void { + if (!this._nodes && nodes.length === 0) return + this.resizeTo([...this.children, ...this._nodes, ...nodes], padding) + } + + getMenuOptions(): (IContextMenuValue | IContextMenuValue | null)[] { + return [ + { + content: this.pinned ? "Unpin" : "Pin", + callback: () => { + if (this.pinned) this.unpin() + else this.pin() + this.setDirtyCanvas(false, true) + }, + }, + null, + { content: "Title", callback: LGraphCanvas.onShowPropertyEditor }, + { + content: "Color", + has_submenu: true, + callback: LGraphCanvas.onMenuNodeColors, + }, + { + content: "Font size", + property: "font_size", + type: "Number", + callback: LGraphCanvas.onShowPropertyEditor, + }, + null, + { content: "Remove", callback: LGraphCanvas.onMenuNodeRemove }, + ] + } + + isPointInTitlebar(x: number, y: number): boolean { + const b = this.boundingRect + return isInRectangle(x, y, b[0], b[1], b[2], this.titleHeight) + } + + isInResize(x: number, y: number): boolean { + const b = this.boundingRect + const right = b[0] + b[2] + const bottom = b[1] + b[3] + + return ( + x < right && + y < bottom && + x - right + (y - bottom) > -LGraphGroup.resizeLength + ) + } + + isPointInside = LGraphNode.prototype.isPointInside + setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas +} diff --git a/src/lib/litegraph/src/LGraphIcon.ts b/src/lib/litegraph/src/LGraphIcon.ts new file mode 100644 index 0000000000..d185f18b6e --- /dev/null +++ b/src/lib/litegraph/src/LGraphIcon.ts @@ -0,0 +1,68 @@ +export interface LGraphIconOptions { + unicode: string + fontFamily?: string + color?: string + bgColor?: string + fontSize?: number + circlePadding?: number + xOffset?: number + yOffset?: number +} + +export class LGraphIcon { + unicode: string + fontFamily: string + color: string + bgColor?: string + fontSize: number + circlePadding: number + xOffset: number + yOffset: number + + constructor({ + unicode, + fontFamily = "PrimeIcons", + color = "#e6c200", + bgColor, + fontSize = 16, + circlePadding = 2, + xOffset = 0, + yOffset = 0, + }: LGraphIconOptions) { + this.unicode = unicode + this.fontFamily = fontFamily + this.color = color + this.bgColor = bgColor + this.fontSize = fontSize + this.circlePadding = circlePadding + this.xOffset = xOffset + this.yOffset = yOffset + } + + draw(ctx: CanvasRenderingContext2D, x: number, y: number) { + x += this.xOffset + y += this.yOffset + + const { font, textBaseline, textAlign, fillStyle } = ctx + + ctx.font = `${this.fontSize}px '${this.fontFamily}'` + ctx.textBaseline = "middle" + ctx.textAlign = "center" + const iconRadius = this.fontSize / 2 + this.circlePadding + // Draw icon background circle if bgColor is set + if (this.bgColor) { + ctx.beginPath() + ctx.arc(x + iconRadius, y, iconRadius, 0, 2 * Math.PI) + ctx.fillStyle = this.bgColor + ctx.fill() + } + // Draw icon + ctx.fillStyle = this.color + ctx.fillText(this.unicode, x + iconRadius, y) + + ctx.font = font + ctx.textBaseline = textBaseline + ctx.textAlign = textAlign + ctx.fillStyle = fillStyle + } +} diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts new file mode 100644 index 0000000000..9a2803a011 --- /dev/null +++ b/src/lib/litegraph/src/LGraphNode.ts @@ -0,0 +1,3854 @@ +import type { DragAndScale } from "./DragAndScale" +import type { IDrawBoundingOptions } from "./draw" +import type { ReadOnlyRectangle } from "./infrastructure/Rectangle" +import type { + ColorOption, + CompassCorners, + DefaultConnectionColors, + Dictionary, + IColorable, + IContextMenuValue, + IFoundSlot, + INodeFlags, + INodeInputSlot, + INodeOutputSlot, + INodeSlot, + INodeSlotContextItem, + IPinnable, + ISlotType, + Point, + Positionable, + ReadOnlyPoint, + ReadOnlyRect, + Rect, + Size, +} from "./interfaces" +import type { LGraph } from "./LGraph" +import type { Reroute, RerouteId } from "./Reroute" +import type { SubgraphInputNode } from "./subgraph/SubgraphInputNode" +import type { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode" +import type { CanvasPointerEvent } from "./types/events" +import type { NodeLike } from "./types/NodeLike" +import type { ISerialisedNode, SubgraphIO } from "./types/serialisation" +import type { IBaseWidget, IWidgetOptions, TWidgetType, TWidgetValue } from "./types/widgets" + +import { getNodeInputOnPos, getNodeOutputOnPos } from "./canvas/measureSlots" +import { NullGraphError } from "./infrastructure/NullGraphError" +import { Rectangle } from "./infrastructure/Rectangle" +import { BadgePosition, LGraphBadge } from "./LGraphBadge" +import { LGraphButton, type LGraphButtonOptions } from "./LGraphButton" +import { LGraphCanvas } from "./LGraphCanvas" +import { type LGraphNodeConstructor, LiteGraph, type Subgraph, type SubgraphNode } from "./litegraph" +import { LLink } from "./LLink" +import { createBounds, isInRect, isInRectangle, isPointInRect, snapPoint } from "./measure" +import { NodeInputSlot } from "./node/NodeInputSlot" +import { NodeOutputSlot } from "./node/NodeOutputSlot" +import { inputAsSerialisable, isINodeInputSlot, isWidgetInputSlot, outputAsSerialisable } from "./node/slotUtils" +import { + LGraphEventMode, + NodeSlotType, + RenderShape, + TitleMode, +} from "./types/globalEnums" +import { findFreeSlotOfType } from "./utils/collections" +import { warnDeprecated } from "./utils/feedback" +import { distributeSpace } from "./utils/spaceDistribution" +import { truncateText } from "./utils/textUtils" +import { toClass } from "./utils/type" +import { BaseWidget } from "./widgets/BaseWidget" +import { toConcreteWidget, type WidgetTypeMap } from "./widgets/widgetMap" + +// #region Types + +export type NodeId = number | string + +export type NodeProperty = string | number | boolean | object + +export interface INodePropertyInfo { + name: string + type?: string + default_value: NodeProperty | undefined +} + +export interface IMouseOverData { + inputId?: number + outputId?: number + overWidget?: IBaseWidget +} + +export interface ConnectByTypeOptions { + /** @deprecated Events */ + createEventInCase?: boolean + /** Allow our wildcard slot to connect to typed slots on remote node. Default: true */ + wildcardToTyped?: boolean + /** Allow our typed slot to connect to wildcard slots on remote node. Default: true */ + typedToWildcard?: boolean + /** The {@link Reroute.id} that the connection is being dragged from. */ + afterRerouteId?: RerouteId +} + +/** Internal type used for type safety when implementing generic checks for inputs & outputs */ +export interface IGenericLinkOrLinks { + links?: INodeOutputSlot["links"] + link?: INodeInputSlot["link"] +} + +export interface FindFreeSlotOptions { + /** Slots matching these types will be ignored. Default: [] */ + typesNotAccepted?: ISlotType[] + /** If true, the slot itself is returned instead of the index. Default: false */ + returnObj?: boolean +} + +interface DrawSlotsOptions { + fromSlot?: INodeInputSlot | INodeOutputSlot + colorContext: DefaultConnectionColors + editorAlpha: number + lowQuality: boolean +} + +interface DrawWidgetsOptions { + lowQuality?: boolean + editorAlpha?: number +} + +interface DrawTitleOptions { + scale: number + title_height?: number + low_quality?: boolean +} + +interface DrawTitleTextOptions extends DrawTitleOptions { + default_title_color: string +} + +interface DrawTitleBoxOptions extends DrawTitleOptions { + box_size?: number +} + +/* +title: string +pos: [x,y] +size: [x,y] + +input|output: every connection + + { name:string, type:string, pos: [x,y]=Optional, direction: "input"|"output", links: Array }); + +general properties: + + clip_area: if you render outside the node, it will be clipped + + unsafe_execution: not allowed for safe execution + + skip_repeated_outputs: when adding new outputs, it wont show if there is one already connected + + resizable: if set to false it wont be resizable with the mouse + + widgets_start_y: widgets start at y distance from the top of the node + +flags object: + + collapsed: if it is collapsed + +supported callbacks: + + onAdded: when added to graph (warning: this is called BEFORE the node is configured when loading) + + onRemoved: when removed from graph + + onStart: when the graph starts playing + + onStop: when the graph stops playing + + onDrawForeground: render the inside widgets inside the node + + onDrawBackground: render the background area inside the node (only in edit mode) + + onMouseDown + + onMouseMove + + onMouseUp + + onMouseEnter + + onMouseLeave + + onExecute: execute the node + + onPropertyChanged: when a property is changed in the panel (return true to skip default behaviour) + + onGetInputs: returns an array of possible inputs + + onGetOutputs: returns an array of possible outputs + + onBounding: in case this node has a bigger bounding than the node itself (the callback receives the bounding as [x,y,w,h]) + + onDblClick: double clicked in the node + + onNodeTitleDblClick: double clicked in the node title + + onInputDblClick: input slot double clicked (can be used to automatically create a node connected) + + onOutputDblClick: output slot double clicked (can be used to automatically create a node connected) + + onConfigure: called after the node has been configured + + onSerialize: to add extra info when serializing (the callback receives the object that should be filled with the data) + + onSelected + + onDeselected + + onDropItem : DOM item dropped over the node + + onDropFile : file dropped over the node + + onConnectInput : if returns false the incoming connection will be canceled + + onConnectionsChange : a connection changed (new one or removed) (NodeSlotType.INPUT or NodeSlotType.OUTPUT, slot, true if connected, link_info, input_info ) + + onAction: action slot triggered + + getExtraMenuOptions: to add option to context menu +*/ + +// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging +export interface LGraphNode { + constructor: LGraphNodeConstructor +} + +// #endregion Types + +/** + * Base class for all nodes + * @param title a name for the node + * @param type a type for the node + */ +// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging +export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable { + // Static properties used by dynamic child classes + static title?: string + static MAX_CONSOLE?: number + static type?: string + static category?: string + static filter?: string + static skip_list?: boolean + + static resizeHandleSize = 15 + static resizeEdgeSize = 5 + + /** Default setting for {@link LGraphNode.connectInputToOutput}. @see {@link INodeFlags.keepAllLinksOnBypass} */ + static keepAllLinksOnBypass: boolean = false + + /** The title text of the node. */ + title: string + /** + * The font style used to render the node's title text. + */ + get titleFontStyle(): string { + return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}` + } + + get innerFontStyle(): string { + return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}` + } + + get displayType(): string { + return this.type + } + + graph: LGraph | Subgraph | null = null + id: NodeId + type: string = "" + inputs: INodeInputSlot[] = [] + outputs: INodeOutputSlot[] = [] + + #concreteInputs: NodeInputSlot[] = [] + #concreteOutputs: NodeOutputSlot[] = [] + + properties: Dictionary = {} + properties_info: INodePropertyInfo[] = [] + flags: INodeFlags = {} + widgets?: IBaseWidget[] + /** + * The amount of space available for widgets to grow into. + * @see {@link layoutWidgets} + */ + freeWidgetSpace?: number + + locked?: boolean + + /** Execution order, automatically computed during run @see {@link LGraph.computeExecutionOrder} */ + order: number = 0 + mode: LGraphEventMode = LGraphEventMode.ALWAYS + last_serialization?: ISerialisedNode + serialize_widgets?: boolean + /** + * The overridden fg color used to render the node. + * @see {@link renderingColor} + */ + color?: string + /** + * The overridden bg color used to render the node. + * @see {@link renderingBgColor} + */ + bgcolor?: string + /** + * The overridden box color used to render the node. + * @see {@link renderingBoxColor} + */ + boxcolor?: string + + /** The fg color used to render the node. */ + get renderingColor(): string { + return this.color || this.constructor.color || LiteGraph.NODE_DEFAULT_COLOR + } + + /** The bg color used to render the node. */ + get renderingBgColor(): string { + return this.bgcolor || this.constructor.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR + } + + /** The box color used to render the node. */ + get renderingBoxColor(): string { + if (this.boxcolor) return this.boxcolor + + if (LiteGraph.node_box_coloured_when_on) { + if (this.action_triggered) return "#FFF" + if (this.execute_triggered) return "#AAA" + } + + if (LiteGraph.node_box_coloured_by_mode) { + const modeColour = LiteGraph.NODE_MODES_COLORS[this.mode ?? LGraphEventMode.ALWAYS] + if (modeColour) return modeColour + } + return LiteGraph.NODE_DEFAULT_BOXCOLOR + } + + /** @inheritdoc {@link IColorable.setColorOption} */ + setColorOption(colorOption: ColorOption | null): void { + if (colorOption == null) { + delete this.color + delete this.bgcolor + } else { + this.color = colorOption.color + this.bgcolor = colorOption.bgcolor + } + } + + /** @inheritdoc {@link IColorable.getColorOption} */ + getColorOption(): ColorOption | null { + return Object.values(LGraphCanvas.node_colors).find( + colorOption => + colorOption.color === this.color && colorOption.bgcolor === this.bgcolor, + ) ?? null + } + + /** + * The stroke styles that should be applied to the node. + */ + strokeStyles: Record IDrawBoundingOptions | undefined> + + /** + * The progress of node execution. Used to render a progress bar. Value between 0 and 1. + */ + progress?: number + + exec_version?: number + action_call?: string + execute_triggered?: number + action_triggered?: number + widgets_up?: boolean + widgets_start_y?: number + lostFocusAt?: number + gotFocusAt?: number + badges: (LGraphBadge | (() => LGraphBadge))[] = [] + title_buttons: LGraphButton[] = [] + badgePosition: BadgePosition = BadgePosition.TopLeft + onOutputRemoved?(this: LGraphNode, slot: number): void + onInputRemoved?(this: LGraphNode, slot: number, input: INodeInputSlot): void + /** + * The width of the node when collapsed. + * Updated by {@link LGraphCanvas.drawNode} + */ + _collapsed_width?: number + /** + * Called once at the start of every frame. Caller may change the values in {@link out}, which will be reflected in {@link boundingRect}. + * WARNING: Making changes to boundingRect via onBounding is poorly supported, and will likely result in strange behaviour. + */ + onBounding?(this: LGraphNode, out: Rect): void + console?: string[] + _level?: number + _shape?: RenderShape + mouseOver?: IMouseOverData + redraw_on_mouse?: boolean + resizable?: boolean + clonable?: boolean + _relative_id?: number + clip_area?: boolean + ignore_remove?: boolean + has_errors?: boolean + removable?: boolean + block_delete?: boolean + selected?: boolean + showAdvanced?: boolean + + declare comfyClass?: string + declare isVirtualNode?: boolean + applyToGraph?(extraLinks?: LLink[]): void + + isSubgraphNode(): this is SubgraphNode { + return false + } + + /** @inheritdoc {@link renderArea} */ + #renderArea: Float32Array = new Float32Array(4) + /** + * Rect describing the node area, including shadows and any protrusions. + * Determines if the node is visible. Calculated once at the start of every frame. + */ + get renderArea(): ReadOnlyRect { + return this.#renderArea + } + + /** @inheritdoc {@link boundingRect} */ + #boundingRect: Rectangle = new Rectangle() + /** + * Cached node position & area as `x, y, width, height`. Includes changes made by {@link onBounding}, if present. + * + * Determines the node hitbox and other rendering effects. Calculated once at the start of every frame. + */ + get boundingRect(): ReadOnlyRectangle { + return this.#boundingRect + } + + /** The offset from {@link pos} to the top-left of {@link boundingRect}. */ + get boundingOffset(): ReadOnlyPoint { + const { pos: [posX, posY], boundingRect: [bX, bY] } = this + return [posX - bX, posY - bY] + } + + /** {@link pos} and {@link size} values are backed by this {@link Rect}. */ + _posSize: Float32Array = new Float32Array(4) + _pos: Point = this._posSize.subarray(0, 2) + _size: Size = this._posSize.subarray(2, 4) + + public get pos() { + return this._pos + } + + /** Node position does not necessarily correlate to the top-left corner. */ + public set pos(value) { + if (!value || value.length < 2) return + + this._pos[0] = value[0] + this._pos[1] = value[1] + } + + public get size() { + return this._size + } + + public set size(value) { + if (!value || value.length < 2) return + + this._size[0] = value[0] + this._size[1] = value[1] + } + + /** + * The size of the node used for rendering. + */ + get renderingSize(): Size { + return this.flags.collapsed ? [this._collapsed_width ?? 0, 0] : this._size + } + + get shape(): RenderShape | undefined { + return this._shape + } + + set shape(v: RenderShape | "default" | "box" | "round" | "circle" | "card") { + switch (v) { + case "default": + delete this._shape + break + case "box": + this._shape = RenderShape.BOX + break + case "round": + this._shape = RenderShape.ROUND + break + case "circle": + this._shape = RenderShape.CIRCLE + break + case "card": + this._shape = RenderShape.CARD + break + default: + this._shape = v + } + } + + /** + * The shape of the node used for rendering. @see {@link RenderShape} + */ + get renderingShape(): RenderShape { + return this._shape || this.constructor.shape || LiteGraph.NODE_DEFAULT_SHAPE + } + + public get is_selected(): boolean | undefined { + return this.selected + } + + public set is_selected(value: boolean) { + this.selected = value + } + + public get title_mode(): TitleMode { + return this.constructor.title_mode ?? TitleMode.NORMAL_TITLE + } + + onConnectInput?( + this: LGraphNode, + target_slot: number, + type: unknown, + output: INodeOutputSlot | SubgraphIO, + node: LGraphNode | SubgraphInputNode, + slot: number, + ): boolean + onConnectOutput?( + this: LGraphNode, + slot: number, + type: unknown, + input: INodeInputSlot | SubgraphIO, + target_node: number | LGraphNode | SubgraphOutputNode, + target_slot: number, + ): boolean + onResize?(this: LGraphNode, size: Size): void + onPropertyChanged?( + this: LGraphNode, + name: string, + value: unknown, + prev_value?: unknown, + ): boolean + /** Called for each connection that is created, updated, or removed. This includes "restored" connections when deserialising. */ + onConnectionsChange?( + this: LGraphNode, + type: ISlotType, + index: number, + isConnected: boolean, + link_info: LLink | null | undefined, + inputOrOutput: INodeInputSlot | INodeOutputSlot | SubgraphIO, + ): void + onInputAdded?(this: LGraphNode, input: INodeInputSlot): void + onOutputAdded?(this: LGraphNode, output: INodeOutputSlot): void + onConfigure?(this: LGraphNode, serialisedNode: ISerialisedNode): void + onSerialize?(this: LGraphNode, serialised: ISerialisedNode): any + onExecute?( + this: LGraphNode, + param?: unknown, + options?: { action_call?: any }, + ): void + onAction?( + this: LGraphNode, + action: string, + param: unknown, + options: { action_call?: string }, + ): void + onDrawBackground?( + this: LGraphNode, + ctx: CanvasRenderingContext2D, + ): void + onNodeCreated?(this: LGraphNode): void + /** + * Callback invoked by {@link connect} to override the target slot index. + * Its return value overrides the target index selection. + * @param target_slot The current input slot index + * @param requested_slot The originally requested slot index - could be negative, or if using (deprecated) name search, a string + * @returns {number | null} If a number is returned, the connection will be made to that input index. + * If an invalid index or non-number (false, null, NaN etc) is returned, the connection will be cancelled. + */ + onBeforeConnectInput?( + this: LGraphNode, + target_slot: number, + requested_slot?: number | string, + ): number | false | null + onShowCustomPanelInfo?(this: LGraphNode, panel: any): void + onAddPropertyToPanel?(this: LGraphNode, pName: string, panel: any): boolean + onWidgetChanged?( + this: LGraphNode, + name: string, + value: unknown, + old_value: unknown, + w: IBaseWidget, + ): void + onDeselected?(this: LGraphNode): void + onKeyUp?(this: LGraphNode, e: KeyboardEvent): void + onKeyDown?(this: LGraphNode, e: KeyboardEvent): void + onSelected?(this: LGraphNode): void + getExtraMenuOptions?( + this: LGraphNode, + canvas: LGraphCanvas, + options: (IContextMenuValue | null)[], + ): (IContextMenuValue | null)[] + getMenuOptions?(this: LGraphNode, canvas: LGraphCanvas): IContextMenuValue[] + onAdded?(this: LGraphNode, graph: LGraph): void + onDrawCollapsed?( + this: LGraphNode, + ctx: CanvasRenderingContext2D, + cavnas: LGraphCanvas, + ): boolean + onDrawForeground?( + this: LGraphNode, + ctx: CanvasRenderingContext2D, + canvas: LGraphCanvas, + canvasElement: HTMLCanvasElement, + ): void + onMouseLeave?(this: LGraphNode, e: CanvasPointerEvent): void + /** + * Override the default slot menu options. + */ + getSlotMenuOptions?(this: LGraphNode, slot: IFoundSlot): IContextMenuValue[] + /** + * Add extra menu options to the slot context menu. + */ + getExtraSlotMenuOptions?(this: LGraphNode, slot: IFoundSlot): IContextMenuValue[] + + // FIXME: Re-typing + onDropItem?(this: LGraphNode, event: Event): boolean + onDropData?( + this: LGraphNode, + data: string | ArrayBuffer, + filename: any, + file: any, + ): void + onDropFile?(this: LGraphNode, file: any): void + onInputClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void + onInputDblClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void + onOutputClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void + onOutputDblClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void + // TODO: Return type + onGetPropertyInfo?(this: LGraphNode, property: string): any + onNodeOutputAdd?(this: LGraphNode, value: unknown): void + onNodeInputAdd?(this: LGraphNode, value: unknown): void + onMenuNodeInputs?( + this: LGraphNode, + entries: (IContextMenuValue | null)[], + ): (IContextMenuValue | null)[] + onMenuNodeOutputs?( + this: LGraphNode, + entries: (IContextMenuValue | null)[], + ): (IContextMenuValue | null)[] + onMouseUp?(this: LGraphNode, e: CanvasPointerEvent, pos: Point): void + onMouseEnter?(this: LGraphNode, e: CanvasPointerEvent): void + /** Blocks drag if return value is truthy. @param pos Offset from {@link LGraphNode.pos}. */ + onMouseDown?( + this: LGraphNode, + e: CanvasPointerEvent, + pos: Point, + canvas: LGraphCanvas, + ): boolean + /** @param pos Offset from {@link LGraphNode.pos}. */ + onDblClick?( + this: LGraphNode, + e: CanvasPointerEvent, + pos: Point, + canvas: LGraphCanvas, + ): void + /** @param pos Offset from {@link LGraphNode.pos}. */ + onNodeTitleDblClick?( + this: LGraphNode, + e: CanvasPointerEvent, + pos: Point, + canvas: LGraphCanvas, + ): void + onDrawTitle?(this: LGraphNode, ctx: CanvasRenderingContext2D): void + onDrawTitleText?( + this: LGraphNode, + ctx: CanvasRenderingContext2D, + title_height: number, + size: Size, + scale: number, + title_text_font: string, + selected?: boolean, + ): void + onDrawTitleBox?( + this: LGraphNode, + ctx: CanvasRenderingContext2D, + title_height: number, + size: Size, + scale: number, + ): void + onDrawTitleBar?( + this: LGraphNode, + ctx: CanvasRenderingContext2D, + title_height: number, + size: Size, + scale: number, + fgcolor: any, + ): void + onRemoved?(this: LGraphNode): void + onMouseMove?( + this: LGraphNode, + e: CanvasPointerEvent, + pos: Point, + arg2: LGraphCanvas, + ): void + onPropertyChange?(this: LGraphNode): void + updateOutputData?(this: LGraphNode, origin_slot: number): void + + #getErrorStrokeStyle(this: LGraphNode): IDrawBoundingOptions | undefined { + if (this.has_errors) { + return { + padding: 12, + lineWidth: 10, + color: LiteGraph.NODE_ERROR_COLOUR, + } + } + } + + #getSelectedStrokeStyle(this: LGraphNode): IDrawBoundingOptions | undefined { + if (this.selected) { + return { + padding: this.has_errors ? 20 : undefined, + } + } + } + + constructor(title: string, type?: string) { + this.id = LiteGraph.use_uuids ? LiteGraph.uuidv4() : -1 + this.title = title || "Unnamed" + this.type = type ?? "" + this.size = [LiteGraph.NODE_WIDTH, 60] + this.pos = [10, 10] + this.strokeStyles = { + error: this.#getErrorStrokeStyle, + selected: this.#getSelectedStrokeStyle, + } + + // Assign onMouseDown implementation + this.onMouseDown = (e: CanvasPointerEvent, pos: Point, canvas: LGraphCanvas): boolean => { + // Check for title button clicks (only if not collapsed) + if (this.title_buttons?.length && !this.flags.collapsed) { + // pos contains the offset from the node's position, so we need to use node-relative coordinates + const nodeRelativeX = pos[0] + const nodeRelativeY = pos[1] + + for (let i = 0; i < this.title_buttons.length; i++) { + const button = this.title_buttons[i] + if (button.visible && button.isPointInside(nodeRelativeX, nodeRelativeY)) { + this.onTitleButtonClick(button, canvas) + return true // Prevent default behavior + } + } + } + + return false // Allow default behavior + } + } + + /** Internal callback for subgraph nodes. Do not implement externally. */ + _internalConfigureAfterSlots?(): void + + /** + * configure a node from an object containing the serialized info + */ + configure(info: ISerialisedNode): void { + if (this.graph) { + this.graph._version++ + } + for (const j in info) { + if (j == "properties") { + // i don't want to clone properties, I want to reuse the old container + for (const k in info.properties) { + this.properties[k] = info.properties[k] + this.onPropertyChanged?.(k, info.properties[k]) + } + continue + } + + // @ts-expect-error #594 + if (info[j] == null) { + continue + // @ts-expect-error #594 + } else if (typeof info[j] == "object") { + // @ts-expect-error #594 + if (this[j]?.configure) { + // @ts-expect-error #594 + this[j]?.configure(info[j]) + } else { + // @ts-expect-error #594 + this[j] = LiteGraph.cloneObject(info[j], this[j]) + } + } else { + // value + // @ts-expect-error #594 + this[j] = info[j] + } + } + + if (!info.title) { + this.title = this.constructor.title + } + + this.inputs ??= [] + this.inputs = this.inputs.map(input => toClass(NodeInputSlot, input, this)) + for (const [i, input] of this.inputs.entries()) { + const link = this.graph && input.link != null + ? this.graph._links.get(input.link) + : null + this.onConnectionsChange?.(NodeSlotType.INPUT, i, true, link, input) + this.onInputAdded?.(input) + } + + this.outputs ??= [] + this.outputs = this.outputs.map(output => toClass(NodeOutputSlot, output, this)) + for (const [i, output] of this.outputs.entries()) { + if (!output.links) continue + + for (const linkId of output.links) { + const link = this.graph + ? this.graph._links.get(linkId) + : null + this.onConnectionsChange?.(NodeSlotType.OUTPUT, i, true, link, output) + } + this.onOutputAdded?.(output) + } + + // SubgraphNode callback. + this._internalConfigureAfterSlots?.() + + if (this.widgets) { + for (const w of this.widgets) { + if (!w) continue + + if (w.options?.property && this.properties[w.options.property] != undefined) + w.value = JSON.parse(JSON.stringify(this.properties[w.options.property])) + } + + if (info.widgets_values) { + const widgetsWithValue = this.widgets.filter(w => w.serialize !== false) + for (let i = 0; i < info.widgets_values.length; ++i) { + const widget = widgetsWithValue[i] + if (widget) { + widget.value = info.widgets_values[i] + } + } + } + } + + // Sync the state of this.resizable. + if (this.pinned) this.resizable = false + + this.onConfigure?.(info) + } + + /** + * serialize the content + */ + serialize(): ISerialisedNode { + // create serialization object + const o: ISerialisedNode = { + id: this.id, + type: this.type, + pos: [this.pos[0], this.pos[1]], + size: [this.size[0], this.size[1]], + flags: LiteGraph.cloneObject(this.flags), + order: this.order, + mode: this.mode, + showAdvanced: this.showAdvanced, + } + + // special case for when there were errors + if (this.constructor === LGraphNode && this.last_serialization) + return this.last_serialization + + if (this.inputs) o.inputs = this.inputs.map(input => inputAsSerialisable(input)) + if (this.outputs) o.outputs = this.outputs.map(output => outputAsSerialisable(output)) + + if (this.title && this.title != this.constructor.title) o.title = this.title + + if (this.properties) o.properties = LiteGraph.cloneObject(this.properties) + + const { widgets } = this + if (widgets && this.serialize_widgets) { + o.widgets_values = [] + for (const [i, widget] of widgets.entries()) { + if (widget.serialize === false) continue + // @ts-expect-error #595 No-null + o.widgets_values[i] = widget ? widget.value : null + } + } + + if (!o.type) o.type = this.constructor.type + + if (this.color) o.color = this.color + if (this.bgcolor) o.bgcolor = this.bgcolor + if (this.boxcolor) o.boxcolor = this.boxcolor + if (this.shape) o.shape = this.shape + + if (this.onSerialize?.(o)) console.warn("node onSerialize shouldnt return anything, data should be stored in the object pass in the first parameter") + + return o + } + + /* Creates a clone of this node */ + clone(): LGraphNode | null { + if (this.type == null) return null + const node = LiteGraph.createNode(this.type) + if (!node) return null + + // we clone it because serialize returns shared containers + const data = LiteGraph.cloneObject(this.serialize()) + const { inputs, outputs } = data + + // remove links + if (inputs) { + for (const input of inputs) { + input.link = null + } + } + + if (outputs) { + for (const { links } of outputs) { + if (links) links.length = 0 + } + } + + // @ts-expect-error Exceptional case: id is removed so that the graph can assign a new one on add. + delete data.id + + if (LiteGraph.use_uuids) data.id = LiteGraph.uuidv4() + + node.configure(data) + + return node + } + + /** + * serialize and stringify + */ + toString(): string { + return JSON.stringify(this.serialize()) + } + + /** + * get the title string + */ + getTitle(): string { + return this.title || this.constructor.title + } + + /** + * sets the value of a property + * @param name + * @param value + */ + setProperty(name: string, value: TWidgetValue): void { + this.properties ||= {} + if (value === this.properties[name]) return + + const prev_value = this.properties[name] + this.properties[name] = value + // abort change + if (this.onPropertyChanged?.(name, value, prev_value) === false) + this.properties[name] = prev_value + + if (this.widgets) { + for (const w of this.widgets) { + if (!w) continue + + if (w.options.property == name) { + w.value = value + break + } + } + } + } + + /** + * sets the output data + * @param slot + * @param data + */ + setOutputData(slot: number, data: number | string | boolean | { toToolTip?(): string }): void { + const { outputs } = this + if (!outputs) return + + // this maybe slow and a niche case + if (slot == -1 || slot >= outputs.length) return + + const output_info = outputs[slot] + if (!output_info) return + + // store data in the output itself in case we want to debug + output_info._data = data + + if (!this.graph) throw new NullGraphError() + + // if there are connections, pass the data to the connections + const { links } = outputs[slot] + if (links) { + for (const id of links) { + const link = this.graph._links.get(id) + if (link) link.data = data + } + } + } + + /** + * sets the output data type, useful when you want to be able to overwrite the data type + */ + setOutputDataType(slot: number, type: ISlotType): void { + const { outputs } = this + if (!outputs || (slot == -1 || slot >= outputs.length)) return + + const output_info = outputs[slot] + if (!output_info) return + // store data in the output itself in case we want to debug + output_info.type = type + + if (!this.graph) throw new NullGraphError() + + // if there are connections, pass the data to the connections + const { links } = outputs[slot] + if (links) { + for (const id of links) { + const link = this.graph._links.get(id) + if (link) link.type = type + } + } + } + + /** + * Retrieves the input data (data traveling through the connection) from one slot + * @param slot + * @param force_update if set to true it will force the connected node of this slot to output data into this link + * @returns data or if it is not connected returns undefined + */ + getInputData(slot: number, force_update?: boolean): unknown { + if (!this.inputs) return + + if (slot >= this.inputs.length || this.inputs[slot].link == null) return + if (!this.graph) throw new NullGraphError() + + const link_id = this.inputs[slot].link + const link = this.graph._links.get(link_id) + // bug: weird case but it happens sometimes + if (!link) return null + + if (!force_update) return link.data + + // special case: used to extract data from the incoming connection before the graph has been executed + const node = this.graph.getNodeById(link.origin_id) + if (!node) return link.data + + if (node.updateOutputData) { + node.updateOutputData(link.origin_slot) + } else { + node.onExecute?.() + } + + return link.data + } + + /** + * Retrieves the input data type (in case this supports multiple input types) + * @param slot + * @returns datatype in string format + */ + getInputDataType(slot: number): ISlotType | null { + if (!this.inputs) return null + if (slot >= this.inputs.length || this.inputs[slot].link == null) return null + if (!this.graph) throw new NullGraphError() + + const link_id = this.inputs[slot].link + const link = this.graph._links.get(link_id) + // bug: weird case but it happens sometimes + if (!link) return null + + const node = this.graph.getNodeById(link.origin_id) + if (!node) return link.type + + const output_info = node.outputs[link.origin_slot] + return output_info + ? output_info.type + : null + } + + /** + * Retrieves the input data from one slot using its name instead of slot number + * @param slot_name + * @param force_update if set to true it will force the connected node of this slot to output data into this link + * @returns data or if it is not connected returns null + */ + getInputDataByName(slot_name: string, force_update: boolean): unknown { + const slot = this.findInputSlot(slot_name) + return slot == -1 + ? null + : this.getInputData(slot, force_update) + } + + /** + * tells you if there is a connection in one input slot + * @param slot The 0-based index of the input to check + * @returns `true` if the input slot has a link ID (does not perform validation) + */ + isInputConnected(slot: number): boolean { + if (!this.inputs) return false + return slot < this.inputs.length && this.inputs[slot].link != null + } + + /** + * tells you info about an input connection (which node, type, etc) + * @returns object or null { link: id, name: string, type: string or 0 } + */ + getInputInfo(slot: number): INodeInputSlot | null { + return !this.inputs || !(slot < this.inputs.length) + ? null + : this.inputs[slot] + } + + /** + * Returns the link info in the connection of an input slot + * @returns object or null + */ + getInputLink(slot: number): LLink | null { + if (!this.inputs) return null + + if (slot < this.inputs.length) { + if (!this.graph) throw new NullGraphError() + + const input = this.inputs[slot] + if (input.link != null) { + return this.graph._links.get(input.link) ?? null + } + } + return null + } + + /** + * returns the node connected in the input slot + * @returns node or null + */ + getInputNode(slot: number): LGraphNode | null { + if (!this.inputs) return null + if (slot >= this.inputs.length) return null + + const input = this.inputs[slot] + if (!input || input.link === null) return null + if (!this.graph) throw new NullGraphError() + + const link_info = this.graph._links.get(input.link) + if (!link_info) return null + + return this.graph.getNodeById(link_info.origin_id) + } + + /** + * returns the value of an input with this name, otherwise checks if there is a property with that name + * @returns value + */ + getInputOrProperty(name: string): unknown { + const { inputs } = this + if (!inputs?.length) { + return this.properties ? this.properties[name] : null + } + if (!this.graph) throw new NullGraphError() + + for (const input of inputs) { + if (name == input.name && input.link != null) { + const link = this.graph._links.get(input.link) + if (link) return link.data + } + } + return this.properties[name] + } + + /** + * tells you the last output data that went in that slot + * @returns object or null + */ + getOutputData(slot: number): unknown { + if (!this.outputs) return null + if (slot >= this.outputs.length) return null + + const info = this.outputs[slot] + return info._data + } + + /** + * tells you info about an output connection (which node, type, etc) + * @returns object or null { name: string, type: string, links: [ ids of links in number ] } + */ + getOutputInfo(slot: number): INodeOutputSlot | null { + return !this.outputs || !(slot < this.outputs.length) + ? null + : this.outputs[slot] + } + + /** + * tells you if there is a connection in one output slot + */ + isOutputConnected(slot: number): boolean { + if (!this.outputs) return false + return slot < this.outputs.length && Number(this.outputs[slot].links?.length) > 0 + } + + /** + * tells you if there is any connection in the output slots + */ + isAnyOutputConnected(): boolean { + const { outputs } = this + if (!outputs) return false + + for (const output of outputs) { + if (output.links?.length) return true + } + return false + } + + /** + * retrieves all the nodes connected to this output slot + */ + getOutputNodes(slot: number): LGraphNode[] | null { + const { outputs } = this + if (!outputs || outputs.length == 0) return null + + if (slot >= outputs.length) return null + + const { links } = outputs[slot] + if (!links || links.length == 0) return null + if (!this.graph) throw new NullGraphError() + + const r: LGraphNode[] = [] + for (const id of links) { + const link = this.graph._links.get(id) + if (link) { + const target_node = this.graph.getNodeById(link.target_id) + if (target_node) { + r.push(target_node) + } + } + } + return r + } + + addOnTriggerInput(): number { + const trigS = this.findInputSlot("onTrigger") + if (trigS == -1) { + this.addInput("onTrigger", LiteGraph.EVENT, { + nameLocked: true, + }) + return this.findInputSlot("onTrigger") + } + return trigS + } + + addOnExecutedOutput(): number { + const trigS = this.findOutputSlot("onExecuted") + if (trigS == -1) { + this.addOutput("onExecuted", LiteGraph.ACTION, { + nameLocked: true, + }) + return this.findOutputSlot("onExecuted") + } + return trigS + } + + onAfterExecuteNode(param: unknown, options?: { action_call?: any }) { + const trigS = this.findOutputSlot("onExecuted") + if (trigS != -1) { + this.triggerSlot(trigS, param, null, options) + } + } + + changeMode(modeTo: number): boolean { + switch (modeTo) { + case LGraphEventMode.ON_EVENT: + break + + case LGraphEventMode.ON_TRIGGER: + this.addOnTriggerInput() + this.addOnExecutedOutput() + break + + case LGraphEventMode.NEVER: + break + + case LGraphEventMode.ALWAYS: + break + + // @ts-expect-error Not impl. + case LiteGraph.ON_REQUEST: + break + + default: + return false + break + } + this.mode = modeTo + return true + } + + /** + * Triggers the node code execution, place a boolean/counter to mark the node as being executed + */ + doExecute(param?: unknown, options?: { action_call?: any }): void { + options = options || {} + if (this.onExecute) { + // enable this to give the event an ID + options.action_call ||= `${this.id}_exec_${Math.floor(Math.random() * 9999)}` + if (!this.graph) throw new NullGraphError() + + // @ts-expect-error Technically it works when id is a string. Array gets props. + this.graph.nodes_executing[this.id] = true + this.onExecute(param, options) + // @ts-expect-error deprecated + this.graph.nodes_executing[this.id] = false + + // save execution/action ref + this.exec_version = this.graph.iteration + if (options?.action_call) { + this.action_call = options.action_call + // @ts-expect-error deprecated + this.graph.nodes_executedAction[this.id] = options.action_call + } + } + // the nFrames it will be used (-- each step), means "how old" is the event + this.execute_triggered = 2 + this.onAfterExecuteNode?.(param, options) + } + + /** + * Triggers an action, wrapped by logics to control execution flow + * @param action name + */ + actionDo( + action: string, + param: unknown, + options: { action_call?: string }, + ): void { + options = options || {} + if (this.onAction) { + // enable this to give the event an ID + options.action_call ||= `${this.id}_${action || "action"}_${Math.floor(Math.random() * 9999)}` + if (!this.graph) throw new NullGraphError() + + // @ts-expect-error deprecated + this.graph.nodes_actioning[this.id] = action || "actioning" + this.onAction(action, param, options) + // @ts-expect-error deprecated + this.graph.nodes_actioning[this.id] = false + + // save execution/action ref + if (options?.action_call) { + this.action_call = options.action_call + // @ts-expect-error deprecated + this.graph.nodes_executedAction[this.id] = options.action_call + } + } + // the nFrames it will be used (-- each step), means "how old" is the event + this.action_triggered = 2 + this.onAfterExecuteNode?.(param, options) + } + + /** + * Triggers an event in this node, this will trigger any output with the same name + * @param action name ( "on_play", ... ) if action is equivalent to false then the event is send to all + */ + trigger( + action: string, + param: unknown, + options: { action_call?: any }, + ): void { + const { outputs } = this + if (!outputs || !outputs.length) { + return + } + + if (this.graph) this.graph._last_trigger_time = LiteGraph.getTime() + + for (const [i, output] of outputs.entries()) { + if ( + !output || + output.type !== LiteGraph.EVENT || + (action && output.name != action) + ) { + continue + } + this.triggerSlot(i, param, null, options) + } + } + + /** + * Triggers a slot event in this node: cycle output slots and launch execute/action on connected nodes + * @param slot the index of the output slot + * @param link_id [optional] in case you want to trigger and specific output link in a slot + */ + triggerSlot( + slot: number, + param: unknown, + link_id: number | null, + options?: { action_call?: any }, + ): void { + options = options || {} + if (!this.outputs) return + + if (slot == null) { + console.error("slot must be a number") + return + } + + if (typeof slot !== "number") + console.warn("slot must be a number, use node.trigger('name') if you want to use a string") + + const output = this.outputs[slot] + if (!output) return + + const links = output.links + if (!links || !links.length) return + + if (!this.graph) throw new NullGraphError() + this.graph._last_trigger_time = LiteGraph.getTime() + + // for every link attached here + for (const id of links) { + // to skip links + if (link_id != null && link_id != id) continue + + const link_info = this.graph._links.get(id) + // not connected + if (!link_info) continue + + link_info._last_time = LiteGraph.getTime() + const node = this.graph.getNodeById(link_info.target_id) + // node not found? + if (!node) continue + + if (node.mode === LGraphEventMode.ON_TRIGGER) { + // generate unique trigger ID if not present + if (!options.action_call) + options.action_call = `${this.id}_trigg_${Math.floor(Math.random() * 9999)}` + // -- wrapping node.onExecute(param); -- + node.doExecute?.(param, options) + } else if (node.onAction) { + // generate unique action ID if not present + if (!options.action_call) + options.action_call = `${this.id}_act_${Math.floor(Math.random() * 9999)}` + // pass the action name + const target_connection = node.inputs[link_info.target_slot] + node.actionDo(target_connection.name, param, options) + } + } + } + + /** + * clears the trigger slot animation + * @param slot the index of the output slot + * @param link_id [optional] in case you want to trigger and specific output link in a slot + */ + clearTriggeredSlot(slot: number, link_id: number): void { + if (!this.outputs) return + + const output = this.outputs[slot] + if (!output) return + + const links = output.links + if (!links || !links.length) return + + if (!this.graph) throw new NullGraphError() + + // for every link attached here + for (const id of links) { + // to skip links + if (link_id != null && link_id != id) continue + + const link_info = this.graph._links.get(id) + // not connected + if (!link_info) continue + + link_info._last_time = 0 + } + } + + /** + * changes node size and triggers callback + */ + setSize(size: Size): void { + this.size = size + this.onResize?.(this.size) + } + + /** + * Expands the node size to fit its content. + */ + expandToFitContent(): void { + const newSize = this.computeSize() + this.setSize([ + Math.max(this.size[0], newSize[0]), + Math.max(this.size[1], newSize[1]), + ]) + } + + /** + * add a new property to this node + * @param type string defining the output type ("vec3","number",...) + * @param extra_info this can be used to have special properties of the property (like values, etc) + */ + addProperty( + name: string, + default_value: NodeProperty | undefined, + type?: string, + extra_info?: Partial, + ): INodePropertyInfo { + const o: INodePropertyInfo = { name, type, default_value } + if (extra_info) Object.assign(o, extra_info) + + this.properties_info ||= [] + this.properties_info.push(o) + this.properties ||= {} + this.properties[name] = default_value + return o + } + + /** + * add a new output slot to use in this node + * @param type string defining the output type ("vec3","number",...) + * @param extra_info this can be used to have special properties of an output (label, special color, position, etc) + */ + addOutput>( + name: string, + type: ISlotType, + extra_info?: TProperties, + ): INodeOutputSlot & TProperties { + const output = Object.assign( + new NodeOutputSlot({ name, type, links: null }, this), + extra_info, + ) + + this.outputs ||= [] + this.outputs.push(output) + this.onOutputAdded?.(output) + + if (LiteGraph.auto_load_slot_types) + LiteGraph.registerNodeAndSlotType(this, type, true) + + this.expandToFitContent() + this.setDirtyCanvas(true, true) + return output + } + + /** + * remove an existing output slot + */ + removeOutput(slot: number): void { + this.disconnectOutput(slot) + const { outputs } = this + outputs.splice(slot, 1) + + for (let i = slot; i < outputs.length; ++i) { + const output = outputs[i] + if (!output || !output.links) continue + + for (const linkId of output.links) { + if (!this.graph) throw new NullGraphError() + + const link = this.graph._links.get(linkId) + if (link) link.origin_slot-- + } + } + + this.onOutputRemoved?.(slot) + this.setDirtyCanvas(true, true) + } + + /** + * add a new input slot to use in this node + * @param type string defining the input type ("vec3","number",...), it its a generic one use 0 + * @param extra_info this can be used to have special properties of an input (label, color, position, etc) + */ + addInput>(name: string, type: ISlotType, extra_info?: TProperties): INodeInputSlot & TProperties { + type ||= 0 + + const input = Object.assign( + new NodeInputSlot({ name, type, link: null }, this), + extra_info, + ) + + this.inputs ||= [] + this.inputs.push(input) + this.expandToFitContent() + + this.onInputAdded?.(input) + LiteGraph.registerNodeAndSlotType(this, type) + + this.setDirtyCanvas(true, true) + return input + } + + /** + * remove an existing input slot + */ + removeInput(slot: number): void { + this.disconnectInput(slot, true) + const { inputs } = this + const slot_info = inputs.splice(slot, 1) + + for (let i = slot; i < inputs.length; ++i) { + const input = inputs[i] + if (!input?.link) continue + + if (!this.graph) throw new NullGraphError() + const link = this.graph._links.get(input.link) + if (link) link.target_slot-- + } + this.onInputRemoved?.(slot, slot_info[0]) + this.setDirtyCanvas(true, true) + } + + /** + * computes the minimum size of a node according to its inputs and output slots + * @returns the total size + */ + computeSize(out?: Size): Size { + const ctorSize = this.constructor.size + if (ctorSize) return [ctorSize[0], ctorSize[1]] + + const { inputs, outputs, widgets } = this + let rows = Math.max( + inputs ? inputs.filter(input => !isWidgetInputSlot(input)).length : 1, + outputs ? outputs.length : 1, + ) + const size = out || new Float32Array([0, 0]) + rows = Math.max(rows, 1) + // although it should be graphcanvas.inner_text_font size + const font_size = LiteGraph.NODE_TEXT_SIZE + + const padLeft = LiteGraph.NODE_TITLE_HEIGHT + const padRight = padLeft * 0.33 + const title_width = padLeft + compute_text_size(this.title, this.titleFontStyle) + padRight + let input_width = 0 + let widgetWidth = 0 + let output_width = 0 + + if (inputs) { + for (const input of inputs) { + const text = input.label || input.localized_name || input.name || "" + const text_width = compute_text_size(text, this.innerFontStyle) + if (isWidgetInputSlot(input)) { + const widget = this.getWidgetFromSlot(input) + if (widget && !this.isWidgetVisible(widget)) continue + + if (text_width > widgetWidth) widgetWidth = text_width + } else { + if (text_width > input_width) input_width = text_width + } + } + } + + if (outputs) { + for (const output of outputs) { + const text = output.label || output.localized_name || output.name || "" + const text_width = compute_text_size(text, this.innerFontStyle) + if (output_width < text_width) + output_width = text_width + } + } + + const minWidth = LiteGraph.NODE_WIDTH * (widgets?.length ? 1.5 : 1) + // Text + slot width + centre padding + const centrePadding = input_width && output_width ? 5 : 0 + const slotsWidth = input_width + output_width + (2 * LiteGraph.NODE_SLOT_HEIGHT) + centrePadding + + // Total distance from edge of node to the inner edge of the widget 'previous' arrow button + const widgetMargin = BaseWidget.margin + BaseWidget.arrowMargin + BaseWidget.arrowWidth + const widgetPadding = BaseWidget.minValueWidth + (2 * widgetMargin) + if (widgetWidth) widgetWidth += widgetPadding + + size[0] = Math.max(slotsWidth, widgetWidth, title_width, minWidth) + size[1] = (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT + + // Get widget height & expand size if necessary + let widgets_height = 0 + if (widgets?.length) { + for (const widget of widgets) { + if (!this.isWidgetVisible(widget)) continue + + let widget_height = 0 + if (widget.computeSize) { + widget_height += widget.computeSize(size[0])[1] + } else if (widget.computeLayoutSize) { + // Expand widget width if necessary + const { minHeight, minWidth } = widget.computeLayoutSize(this) + const widgetWidth = minWidth + widgetPadding + if (widgetWidth > size[0]) size[0] = widgetWidth + + widget_height += minHeight + } else { + widget_height += LiteGraph.NODE_WIDGET_HEIGHT + } + widgets_height += widget_height + 4 + } + widgets_height += 8 + } + + // compute height using widgets height + if (this.widgets_up) + size[1] = Math.max(size[1], widgets_height) + else if (this.widgets_start_y != null) + size[1] = Math.max(size[1], widgets_height + this.widgets_start_y) + else + size[1] += widgets_height + + function compute_text_size(text: string, fontStyle: string) { + return LGraphCanvas._measureText?.(text, fontStyle) ?? + font_size * (text?.length ?? 0) * 0.6 + } + + if (this.constructor.min_height && size[1] < this.constructor.min_height) { + size[1] = this.constructor.min_height + } + + // margin + size[1] += 6 + + return size + } + + inResizeCorner(canvasX: number, canvasY: number): boolean { + const rows = this.outputs ? this.outputs.length : 1 + const outputs_offset = (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT + return isInRectangle( + canvasX, + canvasY, + this.pos[0] + this.size[0] - 15, + this.pos[1] + Math.max(this.size[1] - 15, outputs_offset), + 20, + 20, + ) + } + + /** + * Returns which resize corner the point is over, if any. + * @param canvasX X position in canvas coordinates + * @param canvasY Y position in canvas coordinates + * @returns The compass corner the point is in, otherwise `undefined`. + */ + findResizeDirection(canvasX: number, canvasY: number): CompassCorners | undefined { + if (this.resizable === false) return + + const { boundingRect } = this + if (!boundingRect.containsXy(canvasX, canvasY)) return + + // Check corners first (they take priority over edges) + return boundingRect.findContainingCorner(canvasX, canvasY, LGraphNode.resizeHandleSize) + } + + /** + * returns all the info available about a property of this node. + * @param property name of the property + * @returns the object with all the available info + */ + getPropertyInfo(property: string) { + let info = null + + // there are several ways to define info about a property + // legacy mode + const { properties_info } = this + if (properties_info) { + for (const propInfo of properties_info) { + if (propInfo.name == property) { + info = propInfo + break + } + } + } + // litescene mode using the constructor + // @ts-expect-error deprecated https://github.com/Comfy-Org/litegraph.js/issues/639 + if (this.constructor[`@${property}`]) info = this.constructor[`@${property}`] + + if (this.constructor.widgets_info?.[property]) + info = this.constructor.widgets_info[property] + + // litescene mode using the constructor + if (!info && this.onGetPropertyInfo) { + info = this.onGetPropertyInfo(property) + } + + info ||= {} + info.type ||= typeof this.properties[property] + if (info.widget == "combo") info.type = "enum" + + return info + } + + /** + * Defines a widget inside the node, it will be rendered on top of the node, you can control lots of properties + * @param type the widget type + * @param name the text to show on the widget + * @param value the default value + * @param callback function to call when it changes (optionally, it can be the name of the property to modify) + * @param options the object that contains special properties of this widget + * @returns the created widget object + */ + addWidget( + type: Type, + name: string, + value: TValue, + callback: IBaseWidget["callback"] | string | null, + options?: IWidgetOptions | string, + ): WidgetTypeMap[Type] | IBaseWidget { + this.widgets ||= [] + + if (!options && callback && typeof callback === "object") { + options = callback + callback = null + } + + // options can be the property name + options ||= {} + if (typeof options === "string") + options = { property: options } + + // callback can be the property name + if (callback && typeof callback === "string") { + options.property = callback + callback = null + } + + const w: IBaseWidget & { type: Type } = { + // @ts-expect-error + type: type.toLowerCase(), + name: name, + value: value, + callback: typeof callback !== "function" ? undefined : callback, + options, + y: 0, + } + + if (w.options.y !== undefined) { + w.y = w.options.y + } + + if (!callback && !w.options.callback && !w.options.property) { + console.warn("LiteGraph addWidget(...) without a callback or property assigned") + } + if (type == "combo" && !w.options.values) { + throw "LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }" + } + + const widget = this.addCustomWidget(w) + this.expandToFitContent() + return widget + } + + addCustomWidget( + custom_widget: TPlainWidget, + ): TPlainWidget | WidgetTypeMap[TPlainWidget["type"]] { + this.widgets ||= [] + const widget = toConcreteWidget(custom_widget, this, false) ?? custom_widget + this.widgets.push(widget) + return widget + } + + addTitleButton(options: LGraphButtonOptions): LGraphButton { + this.title_buttons ||= [] + const button = new LGraphButton(options) + this.title_buttons.push(button) + return button + } + + onTitleButtonClick(button: LGraphButton, canvas: LGraphCanvas): void { + // Dispatch event for button click + canvas.dispatch("litegraph:node-title-button-clicked", { + node: this, + button: button, + }) + } + + removeWidgetByName(name: string): void { + const widget = this.widgets?.find(x => x.name === name) + if (widget) this.removeWidget(widget) + } + + removeWidget(widget: IBaseWidget): void { + if (!this.widgets) throw new Error("removeWidget called on node without widgets") + + const widgetIndex = this.widgets.indexOf(widget) + if (widgetIndex === -1) throw new Error("Widget not found on this node") + + // Clean up slot references to prevent memory leaks + if (this.inputs) { + for (const input of this.inputs) { + if (input._widget === widget) { + input._widget = undefined + delete input.widget + } + } + } + + this.widgets.splice(widgetIndex, 1) + } + + ensureWidgetRemoved(widget: IBaseWidget): void { + try { + this.removeWidget(widget) + } catch (error) { + console.debug("Failed to remove widget", error) + } + } + + move(deltaX: number, deltaY: number): void { + if (this.pinned) return + + this.pos[0] += deltaX + this.pos[1] += deltaY + } + + /** + * Internal method to measure the node for rendering. Prefer {@link boundingRect} where possible. + * + * Populates {@link out} with the results in graph space. + * Populates {@link _collapsed_width} with the collapsed width if the node is collapsed. + * Adjusts for title and collapsed status, but does not call {@link onBounding}. + * @param out `x, y, width, height` are written to this array. + * @param ctx The canvas context to use for measuring text. + */ + measure(out: Rect, ctx: CanvasRenderingContext2D): void { + const titleMode = this.title_mode + const renderTitle = + titleMode != TitleMode.TRANSPARENT_TITLE && + titleMode != TitleMode.NO_TITLE + const titleHeight = renderTitle ? LiteGraph.NODE_TITLE_HEIGHT : 0 + + out[0] = this.pos[0] + out[1] = this.pos[1] + -titleHeight + if (!this.flags?.collapsed) { + out[2] = this.size[0] + out[3] = this.size[1] + titleHeight + } else { + ctx.font = this.innerFontStyle + this._collapsed_width = Math.min( + this.size[0], + ctx.measureText(this.getTitle() ?? "").width + LiteGraph.NODE_TITLE_HEIGHT * 2, + ) + out[2] = (this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH) + out[3] = LiteGraph.NODE_TITLE_HEIGHT + } + } + + /** + * returns the bounding of the object, used for rendering purposes + * @param out {Float32Array[4]?} [optional] a place to store the output, to free garbage + * @param includeExternal {boolean?} [optional] set to true to + * include the shadow and connection points in the bounding calculation + * @returns the bounding box in format of [topleft_cornerx, topleft_cornery, width, height] + */ + getBounding(out?: Rect, includeExternal?: boolean): Rect { + out ||= new Float32Array(4) + + const rect = includeExternal ? this.renderArea : this.boundingRect + out[0] = rect[0] + out[1] = rect[1] + out[2] = rect[2] + out[3] = rect[3] + + return out + } + + /** + * Calculates the render area of this node, populating both {@link boundingRect} and {@link renderArea}. + * Called automatically at the start of every frame. + */ + updateArea(ctx: CanvasRenderingContext2D): void { + const bounds = this.#boundingRect + this.measure(bounds, ctx) + this.onBounding?.(bounds) + + const renderArea = this.#renderArea + renderArea.set(bounds) + // 4 offset for collapsed node connection points + renderArea[0] -= 4 + renderArea[1] -= 4 + // Add shadow & left offset + renderArea[2] += 6 + 4 + // Add shadow & top offsets + renderArea[3] += 5 + 4 + } + + /** + * checks if a point is inside the shape of a node + */ + isPointInside(x: number, y: number): boolean { + return isInRect(x, y, this.boundingRect) + } + + /** + * Checks if the provided point is inside this node's collapse button area. + * @param x X co-ordinate to check + * @param y Y co-ordinate to check + * @returns true if the x,y point is in the collapse button area, otherwise false + */ + isPointInCollapse(x: number, y: number): boolean { + const squareLength = LiteGraph.NODE_TITLE_HEIGHT + return isInRectangle( + x, + y, + this.pos[0], + this.pos[1] - squareLength, + squareLength, + squareLength, + ) + } + + /** + * Returns the input slot at the given position. Uses full 20 height, and approximates the label length. + * @param pos The graph co-ordinates to check + * @returns The input slot at the given position if found, otherwise `undefined`. + */ + getInputOnPos(pos: Point): INodeInputSlot | undefined { + return getNodeInputOnPos(this, pos[0], pos[1])?.input + } + + /** + * Returns the output slot at the given position. Uses full 20x20 box for the slot. + * @param pos The graph co-ordinates to check + * @returns The output slot at the given position if found, otherwise `undefined`. + */ + getOutputOnPos(pos: Point): INodeOutputSlot | undefined { + return getNodeOutputOnPos(this, pos[0], pos[1])?.output + } + + /** + * Returns the input or output slot at the given position. + * + * Tries {@link getNodeInputOnPos} first, then {@link getNodeOutputOnPos}. + * @param pos The graph co-ordinates to check + * @returns The input or output slot at the given position if found, otherwise `undefined`. + */ + getSlotOnPos(pos: Point): INodeInputSlot | INodeOutputSlot | undefined { + if (!isPointInRect(pos, this.boundingRect)) return + + return this.getInputOnPos(pos) ?? this.getOutputOnPos(pos) + } + + /** + * @deprecated Use {@link getSlotOnPos} instead. + * checks if a point is inside a node slot, and returns info about which slot + * @param x + * @param y + * @returns if found the object contains { input|output: slot object, slot: number, link_pos: [x,y] } + */ + getSlotInPosition(x: number, y: number): IFoundSlot | null { + // search for inputs + const { inputs, outputs } = this + + if (inputs) { + for (const [i, input] of inputs.entries()) { + const pos = this.getInputPos(i) + if (isInRectangle(x, y, pos[0] - 10, pos[1] - 10, 20, 20)) { + return { input, slot: i, link_pos: pos } + } + } + } + + if (outputs) { + for (const [i, output] of outputs.entries()) { + const pos = this.getOutputPos(i) + if (isInRectangle(x, y, pos[0] - 10, pos[1] - 10, 20, 20)) { + return { output, slot: i, link_pos: pos } + } + } + } + + return null + } + + /** + * Gets the widget on this node at the given co-ordinates. + * @param canvasX X co-ordinate in graph space + * @param canvasY Y co-ordinate in graph space + * @returns The widget found, otherwise `null` + */ + getWidgetOnPos( + canvasX: number, + canvasY: number, + includeDisabled = false, + ): IBaseWidget | undefined { + const { widgets, pos, size } = this + if (!widgets?.length) return + + const x = canvasX - pos[0] + const y = canvasY - pos[1] + const nodeWidth = size[0] + + for (const widget of widgets) { + if ( + (widget.computedDisabled && !includeDisabled) || + !this.isWidgetVisible(widget) + ) { + continue + } + + const h = widget.computedHeight ?? + widget.computeSize?.(nodeWidth)[1] ?? + LiteGraph.NODE_WIDGET_HEIGHT + + const w = widget.width || nodeWidth + if ( + widget.last_y !== undefined && + isInRectangle(x, y, 6, widget.last_y, w - 12, h) + ) { + return widget + } + } + } + + /** + * Returns the input slot with a given name (used for dynamic slots), -1 if not found + * @param name the name of the slot to find + * @param returnObj if the obj itself wanted + * @returns the slot (-1 if not found) + */ + findInputSlot(name: string, returnObj?: TReturn): number + findInputSlot(name: string, returnObj?: TReturn): INodeInputSlot + findInputSlot(name: string, returnObj: boolean = false) { + const { inputs } = this + if (!inputs) return -1 + + for (const [i, input] of inputs.entries()) { + if (name == input.name) { + return !returnObj ? i : input + } + } + return -1 + } + + /** + * returns the output slot with a given name (used for dynamic slots), -1 if not found + * @param name the name of the slot to find + * @param returnObj if the obj itself wanted + * @returns the slot (-1 if not found) + */ + findOutputSlot(name: string, returnObj?: TReturn): number + findOutputSlot(name: string, returnObj?: TReturn): INodeOutputSlot + findOutputSlot(name: string, returnObj: boolean = false) { + const { outputs } = this + if (!outputs) return -1 + + for (const [i, output] of outputs.entries()) { + if (name == output.name) { + return !returnObj ? i : output + } + } + return -1 + } + + /** + * Finds the first free input slot. + * @param optsIn + * @returns The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found. + */ + findInputSlotFree( + optsIn?: FindFreeSlotOptions & { returnObj?: TReturn }, + ): number + findInputSlotFree( + optsIn?: FindFreeSlotOptions & { returnObj?: TReturn }, + ): INodeInputSlot | -1 + findInputSlotFree(optsIn?: FindFreeSlotOptions) { + return this.#findFreeSlot(this.inputs, optsIn) + } + + /** + * Finds the first free output slot. + * @param optsIn + * @returns The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found. + */ + findOutputSlotFree( + optsIn?: FindFreeSlotOptions & { returnObj?: TReturn }, + ): number + findOutputSlotFree( + optsIn?: FindFreeSlotOptions & { returnObj?: TReturn }, + ): INodeOutputSlot | -1 + findOutputSlotFree(optsIn?: FindFreeSlotOptions) { + return this.#findFreeSlot(this.outputs, optsIn) + } + + /** + * Finds the next free slot + * @param slots The slots to search, i.e. this.inputs or this.outputs + */ + #findFreeSlot( + slots: TSlot[], + options?: FindFreeSlotOptions, + ): TSlot | number { + const defaults = { + returnObj: false, + typesNotAccepted: [], + } + const opts = Object.assign(defaults, options || {}) + const length = slots?.length + if (!(length > 0)) return -1 + + for (let i = 0; i < length; ++i) { + const slot: TSlot & IGenericLinkOrLinks = slots[i] + if (!slot || slot.link || slot.links?.length) continue + if (opts.typesNotAccepted?.includes?.(slot.type)) continue + return !opts.returnObj ? i : slot + } + return -1 + } + + /** + * findSlotByType for INPUTS + */ + findInputSlotByType( + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): number + findInputSlotByType( + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): INodeInputSlot + findInputSlotByType( + type: ISlotType, + returnObj?: boolean, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ) { + return this.#findSlotByType( + this.inputs, + type, + returnObj, + preferFreeSlot, + doNotUseOccupied, + ) + } + + /** + * findSlotByType for OUTPUTS + */ + findOutputSlotByType( + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): number + findOutputSlotByType( + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): INodeOutputSlot + findOutputSlotByType( + type: ISlotType, + returnObj?: boolean, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ) { + return this.#findSlotByType( + this.outputs, + type, + returnObj, + preferFreeSlot, + doNotUseOccupied, + ) + } + + /** + * returns the output (or input) slot with a given type, -1 if not found + * @param input uise inputs instead of outputs + * @param type the type of the slot to find + * @param returnObj if the obj itself wanted + * @param preferFreeSlot if we want a free slot (if not found, will return the first of the type anyway) + * @returns the slot (-1 if not found) + */ + findSlotByType( + input: TSlot, + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): number + findSlotByType( + input: TSlot, + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): INodeInputSlot | -1 + findSlotByType( + input: TSlot, + type: ISlotType, + returnObj?: TReturn, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): INodeOutputSlot | -1 + findSlotByType( + input: boolean, + type: ISlotType, + returnObj?: boolean, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): number | INodeOutputSlot | INodeInputSlot { + return input + ? this.#findSlotByType( + this.inputs, + type, + returnObj, + preferFreeSlot, + doNotUseOccupied, + ) + : this.#findSlotByType( + this.outputs, + type, + returnObj, + preferFreeSlot, + doNotUseOccupied, + ) + } + + /** + * Finds a matching slot from those provided, returning the slot itself or its index in {@link slots}. + * @param slots Slots to search (this.inputs or this.outputs) + * @param type Type of slot to look for + * @param returnObj If true, returns the slot itself. Otherwise, the index. + * @param preferFreeSlot Prefer a free slot, but if none are found, fall back to an occupied slot. + * @param doNotUseOccupied Do not fall back to occupied slots. + * @see {findSlotByType} + * @see {findOutputSlotByType} + * @see {findInputSlotByType} + * @returns If a match is found, the slot if returnObj is true, otherwise the index. If no matches are found, -1 + */ + #findSlotByType( + slots: TSlot[], + type: ISlotType, + returnObj?: boolean, + preferFreeSlot?: boolean, + doNotUseOccupied?: boolean, + ): TSlot | number { + const length = slots?.length + if (!length) return -1 + + // Empty string and * match anything (type: 0) + if (type == "" || type == "*") type = 0 + const sourceTypes = String(type).toLowerCase().split(",") + + // Run the search + let occupiedSlot: number | TSlot | null = null + for (let i = 0; i < length; ++i) { + const slot: TSlot & IGenericLinkOrLinks = slots[i] + const destTypes = slot.type == "0" || slot.type == "*" + ? ["0"] + : String(slot.type).toLowerCase().split(",") + + for (const sourceType of sourceTypes) { + // TODO: Remove _event_ entirely. + const source = sourceType == "_event_" ? LiteGraph.EVENT : sourceType + + for (const destType of destTypes) { + const dest = destType == "_event_" ? LiteGraph.EVENT : destType + + if (source == dest || source === "*" || dest === "*") { + if (preferFreeSlot && (slot.links?.length || slot.link != null)) { + // In case we can't find a free slot. + occupiedSlot ??= returnObj ? slot : i + continue + } + return returnObj ? slot : i + } + } + } + } + + return doNotUseOccupied ? -1 : occupiedSlot ?? -1 + } + + /** + * Determines the slot index to connect to when attempting to connect by type. + * @param findInputs If true, searches for an input. Otherwise, an output. + * @param node The node at the other end of the connection. + * @param slotType The type of slot at the other end of the connection. + * @param options Search restrictions to adhere to. + * @see {connectByType} + * @see {connectByTypeOutput} + */ + findConnectByTypeSlot( + findInputs: boolean, + node: LGraphNode, + slotType: ISlotType, + options?: ConnectByTypeOptions, + ): number | undefined { + // LEGACY: Old options names + if (options && typeof options === "object") { + if ("firstFreeIfInputGeneralInCase" in options) options.wildcardToTyped = !!options.firstFreeIfInputGeneralInCase + if ("firstFreeIfOutputGeneralInCase" in options) options.wildcardToTyped = !!options.firstFreeIfOutputGeneralInCase + if ("generalTypeInCase" in options) options.typedToWildcard = !!options.generalTypeInCase + } + const optsDef: ConnectByTypeOptions = { + createEventInCase: true, + wildcardToTyped: true, + typedToWildcard: true, + } + const opts = Object.assign(optsDef, options) + + if (!this.graph) throw new NullGraphError() + + if (node && typeof node === "number") { + const nodeById = this.graph.getNodeById(node) + if (!nodeById) return + + node = nodeById + } + const slot = node.findSlotByType(findInputs, slotType, false, true) + if (slot >= 0 && slot !== null) return slot + + // TODO: Remove or reimpl. events. WILL CREATE THE onTrigger IN SLOT + if (opts.createEventInCase && slotType == LiteGraph.EVENT) { + if (findInputs) return -1 + if (LiteGraph.do_add_triggers_slots) return node.addOnExecutedOutput() + } + + // connect to the first general output slot if not found a specific type and + if (opts.typedToWildcard) { + const generalSlot = node.findSlotByType(findInputs, 0, false, true, true) + if (generalSlot >= 0) return generalSlot + } + // connect to the first free input slot if not found a specific type and this output is general + if ( + opts.wildcardToTyped && + (slotType == 0 || slotType == "*" || slotType == "") + ) { + const opt = { typesNotAccepted: [LiteGraph.EVENT] } + const nonEventSlot = findInputs + ? node.findInputSlotFree(opt) + : node.findOutputSlotFree(opt) + if (nonEventSlot >= 0) return nonEventSlot + } + } + + /** + * Finds the first free output slot with any of the comma-delimited types in {@link type}. + * + * If no slots are free, falls back in order to: + * - The first free wildcard slot + * - The first occupied slot + * - The first occupied wildcard slot + * @param type The {@link ISlotType type} of slot to find + * @returns The index and slot if found, otherwise `undefined`. + */ + findOutputByType(type: ISlotType): { index: number, slot: INodeOutputSlot } | undefined { + return findFreeSlotOfType(this.outputs, type, output => !output.links?.length) + } + + /** + * Finds the first free input slot with any of the comma-delimited types in {@link type}. + * + * If no slots are free, falls back in order to: + * - The first free wildcard slot + * - The first occupied slot + * - The first occupied wildcard slot + * @param type The {@link ISlotType type} of slot to find + * @returns The index and slot if found, otherwise `undefined`. + */ + findInputByType(type: ISlotType): { index: number, slot: INodeInputSlot } | undefined { + return findFreeSlotOfType(this.inputs, type, input => input.link == null) + } + + /** + * connect this node output to the input of another node BY TYPE + * @param slot (could be the number of the slot or the string with the name of the slot) + * @param target_node the target node + * @param target_slotType the input slot type of the target node + * @returns the link_info is created, otherwise null + */ + connectByType( + slot: number | string, + target_node: LGraphNode, + target_slotType: ISlotType, + optsIn?: ConnectByTypeOptions, + ): LLink | null { + const slotIndex = this.findConnectByTypeSlot( + true, + target_node, + target_slotType, + optsIn, + ) + if (slotIndex !== undefined) + return this.connect(slot, target_node, slotIndex, optsIn?.afterRerouteId) + + console.debug("[connectByType]: no way to connect type:", target_slotType, "to node:", target_node) + return null + } + + /** + * connect this node input to the output of another node BY TYPE + * @param slot (could be the number of the slot or the string with the name of the slot) + * @param source_node the target node + * @param source_slotType the output slot type of the target node + * @returns the link_info is created, otherwise null + */ + connectByTypeOutput( + slot: number | string, + source_node: LGraphNode, + source_slotType: ISlotType, + optsIn?: ConnectByTypeOptions, + ): LLink | null { + // LEGACY: Old options names + if (typeof optsIn === "object") { + if ("firstFreeIfInputGeneralInCase" in optsIn) optsIn.wildcardToTyped = !!optsIn.firstFreeIfInputGeneralInCase + if ("generalTypeInCase" in optsIn) optsIn.typedToWildcard = !!optsIn.generalTypeInCase + } + const slotIndex = this.findConnectByTypeSlot( + false, + source_node, + source_slotType, + optsIn, + ) + if (slotIndex !== undefined) + return source_node.connect(slotIndex, this, slot, optsIn?.afterRerouteId) + + console.debug("[connectByType]: no way to connect type:", source_slotType, "to node:", source_node) + return null + } + + canConnectTo( + node: NodeLike, + toSlot: INodeInputSlot | SubgraphIO, + fromSlot: INodeOutputSlot | SubgraphIO, + ) { + return this.id !== node.id && LiteGraph.isValidConnection(fromSlot.type, toSlot.type) + } + + /** + * Connect an output of this node to an input of another node + * @param slot (could be the number of the slot or the string with the name of the slot) + * @param target_node the target node + * @param target_slot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger) + * @returns the link_info is created, otherwise null + */ + connect( + slot: number | string, + target_node: LGraphNode, + target_slot: ISlotType, + afterRerouteId?: RerouteId, + ): LLink | null { + // Allow legacy API support for searching target_slot by string, without mutating the input variables + let targetIndex: number | null + + const { graph, outputs } = this + if (!graph) { + // could be connected before adding it to a graph + // due to link ids being associated with graphs + console.log("Connect: Error, node doesn't belong to any graph. Nodes must be added first to a graph before connecting them.") + return null + } + + // seek for the output slot + if (typeof slot === "string") { + slot = this.findOutputSlot(slot) + if (slot == -1) { + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`) + return null + } + } else if (!outputs || slot >= outputs.length) { + if (LiteGraph.debug) console.log("Connect: Error, slot number not found") + return null + } + + if (target_node && typeof target_node === "number") { + const nodeById = graph.getNodeById(target_node) + if (!nodeById) throw "target node is null" + + target_node = nodeById + } + if (!target_node) throw "target node is null" + + // avoid loopback + if (target_node == this) return null + + // you can specify the slot by name + if (typeof target_slot === "string") { + targetIndex = target_node.findInputSlot(target_slot) + if (targetIndex == -1) { + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${targetIndex}`) + return null + } + } else if (target_slot === LiteGraph.EVENT) { + // TODO: Events + if (LiteGraph.do_add_triggers_slots) { + target_node.changeMode(LGraphEventMode.ON_TRIGGER) + targetIndex = target_node.findInputSlot("onTrigger") + } else { + return null + } + } else if (typeof target_slot === "number") { + targetIndex = target_slot + } else { + targetIndex = 0 + } + + // Allow target node to change slot + if (target_node.onBeforeConnectInput) { + // This way node can choose another slot (or make a new one?) + const requestedIndex = target_node.onBeforeConnectInput(targetIndex, target_slot) + targetIndex = typeof requestedIndex === "number" ? requestedIndex : null + } + + if ( + targetIndex === null || + !target_node.inputs || + targetIndex >= target_node.inputs.length + ) { + if (LiteGraph.debug) console.log("Connect: Error, slot number not found") + return null + } + + const input = target_node.inputs[targetIndex] + const output = outputs[slot] + + if (!output) return null + + if (output.links?.length) { + if (output.type === LiteGraph.EVENT && !LiteGraph.allow_multi_output_for_events) { + graph.beforeChange() + // @ts-expect-error Unused param + this.disconnectOutput(slot, false, { doProcessChange: false }) + } + } + + const link = this.connectSlots(output, target_node, input, afterRerouteId) + return link ?? null + } + + /** + * Connect two slots between two nodes + * @param output The output slot to connect + * @param inputNode The node that the input slot is on + * @param input The input slot to connect + * @param afterRerouteId The reroute ID to use for the link + * @returns The link that was created, or null if the connection was blocked + */ + connectSlots( + output: INodeOutputSlot, + inputNode: LGraphNode, + input: INodeInputSlot, + afterRerouteId: RerouteId | undefined, + ): LLink | null | undefined { + const { graph } = this + if (!graph) throw new NullGraphError() + + const outputIndex = this.outputs.indexOf(output) + if (outputIndex === -1) { + console.warn("connectSlots: output not found") + return + } + const inputIndex = inputNode.inputs.indexOf(input) + if (inputIndex === -1) { + console.warn("connectSlots: input not found") + return + } + + // check targetSlot and check connection types + if (!LiteGraph.isValidConnection(output.type, input.type)) { + this.setDirtyCanvas(false, true) + return null + } + + // Allow nodes to block connection + if (inputNode.onConnectInput?.(inputIndex, output.type, output, this, outputIndex) === false) + return null + if (this.onConnectOutput?.(outputIndex, input.type, input, inputNode, inputIndex) === false) + return null + + // if there is something already plugged there, disconnect + if (inputNode.inputs[inputIndex]?.link != null) { + graph.beforeChange() + inputNode.disconnectInput(inputIndex, true) + } + + const link = new LLink( + ++graph.state.lastLinkId, + input.type || output.type, + this.id, + outputIndex, + inputNode.id, + inputIndex, + afterRerouteId, + ) + + // add to graph links list + graph._links.set(link.id, link) + + // connect in output + output.links ??= [] + output.links.push(link.id) + // connect in input + inputNode.inputs[inputIndex].link = link.id + + // Reroutes + const reroutes = LLink.getReroutes(graph, link) + for (const reroute of reroutes) { + reroute.linkIds.add(link.id) + if (reroute.floating) delete reroute.floating + reroute._dragging = undefined + } + + // If this is the terminus of a floating link, remove it + const lastReroute = reroutes.at(-1) + if (lastReroute) { + for (const linkId of lastReroute.floatingLinkIds) { + const link = graph.floatingLinks.get(linkId) + if (link?.parentId === lastReroute.id) { + graph.removeFloatingLink(link) + } + } + } + graph._version++ + + // link has been created now, so its updated + this.onConnectionsChange?.( + NodeSlotType.OUTPUT, + outputIndex, + true, + link, + output, + ) + + inputNode.onConnectionsChange?.( + NodeSlotType.INPUT, + inputIndex, + true, + link, + input, + ) + + this.setDirtyCanvas(false, true) + graph.afterChange() + + return link + } + + connectFloatingReroute(pos: Point, slot: INodeInputSlot | INodeOutputSlot, afterRerouteId?: RerouteId): Reroute { + const { graph, id } = this + if (!graph) throw new NullGraphError() + + // Assertion: It's either there or it isn't. + const inputIndex = this.inputs.indexOf(slot as INodeInputSlot) + const outputIndex = this.outputs.indexOf(slot as INodeOutputSlot) + if (inputIndex === -1 && outputIndex === -1) throw new Error("Invalid slot") + + const slotType = outputIndex === -1 ? "input" : "output" + + const reroute = graph.setReroute({ + pos, + parentId: afterRerouteId, + linkIds: [], + floating: { slotType }, + }) + + const parentReroute = graph.getReroute(afterRerouteId) + const fromLastFloatingReroute = parentReroute?.floating?.slotType === "output" + + // Adding from an ouput, or a floating reroute that is NOT the tip of an existing floating chain + if (afterRerouteId == null || !fromLastFloatingReroute) { + const link = new LLink( + -1, + slot.type, + outputIndex === -1 ? -1 : id, + outputIndex, + inputIndex === -1 ? -1 : id, + inputIndex, + ) + link.parentId = reroute.id + graph.addFloatingLink(link) + return reroute + } + + // Adding a new floating reroute from the tip of a floating chain. + if (!parentReroute) throw new Error("[connectFloatingReroute] Parent reroute not found") + + const link = parentReroute.getFloatingLinks("output")?.[0] + if (!link) throw new Error("[connectFloatingReroute] Floating link not found") + + reroute.floatingLinkIds.add(link.id) + link.parentId = reroute.id + delete parentReroute.floating + return reroute + } + + /** + * disconnect one output to an specific node + * @param slot (could be the number of the slot or the string with the name of the slot) + * @param target_node the target node to which this slot is connected [Optional, + * if not target_node is specified all nodes will be disconnected] + * @returns if it was disconnected successfully + */ + disconnectOutput(slot: string | number, target_node?: LGraphNode): boolean { + if (typeof slot === "string") { + slot = this.findOutputSlot(slot) + if (slot == -1) { + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`) + return false + } + } else if (!this.outputs || slot >= this.outputs.length) { + if (LiteGraph.debug) console.log("Connect: Error, slot number not found") + return false + } + + // get output slot + const output = this.outputs[slot] + if (!output) return false + + if (output._floatingLinks) { + for (const link of output._floatingLinks) { + if (link.hasOrigin(this.id, slot)) { + this.graph?.removeFloatingLink(link) + } + } + } + + if (!output.links || output.links.length == 0) return false + const { links } = output + + // one of the output links in this slot + const graph = this.graph + if (!graph) throw new NullGraphError() + + if (target_node) { + const target = typeof target_node === "number" + ? graph.getNodeById(target_node) + : target_node + if (!target) throw "Target Node not found" + + for (const [i, link_id] of links.entries()) { + const link_info = graph._links.get(link_id) + if (link_info?.target_id != target.id) continue + + // is the link we are searching for... + // remove here + links.splice(i, 1) + const input = target.inputs[link_info.target_slot] + // remove there + input.link = null + + // remove the link from the links pool + link_info.disconnect(graph, "input") + graph._version++ + + // link_info hasn't been modified so its ok + target.onConnectionsChange?.( + NodeSlotType.INPUT, + link_info.target_slot, + false, + link_info, + input, + ) + this.onConnectionsChange?.( + NodeSlotType.OUTPUT, + slot, + false, + link_info, + output, + ) + + break + } + } else { + // all the links in this output slot + for (const link_id of links) { + const link_info = graph._links.get(link_id) + if (!link_info) continue + + const target = graph.getNodeById(link_info.target_id) + graph._version++ + + if (target) { + const input = target.inputs[link_info.target_slot] + // remove other side link + input.link = null + + // link_info hasn't been modified so its ok + target.onConnectionsChange?.( + NodeSlotType.INPUT, + link_info.target_slot, + false, + link_info, + input, + ) + } + // remove the link from the links pool + link_info.disconnect(graph, "input") + + this.onConnectionsChange?.( + NodeSlotType.OUTPUT, + slot, + false, + link_info, + output, + ) + } + output.links = null + } + + this.setDirtyCanvas(false, true) + return true + } + + /** + * Disconnect one input + * @param slot Input slot index, or the name of the slot + * @param keepReroutes If `true`, reroutes will not be garbage collected. + * @returns true if disconnected successfully or already disconnected, otherwise false + */ + disconnectInput(slot: number | string, keepReroutes?: boolean): boolean { + // Allow search by string + if (typeof slot === "string") { + slot = this.findInputSlot(slot) + if (slot == -1) { + if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`) + return false + } + } else if (!this.inputs || slot >= this.inputs.length) { + if (LiteGraph.debug) { + console.log("Connect: Error, slot number not found") + } + return false + } + + const input = this.inputs[slot] + if (!input) { + console.debug("disconnectInput: input not found", slot, this.inputs) + return false + } + + const { graph } = this + if (!graph) throw new NullGraphError() + + // Break floating links + if (input._floatingLinks?.size) { + for (const link of input._floatingLinks) { + graph.removeFloatingLink(link) + } + } + + const link_id = this.inputs[slot].link + if (link_id != null) { + this.inputs[slot].link = null + + // remove other side + const link_info = graph._links.get(link_id) + if (link_info) { + // Let SubgraphInput do the disconnect. + if (link_info.origin_id === -10 && "inputNode" in graph) { + graph.inputNode._disconnectNodeInput(this, input, link_info) + return true + } + + const target_node = graph.getNodeById(link_info.origin_id) + if (!target_node) { + console.debug("disconnectInput: target node not found", link_info.origin_id) + return false + } + + const output = target_node.outputs[link_info.origin_slot] + if (!(output?.links?.length)) { + console.debug("disconnectInput: output not found", link_info.origin_slot) + return false + } + + // search in the inputs list for this link + let i = 0 + for (const l = output.links.length; i < l; i++) { + if (output.links[i] == link_id) { + output.links.splice(i, 1) + break + } + } + + link_info.disconnect(graph, keepReroutes ? "output" : undefined) + if (graph) graph._version++ + + this.onConnectionsChange?.( + NodeSlotType.INPUT, + slot, + false, + link_info, + input, + ) + target_node.onConnectionsChange?.( + NodeSlotType.OUTPUT, + i, + false, + link_info, + output, + ) + } + } + + this.setDirtyCanvas(false, true) + return true + } + + /** + * @deprecated Use {@link getInputPos} or {@link getOutputPos} instead. + * returns the center of a connection point in canvas coords + * @param is_input true if if a input slot, false if it is an output + * @param slot_number (could be the number of the slot or the string with the name of the slot) + * @param out [optional] a place to store the output, to free garbage + * @returns the position + */ + getConnectionPos(is_input: boolean, slot_number: number, out?: Point): Point { + out ||= new Float32Array(2) + + const { pos: [nodeX, nodeY], inputs, outputs } = this + + if (this.flags.collapsed) { + const w = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH + out[0] = is_input ? nodeX : nodeX + w + out[1] = nodeY - LiteGraph.NODE_TITLE_HEIGHT * 0.5 + return out + } + + // weird feature that never got finished + if (is_input && slot_number == -1) { + out[0] = nodeX + LiteGraph.NODE_TITLE_HEIGHT * 0.5 + out[1] = nodeY + LiteGraph.NODE_TITLE_HEIGHT * 0.5 + return out + } + + // hard-coded pos + const inputPos = inputs?.[slot_number]?.pos + const outputPos = outputs?.[slot_number]?.pos + + if (is_input && inputPos) { + out[0] = nodeX + inputPos[0] + out[1] = nodeY + inputPos[1] + return out + } else if (!is_input && outputPos) { + out[0] = nodeX + outputPos[0] + out[1] = nodeY + outputPos[1] + return out + } + + // default vertical slots + const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 + const slotIndex = is_input + ? this.#defaultVerticalInputs.indexOf(this.inputs[slot_number]) + : this.#defaultVerticalOutputs.indexOf(this.outputs[slot_number]) + + out[0] = is_input + ? nodeX + offset + : nodeX + this.size[0] + 1 - offset + out[1] = + nodeY + + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + + (this.constructor.slot_start_y || 0) + return out + } + + /** + * @internal The inputs that are not positioned with absolute coordinates. + */ + get #defaultVerticalInputs() { + return this.inputs.filter( + slot => !slot.pos && !(this.widgets?.length && isWidgetInputSlot(slot)), + ) + } + + /** + * @internal The outputs that are not positioned with absolute coordinates. + */ + get #defaultVerticalOutputs() { + return this.outputs.filter((slot: INodeOutputSlot) => !slot.pos) + } + + /** + * Gets the position of an input slot, in graph co-ordinates. + * + * This method is preferred over the legacy {@link getConnectionPos} method. + * @param slot Input slot index + * @returns Position of the input slot + */ + getInputPos(slot: number): Point { + return this.getInputSlotPos(this.inputs[slot]) + } + + /** + * Gets the position of an input slot, in graph co-ordinates. + * @param input The actual node input object + * @returns Position of the centre of the input slot in graph co-ordinates. + */ + getInputSlotPos(input: INodeInputSlot): Point { + const { pos: [nodeX, nodeY] } = this + + if (this.flags.collapsed) { + const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5 + return [nodeX, nodeY - halfTitle] + } + + const { pos } = input + if (pos) return [nodeX + pos[0], nodeY + pos[1]] + + // default vertical slots + const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5 + const nodeOffsetY = this.constructor.slot_start_y || 0 + const slotIndex = this.#defaultVerticalInputs.indexOf(input) + const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + + return [nodeX + offsetX, nodeY + slotY + nodeOffsetY] + } + + /** + * Gets the position of an output slot, in graph co-ordinates. + * + * This method is preferred over the legacy {@link getConnectionPos} method. + * @param slot Output slot index + * @returns Position of the output slot + */ + getOutputPos(slot: number): Point { + const { pos: [nodeX, nodeY], outputs, size: [width] } = this + + if (this.flags.collapsed) { + const width = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH + const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5 + return [nodeX + width, nodeY - halfTitle] + } + + const outputPos = outputs?.[slot]?.pos + if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]] + + // default vertical slots + const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5 + const nodeOffsetY = this.constructor.slot_start_y || 0 + const slotIndex = this.#defaultVerticalOutputs.indexOf(this.outputs[slot]) + const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + + // TODO: Why +1? + return [nodeX + width + 1 - offsetX, nodeY + slotY + nodeOffsetY] + } + + /** @inheritdoc */ + snapToGrid(snapTo: number): boolean { + return this.pinned ? false : snapPoint(this.pos, snapTo) + } + + /** @see {@link snapToGrid} */ + alignToGrid(): void { + this.snapToGrid(LiteGraph.CANVAS_GRID_SIZE) + } + + /* Console output */ + trace(msg: string): void { + this.console ||= [] + this.console.push(msg) + // @ts-expect-error deprecated + if (this.console.length > LGraphNode.MAX_CONSOLE) + this.console.shift() + } + + /* Forces to redraw or the main canvas (LGraphNode) or the bg canvas (links) */ + setDirtyCanvas(dirty_foreground: boolean, dirty_background?: boolean): void { + this.graph?.canvasAction(c => c.setDirty(dirty_foreground, dirty_background)) + } + + loadImage(url: string): HTMLImageElement { + interface AsyncImageElement extends HTMLImageElement { ready?: boolean } + + const img: AsyncImageElement = new Image() + img.src = LiteGraph.node_images_path + url + img.ready = false + + const dirty = () => this.setDirtyCanvas(true) + img.addEventListener("load", function (this: AsyncImageElement) { + this.ready = true + dirty() + }) + return img + } + + /** + * Allows to get onMouseMove and onMouseUp events even if the mouse is out of focus + * @deprecated Use {@link LGraphCanvas.pointer} instead. + */ + captureInput(v: boolean): void { + warnDeprecated("[DEPRECATED] captureInput will be removed in a future version. Please use LGraphCanvas.pointer (CanvasPointer) instead.") + if (!this.graph || !this.graph.list_of_graphcanvas) return + + const list = this.graph.list_of_graphcanvas + + for (const c of list) { + // releasing somebody elses capture?! + if (!v && c.node_capturing_input != this) continue + + // change + c.node_capturing_input = v ? this : null + } + } + + get collapsed() { + return !!this.flags.collapsed + } + + get collapsible() { + return !this.pinned && this.constructor.collapsable !== false + } + + /** + * Toggle node collapse (makes it smaller on the canvas) + */ + collapse(force?: boolean): void { + if (!this.collapsible && !force) return + if (!this.graph) throw new NullGraphError() + this.graph._version++ + this.flags.collapsed = !this.flags.collapsed + this.setDirtyCanvas(true, true) + } + + /** + * Toggles advanced mode of the node, showing advanced widgets + */ + toggleAdvanced() { + if (!this.widgets?.some(w => w.advanced)) return + if (!this.graph) throw new NullGraphError() + this.graph._version++ + this.showAdvanced = !this.showAdvanced + this.expandToFitContent() + this.setDirtyCanvas(true, true) + } + + get pinned() { + return !!this.flags.pinned + } + + /** + * Prevents the node being accidentally moved or resized by mouse interaction. + * Toggles pinned state if no value is provided. + */ + pin(v?: boolean): void { + if (!this.graph) throw new NullGraphError() + + this.graph._version++ + this.flags.pinned = v ?? !this.flags.pinned + this.resizable = !this.pinned + // Delete the flag if unpinned, so that we don't get unnecessary + // flags.pinned = false in serialized object. + if (!this.pinned) delete this.flags.pinned + } + + unpin(): void { + this.pin(false) + } + + localToScreen(x: number, y: number, dragAndScale: DragAndScale): Point { + return [ + (x + this.pos[0]) * dragAndScale.scale + dragAndScale.offset[0], + (y + this.pos[1]) * dragAndScale.scale + dragAndScale.offset[1], + ] + } + + get width() { + return this.collapsed + ? this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH + : this.size[0] + } + + /** + * Returns the height of the node, including the title bar. + */ + get height() { + return LiteGraph.NODE_TITLE_HEIGHT + this.bodyHeight + } + + /** + * Returns the height of the node, excluding the title bar. + */ + get bodyHeight() { + return this.collapsed ? 0 : this.size[1] + } + + drawBadges(ctx: CanvasRenderingContext2D, { gap = 2 } = {}): void { + const badgeInstances = this.badges.map(badge => + badge instanceof LGraphBadge ? badge : badge()) + const isLeftAligned = this.badgePosition === BadgePosition.TopLeft + + let currentX = isLeftAligned + ? 0 + : this.width - badgeInstances.reduce((acc, badge) => acc + badge.getWidth(ctx) + gap, 0) + const y = -(LiteGraph.NODE_TITLE_HEIGHT + gap) + + for (const badge of badgeInstances) { + badge.draw(ctx, currentX, y - badge.height) + currentX += badge.getWidth(ctx) + gap + } + } + + /** + * Renders the node's title bar background + */ + drawTitleBarBackground(ctx: CanvasRenderingContext2D, { + scale, + title_height = LiteGraph.NODE_TITLE_HEIGHT, + low_quality = false, + }: DrawTitleOptions): void { + const fgcolor = this.renderingColor + const shape = this.renderingShape + const size = this.renderingSize + + if (this.onDrawTitleBar) { + this.onDrawTitleBar(ctx, title_height, size, scale, fgcolor) + return + } + + if (this.title_mode === TitleMode.TRANSPARENT_TITLE) { + return + } + + if (this.collapsed) { + ctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR + } + + ctx.fillStyle = this.constructor.title_color || fgcolor + ctx.beginPath() + + if (shape == RenderShape.BOX || low_quality) { + ctx.rect(0, -title_height, size[0], title_height) + } else if (shape == RenderShape.ROUND || shape == RenderShape.CARD) { + ctx.roundRect( + 0, + -title_height, + size[0], + title_height, + this.collapsed + ? [LiteGraph.ROUND_RADIUS] + : [LiteGraph.ROUND_RADIUS, LiteGraph.ROUND_RADIUS, 0, 0], + ) + } + ctx.fill() + ctx.shadowColor = "transparent" + } + + /** + * Renders the node's title box, i.e. the dot in front of the title text that + * when clicked toggles the node's collapsed state. The term `title box` comes + * from the original LiteGraph implementation. + */ + drawTitleBox(ctx: CanvasRenderingContext2D, { + scale, + low_quality = false, + title_height = LiteGraph.NODE_TITLE_HEIGHT, + box_size = 10, + }: DrawTitleBoxOptions): void { + const size = this.renderingSize + const shape = this.renderingShape + + if (this.onDrawTitleBox) { + this.onDrawTitleBox(ctx, title_height, size, scale) + return + } + + if ( + [RenderShape.ROUND, RenderShape.CIRCLE, RenderShape.CARD].includes(shape) + ) { + if (low_quality) { + ctx.fillStyle = "black" + ctx.beginPath() + ctx.arc( + title_height * 0.5, + title_height * -0.5, + box_size * 0.5 + 1, + 0, + Math.PI * 2, + ) + ctx.fill() + } + + ctx.fillStyle = this.renderingBoxColor + if (low_quality) { + ctx.fillRect( + title_height * 0.5 - box_size * 0.5, + title_height * -0.5 - box_size * 0.5, + box_size, + box_size, + ) + } else { + ctx.beginPath() + ctx.arc( + title_height * 0.5, + title_height * -0.5, + box_size * 0.5, + 0, + Math.PI * 2, + ) + ctx.fill() + } + } else { + if (low_quality) { + ctx.fillStyle = "black" + ctx.fillRect( + (title_height - box_size) * 0.5 - 1, + (title_height + box_size) * -0.5 - 1, + box_size + 2, + box_size + 2, + ) + } + ctx.fillStyle = this.renderingBoxColor + ctx.fillRect( + (title_height - box_size) * 0.5, + (title_height + box_size) * -0.5, + box_size, + box_size, + ) + } + } + + /** + * Renders the node's title text. + */ + drawTitleText(ctx: CanvasRenderingContext2D, { + scale, + default_title_color, + low_quality = false, + title_height = LiteGraph.NODE_TITLE_HEIGHT, + }: DrawTitleTextOptions): void { + const size = this.renderingSize + const selected = this.selected + + if (this.onDrawTitleText) { + this.onDrawTitleText( + ctx, + title_height, + size, + scale, + this.titleFontStyle, + selected, + ) + return + } + + // Don't render title text if low quality + if (low_quality) { + return + } + + ctx.font = this.titleFontStyle + const rawTitle = this.getTitle() ?? `❌ ${this.type}` + const title = String(rawTitle) + (this.pinned ? "📌" : "") + if (title) { + if (selected) { + ctx.fillStyle = LiteGraph.NODE_SELECTED_TITLE_COLOR + } else { + ctx.fillStyle = this.constructor.title_text_color || default_title_color + } + + // Calculate available width for title + let availableWidth = size[0] - title_height * 2 // Basic margins + + // Subtract space for title buttons + if (this.title_buttons?.length > 0) { + let buttonsWidth = 0 + const savedFont = ctx.font // Save current font + for (const button of this.title_buttons) { + if (button.visible) { + buttonsWidth += button.getWidth(ctx) + 2 // button width + gap + } + } + ctx.font = savedFont // Restore font after button measurements + if (buttonsWidth > 0) { + buttonsWidth += 10 // Extra margin before buttons + availableWidth -= buttonsWidth + } + } + + // Truncate title if needed + let displayTitle = title + + if (this.collapsed) { + // For collapsed nodes, limit to 20 chars as before + displayTitle = title.substr(0, 20) + } else if (availableWidth > 0) { + // For regular nodes, truncate based on available width + displayTitle = truncateText(ctx, title, availableWidth) + } + + ctx.textAlign = "left" + ctx.fillText( + displayTitle, + title_height, + LiteGraph.NODE_TITLE_TEXT_Y - title_height, + ) + } + } + + /** + * Attempts to gracefully bypass this node in all of its connections by reconnecting all links. + * + * Each input is checked against each output. This is done on a matching index basis, i.e. input 3 -> output 3. + * If there are any input links remaining, + * and {@link flags}.{@link INodeFlags.keepAllLinksOnBypass keepAllLinksOnBypass} is `true`, + * each input will check for outputs that match, and take the first one that matches + * `true`: Try the index matching first, then every input to every output. + * `false`: Only matches indexes, e.g. input 3 to output 3. + * + * If {@link flags}.{@link INodeFlags.keepAllLinksOnBypass keepAllLinksOnBypass} is `undefined`, it will fall back to + * the static {@link keepAllLinksOnBypass}. + * @returns `true` if any new links were established, otherwise `false`. + * @todo Decision: Change API to return array of new links instead? + */ + connectInputToOutput(): boolean | undefined { + const { inputs, outputs, graph } = this + if (!inputs || !outputs) return + if (!graph) throw new NullGraphError() + + const { _links } = graph + let madeAnyConnections = false + + // First pass: only match exactly index-to-index + for (const [index, input] of inputs.entries()) { + if (input.link == null) continue + + const output = outputs[index] + if (!output || !LiteGraph.isValidConnection(input.type, output.type)) continue + + const inLink = _links.get(input.link) + if (!inLink) continue + const inNode = graph.getNodeById(inLink?.origin_id) + if (!inNode) continue + + bypassAllLinks(output, inNode, inLink, graph) + } + // Configured to only use index-to-index matching + if (!(this.flags.keepAllLinksOnBypass ?? LGraphNode.keepAllLinksOnBypass)) + return madeAnyConnections + + // Second pass: match any remaining links + for (const input of inputs) { + if (input.link == null) continue + + const inLink = _links.get(input.link) + if (!inLink) continue + const inNode = graph.getNodeById(inLink?.origin_id) + if (!inNode) continue + + for (const output of outputs) { + if (!LiteGraph.isValidConnection(input.type, output.type)) continue + + bypassAllLinks(output, inNode, inLink, graph) + break + } + } + return madeAnyConnections + + function bypassAllLinks(output: INodeOutputSlot, inNode: LGraphNode, inLink: LLink, graph: LGraph) { + const outLinks = output.links + ?.map(x => _links.get(x)) + .filter(x => !!x) + if (!outLinks?.length) return + + for (const outLink of outLinks) { + const outNode = graph.getNodeById(outLink.target_id) + if (!outNode) continue + + const result = inNode.connect( + inLink.origin_slot, + outNode, + outLink.target_slot, + inLink.parentId, + ) + madeAnyConnections ||= !!result + } + } + } + + /** + * Returns `true` if the widget is visible, otherwise `false`. + */ + isWidgetVisible(widget: IBaseWidget): boolean { + const isHidden = ( + this.collapsed || + widget.hidden || + (widget.advanced && !this.showAdvanced) + ) + return !isHidden + } + + drawWidgets(ctx: CanvasRenderingContext2D, { + lowQuality = false, + editorAlpha = 1, + }: DrawWidgetsOptions): void { + if (!this.widgets) return + + const nodeWidth = this.size[0] + const { widgets } = this + const H = LiteGraph.NODE_WIDGET_HEIGHT + const showText = !lowQuality + ctx.save() + ctx.globalAlpha = editorAlpha + + for (const widget of widgets) { + if (!this.isWidgetVisible(widget)) continue + + const { y } = widget + const outlineColour = widget.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR : LiteGraph.WIDGET_OUTLINE_COLOR + + widget.last_y = y + // Disable widget if it is disabled or if the value is passed from socket connection. + widget.computedDisabled = widget.disabled || this.getSlotFromWidget(widget)?.link != null + + ctx.strokeStyle = outlineColour + ctx.fillStyle = "#222" + ctx.textAlign = "left" + if (widget.computedDisabled) ctx.globalAlpha *= 0.5 + const width = widget.width || nodeWidth + + if (typeof widget.draw === "function") { + widget.draw(ctx, this, width, y, H, lowQuality) + } else { + toConcreteWidget(widget, this, false)?.drawWidget(ctx, { width, showText }) + } + ctx.globalAlpha = editorAlpha + } + ctx.restore() + } + + /** + * When {@link LGraphNode.collapsed} is `true`, this method draws the node's collapsed slots. + */ + drawCollapsedSlots(ctx: CanvasRenderingContext2D): void { + // Render the first connected slot only. + for (const slot of this.#concreteInputs) { + if (slot.link != null) { + slot.drawCollapsed(ctx) + break + } + } + for (const slot of this.#concreteOutputs) { + if (slot.links?.length) { + slot.drawCollapsed(ctx) + break + } + } + } + + get slots(): (INodeInputSlot | INodeOutputSlot)[] { + return [...this.inputs, ...this.outputs] + } + + #measureSlot(slot: NodeInputSlot | NodeOutputSlot, slotIndex: number, isInput: boolean): void { + const pos = isInput ? this.getInputPos(slotIndex) : this.getOutputPos(slotIndex) + + slot.boundingRect[0] = pos[0] - LiteGraph.NODE_SLOT_HEIGHT * 0.5 + slot.boundingRect[1] = pos[1] - LiteGraph.NODE_SLOT_HEIGHT * 0.5 + slot.boundingRect[2] = slot.isWidgetInputSlot ? BaseWidget.margin : LiteGraph.NODE_SLOT_HEIGHT + slot.boundingRect[3] = LiteGraph.NODE_SLOT_HEIGHT + } + + #measureSlots(): ReadOnlyRect | null { + const slots: (NodeInputSlot | NodeOutputSlot)[] = [] + + for (const [slotIndex, slot] of this.#concreteInputs.entries()) { + // Unrecognized nodes (Nodes with error) has inputs but no widgets. Treat + // converted inputs as normal inputs. + /** Widget input slots are handled in {@link layoutWidgetInputSlots} */ + if (this.widgets?.length && isWidgetInputSlot(slot)) continue + + this.#measureSlot(slot, slotIndex, true) + slots.push(slot) + } + for (const [slotIndex, slot] of this.#concreteOutputs.entries()) { + this.#measureSlot(slot, slotIndex, false) + slots.push(slot) + } + + return slots.length ? createBounds(slots, 0) : null + } + + #getMouseOverSlot(slot: INodeSlot): INodeSlot | null { + const isInput = isINodeInputSlot(slot) + const mouseOverId = this.mouseOver?.[isInput ? "inputId" : "outputId"] ?? -1 + if (mouseOverId === -1) { + return null + } + return isInput ? this.inputs[mouseOverId] : this.outputs[mouseOverId] + } + + #isMouseOverSlot(slot: INodeSlot): boolean { + return this.#getMouseOverSlot(slot) === slot + } + + #isMouseOverWidget(widget: IBaseWidget | undefined): boolean { + if (!widget) return false + return this.mouseOver?.overWidget === widget + } + + /** + * Returns the input slot that is associated with the given widget. + */ + getSlotFromWidget(widget: IBaseWidget | undefined): INodeInputSlot | undefined { + if (widget) return this.inputs.find(slot => isWidgetInputSlot(slot) && slot.widget.name === widget.name) + } + + /** + * Returns the widget that is associated with the given input slot. + */ + getWidgetFromSlot(slot: INodeInputSlot): IBaseWidget | undefined { + if (!isWidgetInputSlot(slot)) return + return this.widgets?.find(w => w.name === slot.widget.name) + } + + /** + * Draws the node's input and output slots. + */ + drawSlots(ctx: CanvasRenderingContext2D, { + fromSlot, + colorContext, + editorAlpha, + lowQuality, + }: DrawSlotsOptions) { + for (const slot of [...this.#concreteInputs, ...this.#concreteOutputs]) { + const isValidTarget = fromSlot && slot.isValidTarget(fromSlot) + const isMouseOverSlot = this.#isMouseOverSlot(slot) + + // change opacity of incompatible slots when dragging a connection + const isValid = !fromSlot || isValidTarget + const highlight = isValid && isMouseOverSlot + + // Show slot if it's not a widget input slot + // or if it's a widget input slot and satisfies one of the following: + // - the mouse is over the widget + // - the slot is valid during link drop + // - the slot is connected + if ( + isMouseOverSlot || + isValidTarget || + !slot.isWidgetInputSlot || + this.#isMouseOverWidget(this.getWidgetFromSlot(slot)) || + slot.isConnected + ) { + ctx.globalAlpha = isValid ? editorAlpha : 0.4 * editorAlpha + slot.draw(ctx, { + colorContext, + lowQuality, + highlight, + }) + } + } + } + + /** + * Arranges the node's widgets vertically. + * Sets following properties on each widget: + * - {@link IBaseWidget.computedHeight} + * - {@link IBaseWidget.y} + * @param widgetStartY The y-coordinate of the first widget + */ + #arrangeWidgets(widgetStartY: number): void { + if (!this.widgets || !this.widgets.length) return + + const bodyHeight = this.bodyHeight + const startY = this.widgets_start_y ?? ( + (this.widgets_up ? 0 : widgetStartY) + 2 + ) + + let freeSpace = bodyHeight - startY + + // Collect fixed height widgets first + let fixedWidgetHeight = 0 + const growableWidgets: { + minHeight: number + prefHeight?: number + w: IBaseWidget + }[] = [] + + for (const w of this.widgets) { + if (w.computeSize) { + const height = w.computeSize()[1] + 4 + w.computedHeight = height + fixedWidgetHeight += height + } else if (w.computeLayoutSize) { + const { minHeight, maxHeight } = w.computeLayoutSize(this) + growableWidgets.push({ + minHeight, + prefHeight: maxHeight, + w, + }) + } else { + const height = LiteGraph.NODE_WIDGET_HEIGHT + 4 + w.computedHeight = height + fixedWidgetHeight += height + } + } + + // Calculate remaining space for DOM widgets + freeSpace -= fixedWidgetHeight + this.freeWidgetSpace = freeSpace + + // Prepare space requests for distribution + const spaceRequests = growableWidgets.map(d => ({ + minSize: d.minHeight, + maxSize: d.prefHeight, + })) + + // Distribute space among DOM widgets + const allocations = distributeSpace(Math.max(0, freeSpace), spaceRequests) + + // Apply computed heights + for (const [i, d] of growableWidgets.entries()) { + d.w.computedHeight = allocations[i] + } + + // Position widgets + let y = startY + for (const w of this.widgets) { + w.y = y + y += w.computedHeight ?? 0 + } + + if (!this.graph) throw new NullGraphError() + + // Grow the node if necessary. + // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/2652 + // TODO: Move the layout logic before drawing of the node shape, so we don't + // need to trigger extra round of rendering. + if (y > bodyHeight) { + this.setSize([this.size[0], y]) + this.graph.setDirtyCanvas(false, true) + } + } + + /** + * Arranges the layout of the node's widget input slots. + */ + #arrangeWidgetInputSlots(): void { + if (!this.widgets) return + + const slotByWidgetName = new Map() + + for (const [i, slot] of this.inputs.entries()) { + if (!isWidgetInputSlot(slot)) continue + + slotByWidgetName.set(slot.widget.name, { ...slot, index: i }) + } + if (!slotByWidgetName.size) return + + for (const widget of this.widgets) { + const slot = slotByWidgetName.get(widget.name) + if (!slot) continue + + const actualSlot = this.#concreteInputs[slot.index] + const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 + actualSlot.pos = [offset, widget.y + offset] + this.#measureSlot(actualSlot, slot.index, true) + } + } + + /** + * @internal Sets the internal concrete slot arrays, ensuring they are instances of + * {@link NodeInputSlot} or {@link NodeOutputSlot}. + * + * A temporary workaround until duck-typed inputs and outputs + * have been removed from the ecosystem. + */ + _setConcreteSlots(): void { + this.#concreteInputs = this.inputs.map(slot => toClass(NodeInputSlot, slot, this)) + this.#concreteOutputs = this.outputs.map(slot => toClass(NodeOutputSlot, slot, this)) + } + + /** + * Arranges node elements in preparation for rendering (slots & widgets). + */ + arrange(): void { + const slotsBounds = this.#measureSlots() + const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] - this.pos[1] : 0 + this.#arrangeWidgets(widgetStartY) + this.#arrangeWidgetInputSlots() + } + + /** + * Draws a progress bar on the node. + * @param ctx The canvas context to draw on + */ + drawProgressBar(ctx: CanvasRenderingContext2D): void { + if (!this.progress) return + + const originalFillStyle = ctx.fillStyle + ctx.fillStyle = "green" + ctx.fillRect( + 0, + 0, + this.width * this.progress, + 6, + ) + ctx.fillStyle = originalFillStyle + } +} diff --git a/src/lib/litegraph/src/LLink.ts b/src/lib/litegraph/src/LLink.ts new file mode 100644 index 0000000000..c78cd18587 --- /dev/null +++ b/src/lib/litegraph/src/LLink.ts @@ -0,0 +1,446 @@ +import type { + CanvasColour, + INodeInputSlot, + INodeOutputSlot, + ISlotType, + LinkNetwork, + LinkSegment, + ReadonlyLinkNetwork, +} from "./interfaces" +import type { LGraphNode, NodeId } from "./LGraphNode" +import type { Reroute, RerouteId } from "./Reroute" +import type { Serialisable, SerialisableLLink, SubgraphIO } from "./types/serialisation" + +import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from "@/constants" + +import { Subgraph } from "./litegraph" + +export type LinkId = number + +export type SerialisedLLinkArray = [ + id: LinkId, + origin_id: NodeId, + origin_slot: number, + target_id: NodeId, + target_slot: number, + type: ISlotType, +] + +// Resolved connection union; eliminates subgraph in/out as a possibility +export type ResolvedConnection = BaseResolvedConnection & + ( + (ResolvedSubgraphInput & ResolvedNormalOutput) | + (ResolvedNormalInput & ResolvedSubgraphOutput) | + (ResolvedNormalInput & ResolvedNormalOutput) + ) + +interface BaseResolvedConnection { + link: LLink + /** The node on the input side of the link (owns {@link input}) */ + inputNode?: LGraphNode + /** The input the link is connected to (mutually exclusive with {@link subgraphOutput}) */ + input?: INodeInputSlot + /** The node on the output side of the link (owns {@link output}) */ + outputNode?: LGraphNode + /** The output the link is connected to (mutually exclusive with {@link subgraphInput}) */ + output?: INodeOutputSlot + /** The subgraph output the link is connected to (mutually exclusive with {@link input}) */ + subgraphOutput?: SubgraphIO + /** The subgraph input the link is connected to (mutually exclusive with {@link output}) */ + subgraphInput?: SubgraphIO +} + +interface ResolvedNormalInput { + inputNode: LGraphNode | undefined + input: INodeInputSlot | undefined + subgraphOutput?: undefined +} + +interface ResolvedNormalOutput { + outputNode: LGraphNode | undefined + output: INodeOutputSlot | undefined + subgraphInput?: undefined +} + +interface ResolvedSubgraphInput { + inputNode?: undefined + /** The actual input slot the link is connected to (mutually exclusive with {@link subgraphOutput}) */ + input?: undefined + subgraphOutput: SubgraphIO +} + +interface ResolvedSubgraphOutput { + outputNode?: undefined + output?: undefined + subgraphInput: SubgraphIO +} + +type BasicReadonlyNetwork = Pick + +// this is the class in charge of storing link information +export class LLink implements LinkSegment, Serialisable { + static _drawDebug = false + + /** Link ID */ + id: LinkId + parentId?: RerouteId + type: ISlotType + /** Output node ID */ + origin_id: NodeId + /** Output slot index */ + origin_slot: number + /** Input node ID */ + target_id: NodeId + /** Input slot index */ + target_slot: number + + data?: number | string | boolean | { toToolTip?(): string } + _data?: unknown + /** Centre point of the link, calculated during render only - can be inaccurate */ + _pos: Float32Array + /** @todo Clean up - never implemented in comfy. */ + _last_time?: number + /** The last canvas 2D path that was used to render this link */ + path?: Path2D + /** @inheritdoc */ + _centreAngle?: number + + /** @inheritdoc */ + _dragging?: boolean + + #color?: CanvasColour | null + /** Custom colour for this link only */ + public get color(): CanvasColour | null | undefined { + return this.#color + } + + public set color(value: CanvasColour) { + this.#color = value === "" ? null : value + } + + public get isFloatingOutput(): boolean { + return this.origin_id === -1 && this.origin_slot === -1 + } + + public get isFloatingInput(): boolean { + return this.target_id === -1 && this.target_slot === -1 + } + + public get isFloating(): boolean { + return this.isFloatingOutput || this.isFloatingInput + } + + /** `true` if this link is connected to a subgraph input node (the actual origin is in a different graph). */ + get originIsIoNode(): boolean { + return this.origin_id === SUBGRAPH_INPUT_ID + } + + /** `true` if this link is connected to a subgraph output node (the actual target is in a different graph). */ + get targetIsIoNode(): boolean { + return this.target_id === SUBGRAPH_OUTPUT_ID + } + + constructor( + id: LinkId, + type: ISlotType, + origin_id: NodeId, + origin_slot: number, + target_id: NodeId, + target_slot: number, + parentId?: RerouteId, + ) { + this.id = id + this.type = type + this.origin_id = origin_id + this.origin_slot = origin_slot + this.target_id = target_id + this.target_slot = target_slot + this.parentId = parentId + + this._data = null + // center + this._pos = new Float32Array(2) + } + + /** @deprecated Use {@link LLink.create} */ + static createFromArray(data: SerialisedLLinkArray): LLink { + return new LLink(data[0], data[5], data[1], data[2], data[3], data[4]) + } + + /** + * LLink static factory: creates a new LLink from the provided data. + * @param data Serialised LLink data to create the link from + * @returns A new LLink + */ + static create(data: SerialisableLLink): LLink { + return new LLink( + data.id, + data.type, + data.origin_id, + data.origin_slot, + data.target_id, + data.target_slot, + data.parentId, + ) + } + + /** + * Gets all reroutes from the output slot to this segment. If this segment is a reroute, it will not be included. + * @returns An ordered array of all reroutes from the node output to + * this reroute or the reroute before it. Otherwise, an empty array. + */ + static getReroutes( + network: Pick, + linkSegment: LinkSegment, + ): Reroute[] { + if (!linkSegment.parentId) return [] + return network.reroutes + .get(linkSegment.parentId) + ?.getReroutes() ?? [] + } + + static getFirstReroute( + network: Pick, + linkSegment: LinkSegment, + ): Reroute | undefined { + return LLink.getReroutes(network, linkSegment).at(0) + } + + /** + * Finds the reroute in the chain after the provided reroute ID. + * @param network The network this link belongs to + * @param linkSegment The starting point of the search (input side). + * Typically the LLink object itself, but can be any link segment. + * @param rerouteId The matching reroute will have this set as its {@link parentId}. + * @returns The reroute that was found, `undefined` if no reroute was found, or `null` if an infinite loop was detected. + */ + static findNextReroute( + network: Pick, + linkSegment: LinkSegment, + rerouteId: RerouteId, + ): Reroute | null | undefined { + if (!linkSegment.parentId) return + return network.reroutes + .get(linkSegment.parentId) + ?.findNextReroute(rerouteId) + } + + /** + * Gets the origin node of a link. + * @param network The network to search + * @param linkId The ID of the link to get the origin node of + * @returns The origin node of the link, or `undefined` if the link is not found or the origin node is not found + */ + static getOriginNode(network: BasicReadonlyNetwork, linkId: LinkId): LGraphNode | undefined { + const id = network.links.get(linkId)?.origin_id + return network.getNodeById(id) ?? undefined + } + + /** + * Gets the target node of a link. + * @param network The network to search + * @param linkId The ID of the link to get the target node of + * @returns The target node of the link, or `undefined` if the link is not found or the target node is not found + */ + static getTargetNode(network: BasicReadonlyNetwork, linkId: LinkId): LGraphNode | undefined { + const id = network.links.get(linkId)?.target_id + return network.getNodeById(id) ?? undefined + } + + /** + * Resolves a link ID to the link, node, and slot objects. + * @param linkId The {@link id} of the link to resolve + * @param network The link network to search + * @returns An object containing the input and output nodes, as well as the input and output slots. + * @remarks This method is heavier than others; it will always resolve all objects. + * Whilst the performance difference should in most cases be negligible, + * it is recommended to use simpler methods where appropriate. + */ + static resolve(linkId: LinkId | null | undefined, network: BasicReadonlyNetwork): ResolvedConnection | undefined { + return network.getLink(linkId)?.resolve(network) + } + + /** + * Resolves a list of link IDs to the link, node, and slot objects. + * Discards invalid link IDs. + * @param linkIds An iterable of link {@link id}s to resolve + * @param network The link network to search + * @returns An array of resolved connections. If a link is not found, it is not included in the array. + * @see {@link LLink.resolve} + */ + static resolveMany(linkIds: Iterable, network: BasicReadonlyNetwork): ResolvedConnection[] { + const resolved: ResolvedConnection[] = [] + for (const id of linkIds) { + const r = network.getLink(id)?.resolve(network) + if (r) resolved.push(r) + } + return resolved + } + + /** + * Resolves the primitive ID values stored in the link to the referenced objects. + * @param network The link network to search + * @returns An object containing the input and output nodes, as well as the input and output slots. + * @remarks This method is heavier than others; it will always resolve all objects. + * Whilst the performance difference should in most cases be negligible, + * it is recommended to use simpler methods where appropriate. + */ + resolve(network: BasicReadonlyNetwork): ResolvedConnection { + const inputNode = this.target_id === -1 ? undefined : network.getNodeById(this.target_id) ?? undefined + const input = inputNode?.inputs[this.target_slot] + const subgraphInput = this.originIsIoNode ? network.inputNode?.slots[this.origin_slot] : undefined + if (subgraphInput) { + return { inputNode, input, subgraphInput, link: this } + } + + const outputNode = this.origin_id === -1 ? undefined : network.getNodeById(this.origin_id) ?? undefined + const output = outputNode?.outputs[this.origin_slot] + const subgraphOutput = this.targetIsIoNode ? network.outputNode?.slots[this.target_slot] : undefined + if (subgraphOutput) { + return { outputNode, output, subgraphInput: undefined, subgraphOutput, link: this } + } + + return { inputNode, outputNode, input, output, subgraphInput, subgraphOutput, link: this } + } + + configure(o: LLink | SerialisedLLinkArray) { + if (Array.isArray(o)) { + this.id = o[0] + this.origin_id = o[1] + this.origin_slot = o[2] + this.target_id = o[3] + this.target_slot = o[4] + this.type = o[5] + } else { + this.id = o.id + this.type = o.type + this.origin_id = o.origin_id + this.origin_slot = o.origin_slot + this.target_id = o.target_id + this.target_slot = o.target_slot + this.parentId = o.parentId + } + } + + /** + * Checks if the specified node id and output index are this link's origin (output side). + * @param nodeId ID of the node to check + * @param outputIndex The array index of the node output + * @returns `true` if the origin matches, otherwise `false`. + */ + hasOrigin(nodeId: NodeId, outputIndex: number): boolean { + return this.origin_id === nodeId && this.origin_slot === outputIndex + } + + /** + * Checks if the specified node id and input index are this link's target (input side). + * @param nodeId ID of the node to check + * @param inputIndex The array index of the node input + * @returns `true` if the target matches, otherwise `false`. + */ + hasTarget(nodeId: NodeId, inputIndex: number): boolean { + return this.target_id === nodeId && this.target_slot === inputIndex + } + + /** + * Creates a floating link from this link. + * @param slotType The side of the link that is still connected + * @param parentId The parent reroute ID of the link + * @returns A new LLink that is floating + */ + toFloating(slotType: "input" | "output", parentId: RerouteId): LLink { + const exported = this.asSerialisable() + exported.id = -1 + exported.parentId = parentId + + if (slotType === "input") { + exported.origin_id = -1 + exported.origin_slot = -1 + } else { + exported.target_id = -1 + exported.target_slot = -1 + } + + return LLink.create(exported) + } + + /** + * Disconnects a link and removes it from the graph, cleaning up any reroutes that are no longer used + * @param network The container (LGraph) where reroutes should be updated + * @param keepReroutes If `undefined`, reroutes will be automatically removed if no links remain. + * If `input` or `output`, reroutes will not be automatically removed, and retain a connection to the input or output, respectively. + */ + disconnect(network: LinkNetwork, keepReroutes?: "input" | "output"): void { + const reroutes = LLink.getReroutes(network, this) + + const lastReroute = reroutes.at(-1) + + // When floating from output, 1-to-1 ratio of floating link to final reroute (tree-like) + const outputFloating = keepReroutes === "output" && + lastReroute?.linkIds.size === 1 && + lastReroute.floatingLinkIds.size === 0 + + // When floating from inputs, the final (input side) reroute may have many floating links + if (outputFloating || (keepReroutes === "input" && lastReroute)) { + const newLink = LLink.create(this) + newLink.id = -1 + + if (keepReroutes === "input") { + newLink.origin_id = -1 + newLink.origin_slot = -1 + + lastReroute.floating = { slotType: "input" } + } else { + newLink.target_id = -1 + newLink.target_slot = -1 + + lastReroute.floating = { slotType: "output" } + } + + network.addFloatingLink(newLink) + } + + for (const reroute of reroutes) { + reroute.linkIds.delete(this.id) + if (!keepReroutes && !reroute.totalLinks) { + network.reroutes.delete(reroute.id) + } + } + network.links.delete(this.id) + + if (this.originIsIoNode && network instanceof Subgraph) { + const subgraphInput = network.inputs.at(this.origin_slot) + if (!subgraphInput) throw new Error("Invalid link - subgraph input not found") + + subgraphInput.events.dispatch("input-disconnected", { input: subgraphInput }) + } + } + + /** + * @deprecated Prefer {@link LLink.asSerialisable} (returns an object, not an array) + * @returns An array representing this LLink + */ + serialize(): SerialisedLLinkArray { + return [ + this.id, + this.origin_id, + this.origin_slot, + this.target_id, + this.target_slot, + this.type, + ] + } + + asSerialisable(): SerialisableLLink { + const copy: SerialisableLLink = { + id: this.id, + origin_id: this.origin_id, + origin_slot: this.origin_slot, + target_id: this.target_id, + target_slot: this.target_slot, + type: this.type, + } + if (this.parentId) copy.parentId = this.parentId + return copy + } +} diff --git a/src/lib/litegraph/src/LiteGraphGlobal.ts b/src/lib/litegraph/src/LiteGraphGlobal.ts new file mode 100644 index 0000000000..c930a39ebe --- /dev/null +++ b/src/lib/litegraph/src/LiteGraphGlobal.ts @@ -0,0 +1,922 @@ +import type { Dictionary, ISlotType, Rect, WhenNullish } from "./interfaces" + +import { InputIndicators } from "./canvas/InputIndicators" +import { ContextMenu } from "./ContextMenu" +import { CurveEditor } from "./CurveEditor" +import { DragAndScale } from "./DragAndScale" +import { LabelPosition, SlotDirection, SlotShape, SlotType } from "./draw" +import { Rectangle } from "./infrastructure/Rectangle" +import { LGraph } from "./LGraph" +import { LGraphCanvas } from "./LGraphCanvas" +import { LGraphGroup } from "./LGraphGroup" +import { LGraphNode } from "./LGraphNode" +import { LLink } from "./LLink" +import { distance, isInsideRectangle, overlapBounding } from "./measure" +import { Reroute } from "./Reroute" +import { SubgraphIONodeBase } from "./subgraph/SubgraphIONodeBase" +import { SubgraphSlot } from "./subgraph/SubgraphSlotBase" +import { + LGraphEventMode, + LinkDirection, + LinkRenderType, + NodeSlotType, + RenderShape, + TitleMode, +} from "./types/globalEnums" +import { createUuidv4 } from "./utils/uuid" + +/** + * The Global Scope. It contains all the registered node classes. + */ +export class LiteGraphGlobal { + // Enums + SlotShape = SlotShape + SlotDirection = SlotDirection + SlotType = SlotType + LabelPosition = LabelPosition + + /** Used in serialised graphs at one point. */ + VERSION = 0.4 as const + + CANVAS_GRID_SIZE = 10 + + NODE_TITLE_HEIGHT = 30 + NODE_TITLE_TEXT_Y = 20 + NODE_SLOT_HEIGHT = 20 + NODE_WIDGET_HEIGHT = 20 + NODE_WIDTH = 140 + NODE_MIN_WIDTH = 50 + NODE_COLLAPSED_RADIUS = 10 + NODE_COLLAPSED_WIDTH = 80 + NODE_TITLE_COLOR = "#999" + NODE_SELECTED_TITLE_COLOR = "#FFF" + NODE_TEXT_SIZE = 14 + NODE_TEXT_COLOR = "#AAA" + NODE_TEXT_HIGHLIGHT_COLOR = "#EEE" + NODE_SUBTEXT_SIZE = 12 + NODE_DEFAULT_COLOR = "#333" + NODE_DEFAULT_BGCOLOR = "#353535" + NODE_DEFAULT_BOXCOLOR = "#666" + NODE_DEFAULT_SHAPE = RenderShape.ROUND + NODE_BOX_OUTLINE_COLOR = "#FFF" + NODE_ERROR_COLOUR = "#E00" + NODE_FONT = "Arial" + + DEFAULT_FONT = "Arial" + DEFAULT_SHADOW_COLOR = "rgba(0,0,0,0.5)" + + DEFAULT_GROUP_FONT = 24 + DEFAULT_GROUP_FONT_SIZE?: any + GROUP_FONT = "Arial" + + WIDGET_BGCOLOR = "#222" + WIDGET_OUTLINE_COLOR = "#666" + WIDGET_ADVANCED_OUTLINE_COLOR = "rgba(56, 139, 253, 0.8)" + WIDGET_TEXT_COLOR = "#DDD" + WIDGET_SECONDARY_TEXT_COLOR = "#999" + WIDGET_DISABLED_TEXT_COLOR = "#666" + + LINK_COLOR = "#9A9" + EVENT_LINK_COLOR = "#A86" + CONNECTING_LINK_COLOR = "#AFA" + + /** avoid infinite loops */ + MAX_NUMBER_OF_NODES = 10_000 + /** default node position */ + DEFAULT_POSITION = [100, 100] + /** ,"circle" */ + VALID_SHAPES = ["default", "box", "round", "card"] satisfies ("default" | Lowercase)[] + ROUND_RADIUS = 8 + + // shapes are used for nodes but also for slots + BOX_SHAPE = RenderShape.BOX + ROUND_SHAPE = RenderShape.ROUND + CIRCLE_SHAPE = RenderShape.CIRCLE + CARD_SHAPE = RenderShape.CARD + ARROW_SHAPE = RenderShape.ARROW + /** intended for slot arrays */ + GRID_SHAPE = RenderShape.GRID + + // enums + INPUT = NodeSlotType.INPUT + OUTPUT = NodeSlotType.OUTPUT + + // TODO: -1 can lead to ambiguity in JS; these should be updated to a more explicit constant or Symbol. + /** for outputs */ + EVENT = -1 as const + /** for inputs */ + ACTION = -1 as const + + /** helper, will add "On Request" and more in the future */ + NODE_MODES = ["Always", "On Event", "Never", "On Trigger"] + /** use with node_box_coloured_by_mode */ + NODE_MODES_COLORS = ["#666", "#422", "#333", "#224", "#626"] + ALWAYS = LGraphEventMode.ALWAYS + ON_EVENT = LGraphEventMode.ON_EVENT + NEVER = LGraphEventMode.NEVER + ON_TRIGGER = LGraphEventMode.ON_TRIGGER + + UP = LinkDirection.UP + DOWN = LinkDirection.DOWN + LEFT = LinkDirection.LEFT + RIGHT = LinkDirection.RIGHT + CENTER = LinkDirection.CENTER + + /** helper */ + LINK_RENDER_MODES = ["Straight", "Linear", "Spline"] + HIDDEN_LINK = LinkRenderType.HIDDEN_LINK + STRAIGHT_LINK = LinkRenderType.STRAIGHT_LINK + LINEAR_LINK = LinkRenderType.LINEAR_LINK + SPLINE_LINK = LinkRenderType.SPLINE_LINK + + NORMAL_TITLE = TitleMode.NORMAL_TITLE + NO_TITLE = TitleMode.NO_TITLE + TRANSPARENT_TITLE = TitleMode.TRANSPARENT_TITLE + AUTOHIDE_TITLE = TitleMode.AUTOHIDE_TITLE + + /** arrange nodes vertically */ + VERTICAL_LAYOUT = "vertical" + + /** used to redirect calls */ + proxy = null + node_images_path = "" + + debug = false + catch_exceptions = true + throw_errors = true + /** if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration), which could lead to exploits */ + allow_scripts = false + /** nodetypes by string */ + registered_node_types: Record = {} + /** @deprecated used for dropping files in the canvas. It appears the code that enables this was removed, but the object remains and is references by built-in drag drop. */ + node_types_by_file_extension: Record = {} + /** node types by classname */ + Nodes: Record = {} + /** used to store vars between graphs */ + Globals = {} + + /** @deprecated Unused and will be deleted. */ + searchbox_extras: Dictionary = {} + + /** [true!] this make the nodes box (top left circle) coloured when triggered (execute/action), visual feedback */ + node_box_coloured_when_on = false + /** [true!] nodebox based on node mode, visual feedback */ + node_box_coloured_by_mode = false + + /** [false on mobile] better true if not touch device, TODO add an helper/listener to close if false */ + dialog_close_on_mouse_leave = false + dialog_close_on_mouse_leave_delay = 500 + + /** [false!] prefer false if results too easy to break links - implement with ALT or TODO custom keys */ + shift_click_do_break_link_from = false + /** [false!]prefer false, way too easy to break links */ + click_do_break_link_to = false + /** [true!] who accidentally ctrl-alt-clicks on an in/output? nobody! that's who! */ + ctrl_alt_click_do_break_link = true + /** [true!] snaps links when dragging connections over valid targets */ + snaps_for_comfy = true + /** [true!] renders a partial border to highlight when a dragged link is snapped to a node */ + snap_highlights_node = true + + /** + * If `true`, items always snap to the grid - modifier keys are ignored. + * When {@link snapToGrid} is falsy, a value of `1` is used. + * Default: `false` + */ + alwaysSnapToGrid?: boolean + + /** + * When set to a positive number, when nodes are moved their positions will + * be rounded to the nearest multiple of this value. Half up. + * Default: `undefined` + * @todo Not implemented - see {@link LiteGraph.CANVAS_GRID_SIZE} + */ + snapToGrid?: number + + /** [false on mobile] better true if not touch device, TODO add an helper/listener to close if false */ + search_hide_on_mouse_leave = true + /** + * [true!] enable filtering slots type in the search widget + * !requires auto_load_slot_types or manual set registered_slot_[in/out]_types and slot_types_[in/out] + */ + search_filter_enabled = false + /** [true!] opens the results list when opening the search widget */ + search_show_all_on_open = true + + /** + * [if want false, use true, run, get vars values to be statically set, than disable] + * nodes types and nodeclass association with node types need to be calculated, + * if dont want this, calculate once and set registered_slot_[in/out]_types and slot_types_[in/out] + */ + auto_load_slot_types = false + + // set these values if not using auto_load_slot_types + /** slot types for nodeclass */ + registered_slot_in_types: Record = {} + /** slot types for nodeclass */ + registered_slot_out_types: Record = {} + /** slot types IN */ + slot_types_in: string[] = [] + /** slot types OUT */ + slot_types_out: string[] = [] + /** + * specify for each IN slot type a(/many) default node(s), use single string, array, or object + * (with node, title, parameters, ..) like for search + */ + slot_types_default_in: Record = {} + /** + * specify for each OUT slot type a(/many) default node(s), use single string, array, or object + * (with node, title, parameters, ..) like for search + */ + slot_types_default_out: Record = {} + + /** [true!] very handy, ALT click to clone and drag the new node */ + alt_drag_do_clone_nodes = false + + /** + * [true!] will create and connect event slots when using action/events connections, + * !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this + */ + do_add_triggers_slots = false + + /** [false!] being events, it is strongly reccomended to use them sequentially, one by one */ + allow_multi_output_for_events = true + + /** [true!] allows to create and connect a ndoe clicking with the third button (wheel) */ + middle_click_slot_add_default_node = false + + /** [true!] dragging a link to empty space will open a menu, add from list, search or defaults */ + release_link_on_empty_shows_menu = false + + /** "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now) */ + pointerevents_method = "pointer" + + /** + * [true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected + * with the inputs of the newly pasted nodes + */ + ctrl_shift_v_paste_connect_unselected_outputs = true + + // if true, all newly created nodes/links will use string UUIDs for their id fields instead of integers. + // use this if you must have node IDs that are unique across all graphs and subgraphs. + use_uuids = false + + // Whether to highlight the bounding box of selected groups + highlight_selected_group = true + + /** Whether to scale context with the graph when zooming in. Zooming out never makes context menus smaller. */ + context_menu_scaling = false + + /** + * Debugging flag. Repeats deprecation warnings every time they are reported. + * May impact performance. + */ + alwaysRepeatWarnings: boolean = false + + /** + * Array of callbacks to execute when Litegraph first reports a deprecated API being used. + * @see alwaysRepeatWarnings By default, will not repeat identical messages. + */ + onDeprecationWarning: ((message: string, source?: object) => void)[] = [console.warn] + + /** + * If `true`, mouse wheel events will be interpreted as trackpad gestures. + * Tested on MacBook M4 Pro. + * @default false + * @see macGesturesRequireMac + */ + macTrackpadGestures: boolean = false + + /** + * If both this setting and {@link macTrackpadGestures} are `true`, trackpad gestures will + * only be enabled when the browser user agent includes "Mac". + * @default true + * @see macTrackpadGestures + */ + macGesturesRequireMac: boolean = true + + /** + * "standard": change the dragging on left mouse button click to select, enable middle-click or spacebar+left-click dragging + * "legacy": Enable dragging on left-click (original behavior) + * @default "legacy" + */ + canvasNavigationMode: "standard" | "legacy" = "legacy" + + /** + * If `true`, widget labels and values will both be truncated (proportionally to size), + * until they fit within the widget. + * + * Otherwise, the label will be truncated completely before the value is truncated. + * @default false + */ + truncateWidgetTextEvenly: boolean = false + + /** + * If `true`, widget values will be completely truncated when shrinking a widget, + * before truncating widget labels. {@link truncateWidgetTextEvenly} must be `false`. + * @default false + */ + truncateWidgetValuesFirst: boolean = false + + /** + * If `true`, the current viewport scale & offset of the first attached canvas will be included with the graph when exporting. + * @default true + */ + saveViewportWithGraph: boolean = true + + // TODO: Remove legacy accessors + LGraph = LGraph + LLink = LLink + LGraphNode = LGraphNode + LGraphGroup = LGraphGroup + DragAndScale = DragAndScale + LGraphCanvas = LGraphCanvas + ContextMenu = ContextMenu + CurveEditor = CurveEditor + Reroute = Reroute + + constructor() { + Object.defineProperty(this, "Classes", { writable: false }) + } + + Classes = { + get SubgraphSlot() { return SubgraphSlot }, + get SubgraphIONodeBase() { return SubgraphIONodeBase }, + + // Rich drawing + get Rectangle() { return Rectangle }, + + // Debug / helpers + get InputIndicators() { return InputIndicators }, + } + + onNodeTypeRegistered?(type: string, base_class: typeof LGraphNode): void + onNodeTypeReplaced?(type: string, base_class: typeof LGraphNode, prev: unknown): void + + /** + * Register a node class so it can be listed when the user wants to create a new one + * @param type name of the node and path + * @param base_class class containing the structure of a node + */ + registerNodeType(type: string, base_class: typeof LGraphNode): void { + if (!base_class.prototype) + throw "Cannot register a simple object, it must be a class with a prototype" + base_class.type = type + + if (this.debug) console.log("Node registered:", type) + + const classname = base_class.name + + const pos = type.lastIndexOf("/") + base_class.category = type.substring(0, pos) + + base_class.title ||= classname + + // extend class + for (const i in LGraphNode.prototype) { + // @ts-expect-error #576 This functionality is deprecated and should be removed. + base_class.prototype[i] ||= LGraphNode.prototype[i] + } + + const prev = this.registered_node_types[type] + if (prev && this.debug) { + console.log("replacing node type:", type) + } + + this.registered_node_types[type] = base_class + if (base_class.constructor.name) this.Nodes[classname] = base_class + + this.onNodeTypeRegistered?.(type, base_class) + if (prev) this.onNodeTypeReplaced?.(type, base_class, prev) + + // warnings + if (base_class.prototype.onPropertyChange) + console.warn(`LiteGraph node class ${type} has onPropertyChange method, it must be called onPropertyChanged with d at the end`) + + // TODO one would want to know input and ouput :: this would allow through registerNodeAndSlotType to get all the slots types + if (this.auto_load_slot_types) new base_class(base_class.title || "tmpnode") + } + + /** + * removes a node type from the system + * @param type name of the node or the node constructor itself + */ + unregisterNodeType(type: string | typeof LGraphNode): void { + const base_class = typeof type === "string" + ? this.registered_node_types[type] + : type + if (!base_class) throw `node type not found: ${String(type)}` + + delete this.registered_node_types[String(base_class.type)] + + const name = base_class.constructor.name + if (name) delete this.Nodes[name] + } + + /** + * Save a slot type and his node + * @param type name of the node or the node constructor itself + * @param slot_type name of the slot type (variable type), eg. string, number, array, boolean, .. + */ + registerNodeAndSlotType( + type: LGraphNode, + slot_type: ISlotType, + out?: boolean, + ): void { + out ||= false + // @ts-expect-error Confirm this function no longer supports string types - base_class should always be an instance not a constructor. + const base_class = typeof type === "string" && this.registered_node_types[type] !== "anonymous" + ? this.registered_node_types[type] + : type + + // @ts-expect-error Confirm this function no longer supports string types - base_class should always be an instance not a constructor. + const class_type = base_class.constructor.type + + let allTypes = [] + if (typeof slot_type === "string") { + allTypes = slot_type.split(",") + } else if (slot_type == this.EVENT || slot_type == this.ACTION) { + allTypes = ["_event_"] + } else { + allTypes = ["*"] + } + + for (let slotType of allTypes) { + if (slotType === "") slotType = "*" + + const register = out + ? this.registered_slot_out_types + : this.registered_slot_in_types + register[slotType] ??= { nodes: [] } + + const { nodes } = register[slotType] + if (!nodes.includes(class_type)) nodes.push(class_type) + + // check if is a new type + const types = out + ? this.slot_types_out + : this.slot_types_in + const type = slotType.toLowerCase() + + if (!types.includes(type)) { + types.push(type) + types.sort() + } + } + } + + /** + * Removes all previously registered node's types + */ + clearRegisteredTypes(): void { + this.registered_node_types = {} + this.node_types_by_file_extension = {} + this.Nodes = {} + this.searchbox_extras = {} + } + + /** + * Create a node of a given type with a name. The node is not attached to any graph yet. + * @param type full name of the node class. p.e. "math/sin" + * @param title a name to distinguish from other nodes + * @param options to set options + */ + createNode( + type: string, + title?: string, + options?: Dictionary, + ): LGraphNode | null { + const base_class = this.registered_node_types[type] + if (!base_class) { + if (this.debug) console.log(`GraphNode type "${type}" not registered.`) + return null + } + + title = title || base_class.title || type + + let node = null + + if (this.catch_exceptions) { + try { + node = new base_class(title) + } catch (error) { + console.error(error) + return null + } + } else { + node = new base_class(title) + } + + node.type = type + + if (!node.title && title) node.title = title + node.properties ||= {} + node.properties_info ||= [] + node.flags ||= {} + // call onresize? + node.size ||= node.computeSize() + node.pos ||= [this.DEFAULT_POSITION[0], this.DEFAULT_POSITION[1]] + node.mode ||= LGraphEventMode.ALWAYS + + // extra options + if (options) { + for (const i in options) { + // @ts-expect-error #577 Requires interface + node[i] = options[i] + } + } + + // callback + node.onNodeCreated?.() + return node + } + + /** + * Returns a registered node type with a given name + * @param type full name of the node class. p.e. "math/sin" + * @returns the node class + */ + getNodeType(type: string): typeof LGraphNode { + return this.registered_node_types[type] + } + + /** + * Returns a list of node types matching one category + * @param category category name + * @returns array with all the node classes + */ + getNodeTypesInCategory(category: string, filter?: string) { + const r = [] + for (const i in this.registered_node_types) { + const type = this.registered_node_types[i] + if (type.filter != filter) continue + + if (category == "") { + if (type.category == null) r.push(type) + } else if (type.category == category) { + r.push(type) + } + } + + return r + } + + /** + * Returns a list with all the node type categories + * @param filter only nodes with ctor.filter equal can be shown + * @returns array with all the names of the categories + */ + getNodeTypesCategories(filter?: string): string[] { + const categories: Dictionary = { "": 1 } + for (const i in this.registered_node_types) { + const type = this.registered_node_types[i] + if (type.category && !type.skip_list) { + if (type.filter != filter) continue + + categories[type.category] = 1 + } + } + const result = [] + for (const i in categories) { + result.push(i) + } + return result + } + + // debug purposes: reloads all the js scripts that matches a wildcard + reloadNodes(folder_wildcard: string): void { + const tmp = document.getElementsByTagName("script") + // weird, this array changes by its own, so we use a copy + const script_files = [] + for (const element of tmp) { + script_files.push(element) + } + + const docHeadObj = document.getElementsByTagName("head")[0] + folder_wildcard = document.location.href + folder_wildcard + + for (const script_file of script_files) { + const src = script_file.src + if (!src || src.substr(0, folder_wildcard.length) != folder_wildcard) + continue + + try { + if (this.debug) console.log("Reloading:", src) + const dynamicScript = document.createElement("script") + dynamicScript.type = "text/javascript" + dynamicScript.src = src + docHeadObj.append(dynamicScript) + script_file.remove() + } catch (error) { + if (this.throw_errors) throw error + if (this.debug) console.log("Error while reloading", src) + } + } + + if (this.debug) console.log("Nodes reloaded") + } + + // separated just to improve if it doesn't work + /** @deprecated Prefer {@link structuredClone} */ + cloneObject(obj: T, target?: T): WhenNullish { + if (obj == null) return null as WhenNullish + + const r = JSON.parse(JSON.stringify(obj)) + if (!target) return r + + for (const i in r) { + // @ts-expect-error deprecated + target[i] = r[i] + } + return target + } + + /** @see {@link createUuidv4} @inheritdoc */ + uuidv4 = createUuidv4 + + /** + * Returns if the types of two slots are compatible (taking into account wildcards, etc) + * @param type_a output + * @param type_b input + * @returns true if they can be connected + */ + isValidConnection(type_a: ISlotType, type_b: ISlotType): boolean { + if (type_a == "" || type_a === "*") type_a = 0 + if (type_b == "" || type_b === "*") type_b = 0 + // If generic in/output, matching types (valid for triggers), or event/action types + if ( + !type_a || + !type_b || + type_a == type_b || + (type_a == this.EVENT && type_b == this.ACTION) + ) { + return true + } + + // Enforce string type to handle toLowerCase call (-1 number not ok) + type_a = String(type_a) + type_b = String(type_b) + type_a = type_a.toLowerCase() + type_b = type_b.toLowerCase() + + // For nodes supporting multiple connection types + if (!type_a.includes(",") && !type_b.includes(",")) + return type_a == type_b + + // Check all permutations to see if one is valid + const supported_types_a = type_a.split(",") + const supported_types_b = type_b.split(",") + for (const a of supported_types_a) { + for (const b of supported_types_b) { + if (this.isValidConnection(a, b)) + return true + } + } + + return false + } + + // used to create nodes from wrapping functions + getParameterNames(func: (...args: any) => any): string[] { + return String(func) + .replaceAll(/\/\/.*$/gm, "") // strip single-line comments + .replaceAll(/\s+/g, "") // strip white space + .replaceAll(/\/\*[^*/]*\*\//g, "") // strip multi-line comments /**/ + .split("){", 1)[0] + .replace(/^[^(]*\(/, "") // extract the parameters + .replaceAll(/=[^,]+/g, "") // strip any ES6 defaults + .split(",") + .filter(Boolean) // split & filter [""] + } + + /* helper for interaction: pointer, touch, mouse Listeners + used by LGraphCanvas DragAndScale ContextMenu */ + pointerListenerAdd(oDOM: Node, sEvIn: string, fCall: (e: Event) => boolean | void, capture = false): void { + if (!oDOM || !oDOM.addEventListener || !sEvIn || typeof fCall !== "function") return + + let sMethod = this.pointerevents_method + let sEvent = sEvIn + + // UNDER CONSTRUCTION + // convert pointerevents to touch event when not available + if (sMethod == "pointer" && !window.PointerEvent) { + console.warn("sMethod=='pointer' && !window.PointerEvent") + console.log(`Converting pointer[${sEvent}] : down move up cancel enter TO touchstart touchmove touchend, etc ..`) + switch (sEvent) { + case "down": { + sMethod = "touch" + sEvent = "start" + break + } + case "move": { + sMethod = "touch" + // sEvent = "move"; + break + } + case "up": { + sMethod = "touch" + sEvent = "end" + break + } + case "cancel": { + sMethod = "touch" + // sEvent = "cancel"; + break + } + case "enter": { + console.log("debug: Should I send a move event?") // ??? + break + } + // case "over": case "out": not used at now + default: { + console.warn(`PointerEvent not available in this browser ? The event ${sEvent} would not be called`) + } + } + } + + switch (sEvent) { + // @ts-expect-error + // both pointer and move events + case "down": case "up": case "move": case "over": case "out": case "enter": + { + oDOM.addEventListener(sMethod + sEvent, fCall, capture) + } + // @ts-expect-error + // only pointerevents + case "leave": case "cancel": case "gotpointercapture": case "lostpointercapture": + { + if (sMethod != "mouse") { + return oDOM.addEventListener(sMethod + sEvent, fCall, capture) + } + } + // not "pointer" || "mouse" + default: + return oDOM.addEventListener(sEvent, fCall, capture) + } + } + + pointerListenerRemove(oDOM: Node, sEvent: string, fCall: (e: Event) => boolean | void, capture = false): void { + if (!oDOM || !oDOM.removeEventListener || !sEvent || typeof fCall !== "function") return + + switch (sEvent) { + // @ts-expect-error + // both pointer and move events + case "down": case "up": case "move": case "over": case "out": case "enter": + { + if (this.pointerevents_method == "pointer" || this.pointerevents_method == "mouse") { + oDOM.removeEventListener(this.pointerevents_method + sEvent, fCall, capture) + } + } + // @ts-expect-error + // only pointerevents + case "leave": case "cancel": case "gotpointercapture": case "lostpointercapture": + { + if (this.pointerevents_method == "pointer") { + return oDOM.removeEventListener(this.pointerevents_method + sEvent, fCall, capture) + } + } + // not "pointer" || "mouse" + default: + return oDOM.removeEventListener(sEvent, fCall, capture) + } + } + + getTime(): number { + return performance.now() + } + + distance = distance + + colorToString(c: [number, number, number, number]): string { + return ( + `rgba(${ + Math.round(c[0] * 255).toFixed() + },${ + Math.round(c[1] * 255).toFixed() + },${ + Math.round(c[2] * 255).toFixed() + },${ + c.length == 4 ? c[3].toFixed(2) : "1.0" + })` + ) + } + + isInsideRectangle = isInsideRectangle + + // [minx,miny,maxx,maxy] + growBounding(bounding: Rect, x: number, y: number): void { + if (x < bounding[0]) { + bounding[0] = x + } else if (x > bounding[2]) { + bounding[2] = x + } + + if (y < bounding[1]) { + bounding[1] = y + } else if (y > bounding[3]) { + bounding[3] = y + } + } + + overlapBounding = overlapBounding + + // point inside bounding box + isInsideBounding(p: number[], bb: number[][]): boolean { + if ( + p[0] < bb[0][0] || + p[1] < bb[0][1] || + p[0] > bb[1][0] || + p[1] > bb[1][1] + ) { + return false + } + return true + } + + // Convert a hex value to its decimal value - the inputted hex must be in the + // format of a hex triplet - the kind we use for HTML colours. The function + // will return an array with three values. + hex2num(hex: string): number[] { + if (hex.charAt(0) == "#") { + hex = hex.slice(1) + // Remove the '#' char - if there is one. + } + hex = hex.toUpperCase() + const hex_alphabets = "0123456789ABCDEF" + const value = new Array(3) + let k = 0 + let int1, int2 + for (let i = 0; i < 6; i += 2) { + int1 = hex_alphabets.indexOf(hex.charAt(i)) + int2 = hex_alphabets.indexOf(hex.charAt(i + 1)) + value[k] = int1 * 16 + int2 + k++ + } + return value + } + + // Give a array with three values as the argument and the function will return + // the corresponding hex triplet. + num2hex(triplet: number[]): string { + const hex_alphabets = "0123456789ABCDEF" + let hex = "#" + let int1, int2 + for (let i = 0; i < 3; i++) { + int1 = triplet[i] / 16 + int2 = triplet[i] % 16 + + hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2) + } + return hex + } + + closeAllContextMenus(ref_window: Window = window): void { + const elements = [...ref_window.document.querySelectorAll(".litecontextmenu")] + if (!elements.length) return + + for (const element of elements) { + if ("close" in element && typeof element.close === "function") { + element.close() + } else { + element.remove() + } + } + } + + extendClass(target: any, origin: any): void { + for (const i in origin) { + // copy class properties + if (target.hasOwnProperty(i)) continue + target[i] = origin[i] + } + + if (origin.prototype) { + // copy prototype properties + for (const i in origin.prototype) { + // only enumerable + if (!origin.prototype.hasOwnProperty(i)) continue + + // avoid overwriting existing ones + if (target.prototype.hasOwnProperty(i)) continue + + // copy getters + if (origin.prototype.__lookupGetter__(i)) { + target.prototype.__defineGetter__( + i, + origin.prototype.__lookupGetter__(i), + ) + } else { + target.prototype[i] = origin.prototype[i] + } + + // and setters + if (origin.prototype.__lookupSetter__(i)) { + target.prototype.__defineSetter__( + i, + origin.prototype.__lookupSetter__(i), + ) + } + } + } + } +} diff --git a/src/lib/litegraph/src/MapProxyHandler.ts b/src/lib/litegraph/src/MapProxyHandler.ts new file mode 100644 index 0000000000..3935d8ce63 --- /dev/null +++ b/src/lib/litegraph/src/MapProxyHandler.ts @@ -0,0 +1,65 @@ +/** + * Temporary workaround until downstream consumers migrate to Map. + * A brittle wrapper with many flaws, but should be fine for simple maps using int indexes. + */ +export class MapProxyHandler implements ProxyHandler> { + getOwnPropertyDescriptor( + target: Map, + p: string | symbol, + ): PropertyDescriptor | undefined { + const value = this.get(target, p) + if (value) { + return { + configurable: true, + enumerable: true, + value, + } + } + } + + has(target: Map, p: string | symbol): boolean { + if (typeof p === "symbol") return false + + const int = parseInt(p, 10) + return target.has(!isNaN(int) ? int : p) + } + + ownKeys(target: Map): ArrayLike { + return [...target.keys()].map(String) + } + + get(target: Map, p: string | symbol): any { + // Workaround does not support link IDs of "values", "entries", "constructor", etc. + if (p in target) return Reflect.get(target, p, target) + if (typeof p === "symbol") return + + const int = parseInt(p, 10) + return target.get(!isNaN(int) ? int : p) + } + + set(target: Map, p: string | symbol, newValue: any): boolean { + if (typeof p === "symbol") return false + + const int = parseInt(p, 10) + target.set(!isNaN(int) ? int : p, newValue) + return true + } + + deleteProperty(target: Map, p: string | symbol): boolean { + return target.delete(p as number | string) + } + + static bindAllMethods(map: Map): void { + map.clear = map.clear.bind(map) + map.delete = map.delete.bind(map) + map.forEach = map.forEach.bind(map) + map.get = map.get.bind(map) + map.has = map.has.bind(map) + map.set = map.set.bind(map) + map.entries = map.entries.bind(map) + map.keys = map.keys.bind(map) + map.values = map.values.bind(map) + + map[Symbol.iterator] = map[Symbol.iterator].bind(map) + } +} diff --git a/src/lib/litegraph/src/Reroute.ts b/src/lib/litegraph/src/Reroute.ts new file mode 100644 index 0000000000..a6344056d0 --- /dev/null +++ b/src/lib/litegraph/src/Reroute.ts @@ -0,0 +1,778 @@ +import type { + CanvasColour, + INodeInputSlot, + INodeOutputSlot, + LinkNetwork, + LinkSegment, + Point, + Positionable, + ReadonlyLinkNetwork, + ReadOnlyRect, +} from "./interfaces" +import type { LGraphNode, NodeId } from "./LGraphNode" +import type { Serialisable, SerialisableReroute } from "./types/serialisation" + +import { LGraphBadge } from "./LGraphBadge" +import { type LinkId, LLink } from "./LLink" +import { distance, isPointInRect } from "./measure" + +export type RerouteId = number + +/** The input or output slot that an incomplete reroute link is connected to. */ +export interface FloatingRerouteSlot { + /** Floating connection to an input or output */ + slotType: "input" | "output" +} + +/** + * Represents an additional point on the graph that a link path will travel through. Used for visual organisation only. + * + * Requires no disposal or clean up. + * Stores only primitive values (IDs) to reference other items in its network, + * and a `WeakRef` to a {@link LinkNetwork} to resolve them. + */ +export class Reroute implements Positionable, LinkSegment, Serialisable { + static radius: number = 10 + /** Maximum distance from reroutes to their bezier curve control points. */ + static maxSplineOffset: number = 80 + static drawIdBadge: boolean = false + static slotRadius: number = 5 + /** Distance from reroute centre to slot centre. */ + static get slotOffset(): number { + const gap = Reroute.slotRadius * 0.33 + return Reroute.radius + gap + Reroute.slotRadius + } + + #malloc = new Float32Array(8) + + /** The network this reroute belongs to. Contains all valid links and reroutes. */ + #network: WeakRef + + #parentId?: RerouteId + public get parentId(): RerouteId | undefined { + return this.#parentId + } + + /** Ignores attempts to create an infinite loop. @inheritdoc */ + public set parentId(value) { + if (value === this.id) return + if (this.getReroutes() === null) return + this.#parentId = value + } + + public get parent(): Reroute | undefined { + return this.#network.deref()?.getReroute(this.#parentId) + } + + /** This property is only defined on the last reroute of a floating reroute chain (closest to input end). */ + floating?: FloatingRerouteSlot + + #pos = this.#malloc.subarray(0, 2) + /** @inheritdoc */ + get pos(): Point { + return this.#pos + } + + set pos(value: Point) { + if (!(value?.length >= 2)) + throw new TypeError("Reroute.pos is an x,y point, and expects an indexable with at least two values.") + this.#pos[0] = value[0] + this.#pos[1] = value[1] + } + + /** @inheritdoc */ + get boundingRect(): ReadOnlyRect { + const { radius } = Reroute + const [x, y] = this.#pos + return [x - radius, y - radius, 2 * radius, 2 * radius] + } + + /** + * Slightly over-sized rectangle, guaranteed to contain the entire surface area for hover detection. + * Eliminates most hover positions using an extremely cheap check. + */ + get #hoverArea(): ReadOnlyRect { + const xOffset = 2 * Reroute.slotOffset + const yOffset = 2 * Math.max(Reroute.radius, Reroute.slotRadius) + + const [x, y] = this.#pos + return [x - xOffset, y - yOffset, 2 * xOffset, 2 * yOffset] + } + + /** The total number of links & floating links using this reroute */ + get totalLinks(): number { + return this.linkIds.size + this.floatingLinkIds.size + } + + /** @inheritdoc */ + selected?: boolean + + /** The ID ({@link LLink.id}) of every link using this reroute */ + linkIds: Set + + /** The ID ({@link LLink.id}) of every floating link using this reroute */ + floatingLinkIds: Set + + /** Cached cos */ + cos: number = 0 + sin: number = 0 + + /** Bezier curve control point for the "target" (input) side of the link */ + controlPoint: Point = this.#malloc.subarray(4, 6) + + /** @inheritdoc */ + path?: Path2D + /** @inheritdoc */ + _centreAngle?: number + /** @inheritdoc */ + _pos: Float32Array = this.#malloc.subarray(6, 8) + + /** @inheritdoc */ + _dragging?: boolean + + /** Colour of the first link that rendered this reroute */ + _colour?: CanvasColour + + /** Colour of the first link that rendered this reroute */ + get colour(): CanvasColour { + return this._colour ?? "#18184d" + } + + /** + * Used to ensure reroute angles are only executed once per frame. + * @todo Calculate on change instead. + */ + #lastRenderTime: number = -Infinity + + #inputSlot = new RerouteSlot(this, true) + #outputSlot = new RerouteSlot(this, false) + + get isSlotHovered(): boolean { + return this.isInputHovered || this.isOutputHovered + } + + get isInputHovered(): boolean { + return this.#inputSlot.hovering + } + + get isOutputHovered(): boolean { + return this.#outputSlot.hovering + } + + get firstLink(): LLink | undefined { + const linkId = this.linkIds.values().next().value + return linkId === undefined + ? undefined + : this.#network + .deref() + ?.links + .get(linkId) + } + + get firstFloatingLink(): LLink | undefined { + const linkId = this.floatingLinkIds.values().next().value + return linkId === undefined + ? undefined + : this.#network + .deref() + ?.floatingLinks + .get(linkId) + } + + /** @inheritdoc */ + get origin_id(): NodeId | undefined { + return this.firstLink?.origin_id + } + + /** @inheritdoc */ + get origin_slot(): number | undefined { + return this.firstLink?.origin_slot + } + + /** + * Initialises a new link reroute object. + * @param id Unique identifier for this reroute + * @param network The network of links this reroute belongs to. Internally converted to a WeakRef. + * @param pos Position in graph coordinates + * @param linkIds Link IDs ({@link LLink.id}) of all links that use this reroute + */ + constructor( + public readonly id: RerouteId, + network: LinkNetwork, + pos?: Point, + parentId?: RerouteId, + linkIds?: Iterable, + floatingLinkIds?: Iterable, + ) { + this.#network = new WeakRef(network) + this.parentId = parentId + if (pos) this.pos = pos + this.linkIds = new Set(linkIds) + this.floatingLinkIds = new Set(floatingLinkIds) + } + + /** + * Applies a new parentId to the reroute, and optinoally a new position and linkId. + * Primarily used for deserialisation. + * @param parentId The ID of the reroute prior to this reroute, or + * `undefined` if it is the first reroute connected to a nodes output + * @param pos The position of this reroute + * @param linkIds All link IDs that pass through this reroute + */ + update( + parentId: RerouteId | undefined, + pos?: Point, + linkIds?: Iterable, + floating?: FloatingRerouteSlot, + ): void { + this.parentId = parentId + if (pos) this.pos = pos + if (linkIds) this.linkIds = new Set(linkIds) + this.floating = floating + } + + /** + * Validates the linkIds this reroute has. Removes broken links. + * @param links Collection of valid links + * @returns true if any links remain after validation + */ + validateLinks(links: ReadonlyMap, floatingLinks: ReadonlyMap): boolean { + const { linkIds, floatingLinkIds } = this + for (const linkId of linkIds) { + if (!links.has(linkId)) linkIds.delete(linkId) + } + for (const linkId of floatingLinkIds) { + if (!floatingLinks.has(linkId)) floatingLinkIds.delete(linkId) + } + return linkIds.size > 0 || floatingLinkIds.size > 0 + } + + /** + * Retrieves an ordered array of all reroutes from the node output. + * @param visited Internal. A set of reroutes that this function + * has already visited whilst recursing up the chain. + * @returns An ordered array of all reroutes from the node output to this reroute, inclusive. + * `null` if an infinite loop is detected. + * `undefined` if the reroute chain or {@link LinkNetwork} are invalid. + */ + getReroutes(visited = new Set()): Reroute[] | null { + // No parentId - last in the chain + if (this.#parentId === undefined) return [this] + // Invalid chain - looped + if (visited.has(this)) return null + visited.add(this) + + const parent = this.#network.deref()?.reroutes.get(this.#parentId) + // Invalid parent (or network) - drop silently to recover + if (!parent) { + this.#parentId = undefined + return [this] + } + + const reroutes = parent.getReroutes(visited) + reroutes?.push(this) + return reroutes + } + + /** + * Internal. Called by {@link LLink.findNextReroute}. Not intended for use by itself. + * @param withParentId The rerouteId to look for + * @param visited A set of reroutes that have already been visited + * @returns The reroute that was found, `undefined` if no reroute was found, or `null` if an infinite loop was detected. + */ + findNextReroute( + withParentId: RerouteId, + visited = new Set(), + ): Reroute | null | undefined { + if (this.#parentId === withParentId) return this + if (visited.has(this)) return null + visited.add(this) + if (this.#parentId === undefined) return + + return this.#network + .deref() + ?.reroutes + .get(this.#parentId) + ?.findNextReroute(withParentId, visited) + } + + /** + * Finds the output node and output slot of the first link passing through this reroute. + * @returns The output node and output slot of the first link passing through this reroute, or `undefined` if no link is found. + */ + findSourceOutput(): { node: LGraphNode, output: INodeOutputSlot } | undefined { + const link = this.firstLink ?? this.firstFloatingLink + if (!link) return + + const node = this.#network.deref()?.getNodeById(link.origin_id) + if (!node) return + + return { + node, + output: node.outputs[link.origin_slot], + } + } + + /** + * Finds the inputs and nodes of (floating) links passing through this reroute. + * @returns An array of objects containing the node and input slot of each link passing through this reroute. + */ + findTargetInputs(): { node: LGraphNode, input: INodeInputSlot, link: LLink }[] | undefined { + const network = this.#network.deref() + if (!network) return + + const results: { + node: LGraphNode + input: INodeInputSlot + link: LLink + }[] = [] + + addAllResults(network, this.linkIds, network.links) + addAllResults(network, this.floatingLinkIds, network.floatingLinks) + + return results + + function addAllResults( + network: ReadonlyLinkNetwork, + linkIds: Iterable, + links: ReadonlyMap, + ) { + for (const linkId of linkIds) { + const link = links.get(linkId) + if (!link) continue + + const node = network.getNodeById(link.target_id) + const input = node?.inputs[link.target_slot] + if (!input) continue + + results.push({ node, input, link }) + } + } + } + + /** + * Retrieves all floating links passing through this reroute. + * @param from Filters the links by the currently connected link side. + * @returns An array of floating links + */ + getFloatingLinks(from: "input" | "output"): LLink[] | undefined { + const floatingLinks = this.#network.deref()?.floatingLinks + if (!floatingLinks) return + + const idProp = from === "input" ? "origin_id" : "target_id" + const out: LLink[] = [] + + for (const linkId of this.floatingLinkIds) { + const link = floatingLinks.get(linkId) + if (link?.[idProp] === -1) out.push(link) + } + return out + } + + /** + * Changes the origin node/output of all floating links that pass through this reroute. + * @param node The new origin node + * @param output The new origin output slot + * @param index The slot index of {@link output} + */ + setFloatingLinkOrigin(node: LGraphNode, output: INodeOutputSlot, index: number) { + const network = this.#network.deref() + const floatingOutLinks = this.getFloatingLinks("output") + if (!floatingOutLinks) throw new Error("[setFloatingLinkOrigin]: Invalid network.") + if (!floatingOutLinks.length) return + + output._floatingLinks ??= new Set() + + for (const link of floatingOutLinks) { + // Update cached floating links + output._floatingLinks.add(link) + + network?.getNodeById(link.origin_id) + ?.outputs[link.origin_slot] + ?._floatingLinks + ?.delete(link) + + // Update the floating link + link.origin_id = node.id + link.origin_slot = index + } + } + + /** @inheritdoc */ + move(deltaX: number, deltaY: number) { + this.#pos[0] += deltaX + this.#pos[1] += deltaY + } + + /** @inheritdoc */ + snapToGrid(snapTo: number): boolean { + if (!snapTo) return false + + const { pos } = this + pos[0] = snapTo * Math.round(pos[0] / snapTo) + pos[1] = snapTo * Math.round(pos[1] / snapTo) + return true + } + + removeAllFloatingLinks() { + for (const linkId of this.floatingLinkIds) { + this.removeFloatingLink(linkId) + } + } + + removeFloatingLink(linkId: LinkId) { + const network = this.#network.deref() + if (!network) return + + const floatingLink = network.floatingLinks.get(linkId) + if (!floatingLink) { + console.warn(`[Reroute.removeFloatingLink] Floating link not found: ${linkId}, ignoring and discarding ID.`) + this.floatingLinkIds.delete(linkId) + return + } + + network.removeFloatingLink(floatingLink) + } + + /** + * Removes a link or floating link from this reroute, by matching link object instance equality. + * @param link The link to remove. + * @remarks Does not remove the link from the network. + */ + removeLink(link: LLink) { + const network = this.#network.deref() + if (!network) return + + const floatingLink = network.floatingLinks.get(link.id) + if (link === floatingLink) { + this.floatingLinkIds.delete(link.id) + } else { + this.linkIds.delete(link.id) + } + } + + remove() { + const network = this.#network.deref() + if (!network) return + + network.removeReroute(this.id) + } + + calculateAngle(lastRenderTime: number, network: ReadonlyLinkNetwork, linkStart: Point): void { + // Ensure we run once per render + if (!(lastRenderTime > this.#lastRenderTime)) return + this.#lastRenderTime = lastRenderTime + + const { id, pos: thisPos } = this + + // Add all link angles + const angles: number[] = [] + let sum = 0 + calculateAngles(this.linkIds, network.links) + calculateAngles(this.floatingLinkIds, network.floatingLinks) + + // Invalid - reset + if (!angles.length) { + this.cos = 0 + this.sin = 0 + this.controlPoint[0] = 0 + this.controlPoint[1] = 0 + return + } + + sum /= angles.length + + const originToReroute = Math.atan2( + this.#pos[1] - linkStart[1], + this.#pos[0] - linkStart[0], + ) + let diff = (originToReroute - sum) * 0.5 + if (Math.abs(diff) > Math.PI * 0.5) diff += Math.PI + const dist = Math.min(Reroute.maxSplineOffset, distance(linkStart, this.#pos) * 0.25) + + // Store results + const originDiff = originToReroute - diff + const cos = Math.cos(originDiff) + const sin = Math.sin(originDiff) + + this.cos = cos + this.sin = sin + this.controlPoint[0] = dist * -cos + this.controlPoint[1] = dist * -sin + + /** + * Calculates the direction of each link and adds it to the array. + * @param linkIds The IDs of the links to calculate + * @param links The link container from the link network. + */ + function calculateAngles(linkIds: Iterable, links: ReadonlyMap) { + for (const linkId of linkIds) { + const link = links.get(linkId) + const pos = getNextPos(network, link, id) + if (!pos) continue + + const angle = getDirection(thisPos, pos) + angles.push(angle) + sum += angle + } + } + } + + /** + * Renders the reroute on the canvas. + * @param ctx Canvas context to draw on + * @param backgroundPattern The canvas background pattern; used to make floating reroutes appear washed out. + * @remarks Leaves {@link ctx}.fillStyle, strokeStyle, and lineWidth dirty (perf.). + */ + draw(ctx: CanvasRenderingContext2D, backgroundPattern?: CanvasPattern): void { + const { globalAlpha } = ctx + const { pos } = this + + ctx.beginPath() + ctx.arc(pos[0], pos[1], Reroute.radius, 0, 2 * Math.PI) + + if (this.linkIds.size === 0) { + ctx.fillStyle = backgroundPattern ?? "#797979" + ctx.fill() + ctx.globalAlpha = globalAlpha * 0.33 + } + + ctx.fillStyle = this.colour + ctx.lineWidth = Reroute.radius * 0.1 + ctx.strokeStyle = "rgb(0,0,0,0.5)" + ctx.fill() + ctx.stroke() + + ctx.fillStyle = "#ffffff55" + ctx.strokeStyle = "rgb(0,0,0,0.3)" + ctx.beginPath() + ctx.arc(pos[0], pos[1], Reroute.radius * 0.8, 0, 2 * Math.PI) + ctx.fill() + ctx.stroke() + + if (this.selected) { + ctx.strokeStyle = "#fff" + ctx.beginPath() + ctx.arc(pos[0], pos[1], Reroute.radius * 1.2, 0, 2 * Math.PI) + ctx.stroke() + } + + if (Reroute.drawIdBadge) { + const idBadge = new LGraphBadge({ text: this.id.toString() }) + const x = pos[0] - idBadge.getWidth(ctx) * 0.5 + const y = pos[1] - idBadge.height - Reroute.radius - 2 + idBadge.draw(ctx, x, y) + } + + ctx.globalAlpha = globalAlpha + } + + /** + * Draws the input and output slots on the canvas, if the slots are visible. + * @param ctx The canvas context to draw on. + */ + drawSlots(ctx: CanvasRenderingContext2D): void { + this.#inputSlot.draw(ctx) + this.#outputSlot.draw(ctx) + } + + drawHighlight(ctx: CanvasRenderingContext2D, colour: CanvasColour): void { + const { pos } = this + + const { strokeStyle, lineWidth } = ctx + ctx.strokeStyle = colour + ctx.lineWidth = 1 + + ctx.beginPath() + ctx.arc(pos[0], pos[1], Reroute.radius * 1.5, 0, 2 * Math.PI) + ctx.stroke() + + ctx.strokeStyle = strokeStyle + ctx.lineWidth = lineWidth + } + + /** + * Updates visibility of the input and output slots, based on the position of the pointer. + * @param pos The position of the pointer. + * @returns `true` if any changes require a redraw. + */ + updateVisibility(pos: Point): boolean { + const input = this.#inputSlot + const output = this.#outputSlot + input.dirty = false + output.dirty = false + + const { firstFloatingLink } = this + const hasLink = !!this.firstLink + + const showInput = hasLink || firstFloatingLink?.isFloatingOutput + const showOutput = hasLink || firstFloatingLink?.isFloatingInput + const showEither = showInput || showOutput + + // Check if even in the vicinity + if (showEither && isPointInRect(pos, this.#hoverArea)) { + const outlineOnly = this.#contains(pos) + + if (showInput) input.update(pos, outlineOnly) + if (showOutput) output.update(pos, outlineOnly) + } else { + this.hideSlots() + } + + return input.dirty || output.dirty + } + + /** Prevents rendering of the input and output slots. */ + hideSlots() { + this.#inputSlot.hide() + this.#outputSlot.hide() + } + + /** + * Precisely determines if {@link pos} is inside this reroute. + * @param pos The position to check (canvas space) + * @returns `true` if {@link pos} is within the reroute's radius. + */ + containsPoint(pos: Point): boolean { + return isPointInRect(pos, this.#hoverArea) && this.#contains(pos) + } + + #contains(pos: Point): boolean { + return distance(this.pos, pos) <= Reroute.radius + } + + /** @inheritdoc */ + asSerialisable(): SerialisableReroute { + const { id, parentId, pos, linkIds } = this + return { + id, + parentId, + pos: [pos[0], pos[1]], + linkIds: [...linkIds], + floating: this.floating ? { slotType: this.floating.slotType } : undefined, + } + } +} + +/** + * Represents a slot on a reroute. + * @private Designed for internal use within this module. + */ +class RerouteSlot { + /** The reroute that the slot belongs to. */ + readonly #reroute: Reroute + + readonly #offsetMultiplier: 1 | -1 + /** Centre point of this slot. */ + get pos(): Point { + const [x, y] = this.#reroute.pos + return [x + Reroute.slotOffset * this.#offsetMultiplier, y] + } + + /** Whether any changes require a redraw. */ + dirty: boolean = false + + #hovering = false + /** Whether the pointer is hovering over the slot itself. */ + get hovering() { + return this.#hovering + } + + set hovering(value) { + if (!Object.is(this.#hovering, value)) { + this.#hovering = value + this.dirty = true + } + } + + #showOutline = false + /** Whether the slot outline / faint background is visible. */ + get showOutline() { + return this.#showOutline + } + + set showOutline(value) { + if (!Object.is(this.#showOutline, value)) { + this.#showOutline = value + this.dirty = true + } + } + + constructor(reroute: Reroute, isInput: boolean) { + this.#reroute = reroute + this.#offsetMultiplier = isInput ? -1 : 1 + } + + /** + * Updates the slot's visibility based on the position of the pointer. + * @param pos The position of the pointer. + * @param outlineOnly If `true`, slot will display with the faded outline only ({@link showOutline}). + */ + update(pos: Point, outlineOnly?: boolean) { + if (outlineOnly) { + this.hovering = false + this.showOutline = true + } else { + const dist = distance(this.pos, pos) + this.hovering = dist <= 2 * Reroute.slotRadius + this.showOutline = dist <= 5 * Reroute.slotRadius + } + } + + /** Hides the slot. */ + hide() { + this.hovering = false + this.showOutline = false + } + + /** + * Draws the slot on the canvas. + * @param ctx The canvas context to draw on. + */ + draw(ctx: CanvasRenderingContext2D): void { + const { fillStyle, strokeStyle, lineWidth } = ctx + const { showOutline, hovering, pos: [x, y] } = this + if (!showOutline) return + + try { + ctx.fillStyle = hovering + ? this.#reroute.colour + : "rgba(127,127,127,0.3)" + ctx.strokeStyle = "rgb(0,0,0,0.5)" + ctx.lineWidth = 1 + + ctx.beginPath() + ctx.arc(x, y, Reroute.slotRadius, 0, 2 * Math.PI) + ctx.fill() + ctx.stroke() + } finally { + ctx.fillStyle = fillStyle + ctx.strokeStyle = strokeStyle + ctx.lineWidth = lineWidth + } + } +} + +/** + * Retrieves the position of the next reroute in the chain, or the destination input slot on this link. + * @param network The network of links + * @param link The link representing the current reroute chain + * @param id The ID of "this" reroute + * @returns The position of the next reroute or the input slot target, otherwise `undefined`. + */ +function getNextPos(network: ReadonlyLinkNetwork, link: LLink | undefined, id: RerouteId) { + if (!link) return + + const linkPos = LLink.findNextReroute(network, link, id)?.pos + if (linkPos) return linkPos + + // Floating link with no input to find + if (link.target_id === -1 || link.target_slot === -1) return + + return network.getNodeById(link.target_id)?.getInputPos(link.target_slot) +} + +/** Returns the direction from one point to another in radians. */ +function getDirection(fromPos: Point, toPos: Point) { + return Math.atan2(toPos[1] - fromPos[1], toPos[0] - fromPos[0]) +} diff --git a/src/lib/litegraph/src/canvas/FloatingRenderLink.ts b/src/lib/litegraph/src/canvas/FloatingRenderLink.ts new file mode 100644 index 0000000000..11efefeac0 --- /dev/null +++ b/src/lib/litegraph/src/canvas/FloatingRenderLink.ts @@ -0,0 +1,194 @@ +import type { RenderLink } from "./RenderLink" +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeOutputSlot, LinkNetwork } from "@/interfaces" +import type { INodeInputSlot } from "@/interfaces" +import type { Point } from "@/interfaces" +import type { LGraphNode, NodeId } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" + +import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from "@/constants" +import { LinkDirection } from "@/types/globalEnums" + +/** + * Represents a floating link that is currently being dragged from one slot to another. + * + * This is a heavier, but short-lived convenience data structure. All refs to FloatingRenderLinks should be discarded on drop. + * @remarks + * At time of writing, Litegraph is using several different styles and methods to handle link dragging. + * + * Once the library has undergone more substantial changes to the way links are managed, + * many properties of this class will be superfluous and removable. + */ +export class FloatingRenderLink implements RenderLink { + readonly node: LGraphNode + readonly fromSlot: INodeOutputSlot | INodeInputSlot + readonly fromPos: Point + readonly fromDirection: LinkDirection + readonly fromSlotIndex: number + + readonly outputNodeId: NodeId = -1 + readonly outputNode?: LGraphNode + readonly outputSlot?: INodeOutputSlot + readonly outputIndex: number = -1 + readonly outputPos?: Point + + readonly inputNodeId: NodeId = -1 + readonly inputNode?: LGraphNode + readonly inputSlot?: INodeInputSlot + readonly inputIndex: number = -1 + readonly inputPos?: Point + + constructor( + readonly network: LinkNetwork, + readonly link: LLink, + readonly toType: "input" | "output", + readonly fromReroute: Reroute, + readonly dragDirection: LinkDirection = LinkDirection.CENTER, + ) { + const { + origin_id: outputNodeId, + target_id: inputNodeId, + origin_slot: outputIndex, + target_slot: inputIndex, + } = link + + if (outputNodeId !== -1) { + // Output connected + const outputNode = network.getNodeById(outputNodeId) ?? undefined + if (!outputNode) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Output node [${outputNodeId}] not found.`) + + const outputSlot = outputNode?.outputs.at(outputIndex) + if (!outputSlot) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Output slot [${outputIndex}] not found.`) + + this.outputNodeId = outputNodeId + this.outputNode = outputNode + this.outputSlot = outputSlot + this.outputIndex = outputIndex + this.outputPos = outputNode.getOutputPos(outputIndex) + + // RenderLink props + this.node = outputNode + this.fromSlot = outputSlot + this.fromPos = fromReroute?.pos ?? this.outputPos + this.fromDirection = LinkDirection.LEFT + this.dragDirection = LinkDirection.RIGHT + this.fromSlotIndex = outputIndex + } else { + // Input connected + const inputNode = network.getNodeById(inputNodeId) ?? undefined + if (!inputNode) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input node [${inputNodeId}] not found.`) + + const inputSlot = inputNode?.inputs.at(inputIndex) + if (!inputSlot) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input slot [${inputIndex}] not found.`) + + this.inputNodeId = inputNodeId + this.inputNode = inputNode + this.inputSlot = inputSlot + this.inputIndex = inputIndex + this.inputPos = inputNode.getInputPos(inputIndex) + + // RenderLink props + this.node = inputNode + this.fromSlot = inputSlot + this.fromDirection = LinkDirection.RIGHT + this.fromSlotIndex = inputIndex + } + this.fromPos = fromReroute.pos + } + + canConnectToInput(): boolean { + return this.toType === "input" + } + + canConnectToOutput(): boolean { + return this.toType === "output" + } + + canConnectToReroute(reroute: Reroute): boolean { + if (this.toType === "input") { + if (reroute.origin_id === this.inputNode?.id) return false + } else { + if (reroute.origin_id === this.outputNode?.id) return false + } + return true + } + + connectToInput(node: LGraphNode, input: INodeInputSlot, _events?: CustomEventTarget): void { + const floatingLink = this.link + floatingLink.target_id = node.id + floatingLink.target_slot = node.inputs.indexOf(input) + + node.disconnectInput(node.inputs.indexOf(input)) + + this.fromSlot._floatingLinks?.delete(floatingLink) + input._floatingLinks ??= new Set() + input._floatingLinks.add(floatingLink) + } + + connectToOutput(node: LGraphNode, output: INodeOutputSlot, _events?: CustomEventTarget): void { + const floatingLink = this.link + floatingLink.origin_id = node.id + floatingLink.origin_slot = node.outputs.indexOf(output) + + this.fromSlot._floatingLinks?.delete(floatingLink) + output._floatingLinks ??= new Set() + output._floatingLinks.add(floatingLink) + } + + connectToSubgraphInput(input: SubgraphInput, _events?: CustomEventTarget): void { + const floatingLink = this.link + floatingLink.origin_id = SUBGRAPH_INPUT_ID + floatingLink.origin_slot = input.parent.slots.indexOf(input) + + this.fromSlot._floatingLinks?.delete(floatingLink) + input._floatingLinks ??= new Set() + input._floatingLinks.add(floatingLink) + } + + connectToSubgraphOutput(output: SubgraphOutput, _events?: CustomEventTarget): void { + const floatingLink = this.link + floatingLink.origin_id = SUBGRAPH_OUTPUT_ID + floatingLink.origin_slot = output.parent.slots.indexOf(output) + + this.fromSlot._floatingLinks?.delete(floatingLink) + output._floatingLinks ??= new Set() + output._floatingLinks.add(floatingLink) + } + + connectToRerouteInput( + reroute: Reroute, + { node: inputNode, input }: { node: LGraphNode, input: INodeInputSlot }, + events: CustomEventTarget, + ) { + const floatingLink = this.link + floatingLink.target_id = inputNode.id + floatingLink.target_slot = inputNode.inputs.indexOf(input) + + this.fromSlot._floatingLinks?.delete(floatingLink) + input._floatingLinks ??= new Set() + input._floatingLinks.add(floatingLink) + + events.dispatch("input-moved", this) + } + + connectToRerouteOutput( + reroute: Reroute, + outputNode: LGraphNode, + output: INodeOutputSlot, + events: CustomEventTarget, + ) { + const floatingLink = this.link + floatingLink.origin_id = outputNode.id + floatingLink.origin_slot = outputNode.outputs.indexOf(output) + + this.fromSlot._floatingLinks?.delete(floatingLink) + output._floatingLinks ??= new Set() + output._floatingLinks.add(floatingLink) + + events.dispatch("output-moved", this) + } +} diff --git a/src/lib/litegraph/src/canvas/InputIndicators.ts b/src/lib/litegraph/src/canvas/InputIndicators.ts new file mode 100644 index 0000000000..02aa68362b --- /dev/null +++ b/src/lib/litegraph/src/canvas/InputIndicators.ts @@ -0,0 +1,171 @@ +import type { LGraphCanvas } from "@/LGraphCanvas" + +/** + * A class that can be added to the render cycle to show pointer / keyboard status symbols. + * + * Used to create videos of feature changes. + * + * Example usage with ComfyUI_frontend, via console / devtools: + * + * ```ts + * const inputIndicators = new InputIndicators(canvas) + * // Dispose: + * inputIndicators.dispose() + * ``` + */ +export class InputIndicators implements Disposable { + // #region config + radius = 8 + startAngle = 0 + endAngle = Math.PI * 2 + + inactiveColour = "#ffffff10" + colour1 = "#ff5f00" + colour2 = "#00ff7c" + colour3 = "#dea7ff" + fontString = "bold 12px Arial" + // #endregion + + // #region state + enabled: boolean = true + + shiftDown: boolean = false + undoDown: boolean = false + redoDown: boolean = false + ctrlDown: boolean = false + altDown: boolean = false + mouse0Down: boolean = false + mouse1Down: boolean = false + mouse2Down: boolean = false + + x: number = 0 + y: number = 0 + // #endregion + + controller?: AbortController + + constructor(public canvas: LGraphCanvas) { + this.controller = new AbortController() + const { signal } = this.controller + + const element = canvas.canvas + const options = { capture: true, signal } satisfies AddEventListenerOptions + + element.addEventListener("pointerdown", this.#onPointerDownOrMove, options) + element.addEventListener("pointermove", this.#onPointerDownOrMove, options) + element.addEventListener("pointerup", this.#onPointerUp, options) + element.addEventListener("keydown", this.#onKeyDownOrUp, options) + document.addEventListener("keyup", this.#onKeyDownOrUp, options) + + const origDrawFrontCanvas = canvas.drawFrontCanvas.bind(canvas) + signal.addEventListener("abort", () => { + canvas.drawFrontCanvas = origDrawFrontCanvas + }) + + canvas.drawFrontCanvas = () => { + origDrawFrontCanvas() + this.draw() + } + } + + #onPointerDownOrMove = this.onPointerDownOrMove.bind(this) + onPointerDownOrMove(e: MouseEvent): void { + this.mouse0Down = (e.buttons & 1) === 1 + this.mouse1Down = (e.buttons & 4) === 4 + this.mouse2Down = (e.buttons & 2) === 2 + + this.x = e.clientX + this.y = e.clientY + + this.canvas.setDirty(true) + } + + #onPointerUp = this.onPointerUp.bind(this) + onPointerUp(): void { + this.mouse0Down = false + this.mouse1Down = false + this.mouse2Down = false + } + + #onKeyDownOrUp = this.onKeyDownOrUp.bind(this) + onKeyDownOrUp(e: KeyboardEvent): void { + this.ctrlDown = e.ctrlKey + this.altDown = e.altKey + this.shiftDown = e.shiftKey + this.undoDown = e.ctrlKey && e.code === "KeyZ" && e.type === "keydown" + this.redoDown = e.ctrlKey && e.code === "KeyY" && e.type === "keydown" + } + + draw() { + const { + canvas: { ctx }, + radius, + startAngle, + endAngle, + x, + y, + inactiveColour, + colour1, + colour2, + colour3, + fontString, + } = this + + const { fillStyle, font } = ctx + + const mouseDotX = x + const mouseDotY = y - 80 + + const textX = mouseDotX + const textY = mouseDotY - 15 + ctx.font = fontString + + textMarker(textX + 0, textY, "Shift", this.shiftDown ? colour1 : inactiveColour) + textMarker(textX + 45, textY + 20, "Alt", this.altDown ? colour2 : inactiveColour) + textMarker(textX + 30, textY, "Control", this.ctrlDown ? colour3 : inactiveColour) + textMarker(textX - 30, textY, "↩️", this.undoDown ? "#000" : "transparent") + textMarker(textX + 45, textY, "↪️", this.redoDown ? "#000" : "transparent") + + ctx.beginPath() + drawDot(mouseDotX, mouseDotY) + drawDot(mouseDotX + 15, mouseDotY) + drawDot(mouseDotX + 30, mouseDotY) + ctx.fillStyle = inactiveColour + ctx.fill() + + const leftButtonColour = this.mouse0Down ? colour1 : inactiveColour + const middleButtonColour = this.mouse1Down ? colour2 : inactiveColour + const rightButtonColour = this.mouse2Down ? colour3 : inactiveColour + if (this.mouse0Down) mouseMarker(mouseDotX, mouseDotY, leftButtonColour) + if (this.mouse1Down) mouseMarker(mouseDotX + 15, mouseDotY, middleButtonColour) + if (this.mouse2Down) mouseMarker(mouseDotX + 30, mouseDotY, rightButtonColour) + + ctx.fillStyle = fillStyle + ctx.font = font + + function textMarker(x: number, y: number, text: string, colour: string) { + ctx.fillStyle = colour + ctx.fillText(text, x, y) + } + + function mouseMarker(x: number, y: number, colour: string) { + ctx.beginPath() + ctx.fillStyle = colour + drawDot(x, y) + ctx.fill() + } + + function drawDot(x: number, y: number) { + ctx.arc(x, y, radius, startAngle, endAngle) + } + } + + dispose() { + this.controller?.abort() + this.controller = undefined + } + + [Symbol.dispose](): void { + this.dispose() + } +} diff --git a/src/lib/litegraph/src/canvas/LinkConnector.ts b/src/lib/litegraph/src/canvas/LinkConnector.ts new file mode 100644 index 0000000000..349a903091 --- /dev/null +++ b/src/lib/litegraph/src/canvas/LinkConnector.ts @@ -0,0 +1,860 @@ +import type { RenderLink } from "./RenderLink" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { ConnectingLink, ItemLocator, LinkNetwork, LinkSegment } from "@/interfaces" +import type { INodeInputSlot, INodeOutputSlot } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { Reroute } from "@/Reroute" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { CanvasPointerEvent } from "@/types/events" +import type { IBaseWidget } from "@/types/widgets" + +import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from "@/constants" +import { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import { LLink } from "@/LLink" +import { Subgraph } from "@/subgraph/Subgraph" +import { SubgraphInputNode } from "@/subgraph/SubgraphInputNode" +import { SubgraphOutputNode } from "@/subgraph/SubgraphOutputNode" +import { LinkDirection } from "@/types/globalEnums" + +import { FloatingRenderLink } from "./FloatingRenderLink" +import { MovingInputLink } from "./MovingInputLink" +import { MovingLinkBase } from "./MovingLinkBase" +import { MovingOutputLink } from "./MovingOutputLink" +import { ToInputFromIoNodeLink } from "./ToInputFromIoNodeLink" +import { ToInputRenderLink } from "./ToInputRenderLink" +import { ToOutputFromIoNodeLink } from "./ToOutputFromIoNodeLink" +import { ToOutputFromRerouteLink } from "./ToOutputFromRerouteLink" +import { ToOutputRenderLink } from "./ToOutputRenderLink" + +/** + * A Litegraph state object for the {@link LinkConnector}. + * References are only held atomically within a function, never passed. + * The concrete implementation may be replaced or proxied without side-effects. + */ +export interface LinkConnectorState { + /** + * The type of slot that links are being connected **to**. + * - When `undefined`, no operation is being performed. + * - A change in this property indicates the start or end of dragging links. + */ + connectingTo: "input" | "output" | undefined + multi: boolean + /** When `true`, existing links are being repositioned. Otherwise, new links are being created. */ + draggingExistingLinks: boolean + /** When set, connecting links will all snap to this position. */ + snapLinksPos?: [number, number] +} + +/** Discriminated union to simplify type narrowing. */ +type RenderLinkUnion = + | MovingInputLink + | MovingOutputLink + | FloatingRenderLink + | ToInputRenderLink + | ToOutputRenderLink + | ToInputFromIoNodeLink + | ToOutputFromIoNodeLink + +export interface LinkConnectorExport { + renderLinks: RenderLink[] + inputLinks: LLink[] + outputLinks: LLink[] + floatingLinks: LLink[] + state: LinkConnectorState + network: LinkNetwork +} + +/** + * Component of {@link LGraphCanvas} that handles connecting and moving links. + * @see {@link LLink} + */ +export class LinkConnector { + /** + * Link connection state POJO. Source of truth for state of link drag operations. + * + * Can be replaced or proxied to allow notifications. + * Is always dereferenced at the start of an operation. + */ + state: LinkConnectorState = { + connectingTo: undefined, + multi: false, + draggingExistingLinks: false, + snapLinksPos: undefined, + } + + readonly events = new CustomEventTarget() + + /** Contains information for rendering purposes only. */ + readonly renderLinks: RenderLinkUnion[] = [] + + /** Existing links that are being moved **to** a new input slot. */ + readonly inputLinks: LLink[] = [] + /** Existing links that are being moved **to** a new output slot. */ + readonly outputLinks: LLink[] = [] + /** Existing floating links that are being moved to a new slot. */ + readonly floatingLinks: LLink[] = [] + + readonly hiddenReroutes: Set = new Set() + + /** The widget beneath the pointer, if it is a valid connection target. */ + overWidget?: IBaseWidget + /** The type (returned by downstream callback) for {@link overWidget} */ + overWidgetType?: string + + /** The reroute beneath the pointer, if it is a valid connection target. */ + overReroute?: Reroute + + readonly #setConnectingLinks: (value: ConnectingLink[]) => void + + constructor(setConnectingLinks: (value: ConnectingLink[]) => void) { + this.#setConnectingLinks = setConnectingLinks + } + + get isConnecting() { + return this.state.connectingTo !== undefined + } + + get draggingExistingLinks() { + return this.state.draggingExistingLinks + } + + /** Drag an existing link to a different input. */ + moveInputLink(network: LinkNetwork, input: INodeInputSlot): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const { state, inputLinks, renderLinks } = this + + const linkId = input.link + if (linkId == null) { + // No link connected, check for a floating link + const floatingLink = input._floatingLinks?.values().next().value + if (floatingLink?.parentId == null) return + + try { + const reroute = network.reroutes.get(floatingLink.parentId) + if (!reroute) throw new Error(`Invalid reroute id: [${floatingLink.parentId}] for floating link id: [${floatingLink.id}].`) + + const renderLink = new FloatingRenderLink(network, floatingLink, "input", reroute) + const mayContinue = this.events.dispatch("before-move-input", renderLink) + if (mayContinue === false) return + + renderLinks.push(renderLink) + } catch (error) { + console.warn(`Could not create render link for link id: [${floatingLink.id}].`, floatingLink, error) + } + + floatingLink._dragging = true + this.floatingLinks.push(floatingLink) + } else { + const link = network.links.get(linkId) + if (!link) return + + // Special handling for links from subgraph input nodes + if (link.origin_id === SUBGRAPH_INPUT_ID) { + // For subgraph input links, we need to handle them differently + // since they don't have a regular output node + const subgraphInput = network.inputNode?.slots[link.origin_slot] + if (!subgraphInput) { + console.warn(`Could not find subgraph input for slot [${link.origin_slot}]`) + return + } + + try { + const reroute = network.getReroute(link.parentId) + const renderLink = new ToInputFromIoNodeLink(network, network.inputNode, subgraphInput, reroute, LinkDirection.CENTER, link) + + // Note: We don't dispatch the before-move-input event for subgraph input links + // as the event type doesn't support ToInputFromIoNodeLink + + renderLinks.push(renderLink) + + this.listenUntilReset("input-moved", () => { + link.disconnect(network, "input") + }) + } catch (error) { + console.warn(`Could not create render link for subgraph input link id: [${link.id}].`, link, error) + return + } + + link._dragging = true + inputLinks.push(link) + } else { + // Regular node links + try { + const reroute = network.getReroute(link.parentId) + const renderLink = new MovingInputLink(network, link, reroute) + + const mayContinue = this.events.dispatch("before-move-input", renderLink) + if (mayContinue === false) return + + renderLinks.push(renderLink) + + this.listenUntilReset("input-moved", (e) => { + if ("link" in e.detail && e.detail.link) { + e.detail.link.disconnect(network, "output") + } + }) + } catch (error) { + console.warn(`Could not create render link for link id: [${link.id}].`, link, error) + return + } + + link._dragging = true + inputLinks.push(link) + } + } + + state.connectingTo = "input" + state.draggingExistingLinks = true + + this.#setLegacyLinks(false) + } + + /** Drag all links from an output to a new output. */ + moveOutputLink(network: LinkNetwork, output: INodeOutputSlot): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const { state, renderLinks } = this + + // Floating links + if (output._floatingLinks?.size) { + for (const floatingLink of output._floatingLinks.values()) { + try { + const reroute = LLink.getFirstReroute(network, floatingLink) + if (!reroute) throw new Error(`Invalid reroute id: [${floatingLink.parentId}] for floating link id: [${floatingLink.id}].`) + + const renderLink = new FloatingRenderLink(network, floatingLink, "output", reroute) + const mayContinue = this.events.dispatch("before-move-output", renderLink) + if (mayContinue === false) continue + + renderLinks.push(renderLink) + this.floatingLinks.push(floatingLink) + } catch (error) { + console.warn(`Could not create render link for link id: [${floatingLink.id}].`, floatingLink, error) + } + } + } + + // Normal links + if (output.links?.length) { + for (const linkId of output.links) { + const link = network.links.get(linkId) + if (!link) continue + + const firstReroute = LLink.getFirstReroute(network, link) + if (firstReroute) { + firstReroute._dragging = true + this.hiddenReroutes.add(firstReroute) + } else { + link._dragging = true + } + this.outputLinks.push(link) + + try { + const renderLink = new MovingOutputLink(network, link, firstReroute, LinkDirection.RIGHT) + + const mayContinue = this.events.dispatch("before-move-output", renderLink) + if (mayContinue === false) continue + + renderLinks.push(renderLink) + } catch (error) { + console.warn(`Could not create render link for link id: [${link.id}].`, link, error) + continue + } + } + } + + if (renderLinks.length === 0) return + + state.draggingExistingLinks = true + state.multi = true + state.connectingTo = "output" + + this.#setLegacyLinks(true) + } + + /** + * Drags a new link from an output slot to an input slot. + * @param network The network that the link being connected belongs to + * @param node The node the link is being dragged from + * @param output The output slot that the link is being dragged from + */ + dragNewFromOutput(network: LinkNetwork, node: LGraphNode, output: INodeOutputSlot, fromReroute?: Reroute): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const { state } = this + const renderLink = new ToInputRenderLink(network, node, output, fromReroute) + this.renderLinks.push(renderLink) + + state.connectingTo = "input" + + this.#setLegacyLinks(false) + } + + /** + * Drags a new link from an input slot to an output slot. + * @param network The network that the link being connected belongs to + * @param node The node the link is being dragged from + * @param input The input slot that the link is being dragged from + */ + dragNewFromInput(network: LinkNetwork, node: LGraphNode, input: INodeInputSlot, fromReroute?: Reroute): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const { state } = this + const renderLink = new ToOutputRenderLink(network, node, input, fromReroute) + this.renderLinks.push(renderLink) + + state.connectingTo = "output" + + this.#setLegacyLinks(true) + } + + dragNewFromSubgraphInput(network: LinkNetwork, inputNode: SubgraphInputNode, input: SubgraphInput, fromReroute?: Reroute): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const renderLink = new ToInputFromIoNodeLink(network, inputNode, input, fromReroute) + this.renderLinks.push(renderLink) + + this.state.connectingTo = "input" + + this.#setLegacyLinks(false) + } + + dragNewFromSubgraphOutput(network: LinkNetwork, outputNode: SubgraphOutputNode, output: SubgraphOutput, fromReroute?: Reroute): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const renderLink = new ToOutputFromIoNodeLink(network, outputNode, output, fromReroute) + this.renderLinks.push(renderLink) + + this.state.connectingTo = "output" + + this.#setLegacyLinks(true) + } + + /** + * Drags a new link from a reroute to an input slot. + * @param network The network that the link being connected belongs to + * @param reroute The reroute that the link is being dragged from + */ + dragFromReroute(network: LinkNetwork, reroute: Reroute): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const link = reroute.firstLink ?? reroute.firstFloatingLink + if (!link) { + console.warn("No link found for reroute.") + return + } + + if (link.origin_id === SUBGRAPH_INPUT_ID) { + if (!(network instanceof Subgraph)) { + console.warn("Subgraph input link found in non-subgraph network.") + return + } + + const input = network.inputs.at(link.origin_slot) + if (!input) throw new Error("No subgraph input found for link.") + + const renderLink = new ToInputFromIoNodeLink(network, network.inputNode, input, reroute) + renderLink.fromDirection = LinkDirection.NONE + this.renderLinks.push(renderLink) + + this.state.connectingTo = "input" + + this.#setLegacyLinks(false) + return + } + + const outputNode = network.getNodeById(link.origin_id) + if (!outputNode) { + console.warn("No output node found for link.", link) + return + } + + const outputSlot = outputNode.outputs.at(link.origin_slot) + if (!outputSlot) { + console.warn("No output slot found for link.", link) + return + } + + const renderLink = new ToInputRenderLink(network, outputNode, outputSlot, reroute) + renderLink.fromDirection = LinkDirection.NONE + this.renderLinks.push(renderLink) + + this.state.connectingTo = "input" + + this.#setLegacyLinks(false) + } + + /** + * Drags a new link from a reroute to an output slot. + * @param network The network that the link being connected belongs to + * @param reroute The reroute that the link is being dragged from + */ + dragFromRerouteToOutput(network: LinkNetwork, reroute: Reroute): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const link = reroute.firstLink ?? reroute.firstFloatingLink + if (!link) { + console.warn("No link found for reroute.") + return + } + + if (link.target_id === SUBGRAPH_OUTPUT_ID) { + if (!(network instanceof Subgraph)) { + console.warn("Subgraph output link found in non-subgraph network.") + return + } + + const output = network.outputs.at(link.target_slot) + if (!output) throw new Error("No subgraph output found for link.") + + const renderLink = new ToOutputFromIoNodeLink(network, network.outputNode, output, reroute) + renderLink.fromDirection = LinkDirection.NONE + this.renderLinks.push(renderLink) + + this.state.connectingTo = "output" + + this.#setLegacyLinks(false) + return + } + + const inputNode = network.getNodeById(link.target_id) + if (!inputNode) { + console.warn("No input node found for link.", link) + return + } + + const inputSlot = inputNode.inputs.at(link.target_slot) + if (!inputSlot) { + console.warn("No input slot found for link.", link) + return + } + + const renderLink = new ToOutputFromRerouteLink(network, inputNode, inputSlot, reroute, this) + renderLink.fromDirection = LinkDirection.LEFT + this.renderLinks.push(renderLink) + + this.state.connectingTo = "output" + + this.#setLegacyLinks(true) + } + + dragFromLinkSegment(network: LinkNetwork, linkSegment: LinkSegment): void { + if (this.isConnecting) throw new Error("Already dragging links.") + + const { state } = this + if (linkSegment.origin_id == null || linkSegment.origin_slot == null) return + + const node = network.getNodeById(linkSegment.origin_id) + if (!node) return + + const slot = node.outputs.at(linkSegment.origin_slot) + if (!slot) return + + const reroute = network.getReroute(linkSegment.parentId) + const renderLink = new ToInputRenderLink(network, node, slot, reroute) + renderLink.fromDirection = LinkDirection.NONE + this.renderLinks.push(renderLink) + + state.connectingTo = "input" + + this.#setLegacyLinks(false) + } + + /** + * Connects the links being dropped + * @param event Contains the drop location, in canvas space + */ + dropLinks(locator: ItemLocator, event: CanvasPointerEvent): void { + if (!this.isConnecting) { + const mayContinue = this.events.dispatch("before-drop-links", { renderLinks: this.renderLinks, event }) + if (mayContinue === false) return + } + + try { + const { canvasX, canvasY } = event + + const ioNode = locator.getIoNodeOnPos?.(canvasX, canvasY) + if (ioNode) { + this.dropOnIoNode(ioNode, event) + return + } + + const node = locator.getNodeOnPos(canvasX, canvasY) ?? undefined + if (node) { + this.dropOnNode(node, event) + } else { + // Get reroute if no node is found + const reroute = locator.getRerouteOnPos(canvasX, canvasY) + // Drop output->input link on reroute is not impl. + if (reroute && this.isRerouteValidDrop(reroute)) { + this.dropOnReroute(reroute, event) + } else { + this.dropOnNothing(event) + } + } + } finally { + this.events.dispatch("after-drop-links", { renderLinks: this.renderLinks, event }) + } + } + + dropOnIoNode(ioNode: SubgraphInputNode | SubgraphOutputNode, event: CanvasPointerEvent): void { + const { renderLinks, state } = this + const { connectingTo } = state + const { canvasX, canvasY } = event + + if (connectingTo === "input" && ioNode instanceof SubgraphOutputNode) { + const output = ioNode.getSlotInPosition(canvasX, canvasY) + if (!output) throw new Error("No output slot found for link.") + + for (const link of renderLinks) { + link.connectToSubgraphOutput(output, this.events) + } + } else if (connectingTo === "output" && ioNode instanceof SubgraphInputNode) { + const input = ioNode.getSlotInPosition(canvasX, canvasY) + if (!input) throw new Error("No input slot found for link.") + + for (const link of renderLinks) { + link.connectToSubgraphInput(input, this.events) + } + } else { + console.error("Invalid connectingTo state &/ ioNode", connectingTo, ioNode) + } + } + + dropOnNode(node: LGraphNode, event: CanvasPointerEvent) { + const { renderLinks, state } = this + const { connectingTo } = state + const { canvasX, canvasY } = event + + // Do nothing if every connection would loop back + if (renderLinks.every(link => link.node === node)) return + + // To output + if (connectingTo === "output") { + const output = node.getOutputOnPos([canvasX, canvasY]) + + if (output) { + this.#dropOnOutput(node, output) + } else { + this.connectToNode(node, event) + } + // To input + } else if (connectingTo === "input") { + const input = node.getInputOnPos([canvasX, canvasY]) + const inputOrSocket = input ?? node.getSlotFromWidget(this.overWidget) + + // Input slot + if (inputOrSocket) { + this.#dropOnInput(node, inputOrSocket) + } else { + // Node background / title + this.connectToNode(node, event) + } + } + } + + dropOnReroute(reroute: Reroute, event: CanvasPointerEvent): void { + const mayContinue = this.events.dispatch("dropped-on-reroute", { reroute, event }) + if (mayContinue === false) return + + // Connecting to input + if (this.state.connectingTo === "input") { + if (this.renderLinks.length !== 1) throw new Error(`Attempted to connect ${this.renderLinks.length} input links to a reroute.`) + + const renderLink = this.renderLinks[0] + this._connectOutputToReroute(reroute, renderLink) + + return + } + + // Connecting to output + for (const link of this.renderLinks) { + if (link.toType !== "output") continue + + const result = reroute.findSourceOutput() + if (!result) continue + + const { node, output } = result + if (!link.canConnectToOutput(node, output)) continue + + link.connectToRerouteOutput(reroute, node, output, this.events) + } + } + + /** @internal Temporary workaround - requires refactor. */ + _connectOutputToReroute(reroute: Reroute, renderLink: RenderLinkUnion): void { + const results = reroute.findTargetInputs() + if (!results?.length) return + + const maybeReroutes = reroute.getReroutes() + if (maybeReroutes === null) throw new Error("Reroute loop detected.") + + const originalReroutes = maybeReroutes.slice(0, -1).reverse() + + // From reroute to reroute + if (renderLink instanceof ToInputRenderLink) { + const { node, fromSlot, fromSlotIndex, fromReroute } = renderLink + + reroute.setFloatingLinkOrigin(node, fromSlot, fromSlotIndex) + + // Clean floating link IDs from reroutes about to be removed from the chain + if (fromReroute != null) { + for (const originalReroute of originalReroutes) { + if (originalReroute.id === fromReroute.id) break + + for (const linkId of reroute.floatingLinkIds) { + originalReroute.floatingLinkIds.delete(linkId) + } + } + } + } + + // Filter before any connections are re-created + const filtered = results.filter(result => renderLink.toType === "input" && canConnectInputLinkToReroute(renderLink, result.node, result.input, reroute)) + + for (const result of filtered) { + renderLink.connectToRerouteInput(reroute, result, this.events, originalReroutes) + } + + return + } + + dropOnNothing(event: CanvasPointerEvent): void { + // For external event only. + const mayContinue = this.events.dispatch("dropped-on-canvas", event) + if (mayContinue === false) return + + this.disconnectLinks() + } + + /** + * Disconnects all moving links. + * @remarks This is called when the links are dropped on the canvas. + * May be called by consumers to e.g. drag links into a bin / void. + */ + disconnectLinks(): void { + for (const link of this.renderLinks) { + if (link instanceof MovingLinkBase) { + link.disconnect() + } + } + } + + /** + * Connects the links being dropped onto a node to the first matching slot. + * @param node The node that the links are being dropped on + * @param event Contains the drop location, in canvas space + */ + connectToNode(node: LGraphNode, event: CanvasPointerEvent): void { + const { state: { connectingTo } } = this + + const mayContinue = this.events.dispatch("dropped-on-node", { node, event }) + if (mayContinue === false) return + + // Assume all links are the same type, disallow loopback + const firstLink = this.renderLinks[0] + if (!firstLink) return + + // Use a single type check before looping; ensures all dropped links go to the same slot + if (connectingTo === "output") { + // Dropping new output link + const output = node.findOutputByType(firstLink.fromSlot.type)?.slot + console.debug("out", node, output, firstLink.fromSlot) + if (output === undefined) { + console.warn(`Could not find slot for link type: [${firstLink.fromSlot.type}].`) + return + } + + this.#dropOnOutput(node, output) + } else if (connectingTo === "input") { + // Dropping new input link + const input = node.findInputByType(firstLink.fromSlot.type)?.slot + console.debug("in", node, input, firstLink.fromSlot) + if (input === undefined) { + console.warn(`Could not find slot for link type: [${firstLink.fromSlot.type}].`) + return + } + + this.#dropOnInput(node, input) + } + } + + #dropOnInput(node: LGraphNode, input: INodeInputSlot): void { + for (const link of this.renderLinks) { + if (!link.canConnectToInput(node, input)) continue + + link.connectToInput(node, input, this.events) + } + } + + #dropOnOutput(node: LGraphNode, output: INodeOutputSlot): void { + for (const link of this.renderLinks) { + if (!link.canConnectToOutput(node, output)) { + if (link instanceof MovingOutputLink && link.link.parentId !== undefined) { + // Reconnect link without reroutes + link.outputNode.connectSlots(link.outputSlot, link.inputNode, link.inputSlot, undefined!) + } + continue + } + + link.connectToOutput(node, output, this.events) + } + } + + isInputValidDrop(node: LGraphNode, input: INodeInputSlot): boolean { + return this.renderLinks.some(link => link.canConnectToInput(node, input)) + } + + isNodeValidDrop(node: LGraphNode): boolean { + if (this.state.connectingTo === "output") { + return node.outputs.some(output => this.renderLinks.some(link => link.canConnectToOutput(node, output))) + } + + return node.inputs.some(input => this.renderLinks.some(link => link.canConnectToInput(node, input))) + } + + /** + * Checks if a reroute is a valid drop target for any of the links being connected. + * @param reroute The reroute that would be dropped on. + * @returns `true` if any of the current links being connected are valid for the given reroute. + */ + isRerouteValidDrop(reroute: Reroute): boolean { + if (this.state.connectingTo === "input") { + const results = reroute.findTargetInputs() + if (!results?.length) return false + + for (const { node, input } of results) { + for (const renderLink of this.renderLinks) { + if (renderLink.toType !== "input") continue + if (canConnectInputLinkToReroute(renderLink, node, input, reroute)) return true + } + } + } else { + const result = reroute.findSourceOutput() + if (!result) return false + + const { node, output } = result + + for (const renderLink of this.renderLinks) { + if (renderLink.toType !== "output") continue + if (!renderLink.canConnectToReroute(reroute)) continue + if (renderLink.canConnectToOutput(node, output)) return true + } + } + + return false + } + + /** Sets connecting_links, used by some extensions still. */ + #setLegacyLinks(fromSlotIsInput: boolean): void { + const links = this.renderLinks.map((link) => { + const input = fromSlotIsInput ? link.fromSlot as INodeInputSlot : null + const output = fromSlotIsInput ? null : link.fromSlot as INodeOutputSlot + + const afterRerouteId = link instanceof MovingLinkBase ? link.link?.parentId : link.fromReroute?.id + + return { + node: link.node as LGraphNode, + slot: link.fromSlotIndex, + input, + output, + pos: link.fromPos, + afterRerouteId, + } satisfies ConnectingLink + }) + this.#setConnectingLinks(links) + } + + /** + * Exports the current state of the link connector. + * @param network The network that the links being connected belong to. + * @returns A POJO with the state of the link connector, links being connected, and their network. + * @remarks Other than {@link network}, all properties are shallow cloned. + */ + export(network: LinkNetwork): LinkConnectorExport { + return { + renderLinks: [...this.renderLinks], + inputLinks: [...this.inputLinks], + outputLinks: [...this.outputLinks], + floatingLinks: [...this.floatingLinks], + state: { ...this.state }, + network, + } + } + + /** + * Adds an event listener that will be automatically removed when the reset event is fired. + * @param eventName The event to listen for. + * @param listener The listener to call when the event is fired. + */ + listenUntilReset( + eventName: K, + listener: Parameters>[1], + options?: Parameters>[2], + ) { + this.events.addEventListener(eventName, listener, options) + this.events.addEventListener("reset", () => this.events.removeEventListener(eventName, listener), { once: true }) + } + + /** + * Resets everything to its initial state. + * + * Effectively cancels moving or connecting links. + */ + reset(force = false): void { + const mayContinue = this.events.dispatch("reset", force) + if (mayContinue === false) return + + const { state, outputLinks, inputLinks, hiddenReroutes, renderLinks, floatingLinks } = this + + if (!force && state.connectingTo === undefined) return + state.connectingTo = undefined + + for (const link of outputLinks) delete link._dragging + for (const link of inputLinks) delete link._dragging + for (const link of floatingLinks) delete link._dragging + for (const reroute of hiddenReroutes) delete reroute._dragging + + renderLinks.length = 0 + inputLinks.length = 0 + outputLinks.length = 0 + floatingLinks.length = 0 + hiddenReroutes.clear() + state.multi = false + state.draggingExistingLinks = false + state.snapLinksPos = undefined + } +} + +/** Validates that a single {@link RenderLink} can be dropped on the specified reroute. */ +function canConnectInputLinkToReroute( + link: ToInputRenderLink | MovingInputLink | FloatingRenderLink | ToInputFromIoNodeLink, + inputNode: LGraphNode, + input: INodeInputSlot, + reroute: Reroute, +): boolean { + const { fromReroute } = link + + if ( + !link.canConnectToInput(inputNode, input) || + // Would result in no change + fromReroute?.id === reroute.id || + // Cannot connect from child to parent reroute + fromReroute?.getReroutes()?.includes(reroute) + ) { + return false + } + + // Would result in no change + if (link instanceof ToInputRenderLink) { + if (reroute.parentId == null) { + // Link would make no change - output to reroute + if (reroute.firstLink?.hasOrigin(link.node.id, link.fromSlotIndex)) return false + } else if (link.fromReroute?.id === reroute.parentId) { + return false + } + } + return true +} diff --git a/src/lib/litegraph/src/canvas/MovingInputLink.ts b/src/lib/litegraph/src/canvas/MovingInputLink.ts new file mode 100644 index 0000000000..15619e1b6e --- /dev/null +++ b/src/lib/litegraph/src/canvas/MovingInputLink.ts @@ -0,0 +1,96 @@ +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { NodeLike } from "@/types/NodeLike" +import type { SubgraphIO } from "@/types/serialisation" + +import { LinkDirection } from "@/types/globalEnums" + +import { MovingLinkBase } from "./MovingLinkBase" + +export class MovingInputLink extends MovingLinkBase { + override readonly toType = "input" + + readonly node: LGraphNode + readonly fromSlot: INodeOutputSlot + readonly fromPos: Point + readonly fromDirection: LinkDirection + readonly fromSlotIndex: number + + constructor(network: LinkNetwork, link: LLink, fromReroute?: Reroute, dragDirection: LinkDirection = LinkDirection.CENTER) { + super(network, link, "input", fromReroute, dragDirection) + + this.node = this.outputNode + this.fromSlot = this.outputSlot + this.fromPos = fromReroute?.pos ?? this.outputPos + this.fromDirection = LinkDirection.NONE + this.fromSlotIndex = this.outputIndex + } + + canConnectToInput(inputNode: NodeLike, input: INodeInputSlot | SubgraphIO): boolean { + return this.node.canConnectTo(inputNode, input, this.outputSlot) + } + + canConnectToOutput(): false { + return false + } + + canConnectToReroute(reroute: Reroute): boolean { + return reroute.origin_id !== this.inputNode.id + } + + connectToInput(inputNode: LGraphNode, input: INodeInputSlot, events: CustomEventTarget): LLink | null | undefined { + if (input === this.inputSlot) return + + this.inputNode.disconnectInput(this.inputIndex, true) + const link = this.outputNode.connectSlots(this.outputSlot, inputNode, input, this.fromReroute?.id) + if (link) events.dispatch("input-moved", this) + return link + } + + connectToOutput(): never { + throw new Error("MovingInputLink cannot connect to an output.") + } + + connectToSubgraphInput(): void { + throw new Error("MovingInputLink cannot connect to a subgraph input.") + } + + connectToSubgraphOutput(output: SubgraphOutput, events?: CustomEventTarget): void { + const newLink = output.connect(this.fromSlot, this.node, this.fromReroute?.id) + events?.dispatch("link-created", newLink) + } + + connectToRerouteInput( + reroute: Reroute, + { node: inputNode, input, link: existingLink }: { node: LGraphNode, input: INodeInputSlot, link: LLink }, + events: CustomEventTarget, + originalReroutes: Reroute[], + ): void { + const { outputNode, outputSlot, fromReroute } = this + + // Clean up reroutes + for (const reroute of originalReroutes) { + if (reroute.id === this.link.parentId) break + + if (reroute.totalLinks === 1) reroute.remove() + } + // Set the parentId of the reroute we dropped on, to the reroute we dragged from + reroute.parentId = fromReroute?.id + + const newLink = outputNode.connectSlots(outputSlot, inputNode, input, existingLink.parentId) + if (newLink) events.dispatch("input-moved", this) + } + + connectToRerouteOutput(): never { + throw new Error("MovingInputLink cannot connect to an output.") + } + + disconnect(): boolean { + return this.inputNode.disconnectInput(this.inputIndex, true) + } +} diff --git a/src/lib/litegraph/src/canvas/MovingLinkBase.ts b/src/lib/litegraph/src/canvas/MovingLinkBase.ts new file mode 100644 index 0000000000..aaba42e8ab --- /dev/null +++ b/src/lib/litegraph/src/canvas/MovingLinkBase.ts @@ -0,0 +1,93 @@ +import type { RenderLink } from "./RenderLink" +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode, NodeId } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" + +import { LinkDirection } from "@/types/globalEnums" + +/** + * Represents an existing link that is currently being dragged by the user from one slot to another. + * + * This is a heavier, but short-lived convenience data structure. + * All refs to {@link MovingInputLink} and {@link MovingOutputLink} should be discarded on drop. + * @remarks + * At time of writing, Litegraph is using several different styles and methods to handle link dragging. + * + * Once the library has undergone more substantial changes to the way links are managed, + * many properties of this class will be superfluous and removable. + */ + +export abstract class MovingLinkBase implements RenderLink { + abstract readonly node: LGraphNode + abstract readonly fromSlot: INodeOutputSlot | INodeInputSlot + abstract readonly fromPos: Point + abstract readonly fromDirection: LinkDirection + abstract readonly fromSlotIndex: number + + readonly outputNodeId: NodeId + readonly outputNode: LGraphNode + readonly outputSlot: INodeOutputSlot + readonly outputIndex: number + readonly outputPos: Point + + readonly inputNodeId: NodeId + readonly inputNode: LGraphNode + readonly inputSlot: INodeInputSlot + readonly inputIndex: number + readonly inputPos: Point + + constructor( + readonly network: LinkNetwork, + readonly link: LLink, + readonly toType: "input" | "output", + readonly fromReroute?: Reroute, + readonly dragDirection: LinkDirection = LinkDirection.CENTER, + ) { + const { + origin_id: outputNodeId, + target_id: inputNodeId, + origin_slot: outputIndex, + target_slot: inputIndex, + } = link + + // Store output info + const outputNode = network.getNodeById(outputNodeId) ?? undefined + if (!outputNode) throw new Error(`Creating MovingRenderLink for link [${link.id}] failed: Output node [${outputNodeId}] not found.`) + + const outputSlot = outputNode.outputs.at(outputIndex) + if (!outputSlot) throw new Error(`Creating MovingRenderLink for link [${link.id}] failed: Output slot [${outputIndex}] not found.`) + + this.outputNodeId = outputNodeId + this.outputNode = outputNode + this.outputSlot = outputSlot + this.outputIndex = outputIndex + this.outputPos = outputNode.getOutputPos(outputIndex) + + // Store input info + const inputNode = network.getNodeById(inputNodeId) ?? undefined + if (!inputNode) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input node [${inputNodeId}] not found.`) + + const inputSlot = inputNode.inputs.at(inputIndex) + if (!inputSlot) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input slot [${inputIndex}] not found.`) + + this.inputNodeId = inputNodeId + this.inputNode = inputNode + this.inputSlot = inputSlot + this.inputIndex = inputIndex + this.inputPos = inputNode.getInputPos(inputIndex) + } + + abstract connectToInput(node: LGraphNode, input: INodeInputSlot, events?: CustomEventTarget): void + abstract connectToOutput(node: LGraphNode, output: INodeOutputSlot, events?: CustomEventTarget): void + abstract connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget): void + abstract connectToSubgraphOutput(output: SubgraphOutput, events?: CustomEventTarget): void + abstract connectToRerouteInput(reroute: Reroute, { node, input, link }: { node: LGraphNode, input: INodeInputSlot, link: LLink }, events: CustomEventTarget, originalReroutes: Reroute[]): void + abstract connectToRerouteOutput(reroute: Reroute, outputNode: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget): void + + abstract disconnect(): boolean +} diff --git a/src/lib/litegraph/src/canvas/MovingOutputLink.ts b/src/lib/litegraph/src/canvas/MovingOutputLink.ts new file mode 100644 index 0000000000..8d6838d650 --- /dev/null +++ b/src/lib/litegraph/src/canvas/MovingOutputLink.ts @@ -0,0 +1,102 @@ +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { NodeLike } from "@/types/NodeLike" +import type { SubgraphIO } from "@/types/serialisation" + +import { LinkDirection } from "@/types/globalEnums" + +import { MovingLinkBase } from "./MovingLinkBase" + +export class MovingOutputLink extends MovingLinkBase { + override readonly toType = "output" + + readonly node: LGraphNode + readonly fromSlot: INodeInputSlot + readonly fromPos: Point + readonly fromDirection: LinkDirection + readonly fromSlotIndex: number + + constructor(network: LinkNetwork, link: LLink, fromReroute?: Reroute, dragDirection: LinkDirection = LinkDirection.CENTER) { + super(network, link, "output", fromReroute, dragDirection) + + this.node = this.inputNode + this.fromSlot = this.inputSlot + this.fromPos = fromReroute?.pos ?? this.inputPos + this.fromDirection = LinkDirection.LEFT + this.fromSlotIndex = this.inputIndex + } + + canConnectToInput(): false { + return false + } + + canConnectToOutput(outputNode: NodeLike, output: INodeOutputSlot | SubgraphIO): boolean { + return outputNode.canConnectTo(this.node, this.inputSlot, output) + } + + canConnectToReroute(reroute: Reroute): boolean { + return reroute.origin_id !== this.outputNode.id + } + + connectToInput(): never { + throw new Error("MovingOutputLink cannot connect to an input.") + } + + connectToOutput(outputNode: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget): LLink | null | undefined { + if (output === this.outputSlot) return + + const link = outputNode.connectSlots(output, this.inputNode, this.inputSlot, this.link.parentId) + if (link) events.dispatch("output-moved", this) + return link + } + + connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget): void { + const newLink = input.connect(this.fromSlot, this.node, this.fromReroute?.id) + events?.dispatch("link-created", newLink) + } + + connectToSubgraphOutput(): void { + throw new Error("MovingOutputLink cannot connect to a subgraph output.") + } + + connectToRerouteInput(): never { + throw new Error("MovingOutputLink cannot connect to an input.") + } + + connectToRerouteOutput( + reroute: Reroute, + outputNode: LGraphNode, + output: INodeOutputSlot, + events: CustomEventTarget, + ): void { + // Moving output side of links + const { inputNode, inputSlot, fromReroute } = this + + // Creating a new link removes floating prop - check before connecting + const floatingTerminus = reroute?.floating?.slotType === "output" + + // Connect the first reroute of the link being dragged to the reroute being dropped on + if (fromReroute) { + fromReroute.parentId = reroute.id + } else { + // If there are no reroutes, directly connect the link + this.link.parentId = reroute.id + } + // Use the last reroute id on the link to retain all reroutes + outputNode.connectSlots(output, inputNode, inputSlot, this.link.parentId) + + // Connecting from the final reroute of a floating reroute chain + if (floatingTerminus) reroute.removeAllFloatingLinks() + + events.dispatch("output-moved", this) + } + + disconnect(): boolean { + return this.outputNode.disconnectOutput(this.outputIndex, this.inputNode) + } +} diff --git a/src/lib/litegraph/src/canvas/RenderLink.ts b/src/lib/litegraph/src/canvas/RenderLink.ts new file mode 100644 index 0000000000..44fd51fd14 --- /dev/null +++ b/src/lib/litegraph/src/canvas/RenderLink.ts @@ -0,0 +1,50 @@ +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { INodeInputSlot, INodeOutputSlot, LLink, Reroute } from "@/litegraph" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphIONodeBase } from "@/subgraph/SubgraphIONodeBase" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { LinkDirection } from "@/types/globalEnums" + +export interface RenderLink { + /** The type of link being connected. */ + readonly toType: "input" | "output" + /** The source {@link Point} of the link being connected. */ + readonly fromPos: Point + /** The direction the link starts off as. If {@link toType} is `output`, this will be the direction the link input faces. */ + readonly fromDirection: LinkDirection + /** If set, this will force a dragged link "point" from the cursor in the specified direction. */ + dragDirection: LinkDirection + + /** The network that the link belongs to. */ + readonly network: LinkNetwork + /** The node that the link is being connected from. */ + readonly node: LGraphNode | SubgraphIONodeBase + /** The slot that the link is being connected from. */ + readonly fromSlot: INodeOutputSlot | INodeInputSlot | SubgraphInput | SubgraphOutput + /** The index of the slot that the link is being connected from. */ + readonly fromSlotIndex: number + /** The reroute that the link is being connected from. */ + readonly fromReroute?: Reroute + + connectToInput(node: LGraphNode, input: INodeInputSlot, events?: CustomEventTarget): void + connectToOutput(node: LGraphNode, output: INodeOutputSlot, events?: CustomEventTarget): void + connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget): void + connectToSubgraphOutput(output: SubgraphOutput, events?: CustomEventTarget): void + + connectToRerouteInput( + reroute: Reroute, + { node, input, link }: { node: LGraphNode, input: INodeInputSlot, link: LLink }, + events: CustomEventTarget, + originalReroutes: Reroute[], + ): void + + connectToRerouteOutput( + reroute: Reroute, + outputNode: LGraphNode, + output: INodeOutputSlot, + events: CustomEventTarget, + ): void +} diff --git a/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts b/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts new file mode 100644 index 0000000000..0ed8e1b3a6 --- /dev/null +++ b/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts @@ -0,0 +1,130 @@ +import type { RenderLink } from "./RenderLink" +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeInputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphInputNode } from "@/subgraph/SubgraphInputNode" +import type { NodeLike } from "@/types/NodeLike" + +import { LinkDirection } from "@/types/globalEnums" + +/** Connecting TO an input slot. */ + +export class ToInputFromIoNodeLink implements RenderLink { + readonly toType = "input" + readonly fromSlotIndex: number + readonly fromPos: Point + fromDirection: LinkDirection = LinkDirection.RIGHT + readonly existingLink?: LLink + + constructor( + readonly network: LinkNetwork, + readonly node: SubgraphInputNode, + readonly fromSlot: SubgraphInput, + readonly fromReroute?: Reroute, + public dragDirection: LinkDirection = LinkDirection.CENTER, + existingLink?: LLink, + ) { + const outputIndex = node.slots.indexOf(fromSlot) + if (outputIndex === -1 && fromSlot !== node.emptySlot) { + throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`) + } + + this.fromSlotIndex = outputIndex + this.fromPos = fromReroute + ? fromReroute.pos + : fromSlot.pos + this.existingLink = existingLink + } + + canConnectToInput(inputNode: NodeLike, input: INodeInputSlot): boolean { + return this.node.canConnectTo(inputNode, input, this.fromSlot) + } + + canConnectToOutput(): false { + return false + } + + connectToInput(node: LGraphNode, input: INodeInputSlot, events: CustomEventTarget) { + const { fromSlot, fromReroute, existingLink } = this + + const newLink = fromSlot.connect(input, node, fromReroute?.id) + + if (existingLink) { + // Moving an existing link + events.dispatch("input-moved", this) + } else { + // Creating a new link + events.dispatch("link-created", newLink) + } + } + + connectToSubgraphOutput(): void { + throw new Error("Not implemented") + } + + connectToRerouteInput( + reroute: Reroute, + { + node: inputNode, + input, + link, + }: { node: LGraphNode, input: INodeInputSlot, link: LLink }, + events: CustomEventTarget, + originalReroutes: Reroute[], + ) { + const { fromSlot, fromReroute } = this + + // Check before creating new link overwrites the value + const floatingTerminus = fromReroute?.floating?.slotType === "output" + + // Set the parentId of the reroute we dropped on, to the reroute we dragged from + reroute.parentId = fromReroute?.id + + const newLink = fromSlot.connect(input, inputNode, link.parentId) + + // Connecting from the final reroute of a floating reroute chain + if (floatingTerminus) fromReroute.removeAllFloatingLinks() + + // Clean up reroutes + for (const reroute of originalReroutes) { + if (reroute.id === fromReroute?.id) break + + reroute.removeLink(link) + if (reroute.totalLinks === 0) { + if (link.isFloating) { + // Cannot float from both sides - remove + reroute.remove() + } else { + // Convert to floating + const cl = link.toFloating("output", reroute.id) + this.network.addFloatingLink(cl) + reroute.floating = { slotType: "output" } + } + } + } + + if (this.existingLink) { + // Moving an existing link + events.dispatch("input-moved", this) + } else { + // Creating a new link + events.dispatch("link-created", newLink) + } + } + + connectToOutput() { + throw new Error("ToInputRenderLink cannot connect to an output.") + } + + connectToSubgraphInput(): void { + throw new Error("ToInputRenderLink cannot connect to a subgraph input.") + } + + connectToRerouteOutput() { + throw new Error("ToInputRenderLink cannot connect to an output.") + } +} diff --git a/src/lib/litegraph/src/canvas/ToInputRenderLink.ts b/src/lib/litegraph/src/canvas/ToInputRenderLink.ts new file mode 100644 index 0000000000..bdb8a08c87 --- /dev/null +++ b/src/lib/litegraph/src/canvas/ToInputRenderLink.ts @@ -0,0 +1,112 @@ +import type { RenderLink } from "./RenderLink" +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { NodeLike } from "@/types/NodeLike" + +import { LinkDirection } from "@/types/globalEnums" + +/** Connecting TO an input slot. */ + +export class ToInputRenderLink implements RenderLink { + readonly toType = "input" + readonly fromPos: Point + readonly fromSlotIndex: number + fromDirection: LinkDirection = LinkDirection.RIGHT + + constructor( + readonly network: LinkNetwork, + readonly node: LGraphNode, + readonly fromSlot: INodeOutputSlot, + readonly fromReroute?: Reroute, + public dragDirection: LinkDirection = LinkDirection.CENTER, + ) { + const outputIndex = node.outputs.indexOf(fromSlot) + if (outputIndex === -1) throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`) + + this.fromSlotIndex = outputIndex + this.fromPos = fromReroute + ? fromReroute.pos + : this.node.getOutputPos(outputIndex) + } + + canConnectToInput(inputNode: NodeLike, input: INodeInputSlot): boolean { + return this.node.canConnectTo(inputNode, input, this.fromSlot) + } + + canConnectToOutput(): false { + return false + } + + connectToInput(node: LGraphNode, input: INodeInputSlot, events: CustomEventTarget) { + const { node: outputNode, fromSlot, fromReroute } = this + if (node === outputNode) return + + const newLink = outputNode.connectSlots(fromSlot, node, input, fromReroute?.id) + events.dispatch("link-created", newLink) + } + + connectToSubgraphOutput(output: SubgraphOutput, events: CustomEventTarget) { + const newLink = output.connect(this.fromSlot, this.node, this.fromReroute?.id) + events.dispatch("link-created", newLink) + } + + connectToRerouteInput( + reroute: Reroute, + { + node: inputNode, + input, + link, + }: { node: LGraphNode, input: INodeInputSlot, link: LLink }, + events: CustomEventTarget, + originalReroutes: Reroute[], + ) { + const { node: outputNode, fromSlot, fromReroute } = this + + // Check before creating new link overwrites the value + const floatingTerminus = fromReroute?.floating?.slotType === "output" + + // Set the parentId of the reroute we dropped on, to the reroute we dragged from + reroute.parentId = fromReroute?.id + + const newLink = outputNode.connectSlots(fromSlot, inputNode, input, link.parentId) + + // Connecting from the final reroute of a floating reroute chain + if (floatingTerminus) fromReroute.removeAllFloatingLinks() + + // Clean up reroutes + for (const reroute of originalReroutes) { + if (reroute.id === fromReroute?.id) break + + reroute.removeLink(link) + if (reroute.totalLinks === 0) { + if (link.isFloating) { + // Cannot float from both sides - remove + reroute.remove() + } else { + // Convert to floating + const cl = link.toFloating("output", reroute.id) + this.network.addFloatingLink(cl) + reroute.floating = { slotType: "output" } + } + } + } + events.dispatch("link-created", newLink) + } + + connectToOutput() { + throw new Error("ToInputRenderLink cannot connect to an output.") + } + + connectToSubgraphInput(): void { + throw new Error("ToInputRenderLink cannot connect to a subgraph input.") + } + + connectToRerouteOutput() { + throw new Error("ToInputRenderLink cannot connect to an output.") + } +} diff --git a/src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts b/src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts new file mode 100644 index 0000000000..408dca32f7 --- /dev/null +++ b/src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts @@ -0,0 +1,87 @@ +import type { RenderLink } from "./RenderLink" +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeOutputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { Reroute } from "@/Reroute" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { SubgraphOutputNode } from "@/subgraph/SubgraphOutputNode" +import type { NodeLike } from "@/types/NodeLike" +import type { SubgraphIO } from "@/types/serialisation" + +import { LinkDirection } from "@/types/globalEnums" + +/** Connecting TO an output slot. */ + +export class ToOutputFromIoNodeLink implements RenderLink { + readonly toType = "output" + readonly fromPos: Point + readonly fromSlotIndex: number + fromDirection: LinkDirection = LinkDirection.LEFT + + constructor( + readonly network: LinkNetwork, + readonly node: SubgraphOutputNode, + readonly fromSlot: SubgraphOutput, + readonly fromReroute?: Reroute, + public dragDirection: LinkDirection = LinkDirection.CENTER, + ) { + const inputIndex = node.slots.indexOf(fromSlot) + if (inputIndex === -1 && fromSlot !== node.emptySlot) { + throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`) + } + + this.fromSlotIndex = inputIndex + this.fromPos = fromReroute + ? fromReroute.pos + : fromSlot.pos + } + + canConnectToInput(): false { + return false + } + + canConnectToOutput(outputNode: NodeLike, output: INodeOutputSlot | SubgraphIO): boolean { + return this.node.canConnectTo(outputNode, this.fromSlot, output) + } + + canConnectToReroute(reroute: Reroute): boolean { + if (reroute.origin_id === this.node.id) return false + return true + } + + connectToOutput(node: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget) { + const { fromSlot, fromReroute } = this + + const newLink = fromSlot.connect(output, node, fromReroute?.id) + events.dispatch("link-created", newLink) + } + + connectToSubgraphInput(): void { + throw new Error("Not implemented") + } + + connectToRerouteOutput( + reroute: Reroute, + outputNode: LGraphNode, + output: INodeOutputSlot, + events: CustomEventTarget, + ): void { + const { fromSlot } = this + + const newLink = fromSlot.connect(output, outputNode, reroute?.id) + events.dispatch("link-created", newLink) + } + + connectToInput() { + throw new Error("ToOutputRenderLink cannot connect to an input.") + } + + connectToSubgraphOutput(): void { + throw new Error("ToOutputRenderLink cannot connect to a subgraph output.") + } + + connectToRerouteInput() { + throw new Error("ToOutputRenderLink cannot connect to an input.") + } +} diff --git a/src/lib/litegraph/src/canvas/ToOutputFromRerouteLink.ts b/src/lib/litegraph/src/canvas/ToOutputFromRerouteLink.ts new file mode 100644 index 0000000000..ba3a6570f9 --- /dev/null +++ b/src/lib/litegraph/src/canvas/ToOutputFromRerouteLink.ts @@ -0,0 +1,31 @@ +import type { LinkConnector } from "./LinkConnector" +import type { LGraphNode } from "@/LGraphNode" +import type { INodeInputSlot, INodeOutputSlot, LinkNetwork } from "@/litegraph" +import type { Reroute } from "@/Reroute" + +import { ToInputRenderLink } from "./ToInputRenderLink" +import { ToOutputRenderLink } from "./ToOutputRenderLink" + +/** + * @internal A workaround class to support connecting to reroutes to node outputs. + */ +export class ToOutputFromRerouteLink extends ToOutputRenderLink { + constructor( + network: LinkNetwork, + node: LGraphNode, + fromSlot: INodeInputSlot, + override readonly fromReroute: Reroute, + readonly linkConnector: LinkConnector, + ) { + super(network, node, fromSlot, fromReroute) + } + + override canConnectToReroute(): false { + return false + } + + override connectToOutput(node: LGraphNode, output: INodeOutputSlot) { + const nuRenderLink = new ToInputRenderLink(this.network, node, output) + this.linkConnector._connectOutputToReroute(this.fromReroute, nuRenderLink) + } +} diff --git a/src/lib/litegraph/src/canvas/ToOutputRenderLink.ts b/src/lib/litegraph/src/canvas/ToOutputRenderLink.ts new file mode 100644 index 0000000000..1f27627701 --- /dev/null +++ b/src/lib/litegraph/src/canvas/ToOutputRenderLink.ts @@ -0,0 +1,85 @@ +import type { RenderLink } from "./RenderLink" +import type { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import type { LinkConnectorEventMap } from "@/infrastructure/LinkConnectorEventMap" +import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { Reroute } from "@/Reroute" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { NodeLike } from "@/types/NodeLike" +import type { SubgraphIO } from "@/types/serialisation" + +import { LinkDirection } from "@/types/globalEnums" + +/** Connecting TO an output slot. */ + +export class ToOutputRenderLink implements RenderLink { + readonly toType = "output" + readonly fromPos: Point + readonly fromSlotIndex: number + fromDirection: LinkDirection = LinkDirection.LEFT + + constructor( + readonly network: LinkNetwork, + readonly node: LGraphNode, + readonly fromSlot: INodeInputSlot, + readonly fromReroute?: Reroute, + public dragDirection: LinkDirection = LinkDirection.CENTER, + ) { + const inputIndex = node.inputs.indexOf(fromSlot) + if (inputIndex === -1) throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`) + + this.fromSlotIndex = inputIndex + this.fromPos = fromReroute + ? fromReroute.pos + : this.node.getInputPos(inputIndex) + } + + canConnectToInput(): false { + return false + } + + canConnectToOutput(outputNode: NodeLike, output: INodeOutputSlot | SubgraphIO): boolean { + return this.node.canConnectTo(outputNode, this.fromSlot, output) + } + + canConnectToReroute(reroute: Reroute): boolean { + if (reroute.origin_id === this.node.id) return false + return true + } + + connectToOutput(node: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget) { + const { node: inputNode, fromSlot, fromReroute } = this + if (!inputNode) return + + const newLink = node.connectSlots(output, inputNode, fromSlot, fromReroute?.id) + events.dispatch("link-created", newLink) + } + + connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget): void { + const newLink = input.connect(this.fromSlot, this.node, this.fromReroute?.id) + events?.dispatch("link-created", newLink) + } + + connectToRerouteOutput( + reroute: Reroute, + outputNode: LGraphNode, + output: INodeOutputSlot, + events: CustomEventTarget, + ): void { + const { node: inputNode, fromSlot } = this + const newLink = outputNode.connectSlots(output, inputNode, fromSlot, reroute?.id) + events.dispatch("link-created", newLink) + } + + connectToInput() { + throw new Error("ToOutputRenderLink cannot connect to an input.") + } + + connectToSubgraphOutput(): void { + throw new Error("ToOutputRenderLink cannot connect to a subgraph output.") + } + + connectToRerouteInput() { + throw new Error("ToOutputRenderLink cannot connect to an input.") + } +} diff --git a/src/lib/litegraph/src/canvas/measureSlots.ts b/src/lib/litegraph/src/canvas/measureSlots.ts new file mode 100644 index 0000000000..3530f6dece --- /dev/null +++ b/src/lib/litegraph/src/canvas/measureSlots.ts @@ -0,0 +1,89 @@ +import type { INodeInputSlot, INodeOutputSlot, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" + +import { isInRectangle } from "@/measure" + +export function getNodeInputOnPos(node: LGraphNode, x: number, y: number): { index: number, input: INodeInputSlot, pos: Point } | undefined { + const { inputs } = node + if (!inputs) return + + for (const [index, input] of inputs.entries()) { + const pos = node.getInputPos(index) + + // TODO: Find a cheap way to measure text, and do it on node label change instead of here + // Input icon width + text approximation + const nameLength = input.label?.length ?? input.localized_name?.length ?? input.name?.length + const width = 20 + (nameLength || 3) * 7 + + if (isInRectangle( + x, + y, + pos[0] - 10, + pos[1] - 10, + width, + 20, + )) { + return { index, input, pos } + } + } +} + +export function getNodeOutputOnPos(node: LGraphNode, x: number, y: number): { index: number, output: INodeOutputSlot, pos: Point } | undefined { + const { outputs } = node + if (!outputs) return + + for (const [index, output] of outputs.entries()) { + const pos = node.getOutputPos(index) + + if (isInRectangle( + x, + y, + pos[0] - 10, + pos[1] - 10, + 40, + 20, + )) { + return { index, output, pos } + } + } +} + +/** + * Returns the input slot index if the given position (in graph space) is on top of a node input slot. + * A helper function - originally on the prototype of LGraphCanvas. + */ +export function isOverNodeInput( + node: LGraphNode, + canvasx: number, + canvasy: number, + slot_pos?: Point, +): number { + const result = getNodeInputOnPos(node, canvasx, canvasy) + if (!result) return -1 + + if (slot_pos) { + slot_pos[0] = result.pos[0] + slot_pos[1] = result.pos[1] + } + return result.index +} + +/** + * Returns the output slot index if the given position (in graph space) is on top of a node output slot. + * A helper function - originally on the prototype of LGraphCanvas. + */ +export function isOverNodeOutput( + node: LGraphNode, + canvasx: number, + canvasy: number, + slot_pos?: Point, +): number { + const result = getNodeOutputOnPos(node, canvasx, canvasy) + if (!result) return -1 + + if (slot_pos) { + slot_pos[0] = result.pos[0] + slot_pos[1] = result.pos[1] + } + return result.index +} diff --git a/src/lib/litegraph/src/constants.ts b/src/lib/litegraph/src/constants.ts new file mode 100644 index 0000000000..8f0b7a9099 --- /dev/null +++ b/src/lib/litegraph/src/constants.ts @@ -0,0 +1,11 @@ +/** + * Subgraph constants + * + * This entire module is exported as `Constants`. + */ + +/** ID of the virtual input node of a subgraph. */ +export const SUBGRAPH_INPUT_ID = -10 + +/** ID of the virtual output node of a subgraph. */ +export const SUBGRAPH_OUTPUT_ID = -20 diff --git a/src/lib/litegraph/src/draw.ts b/src/lib/litegraph/src/draw.ts new file mode 100644 index 0000000000..f798100918 --- /dev/null +++ b/src/lib/litegraph/src/draw.ts @@ -0,0 +1,240 @@ +import type { Rectangle } from "./infrastructure/Rectangle" +import type { CanvasColour, Rect } from "./interfaces" + +import { LiteGraph } from "./litegraph" +import { LinkDirection, RenderShape, TitleMode } from "./types/globalEnums" + +const ELLIPSIS = "\u2026" +const TWO_DOT_LEADER = "\u2025" +const ONE_DOT_LEADER = "\u2024" + +export enum SlotType { + Array = "array", + Event = -1, +} + +/** @see RenderShape */ +export enum SlotShape { + Box = RenderShape.BOX, + Arrow = RenderShape.ARROW, + Grid = RenderShape.GRID, + Circle = RenderShape.CIRCLE, + HollowCircle = RenderShape.HollowCircle, +} + +/** @see LinkDirection */ +export enum SlotDirection { + Up = LinkDirection.UP, + Right = LinkDirection.RIGHT, + Down = LinkDirection.DOWN, + Left = LinkDirection.LEFT, +} + +export enum LabelPosition { + Left = "left", + Right = "right", +} + +export interface IDrawBoundingOptions { + /** The shape to render */ + shape?: RenderShape + /** The radius of the rounded corners for {@link RenderShape.ROUND} and {@link RenderShape.CARD} */ + round_radius?: number + /** Shape will extend above the Y-axis 0 by this amount @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */ + title_height?: number + /** @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */ + title_mode?: TitleMode + /** The color that should be drawn */ + color?: CanvasColour + /** The distance between the edge of the {@link area} and the middle of the line */ + padding?: number + /** @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */ + collapsed?: boolean + /** Thickness of the line drawn (`lineWidth`) */ + lineWidth?: number +} + +export interface IDrawTextInAreaOptions { + /** The canvas to draw the text on. */ + ctx: CanvasRenderingContext2D + /** The text to draw. */ + text: string + /** The area the text will be drawn in. */ + area: Rectangle + /** The alignment of the text. */ + align?: "left" | "right" | "center" +} + +/** + * Draws only the path of a shape on the canvas, without filling. + * Used to draw indicators for node status, e.g. "selected". + * @param ctx The 2D context to draw on + * @param area The position and size of the shape to render + */ +export function strokeShape( + ctx: CanvasRenderingContext2D, + area: Rect, + { + shape = RenderShape.BOX, + round_radius, + title_height, + title_mode = TitleMode.NORMAL_TITLE, + color, + padding = 6, + collapsed = false, + lineWidth: thickness = 1, + }: IDrawBoundingOptions = {}, +): void { + // These param defaults are not compile-time static, and must be re-evaluated at runtime + round_radius ??= LiteGraph.ROUND_RADIUS + color ??= LiteGraph.NODE_BOX_OUTLINE_COLOR + + // Adjust area if title is transparent + if (title_mode === TitleMode.TRANSPARENT_TITLE) { + const height = title_height ?? LiteGraph.NODE_TITLE_HEIGHT + area[1] -= height + area[3] += height + } + + // Set up context + const { lineWidth, strokeStyle } = ctx + ctx.lineWidth = thickness + ctx.globalAlpha = 0.8 + ctx.strokeStyle = color + ctx.beginPath() + + // Draw shape based on type + const [x, y, width, height] = area + switch (shape) { + case RenderShape.BOX: { + ctx.rect( + x - padding, + y - padding, + width + 2 * padding, + height + 2 * padding, + ) + break + } + case RenderShape.ROUND: + case RenderShape.CARD: { + const radius = round_radius + padding + const isCollapsed = shape === RenderShape.CARD && collapsed + const cornerRadii = + isCollapsed || shape === RenderShape.ROUND + ? [radius] + : [radius, 2, radius, 2] + ctx.roundRect( + x - padding, + y - padding, + width + 2 * padding, + height + 2 * padding, + cornerRadii, + ) + break + } + case RenderShape.CIRCLE: { + const centerX = x + width / 2 + const centerY = y + height / 2 + const radius = Math.max(width, height) / 2 + padding + ctx.arc(centerX, centerY, radius, 0, Math.PI * 2) + break + } + } + + // Stroke the shape + ctx.stroke() + + // Reset context + ctx.lineWidth = lineWidth + ctx.strokeStyle = strokeStyle + + // TODO: Store and reset value properly. Callers currently expect this behaviour (e.g. muted nodes). + ctx.globalAlpha = 1 +} + +/** + * Truncates text using binary search to fit within a given width, appending an ellipsis if needed. + * @param ctx The canvas rendering context. + * @param text The text to truncate. + * @param maxWidth The maximum width the text (plus ellipsis) can occupy. + * @returns The truncated text, or the original text if it fits. + */ +function truncateTextToWidth(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string { + if (!(maxWidth > 0)) return "" + + // Text fits + const fullWidth = ctx.measureText(text).width + if (fullWidth <= maxWidth) return text + + const ellipsisWidth = ctx.measureText(ELLIPSIS).width * 0.75 + + // Can't even fit ellipsis + if (ellipsisWidth > maxWidth) { + const twoDotsWidth = ctx.measureText(TWO_DOT_LEADER).width * 0.75 + if (twoDotsWidth < maxWidth) return TWO_DOT_LEADER + + const oneDotWidth = ctx.measureText(ONE_DOT_LEADER).width * 0.75 + return oneDotWidth < maxWidth ? ONE_DOT_LEADER : "" + } + + let min = 0 + let max = text.length + let bestLen = 0 + + // Binary search for the longest substring that fits with the ellipsis + while (min <= max) { + const mid = Math.floor((min + max) * 0.5) + + // Avoid measuring empty string + ellipsis + if (mid === 0) { + min = mid + 1 + continue + } + + const sub = text.substring(0, mid) + const currentWidth = ctx.measureText(sub).width + ellipsisWidth + + if (currentWidth <= maxWidth) { + // This length fits, try potentially longer + bestLen = mid + min = mid + 1 + } else { + // Too long, try shorter + max = mid - 1 + } + } + + return bestLen === 0 + ? ELLIPSIS + : text.substring(0, bestLen) + ELLIPSIS +} + +/** + * Draws text within an area, truncating it and adding an ellipsis if necessary. + */ +export function drawTextInArea({ ctx, text, area, align = "left" }: IDrawTextInAreaOptions) { + const { left, right, bottom, width, centreX } = area + + // Text already fits + const fullWidth = ctx.measureText(text).width + if (fullWidth <= width) { + ctx.textAlign = align + const x = align === "left" ? left : (align === "right" ? right : centreX) + ctx.fillText(text, x, bottom) + return + } + + // Need to truncate text + const truncated = truncateTextToWidth(ctx, text, width) + if (truncated.length === 0) return + + // Draw text - left-aligned to prevent bouncing during resize + ctx.textAlign = "left" + ctx.fillText(truncated.slice(0, -1), left, bottom) + ctx.rect(left, bottom, width, 1) + + // Draw the ellipsis, right-aligned to the button + ctx.textAlign = "right" + const ellipsis = truncated.at(-1)! + ctx.fillText(ellipsis, right, bottom, ctx.measureText(ellipsis).width * 0.75) +} diff --git a/src/lib/litegraph/src/infrastructure/ConstrainedSize.ts b/src/lib/litegraph/src/infrastructure/ConstrainedSize.ts new file mode 100644 index 0000000000..11d86955dc --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/ConstrainedSize.ts @@ -0,0 +1,75 @@ +import type { ReadOnlyRect, ReadOnlySize, Size } from "@/interfaces" + +import { clamp } from "@/litegraph" + +/** + * Basic width and height, with min/max constraints. + * + * - The {@link width} and {@link height} properties are readonly + * - Size is set via {@link desiredWidth} and {@link desiredHeight} properties + * - Width and height are then updated, clamped to min/max values + */ +export class ConstrainedSize { + #width: number = 0 + #height: number = 0 + #desiredWidth: number = 0 + #desiredHeight: number = 0 + + minWidth: number = 0 + minHeight: number = 0 + maxWidth: number = Infinity + maxHeight: number = Infinity + + get width() { + return this.#width + } + + get height() { + return this.#height + } + + get desiredWidth() { + return this.#desiredWidth + } + + set desiredWidth(value: number) { + this.#desiredWidth = value + this.#width = clamp(value, this.minWidth, this.maxWidth) + } + + get desiredHeight() { + return this.#desiredHeight + } + + set desiredHeight(value: number) { + this.#desiredHeight = value + this.#height = clamp(value, this.minHeight, this.maxHeight) + } + + constructor(width: number, height: number) { + this.desiredWidth = width + this.desiredHeight = height + } + + static fromSize(size: ReadOnlySize): ConstrainedSize { + return new ConstrainedSize(size[0], size[1]) + } + + static fromRect(rect: ReadOnlyRect): ConstrainedSize { + return new ConstrainedSize(rect[2], rect[3]) + } + + setSize(size: ReadOnlySize): void { + this.desiredWidth = size[0] + this.desiredHeight = size[1] + } + + setValues(width: number, height: number): void { + this.desiredWidth = width + this.desiredHeight = height + } + + toSize(): Size { + return [this.#width, this.#height] + } +} diff --git a/src/lib/litegraph/src/infrastructure/CustomEventTarget.ts b/src/lib/litegraph/src/infrastructure/CustomEventTarget.ts new file mode 100644 index 0000000000..9008c3fa06 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/CustomEventTarget.ts @@ -0,0 +1,118 @@ +import type { NeverNever, PickNevers } from "@/types/utility" + +type EventListeners = { + readonly [K in keyof T]: ((this: EventTarget, ev: CustomEvent) => any) | EventListenerObject | null +} + +/** + * Has strongly-typed overrides of {@link EventTarget.addEventListener} and {@link EventTarget.removeEventListener}. + */ +export interface ICustomEventTarget< + EventMap extends Record, + Keys extends keyof EventMap & string = keyof EventMap & string, +> { + addEventListener( + type: K, + listener: EventListeners[K], + options?: boolean | AddEventListenerOptions, + ): void + + removeEventListener( + type: K, + listener: EventListeners[K], + options?: boolean | EventListenerOptions, + ): void + + /** @deprecated Use {@link dispatch}. */ + dispatchEvent(event: never): boolean +} + +/** + * Capable of dispatching strongly-typed events via {@link dispatch}. + * Overloads are used to ensure detail param is correctly optional. + */ +export interface CustomEventDispatcher< + EventMap extends Record, + Keys extends keyof EventMap & string = keyof EventMap & string, +> { + dispatch>(type: T, detail: EventMap[T]): boolean + dispatch>(type: T): boolean +} + +/** + * A strongly-typed, custom {@link EventTarget} that can dispatch and listen for events. + * + * 1. Define an event map + * ```ts + * export interface CustomEventMap { + * "my-event": { message: string } + * "simple-event": never + * } + * ``` + * + * 2. Create an event emitter + * ```ts + * // By subclassing + * class MyClass extends CustomEventTarget { + * // ... + * } + * + * // Or simply create an instance: + * const events = new CustomEventTarget() + * ``` + * + * 3. Dispatch events + * ```ts + * // Extended class + * const myClass = new MyClass() + * myClass.dispatch("my-event", { message: "Hello, world!" }) + * myClass.dispatch("simple-event") + * + * // Instance + * const events = new CustomEventTarget() + * events.dispatch("my-event", { message: "Hello, world!" }) + * events.dispatch("simple-event") + * ``` + */ +export class CustomEventTarget< + EventMap extends Record, + Keys extends keyof EventMap & string = keyof EventMap & string, +> + extends EventTarget implements ICustomEventTarget { + /** + * Type-safe event dispatching. + * @see {@link EventTarget.dispatchEvent} + * @param type Name of the event to dispatch + * @param detail A custom object to send with the event + * @returns `true` if the event was dispatched successfully, otherwise `false`. + */ + dispatch>(type: T, detail: EventMap[T]): boolean + dispatch>(type: T): boolean + dispatch(type: T, detail?: EventMap[T]) { + const event = new CustomEvent(type as string, { detail, cancelable: true }) + return super.dispatchEvent(event) + } + + override addEventListener( + type: K, + listener: EventListeners[K], + options?: boolean | AddEventListenerOptions, + ): void { + // Assertion: Contravariance on CustomEvent => Event + super.addEventListener(type as string, listener as EventListener, options) + } + + override removeEventListener( + type: K, + listener: EventListeners[K], + options?: boolean | EventListenerOptions, + ): void { + // Assertion: Contravariance on CustomEvent => Event + super.removeEventListener(type as string, listener as EventListener, options) + } + + /** @deprecated Use {@link dispatch}. */ + override dispatchEvent(event: never): boolean { + return super.dispatchEvent(event) + } +} diff --git a/src/lib/litegraph/src/infrastructure/InvalidLinkError.ts b/src/lib/litegraph/src/infrastructure/InvalidLinkError.ts new file mode 100644 index 0000000000..d5ffa0f857 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/InvalidLinkError.ts @@ -0,0 +1,6 @@ +export class InvalidLinkError extends Error { + constructor(message: string = "Attempted to access a link that was invalid.", cause?: Error) { + super(message, { cause }) + this.name = "InvalidLinkError" + } +} diff --git a/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts b/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts new file mode 100644 index 0000000000..d431e90ff7 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts @@ -0,0 +1,45 @@ +import type { ConnectingLink } from "@/interfaces" +import type { LGraph } from "@/LGraph" +import type { LGraphButton } from "@/LGraphButton" +import type { LGraphGroup } from "@/LGraphGroup" +import type { LGraphNode } from "@/LGraphNode" +import type { Subgraph } from "@/subgraph/Subgraph" +import type { CanvasPointerEvent } from "@/types/events" + +export interface LGraphCanvasEventMap { + /** The active graph has changed. */ + "litegraph:set-graph": { + /** The new active graph. */ + newGraph: LGraph | Subgraph + /** The old active graph, or `null` if there was no active graph. */ + oldGraph: LGraph | Subgraph | null | undefined + } + + "litegraph:canvas": + | { subType: "before-change" | "after-change" } + | { + subType: "empty-release" + originalEvent?: CanvasPointerEvent + linkReleaseContext?: { links: ConnectingLink[] } + } + | { + subType: "group-double-click" + originalEvent?: CanvasPointerEvent + group: LGraphGroup + } + | { + subType: "empty-double-click" + originalEvent?: CanvasPointerEvent + } + | { + subType: "node-double-click" + originalEvent?: CanvasPointerEvent + node: LGraphNode + } + + /** A title button on a node was clicked. */ + "litegraph:node-title-button-clicked": { + node: LGraphNode + button: LGraphButton + } +} diff --git a/src/lib/litegraph/src/infrastructure/LGraphEventMap.ts b/src/lib/litegraph/src/infrastructure/LGraphEventMap.ts new file mode 100644 index 0000000000..6a08a8b8d3 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/LGraphEventMap.ts @@ -0,0 +1,47 @@ +import type { ReadOnlyRect } from "@/interfaces" +import type { LGraph } from "@/LGraph" +import type { LLink, ResolvedConnection } from "@/LLink" +import type { Subgraph } from "@/subgraph/Subgraph" +import type { ExportedSubgraph, ISerialisedGraph, SerialisableGraph } from "@/types/serialisation" + +export interface LGraphEventMap { + "configuring": { + /** The data that was used to configure the graph. */ + data: ISerialisedGraph | SerialisableGraph + /** If `true`, the graph will be cleared prior to adding the configuration. */ + clearGraph: boolean + } + "configured": never + + "subgraph-created": { + /** The subgraph that was created. */ + subgraph: Subgraph + /** The raw data that was used to create the subgraph. */ + data: ExportedSubgraph + } + + /** Dispatched when a group of items are converted to a subgraph. */ + "convert-to-subgraph": { + /** The type of subgraph to create. */ + subgraph: Subgraph + /** The boundary around every item that was moved into the subgraph. */ + bounds: ReadOnlyRect + /** The raw data that was used to create the subgraph. */ + exportedSubgraph: ExportedSubgraph + /** The links that were used to create the subgraph. */ + boundaryLinks: LLink[] + /** Links that go from outside the subgraph in, via an input on the subgraph node. */ + resolvedInputLinks: ResolvedConnection[] + /** Links that go from inside the subgraph out, via an output on the subgraph node. */ + resolvedOutputLinks: ResolvedConnection[] + /** The floating links that were used to create the subgraph. */ + boundaryFloatingLinks: LLink[] + /** The internal links that were used to create the subgraph. */ + internalLinks: LLink[] + } + + "open-subgraph": { + subgraph: Subgraph + closingGraph: LGraph | Subgraph + } +} diff --git a/src/lib/litegraph/src/infrastructure/LinkConnectorEventMap.ts b/src/lib/litegraph/src/infrastructure/LinkConnectorEventMap.ts new file mode 100644 index 0000000000..10e4a6fc70 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/LinkConnectorEventMap.ts @@ -0,0 +1,54 @@ +import type { FloatingRenderLink } from "@/canvas/FloatingRenderLink" +import type { MovingInputLink } from "@/canvas/MovingInputLink" +import type { MovingOutputLink } from "@/canvas/MovingOutputLink" +import type { RenderLink } from "@/canvas/RenderLink" +import type { ToInputFromIoNodeLink } from "@/canvas/ToInputFromIoNodeLink" +import type { ToInputRenderLink } from "@/canvas/ToInputRenderLink" +import type { LGraphNode } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { Reroute } from "@/Reroute" +import type { SubgraphInputNode } from "@/subgraph/SubgraphInputNode" +import type { SubgraphOutputNode } from "@/subgraph/SubgraphOutputNode" +import type { CanvasPointerEvent } from "@/types/events" +import type { IWidget } from "@/types/widgets" + +export interface LinkConnectorEventMap { + "reset": boolean + + "before-drop-links": { + renderLinks: RenderLink[] + event: CanvasPointerEvent + } + "after-drop-links": { + renderLinks: RenderLink[] + event: CanvasPointerEvent + } + + "before-move-input": MovingInputLink | FloatingRenderLink + "before-move-output": MovingOutputLink | FloatingRenderLink + + "input-moved": MovingInputLink | FloatingRenderLink | ToInputFromIoNodeLink + "output-moved": MovingOutputLink | FloatingRenderLink + + "link-created": LLink | null | undefined + + "dropped-on-reroute": { + reroute: Reroute + event: CanvasPointerEvent + } + "dropped-on-node": { + node: LGraphNode + event: CanvasPointerEvent + } + "dropped-on-io-node": { + node: SubgraphInputNode | SubgraphOutputNode + event: CanvasPointerEvent + } + "dropped-on-canvas": CanvasPointerEvent + + "dropped-on-widget": { + link: ToInputRenderLink + node: LGraphNode + widget: IWidget + } +} diff --git a/src/lib/litegraph/src/infrastructure/NullGraphError.ts b/src/lib/litegraph/src/infrastructure/NullGraphError.ts new file mode 100644 index 0000000000..a83984ef31 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/NullGraphError.ts @@ -0,0 +1,6 @@ +export class NullGraphError extends Error { + constructor(message: string = "Attempted to access LGraph reference that was null or undefined.", cause?: Error) { + super(message, { cause }) + this.name = "NullGraphError" + } +} diff --git a/src/lib/litegraph/src/infrastructure/Rectangle.ts b/src/lib/litegraph/src/infrastructure/Rectangle.ts new file mode 100644 index 0000000000..4e47dabd36 --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/Rectangle.ts @@ -0,0 +1,424 @@ +import type { CompassCorners, Point, ReadOnlyPoint, ReadOnlyRect, ReadOnlySize, ReadOnlyTypedArray, Size } from "@/interfaces" + +import { isInRectangle } from "@/measure" + +/** + * A rectangle, represented as a float64 array of 4 numbers: [x, y, width, height]. + * + * This class is a subclass of Float64Array, and so has all the methods of that class. Notably, + * {@link Rectangle.from} can be used to convert a {@link ReadOnlyRect}. Typing of this however, + * is broken due to the base TS lib returning Float64Array rather than `this`. + * + * Sub-array properties ({@link Float64Array.subarray}): + * - {@link pos}: The position of the top-left corner of the rectangle. + * - {@link size}: The size of the rectangle. + */ +export class Rectangle extends Float64Array { + #pos: Point | undefined + #size: Size | undefined + + constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) { + super(4) + + this[0] = x + this[1] = y + this[2] = width + this[3] = height + } + + static override from([x, y, width, height]: ReadOnlyRect): Rectangle { + return new Rectangle(x, y, width, height) + } + + /** + * Creates a new rectangle positioned at the given centre, with the given width/height. + * @param centre The centre of the rectangle, as an `[x, y]` point + * @param width The width of the rectangle + * @param height The height of the rectangle. Default: {@link width} + * @returns A new rectangle whose centre is at {@link x} + */ + static fromCentre([x, y]: ReadOnlyPoint, width: number, height = width): Rectangle { + const left = x - width * 0.5 + const top = y - height * 0.5 + return new Rectangle(left, top, width, height) + } + + static ensureRect(rect: ReadOnlyRect): Rectangle { + return rect instanceof Rectangle + ? rect + : new Rectangle(rect[0], rect[1], rect[2], rect[3]) + } + + override subarray(begin: number = 0, end?: number): Float64Array { + const byteOffset = begin << 3 + const length = end === undefined ? end : end - begin + return new Float64Array(this.buffer, byteOffset, length) + } + + /** + * A reference to the position of the top-left corner of this rectangle. + * + * Updating the values of the returned object will update this rectangle. + */ + get pos(): Point { + this.#pos ??= this.subarray(0, 2) + return this.#pos + } + + set pos(value: ReadOnlyPoint) { + this[0] = value[0] + this[1] = value[1] + } + + /** + * A reference to the size of this rectangle. + * + * Updating the values of the returned object will update this rectangle. + */ + get size(): Size { + this.#size ??= this.subarray(2, 4) + return this.#size + } + + set size(value: ReadOnlySize) { + this[2] = value[0] + this[3] = value[1] + } + + // #region Property accessors + /** The x co-ordinate of the top-left corner of this rectangle. */ + get x() { + return this[0] + } + + set x(value: number) { + this[0] = value + } + + /** The y co-ordinate of the top-left corner of this rectangle. */ + get y() { + return this[1] + } + + set y(value: number) { + this[1] = value + } + + /** The width of this rectangle. */ + get width() { + return this[2] + } + + set width(value: number) { + this[2] = value + } + + /** The height of this rectangle. */ + get height() { + return this[3] + } + + set height(value: number) { + this[3] = value + } + + /** The x co-ordinate of the left edge of this rectangle. */ + get left() { + return this[0] + } + + set left(value: number) { + this[0] = value + } + + /** The y co-ordinate of the top edge of this rectangle. */ + get top() { + return this[1] + } + + set top(value: number) { + this[1] = value + } + + /** The x co-ordinate of the right edge of this rectangle. */ + get right() { + return this[0] + this[2] + } + + set right(value: number) { + this[0] = value - this[2] + } + + /** The y co-ordinate of the bottom edge of this rectangle. */ + get bottom() { + return this[1] + this[3] + } + + set bottom(value: number) { + this[1] = value - this[3] + } + + /** The x co-ordinate of the centre of this rectangle. */ + get centreX() { + return this[0] + (this[2] * 0.5) + } + + /** The y co-ordinate of the centre of this rectangle. */ + get centreY() { + return this[1] + (this[3] * 0.5) + } + // #endregion Property accessors + + /** + * Updates the rectangle to the values of {@link rect}. + * @param rect The rectangle to update to. + */ + updateTo(rect: ReadOnlyRect) { + this[0] = rect[0] + this[1] = rect[1] + this[2] = rect[2] + this[3] = rect[3] + } + + /** + * Checks if the point [{@link x}, {@link y}] is inside this rectangle. + * @param x The x-coordinate to check + * @param y The y-coordinate to check + * @returns `true` if the point is inside this rectangle, otherwise `false`. + */ + containsXy(x: number, y: number): boolean { + const [left, top, width, height] = this + return x >= left && + x < left + width && + y >= top && + y < top + height + } + + /** + * Checks if {@link point} is inside this rectangle. + * @param point The point to check + * @returns `true` if {@link point} is inside this rectangle, otherwise `false`. + */ + containsPoint([x, y]: ReadOnlyPoint): boolean { + const [left, top, width, height] = this + return x >= left && + x < left + width && + y >= top && + y < top + height + } + + /** + * Checks if {@link other} is a smaller rectangle inside this rectangle. + * One **must** be larger than the other; identical rectangles are not considered to contain each other. + * @param other The rectangle to check + * @returns `true` if {@link other} is inside this rectangle, otherwise `false`. + */ + containsRect(other: ReadOnlyRect): boolean { + const { right, bottom } = this + const otherRight = other[0] + other[2] + const otherBottom = other[1] + other[3] + + const identical = this.x === other[0] && + this.y === other[1] && + right === otherRight && + bottom === otherBottom + + return !identical && + this.x <= other[0] && + this.y <= other[1] && + right >= otherRight && + bottom >= otherBottom + } + + /** + * Checks if {@link rect} overlaps with this rectangle. + * @param rect The rectangle to check + * @returns `true` if {@link rect} overlaps with this rectangle, otherwise `false`. + */ + overlaps(rect: ReadOnlyRect): boolean { + return this.x < rect[0] + rect[2] && + this.y < rect[1] + rect[3] && + this.x + this.width > rect[0] && + this.y + this.height > rect[1] + } + + /** + * Finds the corner (if any) of this rectangle that contains the point [{@link x}, {@link y}]. + * @param x The x-coordinate to check + * @param y The y-coordinate to check + * @param cornerSize Each corner is treated as an inset square with this width and height. + * @returns The compass direction of the corner that contains the point, or `undefined` if the point is not in any corner. + */ + findContainingCorner(x: number, y: number, cornerSize: number): CompassCorners | undefined { + if (this.isInTopLeftCorner(x, y, cornerSize)) return "NW" + if (this.isInTopRightCorner(x, y, cornerSize)) return "NE" + if (this.isInBottomLeftCorner(x, y, cornerSize)) return "SW" + if (this.isInBottomRightCorner(x, y, cornerSize)) return "SE" + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the top-left corner of this rectangle, otherwise `false`. */ + isInTopLeftCorner(x: number, y: number, cornerSize: number): boolean { + return isInRectangle(x, y, this.x, this.y, cornerSize, cornerSize) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the top-right corner of this rectangle, otherwise `false`. */ + isInTopRightCorner(x: number, y: number, cornerSize: number): boolean { + return isInRectangle(x, y, this.right - cornerSize, this.y, cornerSize, cornerSize) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the bottom-left corner of this rectangle, otherwise `false`. */ + isInBottomLeftCorner(x: number, y: number, cornerSize: number): boolean { + return isInRectangle(x, y, this.x, this.bottom - cornerSize, cornerSize, cornerSize) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the bottom-right corner of this rectangle, otherwise `false`. */ + isInBottomRightCorner(x: number, y: number, cornerSize: number): boolean { + return isInRectangle(x, y, this.right - cornerSize, this.bottom - cornerSize, cornerSize, cornerSize) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the top edge of this rectangle, otherwise `false`. */ + isInTopEdge(x: number, y: number, edgeSize: number): boolean { + return isInRectangle(x, y, this.x, this.y, this.width, edgeSize) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the bottom edge of this rectangle, otherwise `false`. */ + isInBottomEdge(x: number, y: number, edgeSize: number): boolean { + return isInRectangle(x, y, this.x, this.bottom - edgeSize, this.width, edgeSize) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the left edge of this rectangle, otherwise `false`. */ + isInLeftEdge(x: number, y: number, edgeSize: number): boolean { + return isInRectangle(x, y, this.x, this.y, edgeSize, this.height) + } + + /** @returns `true` if the point [{@link x}, {@link y}] is in the right edge of this rectangle, otherwise `false`. */ + isInRightEdge(x: number, y: number, edgeSize: number): boolean { + return isInRectangle(x, y, this.right - edgeSize, this.y, edgeSize, this.height) + } + + /** @returns The centre point of this rectangle, as a new {@link Point}. */ + getCentre(): Point { + return [this.centreX, this.centreY] + } + + /** @returns The area of this rectangle. */ + getArea(): number { + return this.width * this.height + } + + /** @returns The perimeter of this rectangle. */ + getPerimeter(): number { + return 2 * (this.width + this.height) + } + + /** @returns The top-left corner of this rectangle, as a new {@link Point}. */ + getTopLeft(): Point { + return [this[0], this[1]] + } + + /** @returns The bottom-right corner of this rectangle, as a new {@link Point}. */ + getBottomRight(): Point { + return [this.right, this.bottom] + } + + /** @returns The width and height of this rectangle, as a new {@link Size}. */ + getSize(): Size { + return [this[2], this[3]] + } + + /** @returns The offset from the top-left of this rectangle to the point [{@link x}, {@link y}], as a new {@link Point}. */ + getOffsetTo([x, y]: ReadOnlyPoint): Point { + return [x - this[0], y - this[1]] + } + + /** @returns The offset from the point [{@link x}, {@link y}] to the top-left of this rectangle, as a new {@link Point}. */ + getOffsetFrom([x, y]: ReadOnlyPoint): Point { + return [this[0] - x, this[1] - y] + } + + /** Resizes the rectangle without moving it, setting its top-left corner to [{@link x}, {@link y}]. */ + resizeTopLeft(x1: number, y1: number) { + this[2] += this[0] - x1 + this[3] += this[1] - y1 + + this[0] = x1 + this[1] = y1 + } + + /** Resizes the rectangle without moving it, setting its bottom-left corner to [{@link x}, {@link y}]. */ + resizeBottomLeft(x1: number, y2: number) { + this[2] += this[0] - x1 + this[3] = y2 - this[1] + + this[0] = x1 + } + + /** Resizes the rectangle without moving it, setting its top-right corner to [{@link x}, {@link y}]. */ + resizeTopRight(x2: number, y1: number) { + this[2] = x2 - this[0] + this[3] += this[1] - y1 + + this[1] = y1 + } + + /** Resizes the rectangle without moving it, setting its bottom-right corner to [{@link x}, {@link y}]. */ + resizeBottomRight(x2: number, y2: number) { + this[2] = x2 - this[0] + this[3] = y2 - this[1] + } + + /** Sets the width without moving the right edge (changes position) */ + setWidthRightAnchored(width: number) { + const currentWidth = this[2] + this[2] = width + this[0] += currentWidth - width + } + + /** Sets the height without moving the bottom edge (changes position) */ + setHeightBottomAnchored(height: number) { + const currentHeight = this[3] + this[3] = height + this[1] += currentHeight - height + } + + clone(): Rectangle { + return new Rectangle(this[0], this[1], this[2], this[3]) + } + + /** Alias of {@link export}. */ + toArray() { return this.export() } + + /** @returns A new, untyped array (serializable) containing the values of this rectangle. */ + export(): [number, number, number, number] { + return [this[0], this[1], this[2], this[3]] + } + + /** + * Draws a debug outline of this rectangle. + * @internal Convenience debug/development interface; not for production use. + */ + _drawDebug(ctx: CanvasRenderingContext2D, colour = "red") { + const { strokeStyle, lineWidth } = ctx + try { + ctx.strokeStyle = colour + ctx.lineWidth = 0.5 + ctx.beginPath() + ctx.strokeRect(this[0], this[1], this[2], this[3]) + } finally { + ctx.strokeStyle = strokeStyle + ctx.lineWidth = lineWidth + } + } +} + +export type ReadOnlyRectangle = Omit< + ReadOnlyTypedArray, + | "setHeightBottomAnchored" + | "setWidthRightAnchored" + | "resizeTopLeft" + | "resizeBottomLeft" + | "resizeTopRight" + | "resizeBottomRight" + | "resizeBottomRight" + | "updateTo" +> diff --git a/src/lib/litegraph/src/infrastructure/RecursionError.ts b/src/lib/litegraph/src/infrastructure/RecursionError.ts new file mode 100644 index 0000000000..bba29e9c8d --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/RecursionError.ts @@ -0,0 +1,9 @@ +/** + * Error thrown when infinite recursion is detected. + */ +export class RecursionError extends Error { + constructor(subject: string) { + super(subject) + this.name = "RecursionError" + } +} diff --git a/src/lib/litegraph/src/infrastructure/SlotIndexError.ts b/src/lib/litegraph/src/infrastructure/SlotIndexError.ts new file mode 100644 index 0000000000..4ab963679f --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/SlotIndexError.ts @@ -0,0 +1,6 @@ +export class SlotIndexError extends Error { + constructor(message: string = "Attempted to access a slot that was out of bounds.", cause?: Error) { + super(message, { cause }) + this.name = "SlotIndexError" + } +} diff --git a/src/lib/litegraph/src/infrastructure/SubgraphEventMap.ts b/src/lib/litegraph/src/infrastructure/SubgraphEventMap.ts new file mode 100644 index 0000000000..ca433295ec --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/SubgraphEventMap.ts @@ -0,0 +1,54 @@ +import type { LGraphEventMap } from "./LGraphEventMap" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphNode } from "@/subgraph/SubgraphNode" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { IBaseWidget } from "@/types/widgets" + +export interface SubgraphEventMap extends LGraphEventMap { + "adding-input": { + name: string + type: string + } + "adding-output": { + name: string + type: string + } + + "input-added": { + input: SubgraphInput + } + "output-added": { + output: SubgraphOutput + } + + "removing-input": { + input: SubgraphInput + index: number + } + "removing-output": { + output: SubgraphOutput + index: number + } + + "renaming-input": { + input: SubgraphInput + index: number + oldName: string + newName: string + } + "renaming-output": { + output: SubgraphOutput + index: number + oldName: string + newName: string + } + + "widget-promoted": { + widget: IBaseWidget + subgraphNode: SubgraphNode + } + "widget-demoted": { + widget: IBaseWidget + subgraphNode: SubgraphNode + } +} diff --git a/src/lib/litegraph/src/infrastructure/SubgraphInputEventMap.ts b/src/lib/litegraph/src/infrastructure/SubgraphInputEventMap.ts new file mode 100644 index 0000000000..0bc116589d --- /dev/null +++ b/src/lib/litegraph/src/infrastructure/SubgraphInputEventMap.ts @@ -0,0 +1,15 @@ +import type { LGraphEventMap } from "./LGraphEventMap" +import type { INodeInputSlot } from "@/litegraph" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { IBaseWidget } from "@/types/widgets" + +export interface SubgraphInputEventMap extends LGraphEventMap { + "input-connected": { + input: INodeInputSlot + widget: IBaseWidget + } + + "input-disconnected": { + input: SubgraphInput + } +} diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts new file mode 100644 index 0000000000..33290a24e4 --- /dev/null +++ b/src/lib/litegraph/src/interfaces.ts @@ -0,0 +1,480 @@ +import type { ContextMenu } from "./ContextMenu" +import type { LGraphNode, NodeId } from "./LGraphNode" +import type { LinkId, LLink } from "./LLink" +import type { Reroute, RerouteId } from "./Reroute" +import type { SubgraphInputNode } from "./subgraph/SubgraphInputNode" +import type { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode" +import type { LinkDirection, RenderShape } from "./types/globalEnums" +import type { IBaseWidget } from "./types/widgets" +import type { Rectangle } from "@/infrastructure/Rectangle" +import type { CanvasPointerEvent } from "@/types/events" + +export type Dictionary = { [key: string]: T } + +/** Allows all properties to be null. The same as `Partial`, but adds null instead of undefined. */ +export type NullableProperties = { + [P in keyof T]: T[P] | null +} + +/** + * If {@link T} is `null` or `undefined`, evaluates to {@link Result}. Otherwise, evaluates to {@link T}. + * Useful for functions that return e.g. `undefined` when a param is nullish. + */ +export type WhenNullish = T & {} | (T extends null ? Result : T extends undefined ? Result : T & {}) + +/** A type with each of the {@link Properties} made optional. */ +export type OptionalProps = Omit & { [K in Properties]?: T[K] } + +/** A type with each of the {@link Properties} marked as required. */ +export type RequiredProps = Omit & { [K in Properties]-?: T[K] } + +/** Bitwise AND intersection of two types; returns a new, non-union type that includes only properties that exist on both types. */ +export type SharedIntersection = { + [P in keyof T1 as P extends keyof T2 ? P : never]: T1[P] +} & { + [P in keyof T2 as P extends keyof T1 ? P : never]: T2[P] +} + +export type CanvasColour = string | CanvasGradient | CanvasPattern + +/** + * Any object that has a {@link boundingRect}. + */ +export interface HasBoundingRect { + /** + * A rectangle that represents the outer edges of the item. + * + * Used for various calculations, such as overlap, selective rendering, and click checks. + * For most items, this is cached position & size as `x, y, width, height`. + * Some items (such as nodes and slots) may extend above and/or to the left of their {@link pos}. + * @readonly + * @see {@link move} + */ + readonly boundingRect: ReadOnlyRect +} + +/** An object containing a set of child objects */ +export interface Parent { + /** All objects owned by the parent object. */ + readonly children?: ReadonlySet +} + +/** + * An object that can be positioned, selected, and moved. + * + * May contain other {@link Positionable} objects. + */ +export interface Positionable extends Parent, HasBoundingRect { + readonly id: NodeId | RerouteId | number + /** + * Position in graph coordinates. This may be the top-left corner, + * the centre, or another point depending on concrete type. + * @default 0,0 + */ + readonly pos: Point + /** true if this object is part of the selection, otherwise false. */ + selected?: boolean + + /** See {@link IPinnable.pinned} */ + readonly pinned?: boolean + + /** + * When explicitly set to `false`, no options to delete this item will be provided. + * @default undefined (true) + */ + readonly removable?: boolean + + /** + * Adds a delta to the current position. + * @param deltaX X value to add to current position + * @param deltaY Y value to add to current position + * @param skipChildren If true, any child objects like group contents will not be moved + */ + move(deltaX: number, deltaY: number, skipChildren?: boolean): void + + /** + * Snaps this item to a grid. + * + * Position values are rounded to the nearest multiple of {@link snapTo}. + * @param snapTo The size of the grid to align to + * @returns `true` if it moved, or `false` if the snap was rejected (e.g. `pinned`) + */ + snapToGrid(snapTo: number): boolean + + /** Called whenever the item is selected */ + onSelected?(): void + /** Called whenever the item is deselected */ + onDeselected?(): void +} + +/** + * A color option to customize the color of {@link LGraphNode} or {@link LGraphGroup}. + * @see {@link LGraphCanvas.node_colors} + */ +export interface ColorOption { + color: string + bgcolor: string + groupcolor: string +} + +/** + * An object that can be colored with a {@link ColorOption}. + */ +export interface IColorable { + setColorOption(colorOption: ColorOption | null): void + getColorOption(): ColorOption | null +} + +/** + * An object that can be pinned. + * + * Prevents the object being accidentally moved or resized by mouse interaction. + */ +export interface IPinnable { + readonly pinned: boolean + pin(value?: boolean): void + unpin(): void +} + +export interface ReadonlyLinkNetwork { + readonly links: ReadonlyMap + readonly reroutes: ReadonlyMap + readonly floatingLinks: ReadonlyMap + getNodeById(id: NodeId | null | undefined): LGraphNode | null + getLink(id: null | undefined): undefined + getLink(id: LinkId | null | undefined): LLink | undefined + getReroute(parentId: null | undefined): undefined + getReroute(parentId: RerouteId | null | undefined): Reroute | undefined + + readonly inputNode?: SubgraphInputNode + readonly outputNode?: SubgraphOutputNode +} + +/** + * Contains a list of links, reroutes, and nodes. + */ +export interface LinkNetwork extends ReadonlyLinkNetwork { + readonly links: Map + readonly reroutes: Map + addFloatingLink(link: LLink): LLink + removeReroute(id: number): unknown + removeFloatingLink(link: LLink): void +} + +/** + * Locates graph items. + */ +export interface ItemLocator { + getNodeOnPos(x: number, y: number, nodeList?: LGraphNode[]): LGraphNode | null + getRerouteOnPos(x: number, y: number): Reroute | undefined + getIoNodeOnPos?(x: number, y: number): SubgraphInputNode | SubgraphOutputNode | undefined +} + +/** Contains a cached 2D canvas path and a centre point, with an optional forward angle. */ +export interface LinkSegment { + /** Link / reroute ID */ + readonly id: LinkId | RerouteId + /** The {@link id} of the reroute that this segment starts from (output side), otherwise `undefined`. */ + readonly parentId?: RerouteId + + /** The last canvas 2D path that was used to render this segment */ + path?: Path2D + /** Centre point of the {@link path}. Calculated during render only - can be inaccurate */ + readonly _pos: Float32Array + /** + * Y-forward along the {@link path} from its centre point, in radians. + * `undefined` if using circles for link centres. + * Calculated during render only - can be inaccurate. + */ + _centreAngle?: number + + /** Whether the link is currently being moved. @internal */ + _dragging?: boolean + + /** Output node ID */ + readonly origin_id: NodeId | undefined + /** Output slot index */ + readonly origin_slot: number | undefined +} + +export interface IInputOrOutput { + // If an input, this will be defined + input?: INodeInputSlot | null + // If an output, this will be defined + output?: INodeOutputSlot | null +} + +export interface IFoundSlot extends IInputOrOutput { + // Slot index + slot: number + // Centre point of the rendered slot connection + link_pos: Point +} + +/** A point represented as `[x, y]` co-ordinates */ +export type Point = [x: number, y: number] | Float32Array | Float64Array + +/** A size represented as `[width, height]` */ +export type Size = [width: number, height: number] | Float32Array | Float64Array + +/** A very firm array */ +type ArRect = [x: number, y: number, width: number, height: number] + +/** A rectangle starting at top-left coordinates `[x, y, width, height]` */ +export type Rect = ArRect | Float32Array | Float64Array + +/** A point represented as `[x, y]` co-ordinates that will not be modified */ +export type ReadOnlyPoint = + | readonly [x: number, y: number] + | ReadOnlyTypedArray + | ReadOnlyTypedArray + +/** A size represented as `[width, height]` that will not be modified */ +export type ReadOnlySize = + | readonly [width: number, height: number] + | ReadOnlyTypedArray + | ReadOnlyTypedArray + +/** A rectangle starting at top-left coordinates `[x, y, width, height]` that will not be modified */ +export type ReadOnlyRect = + | readonly [x: number, y: number, width: number, height: number] + | ReadOnlyTypedArray + | ReadOnlyTypedArray + +type TypedArrays = + | Int8Array + | Uint8Array + | Uint8ClampedArray + | Int16Array + | Uint16Array + | Int32Array + | Uint32Array + | Float32Array + | Float64Array + +type TypedBigIntArrays = BigInt64Array | BigUint64Array +export type ReadOnlyTypedArray = + Omit, "fill" | "copyWithin" | "reverse" | "set" | "sort" | "subarray"> + +/** Union of property names that are of type Match */ +export type KeysOfType = Exclude<{ [P in keyof T]: T[P] extends Match ? P : never }[keyof T], undefined> + +/** A new type that contains only the properties of T that are of type Match */ +export type PickByType = { [P in keyof T]: Extract } + +/** The names of all (optional) methods and functions in T */ +export type MethodNames = KeysOfType any) | undefined> + +export interface IBoundaryNodes { + top: LGraphNode + right: LGraphNode + bottom: LGraphNode + left: LGraphNode +} + +export type Direction = "top" | "bottom" | "left" | "right" + +/** Resize handle positions (compass points) */ +export type CompassCorners = "NE" | "SE" | "SW" | "NW" + +/** + * A string that represents a specific data / slot type, e.g. `STRING`. + * + * Can be comma-delimited to specify multiple allowed types, e.g. `STRING,INT`. + */ +export type ISlotType = number | string + +export interface INodeSlot extends HasBoundingRect { + /** + * The name of the slot in English. + * Will be included in the serialized data. + */ + name: string + /** + * The localized name of the slot to display in the UI. + * Takes higher priority than {@link name} if set. + * Will be included in the serialized data. + */ + localized_name?: string + /** + * The name of the slot to display in the UI, modified by the user. + * Takes higher priority than {@link display_name} if set. + * Will be included in the serialized data. + */ + label?: string + + type: ISlotType + dir?: LinkDirection + removable?: boolean + shape?: RenderShape + color_off?: CanvasColour + color_on?: CanvasColour + locked?: boolean + nameLocked?: boolean + pos?: Point + /** @remarks Automatically calculated; not included in serialisation. */ + boundingRect: Rect + /** + * A list of floating link IDs that are connected to this slot. + * This is calculated at runtime; it is **not** serialized. + */ + _floatingLinks?: Set + /** + * Whether the slot has errors. It is **not** serialized. + */ + hasErrors?: boolean +} + +export interface INodeFlags { + skip_repeated_outputs?: boolean + allow_interaction?: boolean + pinned?: boolean + collapsed?: boolean + /** Configuration setting for {@link LGraphNode.connectInputToOutput} */ + keepAllLinksOnBypass?: boolean +} + +/** + * A widget that is linked to a slot. + * + * This is set by the ComfyUI_frontend logic. See + * https://github.com/Comfy-Org/ComfyUI_frontend/blob/b80e0e1a3c74040f328c4e344326c969c97f67e0/src/extensions/core/widgetInputs.ts#L659 + */ +export interface IWidgetLocator { + name: string +} + +export interface INodeInputSlot extends INodeSlot { + link: LinkId | null + widget?: IWidgetLocator + + /** + * Internal use only; API is not finalised and may change at any time. + */ + _widget?: IBaseWidget +} + +export interface IWidgetInputSlot extends INodeInputSlot { + widget: IWidgetLocator +} + +export interface INodeOutputSlot extends INodeSlot { + links: LinkId[] | null + _data?: unknown + slot_index?: number +} + +/** Links */ +export interface ConnectingLink extends IInputOrOutput { + node: LGraphNode + slot: number + pos: Point + direction?: LinkDirection + afterRerouteId?: RerouteId + /** The first reroute on a chain */ + firstRerouteId?: RerouteId + /** The link being moved, or `undefined` if creating a new link. */ + link?: LLink +} + +interface IContextMenuBase { + title?: string + className?: string +} + +/** ContextMenu */ +export interface IContextMenuOptions extends IContextMenuBase { + ignore_item_callbacks?: boolean + parentMenu?: ContextMenu + event?: MouseEvent + extra?: TExtra + /** @deprecated Context menu scrolling is now controlled by the browser */ + scroll_speed?: number + left?: number + top?: number + /** @deprecated Context menus no longer scale using transform */ + scale?: number + node?: LGraphNode + autoopen?: boolean + callback?( + value?: string | IContextMenuValue, + options?: unknown, + event?: MouseEvent, + previous_menu?: ContextMenu, + extra?: unknown, + ): void | boolean +} + +export interface IContextMenuValue extends IContextMenuBase { + value?: TValue + content: string | undefined + has_submenu?: boolean + disabled?: boolean + submenu?: IContextMenuSubmenu + property?: string + type?: string + slot?: IFoundSlot + callback?( + this: ContextMenuDivElement, + value?: TCallbackValue, + options?: unknown, + event?: MouseEvent, + previous_menu?: ContextMenu, + extra?: TExtra, + ): void | boolean +} + +export interface IContextMenuSubmenu extends IContextMenuOptions { + options: ConstructorParameters>[0] +} + +export interface ContextMenuDivElement extends HTMLDivElement { + value?: string | IContextMenuValue + onclick_callback?: never +} + +export type INodeSlotContextItem = [string, ISlotType, Partial] + +export interface DefaultConnectionColors { + getConnectedColor(type: ISlotType): CanvasColour + getDisconnectedColor(type: ISlotType): CanvasColour +} + +export interface ISubgraphInput extends INodeInputSlot { + _listenerController?: AbortController +} + +/** + * Shorthand for {@link Parameters} of optional callbacks. + * @example + * ```ts + * const { onClick } = CustomClass.prototype + * CustomClass.prototype.onClick = function (...args: CallbackParams) { + * const r = onClick?.apply(this, args) + * // ... + * return r + * } + * ``` + */ +export type CallbackParams any) | undefined> = + Parameters> + +/** + * Shorthand for {@link ReturnType} of optional callbacks. + * @see {@link CallbackParams} + */ +export type CallbackReturn any) | undefined> = ReturnType> + +/** + * An object that can be hovered over. + */ +export interface Hoverable extends HasBoundingRect { + readonly boundingRect: Rectangle + isPointerOver: boolean + + containsPoint(point: Point): boolean + + onPointerMove(e: CanvasPointerEvent): void + onPointerEnter?(e?: CanvasPointerEvent): void + onPointerLeave?(e?: CanvasPointerEvent): void +} diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts new file mode 100644 index 0000000000..0801520212 --- /dev/null +++ b/src/lib/litegraph/src/litegraph.ts @@ -0,0 +1,172 @@ +import type { ContextMenu } from "./ContextMenu" +import type { ConnectingLink, Point } from "./interfaces" +import type { + IContextMenuOptions, + INodeSlot, + Size, +} from "./interfaces" +import type { LGraphNode } from "./LGraphNode" +import type { CanvasEventDetail } from "./types/events" +import type { RenderShape, TitleMode } from "./types/globalEnums" + +// Must remain above LiteGraphGlobal (circular dependency due to abstract factory behaviour in `configure`) +export { Subgraph } from "./subgraph/Subgraph" + +import { LiteGraphGlobal } from "./LiteGraphGlobal" +import { loadPolyfills } from "./polyfills" + +export const LiteGraph = new LiteGraphGlobal() + +// Load legacy polyfills +loadPolyfills() + +// Backwards compat + +// Type definitions for litegraph.js 0.7.0 +// Project: litegraph.js +// Definitions by: NateScarlet +/** @deprecated Use {@link Point} instead. */ +export type Vector2 = Point +/** @deprecated Use {@link Rect} instead. */ +export type Vector4 = [number, number, number, number] + +export interface IContextMenuItem { + content: string + callback?: ContextMenuEventListener + /** Used as innerHTML for extra child element */ + title?: string + disabled?: boolean + has_submenu?: boolean + submenu?: { + options: IContextMenuItem[] + } & IContextMenuOptions + className?: string +} + +export type ContextMenuEventListener = ( + value: IContextMenuItem, + options: IContextMenuOptions, + event: MouseEvent, + parentMenu: ContextMenu | undefined, + node: LGraphNode, +) => boolean | void + +export interface LinkReleaseContext { + node_to?: LGraphNode + node_from?: LGraphNode + slot_from: INodeSlot + type_filter_in?: string + type_filter_out?: string +} + +export interface LinkReleaseContextExtended { + links: ConnectingLink[] +} + +export interface LiteGraphCanvasEvent extends CustomEvent {} + +export interface LGraphNodeConstructor { + new (title: string, type?: string): T + + title: string + type: string + size?: Size + min_height?: number + slot_start_y?: number + widgets_info?: any + collapsable?: boolean + color?: string + bgcolor?: string + shape?: RenderShape + title_mode?: TitleMode + title_color?: string + title_text_color?: string + keepAllLinksOnBypass: boolean + resizeHandleSize?: number + resizeEdgeSize?: number +} + +// End backwards compat + +export { InputIndicators } from "./canvas/InputIndicators" +export { LinkConnector } from "./canvas/LinkConnector" +export { isOverNodeInput, isOverNodeOutput } from "./canvas/measureSlots" +export { CanvasPointer } from "./CanvasPointer" +export * as Constants from "./constants" +export { ContextMenu } from "./ContextMenu" +export { CurveEditor } from "./CurveEditor" +export { DragAndScale } from "./DragAndScale" +export { LabelPosition, SlotDirection, SlotShape, SlotType } from "./draw" +export { strokeShape } from "./draw" +export { Rectangle } from "./infrastructure/Rectangle" +export type { + CanvasColour, + ColorOption, + ConnectingLink, + Direction, + IBoundaryNodes, + IColorable, + IContextMenuOptions, + IContextMenuValue, + IFoundSlot, + IInputOrOutput, + INodeFlags, + INodeInputSlot, + INodeOutputSlot, + INodeSlot, + ISlotType, + KeysOfType, + LinkNetwork, + LinkSegment, + MethodNames, + PickByType, + Point, + Positionable, + ReadonlyLinkNetwork, + ReadOnlyPoint, + ReadOnlyRect, + Rect, + Size, +} from "./interfaces" +export { LGraph } from "./LGraph" +export { BadgePosition, LGraphBadge, type LGraphBadgeOptions } from "./LGraphBadge" +export { LGraphCanvas, type LGraphCanvasState } from "./LGraphCanvas" +export { LGraphGroup } from "./LGraphGroup" +export { LGraphNode, type NodeId } from "./LGraphNode" +export { type LinkId, LLink } from "./LLink" +export { clamp, createBounds } from "./measure" +export { Reroute, type RerouteId } from "./Reroute" +export { type ExecutableLGraphNode, ExecutableNodeDTO, type ExecutionId } from "./subgraph/ExecutableNodeDTO" +export { SubgraphNode } from "./subgraph/SubgraphNode" +export type { CanvasPointerEvent } from "./types/events" +export { + CanvasItem, + EaseFunction, + LGraphEventMode, + LinkMarkerShape, + RenderShape, + TitleMode, +} from "./types/globalEnums" +export type { + ExportedSubgraph, + ExportedSubgraphInstance, + ExportedSubgraphIONode, + ISerialisedGraph, + SerialisableGraph, + SerialisableLLink, + SubgraphIO, +} from "./types/serialisation" +export type { IWidget } from "./types/widgets" +export { isColorable } from "./utils/type" +export { createUuidv4 } from "./utils/uuid" +export { BaseSteppedWidget } from "./widgets/BaseSteppedWidget" +export { BaseWidget } from "./widgets/BaseWidget" +export { BooleanWidget } from "./widgets/BooleanWidget" +export { ButtonWidget } from "./widgets/ButtonWidget" +export { ComboWidget } from "./widgets/ComboWidget" +export { KnobWidget } from "./widgets/KnobWidget" +export { LegacyWidget } from "./widgets/LegacyWidget" +export { NumberWidget } from "./widgets/NumberWidget" +export { SliderWidget } from "./widgets/SliderWidget" +export { TextWidget } from "./widgets/TextWidget" +export { isComboWidget } from "./widgets/widgetMap" diff --git a/src/lib/litegraph/src/measure.ts b/src/lib/litegraph/src/measure.ts new file mode 100644 index 0000000000..4c2417d3fc --- /dev/null +++ b/src/lib/litegraph/src/measure.ts @@ -0,0 +1,460 @@ +import type { + HasBoundingRect, + Point, + ReadOnlyPoint, + ReadOnlyRect, + Rect, +} from "./interfaces" + +import { Alignment, hasFlag, LinkDirection } from "./types/globalEnums" + +/** + * Calculates the distance between two points (2D vector) + * @param a Point a as `x, y` + * @param b Point b as `x, y` + * @returns Distance between point {@link a} & {@link b} + */ +export function distance(a: ReadOnlyPoint, b: ReadOnlyPoint): number { + return Math.sqrt( + (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]), + ) +} + +/** + * Calculates the distance2 (squared) between two points (2D vector). + * Much faster when only comparing distances (closest/furthest point). + * @param x1 Origin point X + * @param y1 Origin point Y + * @param x2 Destination point X + * @param y2 Destination point Y + * @returns Distance2 (squared) between point [{@link x1}, {@link y1}] & [{@link x2}, {@link y2}] + */ +export function dist2(x1: number, y1: number, x2: number, y2: number): number { + return ((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)) +} + +/** + * Determines whether a point is inside a rectangle. + * + * Otherwise identical to {@link isInsideRectangle}, it also returns `true` if `x` equals `left` or `y` equals `top`. + * @param x Point x + * @param y Point y + * @param left Rect x + * @param top Rect y + * @param width Rect width + * @param height Rect height + * @returns `true` if the point is inside the rect, otherwise `false` + */ +export function isInRectangle( + x: number, + y: number, + left: number, + top: number, + width: number, + height: number, +): boolean { + return x >= left && + x < left + width && + y >= top && + y < top + height +} + +/** + * Determines whether a {@link Point} is inside a {@link Rect}. + * @param point The point to check, as `x, y` + * @param rect The rectangle, as `x, y, width, height` + * @returns `true` if the point is inside the rect, otherwise `false` + */ +export function isPointInRect(point: ReadOnlyPoint, rect: ReadOnlyRect): boolean { + return point[0] >= rect[0] && + point[0] < rect[0] + rect[2] && + point[1] >= rect[1] && + point[1] < rect[1] + rect[3] +} + +/** + * Determines whether the point represented by {@link x}, {@link y} is inside a {@link Rect}. + * @param x X co-ordinate of the point to check + * @param y Y co-ordinate of the point to check + * @param rect The rectangle, as `x, y, width, height` + * @returns `true` if the point is inside the rect, otherwise `false` + */ +export function isInRect(x: number, y: number, rect: ReadOnlyRect): boolean { + return x >= rect[0] && + x < rect[0] + rect[2] && + y >= rect[1] && + y < rect[1] + rect[3] +} + +/** + * Determines whether a point (`x, y`) is inside a rectangle. + * + * This is the original litegraph implementation. It returns `false` if `x` is equal to `left`, or `y` is equal to `top`. + * @deprecated + * Use {@link isInRectangle} to match inclusive of top left. + * This function returns a false negative when an integer point (e.g. pixel) is on the leftmost or uppermost edge of a rectangle. + * @param x Point x + * @param y Point y + * @param left Rect x + * @param top Rect y + * @param width Rect width + * @param height Rect height + * @returns `true` if the point is inside the rect, otherwise `false` + */ +export function isInsideRectangle( + x: number, + y: number, + left: number, + top: number, + width: number, + height: number, +): boolean { + return left < x && + left + width > x && + top < y && + top + height > y +} + +/** + * Determines if two rectangles have any overlap + * @param a Rectangle A as `x, y, width, height` + * @param b Rectangle B as `x, y, width, height` + * @returns `true` if rectangles overlap, otherwise `false` + */ +export function overlapBounding(a: ReadOnlyRect, b: ReadOnlyRect): boolean { + const aRight = a[0] + a[2] + const aBottom = a[1] + a[3] + const bRight = b[0] + b[2] + const bBottom = b[1] + b[3] + + return a[0] > bRight || + a[1] > bBottom || + aRight < b[0] || + aBottom < b[1] + ? false + : true +} + +/** + * Returns the centre of a rectangle. + * @param rect The rectangle, as `x, y, width, height` + * @returns The centre of the rectangle, as `x, y` + */ +export function getCentre(rect: ReadOnlyRect): Point { + return [ + rect[0] + (rect[2] * 0.5), + rect[1] + (rect[3] * 0.5), + ] +} + +/** + * Determines if rectangle {@link a} contains the centre point of rectangle {@link b}. + * @param a Container rectangle A as `x, y, width, height` + * @param b Sub-rectangle B as `x, y, width, height` + * @returns `true` if {@link a} contains most of {@link b}, otherwise `false` + */ +export function containsCentre(a: ReadOnlyRect, b: ReadOnlyRect): boolean { + const centreX = b[0] + (b[2] * 0.5) + const centreY = b[1] + (b[3] * 0.5) + return isInRect(centreX, centreY, a) +} + +/** + * Determines if rectangle {@link a} wholly contains rectangle {@link b}. + * @param a Container rectangle A as `x, y, width, height` + * @param b Sub-rectangle B as `x, y, width, height` + * @returns `true` if {@link a} wholly contains {@link b}, otherwise `false` + */ +export function containsRect(a: ReadOnlyRect, b: ReadOnlyRect): boolean { + const aRight = a[0] + a[2] + const aBottom = a[1] + a[3] + const bRight = b[0] + b[2] + const bBottom = b[1] + b[3] + + const identical = a[0] === b[0] && + a[1] === b[1] && + aRight === bRight && + aBottom === bBottom + + return !identical && + a[0] <= b[0] && + a[1] <= b[1] && + aRight >= bRight && + aBottom >= bBottom +} + +/** + * Adds an offset in the specified direction to {@link out} + * @param amount Amount of offset to add + * @param direction Direction to add the offset to + * @param out The {@link Point} to add the offset to + */ +export function addDirectionalOffset( + amount: number, + direction: LinkDirection, + out: Point, +): void { + switch (direction) { + case LinkDirection.LEFT: + out[0] -= amount + return + case LinkDirection.RIGHT: + out[0] += amount + return + case LinkDirection.UP: + out[1] -= amount + return + case LinkDirection.DOWN: + out[1] += amount + return + // LinkDirection.CENTER: Nothing to do. + } +} + +/** + * Rotates an offset in 90° increments. + * + * Swaps/flips axis values of a 2D vector offset - effectively rotating + * {@link offset} by 90° + * @param offset The zero-based offset to rotate + * @param from Direction to rotate from + * @param to Direction to rotate to + */ +export function rotateLink( + offset: Point, + from: LinkDirection, + to: LinkDirection, +): void { + let x: number + let y: number + + // Normalise to left + switch (from) { + case to: + case LinkDirection.CENTER: + case LinkDirection.NONE: + default: + // Nothing to do + return + + case LinkDirection.LEFT: + x = offset[0] + y = offset[1] + break + case LinkDirection.RIGHT: + x = -offset[0] + y = -offset[1] + break + case LinkDirection.UP: + x = -offset[1] + y = offset[0] + break + case LinkDirection.DOWN: + x = offset[1] + y = -offset[0] + break + } + + // Apply new direction + switch (to) { + case LinkDirection.CENTER: + case LinkDirection.NONE: + // Nothing to do + return + + case LinkDirection.LEFT: + offset[0] = x + offset[1] = y + break + case LinkDirection.RIGHT: + offset[0] = -x + offset[1] = -y + break + case LinkDirection.UP: + offset[0] = y + offset[1] = -x + break + case LinkDirection.DOWN: + offset[0] = -y + offset[1] = x + break + } +} + +/** + * Check if a point is to to the left or right of a line. + * Project a line from lineStart -> lineEnd. Determine if point is to the left + * or right of that projection. + * {@link https://www.geeksforgeeks.org/orientation-3-ordered-points/} + * @param lineStart The start point of the line + * @param lineEnd The end point of the line + * @param x X co-ordinate of the point to check + * @param y Y co-ordinate of the point to check + * @returns 0 if all three points are in a straight line, a negative value if + * point is to the left of the projected line, or positive if the point is to + * the right + */ +export function getOrientation( + lineStart: ReadOnlyPoint, + lineEnd: ReadOnlyPoint, + x: number, + y: number, +): number { + return ((lineEnd[1] - lineStart[1]) * (x - lineEnd[0])) - + ((lineEnd[0] - lineStart[0]) * (y - lineEnd[1])) +} + +/** + * @param out The array to store the point in + * @param a Start point + * @param b End point + * @param controlA Start curve control point + * @param controlB End curve control point + * @param t Time: factor of distance to travel along the curve (e.g 0.25 is 25% along the curve) + */ +export function findPointOnCurve( + out: Point, + a: ReadOnlyPoint, + b: ReadOnlyPoint, + controlA: ReadOnlyPoint, + controlB: ReadOnlyPoint, + t: number = 0.5, +): void { + const iT = 1 - t + + const c1 = iT * iT * iT + const c2 = 3 * (iT * iT) * t + const c3 = 3 * iT * (t * t) + const c4 = t * t * t + + out[0] = (c1 * a[0]) + (c2 * controlA[0]) + (c3 * controlB[0]) + (c4 * b[0]) + out[1] = (c1 * a[1]) + (c2 * controlA[1]) + (c3 * controlB[1]) + (c4 * b[1]) +} + +export function createBounds( + objects: Iterable, + padding: number = 10, +): ReadOnlyRect | null { + const bounds = new Float32Array([Infinity, Infinity, -Infinity, -Infinity]) + + for (const obj of objects) { + const rect = obj.boundingRect + bounds[0] = Math.min(bounds[0], rect[0]) + bounds[1] = Math.min(bounds[1], rect[1]) + bounds[2] = Math.max(bounds[2], rect[0] + rect[2]) + bounds[3] = Math.max(bounds[3], rect[1] + rect[3]) + } + if (!bounds.every(x => isFinite(x))) return null + + return [ + bounds[0] - padding, + bounds[1] - padding, + bounds[2] - bounds[0] + (2 * padding), + bounds[3] - bounds[1] + (2 * padding), + ] +} + +/** + * Snaps the provided {@link Point} or {@link Rect} ({@link pos}) to a grid of size {@link snapTo}. + * @param pos The point that will be snapped + * @param snapTo The value to round up/down by (multiples thereof) + * @returns `true` if snapTo is truthy, otherwise `false` + * @remarks `NaN` propagates through this function and does not affect return value. + */ +export function snapPoint(pos: Point | Rect, snapTo: number): boolean { + if (!snapTo) return false + + pos[0] = snapTo * Math.round(pos[0] / snapTo) + pos[1] = snapTo * Math.round(pos[1] / snapTo) + return true +} + +/** + * Aligns a {@link Rect} relative to the edges or centre of a {@link container} rectangle. + * + * With no {@link inset}, the element will be placed on the interior of the {@link container}, + * with their edges lined up on the {@link anchors}. A positive {@link inset} moves the element towards the centre, + * negative will push it outside the {@link container}. + * @param rect The bounding rect of the element to align. + * If using the element's pos/size backing store, this function will move the element. + * @param anchors The direction(s) to anchor the element to + * @param container The rectangle inside which to align the element + * @param inset Relative offset from each {@link anchors} edge, with positive always leading to the centre, as an `[x, y]` point + * @returns The original {@link rect}, modified in place. + */ +export function alignToContainer( + rect: Rect, + anchors: Alignment, + [containerX, containerY, containerWidth, containerHeight]: ReadOnlyRect, + [insetX, insetY]: ReadOnlyPoint = [0, 0], +): Rect { + if (hasFlag(anchors, Alignment.Left)) { + // Left + rect[0] = containerX + insetX + } else if (hasFlag(anchors, Alignment.Right)) { + // Right + rect[0] = containerX + containerWidth - insetX - rect[2] + } else if (hasFlag(anchors, Alignment.Centre)) { + // Horizontal centre + rect[0] = containerX + (containerWidth * 0.5) - (rect[2] * 0.5) + } + + if (hasFlag(anchors, Alignment.Top)) { + // Top + rect[1] = containerY + insetY + } else if (hasFlag(anchors, Alignment.Bottom)) { + // Bottom + rect[1] = containerY + containerHeight - insetY - rect[3] + } else if (hasFlag(anchors, Alignment.Middle)) { + // Vertical middle + rect[1] = containerY + (containerHeight * 0.5) - (rect[3] * 0.5) + } + return rect +} + +/** + * Aligns a {@link Rect} relative to the edges of {@link other}. + * + * With no {@link outset}, the element will be placed on the exterior of the {@link other}, + * with their edges lined up on the {@link anchors}. A positive {@link outset} moves the element away from the {@link other}, + * negative will push it inside the {@link other}. + * @param rect The bounding rect of the element to align. + * If using the element's pos/size backing store, this function will move the element. + * @param anchors The direction(s) to anchor the element to + * @param other The rectangle to align {@link rect} to + * @param outset Relative offset from each {@link anchors} edge, with positive always moving away from the centre of the {@link other}, as an `[x, y]` point + * @returns The original {@link rect}, modified in place. + */ +export function alignOutsideContainer( + rect: Rect, + anchors: Alignment, + [otherX, otherY, otherWidth, otherHeight]: ReadOnlyRect, + [outsetX, outsetY]: ReadOnlyPoint = [0, 0], +): Rect { + if (hasFlag(anchors, Alignment.Left)) { + // Left + rect[0] = otherX - outsetX - rect[2] + } else if (hasFlag(anchors, Alignment.Right)) { + // Right + rect[0] = otherX + otherWidth + outsetX + } else if (hasFlag(anchors, Alignment.Centre)) { + // Horizontal centre + rect[0] = otherX + (otherWidth * 0.5) - (rect[2] * 0.5) + } + + if (hasFlag(anchors, Alignment.Top)) { + // Top + rect[1] = otherY - outsetY - rect[3] + } else if (hasFlag(anchors, Alignment.Bottom)) { + // Bottom + rect[1] = otherY + otherHeight + outsetY + } else if (hasFlag(anchors, Alignment.Middle)) { + // Vertical middle + rect[1] = otherY + (otherHeight * 0.5) - (rect[3] * 0.5) + } + return rect +} + +export function clamp(value: number, min: number, max: number): number { + return value < min ? min : (value > max ? max : value) +} diff --git a/src/lib/litegraph/src/node/NodeInputSlot.ts b/src/lib/litegraph/src/node/NodeInputSlot.ts new file mode 100644 index 0000000000..d741dd4cc9 --- /dev/null +++ b/src/lib/litegraph/src/node/NodeInputSlot.ts @@ -0,0 +1,68 @@ +import type { INodeInputSlot, INodeOutputSlot, OptionalProps, ReadOnlyPoint } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LinkId } from "@/LLink" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" +import type { IBaseWidget } from "@/types/widgets" + +import { LabelPosition } from "@/draw" +import { LiteGraph } from "@/litegraph" +import { type IDrawOptions, NodeSlot } from "@/node/NodeSlot" +import { isSubgraphInput } from "@/subgraph/subgraphUtils" + +export class NodeInputSlot extends NodeSlot implements INodeInputSlot { + link: LinkId | null + + get isWidgetInputSlot(): boolean { + return !!this.widget + } + + #widget: WeakRef | undefined + + /** Internal use only; API is not finalised and may change at any time. */ + get _widget(): IBaseWidget | undefined { + return this.#widget?.deref() + } + + set _widget(widget: IBaseWidget | undefined) { + this.#widget = widget ? new WeakRef(widget) : undefined + } + + get collapsedPos(): ReadOnlyPoint { + return [0, LiteGraph.NODE_TITLE_HEIGHT * -0.5] + } + + constructor(slot: OptionalProps, node: LGraphNode) { + super(slot, node) + this.link = slot.link + } + + override get isConnected(): boolean { + return this.link != null + } + + override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput): boolean { + if ("links" in fromSlot) { + return LiteGraph.isValidConnection(fromSlot.type, this.type) + } + + if (isSubgraphInput(fromSlot)) { + return LiteGraph.isValidConnection(fromSlot.type, this.type) + } + + return false + } + + override draw(ctx: CanvasRenderingContext2D, options: Omit) { + const { textAlign } = ctx + ctx.textAlign = "left" + + super.draw(ctx, { + ...options, + labelPosition: LabelPosition.Right, + doStroke: false, + }) + + ctx.textAlign = textAlign + } +} diff --git a/src/lib/litegraph/src/node/NodeOutputSlot.ts b/src/lib/litegraph/src/node/NodeOutputSlot.ts new file mode 100644 index 0000000000..6cf20e5733 --- /dev/null +++ b/src/lib/litegraph/src/node/NodeOutputSlot.ts @@ -0,0 +1,68 @@ +import type { INodeInputSlot, INodeOutputSlot, OptionalProps, ReadOnlyPoint } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LinkId } from "@/LLink" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" + +import { LabelPosition } from "@/draw" +import { LiteGraph } from "@/litegraph" +import { type IDrawOptions, NodeSlot } from "@/node/NodeSlot" +import { isSubgraphOutput } from "@/subgraph/subgraphUtils" + +export class NodeOutputSlot extends NodeSlot implements INodeOutputSlot { + #node: LGraphNode + + links: LinkId[] | null + _data?: unknown + slot_index?: number + + get isWidgetInputSlot(): false { + return false + } + + get collapsedPos(): ReadOnlyPoint { + return [ + this.#node._collapsed_width ?? LiteGraph.NODE_COLLAPSED_WIDTH, + LiteGraph.NODE_TITLE_HEIGHT * -0.5, + ] + } + + constructor(slot: OptionalProps, node: LGraphNode) { + super(slot, node) + this.links = slot.links + this._data = slot._data + this.slot_index = slot.slot_index + this.#node = node + } + + override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput): boolean { + if ("link" in fromSlot) { + return LiteGraph.isValidConnection(this.type, fromSlot.type) + } + + if (isSubgraphOutput(fromSlot)) { + return LiteGraph.isValidConnection(this.type, fromSlot.type) + } + + return false + } + + override get isConnected(): boolean { + return this.links != null && this.links.length > 0 + } + + override draw(ctx: CanvasRenderingContext2D, options: Omit) { + const { textAlign, strokeStyle } = ctx + ctx.textAlign = "right" + ctx.strokeStyle = "black" + + super.draw(ctx, { + ...options, + labelPosition: LabelPosition.Left, + doStroke: true, + }) + + ctx.textAlign = textAlign + ctx.strokeStyle = strokeStyle + } +} diff --git a/src/lib/litegraph/src/node/NodeSlot.ts b/src/lib/litegraph/src/node/NodeSlot.ts new file mode 100644 index 0000000000..46d9d2f762 --- /dev/null +++ b/src/lib/litegraph/src/node/NodeSlot.ts @@ -0,0 +1,229 @@ +import type { CanvasColour, DefaultConnectionColors, INodeInputSlot, INodeOutputSlot, INodeSlot, ISubgraphInput, OptionalProps, Point, ReadOnlyPoint } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { SubgraphInput } from "@/subgraph/SubgraphInput" +import type { SubgraphOutput } from "@/subgraph/SubgraphOutput" + +import { LabelPosition, SlotShape, SlotType } from "@/draw" +import { LiteGraph, Rectangle } from "@/litegraph" +import { getCentre } from "@/measure" +import { LinkDirection, RenderShape } from "@/types/globalEnums" + +import { NodeInputSlot } from "./NodeInputSlot" +import { SlotBase } from "./SlotBase" + +export interface IDrawOptions { + colorContext: DefaultConnectionColors + labelPosition?: LabelPosition + lowQuality?: boolean + doStroke?: boolean + highlight?: boolean +} + +/** Shared base class for {@link LGraphNode} input and output slots. */ +export abstract class NodeSlot extends SlotBase implements INodeSlot { + pos?: Point + + /** The offset from the parent node to the centre point of this slot. */ + get #centreOffset(): ReadOnlyPoint { + const nodePos = this.node.pos + const { boundingRect } = this + + // Use height; widget input slots may be thinner. + const diameter = boundingRect[3] + + return getCentre([ + boundingRect[0] - nodePos[0], + boundingRect[1] - nodePos[1], + diameter, + diameter, + ]) + } + + /** The center point of this slot when the node is collapsed. */ + abstract get collapsedPos(): ReadOnlyPoint + + #node: LGraphNode + get node(): LGraphNode { + return this.#node + } + + get highlightColor(): CanvasColour { + return LiteGraph.NODE_TEXT_HIGHLIGHT_COLOR ?? LiteGraph.NODE_SELECTED_TITLE_COLOR ?? LiteGraph.NODE_TEXT_COLOR + } + + abstract get isWidgetInputSlot(): boolean + + constructor(slot: OptionalProps, node: LGraphNode) { + // Workaround: Ensure internal properties are not copied to the slot (_listenerController + // https://github.com/Comfy-Org/litegraph.js/issues/1138 + const maybeSubgraphSlot: OptionalProps = slot + const { boundingRect, name, type, _listenerController, ...rest } = maybeSubgraphSlot + const rectangle = boundingRect ? Rectangle.ensureRect(boundingRect) : new Rectangle() + + super(name, type, rectangle) + + Object.assign(this, rest) + this.#node = node + } + + /** + * Whether this slot is a valid target for a dragging link. + * @param fromSlot The slot that the link is being connected from. + */ + abstract isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput): boolean + + /** + * The label to display in the UI. + */ + get renderingLabel(): string { + return this.label || this.localized_name || this.name || "" + } + + draw( + ctx: CanvasRenderingContext2D, + { + colorContext, + labelPosition = LabelPosition.Right, + lowQuality = false, + highlight = false, + doStroke = false, + }: IDrawOptions, + ) { + // Save the current fillStyle and strokeStyle + const originalFillStyle = ctx.fillStyle + const originalStrokeStyle = ctx.strokeStyle + const originalLineWidth = ctx.lineWidth + + const labelColor = highlight + ? this.highlightColor + : LiteGraph.NODE_TEXT_COLOR + + const pos = this.#centreOffset + const slot_type = this.type + const slot_shape = ( + slot_type === SlotType.Array ? SlotShape.Grid : this.shape + ) as SlotShape + + ctx.beginPath() + let doFill = true + + ctx.fillStyle = this.renderingColor(colorContext) + ctx.lineWidth = 1 + if (slot_type === SlotType.Event || slot_shape === SlotShape.Box) { + ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10) + } else if (slot_shape === SlotShape.Arrow) { + ctx.moveTo(pos[0] + 8, pos[1] + 0.5) + ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5) + ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5) + ctx.closePath() + } else if (slot_shape === SlotShape.Grid) { + const gridSize = 3 + const cellSize = 2 + const spacing = 3 + + for (let x = 0; x < gridSize; x++) { + for (let y = 0; y < gridSize; y++) { + ctx.rect( + pos[0] - 4 + x * spacing, + pos[1] - 4 + y * spacing, + cellSize, + cellSize, + ) + } + } + doStroke = false + } else { + // Default rendering for circle, hollow circle. + if (lowQuality) { + ctx.rect(pos[0] - 4, pos[1] - 4, 8, 8) + } else { + let radius: number + if (slot_shape === SlotShape.HollowCircle) { + doFill = false + doStroke = true + ctx.lineWidth = 3 + ctx.strokeStyle = ctx.fillStyle + radius = highlight ? 4 : 3 + } else { + // Normal circle + radius = highlight ? 5 : 4 + } + ctx.arc(pos[0], pos[1], radius, 0, Math.PI * 2) + } + } + + if (doFill) ctx.fill() + if (!lowQuality && doStroke) ctx.stroke() + + // render slot label + const hideLabel = lowQuality || this.isWidgetInputSlot + if (!hideLabel) { + const text = this.renderingLabel + if (text) { + // TODO: Finish impl. Highlight text on mouseover unless we're connecting links. + ctx.fillStyle = labelColor + + if (labelPosition === LabelPosition.Right) { + if (this.dir == LinkDirection.UP) { + ctx.fillText(text, pos[0], pos[1] - 10) + } else { + ctx.fillText(text, pos[0] + 10, pos[1] + 5) + } + } else { + if (this.dir == LinkDirection.DOWN) { + ctx.fillText(text, pos[0], pos[1] - 8) + } else { + ctx.fillText(text, pos[0] - 10, pos[1] + 5) + } + } + } + } + + // Draw a red circle if the slot has errors. + if (this.hasErrors) { + ctx.lineWidth = 2 + ctx.strokeStyle = "red" + ctx.beginPath() + ctx.arc(pos[0], pos[1], 12, 0, Math.PI * 2) + ctx.stroke() + } + + // Restore the original fillStyle and strokeStyle + ctx.fillStyle = originalFillStyle + ctx.strokeStyle = originalStrokeStyle + ctx.lineWidth = originalLineWidth + } + + drawCollapsed(ctx: CanvasRenderingContext2D) { + const [x, y] = this.collapsedPos + + // Save original styles + const { fillStyle } = ctx + + ctx.fillStyle = "#686" + ctx.beginPath() + + if (this.type === SlotType.Event || this.shape === RenderShape.BOX) { + ctx.rect(x - 7 + 0.5, y - 4, 14, 8) + } else if (this.shape === RenderShape.ARROW) { + // Adjust arrow direction based on whether this is an input or output slot + const isInput = this instanceof NodeInputSlot + if (isInput) { + ctx.moveTo(x + 8, y) + ctx.lineTo(x - 4, y - 4) + ctx.lineTo(x - 4, y + 4) + } else { + ctx.moveTo(x + 6, y) + ctx.lineTo(x - 6, y - 4) + ctx.lineTo(x - 6, y + 4) + } + ctx.closePath() + } else { + ctx.arc(x, y, 4, 0, Math.PI * 2) + } + ctx.fill() + + // Restore original styles + ctx.fillStyle = fillStyle + } +} diff --git a/src/lib/litegraph/src/node/SlotBase.ts b/src/lib/litegraph/src/node/SlotBase.ts new file mode 100644 index 0000000000..9d87b4aec4 --- /dev/null +++ b/src/lib/litegraph/src/node/SlotBase.ts @@ -0,0 +1,43 @@ +import type { CanvasColour, DefaultConnectionColors, INodeSlot, ISlotType, IWidgetLocator, Point } from "@/interfaces" +import type { LLink } from "@/LLink" +import type { RenderShape } from "@/types/globalEnums" +import type { LinkDirection } from "@/types/globalEnums" + +import { Rectangle } from "@/infrastructure/Rectangle" + +/** Base class for all input & output slots. */ + +export abstract class SlotBase implements INodeSlot { + name: string + localized_name?: string + label?: string + type: ISlotType + dir?: LinkDirection + removable?: boolean + shape?: RenderShape + color_off?: CanvasColour + color_on?: CanvasColour + locked?: boolean + nameLocked?: boolean + widget?: IWidgetLocator + _floatingLinks?: Set + hasErrors?: boolean + + /** The centre point of the slot. */ + abstract pos?: Point + readonly boundingRect: Rectangle + + constructor(name: string, type: ISlotType, boundingRect?: Rectangle) { + this.name = name + this.type = type + this.boundingRect = boundingRect ?? new Rectangle() + } + + abstract get isConnected(): boolean + + renderingColor(colorContext: DefaultConnectionColors): CanvasColour { + return this.isConnected + ? this.color_on || colorContext.getConnectedColor(this.type) + : this.color_off || colorContext.getDisconnectedColor(this.type) + } +} diff --git a/src/lib/litegraph/src/node/slotUtils.ts b/src/lib/litegraph/src/node/slotUtils.ts new file mode 100644 index 0000000000..b439d5467b --- /dev/null +++ b/src/lib/litegraph/src/node/slotUtils.ts @@ -0,0 +1,56 @@ +import type { IWidgetInputSlot, SharedIntersection } from "@/interfaces" +import type { INodeInputSlot, INodeOutputSlot, INodeSlot, IWidget } from "@/litegraph" +import type { ISerialisableNodeInput, ISerialisableNodeOutput } from "@/types/serialisation" + +type CommonIoSlotProps = SharedIntersection + +export function shallowCloneCommonProps(slot: CommonIoSlotProps): CommonIoSlotProps { + const { color_off, color_on, dir, label, localized_name, locked, name, nameLocked, removable, shape, type } = slot + return { color_off, color_on, dir, label, localized_name, locked, name, nameLocked, removable, shape, type } +} + +export function inputAsSerialisable(slot: INodeInputSlot): ISerialisableNodeInput { + const { link } = slot + const widgetOrPos = slot.widget + ? { widget: { name: slot.widget.name } } + : { pos: slot.pos } + + return { + ...shallowCloneCommonProps(slot), + ...widgetOrPos, + link, + } +} + +export function outputAsSerialisable(slot: INodeOutputSlot & { widget?: IWidget }): ISerialisableNodeOutput { + const { pos, slot_index, links, widget } = slot + // Output widgets do not exist in Litegraph; this is a temporary downstream workaround. + const outputWidget = widget + ? { widget: { name: widget.name } } + : null + + return { + ...shallowCloneCommonProps(slot), + ...outputWidget, + pos, + slot_index, + links, + } +} + +export function isINodeInputSlot(slot: INodeSlot): slot is INodeInputSlot { + return "link" in slot +} + +export function isINodeOutputSlot(slot: INodeSlot): slot is INodeOutputSlot { + return "links" in slot +} + +/** + * Type guard: Whether this input slot is attached to a widget. + * @param slot The slot to check. + */ + +export function isWidgetInputSlot(slot: INodeInputSlot): slot is IWidgetInputSlot { + return !!slot.widget +} diff --git a/src/lib/litegraph/src/polyfills.ts b/src/lib/litegraph/src/polyfills.ts new file mode 100644 index 0000000000..73a1c67106 --- /dev/null +++ b/src/lib/litegraph/src/polyfills.ts @@ -0,0 +1,92 @@ +// @ts-expect-error Polyfill +Symbol.dispose ??= Symbol("Symbol.dispose") +// @ts-expect-error Polyfill +Symbol.asyncDispose ??= Symbol("Symbol.asyncDispose") + +// API ************************************************* +// like rect but rounded corners +export function loadPolyfills() { + if ( + typeof window != "undefined" && + window.CanvasRenderingContext2D && + !window.CanvasRenderingContext2D.prototype.roundRect + ) { + // @ts-expect-error Slightly broken polyfill - radius_low not impl. anywhere + window.CanvasRenderingContext2D.prototype.roundRect = function ( + x: number, + y: number, + w: number, + h: number, + radius: number | number[], + radius_low: number | number[], + ) { + let top_left_radius = 0 + let top_right_radius = 0 + let bottom_left_radius = 0 + let bottom_right_radius = 0 + + if (radius === 0) { + this.rect(x, y, w, h) + return + } + + if (radius_low === undefined) radius_low = radius + + // make it compatible with official one + if (Array.isArray(radius)) { + if (radius.length == 1) { + top_left_radius = top_right_radius = bottom_left_radius = bottom_right_radius = radius[0] + } else if (radius.length == 2) { + top_left_radius = bottom_right_radius = radius[0] + top_right_radius = bottom_left_radius = radius[1] + } else if (radius.length == 4) { + top_left_radius = radius[0] + top_right_radius = radius[1] + bottom_left_radius = radius[2] + bottom_right_radius = radius[3] + } else { + return + } + } else { + // old using numbers + top_left_radius = radius || 0 + top_right_radius = radius || 0 + + const low = !Array.isArray(radius_low) && radius_low ? radius_low : 0 + bottom_left_radius = low + bottom_right_radius = low + } + + // top right + this.moveTo(x + top_left_radius, y) + this.lineTo(x + w - top_right_radius, y) + this.quadraticCurveTo(x + w, y, x + w, y + top_right_radius) + + // bottom right + this.lineTo(x + w, y + h - bottom_right_radius) + this.quadraticCurveTo( + x + w, + y + h, + x + w - bottom_right_radius, + y + h, + ) + + // bottom left + this.lineTo(x + bottom_right_radius, y + h) + this.quadraticCurveTo(x, y + h, x, y + h - bottom_left_radius) + + // top left + this.lineTo(x, y + bottom_left_radius) + this.quadraticCurveTo(x, y, x + top_left_radius, y) + } + } + + if (typeof window != "undefined" && !window["requestAnimationFrame"]) { + window.requestAnimationFrame = + // @ts-expect-error Legacy code + window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || + function (callback) { + window.setTimeout(callback, 1000 / 60) + } + } +} diff --git a/src/lib/litegraph/src/strings.ts b/src/lib/litegraph/src/strings.ts new file mode 100644 index 0000000000..e5481e604a --- /dev/null +++ b/src/lib/litegraph/src/strings.ts @@ -0,0 +1,39 @@ +import type { ISlotType } from "./litegraph" + +/** + * Uses the standard String() function to coerce to string, unless the value is null or undefined - then null. + * @param value The value to convert + * @returns String(value) or null + */ +export function stringOrNull(value: unknown): string | null { + return value == null ? null : String(value) +} + +/** + * Uses the standard String() function to coerce to string, unless the value is null or undefined - then an empty string + * @param value The value to convert + * @returns String(value) or "" + */ +export function stringOrEmpty(value: unknown): string { + return value == null ? "" : String(value) +} + +export function parseSlotTypes(type: ISlotType): string[] { + return type == "" || type == "0" ? ["*"] : String(type).toLowerCase().split(",") +} + +/** + * Creates a unique name by appending an underscore and a number to the end of the name + * if it already exists. + * @param name The name to make unique + * @param existingNames The names that already exist. Default: an empty array + * @returns The name, or a unique name if it already exists. + */ +export function nextUniqueName(name: string, existingNames: string[] = []): string { + let i = 1 + const baseName = name + while (existingNames.includes(name)) { + name = `${baseName}_${i++}` + } + return name +} diff --git a/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts b/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts new file mode 100644 index 0000000000..f005bd2398 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts @@ -0,0 +1,39 @@ +import type { SubgraphInputNode } from "./SubgraphInputNode" +import type { INodeInputSlot, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { RerouteId } from "@/Reroute" + +import { LLink } from "@/LLink" +import { nextUniqueName } from "@/strings" +import { zeroUuid } from "@/utils/uuid" + +import { SubgraphInput } from "./SubgraphInput" + +/** + * A virtual slot that simply creates a new input slot when connected to. + */ +export class EmptySubgraphInput extends SubgraphInput { + declare parent: SubgraphInputNode + + constructor(parent: SubgraphInputNode) { + super({ + id: zeroUuid, + name: "", + type: "", + }, parent) + } + + override connect(slot: INodeInputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined { + const { subgraph } = this.parent + const existingNames = subgraph.inputs.map(x => x.name) + + const name = nextUniqueName(slot.name, existingNames) + const input = subgraph.addInput(name, String(slot.type)) + return input.connect(slot, node, afterRerouteId) + } + + override get labelPos(): Point { + const [x, y, , height] = this.boundingRect + return [x, y + height * 0.5] + } +} diff --git a/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts b/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts new file mode 100644 index 0000000000..c8ccdf29a1 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts @@ -0,0 +1,39 @@ +import type { SubgraphOutputNode } from "./SubgraphOutputNode" +import type { INodeOutputSlot, Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { RerouteId } from "@/Reroute" + +import { LLink } from "@/LLink" +import { nextUniqueName } from "@/strings" +import { zeroUuid } from "@/utils/uuid" + +import { SubgraphOutput } from "./SubgraphOutput" + +/** + * A virtual slot that simply creates a new output slot when connected to. + */ +export class EmptySubgraphOutput extends SubgraphOutput { + declare parent: SubgraphOutputNode + + constructor(parent: SubgraphOutputNode) { + super({ + id: zeroUuid, + name: "", + type: "", + }, parent) + } + + override connect(slot: INodeOutputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined { + const { subgraph } = this.parent + const existingNames = subgraph.outputs.map(x => x.name) + + const name = nextUniqueName(slot.name, existingNames) + const output = subgraph.addOutput(name, String(slot.type)) + return output.connect(slot, node, afterRerouteId) + } + + override get labelPos(): Point { + const [x, y, , height] = this.boundingRect + return [x, y + height * 0.5] + } +} diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts new file mode 100644 index 0000000000..bdfd612697 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts @@ -0,0 +1,292 @@ +import type { SubgraphNode } from "./SubgraphNode" +import type { CallbackParams, CallbackReturn, ISlotType } from "@/interfaces" +import type { LGraph } from "@/LGraph" +import type { LGraphNode, NodeId } from "@/LGraphNode" + +import { InvalidLinkError } from "@/infrastructure/InvalidLinkError" +import { NullGraphError } from "@/infrastructure/NullGraphError" +import { RecursionError } from "@/infrastructure/RecursionError" +import { SlotIndexError } from "@/infrastructure/SlotIndexError" +import { LGraphEventMode } from "@/litegraph" + +import { Subgraph } from "./Subgraph" + +export type ExecutionId = string + +/** + * Interface describing the data transfer objects used when compiling a graph for execution. + */ +export type ExecutableLGraphNode = Omit + +/** + * The end result of resolving a DTO input. + * When a widget value is returned, {@link widgetInfo} is present and {@link origin_slot} is `-1`. + */ +type ResolvedInput = { + /** DTO for the node that the link originates from. */ + node: ExecutableLGraphNode + /** Full unique execution ID of the node that the link originates from. In the case of a widget value, this is the ID of the subgraph node. */ + origin_id: ExecutionId + /** The slot index of the output on the node that the link originates from. `-1` when widget value is set. */ + origin_slot: number + /** Boxed widget value (e.g. for widgets). If this box is `undefined`, then an input link is connected, and widget values from the subgraph node are ignored. */ + widgetInfo?: { value: unknown } +} + +/** + * Concrete implementation of {@link ExecutableLGraphNode}. + * @remarks This is the class that is used to create the data transfer objects for executable nodes. + */ +export class ExecutableNodeDTO implements ExecutableLGraphNode { + applyToGraph?(...args: CallbackParams): CallbackReturn + + /** The graph that this node is a part of. */ + readonly graph: LGraph | Subgraph + + inputs: { linkId: number | null, name: string, type: ISlotType }[] + + /** Backing field for {@link id}. */ + #id: ExecutionId + + /** + * The path to the acutal node through subgraph instances, represented as a list of all subgraph node IDs (instances), + * followed by the actual original node ID within the subgraph. Each segment is separated by `:`. + * + * e.g. `1:2:3`: + * - `1` is the node ID of the first subgraph node in the parent workflow + * - `2` is the node ID of the second subgraph node in the first subgraph + * - `3` is the node ID of the actual node in the subgraph definition + */ + get id() { + return this.#id + } + + get type() { + return this.node.type + } + + get title() { + return this.node.title + } + + get mode() { + return this.node.mode + } + + get comfyClass() { + return this.node.comfyClass + } + + get isVirtualNode() { + return this.node.isVirtualNode + } + + get widgets() { + return this.node.widgets + } + + get subgraphId() { + return this.subgraphNode?.subgraph.id + } + + constructor( + /** The actual node that this DTO wraps. */ + readonly node: LGraphNode | SubgraphNode, + /** A list of subgraph instance node IDs from the root graph to the containing instance. @see {@link id} */ + readonly subgraphNodePath: readonly NodeId[], + /** A flattened map of all DTOs in this node network. Subgraph instances have been expanded into their inner nodes. */ + readonly nodesByExecutionId: Map, + /** The actual subgraph instance that contains this node, otherise undefined. */ + readonly subgraphNode?: SubgraphNode, + ) { + if (!node.graph) throw new NullGraphError() + + // Set the internal ID of the DTO + this.#id = [...this.subgraphNodePath, this.node.id].join(":") + this.graph = node.graph + this.inputs = this.node.inputs.map(x => ({ + linkId: x.link, + name: x.name, + type: x.type, + })) + + // Only create a wrapper if the node has an applyToGraph method + if (this.node.applyToGraph) { + this.applyToGraph = (...args) => this.node.applyToGraph?.(...args) + } + } + + /** Returns either the DTO itself, or the DTOs of the inner nodes of the subgraph. */ + getInnerNodes(): ExecutableLGraphNode[] { + return this.subgraphNode ? this.subgraphNode.getInnerNodes(this.nodesByExecutionId, this.subgraphNodePath) : [this] + } + + /** + * Resolves the executable node & link IDs for a given input slot. + * @param slot The slot index of the input. + * @param visited Leave empty unless overriding this method. + * A set of unique IDs, used to guard against infinite recursion. + * If overriding, ensure that the set is passed on all recursive calls. + * @returns The node and the origin ID / slot index of the output. + */ + resolveInput(slot: number, visited = new Set()): ResolvedInput | undefined { + const uniqueId = `${this.subgraphNode?.subgraph.id}:${this.node.id}[I]${slot}` + if (visited.has(uniqueId)) { + const nodeInfo = `${this.node.id}${this.node.title ? ` (${this.node.title})` : ""}` + const pathInfo = this.subgraphNodePath.length > 0 ? ` at path ${this.subgraphNodePath.join(":")}` : "" + throw new RecursionError( + `Circular reference detected while resolving input ${slot} of node ${nodeInfo}${pathInfo}. ` + + `This creates an infinite loop in link resolution. UniqueID: [${uniqueId}]`, + ) + } + visited.add(uniqueId) + + const input = this.inputs.at(slot) + if (!input) throw new SlotIndexError(`No input found for flattened id [${this.id}] slot [${slot}]`) + + // Nothing connected + if (input.linkId == null) return + + const link = this.graph.getLink(input.linkId) + if (!link) throw new InvalidLinkError(`No link found in parent graph for id [${this.id}] slot [${slot}] ${input.name}`) + + const { subgraphNode } = this + + // Link goes up and out of this subgraph + if (subgraphNode && link.originIsIoNode) { + const subgraphNodeInput = subgraphNode.inputs.at(link.origin_slot) + if (!subgraphNodeInput) throw new SlotIndexError(`No input found for slot [${link.origin_slot}] ${input.name}`) + + // Nothing connected + const linkId = subgraphNodeInput.link + if (linkId == null) { + const widget = subgraphNode.getWidgetFromSlot(subgraphNodeInput) + if (!widget) return + + // Special case: SubgraphNode widget. + return { + node: this, + origin_id: this.id, + origin_slot: -1, + widgetInfo: { value: widget.value }, + } + } + + const outerLink = subgraphNode.graph.getLink(linkId) + if (!outerLink) throw new InvalidLinkError(`No outer link found for slot [${link.origin_slot}] ${input.name}`) + + const subgraphNodeExecutionId = this.subgraphNodePath.join(":") + const subgraphNodeDto = this.nodesByExecutionId.get(subgraphNodeExecutionId) + if (!subgraphNodeDto) throw new Error(`No subgraph node DTO found for id [${subgraphNodeExecutionId}]`) + + return subgraphNodeDto.resolveInput(outerLink.target_slot, visited) + } + + // Not part of a subgraph; use the original link + const outputNode = this.graph.getNodeById(link.origin_id) + if (!outputNode) throw new InvalidLinkError(`No input node found for id [${this.id}] slot [${slot}] ${input.name}`) + + const outputNodeExecutionId = [...this.subgraphNodePath, outputNode.id].join(":") + const outputNodeDto = this.nodesByExecutionId.get(outputNodeExecutionId) + if (!outputNodeDto) throw new Error(`No output node DTO found for id [${outputNodeExecutionId}]`) + + return outputNodeDto.resolveOutput(link.origin_slot, input.type, visited) + } + + /** + * Determines whether this output is a valid endpoint for a link (non-virtual, non-bypass). + * @param slot The slot index of the output. + * @param type The type of the input + * @param visited A set of unique IDs to guard against infinite recursion. See {@link resolveInput}. + * @returns The node and the origin ID / slot index of the output. + */ + resolveOutput(slot: number, type: ISlotType, visited: Set): ResolvedInput | undefined { + const uniqueId = `${this.subgraphNode?.subgraph.id}:${this.node.id}[O]${slot}` + if (visited.has(uniqueId)) { + const nodeInfo = `${this.node.id}${this.node.title ? ` (${this.node.title})` : ""}` + const pathInfo = this.subgraphNodePath.length > 0 ? ` at path ${this.subgraphNodePath.join(":")}` : "" + throw new RecursionError( + `Circular reference detected while resolving output ${slot} of node ${nodeInfo}${pathInfo}. ` + + `This creates an infinite loop in link resolution. UniqueID: [${uniqueId}]`, + ) + } + visited.add(uniqueId) + + // Upstreamed: Bypass nodes are bypassed using the first input with matching type + if (this.mode === LGraphEventMode.BYPASS) { + const { inputs } = this + + // Bypass nodes by finding first input with matching type + const parentInputIndexes = Object.keys(inputs).map(Number) + // Prioritise exact slot index + const indexes = [slot, ...parentInputIndexes] + const matchingIndex = indexes.find(i => inputs[i]?.type === type) + + // No input types match + if (matchingIndex === undefined) { + console.debug(`[ExecutableNodeDTO.resolveOutput] No input types match type [${type}] for id [${this.id}] slot [${slot}]`, this) + return + } + + return this.resolveInput(matchingIndex, visited) + } + + const { node } = this + if (node.isSubgraphNode()) return this.#resolveSubgraphOutput(slot, type, visited) + + // Upstreamed: Other virtual nodes are bypassed using the same input/output index (slots must match) + if (node.isVirtualNode) { + if (this.inputs.at(slot)) return this.resolveInput(slot, visited) + + // Fallback check for nodes performing link redirection + const virtualLink = this.node.getInputLink(slot) + if (virtualLink) { + const outputNode = this.graph.getNodeById(virtualLink.origin_id) + if (!outputNode) throw new InvalidLinkError(`Virtual node failed to resolve parent [${this.id}] slot [${slot}]`) + + const outputNodeExecutionId = [...this.subgraphNodePath, outputNode.id].join(":") + const outputNodeDto = this.nodesByExecutionId.get(outputNodeExecutionId) + if (!outputNodeDto) throw new Error(`No output node DTO found for id [${outputNode.id}]`) + + return outputNodeDto.resolveOutput(virtualLink.origin_slot, type, visited) + } + + // Virtual nodes without a matching input should be discarded. + return + } + + return { + node: this, + origin_id: this.id, + origin_slot: slot, + } + } + + /** + * Resolves the link inside a subgraph node, from the subgraph IO node to the node inside the subgraph. + * @param slot The slot index of the output on the subgraph node. + * @param visited A set of unique IDs to guard against infinite recursion. See {@link resolveInput}. + * @returns A DTO for the node, and the origin ID / slot index of the output. + */ + #resolveSubgraphOutput(slot: number, type: ISlotType, visited: Set): ResolvedInput | undefined { + const { node } = this + const output = node.outputs.at(slot) + + if (!output) throw new SlotIndexError(`No output found for flattened id [${this.id}] slot [${slot}]`) + if (!node.isSubgraphNode()) throw new TypeError(`Node is not a subgraph node: ${node.id}`) + + // Link inside the subgraph + const innerResolved = node.resolveSubgraphOutputLink(slot) + if (!innerResolved) return + + const innerNode = innerResolved.outputNode + if (!innerNode) throw new Error(`No output node found for id [${this.id}] slot [${slot}] ${output.name}`) + + // Recurse into the subgraph + const innerNodeExecutionId = [...this.subgraphNodePath, node.id, innerNode.id].join(":") + const innerNodeDto = this.nodesByExecutionId.get(innerNodeExecutionId) + if (!innerNodeDto) throw new Error(`No inner node DTO found for id [${innerNodeExecutionId}]`) + + return innerNodeDto.resolveOutput(innerResolved.link.origin_slot, type, visited) + } +} diff --git a/src/lib/litegraph/src/subgraph/Subgraph.ts b/src/lib/litegraph/src/subgraph/Subgraph.ts new file mode 100644 index 0000000000..68facc3a9d --- /dev/null +++ b/src/lib/litegraph/src/subgraph/Subgraph.ts @@ -0,0 +1,246 @@ +import type { SubgraphEventMap } from "@/infrastructure/SubgraphEventMap" +import type { DefaultConnectionColors, INodeInputSlot, INodeOutputSlot } from "@/interfaces" +import type { LGraphCanvas } from "@/LGraphCanvas" +import type { ExportedSubgraph, ExposedWidget, ISerialisedGraph, Serialisable, SerialisableGraph } from "@/types/serialisation" + +import { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import { type BaseLGraph, LGraph } from "@/LGraph" +import { createUuidv4 } from "@/utils/uuid" + +import { SubgraphInput } from "./SubgraphInput" +import { SubgraphInputNode } from "./SubgraphInputNode" +import { SubgraphOutput } from "./SubgraphOutput" +import { SubgraphOutputNode } from "./SubgraphOutputNode" + +/** Internal; simplifies type definitions. */ +export type GraphOrSubgraph = LGraph | Subgraph + +/** A subgraph definition. */ +export class Subgraph extends LGraph implements BaseLGraph, Serialisable { + declare readonly events: CustomEventTarget + + /** Limits the number of levels / depth that subgraphs may be nested. Prevents uncontrolled programmatic nesting. */ + static MAX_NESTED_SUBGRAPHS = 1000 + + /** The display name of the subgraph. */ + name: string = "Unnamed Subgraph" + + readonly inputNode = new SubgraphInputNode(this) + readonly outputNode = new SubgraphOutputNode(this) + + /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */ + readonly inputs: SubgraphInput[] = [] + /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */ + readonly outputs: SubgraphOutput[] = [] + /** A list of node widgets displayed in the parent graph, on the subgraph object. */ + readonly widgets: ExposedWidget[] = [] + + #rootGraph: LGraph + override get rootGraph(): LGraph { + return this.#rootGraph + } + + constructor( + rootGraph: LGraph, + data: ExportedSubgraph, + ) { + if (!rootGraph) throw new Error("Root graph is required") + + super() + + this.#rootGraph = rootGraph + + const cloned = structuredClone(data) + this._configureBase(cloned) + this.#configureSubgraph(cloned) + } + + getIoNodeOnPos(x: number, y: number): SubgraphInputNode | SubgraphOutputNode | undefined { + const { inputNode, outputNode } = this + if (inputNode.containsPoint([x, y])) return inputNode + if (outputNode.containsPoint([x, y])) return outputNode + } + + #configureSubgraph(data: ISerialisedGraph & ExportedSubgraph | SerialisableGraph & ExportedSubgraph): void { + const { name, inputs, outputs, widgets } = data + + this.name = name + if (inputs) { + this.inputs.length = 0 + for (const input of inputs) { + const subgraphInput = new SubgraphInput(input, this.inputNode) + this.inputs.push(subgraphInput) + this.events.dispatch("input-added", { input: subgraphInput }) + } + } + + if (outputs) { + this.outputs.length = 0 + for (const output of outputs) { + this.outputs.push(new SubgraphOutput(output, this.outputNode)) + } + } + + if (widgets) { + this.widgets.length = 0 + for (const widget of widgets) { + this.widgets.push(widget) + } + } + + this.inputNode.configure(data.inputNode) + this.outputNode.configure(data.outputNode) + } + + override configure(data: ISerialisedGraph & ExportedSubgraph | SerialisableGraph & ExportedSubgraph, keep_old?: boolean): boolean | undefined { + const r = super.configure(data, keep_old) + + this.#configureSubgraph(data) + return r + } + + override attachCanvas(canvas: LGraphCanvas): void { + super.attachCanvas(canvas) + canvas.subgraph = this + } + + addInput(name: string, type: string): SubgraphInput { + this.events.dispatch("adding-input", { name, type }) + + const input = new SubgraphInput({ + id: createUuidv4(), + name, + type, + }, this.inputNode) + + this.inputs.push(input) + this.events.dispatch("input-added", { input }) + + return input + } + + addOutput(name: string, type: string): SubgraphOutput { + this.events.dispatch("adding-output", { name, type }) + + const output = new SubgraphOutput({ + id: createUuidv4(), + name, + type, + }, this.outputNode) + + this.outputs.push(output) + this.events.dispatch("output-added", { output }) + + return output + } + + /** + * Renames an input slot in the subgraph. + * @param input The input slot to rename. + * @param name The new name for the input slot. + */ + renameInput(input: SubgraphInput, name: string): void { + const index = this.inputs.indexOf(input) + if (index === -1) throw new Error("Input not found") + + const oldName = input.displayName + this.events.dispatch("renaming-input", { input, index, oldName, newName: name }) + + input.label = name + } + + /** + * Renames an output slot in the subgraph. + * @param output The output slot to rename. + * @param name The new name for the output slot. + */ + renameOutput(output: SubgraphOutput, name: string): void { + const index = this.outputs.indexOf(output) + if (index === -1) throw new Error("Output not found") + + const oldName = output.displayName + this.events.dispatch("renaming-output", { output, index, oldName, newName: name }) + + output.label = name + } + + /** + * Removes an input slot from the subgraph. + * @param input The input slot to remove. + */ + removeInput(input: SubgraphInput): void { + input.disconnect() + + const index = this.inputs.indexOf(input) + if (index === -1) throw new Error("Input not found") + + const mayContinue = this.events.dispatch("removing-input", { input, index }) + if (!mayContinue) return + + this.inputs.splice(index, 1) + + const { length } = this.inputs + for (let i = index; i < length; i++) { + this.inputs[i].decrementSlots("inputs") + } + } + + /** + * Removes an output slot from the subgraph. + * @param output The output slot to remove. + */ + removeOutput(output: SubgraphOutput): void { + output.disconnect() + + const index = this.outputs.indexOf(output) + if (index === -1) throw new Error("Output not found") + + const mayContinue = this.events.dispatch("removing-output", { output, index }) + if (!mayContinue) return + + this.outputs.splice(index, 1) + + const { length } = this.outputs + for (let i = index; i < length; i++) { + this.outputs[i].decrementSlots("outputs") + } + } + + draw(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors, fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput, editorAlpha?: number): void { + this.inputNode.draw(ctx, colorContext, fromSlot, editorAlpha) + this.outputNode.draw(ctx, colorContext, fromSlot, editorAlpha) + } + + /** + * Clones the subgraph, creating an identical copy with a new ID. + * @returns A new subgraph with the same configuration, but a new ID. + */ + clone(keepId: boolean = false): Subgraph { + const exported = this.asSerialisable() + if (!keepId) exported.id = createUuidv4() + + const subgraph = new Subgraph(this.rootGraph, exported) + subgraph.configure(exported) + return subgraph + } + + override asSerialisable(): ExportedSubgraph & Required> { + return { + id: this.id, + version: LGraph.serialisedSchemaVersion, + state: this.state, + revision: this.revision, + config: this.config, + name: this.name, + inputNode: this.inputNode.asSerialisable(), + outputNode: this.outputNode.asSerialisable(), + inputs: this.inputs.map(x => x.asSerialisable()), + outputs: this.outputs.map(x => x.asSerialisable()), + widgets: [...this.widgets], + nodes: this.nodes.map(node => node.serialize()), + groups: this.groups.map(group => group.serialize()), + links: [...this.links.values()].map(x => x.asSerialisable()), + extra: this.extra, + } + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts new file mode 100644 index 0000000000..40e810cf7c --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts @@ -0,0 +1,284 @@ +import type { EmptySubgraphInput } from "./EmptySubgraphInput" +import type { EmptySubgraphOutput } from "./EmptySubgraphOutput" +import type { Subgraph } from "./Subgraph" +import type { SubgraphInput } from "./SubgraphInput" +import type { SubgraphOutput } from "./SubgraphOutput" +import type { LinkConnector } from "@/canvas/LinkConnector" +import type { DefaultConnectionColors, Hoverable, INodeInputSlot, INodeOutputSlot, Point, Positionable } from "@/interfaces" +import type { NodeId } from "@/LGraphNode" +import type { ExportedSubgraphIONode, Serialisable } from "@/types/serialisation" + +import { Rectangle } from "@/infrastructure/Rectangle" +import { type CanvasColour, type CanvasPointer, type CanvasPointerEvent, type IContextMenuValue, LiteGraph } from "@/litegraph" +import { snapPoint } from "@/measure" +import { CanvasItem } from "@/types/globalEnums" + +export abstract class SubgraphIONodeBase implements Positionable, Hoverable, Serialisable { + static margin = 10 + static minWidth = 100 + static roundedRadius = 10 + + readonly #boundingRect: Rectangle = new Rectangle() + + abstract readonly id: NodeId + + get boundingRect(): Rectangle { + return this.#boundingRect + } + + selected: boolean = false + pinned: boolean = false + readonly removable = false + + isPointerOver: boolean = false + + abstract readonly emptySlot: EmptySubgraphInput | EmptySubgraphOutput + + get pos() { + return this.boundingRect.pos + } + + set pos(value) { + this.boundingRect.pos = value + } + + get size() { + return this.boundingRect.size + } + + set size(value) { + this.boundingRect.size = value + } + + protected get sideLineWidth(): number { + return this.isPointerOver ? 2.5 : 2 + } + + protected get sideStrokeStyle(): CanvasColour { + return this.isPointerOver ? "white" : "#efefef" + } + + abstract readonly slots: TSlot[] + abstract get allSlots(): TSlot[] + + constructor( + /** The subgraph that this node belongs to. */ + readonly subgraph: Subgraph, + ) {} + + move(deltaX: number, deltaY: number): void { + this.pos[0] += deltaX + this.pos[1] += deltaY + } + + /** @inheritdoc */ + snapToGrid(snapTo: number): boolean { + return this.pinned ? false : snapPoint(this.pos, snapTo) + } + + abstract onPointerDown(e: CanvasPointerEvent, pointer: CanvasPointer, linkConnector: LinkConnector): void + + // #region Hoverable + + containsPoint(point: Point): boolean { + return this.boundingRect.containsPoint(point) + } + + abstract get slotAnchorX(): number + + onPointerMove(e: CanvasPointerEvent): CanvasItem { + const containsPoint = this.boundingRect.containsXy(e.canvasX, e.canvasY) + let underPointer = containsPoint ? CanvasItem.SubgraphIoNode : CanvasItem.Nothing + + if (containsPoint) { + if (!this.isPointerOver) this.onPointerEnter() + + for (const slot of this.allSlots) { + slot.onPointerMove(e) + if (slot.isPointerOver) underPointer |= CanvasItem.SubgraphIoSlot + } + } else if (this.isPointerOver) { + this.onPointerLeave() + } + return underPointer + } + + onPointerEnter() { + this.isPointerOver = true + } + + onPointerLeave() { + this.isPointerOver = false + + for (const slot of this.slots) { + slot.isPointerOver = false + } + } + + // #endregion Hoverable + + /** + * Renames an IO slot in the subgraph. + * @param slot The slot to rename. + * @param name The new name for the slot. + */ + abstract renameSlot(slot: TSlot, name: string): void + + /** + * Removes an IO slot from the subgraph. + * @param slot The slot to remove. + */ + abstract removeSlot(slot: TSlot): void + + /** + * Gets the slot at a given position in canvas space. + * @param x The x coordinate of the position. + * @param y The y coordinate of the position. + * @returns The slot at the given position, otherwise `undefined`. + */ + getSlotInPosition(x: number, y: number): TSlot | undefined { + for (const slot of this.allSlots) { + if (slot.boundingRect.containsXy(x, y)) { + return slot + } + } + } + + /** + * Shows the context menu for an IO slot. + * @param slot The slot to show the context menu for. + * @param event The event that triggered the context menu. + */ + protected showSlotContextMenu(slot: TSlot, event: CanvasPointerEvent): void { + const options: IContextMenuValue[] = this.#getSlotMenuOptions(slot) + if (!(options.length > 0)) return + + new LiteGraph.ContextMenu( + options, + { + event: event as any, + title: slot.name || "Subgraph Output", + callback: (item: IContextMenuValue) => { + this.#onSlotMenuAction(item, slot, event) + }, + }, + ) + } + + /** + * Gets the context menu options for an IO slot. + * @param slot The slot to get the context menu options for. + * @returns The context menu options. + */ + #getSlotMenuOptions(slot: TSlot): IContextMenuValue[] { + const options: IContextMenuValue[] = [] + + // Disconnect option if slot has connections + if (slot !== this.emptySlot && slot.linkIds.length > 0) { + options.push({ content: "Disconnect Links", value: "disconnect" }) + } + + // Remove / rename slot option (except for the empty slot) + if (slot !== this.emptySlot) { + options.push( + { content: "Remove Slot", value: "remove" }, + { content: "Rename Slot", value: "rename" }, + ) + } + + return options + } + + /** + * Handles the action for an IO slot context menu. + * @param selectedItem The item that was selected from the context menu. + * @param slot The slot + * @param event The event that triggered the context menu. + */ + #onSlotMenuAction(selectedItem: IContextMenuValue, slot: TSlot, event: CanvasPointerEvent): void { + switch (selectedItem.value) { + // Disconnect all links from this output + case "disconnect": + slot.disconnect() + break + + // Remove the slot + case "remove": + if (slot !== this.emptySlot) { + this.removeSlot(slot) + } + break + + // Rename the slot + case "rename": + if (slot !== this.emptySlot) { + this.subgraph.canvasAction(c => c.prompt( + "Slot name", + slot.name, + (newName: string) => { + if (newName) this.renameSlot(slot, newName) + }, + event, + )) + } + break + } + + this.subgraph.setDirtyCanvas(true) + } + + /** Arrange the slots in this node. */ + arrange(): void { + const { minWidth, roundedRadius } = SubgraphIONodeBase + const [, y] = this.boundingRect + const x = this.slotAnchorX + const { size } = this + + let maxWidth = minWidth + let currentY = y + roundedRadius + + for (const slot of this.allSlots) { + const [slotWidth, slotHeight] = slot.measure() + slot.arrange([x, currentY, slotWidth, slotHeight]) + + currentY += slotHeight + if (slotWidth > maxWidth) maxWidth = slotWidth + } + + size[0] = maxWidth + 2 * roundedRadius + size[1] = currentY - y + roundedRadius + } + + draw(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors, fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput, editorAlpha?: number): void { + const { lineWidth, strokeStyle, fillStyle, font, textBaseline } = ctx + this.drawProtected(ctx, colorContext, fromSlot, editorAlpha) + Object.assign(ctx, { lineWidth, strokeStyle, fillStyle, font, textBaseline }) + } + + /** @internal Leaves {@link ctx} dirty. */ + protected abstract drawProtected(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors, fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput, editorAlpha?: number): void + + /** @internal Leaves {@link ctx} dirty. */ + protected drawSlots(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors, fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput, editorAlpha?: number): void { + ctx.fillStyle = "#AAA" + ctx.font = "12px Arial" + ctx.textBaseline = "middle" + + for (const slot of this.allSlots) { + slot.draw({ ctx, colorContext, fromSlot, editorAlpha }) + } + } + + configure(data: ExportedSubgraphIONode): void { + this.#boundingRect.set(data.bounding) + this.pinned = data.pinned ?? false + } + + asSerialisable(): ExportedSubgraphIONode { + return { + id: this.id, + bounding: this.boundingRect.export(), + pinned: this.pinned ? true : undefined, + } + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphInput.ts b/src/lib/litegraph/src/subgraph/SubgraphInput.ts new file mode 100644 index 0000000000..df4136e6e6 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphInput.ts @@ -0,0 +1,234 @@ +import type { SubgraphInputNode } from "./SubgraphInputNode" +import type { SubgraphOutput } from "./SubgraphOutput" +import type { SubgraphInputEventMap } from "@/infrastructure/SubgraphInputEventMap" +import type { INodeInputSlot, INodeOutputSlot, Point, ReadOnlyRect } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { RerouteId } from "@/Reroute" +import type { IBaseWidget } from "@/types/widgets" + +import { CustomEventTarget } from "@/infrastructure/CustomEventTarget" +import { LiteGraph } from "@/litegraph" +import { LLink } from "@/LLink" +import { NodeSlotType } from "@/types/globalEnums" + +import { SubgraphSlot } from "./SubgraphSlotBase" +import { isNodeSlot, isSubgraphOutput } from "./subgraphUtils" + +/** + * An input "slot" from a parent graph into a subgraph. + * + * IMPORTANT: A subgraph "input" is both an input AND an output. It creates an extra link connection point between + * a parent graph and a subgraph, so is conceptually similar to a reroute. + * + * This can be a little confusing, but is easier to visualise when imagining editing a subgraph. + * You have "Subgraph Inputs", because they are coming into the subgraph, which then connect to "node inputs". + * + * Functionally, however, when editing a subgraph, that "subgraph input" is the "origin" or "output side" of a link. + */ +export class SubgraphInput extends SubgraphSlot { + declare parent: SubgraphInputNode + + events = new CustomEventTarget() + + /** The linked widget that this slot is connected to. */ + #widgetRef?: WeakRef + + get _widget() { + return this.#widgetRef?.deref() + } + + set _widget(widget) { + this.#widgetRef = widget ? new WeakRef(widget) : undefined + } + + override connect(slot: INodeInputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined { + const { subgraph } = this.parent + + // Allow nodes to block connection + const inputIndex = node.inputs.indexOf(slot) + if (node.onConnectInput?.(inputIndex, this.type, this, this.parent, -1) === false) return + + // if (slot instanceof SubgraphOutput) { + // // Subgraph IO nodes have no special handling at present. + // return new LLink( + // ++subgraph.state.lastLinkId, + // this.type, + // this.parent.id, + // this.parent.slots.indexOf(this), + // node.id, + // inputIndex, + // afterRerouteId, + // ) + // } + + // Disconnect target input, if it is already connected. + if (slot.link != null) { + subgraph.beforeChange() + const link = subgraph.getLink(slot.link) + this.parent._disconnectNodeInput(node, slot, link) + } + + const inputWidget = node.getWidgetFromSlot(slot) + if (inputWidget) { + if (!this.matchesWidget(inputWidget)) { + console.warn("Target input has invalid widget.", slot, node) + return + } + + this._widget ??= inputWidget + this.events.dispatch("input-connected", { input: slot, widget: inputWidget }) + } + + const link = new LLink( + ++subgraph.state.lastLinkId, + slot.type, + this.parent.id, + this.parent.slots.indexOf(this), + node.id, + inputIndex, + afterRerouteId, + ) + + // Add to graph links list + subgraph._links.set(link.id, link) + + // Set link ID in each slot + this.linkIds.push(link.id) + slot.link = link.id + + // Reroutes + const reroutes = LLink.getReroutes(subgraph, link) + for (const reroute of reroutes) { + reroute.linkIds.add(link.id) + if (reroute.floating) delete reroute.floating + reroute._dragging = undefined + } + + // If this is the terminus of a floating link, remove it + const lastReroute = reroutes.at(-1) + if (lastReroute) { + for (const linkId of lastReroute.floatingLinkIds) { + const link = subgraph.floatingLinks.get(linkId) + if (link?.parentId === lastReroute.id) { + subgraph.removeFloatingLink(link) + } + } + } + subgraph._version++ + + node.onConnectionsChange?.( + NodeSlotType.INPUT, + inputIndex, + true, + link, + slot, + ) + + subgraph.afterChange() + + return link + } + + get labelPos(): Point { + const [x, y, , height] = this.boundingRect + return [x, y + height * 0.5] + } + + getConnectedWidgets(): IBaseWidget[] { + const { subgraph } = this.parent + const widgets: IBaseWidget[] = [] + + for (const linkId of this.linkIds) { + const link = subgraph.getLink(linkId) + if (!link) { + console.error("Link not found", linkId) + continue + } + + const resolved = link.resolve(subgraph) + if (resolved.input && resolved.inputNode?.widgets) { + // Has no widget + const widgetNamePojo = resolved.input.widget + if (!widgetNamePojo) continue + + // Invalid widget name + if (!widgetNamePojo.name) { + console.warn("Invalid widget name", widgetNamePojo) + continue + } + + const widget = resolved.inputNode.widgets.find(w => w.name === widgetNamePojo.name) + if (!widget) { + console.warn("Widget not found", widgetNamePojo) + continue + } + + widgets.push(widget) + } else { + console.debug("No input found on link id", linkId, link) + } + } + return widgets + } + + /** + * Validates that the connection between the new slot and the existing widget is valid. + * Used to prevent connections between widgets that are not of the same type. + * @param otherWidget The widget to compare to. + * @returns `true` if the connection is valid, otherwise `false`. + */ + matchesWidget(otherWidget: IBaseWidget): boolean { + const widget = this.#widgetRef?.deref() + if (!widget) return true + + if ( + otherWidget.type !== widget.type || + otherWidget.options.min !== widget.options.min || + otherWidget.options.max !== widget.options.max || + otherWidget.options.step !== widget.options.step || + otherWidget.options.step2 !== widget.options.step2 || + otherWidget.options.precision !== widget.options.precision + ) { + return false + } + + return true + } + + override disconnect(): void { + super.disconnect() + + this.events.dispatch("input-disconnected", { input: this }) + } + + /** For inputs, x is the right edge of the input node. */ + override arrange(rect: ReadOnlyRect): void { + const [right, top, width, height] = rect + const { boundingRect: b, pos } = this + + b[0] = right - width + b[1] = top + b[2] = width + b[3] = height + + pos[0] = right - height * 0.5 + pos[1] = top + height * 0.5 + } + + /** + * Checks if this slot is a valid target for a connection from the given slot. + * For SubgraphInput (which acts as an output inside the subgraph), + * the fromSlot should be an input slot. + */ + override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput): boolean { + if (isNodeSlot(fromSlot)) { + return "link" in fromSlot && LiteGraph.isValidConnection(this.type, fromSlot.type) + } + + if (isSubgraphOutput(fromSlot)) { + return LiteGraph.isValidConnection(this.type, fromSlot.type) + } + + return false + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphInputNode.ts b/src/lib/litegraph/src/subgraph/SubgraphInputNode.ts new file mode 100644 index 0000000000..eb2684ad1b --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphInputNode.ts @@ -0,0 +1,200 @@ +import type { SubgraphInput } from "./SubgraphInput" +import type { SubgraphOutput } from "./SubgraphOutput" +import type { LinkConnector } from "@/canvas/LinkConnector" +import type { CanvasPointer } from "@/CanvasPointer" +import type { DefaultConnectionColors, INodeInputSlot, INodeOutputSlot, ISlotType, Positionable } from "@/interfaces" +import type { LGraphNode, NodeId } from "@/LGraphNode" +import type { RerouteId } from "@/Reroute" +import type { CanvasPointerEvent } from "@/types/events" +import type { NodeLike } from "@/types/NodeLike" + +import { SUBGRAPH_INPUT_ID } from "@/constants" +import { Rectangle } from "@/infrastructure/Rectangle" +import { LLink } from "@/LLink" +import { NodeSlotType } from "@/types/globalEnums" +import { findFreeSlotOfType } from "@/utils/collections" + +import { EmptySubgraphInput } from "./EmptySubgraphInput" +import { SubgraphIONodeBase } from "./SubgraphIONodeBase" + +export class SubgraphInputNode extends SubgraphIONodeBase implements Positionable { + readonly id: NodeId = SUBGRAPH_INPUT_ID + + readonly emptySlot: EmptySubgraphInput = new EmptySubgraphInput(this) + + get slots() { + return this.subgraph.inputs + } + + override get allSlots(): SubgraphInput[] { + return [...this.slots, this.emptySlot] + } + + get slotAnchorX() { + const [x, , width] = this.boundingRect + return x + width - SubgraphIONodeBase.roundedRadius + } + + override onPointerDown(e: CanvasPointerEvent, pointer: CanvasPointer, linkConnector: LinkConnector): void { + // Left-click handling for dragging connections + if (e.button === 0) { + for (const slot of this.allSlots) { + const slotBounds = Rectangle.fromCentre(slot.pos, slot.boundingRect.height) + + if (slotBounds.containsXy(e.canvasX, e.canvasY)) { + pointer.onDragStart = () => { + linkConnector.dragNewFromSubgraphInput(this.subgraph, this, slot) + } + pointer.onDragEnd = (eUp) => { + linkConnector.dropLinks(this.subgraph, eUp) + } + pointer.finally = () => { + linkConnector.reset(true) + } + } + } + // Check for right-click + } else if (e.button === 2) { + const slot = this.getSlotInPosition(e.canvasX, e.canvasY) + if (slot) this.showSlotContextMenu(slot, e) + } + } + + /** @inheritdoc */ + override renameSlot(slot: SubgraphInput, name: string): void { + this.subgraph.renameInput(slot, name) + } + + /** @inheritdoc */ + override removeSlot(slot: SubgraphInput): void { + this.subgraph.removeInput(slot) + } + + canConnectTo(inputNode: NodeLike, input: INodeInputSlot, fromSlot: SubgraphInput): boolean { + return inputNode.canConnectTo(this, input, fromSlot) + } + + connectSlots(fromSlot: SubgraphInput, inputNode: LGraphNode, input: INodeInputSlot, afterRerouteId: RerouteId | undefined): LLink { + const { subgraph } = this + + const outputIndex = this.slots.indexOf(fromSlot) + const inputIndex = inputNode.inputs.indexOf(input) + + if (outputIndex === -1 || inputIndex === -1) throw new Error("Invalid slot indices.") + + return new LLink( + ++subgraph.state.lastLinkId, + input.type || fromSlot.type, + this.id, + outputIndex, + inputNode.id, + inputIndex, + afterRerouteId, + ) + } + + // #region Legacy LGraphNode compatibility + + connectByType( + slot: number, + target_node: LGraphNode, + target_slotType: ISlotType, + optsIn?: { afterRerouteId?: RerouteId }, + ): LLink | undefined { + const inputSlot = target_node.findInputByType(target_slotType) + if (!inputSlot) return + + if (slot === -1) { + // This indicates a connection is being made from the "Empty" slot. + // We need to create a new, concrete input on the subgraph that matches the target. + const newSubgraphInput = this.subgraph.addInput(inputSlot.slot.name, String(inputSlot.slot.type ?? "")) + const newSlotIndex = this.slots.indexOf(newSubgraphInput) + if (newSlotIndex === -1) { + console.error("Could not find newly created subgraph input slot.") + return + } + slot = newSlotIndex + } + + return this.slots[slot].connect(inputSlot.slot, target_node, optsIn?.afterRerouteId) + } + + findOutputSlot(name: string): SubgraphInput | undefined { + return this.slots.find(output => output.name === name) + } + + findOutputByType(type: ISlotType): SubgraphInput | undefined { + return findFreeSlotOfType(this.slots, type, slot => slot.linkIds.length > 0)?.slot + } + + // #endregion Legacy LGraphNode compatibility + + _disconnectNodeInput(node: LGraphNode, input: INodeInputSlot, link: LLink | undefined): void { + const { subgraph } = this + + // Break floating links + if (input._floatingLinks?.size) { + for (const link of input._floatingLinks) { + subgraph.removeFloatingLink(link) + } + } + + input.link = null + subgraph.setDirtyCanvas(false, true) + + if (!link) return + + const subgraphInputIndex = link.origin_slot + link.disconnect(subgraph, "output") + subgraph._version++ + + const subgraphInput = this.slots.at(subgraphInputIndex) + if (!subgraphInput) { + console.debug("disconnectNodeInput: subgraphInput not found", this, subgraphInputIndex) + return + } + + // search in the inputs list for this link + const index = subgraphInput.linkIds.indexOf(link.id) + if (index !== -1) { + subgraphInput.linkIds.splice(index, 1) + } else { + console.debug("disconnectNodeInput: link ID not found in subgraphInput linkIds", link.id) + } + + node.onConnectionsChange?.( + NodeSlotType.OUTPUT, + index, + false, + link, + subgraphInput, + ) + } + + override drawProtected(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors, fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput, editorAlpha?: number): void { + const { roundedRadius } = SubgraphIONodeBase + const transform = ctx.getTransform() + + const [x, y, width, height] = this.boundingRect + ctx.translate(x, y) + + // Draw top rounded part + ctx.strokeStyle = this.sideStrokeStyle + ctx.lineWidth = this.sideLineWidth + ctx.beginPath() + ctx.arc(width - roundedRadius, roundedRadius, roundedRadius, Math.PI * 1.5, 0) + + // Straight line to bottom + ctx.moveTo(width, roundedRadius) + ctx.lineTo(width, height - roundedRadius) + + // Bottom rounded part + ctx.arc(width - roundedRadius, height - roundedRadius, roundedRadius, 0, Math.PI * 0.5) + ctx.stroke() + + // Restore context + ctx.setTransform(transform) + + this.drawSlots(ctx, colorContext, fromSlot, editorAlpha) + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts new file mode 100644 index 0000000000..c14a5347b9 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts @@ -0,0 +1,382 @@ +import type { SubgraphInput } from "./SubgraphInput" +import type { ISubgraphInput } from "@/interfaces" +import type { BaseLGraph, LGraph } from "@/LGraph" +import type { GraphOrSubgraph, Subgraph } from "@/subgraph/Subgraph" +import type { ExportedSubgraphInstance } from "@/types/serialisation" +import type { IBaseWidget } from "@/types/widgets" +import type { UUID } from "@/utils/uuid" + +import { RecursionError } from "@/infrastructure/RecursionError" +import { LGraphButton } from "@/LGraphButton" +import { LGraphCanvas } from "@/LGraphCanvas" +import { LGraphNode } from "@/LGraphNode" +import { type INodeInputSlot, type ISlotType, type NodeId } from "@/litegraph" +import { LLink, type ResolvedConnection } from "@/LLink" +import { NodeInputSlot } from "@/node/NodeInputSlot" +import { NodeOutputSlot } from "@/node/NodeOutputSlot" +import { toConcreteWidget } from "@/widgets/widgetMap" + +import { type ExecutableLGraphNode, ExecutableNodeDTO, type ExecutionId } from "./ExecutableNodeDTO" + +/** + * An instance of a {@link Subgraph}, displayed as a node on the containing (parent) graph. + */ +export class SubgraphNode extends LGraphNode implements BaseLGraph { + declare inputs: (INodeInputSlot & Partial)[] + + override readonly type: UUID + override readonly isVirtualNode = true as const + + get rootGraph(): LGraph { + return this.graph.rootGraph + } + + override get displayType(): string { + return "Subgraph node" + } + + override isSubgraphNode(): this is SubgraphNode { + return true + } + + override widgets: IBaseWidget[] = [] + + /** Manages lifecycle of all subgraph event listeners */ + #eventAbortController = new AbortController() + + constructor( + /** The (sub)graph that contains this subgraph instance. */ + override readonly graph: GraphOrSubgraph, + /** The definition of this subgraph; how its nodes are configured, etc. */ + readonly subgraph: Subgraph, + instanceData: ExportedSubgraphInstance, + ) { + super(subgraph.name, subgraph.id) + + // Update this node when the subgraph input / output slots are changed + const subgraphEvents = this.subgraph.events + const { signal } = this.#eventAbortController + + subgraphEvents.addEventListener("input-added", (e) => { + const subgraphInput = e.detail.input + const { name, type } = subgraphInput + const input = this.addInput(name, type) + + this.#addSubgraphInputListeners(subgraphInput, input) + }, { signal }) + + subgraphEvents.addEventListener("removing-input", (e) => { + const widget = e.detail.input._widget + if (widget) this.ensureWidgetRemoved(widget) + + this.removeInput(e.detail.index) + this.setDirtyCanvas(true, true) + }, { signal }) + + subgraphEvents.addEventListener("output-added", (e) => { + const { name, type } = e.detail.output + this.addOutput(name, type) + }, { signal }) + + subgraphEvents.addEventListener("removing-output", (e) => { + this.removeOutput(e.detail.index) + this.setDirtyCanvas(true, true) + }, { signal }) + + subgraphEvents.addEventListener("renaming-input", (e) => { + const { index, newName } = e.detail + const input = this.inputs.at(index) + if (!input) throw new Error("Subgraph input not found") + + input.label = newName + }, { signal }) + + subgraphEvents.addEventListener("renaming-output", (e) => { + const { index, newName } = e.detail + const output = this.outputs.at(index) + if (!output) throw new Error("Subgraph output not found") + + output.label = newName + }, { signal }) + + this.type = subgraph.id + this.configure(instanceData) + + this.addTitleButton({ + name: "enter_subgraph", + text: "\uE93B", // Unicode for pi-window-maximize + yOffset: 0, // No vertical offset needed, button is centered + xOffset: -10, + fontSize: 16, + }) + } + + override onTitleButtonClick(button: LGraphButton, canvas: LGraphCanvas): void { + if (button.name === "enter_subgraph") { + canvas.openSubgraph(this.subgraph) + } else { + super.onTitleButtonClick(button, canvas) + } + } + + #addSubgraphInputListeners(subgraphInput: SubgraphInput, input: INodeInputSlot & Partial) { + input._listenerController?.abort() + input._listenerController = new AbortController() + const { signal } = input._listenerController + + subgraphInput.events.addEventListener( + "input-connected", + () => { + if (input._widget) return + + const widget = subgraphInput._widget + if (!widget) return + + this.#setWidget(subgraphInput, input, widget) + }, + { signal }, + ) + + subgraphInput.events.addEventListener( + "input-disconnected", + () => { + // If the input is connected to more than one widget, don't remove the widget + const connectedWidgets = subgraphInput.getConnectedWidgets() + if (connectedWidgets.length > 0) return + + this.removeWidgetByName(input.name) + + delete input.pos + delete input.widget + input._widget = undefined + }, + { signal }, + ) + } + + override configure(info: ExportedSubgraphInstance): void { + for (const input of this.inputs) { + input._listenerController?.abort() + } + + this.inputs.length = 0 + this.inputs.push( + ...this.subgraph.inputNode.slots.map( + slot => new NodeInputSlot({ name: slot.name, localized_name: slot.localized_name, label: slot.label, type: slot.type, link: null }, this), + ), + ) + + this.outputs.length = 0 + this.outputs.push( + ...this.subgraph.outputNode.slots.map( + slot => new NodeOutputSlot({ name: slot.name, localized_name: slot.localized_name, label: slot.label, type: slot.type, links: null }, this), + ), + ) + + super.configure(info) + } + + override _internalConfigureAfterSlots() { + // Reset widgets + this.widgets.length = 0 + + // Check all inputs for connected widgets + for (const input of this.inputs) { + const subgraphInput = this.subgraph.inputNode.slots.find(slot => slot.name === input.name) + if (!subgraphInput) throw new Error(`[SubgraphNode.configure] No subgraph input found for input ${input.name}`) + + this.#addSubgraphInputListeners(subgraphInput, input) + + // Find the first widget that this slot is connected to + for (const linkId of subgraphInput.linkIds) { + const link = this.subgraph.getLink(linkId) + if (!link) { + console.warn(`[SubgraphNode.configure] No link found for link ID ${linkId}`, this) + continue + } + + const resolved = link.resolve(this.subgraph) + if (!resolved.input || !resolved.inputNode) { + console.warn("Invalid resolved link", resolved, this) + continue + } + + // No widget - ignore this link + const widget = resolved.inputNode.getWidgetFromSlot(resolved.input) + if (!widget) continue + + this.#setWidget(subgraphInput, input, widget) + break + } + } + } + + #setWidget(subgraphInput: Readonly, input: INodeInputSlot, widget: Readonly) { + // Use the first matching widget + const promotedWidget = toConcreteWidget(widget, this).createCopyForNode(this) + + Object.assign(promotedWidget, { + get name() { + return subgraphInput.name + }, + set name(value) { + console.warn("Promoted widget: setting name is not allowed", this, value) + }, + get localized_name() { + return subgraphInput.localized_name + }, + set localized_name(value) { + console.warn("Promoted widget: setting localized_name is not allowed", this, value) + }, + get label() { + return subgraphInput.label + }, + set label(value) { + console.warn("Promoted widget: setting label is not allowed", this, value) + }, + get tooltip() { + // Preserve the original widget's tooltip for promoted widgets + return widget.tooltip + }, + set tooltip(value) { + console.warn("Promoted widget: setting tooltip is not allowed", this, value) + }, + }) + + this.widgets.push(promotedWidget) + + // Dispatch widget-promoted event + this.subgraph.events.dispatch("widget-promoted", { widget: promotedWidget, subgraphNode: this }) + + input.widget = { name: subgraphInput.name } + input._widget = promotedWidget + } + + /** + * Ensures the subgraph slot is in the params before adding the input as normal. + * @param name The name of the input slot. + * @param type The type of the input slot. + * @param inputProperties Properties that are directly assigned to the created input. Default: a new, empty object. + * @returns The new input slot. + * @remarks Assertion is required to instantiate empty generic POJO. + */ + override addInput>(name: string, type: ISlotType, inputProperties: TInput = {} as TInput): INodeInputSlot & TInput { + // Bypasses type narrowing on this.inputs + return super.addInput(name, type, inputProperties) + } + + override getInputLink(slot: number): LLink | null { + // Output side: the link from inside the subgraph + const innerLink = this.subgraph.outputNode.slots[slot].getLinks().at(0) + if (!innerLink) { + console.warn(`SubgraphNode.getInputLink: no inner link found for slot ${slot}`) + return null + } + + const newLink = LLink.create(innerLink) + newLink.origin_id = `${this.id}:${innerLink.origin_id}` + newLink.origin_slot = innerLink.origin_slot + + return newLink + } + + /** + * Finds the internal links connected to the given input slot inside the subgraph, and resolves the nodes / slots. + * @param slot The slot index + * @returns The resolved connections, or undefined if no input node is found. + * @remarks This is used to resolve the input links when dragging a link from a subgraph input slot. + */ + resolveSubgraphInputLinks(slot: number): ResolvedConnection[] { + const inputSlot = this.subgraph.inputNode.slots[slot] + const innerLinks = inputSlot.getLinks() + if (innerLinks.length === 0) { + console.debug(`[SubgraphNode.resolveSubgraphInputLinks] No inner links found for input slot [${slot}] ${inputSlot.name}`, this) + return [] + } + return innerLinks.map(link => link.resolve(this.subgraph)) + } + + /** + * Finds the internal link connected to the given output slot inside the subgraph, and resolves the nodes / slots. + * @param slot The slot index + * @returns The output node if found, otherwise undefined. + */ + resolveSubgraphOutputLink(slot: number): ResolvedConnection | undefined { + const outputSlot = this.subgraph.outputNode.slots[slot] + const innerLink = outputSlot.getLinks().at(0) + if (innerLink) return innerLink.resolve(this.subgraph) + + console.debug(`[SubgraphNode.resolveSubgraphOutputLink] No inner link found for output slot [${slot}] ${outputSlot.name}`, this) + } + + /** @internal Used to flatten the subgraph before execution. */ + getInnerNodes( + /** The set of computed node DTOs for this execution. */ + executableNodes: Map, + /** The path of subgraph node IDs. */ + subgraphNodePath: readonly NodeId[] = [], + /** Internal recursion param. The list of nodes to add to. */ + nodes: ExecutableLGraphNode[] = [], + /** Internal recursion param. The set of visited nodes. */ + visited = new Set(), + ): ExecutableLGraphNode[] { + if (visited.has(this)) { + const nodeInfo = `${this.id}${this.title ? ` (${this.title})` : ""}` + const subgraphInfo = `'${this.subgraph.name || "Unnamed Subgraph"}'` + const depth = subgraphNodePath.length + throw new RecursionError( + `Circular reference detected at depth ${depth} in node ${nodeInfo} of subgraph ${subgraphInfo}. ` + + `This creates an infinite loop in the subgraph hierarchy.`, + ) + } + visited.add(this) + + const subgraphInstanceIdPath = [...subgraphNodePath, this.id] + + // Store the subgraph node DTO + const parentSubgraphNode = this.graph.rootGraph.resolveSubgraphIdPath(subgraphNodePath).at(-1) + const subgraphNodeDto = new ExecutableNodeDTO(this, subgraphNodePath, executableNodes, parentSubgraphNode) + executableNodes.set(subgraphNodeDto.id, subgraphNodeDto) + + for (const node of this.subgraph.nodes) { + if ("getInnerNodes" in node) { + node.getInnerNodes(executableNodes, subgraphInstanceIdPath, nodes, new Set(visited)) + } else { + // Create minimal DTOs rather than cloning the node + const aVeryRealNode = new ExecutableNodeDTO(node, subgraphInstanceIdPath, executableNodes, this) + executableNodes.set(aVeryRealNode.id, aVeryRealNode) + nodes.push(aVeryRealNode) + } + } + return nodes + } + + override removeWidgetByName(name: string): void { + const widget = this.widgets.find(w => w.name === name) + if (widget) { + this.subgraph.events.dispatch("widget-demoted", { widget, subgraphNode: this }) + } + super.removeWidgetByName(name) + } + + override ensureWidgetRemoved(widget: IBaseWidget): void { + if (this.widgets.includes(widget)) { + this.subgraph.events.dispatch("widget-demoted", { widget, subgraphNode: this }) + } + super.ensureWidgetRemoved(widget) + } + + override onRemoved(): void { + // Clean up all subgraph event listeners + this.#eventAbortController.abort() + + // Clean up all promoted widgets + for (const widget of this.widgets) { + this.subgraph.events.dispatch("widget-demoted", { widget, subgraphNode: this }) + } + + for (const input of this.inputs) { + input._listenerController?.abort() + } + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphOutput.ts b/src/lib/litegraph/src/subgraph/SubgraphOutput.ts new file mode 100644 index 0000000000..1a67d75ab1 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphOutput.ts @@ -0,0 +1,137 @@ +import type { SubgraphInput } from "./SubgraphInput" +import type { SubgraphOutputNode } from "./SubgraphOutputNode" +import type { INodeInputSlot, INodeOutputSlot, Point, ReadOnlyRect } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { RerouteId } from "@/Reroute" + +import { LiteGraph } from "@/litegraph" +import { LLink } from "@/LLink" +import { NodeSlotType } from "@/types/globalEnums" +import { removeFromArray } from "@/utils/collections" + +import { SubgraphSlot } from "./SubgraphSlotBase" +import { isNodeSlot, isSubgraphInput } from "./subgraphUtils" + +/** + * An output "slot" from a subgraph to a parent graph. + * + * IMPORTANT: A subgraph "output" is both an output AND an input. It creates an extra link connection point between + * a parent graph and a subgraph, so is conceptually similar to a reroute. + * + * This can be a little confusing, but is easier to visualise when imagining editing a subgraph. + * You have "Subgraph Outputs", because they go from inside the subgraph and out, but links to them come from "node outputs". + * + * Functionally, however, when editing a subgraph, that "subgraph output" is the "target" or "input side" of a link. + */ +export class SubgraphOutput extends SubgraphSlot { + declare parent: SubgraphOutputNode + + override connect(slot: INodeOutputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined { + const { subgraph } = this.parent + + // Validate type compatibility + if (!LiteGraph.isValidConnection(slot.type, this.type)) return + + // Allow nodes to block connection + const outputIndex = node.outputs.indexOf(slot) + if (outputIndex === -1) throw new Error("Slot is not an output of the given node") + + if (node.onConnectOutput?.(outputIndex, this.type, this, this.parent, -1) === false) return + + // Link should not be present, but just in case, disconnect it + const existingLink = this.getLinks().at(0) + if (existingLink != null) { + subgraph.beforeChange() + + existingLink.disconnect(subgraph, "input") + const resolved = existingLink.resolve(subgraph) + const links = resolved.output?.links + if (links) removeFromArray(links, existingLink.id) + } + + const link = new LLink( + ++subgraph.state.lastLinkId, + slot.type, + node.id, + outputIndex, + this.parent.id, + this.parent.slots.indexOf(this), + afterRerouteId, + ) + + // Add to graph links list + subgraph._links.set(link.id, link) + + // Set link ID in each slot + this.linkIds[0] = link.id + slot.links ??= [] + slot.links.push(link.id) + + // Reroutes + const reroutes = LLink.getReroutes(subgraph, link) + for (const reroute of reroutes) { + reroute.linkIds.add(link.id) + if (reroute.floating) delete reroute.floating + reroute._dragging = undefined + } + + // If this is the terminus of a floating link, remove it + const lastReroute = reroutes.at(-1) + if (lastReroute) { + for (const linkId of lastReroute.floatingLinkIds) { + const link = subgraph.floatingLinks.get(linkId) + if (link?.parentId === lastReroute.id) { + subgraph.removeFloatingLink(link) + } + } + } + subgraph._version++ + + node.onConnectionsChange?.( + NodeSlotType.OUTPUT, + outputIndex, + true, + link, + slot, + ) + + subgraph.afterChange() + + return link + } + + get labelPos(): Point { + const [x, y, , height] = this.boundingRect + return [x + height, y + height * 0.5] + } + + override arrange(rect: ReadOnlyRect): void { + const [left, top, width, height] = rect + const { boundingRect: b, pos } = this + + b[0] = left + b[1] = top + b[2] = width + b[3] = height + + pos[0] = left + height * 0.5 + pos[1] = top + height * 0.5 + } + + /** + * Checks if this slot is a valid target for a connection from the given slot. + * For SubgraphOutput (which acts as an input inside the subgraph), + * the fromSlot should be an output slot. + */ + override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput): boolean { + if (isNodeSlot(fromSlot)) { + return "links" in fromSlot && LiteGraph.isValidConnection(fromSlot.type, this.type) + } + + if (isSubgraphInput(fromSlot)) { + return LiteGraph.isValidConnection(fromSlot.type, this.type) + } + + return false + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphOutputNode.ts b/src/lib/litegraph/src/subgraph/SubgraphOutputNode.ts new file mode 100644 index 0000000000..60786dbe21 --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphOutputNode.ts @@ -0,0 +1,119 @@ +import type { SubgraphInput } from "./SubgraphInput" +import type { SubgraphOutput } from "./SubgraphOutput" +import type { LinkConnector } from "@/canvas/LinkConnector" +import type { CanvasPointer } from "@/CanvasPointer" +import type { DefaultConnectionColors, INodeInputSlot, INodeOutputSlot, ISlotType, Positionable } from "@/interfaces" +import type { LGraphNode, NodeId } from "@/LGraphNode" +import type { LLink } from "@/LLink" +import type { RerouteId } from "@/Reroute" +import type { CanvasPointerEvent } from "@/types/events" +import type { NodeLike } from "@/types/NodeLike" +import type { SubgraphIO } from "@/types/serialisation" + +import { SUBGRAPH_OUTPUT_ID } from "@/constants" +import { Rectangle } from "@/infrastructure/Rectangle" +import { findFreeSlotOfType } from "@/utils/collections" + +import { EmptySubgraphOutput } from "./EmptySubgraphOutput" +import { SubgraphIONodeBase } from "./SubgraphIONodeBase" + +export class SubgraphOutputNode extends SubgraphIONodeBase implements Positionable { + readonly id: NodeId = SUBGRAPH_OUTPUT_ID + + readonly emptySlot: EmptySubgraphOutput = new EmptySubgraphOutput(this) + + get slots() { + return this.subgraph.outputs + } + + override get allSlots(): SubgraphOutput[] { + return [...this.slots, this.emptySlot] + } + + get slotAnchorX() { + const [x] = this.boundingRect + return x + SubgraphIONodeBase.roundedRadius + } + + override onPointerDown(e: CanvasPointerEvent, pointer: CanvasPointer, linkConnector: LinkConnector): void { + // Left-click handling for dragging connections + if (e.button === 0) { + for (const slot of this.allSlots) { + const slotBounds = Rectangle.fromCentre(slot.pos, slot.boundingRect.height) + + if (slotBounds.containsXy(e.canvasX, e.canvasY)) { + pointer.onDragStart = () => { + linkConnector.dragNewFromSubgraphOutput(this.subgraph, this, slot) + } + pointer.onDragEnd = (eUp) => { + linkConnector.dropLinks(this.subgraph, eUp) + } + pointer.finally = () => { + linkConnector.reset(true) + } + } + } + // Check for right-click + } else if (e.button === 2) { + const slot = this.getSlotInPosition(e.canvasX, e.canvasY) + if (slot) this.showSlotContextMenu(slot, e) + } + } + + /** @inheritdoc */ + override renameSlot(slot: SubgraphOutput, name: string): void { + this.subgraph.renameOutput(slot, name) + } + + /** @inheritdoc */ + override removeSlot(slot: SubgraphOutput): void { + this.subgraph.removeOutput(slot) + } + + canConnectTo(outputNode: NodeLike, fromSlot: SubgraphOutput, output: INodeOutputSlot | SubgraphIO): boolean { + return outputNode.canConnectTo(this, fromSlot, output) + } + + connectByTypeOutput( + slot: number, + target_node: LGraphNode, + target_slotType: ISlotType, + optsIn?: { afterRerouteId?: RerouteId }, + ): LLink | undefined { + const outputSlot = target_node.findOutputByType(target_slotType) + if (!outputSlot) return + + return this.slots[slot].connect(outputSlot.slot, target_node, optsIn?.afterRerouteId) + } + + findInputByType(type: ISlotType): SubgraphOutput | undefined { + return findFreeSlotOfType(this.slots, type, slot => slot.linkIds.length > 0)?.slot + } + + override drawProtected(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors, fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput, editorAlpha?: number): void { + const { roundedRadius } = SubgraphIONodeBase + const transform = ctx.getTransform() + + const [x, y, , height] = this.boundingRect + ctx.translate(x, y) + + // Draw bottom rounded part + ctx.strokeStyle = this.sideStrokeStyle + ctx.lineWidth = this.sideLineWidth + ctx.beginPath() + ctx.arc(roundedRadius, roundedRadius, roundedRadius, Math.PI, Math.PI * 1.5) + + // Straight line to bottom + ctx.moveTo(0, roundedRadius) + ctx.lineTo(0, height - roundedRadius) + + // Bottom rounded part + ctx.arc(roundedRadius, height - roundedRadius, roundedRadius, Math.PI, Math.PI * 0.5, true) + ctx.stroke() + + // Restore context + ctx.setTransform(transform) + + this.drawSlots(ctx, colorContext, fromSlot, editorAlpha) + } +} diff --git a/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts b/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts new file mode 100644 index 0000000000..ed49e611bb --- /dev/null +++ b/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts @@ -0,0 +1,206 @@ +import type { SubgraphInput } from "./SubgraphInput" +import type { SubgraphInputNode } from "./SubgraphInputNode" +import type { SubgraphOutput } from "./SubgraphOutput" +import type { SubgraphOutputNode } from "./SubgraphOutputNode" +import type { DefaultConnectionColors, Hoverable, INodeInputSlot, INodeOutputSlot, Point, ReadOnlyRect, ReadOnlySize } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" +import type { LinkId, LLink } from "@/LLink" +import type { RerouteId } from "@/Reroute" +import type { CanvasPointerEvent } from "@/types/events" +import type { Serialisable, SubgraphIO } from "@/types/serialisation" + +import { SlotShape } from "@/draw" +import { ConstrainedSize } from "@/infrastructure/ConstrainedSize" +import { Rectangle } from "@/infrastructure/Rectangle" +import { LGraphCanvas } from "@/LGraphCanvas" +import { LiteGraph } from "@/litegraph" +import { SlotBase } from "@/node/SlotBase" +import { createUuidv4, type UUID } from "@/utils/uuid" + +export interface SubgraphSlotDrawOptions { + ctx: CanvasRenderingContext2D + colorContext: DefaultConnectionColors + lowQuality?: boolean + fromSlot?: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput + editorAlpha?: number +} + +/** Shared base class for the slots used on Subgraph . */ +export abstract class SubgraphSlot extends SlotBase implements SubgraphIO, Hoverable, Serialisable { + static get defaultHeight() { + return LiteGraph.NODE_SLOT_HEIGHT + } + + readonly #pos: Point = new Float32Array(2) + + readonly measurement: ConstrainedSize = new ConstrainedSize(SubgraphSlot.defaultHeight, SubgraphSlot.defaultHeight) + + readonly id: UUID + readonly parent: SubgraphInputNode | SubgraphOutputNode + override type: string + + readonly linkIds: LinkId[] = [] + + override readonly boundingRect: Rectangle = new Rectangle(0, 0, 0, SubgraphSlot.defaultHeight) + + override get pos() { + return this.#pos + } + + override set pos(value) { + if (!value || value.length < 2) return + + this.#pos[0] = value[0] + this.#pos[1] = value[1] + } + + /** Whether this slot is connected to another slot. */ + override get isConnected() { + return this.linkIds.length > 0 + } + + /** The display name of this slot. */ + get displayName() { + return this.label ?? this.localized_name ?? this.name + } + + abstract get labelPos(): Point + + constructor(slot: SubgraphIO, parent: SubgraphInputNode | SubgraphOutputNode) { + super(slot.name, slot.type) + + Object.assign(this, slot) + this.id = slot.id ?? createUuidv4() + this.type = slot.type + this.parent = parent + } + + isPointerOver: boolean = false + + containsPoint(point: Point): boolean { + return this.boundingRect.containsPoint(point) + } + + onPointerMove(e: CanvasPointerEvent): void { + this.isPointerOver = this.boundingRect.containsXy(e.canvasX, e.canvasY) + } + + getLinks(): LLink[] { + const links: LLink[] = [] + const { subgraph } = this.parent + + for (const id of this.linkIds) { + const link = subgraph.getLink(id) + if (link) links.push(link) + } + return links + } + + decrementSlots(inputsOrOutputs: "inputs" | "outputs"): void { + const { links } = this.parent.subgraph + const linkProperty = inputsOrOutputs === "inputs" ? "origin_slot" : "target_slot" + + for (const linkId of this.linkIds) { + const link = links.get(linkId) + if (link) link[linkProperty]-- + else console.warn("decrementSlots: link ID not found", linkId) + } + } + + measure(): ReadOnlySize { + const width = LGraphCanvas._measureText?.(this.displayName) ?? 0 + + const { defaultHeight } = SubgraphSlot + this.measurement.setValues(width + defaultHeight, defaultHeight) + return this.measurement.toSize() + } + + abstract arrange(rect: ReadOnlyRect): void + + abstract connect( + slot: INodeInputSlot | INodeOutputSlot, + node: LGraphNode, + afterRerouteId?: RerouteId, + ): LLink | undefined + + /** + * Disconnects all links connected to this slot. + */ + disconnect(): void { + const { subgraph } = this.parent + + for (const linkId of this.linkIds) { + subgraph.removeLink(linkId) + } + + this.linkIds.length = 0 + } + + /** + * Checks if this slot is a valid target for a connection from the given slot. + * @param fromSlot The slot that is being dragged to connect to this slot. + * @returns true if the connection is valid, false otherwise. + */ + abstract isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput): boolean + + /** @remarks Leaves the context dirty. */ + draw({ ctx, colorContext, lowQuality, fromSlot, editorAlpha = 1 }: SubgraphSlotDrawOptions): void { + // Assertion: SlotShape is a subset of RenderShape + const shape = this.shape as unknown as SlotShape + const { isPointerOver, pos: [x, y] } = this + + // Check if this slot is a valid target for the current dragging connection + const isValidTarget = fromSlot ? this.isValidTarget(fromSlot) : true + const isValid = !fromSlot || isValidTarget + + // Only highlight if the slot is valid AND mouse is over it + const highlight = isValid && isPointerOver + + // Save current alpha + const previousAlpha = ctx.globalAlpha + + // Set opacity based on validity when dragging a connection + ctx.globalAlpha = isValid ? editorAlpha : 0.4 * editorAlpha + + ctx.beginPath() + + // Default rendering for circle, hollow circle. + const color = this.renderingColor(colorContext) + if (lowQuality) { + ctx.fillStyle = color + + ctx.rect(x - 4, y - 4, 8, 8) + ctx.fill() + } else if (shape === SlotShape.HollowCircle) { + ctx.lineWidth = 3 + ctx.strokeStyle = color + + const radius = highlight ? 4 : 3 + ctx.arc(x, y, radius, 0, Math.PI * 2) + ctx.stroke() + } else { + // Normal circle + ctx.fillStyle = color + + const radius = highlight ? 5 : 4 + ctx.arc(x, y, radius, 0, Math.PI * 2) + ctx.fill() + } + + // Draw label with current opacity + if (this.displayName) { + const [labelX, labelY] = this.labelPos + // Also apply highlight logic to text color + ctx.fillStyle = highlight ? "white" : (LiteGraph.NODE_TEXT_COLOR || "#AAA") + ctx.fillText(this.displayName, labelX, labelY) + } + + // Restore alpha + ctx.globalAlpha = previousAlpha + } + + asSerialisable(): SubgraphIO { + const { id, name, type, linkIds, localized_name, label, dir, shape, color_off, color_on, pos } = this + return { id, name, type, linkIds, localized_name, label, dir, shape, color_off, color_on, pos } + } +} diff --git a/src/lib/litegraph/src/subgraph/subgraphUtils.ts b/src/lib/litegraph/src/subgraph/subgraphUtils.ts new file mode 100644 index 0000000000..d8036b9a8f --- /dev/null +++ b/src/lib/litegraph/src/subgraph/subgraphUtils.ts @@ -0,0 +1,420 @@ +import type { GraphOrSubgraph } from "./Subgraph" +import type { SubgraphInput } from "./SubgraphInput" +import type { SubgraphOutput } from "./SubgraphOutput" +import type { INodeInputSlot, INodeOutputSlot, Positionable } from "@/interfaces" +import type { LGraph } from "@/LGraph" +import type { ISerialisedNode, SerialisableLLink, SubgraphIO } from "@/types/serialisation" +import type { UUID } from "@/utils/uuid" + +import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from "@/constants" +import { LGraphGroup } from "@/LGraphGroup" +import { LGraphNode } from "@/LGraphNode" +import { createUuidv4, LiteGraph } from "@/litegraph" +import { LLink, type ResolvedConnection } from "@/LLink" +import { Reroute } from "@/Reroute" +import { nextUniqueName } from "@/strings" + +import { SubgraphInputNode } from "./SubgraphInputNode" +import { SubgraphOutputNode } from "./SubgraphOutputNode" + +export interface FilteredItems { + nodes: Set + reroutes: Set + groups: Set + subgraphInputNodes: Set + subgraphOutputNodes: Set + unknown: Set +} + +export function splitPositionables(items: Iterable): FilteredItems { + const nodes = new Set() + const reroutes = new Set() + const groups = new Set() + const subgraphInputNodes = new Set() + const subgraphOutputNodes = new Set() + + const unknown = new Set() + + for (const item of items) { + switch (true) { + case item instanceof LGraphNode: + nodes.add(item) + break + case item instanceof LGraphGroup: + groups.add(item) + break + case item instanceof Reroute: + reroutes.add(item) + break + case item instanceof SubgraphInputNode: + subgraphInputNodes.add(item) + break + case item instanceof SubgraphOutputNode: + subgraphOutputNodes.add(item) + break + default: + unknown.add(item) + break + } + } + + return { + nodes, + reroutes, + groups, + subgraphInputNodes, + subgraphOutputNodes, + unknown, + } +} + +interface BoundaryLinks { + boundaryLinks: LLink[] + boundaryFloatingLinks: LLink[] + internalLinks: LLink[] + boundaryInputLinks: LLink[] + boundaryOutputLinks: LLink[] +} + +export function getBoundaryLinks(graph: LGraph, items: Set): BoundaryLinks { + const internalLinks: LLink[] = [] + const boundaryLinks: LLink[] = [] + const boundaryInputLinks: LLink[] = [] + const boundaryOutputLinks: LLink[] = [] + const boundaryFloatingLinks: LLink[] = [] + const visited = new WeakSet() + + for (const item of items) { + if (visited.has(item)) continue + visited.add(item) + + // Nodes + if (item instanceof LGraphNode) { + const node = item + + // Inputs + if (node.inputs) { + for (const input of node.inputs) { + addFloatingLinks(input._floatingLinks) + + if (input.link == null) continue + + const resolved = LLink.resolve(input.link, graph) + if (!resolved) { + console.debug(`Failed to resolve link ID [${input.link}]`) + continue + } + + // Output end of this link is outside the items set + const { link, outputNode } = resolved + if (outputNode) { + if (!items.has(outputNode)) { + boundaryInputLinks.push(link) + } else { + internalLinks.push(link) + } + } else if (link.origin_id === SUBGRAPH_INPUT_ID) { + // Subgraph input node - always boundary + boundaryInputLinks.push(link) + } + } + } + + // Outputs + if (node.outputs) { + for (const output of node.outputs) { + addFloatingLinks(output._floatingLinks) + + if (!output.links) continue + + const many = LLink.resolveMany(output.links, graph) + for (const { link, inputNode } of many) { + if ( + // Subgraph output node + link.target_id === SUBGRAPH_OUTPUT_ID || + // Input end of this link is outside the items set + (inputNode && !items.has(inputNode)) + ) { + boundaryOutputLinks.push(link) + } + // Internal links are discovered on input side. + } + } + } + } else if (item instanceof Reroute) { + // Reroutes + const reroute = item + + // TODO: This reroute should be on one side of the boundary. We should mark the reroute that is on each side of the boundary. + // TODO: This could occur any number of times on a link; each time should be marked as a separate boundary. + // TODO: e.g. A link with 3 reroutes, the first and last reroute are in `items`, but the middle reroute is not. This will be two "in" and two "out" boundaries. + const results = LLink.resolveMany(reroute.linkIds, graph) + for (const { link } of results) { + const reroutes = LLink.getReroutes(graph, link) + const reroutesOutside = reroutes.filter(reroute => !items.has(reroute)) + + // for (const reroute of reroutes) { + // // TODO: Do the checks here. + // } + + const { inputNode, outputNode } = link.resolve(graph) + + if ( + reroutesOutside.length || + (inputNode && !items.has(inputNode)) || + (outputNode && !items.has(outputNode)) + ) { + boundaryLinks.push(link) + } + } + } + } + + return { boundaryLinks, boundaryFloatingLinks, internalLinks, boundaryInputLinks, boundaryOutputLinks } + + /** + * Adds any floating links that cross the boundary. + * @param floatingLinks The floating links to check + */ + function addFloatingLinks(floatingLinks: Set | undefined): void { + if (!floatingLinks) return + + for (const link of floatingLinks) { + const crossesBoundary = LLink + .getReroutes(graph, link) + .some(reroute => !items.has(reroute)) + + if (crossesBoundary) boundaryFloatingLinks.push(link) + } + } +} + +export function multiClone(nodes: Iterable): ISerialisedNode[] { + const clonedNodes: ISerialisedNode[] = [] + + // Selectively clone - keep IDs & links + for (const node of nodes) { + const newNode = LiteGraph.createNode(node.type) + if (!newNode) { + console.warn("Failed to create node", node.type) + continue + } + + // Must be cloned; litegraph "serialize" is mostly shallow clone + const data = LiteGraph.cloneObject(node.serialize()) + newNode.configure(data) + + clonedNodes.push(newNode.serialize()) + } + + return clonedNodes +} + +/** + * Groups resolved connections by output object. If the output is nullish, the connection will be in its own group. + * @param resolvedConnections The resolved connections to group + * @returns A map of grouped connections. + */ +export function groupResolvedByOutput( + resolvedConnections: ResolvedConnection[], +): Map { + const groupedByOutput: ReturnType = new Map() + + for (const resolved of resolvedConnections) { + // Force no group (unique object) if output is undefined; corruption or an error has occurred + const groupBy = resolved.subgraphInput ?? resolved.output ?? {} + const group = groupedByOutput.get(groupBy) + if (group) { + group.push(resolved) + } else { + groupedByOutput.set(groupBy, [resolved]) + } + } + + return groupedByOutput +} + +export function mapSubgraphInputsAndLinks(resolvedInputLinks: ResolvedConnection[], links: SerialisableLLink[]): SubgraphIO[] { + // Group matching links + const groupedByOutput = groupResolvedByOutput(resolvedInputLinks) + + // Create one input for each output (outside subgraph) + const inputs: SubgraphIO[] = [] + + for (const [, connections] of groupedByOutput) { + const inputLinks: SerialisableLLink[] = [] + + // Create serialised links for all links (will be recreated in subgraph) + for (const resolved of connections) { + const { link, input } = resolved + if (!input) continue + + const linkData = link.asSerialisable() + linkData.origin_id = SUBGRAPH_INPUT_ID + linkData.origin_slot = inputs.length + links.push(linkData) + inputLinks.push(linkData) + } + + // Use first input link + const { input } = connections[0] + if (!input) continue + + // Subgraph input slot + const { color_off, color_on, dir, hasErrors, label, localized_name, name, shape, type } = input + const uniqueName = nextUniqueName(name, inputs.map(input => input.name)) + const uniqueLocalizedName = localized_name ? nextUniqueName(localized_name, inputs.map(input => input.localized_name ?? "")) : undefined + + const inputData: SubgraphIO = { + id: createUuidv4(), + type: String(type), + linkIds: inputLinks.map(link => link.id), + name: uniqueName, + color_off, + color_on, + dir, + label, + localized_name: uniqueLocalizedName, + hasErrors, + shape, + } + + inputs.push(inputData) + } + + return inputs +} + +/** + * Clones the output slots, and updates existing links, when converting items to a subgraph. + * @param resolvedOutputLinks The resolved output links. + * @param links The links to add to the subgraph. + * @returns The subgraph output slots. + */ +export function mapSubgraphOutputsAndLinks(resolvedOutputLinks: ResolvedConnection[], links: SerialisableLLink[]): SubgraphIO[] { + // Group matching links + const groupedByOutput = groupResolvedByOutput(resolvedOutputLinks) + + const outputs: SubgraphIO[] = [] + + for (const [, connections] of groupedByOutput) { + const outputLinks: SerialisableLLink[] = [] + + // Create serialised links for all links (will be recreated in subgraph) + for (const resolved of connections) { + const { link, output } = resolved + if (!output) continue + + // Link + const linkData = link.asSerialisable() + linkData.target_id = SUBGRAPH_OUTPUT_ID + linkData.target_slot = outputs.length + links.push(linkData) + outputLinks.push(linkData) + } + + // Use first output link + const { output } = connections[0] + if (!output) continue + + // Subgraph output slot + const { color_off, color_on, dir, hasErrors, label, localized_name, name, shape, type } = output + const uniqueName = nextUniqueName(name, outputs.map(output => output.name)) + const uniqueLocalizedName = localized_name ? nextUniqueName(localized_name, outputs.map(output => output.localized_name ?? "")) : undefined + + const outputData = { + id: createUuidv4(), + type: String(type), + linkIds: outputLinks.map(link => link.id), + name: uniqueName, + color_off, + color_on, + dir, + label, + localized_name: uniqueLocalizedName, + hasErrors, + shape, + } satisfies SubgraphIO + + outputs.push(structuredClone(outputData)) + } + return outputs +} + +/** + * Collects all subgraph IDs used directly in a single graph (non-recursive). + * @param graph The graph to check for subgraph nodes + * @returns Set of subgraph IDs used in this graph + */ +export function getDirectSubgraphIds(graph: GraphOrSubgraph): Set { + const subgraphIds = new Set() + + for (const node of graph._nodes) { + if (node.isSubgraphNode()) { + subgraphIds.add(node.type) + } + } + + return subgraphIds +} + +/** + * Collects all subgraph IDs referenced in a graph hierarchy using BFS. + * @param rootGraph The graph to start from + * @param subgraphRegistry Map of all available subgraphs + * @returns Set of all subgraph IDs found + */ +export function findUsedSubgraphIds( + rootGraph: GraphOrSubgraph, + subgraphRegistry: Map, +): Set { + const usedSubgraphIds = new Set() + const toVisit: GraphOrSubgraph[] = [rootGraph] + + while (toVisit.length > 0) { + const graph = toVisit.shift()! + const directIds = getDirectSubgraphIds(graph) + + for (const id of directIds) { + if (!usedSubgraphIds.has(id)) { + usedSubgraphIds.add(id) + const subgraph = subgraphRegistry.get(id) + if (subgraph) { + toVisit.push(subgraph) + } + } + } + } + + return usedSubgraphIds +} + +/** + * Type guard to check if a slot is a SubgraphInput. + * @param slot The slot to check + * @returns true if the slot is a SubgraphInput + */ +export function isSubgraphInput(slot: unknown): slot is SubgraphInput { + return slot != null && typeof slot === "object" && "parent" in slot && + slot.parent instanceof SubgraphInputNode +} + +/** + * Type guard to check if a slot is a SubgraphOutput. + * @param slot The slot to check + * @returns true if the slot is a SubgraphOutput + */ +export function isSubgraphOutput(slot: unknown): slot is SubgraphOutput { + return slot != null && typeof slot === "object" && "parent" in slot && + slot.parent instanceof SubgraphOutputNode +} + +/** + * Type guard to check if a slot is a regular node slot (INodeInputSlot or INodeOutputSlot). + * @param slot The slot to check + * @returns true if the slot is a regular node slot + */ +export function isNodeSlot(slot: unknown): slot is INodeInputSlot | INodeOutputSlot { + return slot != null && typeof slot === "object" && + ("link" in slot || "links" in slot) +} diff --git a/src/lib/litegraph/src/types/NodeLike.ts b/src/lib/litegraph/src/types/NodeLike.ts new file mode 100644 index 0000000000..38a9e72c0e --- /dev/null +++ b/src/lib/litegraph/src/types/NodeLike.ts @@ -0,0 +1,13 @@ +import type { INodeInputSlot, INodeOutputSlot } from "@/interfaces" +import type { NodeId } from "@/LGraphNode" +import type { SubgraphIO } from "@/types/serialisation" + +export interface NodeLike { + id: NodeId + + canConnectTo( + node: NodeLike, + toSlot: INodeInputSlot | SubgraphIO, + fromSlot: INodeOutputSlot | SubgraphIO, + ): boolean +} diff --git a/src/lib/litegraph/src/types/disposable.d.ts b/src/lib/litegraph/src/types/disposable.d.ts new file mode 100644 index 0000000000..99debdbf87 --- /dev/null +++ b/src/lib/litegraph/src/types/disposable.d.ts @@ -0,0 +1,23 @@ +/** + * Polyfill for disposable type; symbol already registered in modern browsers. + */ + +interface SymbolConstructor { + /** + * A method that is used to release resources held by an object. Called by the semantics of the `using` statement. + */ + readonly dispose: unique symbol + + /** + * A method that is used to asynchronously release resources held by an object. Called by the semantics of the `await using` statement. + */ + readonly asyncDispose: unique symbol +} + +interface Disposable { + [Symbol.dispose](): void +} + +interface AsyncDisposable { + [Symbol.asyncDispose](): PromiseLike +} diff --git a/src/lib/litegraph/src/types/events.ts b/src/lib/litegraph/src/types/events.ts new file mode 100644 index 0000000000..64cf9eb209 --- /dev/null +++ b/src/lib/litegraph/src/types/events.ts @@ -0,0 +1,89 @@ +/** + * Event interfaces for event extension + */ + +import type { LGraphGroup } from "../LGraphGroup" +import type { LGraphNode } from "../LGraphNode" +import type { LinkReleaseContextExtended } from "../litegraph" + +/** For Canvas*Event - adds graph space co-ordinates (property names are shipped) */ +export interface ICanvasPosition { + /** X co-ordinate of the event, in graph space (NOT canvas space) */ + canvasX: number + /** Y co-ordinate of the event, in graph space (NOT canvas space) */ + canvasY: number +} + +/** For Canvas*Event */ +export interface IDeltaPosition { + deltaX: number + deltaY: number +} + +/** + * Workaround for Firefox returning 0 on offsetX/Y props + * See https://github.com/Comfy-Org/litegraph.js/issues/403 for details + */ +export interface IOffsetWorkaround { + /** See {@link MouseEvent.offsetX}. This workaround is required (2024-12-31) to support Firefox, which always returns 0 */ + safeOffsetX: number + /** See {@link MouseEvent.offsetY}. This workaround is required (2024-12-31) to support Firefox, which always returns 0 */ + safeOffsetY: number +} + +/** All properties added when converting a pointer event to a CanvasPointerEvent (via {@link LGraphCanvas.adjustMouseEvent}). */ +export type CanvasPointerExtensions = ICanvasPosition & IDeltaPosition & IOffsetWorkaround + +interface LegacyMouseEvent { + /** @deprecated Part of DragAndScale mouse API - incomplete / not maintained */ + dragging?: boolean + click_time?: number +} + +/** PointerEvent with canvasX/Y and deltaX/Y properties */ +export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent {} + +/** MouseEvent with canvasX/Y and deltaX/Y properties */ +export interface CanvasMouseEvent extends + MouseEvent, + Readonly, + LegacyMouseEvent {} + +/** DragEvent with canvasX/Y and deltaX/Y properties */ +export interface CanvasDragEvent extends + DragEvent, + CanvasPointerExtensions {} + +export type CanvasEventDetail = + | GenericEventDetail + | GroupDoubleClickEventDetail + | NodeDoubleClickEventDetail + | EmptyDoubleClickEventDetail + | EmptyReleaseEventDetail + +export interface GenericEventDetail { + subType: "before-change" | "after-change" +} + +export interface OriginalEvent { + originalEvent: CanvasPointerEvent +} + +export interface EmptyReleaseEventDetail extends OriginalEvent { + subType: "empty-release" + linkReleaseContext: LinkReleaseContextExtended +} + +export interface EmptyDoubleClickEventDetail extends OriginalEvent { + subType: "empty-double-click" +} + +export interface GroupDoubleClickEventDetail extends OriginalEvent { + subType: "group-double-click" + group: LGraphGroup +} + +export interface NodeDoubleClickEventDetail extends OriginalEvent { + subType: "node-double-click" + node: LGraphNode +} diff --git a/src/lib/litegraph/src/types/globalEnums.ts b/src/lib/litegraph/src/types/globalEnums.ts new file mode 100644 index 0000000000..7beb43b936 --- /dev/null +++ b/src/lib/litegraph/src/types/globalEnums.ts @@ -0,0 +1,142 @@ +/** Node slot type - input or output */ +export enum NodeSlotType { + INPUT = 1, + OUTPUT = 2, +} + +/** Shape that an object will render as - used by nodes and slots */ +export enum RenderShape { + /** Rectangle with square corners */ + BOX = 1, + /** Rounded rectangle */ + ROUND = 2, + /** Circle is circle */ + CIRCLE = 3, + /** Two rounded corners: top left & bottom right */ + CARD = 4, + /** Slot shape: Arrow */ + ARROW = 5, + /** Slot shape: Grid */ + GRID = 6, + /** Slot shape: Hollow circle */ + HollowCircle = 7, +} + +/** Bit flags used to indicate what the pointer is currently hovering over. */ +export enum CanvasItem { + /** No items / none */ + Nothing = 0, + /** At least one node */ + Node = 1, + /** At least one group */ + Group = 1 << 1, + /** A reroute (not its path) */ + Reroute = 1 << 2, + /** The path of a link */ + Link = 1 << 3, + /** A reroute slot */ + RerouteSlot = 1 << 5, + /** A subgraph input or output node */ + SubgraphIoNode = 1 << 6, + /** A subgraph input or output slot */ + SubgraphIoSlot = 1 << 7, +} + +/** The direction that a link point will flow towards - e.g. horizontal outputs are right by default */ +export enum LinkDirection { + NONE = 0, + UP = 1, + DOWN = 2, + LEFT = 3, + RIGHT = 4, + CENTER = 5, +} + +/** The path calculation that links follow */ +export enum LinkRenderType { + HIDDEN_LINK = -1, + /** Juts out from the input & output a little @see LinkDirection, then a straight line between them */ + STRAIGHT_LINK = 0, + /** 90° angles, clean and box-like */ + LINEAR_LINK = 1, + /** Smooth curved links - default */ + SPLINE_LINK = 2, +} + +/** The marker in the middle of a link */ +export enum LinkMarkerShape { + /** Do not display markers */ + None = 0, + /** Circles (default) */ + Circle = 1, + /** Directional arrows */ + Arrow = 2, +} + +export enum TitleMode { + NORMAL_TITLE = 0, + NO_TITLE = 1, + TRANSPARENT_TITLE = 2, + AUTOHIDE_TITLE = 3, +} + +export enum LGraphEventMode { + ALWAYS = 0, + ON_EVENT = 1, + NEVER = 2, + ON_TRIGGER = 3, + BYPASS = 4, +} + +export enum EaseFunction { + LINEAR = "linear", + EASE_IN_QUAD = "easeInQuad", + EASE_OUT_QUAD = "easeOutQuad", + EASE_IN_OUT_QUAD = "easeInOutQuad", +} + +/** Bit flags used to indicate what the pointer is currently hovering over. */ +export enum Alignment { + /** No items / none */ + None = 0, + /** Top */ + Top = 1, + /** Bottom */ + Bottom = 1 << 1, + /** Vertical middle */ + Middle = 1 << 2, + /** Left */ + Left = 1 << 3, + /** Right */ + Right = 1 << 4, + /** Horizontal centre */ + Centre = 1 << 5, + /** Top left */ + TopLeft = Top | Left, + /** Top side, horizontally centred */ + TopCentre = Top | Centre, + /** Top right */ + TopRight = Top | Right, + /** Left side, vertically centred */ + MidLeft = Left | Middle, + /** Middle centre */ + MidCentre = Middle | Centre, + /** Right side, vertically centred */ + MidRight = Right | Middle, + /** Bottom left */ + BottomLeft = Bottom | Left, + /** Bottom side, horizontally centred */ + BottomCentre = Bottom | Centre, + /** Bottom right */ + BottomRight = Bottom | Right, +} + +/** + * Checks if the bitwise {@link flag} is set in the {@link flagSet}. + * @param flagSet The unknown set of flags - will be checked for the presence of {@link flag} + * @param flag The flag to check for + * @returns `true` if the flag is set, `false` otherwise. + */ +export function hasFlag(flagSet: number, flag: number): boolean { + return (flagSet & flag) === flag +} diff --git a/src/lib/litegraph/src/types/serialisation.ts b/src/lib/litegraph/src/types/serialisation.ts new file mode 100644 index 0000000000..4587b3c218 --- /dev/null +++ b/src/lib/litegraph/src/types/serialisation.ts @@ -0,0 +1,221 @@ +import type { + Dictionary, + INodeFlags, + INodeInputSlot, + INodeOutputSlot, + INodeSlot, + ISlotType, + Point, + Size, +} from "../interfaces" +import type { LGraphConfig, LGraphExtra, LGraphState } from "../LGraph" +import type { IGraphGroupFlags } from "../LGraphGroup" +import type { NodeId, NodeProperty } from "../LGraphNode" +import type { LiteGraph } from "../litegraph" +import type { LinkId, SerialisedLLinkArray } from "../LLink" +import type { FloatingRerouteSlot, RerouteId } from "../Reroute" +import type { TWidgetValue } from "../types/widgets" +import type { RenderShape } from "./globalEnums" +import type { UUID } from "@/utils/uuid" + +/** + * An object that implements custom pre-serialization logic via {@link Serialisable.asSerialisable}. + */ +export interface Serialisable { + /** + * Prepares this object for serialization. + * Creates a partial shallow copy of itself, with only the properties that should be serialised. + * @returns An object that can immediately be serialized to JSON. + */ + asSerialisable(): SerialisableObject +} + +export interface BaseExportedGraph { + /** Unique graph ID. Automatically generated if not provided. */ + id: UUID + /** The revision number of this graph. Not automatically incremented; intended for use by a downstream save function. */ + revision: number + config?: LGraphConfig + /** Details of the appearance and location of subgraphs shown in this graph. Similar to */ + subgraphs?: ExportedSubgraphInstance[] + /** Definitions of re-usable objects that are referenced elsewhere in this exported graph. */ + definitions?: { + /** The base definition of subgraphs used in this workflow. That is, what you see when you open / edit a subgraph. */ + subgraphs?: ExportedSubgraph[] + } +} + +export interface SerialisableGraph extends BaseExportedGraph { + /** Schema version. @remarks Version bump should add to const union, which is used to narrow type during deserialise. */ + version: 0 | 1 + state: LGraphState + groups?: ISerialisedGroup[] + nodes?: ISerialisedNode[] + links?: SerialisableLLink[] + floatingLinks?: SerialisableLLink[] + reroutes?: SerialisableReroute[] + extra?: LGraphExtra +} + +export type ISerialisableNodeInput = Omit & { + widget?: { name: string } +} +export type ISerialisableNodeOutput = Omit & { + widget?: { name: string } +} + +/** Serialised LGraphNode */ +export interface ISerialisedNode { + title?: string + id: NodeId + type: string + pos: Point + size: Size + flags: INodeFlags + order: number + mode: number + outputs?: ISerialisableNodeOutput[] + inputs?: ISerialisableNodeInput[] + properties?: Dictionary + shape?: RenderShape + boxcolor?: string + color?: string + bgcolor?: string + showAdvanced?: boolean + /** + * Note: Some custom nodes overrides the `widgets_values` property to an + * object that has `length` property and index access. It is not safe to call + * any array methods on it. + * See example in https://github.com/Kosinkadink/ComfyUI-VideoHelperSuite/blob/8629188458dc6cb832f871ece3bd273507e8a766/web/js/VHS.core.js#L59-L84 + */ + widgets_values?: TWidgetValue[] +} + +/** Properties of nodes that are used by subgraph instances. */ +type NodeSubgraphSharedProps = Omit + +/** A single instance of a subgraph; where it is used on a graph, any customisation to shape / colour etc. */ +export interface ExportedSubgraphInstance extends NodeSubgraphSharedProps { + /** + * The ID of the actual subgraph definition. + * @see {@link ExportedSubgraph.subgraphs} + */ + type: UUID +} + +/** + * Original implementation from static litegraph.d.ts + * Maintained for backwards compat + */ +export interface ISerialisedGraph extends BaseExportedGraph { + last_node_id: NodeId + last_link_id: number + nodes: ISerialisedNode[] + links: SerialisedLLinkArray[] + floatingLinks?: SerialisableLLink[] + groups: ISerialisedGroup[] + version: typeof LiteGraph.VERSION + extra?: LGraphExtra +} + +/** + * Defines a subgraph and its contents. + * Can be referenced multiple times in a schema. + */ +export interface ExportedSubgraph extends SerialisableGraph { + /** The display name of the subgraph. */ + name: string + inputNode: ExportedSubgraphIONode + outputNode: ExportedSubgraphIONode + /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */ + inputs?: SubgraphIO[] + /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */ + outputs?: SubgraphIO[] + /** A list of node widgets displayed in the parent graph, on the subgraph object. */ + widgets?: ExposedWidget[] +} + +/** Properties shared by subgraph and node I/O slots. */ +type SubgraphIOShared = Omit + +/** Subgraph I/O slots */ +export interface SubgraphIO extends SubgraphIOShared { + /** Slot ID (internal; never changes once instantiated). */ + id: UUID + /** The data type this slot uses. Unlike nodes, this does not support legacy numeric types. */ + type: string + /** Links connected to this slot, or `undefined` if not connected. An ouptut slot should only ever have one link. */ + linkIds?: LinkId[] +} + +/** A reference to a node widget shown in the parent graph */ +export interface ExposedWidget { + /** The ID of the node (inside the subgraph) that the widget belongs to. */ + id: NodeId + /** The name of the widget to show in the parent graph. */ + name: string +} + +/** Serialised LGraphGroup */ +export interface ISerialisedGroup { + id: number + title: string + bounding: number[] + color?: string + font_size?: number + flags?: IGraphGroupFlags +} + +export type TClipboardLink = [ + targetRelativeIndex: number, + originSlot: number, + nodeRelativeIndex: number, + targetSlot: number, + targetNodeId: NodeId, +] + +/** Items copied from the canvas */ +export interface ClipboardItems { + nodes?: ISerialisedNode[] + groups?: ISerialisedGroup[] + reroutes?: SerialisableReroute[] + links?: SerialisableLLink[] + subgraphs?: ExportedSubgraph[] +} + +/** @deprecated */ +export interface IClipboardContents { + nodes?: ISerialisedNode[] + links?: TClipboardLink[] +} + +export interface SerialisableReroute { + id: RerouteId + parentId?: RerouteId + pos: Point + linkIds: LinkId[] + floating?: FloatingRerouteSlot +} + +export interface SerialisableLLink { + /** Link ID */ + id: LinkId + /** Output node ID */ + origin_id: NodeId + /** Output slot index */ + origin_slot: number + /** Input node ID */ + target_id: NodeId + /** Input slot index */ + target_slot: number + /** Data type of the link */ + type: ISlotType + /** ID of the last reroute (from input to output) that this link passes through, otherwise `undefined` */ + parentId?: RerouteId +} + +export interface ExportedSubgraphIONode { + id: NodeId + bounding: [number, number, number, number] + pinned?: boolean +} diff --git a/src/lib/litegraph/src/types/utility.ts b/src/lib/litegraph/src/types/utility.ts new file mode 100644 index 0000000000..6aaad44155 --- /dev/null +++ b/src/lib/litegraph/src/types/utility.ts @@ -0,0 +1,13 @@ +/** + * General-purpose, TypeScript utility types. + */ + +/** {@link Pick} only properties that evaluate to `never`. */ +export type PickNevers = { + [K in keyof T as T[K] extends never ? K : never]: T[K] +} + +/** {@link Omit} all properties that evaluate to `never`. */ +export type NeverNever = { + [K in keyof T as T[K] extends never ? never : K]: T[K] +} diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts new file mode 100644 index 0000000000..fb397abb33 --- /dev/null +++ b/src/lib/litegraph/src/types/widgets.ts @@ -0,0 +1,276 @@ +import type { CanvasColour, Point, RequiredProps, Size } from "../interfaces" +import type { CanvasPointer, LGraphCanvas, LGraphNode } from "../litegraph" +import type { CanvasPointerEvent } from "./events" + +export interface IWidgetOptions { + on?: string + off?: string + max?: number + min?: number + slider_color?: CanvasColour + marker_color?: CanvasColour + precision?: number + read_only?: boolean + /** + * @deprecated Use {@link IWidgetOptions.step2} instead. + * The legacy step is scaled up by 10x in the legacy frontend logic. + */ + step?: number + /** The step value for numeric widgets. */ + step2?: number + + y?: number + multiline?: boolean + // TODO: Confirm this + property?: string + /** If `true`, an input socket will not be created for this widget. */ + socketless?: boolean + + values?: TValues + callback?: IWidget["callback"] +} + +export interface IWidgetSliderOptions extends IWidgetOptions { + min: number + max: number + step2: number + slider_color?: CanvasColour + marker_color?: CanvasColour +} + +export interface IWidgetKnobOptions extends IWidgetOptions { + min: number + max: number + step2: number + slider_color?: CanvasColour // TODO: Replace with knob color + marker_color?: CanvasColour + gradient_stops?: string +} + +/** + * A widget for a node. + * All types are based on IBaseWidget - additions can be made there or directly on individual types. + * + * Implemented as a discriminative union of widget types, so this type itself cannot be extended. + * Recommend declaration merging any properties that use IWidget (e.g. {@link LGraphNode.widgets}) with a new type alias. + * @see ICustomWidget + */ +export type IWidget = + | IBooleanWidget + | INumericWidget + | IStringWidget + | IComboWidget + | IStringComboWidget + | ICustomWidget + | ISliderWidget + | IButtonWidget + | IKnobWidget + +export interface IBooleanWidget extends IBaseWidget { + type: "toggle" + value: boolean +} + +/** Any widget that uses a numeric backing */ +export interface INumericWidget extends IBaseWidget { + type: "number" + value: number +} + +export interface ISliderWidget extends IBaseWidget { + type: "slider" + value: number + marker?: number +} + +export interface IKnobWidget extends IBaseWidget { + type: "knob" + value: number + options: IWidgetKnobOptions +} + +/** Avoids the type issues with the legacy IComboWidget type */ +export interface IStringComboWidget extends IBaseWidget, "values">> { + type: "combo" + value: string +} + +type ComboWidgetValues = string[] | Record | ((widget?: IComboWidget, node?: LGraphNode) => string[]) + +/** A combo-box widget (dropdown, select, etc) */ +export interface IComboWidget extends IBaseWidget< + string | number, + "combo", + RequiredProps, "values"> +> { + type: "combo" + value: string | number +} + +/** A widget with a string value */ +export interface IStringWidget extends IBaseWidget> { + type: "string" | "text" + value: string +} + +export interface IButtonWidget extends IBaseWidget { + type: "button" + value: string | undefined + clicked: boolean +} + +/** A custom widget - accepts any value and has no built-in special handling */ +export interface ICustomWidget extends IBaseWidget { + type: "custom" + value: string | object +} + +/** + * Valid widget types. TS cannot provide easily extensible type safety for this at present. + * Override linkedWidgets[] + * Values not in this list will not result in litegraph errors, however they will be treated the same as "custom". + */ +export type TWidgetType = IWidget["type"] +export type TWidgetValue = IWidget["value"] + +/** + * The base type for all widgets. Should not be implemented directly. + * @template TValue The type of value this widget holds. + * @template TType A string designating the type of widget, e.g. "toggle" or "string". + * @template TOptions The options for this widget. + * @see IWidget + */ +export interface IBaseWidget< + TValue = boolean | number | string | object | undefined, + TType extends string = string, + TOptions extends IWidgetOptions = IWidgetOptions, +> { + linkedWidgets?: IBaseWidget[] + + name: string + options: TOptions + + label?: string + /** Widget type (see {@link TWidgetType}) */ + type: TType + value?: TValue + + /** + * Whether the widget value should be serialized on node serialization. + * @default true + */ + serialize?: boolean + + /** + * The computed height of the widget. Used by customized node resize logic. + * See scripts/domWidget.ts for more details. + * @readonly [Computed] This property is computed by the node. + */ + computedHeight?: number + + /** + * The starting y position of the widget after layout. + * @readonly [Computed] This property is computed by the node. + */ + y: number + + /** + * The y position of the widget after drawing (rendering). + * @readonly [Computed] This property is computed by the node. + * @deprecated There is no longer dynamic y adjustment on rendering anymore. + * Use {@link IBaseWidget.y} instead. + */ + last_y?: number + + width?: number + /** + * Whether the widget is disabled. Disabled widgets are rendered at half opacity. + * See also {@link IBaseWidget.computedDisabled}. + */ + disabled?: boolean + + /** + * The disabled state used for rendering based on various conditions including + * {@link IBaseWidget.disabled}. + * @readonly [Computed] This property is computed by the node. + */ + computedDisabled?: boolean + + hidden?: boolean + advanced?: boolean + + tooltip?: string + + // TODO: Confirm this format + callback?( + value: any, + canvas?: LGraphCanvas, + node?: LGraphNode, + pos?: Point, + e?: CanvasPointerEvent, + ): void + + /** + * Simple callback for pointer events, allowing custom widgets to events relevant to them. + * @param event The pointer event that triggered this callback + * @param pointerOffset Offset of the pointer relative to {@link node.pos} + * @param node The node this widget belongs to + * @todo Expose CanvasPointer API to custom widgets + */ + mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean + /** + * Draw the widget. + * @param ctx The canvas context to draw on. + * @param node The node this widget belongs to. + * @param widget_width The width of the widget. + * @param y The y position of the widget. + * @param H The height of the widget. + * @param lowQuality Whether to draw the widget in low quality. + */ + draw?( + ctx: CanvasRenderingContext2D, + node: LGraphNode, + widget_width: number, + y: number, + H: number, + lowQuality?: boolean, + ): void + + /** + * Compute the size of the widget. Overrides {@link IBaseWidget.computeSize}. + * @param width The width of the widget. + * @deprecated Use {@link IBaseWidget.computeLayoutSize} instead. + * @returns The size of the widget. + */ + computeSize?(width?: number): Size + + /** + * Compute the layout size of the widget. + * @param node The node this widget belongs to. + * @returns The layout size of the widget. + */ + computeLayoutSize?( + this: IBaseWidget, + node: LGraphNode + ): { + minHeight: number + maxHeight?: number + minWidth: number + maxWidth?: number + } + + /** + * Callback for pointerdown events, allowing custom widgets to register callbacks to occur + * for all {@link CanvasPointer} events. + * + * This callback is operated early in the pointerdown logic; actions that prevent it from firing are: + * - `Ctrl + Drag` Multi-select + * - `Alt + Click/Drag` Clone node + * @param pointer The CanvasPointer handling this event + * @param node The node this widget belongs to + * @param canvas The LGraphCanvas where this event originated + * @returns Returning `true` from this callback forces Litegraph to ignore the event and + * not process it any further. + */ + onPointerDown?(pointer: CanvasPointer, node: LGraphNode, canvas: LGraphCanvas): boolean +} diff --git a/src/lib/litegraph/src/utils/arrange.ts b/src/lib/litegraph/src/utils/arrange.ts new file mode 100644 index 0000000000..847461cd8d --- /dev/null +++ b/src/lib/litegraph/src/utils/arrange.ts @@ -0,0 +1,105 @@ +import type { Direction, IBoundaryNodes } from "../interfaces" +import type { LGraphNode } from "../LGraphNode" + +/** + * Finds the nodes that are farthest in all four directions, representing the boundary of the nodes. + * @param nodes The nodes to check the edges of + * @returns An object listing the furthest node (edge) in all four directions. + * `null` if no nodes were supplied or the first node was falsy. + */ +export function getBoundaryNodes(nodes: LGraphNode[]): IBoundaryNodes | null { + const valid = nodes?.find(x => x) + if (!valid) return null + + let top = valid + let right = valid + let bottom = valid + let left = valid + + for (const node of nodes) { + if (!node) continue + const [x, y] = node.pos + const [width, height] = node.size + + if (y < top.pos[1]) top = node + if (x + width > right.pos[0] + right.size[0]) right = node + if (y + height > bottom.pos[1] + bottom.size[1]) bottom = node + if (x < left.pos[0]) left = node + } + + return { + top, + right, + bottom, + left, + } +} + +/** + * Distributes nodes evenly along a horizontal or vertical plane. + * @param nodes The nodes to distribute + * @param horizontal If true, distributes along the horizontal plane. Otherwise, the vertical plane. + */ +export function distributeNodes(nodes: LGraphNode[], horizontal?: boolean): void { + const nodeCount = nodes?.length + if (!(nodeCount > 1)) return + + const index = horizontal ? 0 : 1 + + let total = 0 + let highest = -Infinity + + for (const node of nodes) { + total += node.size[index] + + const high = node.pos[index] + node.size[index] + if (high > highest) highest = high + } + const sorted = [...nodes].sort((a, b) => a.pos[index] - b.pos[index]) + const lowest = sorted[0].pos[index] + + const gap = (highest - lowest - total) / (nodeCount - 1) + let startAt = lowest + for (let i = 0; i < nodeCount; i++) { + const node = sorted[i] + node.pos[index] = startAt + gap * i + startAt += node.size[index] + } +} + +/** + * Aligns all nodes along the edge of a node. + * @param nodes The nodes to align + * @param direction The edge to align nodes on + * @param align_to The node to align all other nodes to. If undefined, the farthest node will be used. + */ +export function alignNodes( + nodes: LGraphNode[], + direction: Direction, + align_to?: LGraphNode, +): void { + if (!nodes) return + + const boundary = align_to === undefined + ? getBoundaryNodes(nodes) + : { top: align_to, right: align_to, bottom: align_to, left: align_to } + + if (boundary === null) return + + for (const node of nodes) { + switch (direction) { + case "right": + node.pos[0] = boundary.right.pos[0] + boundary.right.size[0] - node.size[0] + break + case "left": + node.pos[0] = boundary.left.pos[0] + break + case "top": + node.pos[1] = boundary.top.pos[1] + break + case "bottom": + node.pos[1] = boundary.bottom.pos[1] + boundary.bottom.size[1] - node.size[1] + break + } + } +} diff --git a/src/lib/litegraph/src/utils/collections.ts b/src/lib/litegraph/src/utils/collections.ts new file mode 100644 index 0000000000..d70e6275b1 --- /dev/null +++ b/src/lib/litegraph/src/utils/collections.ts @@ -0,0 +1,110 @@ +import type { ConnectingLink, ISlotType, Positionable } from "../interfaces" +import type { LinkId } from "@/LLink" + +import { LGraphNode } from "@/LGraphNode" +import { parseSlotTypes } from "@/strings" + +/** + * Creates a flat set of all positionable items by recursively iterating through all child items. + * + * Does not include or recurse into pinned items. + * @param items The original set of items to iterate through + * @returns All unpinned items in the original set, and recursively, their children + */ +export function getAllNestedItems(items: ReadonlySet): Set { + const allItems = new Set() + if (items) { + for (const item of items) addRecursively(item, allItems) + } + return allItems + + function addRecursively(item: Positionable, flatSet: Set): void { + if (flatSet.has(item) || item.pinned) return + flatSet.add(item) + if (item.children) { + for (const child of item.children) addRecursively(child, flatSet) + } + } +} + +/** + * Iterates through a collection of {@link Positionable} items, returning the first {@link LGraphNode}. + * @param items The items to search through + * @returns The first node found in {@link items}, otherwise `undefined` + */ +export function findFirstNode(items: Iterable): LGraphNode | undefined { + for (const item of items) { + if (item instanceof LGraphNode) return item + } +} + +/** @returns `true` if the provided link ID is currently being dragged. */ +export function isDraggingLink(linkId: LinkId, connectingLinks: ConnectingLink[] | null | undefined): ConnectingLink | undefined { + if (connectingLinks == null) return + + for (const connectingLink of connectingLinks) { + if (connectingLink.link == null) continue + if (linkId === connectingLink.link.id) return connectingLink + } +} + +type FreeSlotResult = { index: number, slot: T } | undefined + +/** + * Finds the first free in/out slot with any of the comma-delimited types in {@link type}. + * + * If no slots are free, falls back in order to: + * - The first free wildcard slot + * - The first occupied slot + * - The first occupied wildcard slot + * @param slots The iterable of node slots slots to search through + * @param type The {@link ISlotType type} of slot to find + * @param hasNoLinks A predicate that returns `true` if the slot is free. + * @returns The index and slot if found, otherwise `undefined`. + */ +export function findFreeSlotOfType( + slots: T[], + type: ISlotType, + hasNoLinks: (slot: T) => boolean, +) { + if (!slots?.length) return + + let occupiedSlot: FreeSlotResult + let wildSlot: FreeSlotResult + let occupiedWildSlot: FreeSlotResult + + const validTypes = parseSlotTypes(type) + + for (const [index, slot] of slots.entries()) { + const slotTypes = parseSlotTypes(slot.type) + + for (const validType of validTypes) { + for (const slotType of slotTypes) { + if (slotType === validType) { + if (hasNoLinks(slot)) { + // Exact match - short circuit + return { index, slot } + } + // In case we can't find a free slot. + occupiedSlot ??= { index, slot } + } else if (!wildSlot && (validType === "*" || slotType === "*")) { + // Save the first free wildcard slot as a fallback + if (hasNoLinks(slot)) { + wildSlot = { index, slot } + } else { + occupiedWildSlot ??= { index, slot } + } + } + } + } + } + return wildSlot ?? occupiedSlot ?? occupiedWildSlot +} + +export function removeFromArray(array: T[], value: T): boolean { + const index = array.indexOf(value) + const found = index !== -1 + + if (found) array.splice(index, 1) + return found +} diff --git a/src/lib/litegraph/src/utils/feedback.ts b/src/lib/litegraph/src/utils/feedback.ts new file mode 100644 index 0000000000..72d2892d01 --- /dev/null +++ b/src/lib/litegraph/src/utils/feedback.ts @@ -0,0 +1,27 @@ +import { LiteGraph } from "@/litegraph" + +/** Guard against unbound allocation. */ +const UNIQUE_MESSAGE_LIMIT = 10_000 +const sentWarnings: Set = new Set() + +/** + * Warns that a deprecated function has been used via the public + * {@link onDeprecationWarning} / {@link onEveryDeprecationWarning} callback arrays. + * @param message Plain-language detail about what has been deprecated. This **should not** include unique data; use {@link source}. + * @param source A reference object to include alongside the message, e.g. `this`. + */ +export function warnDeprecated(message: string, source?: object): void { + if (!LiteGraph.alwaysRepeatWarnings) { + // Do not repeat + if (sentWarnings.has(message)) return + + // Hard limit of unique messages per session + if (sentWarnings.size > UNIQUE_MESSAGE_LIMIT) return + + sentWarnings.add(message) + } + + for (const callback of LiteGraph.onDeprecationWarning) { + callback(message, source) + } +} diff --git a/src/lib/litegraph/src/utils/object.ts b/src/lib/litegraph/src/utils/object.ts new file mode 100644 index 0000000000..9e95fd422b --- /dev/null +++ b/src/lib/litegraph/src/utils/object.ts @@ -0,0 +1,5 @@ +export function omitBy(obj: T, predicate: (value: any) => boolean): Partial { + return Object.fromEntries( + Object.entries(obj).filter(([_key, value]) => !predicate(value)), + ) as Partial +} diff --git a/src/lib/litegraph/src/utils/spaceDistribution.ts b/src/lib/litegraph/src/utils/spaceDistribution.ts new file mode 100644 index 0000000000..b307331908 --- /dev/null +++ b/src/lib/litegraph/src/utils/spaceDistribution.ts @@ -0,0 +1,77 @@ +export interface SpaceRequest { + minSize: number + maxSize?: number +} + +/** + * Distributes available space among items with min/max size constraints + * @param totalSpace Total space available to distribute + * @param requests Array of space requests with size constraints + * @returns Array of space allocations + */ +export function distributeSpace( + totalSpace: number, + requests: SpaceRequest[], +): number[] { + // Handle edge cases + if (requests.length === 0) return [] + + // Calculate total minimum space needed + const totalMinSize = requests.reduce((sum, req) => sum + req.minSize, 0) + + // If we can't meet minimum requirements, return the minimum sizes + if (totalSpace < totalMinSize) { + return requests.map(req => req.minSize) + } + + // Initialize allocations with minimum sizes + let allocations = requests.map(req => ({ + computedSize: req.minSize, + maxSize: req.maxSize ?? Infinity, + remaining: (req.maxSize ?? Infinity) - req.minSize, + })) + + // Calculate remaining space to distribute + let remainingSpace = totalSpace - totalMinSize + + // Distribute remaining space iteratively + while ( + remainingSpace > 0 && + allocations.some(alloc => alloc.remaining > 0) + ) { + // Count items that can still grow + const growableItems = allocations.filter( + alloc => alloc.remaining > 0, + ).length + + if (growableItems === 0) break + + // Calculate fair share per item + const sharePerItem = remainingSpace / growableItems + + // Track how much space was actually used in this iteration + let spaceUsedThisRound = 0 + + // Distribute space + allocations = allocations.map((alloc) => { + if (alloc.remaining <= 0) return alloc + + const growth = Math.min(sharePerItem, alloc.remaining) + spaceUsedThisRound += growth + + return { + ...alloc, + computedSize: alloc.computedSize + growth, + remaining: alloc.remaining - growth, + } + }) + + remainingSpace -= spaceUsedThisRound + + // Break if we couldn't distribute any more space + if (spaceUsedThisRound === 0) break + } + + // Return only the computed sizes + return allocations.map(({ computedSize }) => computedSize) +} diff --git a/src/lib/litegraph/src/utils/textUtils.ts b/src/lib/litegraph/src/utils/textUtils.ts new file mode 100644 index 0000000000..d75c3b7e75 --- /dev/null +++ b/src/lib/litegraph/src/utils/textUtils.ts @@ -0,0 +1,47 @@ +/** + * Truncates text to fit within a given width using binary search for optimal performance. + * @param ctx The canvas rendering context used for text measurement + * @param text The text to truncate + * @param maxWidth The maximum width the text should occupy + * @param ellipsis The ellipsis string to append (default: "...") + * @returns The truncated text with ellipsis if needed + */ +export function truncateText( + ctx: CanvasRenderingContext2D, + text: string, + maxWidth: number, + ellipsis: string = "...", +): string { + const textWidth = ctx.measureText(text).width + + if (textWidth <= maxWidth || maxWidth <= 0) { + return text + } + + const ellipsisWidth = ctx.measureText(ellipsis).width + const availableWidth = maxWidth - ellipsisWidth + + if (availableWidth <= 0) { + return ellipsis + } + + // Binary search for the right length + let low = 0 + let high = text.length + let bestFit = 0 + + while (low <= high) { + const mid = Math.floor((low + high) / 2) + const testText = text.substring(0, mid) + const testWidth = ctx.measureText(testText).width + + if (testWidth <= availableWidth) { + bestFit = mid + low = mid + 1 + } else { + high = mid - 1 + } + } + + return text.substring(0, bestFit) + ellipsis +} diff --git a/src/lib/litegraph/src/utils/type.ts b/src/lib/litegraph/src/utils/type.ts new file mode 100644 index 0000000000..edd0eb7e22 --- /dev/null +++ b/src/lib/litegraph/src/utils/type.ts @@ -0,0 +1,23 @@ +import type { IColorable } from "@/interfaces" + +/** + * Converts a plain object to a class instance if it is not already an instance of the class. + * + * Requires specific constructor signature; first parameter must be the object to convert. + * @param cls The class to convert to + * @param args The object to convert, followed by any other constructor arguments + * @returns The class instance + */ +export function toClass( + cls: new (instance: P, ...args: Args) => C, + ...args: [P, ...Args] +): C { + return args[0] instanceof cls ? args[0] : new cls(...args) +} + +/** + * Checks if an object is an instance of {@link IColorable}. + */ +export function isColorable(obj: unknown): obj is IColorable { + return typeof obj === "object" && obj !== null && "setColorOption" in obj && "getColorOption" in obj +} diff --git a/src/lib/litegraph/src/utils/uuid.ts b/src/lib/litegraph/src/utils/uuid.ts new file mode 100644 index 0000000000..a9ee701097 --- /dev/null +++ b/src/lib/litegraph/src/utils/uuid.ts @@ -0,0 +1,29 @@ +// Using a template string for this is resulting in complex type workarounds. No current benefit beyond dev reading. +export type UUID = string + +/** Special-case zero-UUID, consisting entirely of zeros. Used as a default value. */ +export const zeroUuid = "00000000-0000-0000-0000-000000000000" + +/** Pre-allocated storage for uuid random values. */ +const randomStorage = new Uint32Array(31) + +/** + * Creates a UUIDv4 string. + * @returns A new UUIDv4 string + * @remarks + * Original implementation from https://gist.github.com/jed/982883?permalink_comment_id=852670#gistcomment-852670 + * + * Prefers the {@link crypto.randomUUID} method if available, falling back to + * {@link crypto.getRandomValues}, then finally the legacy {@link Math.random} method. + */ +export function createUuidv4(): UUID { + if (typeof crypto?.randomUUID === "function") return crypto.randomUUID() + if (typeof crypto?.getRandomValues === "function") { + const random = crypto.getRandomValues(randomStorage) + let i = 0 + return "10000000-1000-4000-8000-100000000000".replaceAll(/[018]/g, a => + (Number(a) ^ ((random[i++] * 3.725_290_298_461_914e-9) >> (Number(a) * 0.25))).toString(16)) + } + return "10000000-1000-4000-8000-100000000000".replaceAll(/[018]/g, a => + (Number(a) ^ ((Math.random() * 16) >> (Number(a) * 0.25))).toString(16)) +} diff --git a/src/lib/litegraph/src/utils/widget.ts b/src/lib/litegraph/src/utils/widget.ts new file mode 100644 index 0000000000..6201fb7522 --- /dev/null +++ b/src/lib/litegraph/src/utils/widget.ts @@ -0,0 +1,10 @@ +import type { IWidgetOptions } from "@/types/widgets" + +/** + * The step value for numeric widgets. + * Use {@link IWidgetOptions.step2} if available, otherwise fallback to + * {@link IWidgetOptions.step} which is scaled up by 10x in the legacy frontend logic. + */ +export function getWidgetStep(options: IWidgetOptions): number { + return options.step2 || ((options.step || 10) * 0.1) +} diff --git a/src/lib/litegraph/src/widgets/BaseSteppedWidget.ts b/src/lib/litegraph/src/widgets/BaseSteppedWidget.ts new file mode 100644 index 0000000000..27cf4d926c --- /dev/null +++ b/src/lib/litegraph/src/widgets/BaseSteppedWidget.ts @@ -0,0 +1,72 @@ +import type { IBaseWidget } from "@/types/widgets" + +import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" + +/** + * Base class for widgets that have increment and decrement buttons. + */ +export abstract class BaseSteppedWidget extends BaseWidget { + /** + * Whether the widget can increment its value + * @returns `true` if the widget can increment its value, otherwise `false` + */ + abstract canIncrement(): boolean + /** + * Whether the widget can decrement its value + * @returns `true` if the widget can decrement its value, otherwise `false` + */ + abstract canDecrement(): boolean + /** + * Increment the value of the widget + * @param options The options for the widget event + */ + abstract incrementValue(options: WidgetEventOptions): void + /** + * Decrement the value of the widget + * @param options The options for the widget event + */ + abstract decrementValue(options: WidgetEventOptions): void + + /** + * Draw the arrow buttons for the widget + * @param ctx The canvas rendering context + * @param width The width of the widget + */ + drawArrowButtons(ctx: CanvasRenderingContext2D, width: number) { + const { height, text_color, disabledTextColor, y } = this + const { arrowMargin, arrowWidth, margin } = BaseWidget + const arrowTipX = margin + arrowMargin + const arrowInnerX = arrowTipX + arrowWidth + + // Draw left arrow + ctx.fillStyle = this.canDecrement() ? text_color : disabledTextColor + ctx.beginPath() + ctx.moveTo(arrowInnerX, y + 5) + ctx.lineTo(arrowTipX, y + height * 0.5) + ctx.lineTo(arrowInnerX, y + height - 5) + ctx.fill() + + // Draw right arrow + ctx.fillStyle = this.canIncrement() ? text_color : disabledTextColor + ctx.beginPath() + ctx.moveTo(width - arrowInnerX, y + 5) + ctx.lineTo(width - arrowTipX, y + height * 0.5) + ctx.lineTo(width - arrowInnerX, y + height - 5) + ctx.fill() + } + + override drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions) { + // Store original context attributes + const { fillStyle, strokeStyle, textAlign } = ctx + + this.drawWidgetShape(ctx, options) + if (options.showText) { + if (!this.computedDisabled) this.drawArrowButtons(ctx, options.width) + + this.drawTruncatingText({ ctx, width: options.width }) + } + + // Restore original context attributes + Object.assign(ctx, { textAlign, strokeStyle, fillStyle }) + } +} diff --git a/src/lib/litegraph/src/widgets/BaseWidget.ts b/src/lib/litegraph/src/widgets/BaseWidget.ts new file mode 100644 index 0000000000..ba0d9cf414 --- /dev/null +++ b/src/lib/litegraph/src/widgets/BaseWidget.ts @@ -0,0 +1,300 @@ +import type { Point } from "@/interfaces" +import type { CanvasPointer, LGraphCanvas, LGraphNode, Size } from "@/litegraph" +import type { CanvasPointerEvent } from "@/types/events" +import type { IBaseWidget } from "@/types/widgets" + +import { drawTextInArea } from "@/draw" +import { Rectangle } from "@/infrastructure/Rectangle" +import { LiteGraph } from "@/litegraph" + +export interface DrawWidgetOptions { + /** The width of the node where this widget will be displayed. */ + width: number + /** Synonym for "low quality". */ + showText?: boolean +} + +export interface DrawTruncatingTextOptions extends DrawWidgetOptions { + /** The canvas context to draw the text on. */ + ctx: CanvasRenderingContext2D + /** The amount of padding to add to the left of the text. */ + leftPadding?: number + /** The amount of padding to add to the right of the text. */ + rightPadding?: number +} + +export interface WidgetEventOptions { + e: CanvasPointerEvent + node: LGraphNode + canvas: LGraphCanvas +} + +export abstract class BaseWidget implements IBaseWidget { + /** From node edge to widget edge */ + static margin = 15 + /** From widget edge to tip of arrow button */ + static arrowMargin = 6 + /** Arrow button width */ + static arrowWidth = 10 + /** Absolute minimum display width of widget values */ + static minValueWidth = 42 + /** Minimum gap between label and value */ + static labelValueGap = 5 + + declare computedHeight?: number + declare serialize?: boolean + computeLayoutSize?(node: LGraphNode): { + minHeight: number + maxHeight?: number + minWidth: number + maxWidth?: number + } + + #node: LGraphNode + /** The node that this widget belongs to. */ + get node() { + return this.#node + } + + linkedWidgets?: IBaseWidget[] + name: string + options: TWidget["options"] + label?: string + type: TWidget["type"] + y: number = 0 + last_y?: number + width?: number + disabled?: boolean + computedDisabled?: boolean + hidden?: boolean + advanced?: boolean + tooltip?: string + element?: HTMLElement + callback?( + value: any, + canvas?: LGraphCanvas, + node?: LGraphNode, + pos?: Point, + e?: CanvasPointerEvent, + ): void + mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean + computeSize?(width?: number): Size + onPointerDown?(pointer: CanvasPointer, node: LGraphNode, canvas: LGraphCanvas): boolean + + #value?: TWidget["value"] + get value(): TWidget["value"] { + return this.#value + } + + set value(value: TWidget["value"]) { + this.#value = value + } + + constructor(widget: TWidget & { node: LGraphNode }) + constructor(widget: TWidget, node: LGraphNode) + constructor(widget: TWidget & { node: LGraphNode }, node?: LGraphNode) { + // Private fields + this.#node = node ?? widget.node + + // The set and get functions for DOM widget values are hacked on to the options object; + // attempting to set value before options will throw. + // https://github.com/Comfy-Org/ComfyUI_frontend/blob/df86da3d672628a452baed3df3347a52c0c8d378/src/scripts/domWidget.ts#L125 + this.name = widget.name + this.options = widget.options + this.type = widget.type + + // `node` has no setter - Object.assign will throw. + // TODO: Resolve this workaround. Ref: https://github.com/Comfy-Org/litegraph.js/issues/1022 + // @ts-expect-error Prevent naming conflicts with custom nodes. + // eslint-disable-next-line unused-imports/no-unused-vars + const { node: _, outline_color, background_color, height, text_color, secondary_text_color, disabledTextColor, displayName, displayValue, labelBaseline, ...safeValues } = widget + + Object.assign(this, safeValues) + } + + get outline_color() { + return this.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR : LiteGraph.WIDGET_OUTLINE_COLOR + } + + get background_color() { + return LiteGraph.WIDGET_BGCOLOR + } + + get height() { + return LiteGraph.NODE_WIDGET_HEIGHT + } + + get text_color() { + return LiteGraph.WIDGET_TEXT_COLOR + } + + get secondary_text_color() { + return LiteGraph.WIDGET_SECONDARY_TEXT_COLOR + } + + get disabledTextColor() { + return LiteGraph.WIDGET_DISABLED_TEXT_COLOR + } + + get displayName() { + return this.label || this.name + } + + // TODO: Resolve this workaround. Ref: https://github.com/Comfy-Org/litegraph.js/issues/1022 + get _displayValue(): string { + return this.computedDisabled ? "" : String(this.value) + } + + get labelBaseline() { + return this.y + this.height * 0.7 + } + + /** + * Draws the widget + * @param ctx The canvas context + * @param options The options for drawing the widget + * @remarks Not naming this `draw` as `draw` conflicts with the `draw` method in + * custom widgets. + */ + abstract drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void + + /** + * Draws the standard widget shape - elongated capsule. The path of the widget shape is not + * cleared, and may be used for further drawing. + * @param ctx The canvas context + * @param options The options for drawing the widget + * @remarks Leaves {@link ctx} dirty. + */ + protected drawWidgetShape(ctx: CanvasRenderingContext2D, { width, showText }: DrawWidgetOptions): void { + const { height, y } = this + const { margin } = BaseWidget + + ctx.textAlign = "left" + ctx.strokeStyle = this.outline_color + ctx.fillStyle = this.background_color + ctx.beginPath() + + if (showText) { + ctx.roundRect(margin, y, width - margin * 2, height, [height * 0.5]) + } else { + ctx.rect(margin, y, width - margin * 2, height) + } + ctx.fill() + if (showText && !this.computedDisabled) ctx.stroke() + } + + /** + * A shared routine for drawing a label and value as text, truncated + * if they exceed the available width. + */ + protected drawTruncatingText({ + ctx, + width, + leftPadding = 5, + rightPadding = 20, + }: DrawTruncatingTextOptions): void { + const { height, y } = this + const { margin } = BaseWidget + + // Measure label and value + const { displayName, _displayValue } = this + const labelWidth = ctx.measureText(displayName).width + const valueWidth = ctx.measureText(_displayValue).width + + const gap = BaseWidget.labelValueGap + const x = margin * 2 + leftPadding + + const totalWidth = width - x - 2 * margin - rightPadding + const requiredWidth = labelWidth + gap + valueWidth + + const area = new Rectangle(x, y, totalWidth, height * 0.7) + + ctx.fillStyle = this.secondary_text_color + + if (requiredWidth <= totalWidth) { + // Draw label & value normally + drawTextInArea({ ctx, text: displayName, area, align: "left" }) + } else if (LiteGraph.truncateWidgetTextEvenly) { + // Label + value will not fit - scale evenly to fit + const scale = (totalWidth - gap) / (requiredWidth - gap) + area.width = labelWidth * scale + + drawTextInArea({ ctx, text: displayName, area, align: "left" }) + + // Move the area to the right to render the value + area.right = x + totalWidth + area.setWidthRightAnchored(valueWidth * scale) + } else if (LiteGraph.truncateWidgetValuesFirst) { + // Label + value will not fit - use legacy scaling of value first + const cappedLabelWidth = Math.min(labelWidth, totalWidth) + + area.width = cappedLabelWidth + drawTextInArea({ ctx, text: displayName, area, align: "left" }) + + area.right = x + totalWidth + area.setWidthRightAnchored(Math.max(totalWidth - gap - cappedLabelWidth, 0)) + } else { + // Label + value will not fit - scale label first + const cappedValueWidth = Math.min(valueWidth, totalWidth) + + area.width = Math.max(totalWidth - gap - cappedValueWidth, 0) + drawTextInArea({ ctx, text: displayName, area, align: "left" }) + + area.right = x + totalWidth + area.setWidthRightAnchored(cappedValueWidth) + } + ctx.fillStyle = this.text_color + drawTextInArea({ ctx, text: _displayValue, area, align: "right" }) + } + + /** + * Handles the click event for the widget + * @param options The options for handling the click event + */ + abstract onClick(options: WidgetEventOptions): void + + /** + * Handles the drag event for the widget + * @param options The options for handling the drag event + */ + onDrag?(options: WidgetEventOptions): void + + /** + * Sets the value of the widget + * @param value The value to set + * @param options The options for setting the value + */ + setValue(value: TWidget["value"], { e, node, canvas }: WidgetEventOptions): void { + const oldValue = this.value + if (value === this.value) return + + const v = this.type === "number" ? Number(value) : value + this.value = v + if ( + this.options?.property && + node.properties[this.options.property] !== undefined + ) { + node.setProperty(this.options.property, v) + } + const pos = canvas.graph_mouse + this.callback?.(this.value, canvas, node, pos, e) + + node.onWidgetChanged?.(this.name ?? "", v, oldValue, this) + if (node.graph) node.graph._version++ + } + + /** + * Clones the widget. + * @param node The node that will own the cloned widget. + * @returns A new widget with the same properties as the original + * @remarks Subclasses with custom constructors must override this method. + * + * Correctly and safely typing this is currently not possible (practical?) in TypeScript 5.8. + */ + createCopyForNode(node: LGraphNode): this { + // @ts-expect-error + const cloned: this = new (this.constructor as typeof this)(this, node) + cloned.value = this.value + return cloned + } +} diff --git a/src/lib/litegraph/src/widgets/BooleanWidget.ts b/src/lib/litegraph/src/widgets/BooleanWidget.ts new file mode 100644 index 0000000000..505358f05b --- /dev/null +++ b/src/lib/litegraph/src/widgets/BooleanWidget.ts @@ -0,0 +1,52 @@ +import type { IBooleanWidget } from "@/types/widgets" + +import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" + +export class BooleanWidget extends BaseWidget implements IBooleanWidget { + override type = "toggle" as const + + override drawWidget(ctx: CanvasRenderingContext2D, { + width, + showText = true, + }: DrawWidgetOptions) { + const { height, y } = this + const { margin } = BaseWidget + + this.drawWidgetShape(ctx, { width, showText }) + + ctx.fillStyle = this.value ? "#89A" : "#333" + ctx.beginPath() + ctx.arc( + width - margin * 2, + y + height * 0.5, + height * 0.36, + 0, + Math.PI * 2, + ) + ctx.fill() + + if (showText) { + this.drawLabel(ctx, margin * 2) + this.drawValue(ctx, width - 40) + } + } + + drawLabel(ctx: CanvasRenderingContext2D, x: number): void { + // Draw label + ctx.fillStyle = this.secondary_text_color + const { displayName } = this + if (displayName) ctx.fillText(displayName, x, this.labelBaseline) + } + + drawValue(ctx: CanvasRenderingContext2D, x: number): void { + // Draw value + ctx.fillStyle = this.value ? this.text_color : this.secondary_text_color + ctx.textAlign = "right" + const value = this.value ? this.options.on || "true" : this.options.off || "false" + ctx.fillText(value, x, this.labelBaseline) + } + + override onClick(options: WidgetEventOptions) { + this.setValue(!this.value, options) + } +} diff --git a/src/lib/litegraph/src/widgets/ButtonWidget.ts b/src/lib/litegraph/src/widgets/ButtonWidget.ts new file mode 100644 index 0000000000..7cbee2cd1b --- /dev/null +++ b/src/lib/litegraph/src/widgets/ButtonWidget.ts @@ -0,0 +1,67 @@ +import type { LGraphNode } from "@/LGraphNode" +import type { IButtonWidget } from "@/types/widgets" + +import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" + +export class ButtonWidget extends BaseWidget implements IButtonWidget { + override type = "button" as const + clicked: boolean + + constructor(widget: IButtonWidget, node: LGraphNode) { + super(widget, node) + this.clicked ??= false + } + + /** + * Draws the widget + * @param ctx The canvas context + * @param options The options for drawing the widget + */ + override drawWidget(ctx: CanvasRenderingContext2D, { + width, + showText = true, + }: DrawWidgetOptions) { + // Store original context attributes + const { fillStyle, strokeStyle, textAlign } = ctx + + const { height, y } = this + const { margin } = BaseWidget + + // Draw button background + ctx.fillStyle = this.background_color + if (this.clicked) { + ctx.fillStyle = "#AAA" + this.clicked = false + } + ctx.fillRect(margin, y, width - margin * 2, height) + + // Draw button outline if not disabled + if (showText && !this.computedDisabled) { + ctx.strokeStyle = this.outline_color + ctx.strokeRect(margin, y, width - margin * 2, height) + } + + // Draw button text + if (showText) this.drawLabel(ctx, width * 0.5) + + // Restore original context attributes + Object.assign(ctx, { textAlign, strokeStyle, fillStyle }) + } + + drawLabel(ctx: CanvasRenderingContext2D, x: number): void { + ctx.textAlign = "center" + ctx.fillStyle = this.text_color + ctx.fillText(this.displayName, x, this.y + this.height * 0.7) + } + + override onClick({ e, node, canvas }: WidgetEventOptions) { + const pos = canvas.graph_mouse + + // Set clicked state and mark canvas as dirty + this.clicked = true + canvas.setDirty(true) + + // Call the callback with widget instance and other context + this.callback?.(this, canvas, node, pos, e) + } +} diff --git a/src/lib/litegraph/src/widgets/ComboWidget.ts b/src/lib/litegraph/src/widgets/ComboWidget.ts new file mode 100644 index 0000000000..79ed6edb23 --- /dev/null +++ b/src/lib/litegraph/src/widgets/ComboWidget.ts @@ -0,0 +1,141 @@ +import type { WidgetEventOptions } from "./BaseWidget" +import type { LGraphNode } from "@/LGraphNode" +import type { IComboWidget, IStringComboWidget } from "@/types/widgets" + +import { clamp, LiteGraph } from "@/litegraph" +import { warnDeprecated } from "@/utils/feedback" + +import { BaseSteppedWidget } from "./BaseSteppedWidget" + +/** + * This is used as an (invalid) assertion to resolve issues with legacy duck-typed values. + * + * Function style in use by: + * https://github.com/kijai/ComfyUI-KJNodes/blob/c3dc82108a2a86c17094107ead61d63f8c76200e/web/js/setgetnodes.js#L401-L404 + */ +type Values = string[] | Record | ((widget?: ComboWidget, node?: LGraphNode) => string[]) + +function toArray(values: Values): string[] { + return Array.isArray(values) ? values : Object.keys(values) +} + +export class ComboWidget extends BaseSteppedWidget implements IComboWidget { + override type = "combo" as const + + override get _displayValue() { + if (this.computedDisabled) return "" + const { values: rawValues } = this.options + if (rawValues) { + const values = typeof rawValues === "function" ? rawValues() : rawValues + + if (values && !Array.isArray(values)) { + return values[this.value] + } + } + return typeof this.value === "number" ? String(this.value) : this.value + } + + #getValues(node: LGraphNode): Values { + const { values } = this.options + if (values == null) throw new Error("[ComboWidget]: values is required") + + return typeof values === "function" + ? values(this, node) + : values + } + + /** + * Checks if the value is {@link Array.at at} the given index in the combo list. + * @param increment `true` if checking the use of the increment button, `false` for decrement + * @returns `true` if the value is at the given index, otherwise `false`. + */ + #canUseButton(increment: boolean): boolean { + const { values } = this.options + // If using legacy duck-typed method, false is the most permissive return value + if (typeof values === "function") return false + + const valuesArray = toArray(values) + if (!(valuesArray.length > 1)) return false + + // Edge case where the value is both the first and last item in the list + const firstValue = valuesArray.at(0) + const lastValue = valuesArray.at(-1) + if (firstValue === lastValue) return true + + return this.value !== (increment ? lastValue : firstValue) + } + + /** + * Returns `true` if the current value is not the last value in the list. + * Handles edge case where the value is both the first and last item in the list. + */ + override canIncrement(): boolean { + return this.#canUseButton(true) + } + + override canDecrement(): boolean { + return this.#canUseButton(false) + } + + override incrementValue(options: WidgetEventOptions): void { + this.#tryChangeValue(1, options) + } + + override decrementValue(options: WidgetEventOptions): void { + this.#tryChangeValue(-1, options) + } + + #tryChangeValue(delta: number, options: WidgetEventOptions): void { + const values = this.#getValues(options.node) + const indexedValues = toArray(values) + + // avoids double click event + options.canvas.last_mouseclick = 0 + + const foundIndex = typeof values === "object" + ? indexedValues.indexOf(String(this.value)) + delta + // @ts-expect-error handle non-string values + : indexedValues.indexOf(this.value) + delta + + const index = clamp(foundIndex, 0, indexedValues.length - 1) + + const value = Array.isArray(values) + ? values[index] + : index + this.setValue(value, options) + } + + override onClick({ e, node, canvas }: WidgetEventOptions) { + const x = e.canvasX - node.pos[0] + const width = this.width || node.size[0] + + // Deprecated functionality (warning as of v0.14.5) + if (typeof this.options.values === "function") { + warnDeprecated("Using a function for values is deprecated. Use an array of unique values instead.") + } + + // Determine if clicked on left/right arrows + if (x < 40) return this.decrementValue({ e, node, canvas }) + if (x > width - 40) return this.incrementValue({ e, node, canvas }) + + // Otherwise, show dropdown menu + const values = this.#getValues(node) + const values_list = toArray(values) + + // Handle center click - show dropdown menu + const text_values = values != values_list ? Object.values(values) : values + new LiteGraph.ContextMenu(text_values, { + scale: Math.max(1, canvas.ds.scale), + event: e, + className: "dark", + callback: (value: string) => { + this.setValue( + values != values_list + ? text_values.indexOf(value) + : value, + { e, node, canvas }, + ) + }, + }) + } +} diff --git a/src/lib/litegraph/src/widgets/KnobWidget.ts b/src/lib/litegraph/src/widgets/KnobWidget.ts new file mode 100644 index 0000000000..c9351e4273 --- /dev/null +++ b/src/lib/litegraph/src/widgets/KnobWidget.ts @@ -0,0 +1,233 @@ +import type { IKnobWidget } from "@/types/widgets" + +import { clamp } from "@/litegraph" +import { getWidgetStep } from "@/utils/widget" + +import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" + +export class KnobWidget extends BaseWidget implements IKnobWidget { + override type = "knob" as const + + /** + * Compute the layout size of the widget. + * @returns The layout size of the widget. + */ + override computeLayoutSize(): { + minHeight: number + maxHeight?: number + minWidth: number + maxWidth?: number + } { + return { + minHeight: 60, + minWidth: 20, + maxHeight: 1_000_000, + maxWidth: 1_000_000, + } + } + + override get height(): number { + return this.computedHeight || super.height + } + + drawWidget( + ctx: CanvasRenderingContext2D, + { + width, + showText = true, + }: DrawWidgetOptions, + ): void { + // Store original context attributes + const { fillStyle, strokeStyle, textAlign } = ctx + + const { y } = this + const { margin } = BaseWidget + + const { gradient_stops = "rgb(14, 182, 201); rgb(0, 216, 72)" } = this.options + const effective_height = this.computedHeight || this.height + // Draw background + const size_modifier = + Math.min(this.computedHeight || this.height, this.width || 20) / 20 // TODO: replace magic numbers + const arc_center = { x: width / 2, y: effective_height / 2 + y } + ctx.lineWidth = + (Math.min(width, effective_height) - margin * size_modifier) / 6 + const arc_size = + (Math.min(width, effective_height) - + margin * size_modifier - + ctx.lineWidth) / 2 + { + const gradient = ctx.createRadialGradient( + arc_center.x, + arc_center.y, + arc_size + ctx.lineWidth, + 0, + 0, + arc_size + ctx.lineWidth, + ) + gradient.addColorStop(0, "rgb(29, 29, 29)") + gradient.addColorStop(1, "rgb(116, 116, 116)") + ctx.fillStyle = gradient + } + ctx.beginPath() + + { + ctx.arc( + arc_center.x, + arc_center.y, + arc_size + ctx.lineWidth / 2, + 0, + Math.PI * 2, + false, + ) + ctx.fill() + ctx.closePath() + } + + // Draw knob's background + const arc = { + start_angle: Math.PI * 0.6, + end_angle: Math.PI * 2.4, + } + ctx.beginPath() + { + const gradient = ctx.createRadialGradient( + arc_center.x, + arc_center.y, + arc_size + ctx.lineWidth, + 0, + 0, + arc_size + ctx.lineWidth, + ) + gradient.addColorStop(0, "rgb(99, 99, 99)") + gradient.addColorStop(1, "rgb(36, 36, 36)") + ctx.strokeStyle = gradient + } + ctx.arc( + arc_center.x, + arc_center.y, + arc_size, + arc.start_angle, + arc.end_angle, + false, + ) + ctx.stroke() + ctx.closePath() + + const range = this.options.max - this.options.min + let nvalue = (this.value - this.options.min) / range + nvalue = clamp(nvalue, 0, 1) + + // Draw value + ctx.beginPath() + const gradient = ctx.createConicGradient( + arc.start_angle, + arc_center.x, + arc_center.y, + ) + const gs = gradient_stops.split(";") + for (const [index, stop] of gs.entries()) { + gradient.addColorStop(index, stop.trim()) + } + + ctx.strokeStyle = gradient + const value_end_angle = + (arc.end_angle - arc.start_angle) * nvalue + arc.start_angle + ctx.arc( + arc_center.x, + arc_center.y, + arc_size, + arc.start_angle, + value_end_angle, + false, + ) + ctx.stroke() + ctx.closePath() + + // Draw outline if not disabled + if (showText && !this.computedDisabled) { + ctx.strokeStyle = this.outline_color + // Draw value + ctx.beginPath() + ctx.strokeStyle = this.outline_color + ctx.arc( + arc_center.x, + arc_center.y, + arc_size + ctx.lineWidth / 2, + 0, + Math.PI * 2, + false, + ) + ctx.lineWidth = 1 + ctx.stroke() + ctx.closePath() + } + + // Draw marker if present + // TODO: TBD later when options work + + // Draw text + if (showText) { + ctx.textAlign = "center" + ctx.fillStyle = this.text_color + const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3) + ctx.fillText( + `${this.label || this.name}\n${fixedValue}`, + width * 0.5, + y + effective_height * 0.5, + ) + } + + // Restore original context attributes + Object.assign(ctx, { textAlign, strokeStyle, fillStyle }) + } + + onClick(): void { + this.current_drag_offset = 0 + } + + current_drag_offset = 0 + override onDrag(options: WidgetEventOptions): void { + if (this.options.read_only) return + const { e } = options + const step = getWidgetStep(this.options) + // Shift to move by 10% increments + const range = (this.options.max - this.options.min) + const range_10_percent = range / 10 + const range_1_percent = range / 100 + const step_for = { + delta_x: step, + shift: range_10_percent > step ? range_10_percent - (range_10_percent % step) : step, + delta_y: range_1_percent > step ? range_1_percent - (range_1_percent % step) : step, // 1% increments + } + + const use_y = Math.abs(e.movementY) > Math.abs(e.movementX) + const delta = use_y ? -e.movementY : e.movementX // Y is inverted so that UP increases the value + const drag_threshold = 15 + // Calculate new value based on drag movement + this.current_drag_offset += delta + let adjustment = 0 + if (this.current_drag_offset > drag_threshold) { + adjustment += 1 + this.current_drag_offset -= drag_threshold + } else if (this.current_drag_offset < -drag_threshold) { + adjustment -= 1 + this.current_drag_offset += drag_threshold + } + + const step_with_shift_modifier = e.shiftKey + ? step_for.shift + : (use_y + ? step_for.delta_y + : step) + + const deltaValue = adjustment * step_with_shift_modifier + const newValue = clamp( + this.value + deltaValue, + this.options.min, + this.options.max, + ) + if (newValue !== this.value) { + this.setValue(newValue, options) + } + } +} diff --git a/src/lib/litegraph/src/widgets/LegacyWidget.ts b/src/lib/litegraph/src/widgets/LegacyWidget.ts new file mode 100644 index 0000000000..bbf75c519a --- /dev/null +++ b/src/lib/litegraph/src/widgets/LegacyWidget.ts @@ -0,0 +1,32 @@ +import type { LGraphNode } from "@/LGraphNode" +import type { IBaseWidget } from "@/types/widgets" + +import { LiteGraph } from "@/litegraph" + +import { BaseWidget, type DrawWidgetOptions } from "./BaseWidget" + +/** + * Wraps a legacy POJO custom widget, so that all widgets may be called via the same internal interface. + * + * Support will eventually be removed. + * @remarks Expect this class to undergo breaking changes without warning. + */ +export class LegacyWidget extends BaseWidget implements IBaseWidget { + draw?( + ctx: CanvasRenderingContext2D, + node: LGraphNode, + widget_width: number, + y: number, + H: number, + lowQuality?: boolean, + ): void + + override drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions) { + const H = LiteGraph.NODE_WIDGET_HEIGHT + this.draw?.(ctx, this.node, options.width, this.y, H, !!options.showText) + } + + override onClick() { + console.warn("Custom widget wrapper onClick was just called. Handling for third party widgets is done via LGraphCanvas - the mouse callback.") + } +} diff --git a/src/lib/litegraph/src/widgets/NumberWidget.ts b/src/lib/litegraph/src/widgets/NumberWidget.ts new file mode 100644 index 0000000000..ac88bafdca --- /dev/null +++ b/src/lib/litegraph/src/widgets/NumberWidget.ts @@ -0,0 +1,98 @@ +import type { WidgetEventOptions } from "./BaseWidget" +import type { INumericWidget } from "@/types/widgets" + +import { getWidgetStep } from "@/utils/widget" + +import { BaseSteppedWidget } from "./BaseSteppedWidget" + +export class NumberWidget extends BaseSteppedWidget implements INumericWidget { + override type = "number" as const + + override get _displayValue() { + if (this.computedDisabled) return "" + return Number(this.value).toFixed( + this.options.precision !== undefined + ? this.options.precision + : 3, + ) + } + + override canIncrement(): boolean { + const { max } = this.options + return max == null || this.value < max + } + + override canDecrement(): boolean { + const { min } = this.options + return min == null || this.value > min + } + + override incrementValue(options: WidgetEventOptions): void { + this.setValue(this.value + getWidgetStep(this.options), options) + } + + override decrementValue(options: WidgetEventOptions): void { + this.setValue(this.value - getWidgetStep(this.options), options) + } + + override setValue(value: number, options: WidgetEventOptions) { + let newValue = value + if (this.options.min != null && newValue < this.options.min) { + newValue = this.options.min + } + if (this.options.max != null && newValue > this.options.max) { + newValue = this.options.max + } + super.setValue(newValue, options) + } + + override onClick({ e, node, canvas }: WidgetEventOptions) { + const x = e.canvasX - node.pos[0] + const width = this.width || node.size[0] + + // Determine if clicked on left/right arrows + const delta = x < 40 + ? -1 + : (x > width - 40 + ? 1 + : 0) + + if (delta) { + // Handle left/right arrow clicks + this.setValue(this.value + delta * getWidgetStep(this.options), { e, node, canvas }) + return + } + + // Handle center click - show prompt + canvas.prompt("Value", this.value, (v: string) => { + // Check if v is a valid equation or a number + if (/^[\d\s()*+/-]+|\d+\.\d+$/.test(v)) { + // Solve the equation if possible + try { + v = eval(v) + } catch {} + } + const newValue = Number(v) + if (!isNaN(newValue)) { + this.setValue(newValue, { e, node, canvas }) + } + }, e) + } + + /** + * Handles drag events for the number widget + * @param options The options for handling the drag event + */ + override onDrag({ e, node, canvas }: WidgetEventOptions) { + const width = this.width || node.width + const x = e.canvasX - node.pos[0] + const delta = x < 40 + ? -1 + : (x > width - 40 + ? 1 + : 0) + + if (delta && (x > -3 && x < width + 3)) return + this.setValue(this.value + (e.deltaX ?? 0) * getWidgetStep(this.options), { e, node, canvas }) + } +} diff --git a/src/lib/litegraph/src/widgets/SliderWidget.ts b/src/lib/litegraph/src/widgets/SliderWidget.ts new file mode 100644 index 0000000000..7e9054cf58 --- /dev/null +++ b/src/lib/litegraph/src/widgets/SliderWidget.ts @@ -0,0 +1,112 @@ +import type { ISliderWidget } from "@/types/widgets" + +import { clamp } from "@/litegraph" + +import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" + +export class SliderWidget extends BaseWidget implements ISliderWidget { + override type = "slider" as const + + marker?: number + + /** + * Draws the widget + * @param ctx The canvas context + * @param options The options for drawing the widget + */ + override drawWidget(ctx: CanvasRenderingContext2D, { + width, + showText = true, + }: DrawWidgetOptions) { + // Store original context attributes + const { fillStyle, strokeStyle, textAlign } = ctx + + const { height, y } = this + const { margin } = BaseWidget + + // Draw background + ctx.fillStyle = this.background_color + ctx.fillRect(margin, y, width - margin * 2, height) + + // Calculate normalized value + const range = this.options.max - this.options.min + let nvalue = (this.value - this.options.min) / range + nvalue = clamp(nvalue, 0, 1) + + // Draw slider bar + ctx.fillStyle = this.options.slider_color ?? "#678" + ctx.fillRect(margin, y, nvalue * (width - margin * 2), height) + + // Draw outline if not disabled + if (showText && !this.computedDisabled) { + ctx.strokeStyle = this.outline_color + ctx.strokeRect(margin, y, width - margin * 2, height) + } + + // Draw marker if present + if (this.marker != null) { + let marker_nvalue = (this.marker - this.options.min) / range + marker_nvalue = clamp(marker_nvalue, 0, 1) + ctx.fillStyle = this.options.marker_color ?? "#AA9" + ctx.fillRect( + margin + marker_nvalue * (width - margin * 2), + y, + 2, + height, + ) + } + + // Draw text + if (showText) { + ctx.textAlign = "center" + ctx.fillStyle = this.text_color + const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3) + ctx.fillText( + `${this.label || this.name} ${fixedValue}`, + width * 0.5, + y + height * 0.7, + ) + } + + // Restore original context attributes + Object.assign(ctx, { textAlign, strokeStyle, fillStyle }) + } + + /** + * Handles click events for the slider widget + */ + override onClick(options: WidgetEventOptions) { + if (this.options.read_only) return + + const { e, node } = options + const width = this.width || node.size[0] + const x = e.canvasX - node.pos[0] + + // Calculate new value based on click position + const slideFactor = clamp((x - 15) / (width - 30), 0, 1) + const newValue = this.options.min + (this.options.max - this.options.min) * slideFactor + + if (newValue !== this.value) { + this.setValue(newValue, options) + } + } + + /** + * Handles drag events for the slider widget + */ + override onDrag(options: WidgetEventOptions) { + if (this.options.read_only) return false + + const { e, node } = options + const width = this.width || node.size[0] + const x = e.canvasX - node.pos[0] + + // Calculate new value based on drag position + const slideFactor = clamp((x - 15) / (width - 30), 0, 1) + const newValue = this.options.min + (this.options.max - this.options.min) * slideFactor + + if (newValue !== this.value) { + this.setValue(newValue, options) + } + } +} diff --git a/src/lib/litegraph/src/widgets/TextWidget.ts b/src/lib/litegraph/src/widgets/TextWidget.ts new file mode 100644 index 0000000000..0567fd591e --- /dev/null +++ b/src/lib/litegraph/src/widgets/TextWidget.ts @@ -0,0 +1,49 @@ +import type { LGraphNode } from "@/LGraphNode" +import type { IStringWidget } from "@/types/widgets" + +import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" + +export class TextWidget extends BaseWidget implements IStringWidget { + constructor(widget: IStringWidget, node: LGraphNode) { + super(widget, node) + this.type ??= "string" + this.value = widget.value?.toString() ?? "" + } + + /** + * Draws the widget + * @param ctx The canvas context + * @param options The options for drawing the widget + */ + override drawWidget(ctx: CanvasRenderingContext2D, { + width, + showText = true, + }: DrawWidgetOptions) { + // Store original context attributes + const { fillStyle, strokeStyle, textAlign } = ctx + + this.drawWidgetShape(ctx, { width, showText }) + + if (showText) { + this.drawTruncatingText({ ctx, width, leftPadding: 0, rightPadding: 0 }) + } + + // Restore original context attributes + Object.assign(ctx, { textAlign, strokeStyle, fillStyle }) + } + + override onClick({ e, node, canvas }: WidgetEventOptions) { + // Show prompt dialog for text input + canvas.prompt( + "Value", + this.value, + (v: string) => { + if (v !== null) { + this.setValue(v, { e, node, canvas }) + } + }, + e, + this.options?.multiline ?? false, + ) + } +} diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts new file mode 100644 index 0000000000..07dc9033a6 --- /dev/null +++ b/src/lib/litegraph/src/widgets/widgetMap.ts @@ -0,0 +1,130 @@ +import type { LGraphNode } from "@/LGraphNode" +import type { + IBaseWidget, + IBooleanWidget, + IButtonWidget, + IComboWidget, + ICustomWidget, + IKnobWidget, + INumericWidget, + ISliderWidget, + IStringWidget, + IWidget, + TWidgetType, +} from "@/types/widgets" + +import { toClass } from "@/utils/type" + +import { BaseWidget } from "./BaseWidget" +import { BooleanWidget } from "./BooleanWidget" +import { ButtonWidget } from "./ButtonWidget" +import { ComboWidget } from "./ComboWidget" +import { KnobWidget } from "./KnobWidget" +import { LegacyWidget } from "./LegacyWidget" +import { NumberWidget } from "./NumberWidget" +import { SliderWidget } from "./SliderWidget" +import { TextWidget } from "./TextWidget" + +export type WidgetTypeMap = { + button: ButtonWidget + toggle: BooleanWidget + slider: SliderWidget + knob: KnobWidget + combo: ComboWidget + number: NumberWidget + string: TextWidget + text: TextWidget + custom: LegacyWidget + [key: string]: BaseWidget +} + +/** + * Convert a widget POJO to a proper widget instance. + * @param widget The POJO to convert. + * @param node The node the widget belongs to. + * @param wrapLegacyWidgets Whether to wrap legacy widgets in a `LegacyWidget` instance. + * @returns A concrete widget instance. + */ +export function toConcreteWidget( + widget: TWidget, + node: LGraphNode, + wrapLegacyWidgets?: true, +): WidgetTypeMap[TWidget["type"]] +export function toConcreteWidget( + widget: TWidget, + node: LGraphNode, + wrapLegacyWidgets: false): WidgetTypeMap[TWidget["type"]] | undefined +export function toConcreteWidget( + widget: TWidget, + node: LGraphNode, + wrapLegacyWidgets = true, +): WidgetTypeMap[TWidget["type"]] | undefined { + if (widget instanceof BaseWidget) return widget + + // Assertion: TypeScript has no concept of "all strings except X" + type RemoveBaseWidgetType = T extends { type: TWidgetType } ? T : never + const narrowedWidget = widget as RemoveBaseWidgetType + + switch (narrowedWidget.type) { + case "button": return toClass(ButtonWidget, narrowedWidget, node) + case "toggle": return toClass(BooleanWidget, narrowedWidget, node) + case "slider": return toClass(SliderWidget, narrowedWidget, node) + case "knob": return toClass(KnobWidget, narrowedWidget, node) + case "combo": return toClass(ComboWidget, narrowedWidget, node) + case "number": return toClass(NumberWidget, narrowedWidget, node) + case "string": return toClass(TextWidget, narrowedWidget, node) + case "text": return toClass(TextWidget, narrowedWidget, node) + default: { + if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node) + } + } +} + +// #region Type Guards + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IButtonWidget}. */ +export function isButtonWidget(widget: IBaseWidget): widget is IButtonWidget { + return widget.type === "button" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IBooleanWidget}. */ +export function isBooleanWidget(widget: IBaseWidget): widget is IBooleanWidget { + return widget.type === "toggle" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ISliderWidget}. */ +export function isSliderWidget(widget: IBaseWidget): widget is ISliderWidget { + return widget.type === "slider" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IKnobWidget}. */ +export function isKnobWidget(widget: IBaseWidget): widget is IKnobWidget { + return widget.type === "knob" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IComboWidget}. */ +export function isComboWidget(widget: IBaseWidget): widget is IComboWidget { + return widget.type === "combo" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link INumericWidget}. */ +export function isNumberWidget(widget: IBaseWidget): widget is INumericWidget { + return widget.type === "number" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IStringWidget}. */ +export function isStringWidget(widget: IBaseWidget): widget is IStringWidget { + return widget.type === "string" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITextWidget}. */ +export function isTextWidget(widget: IBaseWidget): widget is IStringWidget { + return widget.type === "text" +} + +/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ICustomWidget}. */ +export function isCustomWidget(widget: IBaseWidget): widget is ICustomWidget { + return widget.type === "custom" +} + +// #endregion Type Guards diff --git a/src/lib/litegraph/test/ConfigureGraph.test.ts b/src/lib/litegraph/test/ConfigureGraph.test.ts new file mode 100644 index 0000000000..74f39c2fe2 --- /dev/null +++ b/src/lib/litegraph/test/ConfigureGraph.test.ts @@ -0,0 +1,17 @@ +import { describe } from "vitest" + +import { LGraph } from "@/litegraph" + +import { dirtyTest } from "./testExtensions" + +describe("LGraph configure()", () => { + dirtyTest("LGraph matches previous snapshot (normal configure() usage)", ({ expect, minimalSerialisableGraph, basicSerialisableGraph }) => { + const configuredMinGraph = new LGraph() + configuredMinGraph.configure(minimalSerialisableGraph) + expect(configuredMinGraph).toMatchSnapshot("configuredMinGraph") + + const configuredBasicGraph = new LGraph() + configuredBasicGraph.configure(basicSerialisableGraph) + expect(configuredBasicGraph).toMatchSnapshot("configuredBasicGraph") + }) +}) diff --git a/src/lib/litegraph/test/LGraph.test.ts b/src/lib/litegraph/test/LGraph.test.ts new file mode 100644 index 0000000000..d77e37a775 --- /dev/null +++ b/src/lib/litegraph/test/LGraph.test.ts @@ -0,0 +1,129 @@ +import { describe } from "vitest" + +import { LGraph, LiteGraph } from "@/litegraph" + +import { test } from "./testExtensions" + +describe("LGraph", () => { + test("can be instantiated", ({ expect }) => { + // @ts-expect-error Intentional - extra holds any / all consumer data that should be serialised + const graph = new LGraph({ extra: "TestGraph" }) + expect(graph).toBeInstanceOf(LGraph) + expect(graph.extra).toBe("TestGraph") + expect(graph.extra).toBe("TestGraph") + }) + + test("is exactly the same type", async ({ expect }) => { + const directImport = await import("@/LGraph") + const entryPointImport = await import("@/litegraph") + + expect(LiteGraph.LGraph).toBe(directImport.LGraph) + expect(LiteGraph.LGraph).toBe(entryPointImport.LGraph) + }) + + test("populates optional values", ({ expect, minimalSerialisableGraph }) => { + const dGraph = new LGraph(minimalSerialisableGraph) + expect(dGraph.links).toBeInstanceOf(Map) + expect(dGraph.nodes).toBeInstanceOf(Array) + expect(dGraph.groups).toBeInstanceOf(Array) + }) + + test("supports schema v0.4 graphs", ({ expect, oldSchemaGraph }) => { + const fromOldSchema = new LGraph(oldSchemaGraph) + expect(fromOldSchema).toMatchSnapshot("oldSchemaGraph") + }) +}) + +describe("Floating Links / Reroutes", () => { + test("Floating reroute should be removed when node and link are removed", ({ expect, floatingLinkGraph }) => { + const graph = new LGraph(floatingLinkGraph) + expect(graph.nodes.length).toBe(1) + graph.remove(graph.nodes[0]) + expect(graph.nodes.length).toBe(0) + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(0) + expect(graph.reroutes.size).toBe(0) + }) + + test("Can add reroute to existing link", ({ expect, linkedNodesGraph }) => { + const graph = new LGraph(linkedNodesGraph) + expect(graph.nodes.length).toBe(2) + expect(graph.links.size).toBe(1) + expect(graph.reroutes.size).toBe(0) + + graph.createReroute([0, 0], graph.links.values().next().value!) + expect(graph.links.size).toBe(1) + expect(graph.reroutes.size).toBe(1) + }) + + test("Create floating reroute when one side of node is removed", ({ expect, linkedNodesGraph }) => { + const graph = new LGraph(linkedNodesGraph) + graph.createReroute([0, 0], graph.links.values().next().value!) + graph.remove(graph.nodes[0]) + + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(1) + expect(graph.reroutes.size).toBe(1) + expect(graph.reroutes.values().next().value!.floating).not.toBeUndefined() + }) + + test("Create floating reroute when one side of link is removed", ({ expect, linkedNodesGraph }) => { + const graph = new LGraph(linkedNodesGraph) + graph.createReroute([0, 0], graph.links.values().next().value!) + graph.nodes[0].disconnectOutput(0) + + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(1) + expect(graph.reroutes.size).toBe(1) + expect(graph.reroutes.values().next().value!.floating).not.toBeUndefined() + }) + + test("Reroutes and branches should be retained when the input node is removed", ({ expect, floatingBranchGraph: graph }) => { + expect(graph.nodes.length).toBe(3) + graph.remove(graph.nodes[2]) + expect(graph.nodes.length).toBe(2) + expect(graph.links.size).toBe(1) + expect(graph.floatingLinks.size).toBe(1) + expect(graph.reroutes.size).toBe(4) + graph.remove(graph.nodes[1]) + expect(graph.nodes.length).toBe(1) + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(2) + expect(graph.reroutes.size).toBe(4) + }) + + test("Floating reroutes should be removed when neither input nor output is connected", ({ expect, floatingBranchGraph: graph }) => { + // Remove output node + graph.remove(graph.nodes[0]) + expect(graph.nodes.length).toBe(2) + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(2) + // The original floating reroute should be removed + expect(graph.reroutes.size).toBe(3) + graph.remove(graph.nodes[0]) + expect(graph.nodes.length).toBe(1) + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(1) + expect(graph.reroutes.size).toBe(3) + graph.remove(graph.nodes[0]) + expect(graph.nodes.length).toBe(0) + expect(graph.links.size).toBe(0) + expect(graph.floatingLinks.size).toBe(0) + expect(graph.reroutes.size).toBe(0) + }) +}) + +describe("Legacy LGraph Compatibility Layer", () => { + test("can be extended via prototype", ({ expect, minimalGraph }) => { + // @ts-expect-error Should always be an error. + LGraph.prototype.newMethod = function () { + return "New method added via prototype" + } + // @ts-expect-error Should always be an error. + expect(minimalGraph.newMethod()).toBe("New method added via prototype") + }) + + test("is correctly assigned to LiteGraph", ({ expect }) => { + expect(LiteGraph.LGraph).toBe(LGraph) + }) +}) diff --git a/src/lib/litegraph/test/LGraphButton.test.ts b/src/lib/litegraph/test/LGraphButton.test.ts new file mode 100644 index 0000000000..d20fea6e4d --- /dev/null +++ b/src/lib/litegraph/test/LGraphButton.test.ts @@ -0,0 +1,185 @@ +import { describe, expect, it, vi } from "vitest" + +import { Rectangle } from "@/infrastructure/Rectangle" +import { LGraphButton } from "@/LGraphButton" + +describe("LGraphButton", () => { + describe("Constructor", () => { + it("should create a button with default options", () => { + const button = new LGraphButton({}) + expect(button).toBeInstanceOf(LGraphButton) + expect(button.name).toBeUndefined() + expect(button._last_area).toBeInstanceOf(Rectangle) + }) + + it("should create a button with custom name", () => { + const button = new LGraphButton({ name: "test_button" }) + expect(button.name).toBe("test_button") + }) + + it("should inherit badge properties", () => { + const button = new LGraphButton({ + text: "Test", + fgColor: "#FF0000", + bgColor: "#0000FF", + fontSize: 16, + }) + expect(button.text).toBe("Test") + expect(button.fgColor).toBe("#FF0000") + expect(button.bgColor).toBe("#0000FF") + expect(button.fontSize).toBe(16) + expect(button.visible).toBe(true) // visible is computed based on text length + }) + }) + + describe("draw", () => { + it("should not draw if not visible", () => { + const button = new LGraphButton({ text: "" }) // Empty text makes it invisible + const ctx = { + measureText: vi.fn().mockReturnValue({ width: 100 }), + } as unknown as CanvasRenderingContext2D + + const superDrawSpy = vi.spyOn(Object.getPrototypeOf(Object.getPrototypeOf(button)), "draw") + + button.draw(ctx, 50, 100) + + expect(superDrawSpy).not.toHaveBeenCalled() + expect(button._last_area.width).toBe(0) // Rectangle default width + }) + + it("should draw and update last area when visible", () => { + const button = new LGraphButton({ + text: "Click", + xOffset: 5, + yOffset: 10, + }) + + const ctx = { + measureText: vi.fn().mockReturnValue({ width: 60 }), + fillRect: vi.fn(), + fillText: vi.fn(), + beginPath: vi.fn(), + roundRect: vi.fn(), + fill: vi.fn(), + font: "", + fillStyle: "", + globalAlpha: 1, + } as unknown as CanvasRenderingContext2D + + const mockGetWidth = vi.fn().mockReturnValue(80) + button.getWidth = mockGetWidth + + const x = 100 + const y = 50 + + button.draw(ctx, x, y) + + // Check that last area was updated correctly + expect(button._last_area[0]).toBe(x + button.xOffset) // 100 + 5 = 105 + expect(button._last_area[1]).toBe(y + button.yOffset) // 50 + 10 = 60 + expect(button._last_area[2]).toBe(80) + expect(button._last_area[3]).toBe(button.height) + }) + + it("should calculate last area without offsets", () => { + const button = new LGraphButton({ + text: "Test", + }) + + const ctx = { + measureText: vi.fn().mockReturnValue({ width: 40 }), + fillRect: vi.fn(), + fillText: vi.fn(), + beginPath: vi.fn(), + roundRect: vi.fn(), + fill: vi.fn(), + font: "", + fillStyle: "", + globalAlpha: 1, + } as unknown as CanvasRenderingContext2D + + const mockGetWidth = vi.fn().mockReturnValue(50) + button.getWidth = mockGetWidth + + button.draw(ctx, 200, 100) + + expect(button._last_area[0]).toBe(200) + expect(button._last_area[1]).toBe(100) + expect(button._last_area[2]).toBe(50) + }) + }) + + describe("isPointInside", () => { + it("should return true when point is inside button area", () => { + const button = new LGraphButton({ text: "Test" }) + // Set the last area manually + button._last_area[0] = 100 + button._last_area[1] = 50 + button._last_area[2] = 80 + button._last_area[3] = 20 + + // Test various points inside + expect(button.isPointInside(100, 50)).toBe(true) // Top-left corner + expect(button.isPointInside(179, 69)).toBe(true) // Bottom-right corner + expect(button.isPointInside(140, 60)).toBe(true) // Center + }) + + it("should return false when point is outside button area", () => { + const button = new LGraphButton({ text: "Test" }) + // Set the last area manually + button._last_area[0] = 100 + button._last_area[1] = 50 + button._last_area[2] = 80 + button._last_area[3] = 20 + + // Test various points outside + expect(button.isPointInside(99, 50)).toBe(false) // Just left + expect(button.isPointInside(181, 50)).toBe(false) // Just right + expect(button.isPointInside(100, 49)).toBe(false) // Just above + expect(button.isPointInside(100, 71)).toBe(false) // Just below + expect(button.isPointInside(0, 0)).toBe(false) // Far away + }) + + it("should work with buttons that have not been drawn yet", () => { + const button = new LGraphButton({ text: "Test" }) + // _last_area has default values (0, 0, 0, 0) + + expect(button.isPointInside(10, 10)).toBe(false) + expect(button.isPointInside(0, 0)).toBe(false) + }) + }) + + describe("Integration with LGraphBadge", () => { + it("should properly inherit and use badge functionality", () => { + const button = new LGraphButton({ + text: "→", + fontSize: 20, + color: "#FFFFFF", + backgroundColor: "#333333", + xOffset: -10, + yOffset: 5, + }) + + const ctx = { + measureText: vi.fn().mockReturnValue({ width: 20 }), + fillRect: vi.fn(), + fillText: vi.fn(), + beginPath: vi.fn(), + roundRect: vi.fn(), + fill: vi.fn(), + font: "", + fillStyle: "", + globalAlpha: 1, + } as unknown as CanvasRenderingContext2D + + // Draw the button + button.draw(ctx, 100, 50) + + // Verify button draws text without background + expect(ctx.beginPath).not.toHaveBeenCalled() // No background + expect(ctx.roundRect).not.toHaveBeenCalled() // No background + expect(ctx.fill).not.toHaveBeenCalled() // No background + expect(ctx.fillText).toHaveBeenCalledWith("→", expect.any(Number), expect.any(Number)) // Just text + }) + }) +}) diff --git a/src/lib/litegraph/test/LGraphCanvas.titleButtons.test.ts b/src/lib/litegraph/test/LGraphCanvas.titleButtons.test.ts new file mode 100644 index 0000000000..2d7e2e1880 --- /dev/null +++ b/src/lib/litegraph/test/LGraphCanvas.titleButtons.test.ts @@ -0,0 +1,274 @@ +import { beforeEach, describe, expect, it, vi } from "vitest" + +import { LGraphCanvas } from "@/LGraphCanvas" +import { LGraphNode, LiteGraph } from "@/litegraph" + +describe("LGraphCanvas Title Button Rendering", () => { + let canvas: LGraphCanvas + let ctx: CanvasRenderingContext2D + let node: LGraphNode + + beforeEach(() => { + // Create a mock canvas element + const canvasElement = document.createElement("canvas") + ctx = { + save: vi.fn(), + restore: vi.fn(), + translate: vi.fn(), + scale: vi.fn(), + fillRect: vi.fn(), + strokeRect: vi.fn(), + fillText: vi.fn(), + measureText: vi.fn().mockReturnValue({ width: 50 }), + beginPath: vi.fn(), + moveTo: vi.fn(), + lineTo: vi.fn(), + stroke: vi.fn(), + fill: vi.fn(), + closePath: vi.fn(), + arc: vi.fn(), + rect: vi.fn(), + clip: vi.fn(), + clearRect: vi.fn(), + setTransform: vi.fn(), + roundRect: vi.fn(), + font: "", + fillStyle: "", + strokeStyle: "", + lineWidth: 1, + globalAlpha: 1, + textAlign: "left" as CanvasTextAlign, + textBaseline: "alphabetic" as CanvasTextBaseline, + } as unknown as CanvasRenderingContext2D + + canvasElement.getContext = vi.fn().mockReturnValue(ctx) + + canvas = new LGraphCanvas(canvasElement, null, { + skip_render: true, + skip_events: true, + }) + + node = new LGraphNode("Test Node") + node.pos = [100, 200] + node.size = [200, 100] + + // Mock required methods + node.drawTitleBarBackground = vi.fn() + node.drawTitleBarText = vi.fn() + node.drawBadges = vi.fn() + node.drawToggles = vi.fn() + node.drawNodeShape = vi.fn() + node.drawSlots = vi.fn() + node.drawContent = vi.fn() + node.drawWidgets = vi.fn() + node.drawCollapsedSlots = vi.fn() + node.drawTitleBox = vi.fn() + node.drawTitleText = vi.fn() + node.drawProgressBar = vi.fn() + node._setConcreteSlots = vi.fn() + node.arrange = vi.fn() + node.isSelectable = vi.fn().mockReturnValue(true) + }) + + describe("drawNode title button rendering", () => { + it("should render visible title buttons", () => { + const button1 = node.addTitleButton({ + name: "button1", + text: "A", + visible: true, + }) + + const button2 = node.addTitleButton({ + name: "button2", + text: "B", + visible: true, + }) + + // Mock button methods + const getWidth1 = vi.fn().mockReturnValue(20) + const getWidth2 = vi.fn().mockReturnValue(25) + const draw1 = vi.spyOn(button1, "draw") + const draw2 = vi.spyOn(button2, "draw") + + button1.getWidth = getWidth1 + button2.getWidth = getWidth2 + + // Draw the node (this is a simplified version of what drawNode does) + canvas.drawNode(node, ctx) + + // Verify both buttons' getWidth was called + expect(getWidth1).toHaveBeenCalledWith(ctx) + expect(getWidth2).toHaveBeenCalledWith(ctx) + + // Verify both buttons were drawn + expect(draw1).toHaveBeenCalled() + expect(draw2).toHaveBeenCalled() + + // Check draw positions (right-aligned from node width) + // First button (rightmost): 200 - 5 = 195, then subtract width + // Second button: first button position - 5 - button width + const titleHeight = LiteGraph.NODE_TITLE_HEIGHT + const buttonY = -titleHeight + (titleHeight - 20) / 2 // Centered + expect(draw1).toHaveBeenCalledWith(ctx, 180, buttonY) // 200 - 20 + expect(draw2).toHaveBeenCalledWith(ctx, 153, buttonY) // 180 - 2 - 25 + }) + + it("should skip invisible title buttons", () => { + const visibleButton = node.addTitleButton({ + name: "visible", + text: "V", + visible: true, + }) + + const invisibleButton = node.addTitleButton({ + name: "invisible", + text: "", // Empty text makes it invisible + }) + + const getWidthVisible = vi.fn().mockReturnValue(30) + const getWidthInvisible = vi.fn().mockReturnValue(30) + const drawVisible = vi.spyOn(visibleButton, "draw") + const drawInvisible = vi.spyOn(invisibleButton, "draw") + + visibleButton.getWidth = getWidthVisible + invisibleButton.getWidth = getWidthInvisible + + canvas.drawNode(node, ctx) + + // Only visible button should be measured and drawn + expect(getWidthVisible).toHaveBeenCalledWith(ctx) + expect(getWidthInvisible).not.toHaveBeenCalled() + + expect(drawVisible).toHaveBeenCalled() + expect(drawInvisible).not.toHaveBeenCalled() + }) + + it("should handle nodes without title buttons", () => { + // Node has no title buttons + expect(node.title_buttons).toHaveLength(0) + + // Should draw without errors + expect(() => canvas.drawNode(node, ctx)).not.toThrow() + }) + + it("should position multiple buttons with correct spacing", () => { + const buttons = [] + const drawSpies = [] + + // Add 3 buttons + for (let i = 0; i < 3; i++) { + const button = node.addTitleButton({ + name: `button${i}`, + text: String(i), + visible: true, + }) + button.getWidth = vi.fn().mockReturnValue(15) // All same width for simplicity + const spy = vi.spyOn(button, "draw") + buttons.push(button) + drawSpies.push(spy) + } + + canvas.drawNode(node, ctx) + + const titleHeight = LiteGraph.NODE_TITLE_HEIGHT + + // Check positions are correctly spaced (right to left) + // Starting position: 200 + const buttonY = -titleHeight + (titleHeight - 20) / 2 // Button height is 20 (default) + expect(drawSpies[0]).toHaveBeenCalledWith(ctx, 185, buttonY) // 200 - 15 + expect(drawSpies[1]).toHaveBeenCalledWith(ctx, 168, buttonY) // 185 - 2 - 15 + expect(drawSpies[2]).toHaveBeenCalledWith(ctx, 151, buttonY) // 168 - 2 - 15 + }) + + it("should render buttons in low quality mode", () => { + const button = node.addTitleButton({ + name: "test", + text: "T", + visible: true, + }) + + button.getWidth = vi.fn().mockReturnValue(20) + const drawSpy = vi.spyOn(button, "draw") + + // Set low quality rendering + canvas.lowQualityRenderingRequired = true + + canvas.drawNode(node, ctx) + + // Buttons should still be rendered in low quality mode + const buttonY = -LiteGraph.NODE_TITLE_HEIGHT + (LiteGraph.NODE_TITLE_HEIGHT - 20) / 2 + expect(drawSpy).toHaveBeenCalledWith(ctx, 180, buttonY) + }) + + it("should handle buttons with different widths", () => { + const smallButton = node.addTitleButton({ + name: "small", + text: "S", + visible: true, + }) + + const largeButton = node.addTitleButton({ + name: "large", + text: "LARGE", + visible: true, + }) + + smallButton.getWidth = vi.fn().mockReturnValue(15) + largeButton.getWidth = vi.fn().mockReturnValue(50) + + const drawSmall = vi.spyOn(smallButton, "draw") + const drawLarge = vi.spyOn(largeButton, "draw") + + canvas.drawNode(node, ctx) + + const titleHeight = LiteGraph.NODE_TITLE_HEIGHT + + // Small button (rightmost): 200 - 15 = 185 + const buttonY = -titleHeight + (titleHeight - 20) / 2 + expect(drawSmall).toHaveBeenCalledWith(ctx, 185, buttonY) + + // Large button: 185 - 2 - 50 = 133 + expect(drawLarge).toHaveBeenCalledWith(ctx, 133, buttonY) + }) + }) + + describe("Integration with node properties", () => { + it("should respect node size for button positioning", () => { + node.size = [300, 150] // Wider node + + const button = node.addTitleButton({ + name: "test", + text: "X", + visible: true, + }) + + button.getWidth = vi.fn().mockReturnValue(20) + const drawSpy = vi.spyOn(button, "draw") + + canvas.drawNode(node, ctx) + + const titleHeight = LiteGraph.NODE_TITLE_HEIGHT + // Should use new width: 300 - 20 = 280 + const buttonY = -titleHeight + (titleHeight - 20) / 2 + expect(drawSpy).toHaveBeenCalledWith(ctx, 280, buttonY) + }) + + it("should NOT render buttons on collapsed nodes", () => { + node.flags.collapsed = true + + const button = node.addTitleButton({ + name: "test", + text: "C", + }) + + button.getWidth = vi.fn().mockReturnValue(20) + const drawSpy = vi.spyOn(button, "draw") + + canvas.drawNode(node, ctx) + + // Title buttons should NOT be rendered on collapsed nodes + expect(drawSpy).not.toHaveBeenCalled() + expect(button.getWidth).not.toHaveBeenCalled() + }) + }) +}) diff --git a/src/lib/litegraph/test/LGraphGroup.test.ts b/src/lib/litegraph/test/LGraphGroup.test.ts new file mode 100644 index 0000000000..3a1c3202af --- /dev/null +++ b/src/lib/litegraph/test/LGraphGroup.test.ts @@ -0,0 +1,12 @@ +import { describe, expect } from "vitest" + +import { LGraphGroup } from "@/litegraph" + +import { test } from "./testExtensions" + +describe("LGraphGroup", () => { + test("serializes to the existing format", () => { + const link = new LGraphGroup("title", 929) + expect(link.serialize()).toMatchSnapshot("Basic") + }) +}) diff --git a/src/lib/litegraph/test/LGraphNode.resize.test.ts b/src/lib/litegraph/test/LGraphNode.resize.test.ts new file mode 100644 index 0000000000..8f0b06acdc --- /dev/null +++ b/src/lib/litegraph/test/LGraphNode.resize.test.ts @@ -0,0 +1,131 @@ +import { beforeEach, describe, expect } from "vitest" + +import { LGraphNode, LiteGraph } from "@/litegraph" + +import { test } from "./testExtensions" + +describe("LGraphNode resize functionality", () => { + let node: LGraphNode + + beforeEach(() => { + // Set up LiteGraph constants needed for measure + LiteGraph.NODE_TITLE_HEIGHT = 20 + + node = new LGraphNode("Test Node") + node.pos = [100, 100] + node.size = [200, 150] + + // Create a mock canvas context for updateArea + const mockCtx = {} as CanvasRenderingContext2D + + // Call updateArea to populate boundingRect + node.updateArea(mockCtx) + }) + + describe("findResizeDirection", () => { + describe("corners", () => { + test("should detect NW (top-left) corner", () => { + // With title bar, top is at y=80 (100 - 20) + // Corner is from (100, 80) to (100 + 15, 80 + 15) + expect(node.findResizeDirection(100, 80)).toBe("NW") + expect(node.findResizeDirection(110, 90)).toBe("NW") + expect(node.findResizeDirection(114, 94)).toBe("NW") + }) + + test("should detect NE (top-right) corner", () => { + // Corner is from (300 - 15, 80) to (300, 80 + 15) + expect(node.findResizeDirection(285, 80)).toBe("NE") + expect(node.findResizeDirection(290, 90)).toBe("NE") + expect(node.findResizeDirection(299, 94)).toBe("NE") + }) + + test("should detect SW (bottom-left) corner", () => { + // Bottom is at y=250 (100 + 150) + // Corner is from (100, 250 - 15) to (100 + 15, 250) + expect(node.findResizeDirection(100, 235)).toBe("SW") + expect(node.findResizeDirection(110, 240)).toBe("SW") + expect(node.findResizeDirection(114, 249)).toBe("SW") + }) + + test("should detect SE (bottom-right) corner", () => { + // Corner is from (300 - 15, 250 - 15) to (300, 250) + expect(node.findResizeDirection(285, 235)).toBe("SE") + expect(node.findResizeDirection(290, 240)).toBe("SE") + expect(node.findResizeDirection(299, 249)).toBe("SE") + }) + }) + + describe("priority", () => { + test("corners should have priority over edges", () => { + // These points are technically on both corner and edge + // Corner should win + expect(node.findResizeDirection(100, 84)).toBe("NW") // Not "W" + expect(node.findResizeDirection(104, 80)).toBe("NW") // Not "N" + }) + }) + + describe("negative cases", () => { + test("should return undefined when outside node bounds", () => { + expect(node.findResizeDirection(50, 50)).toBeUndefined() + expect(node.findResizeDirection(350, 300)).toBeUndefined() + expect(node.findResizeDirection(99, 150)).toBeUndefined() + expect(node.findResizeDirection(301, 150)).toBeUndefined() + }) + + test("should return undefined when inside node but not on resize areas", () => { + // Center of node (accounting for title bar offset) + expect(node.findResizeDirection(200, 165)).toBeUndefined() + // Just inside the edge threshold + expect(node.findResizeDirection(106, 150)).toBeUndefined() + expect(node.findResizeDirection(294, 150)).toBeUndefined() + expect(node.findResizeDirection(150, 86)).toBeUndefined() // 80 + 6 + expect(node.findResizeDirection(150, 244)).toBeUndefined() + }) + + test("should return undefined when node is not resizable", () => { + node.resizable = false + expect(node.findResizeDirection(100, 100)).toBeUndefined() + expect(node.findResizeDirection(300, 250)).toBeUndefined() + expect(node.findResizeDirection(150, 100)).toBeUndefined() + }) + }) + + describe("edge cases", () => { + test("should handle nodes at origin", () => { + node.pos = [0, 0] + node.size = [100, 100] + + // Update boundingRect with new position/size + const mockCtx = {} as CanvasRenderingContext2D + node.updateArea(mockCtx) + + expect(node.findResizeDirection(0, -20)).toBe("NW") // Account for title bar + expect(node.findResizeDirection(99, 99)).toBe("SE") // Bottom-right corner (100-1, 100-1) + }) + + test("should handle very small nodes", () => { + node.size = [20, 20] // Smaller than corner size + + // Update boundingRect with new size + const mockCtx = {} as CanvasRenderingContext2D + node.updateArea(mockCtx) + + // Corners still work (accounting for title bar offset) + expect(node.findResizeDirection(100, 80)).toBe("NW") + expect(node.findResizeDirection(119, 119)).toBe("SE") + }) + }) + }) + + describe("resizeEdgeSize static property", () => { + test("should have default value of 5", () => { + expect(LGraphNode.resizeEdgeSize).toBe(5) + }) + }) + + describe("resizeHandleSize static property", () => { + test("should have default value of 15", () => { + expect(LGraphNode.resizeHandleSize).toBe(15) + }) + }) +}) diff --git a/src/lib/litegraph/test/LGraphNode.test.ts b/src/lib/litegraph/test/LGraphNode.test.ts new file mode 100644 index 0000000000..6bb5dc08c3 --- /dev/null +++ b/src/lib/litegraph/test/LGraphNode.test.ts @@ -0,0 +1,578 @@ +import type { INodeInputSlot, Point } from "@/interfaces" +import type { ISerialisedNode } from "@/types/serialisation" + +import { afterEach, beforeEach, describe, expect, vi } from "vitest" + +import { LGraphNode, LiteGraph } from "@/litegraph" +import { LGraph } from "@/litegraph" +import { NodeInputSlot } from "@/node/NodeInputSlot" +import { NodeOutputSlot } from "@/node/NodeOutputSlot" + +import { test } from "./testExtensions" + +function getMockISerialisedNode(data: Partial): ISerialisedNode { + return Object.assign({ + id: 0, + flags: {}, + type: "TestNode", + pos: [100, 100], + size: [100, 100], + order: 0, + mode: 0, + }, data) +} + +describe("LGraphNode", () => { + let node: LGraphNode + let origLiteGraph: typeof LiteGraph + + beforeEach(() => { + origLiteGraph = Object.assign({}, LiteGraph) + // @ts-expect-error + delete origLiteGraph.Classes + + Object.assign(LiteGraph, { + NODE_TITLE_HEIGHT: 20, + NODE_SLOT_HEIGHT: 15, + NODE_TEXT_SIZE: 14, + DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)", + DEFAULT_GROUP_FONT_SIZE: 24, + isValidConnection: vi.fn().mockReturnValue(true), + }) + node = new LGraphNode("Test Node") + node.pos = [100, 200] + node.size = [150, 100] // Example size + + // Reset mocks if needed + vi.clearAllMocks() + }) + + afterEach(() => { + Object.assign(LiteGraph, origLiteGraph) + }) + + test("should serialize position/size correctly", () => { + const node = new LGraphNode("TestNode") + node.pos = [10, 20] + node.size = [30, 40] + const json = node.serialize() + expect(json.pos).toEqual([10, 20]) + expect(json.size).toEqual([30, 40]) + + const configureData: ISerialisedNode = { + id: node.id, + type: node.type, + pos: [50, 60], + size: [70, 80], + flags: {}, + order: node.order, + mode: node.mode, + inputs: node.inputs?.map(i => ({ name: i.name, type: i.type, link: i.link })), + outputs: node.outputs?.map(o => ({ name: o.name, type: o.type, links: o.links, slot_index: o.slot_index })), + } + node.configure(configureData) + expect(node.pos).toEqual(new Float32Array([50, 60])) + expect(node.size).toEqual(new Float32Array([70, 80])) + }) + + test("should configure inputs correctly", () => { + const node = new LGraphNode("TestNode") + node.configure(getMockISerialisedNode({ + id: 0, + inputs: [{ name: "TestInput", type: "number", link: null }], + })) + expect(node.inputs.length).toEqual(1) + expect(node.inputs[0].name).toEqual("TestInput") + expect(node.inputs[0].link).toEqual(null) + expect(node.inputs[0]).instanceOf(NodeInputSlot) + + // Should not override existing inputs + node.configure(getMockISerialisedNode({ id: 1 })) + expect(node.id).toEqual(1) + expect(node.inputs.length).toEqual(1) + }) + + test("should configure outputs correctly", () => { + const node = new LGraphNode("TestNode") + node.configure(getMockISerialisedNode({ + id: 0, + outputs: [{ name: "TestOutput", type: "number", links: [] }], + })) + expect(node.outputs.length).toEqual(1) + expect(node.outputs[0].name).toEqual("TestOutput") + expect(node.outputs[0].type).toEqual("number") + expect(node.outputs[0].links).toEqual([]) + expect(node.outputs[0]).instanceOf(NodeOutputSlot) + + // Should not override existing outputs + node.configure(getMockISerialisedNode({ id: 1 })) + expect(node.id).toEqual(1) + expect(node.outputs.length).toEqual(1) + }) + + describe("Disconnect I/O Slots", () => { + test("should disconnect input correctly", () => { + const node1 = new LGraphNode("SourceNode") + const node2 = new LGraphNode("TargetNode") + + // Configure nodes with input/output slots + node1.configure(getMockISerialisedNode({ + id: 1, + outputs: [{ name: "Output1", type: "number", links: [] }], + })) + node2.configure(getMockISerialisedNode({ + id: 2, + inputs: [{ name: "Input1", type: "number", link: null }], + })) + + // Create a graph and add nodes to it + const graph = new LGraph() + graph.add(node1) + graph.add(node2) + + // Connect the nodes + const link = node1.connect(0, node2, 0) + expect(link).not.toBeNull() + expect(node2.inputs[0].link).toBe(link?.id) + expect(node1.outputs[0].links).toContain(link?.id) + + // Test disconnecting by slot number + const disconnected = node2.disconnectInput(0) + expect(disconnected).toBe(true) + expect(node2.inputs[0].link).toBeNull() + expect(node1.outputs[0].links?.length).toBe(0) + expect(graph._links.has(link?.id ?? -1)).toBe(false) + + // Test disconnecting by slot name + node1.connect(0, node2, 0) + const disconnectedByName = node2.disconnectInput("Input1") + expect(disconnectedByName).toBe(true) + expect(node2.inputs[0].link).toBeNull() + + // Test disconnecting non-existent slot + const invalidDisconnect = node2.disconnectInput(999) + expect(invalidDisconnect).toBe(false) + + // Test disconnecting already disconnected input + const alreadyDisconnected = node2.disconnectInput(0) + expect(alreadyDisconnected).toBe(true) + }) + + test("should disconnect output correctly", () => { + const sourceNode = new LGraphNode("SourceNode") + const targetNode1 = new LGraphNode("TargetNode1") + const targetNode2 = new LGraphNode("TargetNode2") + + // Configure nodes with input/output slots + sourceNode.configure(getMockISerialisedNode({ + id: 1, + outputs: [ + { name: "Output1", type: "number", links: [] }, + { name: "Output2", type: "number", links: [] }, + ], + })) + targetNode1.configure(getMockISerialisedNode({ + id: 2, + inputs: [{ name: "Input1", type: "number", link: null }], + })) + targetNode2.configure(getMockISerialisedNode({ + id: 3, + inputs: [{ name: "Input1", type: "number", link: null }], + })) + + // Create a graph and add nodes to it + const graph = new LGraph() + graph.add(sourceNode) + graph.add(targetNode1) + graph.add(targetNode2) + + // Connect multiple nodes to the same output + const link1 = sourceNode.connect(0, targetNode1, 0) + const link2 = sourceNode.connect(0, targetNode2, 0) + expect(link1).not.toBeNull() + expect(link2).not.toBeNull() + expect(sourceNode.outputs[0].links?.length).toBe(2) + + // Test disconnecting specific target node + const disconnectedSpecific = sourceNode.disconnectOutput(0, targetNode1) + expect(disconnectedSpecific).toBe(true) + expect(targetNode1.inputs[0].link).toBeNull() + expect(sourceNode.outputs[0].links?.length).toBe(1) + expect(graph._links.has(link1?.id ?? -1)).toBe(false) + expect(graph._links.has(link2?.id ?? -1)).toBe(true) + + // Test disconnecting by slot name + const link3 = sourceNode.connect(1, targetNode1, 0) + expect(link3).not.toBeNull() + const disconnectedByName = sourceNode.disconnectOutput("Output2", targetNode1) + expect(disconnectedByName).toBe(true) + expect(targetNode1.inputs[0].link).toBeNull() + expect(sourceNode.outputs[1].links?.length).toBe(0) + + // Test disconnecting all connections from an output + const link4 = sourceNode.connect(0, targetNode1, 0) + expect(link4).not.toBeNull() + expect(sourceNode.outputs[0].links?.length).toBe(2) + const disconnectedAll = sourceNode.disconnectOutput(0) + expect(disconnectedAll).toBe(true) + expect(sourceNode.outputs[0].links).toBeNull() + expect(targetNode1.inputs[0].link).toBeNull() + expect(targetNode2.inputs[0].link).toBeNull() + expect(graph._links.has(link2?.id ?? -1)).toBe(false) + expect(graph._links.has(link4?.id ?? -1)).toBe(false) + + // Test disconnecting non-existent slot + const invalidDisconnect = sourceNode.disconnectOutput(999) + expect(invalidDisconnect).toBe(false) + + // Test disconnecting already disconnected output + const alreadyDisconnected = sourceNode.disconnectOutput(0) + expect(alreadyDisconnected).toBe(false) + }) + }) + + describe("getInputPos and getOutputPos", () => { + test("should handle collapsed nodes correctly", () => { + const node = new LGraphNode("TestNode") as unknown as Omit & { boundingRect: Float32Array } + node.pos = [100, 100] + node.size = [100, 100] + node.boundingRect[0] = 100 + node.boundingRect[1] = 100 + node.boundingRect[2] = 100 + node.boundingRect[3] = 100 + node.configure(getMockISerialisedNode({ + id: 1, + inputs: [{ name: "Input1", type: "number", link: null }], + outputs: [{ name: "Output1", type: "number", links: [] }], + })) + + // Collapse the node + node.flags.collapsed = true + + // Get positions in collapsed state + const inputPos = node.getInputPos(0) + const outputPos = node.getOutputPos(0) + + expect(inputPos).toEqual([100, 90]) + expect(outputPos).toEqual([180, 90]) + }) + + test("should return correct positions for input and output slots", () => { + const node = new LGraphNode("TestNode") + node.pos = [100, 100] + node.size = [100, 100] + node.configure(getMockISerialisedNode({ + id: 1, + inputs: [{ name: "Input1", type: "number", link: null }], + outputs: [{ name: "Output1", type: "number", links: [] }], + })) + + const inputPos = node.getInputPos(0) + const outputPos = node.getOutputPos(0) + + expect(inputPos).toEqual([107.5, 110.5]) + expect(outputPos).toEqual([193.5, 110.5]) + }) + }) + + describe("getSlotOnPos", () => { + test("should return undefined when point is outside node bounds", () => { + const node = new LGraphNode("TestNode") + node.pos = [100, 100] + node.size = [100, 100] + node.configure(getMockISerialisedNode({ + id: 1, + inputs: [{ name: "Input1", type: "number", link: null }], + outputs: [{ name: "Output1", type: "number", links: [] }], + })) + + // Test point far outside node bounds + expect(node.getSlotOnPos([0, 0])).toBeUndefined() + // Test point just outside node bounds + expect(node.getSlotOnPos([99, 99])).toBeUndefined() + }) + + test("should detect input slots correctly", () => { + const node = new LGraphNode("TestNode") as unknown as Omit & { boundingRect: Float32Array } + node.pos = [100, 100] + node.size = [100, 100] + node.boundingRect[0] = 100 + node.boundingRect[1] = 100 + node.boundingRect[2] = 200 + node.boundingRect[3] = 200 + node.configure(getMockISerialisedNode({ + id: 1, + inputs: [ + { name: "Input1", type: "number", link: null }, + { name: "Input2", type: "string", link: null }, + ], + })) + + // Get position of first input slot + const inputPos = node.getInputPos(0) + // Test point directly on input slot + const slot = node.getSlotOnPos(inputPos) + expect(slot).toBeDefined() + expect(slot?.name).toBe("Input1") + + // Test point near but not on input slot + expect(node.getSlotOnPos([inputPos[0] - 15, inputPos[1]])).toBeUndefined() + }) + + test("should detect output slots correctly", () => { + const node = new LGraphNode("TestNode") as unknown as Omit & { boundingRect: Float32Array } + node.pos = [100, 100] + node.size = [100, 100] + node.boundingRect[0] = 100 + node.boundingRect[1] = 100 + node.boundingRect[2] = 200 + node.boundingRect[3] = 200 + node.configure(getMockISerialisedNode({ + id: 1, + outputs: [ + { name: "Output1", type: "number", links: [] }, + { name: "Output2", type: "string", links: [] }, + ], + })) + + // Get position of first output slot + const outputPos = node.getOutputPos(0) + // Test point directly on output slot + const slot = node.getSlotOnPos(outputPos) + expect(slot).toBeDefined() + expect(slot?.name).toBe("Output1") + + // Test point near but not on output slot + const gotslot = node.getSlotOnPos([outputPos[0] + 30, outputPos[1]]) + expect(gotslot).toBeUndefined() + }) + + test("should prioritize input slots over output slots", () => { + const node = new LGraphNode("TestNode") as unknown as Omit & { boundingRect: Float32Array } + node.pos = [100, 100] + node.size = [100, 100] + node.boundingRect[0] = 100 + node.boundingRect[1] = 100 + node.boundingRect[2] = 200 + node.boundingRect[3] = 200 + node.configure(getMockISerialisedNode({ + id: 1, + inputs: [{ name: "Input1", type: "number", link: null }], + outputs: [{ name: "Output1", type: "number", links: [] }], + })) + + // Get positions of first input and output slots + const inputPos = node.getInputPos(0) + + // Test point that could theoretically hit both slots + // Should return the input slot due to priority + const slot = node.getSlotOnPos(inputPos) + expect(slot).toBeDefined() + expect(slot?.name).toBe("Input1") + }) + }) + + describe("LGraphNode slot positioning", () => { + test("should correctly position slots with absolute coordinates", () => { + // Setup + const node = new LGraphNode("test") + node.pos = [100, 100] + + // Add input/output with absolute positions + node.addInput("abs-input", "number") + node.inputs[0].pos = [10, 20] + + node.addOutput("abs-output", "number") + node.outputs[0].pos = [50, 30] + + // Test + const inputPos = node.getInputPos(0) + const outputPos = node.getOutputPos(0) + + // Absolute positions should be relative to node position + expect(inputPos).toEqual([110, 120]) // node.pos + slot.pos + expect(outputPos).toEqual([150, 130]) // node.pos + slot.pos + }) + + test("should correctly position default vertical slots", () => { + // Setup + const node = new LGraphNode("test") + node.pos = [100, 100] + + // Add multiple inputs/outputs without absolute positions + node.addInput("input1", "number") + node.addInput("input2", "number") + node.addOutput("output1", "number") + node.addOutput("output2", "number") + + // Calculate expected positions + const slotOffset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 + const slotSpacing = LiteGraph.NODE_SLOT_HEIGHT + const nodeWidth = node.size[0] + + // Test input positions + expect(node.getInputPos(0)).toEqual([ + 100 + slotOffset, + 100 + (0 + 0.7) * slotSpacing, + ]) + expect(node.getInputPos(1)).toEqual([ + 100 + slotOffset, + 100 + (1 + 0.7) * slotSpacing, + ]) + + // Test output positions + expect(node.getOutputPos(0)).toEqual([ + 100 + nodeWidth + 1 - slotOffset, + 100 + (0 + 0.7) * slotSpacing, + ]) + expect(node.getOutputPos(1)).toEqual([ + 100 + nodeWidth + 1 - slotOffset, + 100 + (1 + 0.7) * slotSpacing, + ]) + }) + + test("should skip absolute positioned slots when calculating vertical positions", () => { + // Setup + const node = new LGraphNode("test") + node.pos = [100, 100] + + // Add mix of absolute and default positioned slots + node.addInput("abs-input", "number") + node.inputs[0].pos = [10, 20] + node.addInput("default-input1", "number") + node.addInput("default-input2", "number") + + const slotOffset = LiteGraph.NODE_SLOT_HEIGHT * 0.5 + const slotSpacing = LiteGraph.NODE_SLOT_HEIGHT + + // Test: default positioned slots should be consecutive, ignoring absolute positioned ones + expect(node.getInputPos(1)).toEqual([ + 100 + slotOffset, + 100 + (0 + 0.7) * slotSpacing, // First default slot starts at index 0 + ]) + expect(node.getInputPos(2)).toEqual([ + 100 + slotOffset, + 100 + (1 + 0.7) * slotSpacing, // Second default slot at index 1 + ]) + }) + }) + + describe("widget serialization", () => { + test("should only serialize widgets with serialize flag not set to false", () => { + const node = new LGraphNode("TestNode") + node.serialize_widgets = true + + // Add widgets with different serialization settings + node.addWidget("number", "serializable1", 1, null) + node.addWidget("number", "serializable2", 2, null) + node.addWidget("number", "non-serializable", 3, null) + expect(node.widgets?.length).toBe(3) + + // Set serialize flag to false for the last widget + node.widgets![2].serialize = false + + // Set some widget values + node.widgets![0].value = 10 + node.widgets![1].value = 20 + node.widgets![2].value = 30 + + // Serialize the node + const serialized = node.serialize() + + // Check that only serializable widgets' values are included + expect(serialized.widgets_values).toEqual([10, 20]) + expect(serialized.widgets_values).toHaveLength(2) + }) + + test("should only configure widgets with serialize flag not set to false", () => { + const node = new LGraphNode("TestNode") + node.serialize_widgets = true + + node.addWidget("number", "non-serializable", 1, null) + node.addWidget("number", "serializable1", 2, null) + expect(node.widgets?.length).toBe(2) + + node.widgets![0].serialize = false + node.configure(getMockISerialisedNode({ + id: 1, + type: "TestNode", + pos: [100, 100], + size: [100, 100], + properties: {}, + widgets_values: [100], + })) + + expect(node.widgets![0].value).toBe(1) + expect(node.widgets![1].value).toBe(100) + }) + }) + + describe("getInputSlotPos", () => { + let inputSlot: INodeInputSlot + + beforeEach(() => { + inputSlot = { name: "test_in", type: "string", link: null, boundingRect: new Float32Array([0, 0, 0, 0]) } + }) + test("should return position based on title height when collapsed", () => { + node.flags.collapsed = true + const expectedPos: Point = [100, 200 - LiteGraph.NODE_TITLE_HEIGHT * 0.5] + expect(node.getInputSlotPos(inputSlot)).toEqual(expectedPos) + }) + + test("should return position based on input.pos when defined and not collapsed", () => { + node.flags.collapsed = false + inputSlot.pos = [10, 50] + node.inputs = [inputSlot] + const expectedPos: Point = [100 + 10, 200 + 50] + expect(node.getInputSlotPos(inputSlot)).toEqual(expectedPos) + }) + + test("should return default vertical position when input.pos is undefined and not collapsed", () => { + node.flags.collapsed = false + const inputSlot2 = { name: "test_in_2", type: "number", link: null, boundingRect: new Float32Array([0, 0, 0, 0]) } + node.inputs = [inputSlot, inputSlot2] + const slotIndex = 0 + const nodeOffsetY = (node.constructor as any).slot_start_y || 0 + const expectedY = 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY + const expectedX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5 + expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY]) + const slotIndex2 = 1 + const expectedY2 = 200 + (slotIndex2 + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY + expect(node.getInputSlotPos(inputSlot2)).toEqual([expectedX, expectedY2]) + }) + + test("should return default vertical position including slot_start_y when defined", () => { + (node.constructor as any).slot_start_y = 25 + node.flags.collapsed = false + node.inputs = [inputSlot] + const slotIndex = 0 + const nodeOffsetY = 25 + const expectedY = 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY + const expectedX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5 + expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY]) + delete (node.constructor as any).slot_start_y + }) + }) + + describe("getInputPos", () => { + test("should call getInputSlotPos with the correct input slot from inputs array", () => { + const input0: INodeInputSlot = { name: "in0", type: "string", link: null, boundingRect: new Float32Array([0, 0, 0, 0]) } + const input1: INodeInputSlot = { name: "in1", type: "number", link: null, boundingRect: new Float32Array([0, 0, 0, 0]), pos: [5, 45] } + node.inputs = [input0, input1] + const spy = vi.spyOn(node, "getInputSlotPos") + node.getInputPos(1) + expect(spy).toHaveBeenCalledWith(input1) + const expectedPos: Point = [100 + 5, 200 + 45] + expect(node.getInputPos(1)).toEqual(expectedPos) + spy.mockClear() + node.getInputPos(0) + expect(spy).toHaveBeenCalledWith(input0) + const slotIndex = 0 + const nodeOffsetY = (node.constructor as any).slot_start_y || 0 + const expectedDefaultY = 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY + const expectedDefaultX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5 + expect(node.getInputPos(0)).toEqual([expectedDefaultX, expectedDefaultY]) + spy.mockRestore() + }) + }) +}) diff --git a/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts b/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts new file mode 100644 index 0000000000..161d88e64a --- /dev/null +++ b/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts @@ -0,0 +1,276 @@ +import { describe, expect, it, vi } from "vitest" + +import { LGraphButton } from "@/LGraphButton" +import { LGraphCanvas } from "@/LGraphCanvas" +import { LGraphNode } from "@/LGraphNode" + +describe("LGraphNode Title Buttons", () => { + describe("addTitleButton", () => { + it("should add a title button to the node", () => { + const node = new LGraphNode("Test Node") + + const button = node.addTitleButton({ + name: "test_button", + text: "X", + fgColor: "#FF0000", + }) + + expect(button).toBeInstanceOf(LGraphButton) + expect(button.name).toBe("test_button") + expect(button.text).toBe("X") + expect(button.fgColor).toBe("#FF0000") + expect(node.title_buttons).toHaveLength(1) + expect(node.title_buttons[0]).toBe(button) + }) + + it("should add multiple title buttons", () => { + const node = new LGraphNode("Test Node") + + const button1 = node.addTitleButton({ name: "button1", text: "A" }) + const button2 = node.addTitleButton({ name: "button2", text: "B" }) + const button3 = node.addTitleButton({ name: "button3", text: "C" }) + + expect(node.title_buttons).toHaveLength(3) + expect(node.title_buttons[0]).toBe(button1) + expect(node.title_buttons[1]).toBe(button2) + expect(node.title_buttons[2]).toBe(button3) + }) + + it("should create buttons with default options", () => { + const node = new LGraphNode("Test Node") + + const button = node.addTitleButton({}) + + expect(button).toBeInstanceOf(LGraphButton) + expect(button.name).toBeUndefined() + expect(node.title_buttons).toHaveLength(1) + }) + }) + + describe("onMouseDown with title buttons", () => { + it("should handle click on title button", () => { + const node = new LGraphNode("Test Node") + node.pos = [100, 200] + node.size = [180, 60] + + const button = node.addTitleButton({ + name: "close_button", + text: "X", + visible: true, + }) + + // Mock button dimensions + button.getWidth = vi.fn().mockReturnValue(20) + button.height = 16 + + // Simulate button being drawn to populate _last_area + // Button is drawn at node-relative coordinates + // Button x: node.size[0] - 5 - button_width = 180 - 5 - 20 = 155 + // Button y: -LiteGraph.NODE_TITLE_HEIGHT = -30 + button._last_area[0] = 155 + button._last_area[1] = -30 + button._last_area[2] = 20 + button._last_area[3] = 16 + + const canvas = { + ctx: {} as CanvasRenderingContext2D, + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + const event = { + canvasX: 265, // node.pos[0] + node.size[0] - 5 - button_width = 100 + 180 - 5 - 20 = 255, click in middle = 265 + canvasY: 178, // node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT + 8 = 200 - 30 + 8 = 178 + } as any + + // Calculate node-relative position for the click + const clickPosRelativeToNode: [number, number] = [ + 265 - node.pos[0], // 265 - 100 = 165 + 178 - node.pos[1], // 178 - 200 = -22 + ] + + // Simulate the click - onMouseDown should detect button click + const handled = node.onMouseDown(event, clickPosRelativeToNode, canvas) + + expect(handled).toBe(true) + expect(canvas.dispatch).toHaveBeenCalledWith("litegraph:node-title-button-clicked", { + node: node, + button: button, + }) + }) + + it("should not handle click outside title buttons", () => { + const node = new LGraphNode("Test Node") + node.pos = [100, 200] + node.size = [180, 60] + + const button = node.addTitleButton({ + name: "test_button", + text: "T", + visible: true, + }) + + button.getWidth = vi.fn().mockReturnValue(20) + button.height = 16 + + // Simulate button being drawn at node-relative coordinates + button._last_area[0] = 155 // 180 - 5 - 20 + button._last_area[1] = -30 // -NODE_TITLE_HEIGHT + button._last_area[2] = 20 + button._last_area[3] = 16 + + const canvas = { + ctx: {} as CanvasRenderingContext2D, + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + const event = { + canvasX: 150, // Click in the middle of the node, not on button + canvasY: 180, + } as any + + // Calculate node-relative position + const clickPosRelativeToNode: [number, number] = [ + 150 - node.pos[0], // 150 - 100 = 50 + 180 - node.pos[1], // 180 - 200 = -20 + ] + + const handled = node.onMouseDown(event, clickPosRelativeToNode, canvas) + + expect(handled).toBe(false) + expect(canvas.dispatch).not.toHaveBeenCalled() + }) + + it("should handle multiple buttons correctly", () => { + const node = new LGraphNode("Test Node") + node.pos = [100, 200] + node.size = [200, 60] + + const button1 = node.addTitleButton({ + name: "button1", + text: "A", + visible: true, + }) + + const button2 = node.addTitleButton({ + name: "button2", + text: "B", + visible: true, + }) + + // Mock button dimensions + button1.getWidth = vi.fn().mockReturnValue(20) + button2.getWidth = vi.fn().mockReturnValue(20) + button1.height = button2.height = 16 + + // Simulate buttons being drawn at node-relative coordinates + // First button (rightmost): 200 - 5 - 20 = 175 + button1._last_area[0] = 175 + button1._last_area[1] = -30 // -NODE_TITLE_HEIGHT + button1._last_area[2] = 20 + button1._last_area[3] = 16 + + // Second button: 175 - 5 - 20 = 150 + button2._last_area[0] = 150 + button2._last_area[1] = -30 // -NODE_TITLE_HEIGHT + button2._last_area[2] = 20 + button2._last_area[3] = 16 + + const canvas = { + ctx: {} as CanvasRenderingContext2D, + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + // Click on second button (leftmost, since they're right-aligned) + const titleY = 170 + 8 // node.pos[1] - NODE_TITLE_HEIGHT + 8 = 200 - 30 + 8 = 178 + const event = { + canvasX: 255, // First button at: 100 + 200 - 5 - 20 = 275, Second button at: 275 - 5 - 20 = 250, click in middle = 255 + canvasY: titleY, + } as any + + // Calculate node-relative position + const clickPosRelativeToNode: [number, number] = [ + 255 - node.pos[0], // 255 - 100 = 155 + titleY - node.pos[1], // 178 - 200 = -22 + ] + + const handled = node.onMouseDown(event, clickPosRelativeToNode, canvas) + + expect(handled).toBe(true) + expect(canvas.dispatch).toHaveBeenCalledWith("litegraph:node-title-button-clicked", { + node: node, + button: button2, + }) + }) + + it("should skip invisible buttons", () => { + const node = new LGraphNode("Test Node") + node.pos = [100, 200] + node.size = [180, 60] + + const button1 = node.addTitleButton({ + name: "invisible_button", + text: "", // Empty text makes it invisible + }) + + const button2 = node.addTitleButton({ + name: "visible_button", + text: "V", + }) + + button1.getWidth = vi.fn().mockReturnValue(20) + button2.getWidth = vi.fn().mockReturnValue(20) + button1.height = button2.height = 16 + + // Simulate buttons being drawn at node-relative coordinates + // Only visible button gets drawn area + button2._last_area[0] = 155 // 180 - 5 - 20 + button2._last_area[1] = -30 // -NODE_TITLE_HEIGHT + button2._last_area[2] = 20 + button2._last_area[3] = 16 + + const canvas = { + ctx: {} as CanvasRenderingContext2D, + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + // Click where the visible button is (invisible button is skipped) + const titleY = 178 // node.pos[1] - NODE_TITLE_HEIGHT + 8 = 200 - 30 + 8 = 178 + const event = { + canvasX: 265, // Visible button at: 100 + 180 - 5 - 20 = 255, click in middle = 265 + canvasY: titleY, + } as any + + // Calculate node-relative position + const clickPosRelativeToNode: [number, number] = [ + 265 - node.pos[0], // 265 - 100 = 165 + titleY - node.pos[1], // 178 - 200 = -22 + ] + + const handled = node.onMouseDown(event, clickPosRelativeToNode, canvas) + + expect(handled).toBe(true) + expect(canvas.dispatch).toHaveBeenCalledWith("litegraph:node-title-button-clicked", { + node: node, + button: button2, // Should click visible button, not invisible + }) + }) + }) + + describe("onTitleButtonClick", () => { + it("should dispatch litegraph:node-title-button-clicked event", () => { + const node = new LGraphNode("Test Node") + const button = new LGraphButton({ name: "test_button" }) + + const canvas = { + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + node.onTitleButtonClick(button, canvas) + + expect(canvas.dispatch).toHaveBeenCalledWith("litegraph:node-title-button-clicked", { + node: node, + button: button, + }) + }) + }) +}) diff --git a/src/lib/litegraph/test/LGraph_constructor.test.ts b/src/lib/litegraph/test/LGraph_constructor.test.ts new file mode 100644 index 0000000000..f9df1bdc0f --- /dev/null +++ b/src/lib/litegraph/test/LGraph_constructor.test.ts @@ -0,0 +1,15 @@ +import { describe } from "vitest" + +import { LGraph } from "@/litegraph" + +import { dirtyTest } from "./testExtensions" + +describe("LGraph (constructor only)", () => { + dirtyTest("Matches previous snapshot", ({ expect, minimalSerialisableGraph, basicSerialisableGraph }) => { + const minLGraph = new LGraph(minimalSerialisableGraph) + expect(minLGraph).toMatchSnapshot("minLGraph") + + const basicLGraph = new LGraph(basicSerialisableGraph) + expect(basicLGraph).toMatchSnapshot("basicLGraph") + }) +}) diff --git a/src/lib/litegraph/test/LLink.test.ts b/src/lib/litegraph/test/LLink.test.ts new file mode 100644 index 0000000000..120dfe9d84 --- /dev/null +++ b/src/lib/litegraph/test/LLink.test.ts @@ -0,0 +1,17 @@ +import { describe, expect } from "vitest" + +import { LLink } from "@/litegraph" + +import { test } from "./testExtensions" + +describe("LLink", () => { + test("matches previous snapshot", () => { + const link = new LLink(1, "float", 4, 2, 5, 3) + expect(link.serialize()).toMatchSnapshot("Basic") + }) + + test("serializes to the previous snapshot", () => { + const link = new LLink(1, "float", 4, 2, 5, 3) + expect(link.serialize()).toMatchSnapshot("Basic") + }) +}) diff --git a/src/lib/litegraph/test/LinkConnector.integration.test.ts b/src/lib/litegraph/test/LinkConnector.integration.test.ts new file mode 100644 index 0000000000..ddfdd4cb52 --- /dev/null +++ b/src/lib/litegraph/test/LinkConnector.integration.test.ts @@ -0,0 +1,1067 @@ +import type { CanvasPointerEvent } from "@/types/events" + +import { afterEach, describe, expect, vi } from "vitest" + +import { LGraph, LGraphNode, LLink, Reroute, type RerouteId } from "@/litegraph" +import { LinkConnector } from "@/litegraph" + +import { test as baseTest } from "./testExtensions" + +interface TestContext { + graph: LGraph + connector: LinkConnector + setConnectingLinks: ReturnType + createTestNode: (id: number) => LGraphNode + reroutesBeforeTest: [rerouteId: RerouteId, reroute: Reroute][] + validateIntegrityNoChanges: () => void + validateIntegrityFloatingRemoved: () => void + validateLinkIntegrity: () => void + getNextLinkIds: (linkIds: Set, expectedExtraLinks?: number) => number[] + readonly floatingReroute: Reroute +} + +const test = baseTest.extend({ + reroutesBeforeTest: async ({ reroutesComplexGraph }, use) => { + await use([...reroutesComplexGraph.reroutes]) + }, + + graph: async ({ reroutesComplexGraph }, use) => { + const ctx = vi.fn(() => ({ measureText: vi.fn(() => ({ width: 10 })) })) + for (const node of reroutesComplexGraph.nodes) { + node.updateArea(ctx() as unknown as CanvasRenderingContext2D) + } + await use(reroutesComplexGraph) + }, + setConnectingLinks: async ({}, use: (mock: ReturnType) => Promise) => { + const mock = vi.fn() + await use(mock) + }, + connector: async ({ setConnectingLinks }, use) => { + const connector = new LinkConnector(setConnectingLinks) + await use(connector) + }, + createTestNode: async ({ graph }, use) => { + await use((id): LGraphNode => { + const node = new LGraphNode("test") + node.id = id + graph.add(node) + return node + }) + }, + + validateIntegrityNoChanges: async ({ graph, reroutesBeforeTest, expect }, use) => { + await use(() => { + expect(graph.floatingLinks.size).toBe(1) + expect([...graph.reroutes]).toEqual(reroutesBeforeTest) + + // Only the original reroute should be floating + const reroutesExceptOne = [...graph.reroutes.values()].filter(reroute => reroute.id !== 1) + for (const reroute of reroutesExceptOne) { + expect(reroute.floating).toBeUndefined() + } + }) + }, + + validateIntegrityFloatingRemoved: async ({ graph, reroutesBeforeTest, expect }, use) => { + await use(() => { + expect(graph.floatingLinks.size).toBe(0) + expect([...graph.reroutes]).toEqual(reroutesBeforeTest) + + for (const reroute of graph.reroutes.values()) { + expect(reroute.floating).toBeUndefined() + } + }) + }, + + validateLinkIntegrity: async ({ graph, expect }, use) => { + await use(() => { + for (const reroute of graph.reroutes.values()) { + if (reroute.origin_id === undefined) { + expect(reroute.linkIds.size).toBe(0) + expect(reroute.floatingLinkIds.size).toBeGreaterThan(0) + } + + for (const linkId of reroute.linkIds) { + const link = graph.links.get(linkId) + expect(link).toBeDefined() + expect(link!.origin_id).toEqual(reroute.origin_id) + expect(link!.origin_slot).toEqual(reroute.origin_slot) + } + for (const linkId of reroute.floatingLinkIds) { + const link = graph.floatingLinks.get(linkId) + expect(link).toBeDefined() + + if (link!.target_id === -1) { + expect(link!.origin_id).not.toBe(-1) + expect(link!.origin_slot).not.toBe(-1) + expect(link!.target_slot).toBe(-1) + } else { + expect(link!.origin_id).toBe(-1) + expect(link!.origin_slot).toBe(-1) + expect(link!.target_slot).not.toBe(-1) + } + } + } + + // Check that all link references are valid (Can be found in the graph) + for (const node of graph.nodes.values()) { + for (const input of node.inputs) { + if (input.link) { + expect(graph.links.keys()).toContain(input.link) + expect(graph.links.get(input.link)?.target_id).toBe(node.id) + } + } + for (const output of node.outputs) { + for (const linkId of output.links ?? []) { + expect(graph.links.keys()).toContain(linkId) + expect(graph.links.get(linkId)?.origin_id).toBe(node.id) + } + } + } + + for (const link of graph._links.values()) { + expect(graph.getNodeById(link!.origin_id)?.outputs[link!.origin_slot].links).toContain(link.id) + expect(graph.getNodeById(link!.target_id)?.inputs[link!.target_slot].link).toBe(link.id) + } + + for (const link of graph.floatingLinks.values()) { + if (link.target_id === -1) { + expect(link.origin_id).not.toBe(-1) + expect(link.origin_slot).not.toBe(-1) + expect(link.target_slot).toBe(-1) + const outputFloatingLinks = graph.getNodeById(link.origin_id)?.outputs[link.origin_slot]._floatingLinks + expect(outputFloatingLinks).toBeDefined() + expect(outputFloatingLinks).toContain(link) + } else { + expect(link.origin_id).toBe(-1) + expect(link.origin_slot).toBe(-1) + expect(link.target_slot).not.toBe(-1) + const inputFloatingLinks = graph.getNodeById(link.target_id)?.inputs[link.target_slot]._floatingLinks + expect(inputFloatingLinks).toBeDefined() + expect(inputFloatingLinks).toContain(link) + } + } + }) + }, + + getNextLinkIds: async ({ graph }, use) => { + await use((linkIds, expectedExtraLinks = 0) => { + const indexes = [...new Array(linkIds.size + expectedExtraLinks).keys()] + return indexes.map(index => graph.last_link_id + index + 1) + }) + }, + + floatingReroute: async ({ graph, expect }, use) => { + const floatingReroute = graph.reroutes.get(1)! + expect(floatingReroute.floating).toEqual({ slotType: "output" }) + await use(floatingReroute) + }, +}) + +function mockedNodeTitleDropEvent(node: LGraphNode): CanvasPointerEvent { + return { + canvasX: node.pos[0] + node.size[0] / 2, + canvasY: node.pos[1] + 16, + } as any +} + +function mockedInputDropEvent(node: LGraphNode, slot: number): CanvasPointerEvent { + const pos = node.getInputPos(slot) + return { + canvasX: pos[0], + canvasY: pos[1], + } as any +} + +function mockedOutputDropEvent(node: LGraphNode, slot: number): CanvasPointerEvent { + const pos = node.getOutputPos(slot) + return { + canvasX: pos[0], + canvasY: pos[1], + } as any +} + +describe("LinkConnector Integration", () => { + afterEach(({ validateLinkIntegrity }) => { + validateLinkIntegrity() + }) + + describe("Moving input links", () => { + test("Should move input links", ({ graph, connector }) => { + const nextLinkId = graph.last_link_id + 1 + + const hasInputNode = graph.getNodeById(2)! + const disconnectedNode = graph.getNodeById(9)! + + const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!) + + connector.moveInputLink(graph, hasInputNode.inputs[0]) + expect(connector.state.connectingTo).toBe("input") + expect(connector.state.draggingExistingLinks).toBe(true) + expect(connector.renderLinks.length).toBe(1) + expect(connector.inputLinks.length).toBe(1) + + const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2 + const canvasY = disconnectedNode.pos[1] + 16 + const dropEvent = { canvasX, canvasY } as any + + // Drop links, ensure reset has not been run + connector.dropLinks(graph, dropEvent) + expect(connector.renderLinks.length).toBe(1) + + // Test reset + connector.reset() + expect(connector.renderLinks.length).toBe(0) + expect(connector.inputLinks.length).toBe(0) + + expect(disconnectedNode.inputs[0].link).toBe(nextLinkId) + expect(hasInputNode.inputs[0].link).toBeNull() + + const reroutesAfter = LLink.getReroutes(graph, graph.links.get(disconnectedNode.inputs[0].link!)!) + expect(reroutesAfter).toEqual(reroutesBefore) + }) + + test("Should connect from floating reroutes", ({ graph, connector, reroutesBeforeTest }) => { + const nextLinkId = graph.last_link_id + 1 + + const floatingLink = graph.floatingLinks.values().next().value! + expect(floatingLink).toBeInstanceOf(LLink) + const floatingReroute = graph.reroutes.get(floatingLink.parentId!)! + + const disconnectedNode = graph.getNodeById(9)! + connector.dragFromReroute(graph, floatingReroute) + + expect(connector.state.connectingTo).toBe("input") + expect(connector.state.draggingExistingLinks).toBe(false) + expect(connector.renderLinks.length).toBe(1) + expect(connector.inputLinks.length).toBe(0) + + const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2 + const canvasY = disconnectedNode.pos[1] + 16 + const dropEvent = { canvasX, canvasY } as any + + connector.dropLinks(graph, dropEvent) + connector.reset() + expect(connector.renderLinks.length).toBe(0) + expect(connector.inputLinks.length).toBe(0) + + // New link should have been created + expect(disconnectedNode.inputs[0].link).toBe(nextLinkId) + + // Check graph integrity + expect(graph.floatingLinks.size).toBe(0) + expect([...graph.reroutes]).toEqual(reroutesBeforeTest) + + // All reroute floating property should be cleared + for (const reroute of graph.reroutes.values()) { + expect(reroute.floating).toBeUndefined() + } + }) + + test("Should drop floating links when both sides are disconnected", ({ graph, reroutesBeforeTest }) => { + expect(graph.floatingLinks.size).toBe(1) + + const floatingOutNode = graph.getNodeById(1)! + floatingOutNode.disconnectOutput(0) + + // Should have lost one reroute + expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1) + expect(graph.reroutes.get(1)).toBeUndefined() + + // The two normal links should now be floating + expect(graph.floatingLinks.size).toBe(2) + + graph.getNodeById(2)!.disconnectInput(0, true) + expect(graph.floatingLinks.size).toBe(1) + + graph.getNodeById(3)!.disconnectInput(0, false) + expect(graph.floatingLinks.size).toBe(0) + + // Removed 4 reroutes + expect(graph.reroutes.size).toBe(9) + + // All four nodes should have no links + for (const nodeId of [1, 2, 3, 9]) { + const { inputs: [input], outputs: [output] } = graph.getNodeById(nodeId)! + + expect(input.link).toBeNull() + expect(output.links?.length).toBeOneOf([0, undefined]) + + expect(input._floatingLinks?.size).toBeOneOf([0, undefined]) + expect(output._floatingLinks?.size).toBeOneOf([0, undefined]) + } + }) + + test("Should prevent node loopback when dropping on node", ({ graph, connector }) => { + const hasOutputNode = graph.getNodeById(1)! + const hasInputNode = graph.getNodeById(2)! + const hasInputNode2 = graph.getNodeById(3)! + + const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!) + + const atOutputNodeEvent = mockedNodeTitleDropEvent(hasOutputNode) + + connector.moveInputLink(graph, hasInputNode.inputs[0]) + connector.dropLinks(graph, atOutputNodeEvent) + connector.reset() + + const outputNodes = hasOutputNode.getOutputNodes(0) + expect(outputNodes).toEqual([hasInputNode, hasInputNode2]) + + const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!) + expect(reroutesAfter).toEqual(reroutesBefore) + }) + + test("Should prevent node loopback when dropping on input", ({ graph, connector }) => { + const hasOutputNode = graph.getNodeById(1)! + const hasInputNode = graph.getNodeById(2)! + + const originalOutputNodes = hasOutputNode.getOutputNodes(0) + const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!) + + const atHasOutputNode = mockedInputDropEvent(hasOutputNode, 0) + + connector.moveInputLink(graph, hasInputNode.inputs[0]) + connector.dropLinks(graph, atHasOutputNode) + connector.reset() + + const outputNodes = hasOutputNode.getOutputNodes(0) + expect(outputNodes).toEqual(originalOutputNodes) + + const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!) + expect(reroutesAfter).toEqual(reroutesBefore) + }) + }) + + describe("Moving output links", () => { + test("Should move output links", ({ graph, connector }) => { + const nextLinkIds = [graph.last_link_id + 1, graph.last_link_id + 2] + + const hasOutputNode = graph.getNodeById(1)! + const disconnectedNode = graph.getNodeById(9)! + + const reroutesBefore = hasOutputNode.outputs[0].links + ?.map(linkId => graph.links.get(linkId)!) + .map(link => LLink.getReroutes(graph, link)) + + connector.moveOutputLink(graph, hasOutputNode.outputs[0]) + expect(connector.state.connectingTo).toBe("output") + expect(connector.state.draggingExistingLinks).toBe(true) + expect(connector.renderLinks.length).toBe(3) + expect(connector.outputLinks.length).toBe(2) + expect(connector.floatingLinks.length).toBe(1) + + const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2 + const canvasY = disconnectedNode.pos[1] + 16 + const dropEvent = { canvasX, canvasY } as any + + connector.dropLinks(graph, dropEvent) + connector.reset() + expect(connector.renderLinks.length).toBe(0) + expect(connector.outputLinks.length).toBe(0) + + expect(disconnectedNode.outputs[0].links).toEqual(nextLinkIds) + expect(hasOutputNode.outputs[0].links).toEqual([]) + + const reroutesAfter = disconnectedNode.outputs[0].links + ?.map(linkId => graph.links.get(linkId)!) + .map(link => LLink.getReroutes(graph, link)) + + expect(reroutesAfter).toEqual(reroutesBefore) + }) + + test("Should connect to floating reroutes from outputs", ({ graph, connector, reroutesBeforeTest }) => { + const nextLinkIds = [graph.last_link_id + 1, graph.last_link_id + 2] + + const floatingOutNode = graph.getNodeById(1)! + floatingOutNode.disconnectOutput(0) + + // Should have lost one reroute + expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1) + expect(graph.reroutes.get(1)).toBeUndefined() + + // The two normal links should now be floating + expect(graph.floatingLinks.size).toBe(2) + + const disconnectedNode = graph.getNodeById(9)! + connector.dragNewFromOutput(graph, disconnectedNode, disconnectedNode.outputs[0]) + + expect(connector.state.connectingTo).toBe("input") + expect(connector.state.draggingExistingLinks).toBe(false) + expect(connector.renderLinks.length).toBe(1) + expect(connector.outputLinks.length).toBe(0) + expect(connector.floatingLinks.length).toBe(0) + + const floatingLink = graph.floatingLinks.values().next().value! + expect(floatingLink).toBeInstanceOf(LLink) + const floatingReroute = LLink.getReroutes(graph, floatingLink)[0] + + const canvasX = floatingReroute.pos[0] + const canvasY = floatingReroute.pos[1] + const dropEvent = { canvasX, canvasY } as any + + connector.dropLinks(graph, dropEvent) + connector.reset() + expect(connector.renderLinks.length).toBe(0) + expect(connector.outputLinks.length).toBe(0) + + // New link should have been created + expect(disconnectedNode.outputs[0].links).toEqual(nextLinkIds) + + // Check graph integrity + expect(graph.floatingLinks.size).toBe(0) + expect([...graph.reroutes]).toEqual(reroutesBeforeTest.slice(1)) + + for (const reroute of graph.reroutes.values()) { + expect(reroute.floating).toBeUndefined() + } + }) + + test("Should drop floating links when both sides are disconnected", ({ graph, reroutesBeforeTest }) => { + expect(graph.floatingLinks.size).toBe(1) + + graph.getNodeById(2)!.disconnectInput(0, true) + expect(graph.floatingLinks.size).toBe(1) + + // Only the original reroute should be floating + const reroutesExceptOne = [...graph.reroutes.values()].filter(reroute => reroute.id !== 1) + for (const reroute of reroutesExceptOne) { + expect(reroute.floating).toBeUndefined() + } + + graph.getNodeById(3)!.disconnectInput(0, true) + expect([...graph.reroutes]).toEqual(reroutesBeforeTest) + + // The normal link should now be floating + expect(graph.floatingLinks.size).toBe(2) + expect(graph.reroutes.get(3)!.floating).toEqual({ slotType: "output" }) + + const floatingOutNode = graph.getNodeById(1)! + floatingOutNode.disconnectOutput(0) + + // Should have lost one reroute + expect(graph.reroutes.size).toBe(9) + expect(graph.reroutes.get(1)).toBeUndefined() + + // Removed 4 reroutes + expect(graph.reroutes.size).toBe(9) + + // All four nodes should have no links + for (const nodeId of [1, 2, 3, 9]) { + const { inputs: [input], outputs: [output] } = graph.getNodeById(nodeId)! + + expect(input.link).toBeNull() + expect(output.links?.length).toBeOneOf([0, undefined]) + + expect(input._floatingLinks?.size).toBeOneOf([0, undefined]) + expect(output._floatingLinks?.size).toBeOneOf([0, undefined]) + } + }) + + test("Should support moving multiple output links to a floating reroute", ({ graph, connector, floatingReroute, validateIntegrityFloatingRemoved }) => { + const manyOutputsNode = graph.getNodeById(4)! + const canvasX = floatingReroute.pos[0] + const canvasY = floatingReroute.pos[1] + const floatingRerouteEvent = { canvasX, canvasY } as any + + connector.moveOutputLink(graph, manyOutputsNode.outputs[0]) + connector.dropLinks(graph, floatingRerouteEvent) + connector.reset() + + expect(manyOutputsNode.outputs[0].links).toEqual([]) + expect(floatingReroute.linkIds.size).toBe(4) + + validateIntegrityFloatingRemoved() + }) + + test("Should prevent dragging from an output to a child reroute", ({ graph, connector, floatingReroute }) => { + const manyOutputsNode = graph.getNodeById(4)! + + const reroute7 = graph.reroutes.get(7)! + const reroute10 = graph.reroutes.get(10)! + const reroute13 = graph.reroutes.get(13)! + + const canvasX = reroute7.pos[0] + const canvasY = reroute7.pos[1] + const reroute7Event = { canvasX, canvasY } as any + + const toSortedRerouteChain = (linkIds: number[]) => linkIds + .map(x => graph.links.get(x)!) + .map(x => LLink.getReroutes(graph, x)) + .sort((a, b) => a.at(-1)!.id - b.at(-1)!.id) + + const reroutesBefore = toSortedRerouteChain(manyOutputsNode.outputs[0].links!) + + connector.moveOutputLink(graph, manyOutputsNode.outputs[0]) + expect(connector.isRerouteValidDrop(reroute7)).toBe(false) + expect(connector.isRerouteValidDrop(reroute10)).toBe(false) + expect(connector.isRerouteValidDrop(reroute13)).toBe(false) + + // Prevent link disconnect when dropped on canvas (just for this test) + connector.events.addEventListener("dropped-on-canvas", e => e.preventDefault(), { once: true }) + connector.dropLinks(graph, reroute7Event) + connector.reset() + + const reroutesAfter = toSortedRerouteChain(manyOutputsNode.outputs[0].links!) + expect(reroutesAfter).toEqual(reroutesBefore) + + expect(graph.floatingLinks.size).toBe(1) + expect(floatingReroute.linkIds.size).toBe(0) + }) + + test("Should prevent node loopback when dropping on node", ({ graph, connector }) => { + const hasOutputNode = graph.getNodeById(1)! + const hasInputNode = graph.getNodeById(2)! + + const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!) + + const atInputNodeEvent = mockedNodeTitleDropEvent(hasInputNode) + + connector.moveOutputLink(graph, hasOutputNode.outputs[0]) + connector.dropLinks(graph, atInputNodeEvent) + connector.reset() + + expect(hasOutputNode.getOutputNodes(0)).toEqual([hasInputNode]) + expect(hasInputNode.getOutputNodes(0)).toEqual([graph.getNodeById(3)]) + + // Moved link should have the same reroutes + const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.outputs[0].links![0])!) + expect(reroutesAfter).toEqual(reroutesBefore) + + // Link recreated to avoid loopback should have no reroutes + const reroutesAfter2 = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!) + expect(reroutesAfter2).toEqual([]) + }) + + test("Should prevent node loopback when dropping on output", ({ graph, connector }) => { + const hasOutputNode = graph.getNodeById(1)! + const hasInputNode = graph.getNodeById(2)! + + const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!) + + const atInputNodeOutSlot = mockedOutputDropEvent(hasInputNode, 0) + + connector.moveOutputLink(graph, hasOutputNode.outputs[0]) + connector.dropLinks(graph, atInputNodeOutSlot) + connector.reset() + + expect(hasOutputNode.getOutputNodes(0)).toEqual([hasInputNode]) + expect(hasInputNode.getOutputNodes(0)).toEqual([graph.getNodeById(3)]) + + // Moved link should have the same reroutes + const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.outputs[0].links![0])!) + expect(reroutesAfter).toEqual(reroutesBefore) + + // Link recreated to avoid loopback should have no reroutes + const reroutesAfter2 = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!) + expect(reroutesAfter2).toEqual([]) + }) + }) + + describe("Floating links", () => { + test("Removed when connecting from reroute to input", ({ graph, connector, floatingReroute }) => { + const disconnectedNode = graph.getNodeById(9)! + const canvasX = disconnectedNode.pos[0] + const canvasY = disconnectedNode.pos[1] + + connector.dragFromReroute(graph, floatingReroute) + connector.dropLinks(graph, { canvasX, canvasY } as any) + connector.reset() + + expect(graph.floatingLinks.size).toBe(0) + expect(floatingReroute.floating).toBeUndefined() + }) + + test("Removed when connecting from reroute to another reroute", ({ graph, connector, floatingReroute, validateIntegrityFloatingRemoved }) => { + const reroute8 = graph.reroutes.get(8)! + const canvasX = reroute8.pos[0] + const canvasY = reroute8.pos[1] + + connector.dragFromReroute(graph, floatingReroute) + connector.dropLinks(graph, { canvasX, canvasY } as any) + connector.reset() + + expect(graph.floatingLinks.size).toBe(0) + expect(floatingReroute.floating).toBeUndefined() + expect(reroute8.floating).toBeUndefined() + + validateIntegrityFloatingRemoved() + }) + + test("Dropping a floating input link onto input slot disconnects the existing link", ({ graph, connector }) => { + const manyOutputsNode = graph.getNodeById(4)! + manyOutputsNode.disconnectOutput(0) + + const floatingInputNode = graph.getNodeById(6)! + const fromFloatingInput = floatingInputNode.inputs[0] + + const hasInputNode = graph.getNodeById(2)! + const toInput = hasInputNode.inputs[0] + + connector.moveInputLink(graph, fromFloatingInput) + const dropEvent = mockedInputDropEvent(hasInputNode, 0) + connector.dropLinks(graph, dropEvent) + connector.reset() + + expect(fromFloatingInput.link).toBeNull() + expect(fromFloatingInput._floatingLinks?.size).toBe(0) + + expect(toInput.link).toBeNull() + expect(toInput._floatingLinks?.size).toBe(1) + }) + + test("Allow reroutes to be used as manual switches", ({ graph, connector, floatingReroute, validateIntegrityNoChanges }) => { + const rerouteWithTwoLinks = graph.reroutes.get(3)! + const targetNode = graph.getNodeById(2)! + + const targetDropEvent = mockedInputDropEvent(targetNode, 0) + + connector.dragFromReroute(graph, floatingReroute) + connector.dropLinks(graph, targetDropEvent) + connector.reset() + + // Link should have been moved to the floating reroute, and no floating links should remain + expect(rerouteWithTwoLinks.floating).toBeUndefined() + expect(floatingReroute.floating).toBeUndefined() + expect(rerouteWithTwoLinks.floatingLinkIds.size).toBe(0) + expect(floatingReroute.floatingLinkIds.size).toBe(0) + expect(rerouteWithTwoLinks.linkIds.size).toBe(1) + expect(floatingReroute.linkIds.size).toBe(1) + + // Move the link again + connector.dragFromReroute(graph, rerouteWithTwoLinks) + connector.dropLinks(graph, targetDropEvent) + connector.reset() + + // Everything should be back the way it was when we started + expect(rerouteWithTwoLinks.floating).toBeUndefined() + expect(floatingReroute.floating).toEqual({ slotType: "output" }) + expect(rerouteWithTwoLinks.floatingLinkIds.size).toBe(0) + expect(floatingReroute.floatingLinkIds.size).toBe(1) + expect(rerouteWithTwoLinks.linkIds.size).toBe(2) + expect(floatingReroute.linkIds.size).toBe(0) + + validateIntegrityNoChanges() + }) + }) + + test("Should drop floating links when both sides are disconnected", ({ graph, connector, reroutesBeforeTest, validateIntegrityNoChanges }) => { + const floatingOutNode = graph.getNodeById(1)! + connector.moveOutputLink(graph, floatingOutNode.outputs[0]) + + const manyOutputsNode = graph.getNodeById(4)! + const dropEvent = { canvasX: manyOutputsNode.pos[0], canvasY: manyOutputsNode.pos[1] } as any + connector.dropLinks(graph, dropEvent) + connector.reset() + + const output = manyOutputsNode.outputs[0] + expect(output.links!.length).toBe(6) + expect(output._floatingLinks!.size).toBe(1) + + validateIntegrityNoChanges() + + // Move again + connector.moveOutputLink(graph, manyOutputsNode.outputs[0]) + + const disconnectedNode = graph.getNodeById(9)! + dropEvent.canvasX = disconnectedNode.pos[0] + dropEvent.canvasY = disconnectedNode.pos[1] + connector.dropLinks(graph, dropEvent) + connector.reset() + + const newOutput = disconnectedNode.outputs[0] + expect(newOutput.links!.length).toBe(6) + expect(newOutput._floatingLinks!.size).toBe(1) + + validateIntegrityNoChanges() + + disconnectedNode.disconnectOutput(0) + + expect(newOutput._floatingLinks!.size).toBe(0) + expect(graph.floatingLinks.size).toBe(6) + + // The final reroutes should all be floating + for (const reroute of graph.reroutes.values()) { + if ([3, 7, 15, 12].includes(reroute.id)) { + expect(reroute.floating).toEqual({ slotType: "input" }) + } else { + expect(reroute.floating).toBeUndefined() + } + } + + // Removed one reroute + expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1) + + // Original nodes should have no links + for (const nodeId of [1, 4]) { + const { inputs: [input], outputs: [output] } = graph.getNodeById(nodeId)! + + expect(input.link).toBeNull() + expect(output.links?.length).toBeOneOf([0, undefined]) + + expect(input._floatingLinks?.size).toBeOneOf([0, undefined]) + expect(output._floatingLinks?.size).toBeOneOf([0, undefined]) + } + }) + + type TestData = { + /** Drop link on this reroute */ + targetRerouteId: number + /** Parent reroutes of the target reroute */ + parentIds: number[] + /** Number of links before the drop */ + linksBefore: number[] + /** Number of links after the drop */ + linksAfter: (number | undefined)[] + /** Whether to run the integrity check */ + runIntegrityCheck: boolean + } + + test.for([ + { + targetRerouteId: 8, + parentIds: [13, 10], + linksBefore: [3, 4], + linksAfter: [1, 2], + runIntegrityCheck: true, + }, + { + targetRerouteId: 7, + parentIds: [6, 8, 13, 10], + linksBefore: [2, 2, 3, 4], + linksAfter: [undefined, undefined, 1, 2], + runIntegrityCheck: false, + }, + { + targetRerouteId: 6, + parentIds: [8, 13, 10], + linksBefore: [2, 3, 4], + linksAfter: [undefined, 1, 2], + runIntegrityCheck: false, + }, + { + targetRerouteId: 13, + parentIds: [10], + linksBefore: [4], + linksAfter: [1], + runIntegrityCheck: true, + }, + { + targetRerouteId: 4, + parentIds: [], + linksBefore: [], + linksAfter: [], + runIntegrityCheck: true, + }, + { + targetRerouteId: 2, + parentIds: [4], + linksBefore: [2], + linksAfter: [undefined], + runIntegrityCheck: false, + }, + { + targetRerouteId: 3, + parentIds: [2, 4], + linksBefore: [2, 2], + linksAfter: [0, 0], + runIntegrityCheck: true, + }, + ])("Should allow reconnect from output to any reroute", ( + { targetRerouteId, parentIds, linksBefore, linksAfter, runIntegrityCheck }, + { graph, connector, validateIntegrityNoChanges, getNextLinkIds }, + ) => { + const linkCreatedCallback = vi.fn() + connector.listenUntilReset("link-created", linkCreatedCallback) + + const disconnectedNode = graph.getNodeById(9)! + + // Parent reroutes of the target reroute + for (const [index, parentId] of parentIds.entries()) { + const reroute = graph.reroutes.get(parentId)! + expect(reroute.linkIds.size).toBe(linksBefore[index]) + } + + const targetReroute = graph.reroutes.get(targetRerouteId)! + const nextLinkIds = getNextLinkIds(targetReroute.linkIds) + const dropEvent = { canvasX: targetReroute.pos[0], canvasY: targetReroute.pos[1] } as any + + connector.dragNewFromOutput(graph, disconnectedNode, disconnectedNode.outputs[0]) + connector.dropLinks(graph, dropEvent) + connector.reset() + + expect(disconnectedNode.outputs[0].links).toEqual(nextLinkIds) + expect([...targetReroute.linkIds.values()]).toEqual(nextLinkIds) + + // Parent reroutes should have lost the links or been removed + for (const [index, parentId] of parentIds.entries()) { + const reroute = graph.reroutes.get(parentId)! + if (linksAfter[index] === undefined) { + expect(reroute).not.toBeUndefined() + } else { + expect(reroute.linkIds.size).toBe(linksAfter[index]) + } + } + + expect(linkCreatedCallback).toHaveBeenCalledTimes(nextLinkIds.length) + + if (runIntegrityCheck) { + validateIntegrityNoChanges() + } + }) + + type ReconnectTestData = { + /** Drag link from this reroute */ + fromRerouteId: number + /** Drop link on this reroute */ + toRerouteId: number + /** Reroute IDs that should be removed from the resultant reroute chain */ + shouldBeRemoved: number[] + /** Reroutes that should have NONE of the link IDs that toReroute has */ + shouldHaveLinkIdsRemoved: number[] + /** Whether to test floating inputs */ + testFloatingInputs?: true + /** Number of expected extra links to be created */ + expectedExtraLinks?: number + } + + test.for([ + { + fromRerouteId: 10, + toRerouteId: 15, + shouldBeRemoved: [14], + shouldHaveLinkIdsRemoved: [13, 8, 6, 7], + }, + { + fromRerouteId: 8, + toRerouteId: 2, + shouldBeRemoved: [4], + shouldHaveLinkIdsRemoved: [], + }, + { + fromRerouteId: 3, + toRerouteId: 12, + shouldBeRemoved: [11], + shouldHaveLinkIdsRemoved: [10, 13, 14, 15, 8, 6, 7], + }, + { + fromRerouteId: 15, + toRerouteId: 7, + shouldBeRemoved: [8, 6], + shouldHaveLinkIdsRemoved: [], + }, + { + fromRerouteId: 1, + toRerouteId: 7, + shouldBeRemoved: [8, 6], + shouldHaveLinkIdsRemoved: [], + }, + { + fromRerouteId: 1, + toRerouteId: 10, + shouldBeRemoved: [], + shouldHaveLinkIdsRemoved: [], + }, + { + fromRerouteId: 4, + toRerouteId: 8, + shouldBeRemoved: [], + shouldHaveLinkIdsRemoved: [], + testFloatingInputs: true, + expectedExtraLinks: 2, + }, + { + fromRerouteId: 2, + toRerouteId: 12, + shouldBeRemoved: [11], + shouldHaveLinkIdsRemoved: [], + testFloatingInputs: true, + expectedExtraLinks: 1, + }, + ])("Should allow connecting from reroutes to another reroute", ( + { fromRerouteId, toRerouteId, shouldBeRemoved, shouldHaveLinkIdsRemoved, testFloatingInputs, expectedExtraLinks }, + { graph, connector, getNextLinkIds }, + ) => { + if (testFloatingInputs) { + // Start by disconnecting the output of the 3x3 array of reroutes + graph.getNodeById(4)!.disconnectOutput(0) + } + + const fromReroute = graph.reroutes.get(fromRerouteId)! + const toReroute = graph.reroutes.get(toRerouteId)! + const nextLinkIds = getNextLinkIds(toReroute.linkIds, expectedExtraLinks) + + const originalParentChain = LLink.getReroutes(graph, toReroute) + + const sortAndJoin = (numbers: Iterable) => [...numbers].sort().join(",") + const hasIdenticalLinks = (a: Reroute, b: Reroute) => + sortAndJoin(a.linkIds) === sortAndJoin(b.linkIds) && + sortAndJoin(a.floatingLinkIds) === sortAndJoin(b.floatingLinkIds) + + // Sanity check shouldBeRemoved + const reroutesWithIdenticalLinkIds = originalParentChain.filter(parent => hasIdenticalLinks(parent, toReroute)) + expect(reroutesWithIdenticalLinkIds.map(reroute => reroute.id)).toEqual(shouldBeRemoved) + + connector.dragFromReroute(graph, fromReroute) + + const dropEvent = { canvasX: toReroute.pos[0], canvasY: toReroute.pos[1] } as any + connector.dropLinks(graph, dropEvent) + connector.reset() + + const newParentChain = LLink.getReroutes(graph, toReroute) + for (const rerouteId of shouldBeRemoved) { + expect(originalParentChain.map(reroute => reroute.id)).toContain(rerouteId) + expect(newParentChain.map(reroute => reroute.id)).not.toContain(rerouteId) + } + + expect([...toReroute.linkIds.values()]).toEqual(nextLinkIds) + + for (const rerouteId of shouldBeRemoved) { + const reroute = graph.reroutes.get(rerouteId)! + if (testFloatingInputs) { + // Already-floating reroutes should be removed + expect(reroute).toBeUndefined() + } else { + // Non-floating reroutes should still exist + expect(reroute).not.toBeUndefined() + } + } + + for (const rerouteId of shouldHaveLinkIdsRemoved) { + const reroute = graph.reroutes.get(rerouteId)! + for (const linkId of toReroute.linkIds) { + expect(reroute.linkIds).not.toContain(linkId) + } + } + + // Validate all links in a reroute share the same origin + for (const reroute of graph.reroutes.values()) { + for (const linkId of reroute.linkIds) { + const link = graph.links.get(linkId) + expect(link?.origin_id).toEqual(reroute.origin_id) + expect(link?.origin_slot).toEqual(reroute.origin_slot) + } + for (const linkId of reroute.floatingLinkIds) { + if (reroute.origin_id === undefined) continue + + const link = graph.floatingLinks.get(linkId) + expect(link?.origin_id).toEqual(reroute.origin_id) + expect(link?.origin_slot).toEqual(reroute.origin_slot) + } + } + }) + + test.for([ + { from: 8, to: 13 }, + { from: 7, to: 13 }, + { from: 6, to: 13 }, + { from: 13, to: 10 }, + { from: 14, to: 10 }, + { from: 15, to: 10 }, + { from: 14, to: 13 }, + { from: 10, to: 10 }, + ])("Connecting reroutes to invalid targets should do nothing", ( + { from, to }, + { graph, connector, validateIntegrityNoChanges }, + ) => { + const listener = vi.fn() + connector.listenUntilReset("link-created", listener) + + const fromReroute = graph.reroutes.get(from)! + const toReroute = graph.reroutes.get(to)! + + const dropEvent = { canvasX: toReroute.pos[0], canvasY: toReroute.pos[1] } as any + + connector.dragFromReroute(graph, fromReroute) + connector.dropLinks(graph, dropEvent) + connector.reset() + + expect(listener).not.toHaveBeenCalled() + validateIntegrityNoChanges() + }) + + const nodeReroutePairs = [ + { nodeId: 1, rerouteId: 1 }, + { nodeId: 1, rerouteId: 3 }, + { nodeId: 1, rerouteId: 4 }, + { nodeId: 1, rerouteId: 2 }, + { nodeId: 4, rerouteId: 7 }, + { nodeId: 4, rerouteId: 6 }, + { nodeId: 4, rerouteId: 8 }, + { nodeId: 4, rerouteId: 10 }, + { nodeId: 4, rerouteId: 12 }, + ] + test.for(nodeReroutePairs)("Should ignore connections from input to same node via reroutes", ( + { nodeId, rerouteId }, + { graph, connector, validateIntegrityNoChanges }, + ) => { + const listener = vi.fn() + connector.listenUntilReset("link-created", listener) + + const node = graph.getNodeById(nodeId)! + const input = node.inputs[0] + const reroute = graph.getReroute(rerouteId)! + const dropEvent = { canvasX: reroute.pos[0], canvasY: reroute.pos[1] } as any + + connector.dragNewFromInput(graph, node, input) + connector.dropLinks(graph, dropEvent) + connector.reset() + + expect(listener).not.toHaveBeenCalled() + validateIntegrityNoChanges() + + // No links should have the same origin_id and target_id + for (const link of graph.links.values()) { + expect(link.origin_id).not.toEqual(link.target_id) + } + }) + + test.for(nodeReroutePairs)("Should ignore connections looping back to the origin node from a reroute", ( + { nodeId, rerouteId }, + { graph, connector, validateIntegrityNoChanges }, + ) => { + const listener = vi.fn() + connector.listenUntilReset("link-created", listener) + + const node = graph.getNodeById(nodeId)! + const reroute = graph.getReroute(rerouteId)! + const dropEvent = { canvasX: node.pos[0], canvasY: node.pos[1] } as any + + connector.dragFromReroute(graph, reroute) + connector.dropLinks(graph, dropEvent) + connector.reset() + + expect(listener).not.toHaveBeenCalled() + validateIntegrityNoChanges() + + // No links should have the same origin_id and target_id + for (const link of graph.links.values()) { + expect(link.origin_id).not.toEqual(link.target_id) + } + }) + + test.for(nodeReroutePairs)("Should ignore connections looping back to the origin node input from a reroute", ( + { nodeId, rerouteId }, + { graph, connector, validateIntegrityNoChanges }, + ) => { + const listener = vi.fn() + connector.listenUntilReset("link-created", listener) + + const node = graph.getNodeById(nodeId)! + const reroute = graph.getReroute(rerouteId)! + const inputPos = node.getInputPos(0) + const dropOnInputEvent = { canvasX: inputPos[0], canvasY: inputPos[1] } as any + + connector.dragFromReroute(graph, reroute) + connector.dropLinks(graph, dropOnInputEvent) + connector.reset() + + expect(listener).not.toHaveBeenCalled() + validateIntegrityNoChanges() + + // No links should have the same origin_id and target_id + for (const link of graph.links.values()) { + expect(link.origin_id).not.toEqual(link.target_id) + } + }) +}) diff --git a/src/lib/litegraph/test/LinkConnector.test.ts b/src/lib/litegraph/test/LinkConnector.test.ts new file mode 100644 index 0000000000..31437ba1fa --- /dev/null +++ b/src/lib/litegraph/test/LinkConnector.test.ts @@ -0,0 +1,277 @@ +import type { MovingInputLink } from "@/canvas/MovingInputLink" +import type { LinkNetwork } from "@/interfaces" +import type { ISlotType } from "@/interfaces" + +import { describe, expect, test as baseTest, vi } from "vitest" + +import { LinkConnector } from "@/canvas/LinkConnector" +import { ToInputRenderLink } from "@/canvas/ToInputRenderLink" +import { LGraph, LGraphNode, LLink, Reroute, type RerouteId } from "@/litegraph" +import { LinkDirection } from "@/types/globalEnums" + +interface TestContext { + network: LinkNetwork & { add(node: LGraphNode): void } + connector: LinkConnector + setConnectingLinks: ReturnType + createTestNode: (id: number, slotType?: ISlotType) => LGraphNode + createTestLink: (id: number, sourceId: number, targetId: number, slotType?: ISlotType) => LLink +} + +const test = baseTest.extend({ + network: async ({}, use) => { + const graph = new LGraph() + const floatingLinks = new Map() + const reroutes = new Map() + + await use({ + links: new Map(), + reroutes, + floatingLinks, + getLink: graph.getLink.bind(graph), + getNodeById: (id: number) => graph.getNodeById(id), + addFloatingLink: (link: LLink) => { + floatingLinks.set(link.id, link) + return link + }, + removeFloatingLink: (link: LLink) => floatingLinks.delete(link.id), + getReroute: ((id: RerouteId | null | undefined) => id == null ? undefined : reroutes.get(id)) as LinkNetwork["getReroute"], + removeReroute: (id: number) => reroutes.delete(id), + add: (node: LGraphNode) => graph.add(node), + }) + }, + + setConnectingLinks: async ({}, use: (mock: ReturnType) => Promise) => { + const mock = vi.fn() + await use(mock) + }, + connector: async ({ setConnectingLinks }, use) => { + const connector = new LinkConnector(setConnectingLinks) + await use(connector) + }, + + createTestNode: async ({ network }, use) => { + await use((id: number): LGraphNode => { + const node = new LGraphNode("test") + node.id = id + network.add(node) + return node + }) + }, + createTestLink: async ({ network }, use) => { + await use(( + id: number, + sourceId: number, + targetId: number, + slotType: ISlotType = "number", + ): LLink => { + const link = new LLink(id, slotType, sourceId, 0, targetId, 0) + network.links.set(link.id, link) + return link + }) + }, +}) + +describe("LinkConnector", () => { + test("should initialize with default state", ({ connector }) => { + expect(connector.state).toEqual({ + connectingTo: undefined, + multi: false, + draggingExistingLinks: false, + }) + expect(connector.renderLinks).toEqual([]) + expect(connector.inputLinks).toEqual([]) + expect(connector.outputLinks).toEqual([]) + expect(connector.hiddenReroutes.size).toBe(0) + }) + + describe("Moving Input Links", () => { + test("should handle moving input links", ({ network, connector, createTestNode }) => { + const sourceNode = createTestNode(1) + const targetNode = createTestNode(2) + + const slotType: ISlotType = "number" + sourceNode.addOutput("out", slotType) + targetNode.addInput("in", slotType) + + const link = new LLink(1, slotType, 1, 0, 2, 0) + network.links.set(link.id, link) + targetNode.inputs[0].link = link.id + + connector.moveInputLink(network, targetNode.inputs[0]) + + expect(connector.state.connectingTo).toBe("input") + expect(connector.state.draggingExistingLinks).toBe(true) + expect(connector.inputLinks).toContain(link) + expect(link._dragging).toBe(true) + }) + + test("should not move input link if already connecting", ({ connector, network }) => { + connector.state.connectingTo = "input" + + expect(() => { + connector.moveInputLink(network, { link: 1 } as any) + }).toThrow("Already dragging links.") + }) + }) + + describe("Moving Output Links", () => { + test("should handle moving output links", ({ network, connector, createTestNode }) => { + const sourceNode = createTestNode(1) + const targetNode = createTestNode(2) + + const slotType: ISlotType = "number" + sourceNode.addOutput("out", slotType) + targetNode.addInput("in", slotType) + + const link = new LLink(1, slotType, 1, 0, 2, 0) + network.links.set(link.id, link) + sourceNode.outputs[0].links = [link.id] + + connector.moveOutputLink(network, sourceNode.outputs[0]) + + expect(connector.state.connectingTo).toBe("output") + expect(connector.state.draggingExistingLinks).toBe(true) + expect(connector.state.multi).toBe(true) + expect(connector.outputLinks).toContain(link) + expect(link._dragging).toBe(true) + }) + + test("should not move output link if already connecting", ({ connector, network }) => { + connector.state.connectingTo = "output" + + expect(() => { + connector.moveOutputLink(network, { links: [1] } as any) + }).toThrow("Already dragging links.") + }) + }) + + describe("Dragging New Links", () => { + test("should handle dragging new link from output", ({ network, connector, createTestNode }) => { + const sourceNode = createTestNode(1) + const slotType: ISlotType = "number" + sourceNode.addOutput("out", slotType) + + connector.dragNewFromOutput(network, sourceNode, sourceNode.outputs[0]) + + expect(connector.state.connectingTo).toBe("input") + expect(connector.renderLinks.length).toBe(1) + expect(connector.state.draggingExistingLinks).toBe(false) + }) + + test("should handle dragging new link from input", ({ network, connector, createTestNode }) => { + const targetNode = createTestNode(1) + const slotType: ISlotType = "number" + targetNode.addInput("in", slotType) + + connector.dragNewFromInput(network, targetNode, targetNode.inputs[0]) + + expect(connector.state.connectingTo).toBe("output") + expect(connector.renderLinks.length).toBe(1) + expect(connector.state.draggingExistingLinks).toBe(false) + }) + }) + + describe("Dragging from reroutes", () => { + test("should handle dragging from reroutes", ({ network, connector, createTestNode, createTestLink }) => { + const originNode = createTestNode(1) + const targetNode = createTestNode(2) + + const output = originNode.addOutput("out", "number") + targetNode.addInput("in", "number") + + const link = createTestLink(1, 1, 2) + const reroute = new Reroute(1, network, [0, 0], undefined, [link.id]) + network.reroutes.set(reroute.id, reroute) + link.parentId = reroute.id + + connector.dragFromReroute(network, reroute) + + expect(connector.state.connectingTo).toBe("input") + expect(connector.state.draggingExistingLinks).toBe(false) + expect(connector.renderLinks.length).toBe(1) + + const renderLink = connector.renderLinks[0] + expect(renderLink instanceof ToInputRenderLink).toBe(true) + expect(renderLink.toType).toEqual("input") + expect(renderLink.node).toEqual(originNode) + expect(renderLink.fromSlot).toEqual(output) + expect(renderLink.fromReroute).toEqual(reroute) + expect(renderLink.fromDirection).toEqual(LinkDirection.NONE) + expect(renderLink.network).toEqual(network) + }) + }) + + describe("Reset", () => { + test("should reset state and clear links", ({ network, connector }) => { + connector.state.connectingTo = "input" + connector.state.multi = true + connector.state.draggingExistingLinks = true + + const link = new LLink(1, "number", 1, 0, 2, 0) + link._dragging = true + connector.inputLinks.push(link) + + const reroute = new Reroute(1, network) + reroute.pos = [0, 0] + reroute._dragging = true + connector.hiddenReroutes.add(reroute) + + connector.reset() + + expect(connector.state).toEqual({ + connectingTo: undefined, + multi: false, + draggingExistingLinks: false, + }) + expect(connector.renderLinks).toEqual([]) + expect(connector.inputLinks).toEqual([]) + expect(connector.outputLinks).toEqual([]) + expect(connector.hiddenReroutes.size).toBe(0) + expect(link._dragging).toBeUndefined() + expect(reroute._dragging).toBeUndefined() + }) + }) + + describe("Event Handling", () => { + test("should handle event listeners until reset", ({ connector, createTestNode }) => { + const listener = vi.fn() + connector.listenUntilReset("input-moved", listener) + + const sourceNode = createTestNode(1) + + const mockRenderLink = { + node: sourceNode, + fromSlot: { name: "out", type: "number" }, + fromPos: [0, 0], + fromDirection: LinkDirection.RIGHT, + toType: "input", + link: new LLink(1, "number", 1, 0, 2, 0), + } as MovingInputLink + + connector.events.dispatch("input-moved", mockRenderLink) + expect(listener).toHaveBeenCalled() + + connector.reset() + connector.events.dispatch("input-moved", mockRenderLink) + expect(listener).toHaveBeenCalledTimes(1) + }) + }) + + describe("Export", () => { + test("should export current state", ({ network, connector }) => { + connector.state.connectingTo = "input" + connector.state.multi = true + + const link = new LLink(1, "number", 1, 0, 2, 0) + connector.inputLinks.push(link) + + const exported = connector.export(network) + + expect(exported.state).toEqual(connector.state) + expect(exported.inputLinks).toEqual(connector.inputLinks) + expect(exported.outputLinks).toEqual(connector.outputLinks) + expect(exported.renderLinks).toEqual(connector.renderLinks) + expect(exported.network).toBe(network) + }) + }) +}) diff --git a/src/lib/litegraph/test/NodeSlot.test.ts b/src/lib/litegraph/test/NodeSlot.test.ts new file mode 100644 index 0000000000..a4e53e6c26 --- /dev/null +++ b/src/lib/litegraph/test/NodeSlot.test.ts @@ -0,0 +1,72 @@ +import { describe, expect, it } from "vitest" + +import { INodeInputSlot, INodeOutputSlot } from "@/interfaces" +import { inputAsSerialisable, outputAsSerialisable } from "@/node/slotUtils" + +describe("NodeSlot", () => { + describe("inputAsSerialisable", () => { + it("removes _data from serialized slot", () => { + const slot: INodeOutputSlot = { + _data: "test data", + name: "test-id", + type: "STRING", + links: [], + } + const serialized = outputAsSerialisable(slot) + expect(serialized).not.toHaveProperty("_data") + }) + + it("removes pos from widget input slots", () => { + const widgetInputSlot: INodeInputSlot = { + name: "test-id", + pos: [10, 20], + type: "STRING", + link: null, + widget: { + name: "test-widget", + type: "combo", + value: "test-value-1", + options: { + values: ["test-value-1", "test-value-2"], + }, + }, + } + + const serialized = inputAsSerialisable(widgetInputSlot) + expect(serialized).not.toHaveProperty("pos") + }) + + it("preserves pos for non-widget input slots", () => { + const normalSlot: INodeInputSlot = { + name: "test-id", + type: "STRING", + pos: [10, 20], + link: null, + } + const serialized = inputAsSerialisable(normalSlot) + expect(serialized).toHaveProperty("pos") + }) + + it("preserves only widget name during serialization", () => { + const widgetInputSlot: INodeInputSlot = { + name: "test-id", + type: "STRING", + link: null, + widget: { + name: "test-widget", + type: "combo", + value: "test-value-1", + options: { + values: ["test-value-1", "test-value-2"], + }, + }, + } + + const serialized = inputAsSerialisable(widgetInputSlot) + expect(serialized.widget).toEqual({ name: "test-widget" }) + expect(serialized.widget).not.toHaveProperty("type") + expect(serialized.widget).not.toHaveProperty("value") + expect(serialized.widget).not.toHaveProperty("options") + }) + }) +}) diff --git a/src/lib/litegraph/test/ToOutputRenderLink.test.ts b/src/lib/litegraph/test/ToOutputRenderLink.test.ts new file mode 100644 index 0000000000..e6ff8eb26c --- /dev/null +++ b/src/lib/litegraph/test/ToOutputRenderLink.test.ts @@ -0,0 +1,92 @@ +import { describe, expect, it, vi } from "vitest" + +import { ToOutputRenderLink } from "@/canvas/ToOutputRenderLink" +import { LinkDirection } from "@/types/globalEnums" + +describe("ToOutputRenderLink", () => { + describe("connectToOutput", () => { + it("should return early if inputNode is null", () => { + // Setup + const mockNetwork = {} + const mockFromSlot = {} + const mockNode = { id: "test-id", inputs: [mockFromSlot], getInputPos: vi.fn().mockReturnValue([0, 0]) } + + const renderLink = new ToOutputRenderLink( + mockNetwork as any, + mockNode as any, + mockFromSlot as any, + undefined, + LinkDirection.CENTER, + ) + + // Override the node property to simulate null case + Object.defineProperty(renderLink, "node", { + value: null, + }) + + const mockTargetNode = { + connectSlots: vi.fn(), + } + const mockEvents = { + dispatch: vi.fn(), + } + + // Act + renderLink.connectToOutput( + mockTargetNode as any, + {} as any, + mockEvents as any, + ) + + // Assert + expect(mockTargetNode.connectSlots).not.toHaveBeenCalled() + expect(mockEvents.dispatch).not.toHaveBeenCalled() + }) + + it("should create connection and dispatch event when inputNode exists", () => { + // Setup + const mockNetwork = {} + const mockFromSlot = {} + const mockNode = { + id: "test-id", + inputs: [mockFromSlot], + getInputPos: vi.fn().mockReturnValue([0, 0]), + } + + const renderLink = new ToOutputRenderLink( + mockNetwork as any, + mockNode as any, + mockFromSlot as any, + undefined, + LinkDirection.CENTER, + ) + + const mockNewLink = { id: "new-link" } + const mockTargetNode = { + connectSlots: vi.fn().mockReturnValue(mockNewLink), + } + const mockEvents = { + dispatch: vi.fn(), + } + + // Act + renderLink.connectToOutput( + mockTargetNode as any, + {} as any, + mockEvents as any, + ) + + // Assert + expect(mockTargetNode.connectSlots).toHaveBeenCalledWith( + expect.anything(), + mockNode, + mockFromSlot, + undefined, + ) + expect(mockEvents.dispatch).toHaveBeenCalledWith( + "link-created", + mockNewLink, + ) + }) + }) +}) diff --git a/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap new file mode 100644 index 0000000000..7e9cd555b9 --- /dev/null +++ b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap @@ -0,0 +1,331 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredBasicGraph 1`] = ` +LGraph { + "_groups": [ + LGraphGroup { + "_bounding": Float32Array [ + 20, + 20, + 1, + 3, + ], + "_children": Set {}, + "_nodes": [], + "_pos": Float32Array [ + 20, + 20, + ], + "_size": Float32Array [ + 1, + 3, + ], + "color": "#6029aa", + "flags": {}, + "font": undefined, + "font_size": 14, + "graph": [Circular], + "id": 123, + "isPointInside": [Function], + "selected": undefined, + "setDirtyCanvas": [Function], + "title": "A group to test with", + }, + ], + "_input_nodes": undefined, + "_last_trigger_time": undefined, + "_links": Map {}, + "_nodes": [ + LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": undefined, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": undefined, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": "LGraphNode", + "title_buttons": [], + "type": "mustBeSet", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + ], + "_nodes_by_id": { + "1": LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": undefined, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": undefined, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": "LGraphNode", + "title_buttons": [], + "type": "mustBeSet", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + }, + "_nodes_executable": [], + "_nodes_in_order": [ + LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": undefined, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": undefined, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": "LGraphNode", + "title_buttons": [], + "type": "mustBeSet", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + ], + "_subgraphs": Map {}, + "_version": 3, + "catch_errors": true, + "config": {}, + "elapsed_time": 0.01, + "errors_in_execution": undefined, + "events": CustomEventTarget {}, + "execution_time": undefined, + "execution_timer_id": undefined, + "extra": {}, + "filter": undefined, + "fixedtime": 0, + "fixedtime_lapse": 0.01, + "globaltime": 0, + "id": "ca9da7d8-fddd-4707-ad32-67be9be13140", + "iteration": 0, + "last_update_time": 0, + "links": Map {}, + "list_of_graphcanvas": null, + "nodes_actioning": [], + "nodes_executedAction": [], + "nodes_executing": [], + "revision": 0, + "runningtime": 0, + "starttime": 0, + "state": { + "lastGroupId": 123, + "lastLinkId": 0, + "lastNodeId": 1, + "lastRerouteId": 0, + }, + "status": 1, + "vars": {}, + "version": 1, +} +`; + +exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredMinGraph 1`] = ` +LGraph { + "_groups": [], + "_input_nodes": undefined, + "_last_trigger_time": undefined, + "_links": Map {}, + "_nodes": [], + "_nodes_by_id": {}, + "_nodes_executable": [], + "_nodes_in_order": [], + "_subgraphs": Map {}, + "_version": 0, + "catch_errors": true, + "config": {}, + "elapsed_time": 0.01, + "errors_in_execution": undefined, + "events": CustomEventTarget {}, + "execution_time": undefined, + "execution_timer_id": undefined, + "extra": {}, + "filter": undefined, + "fixedtime": 0, + "fixedtime_lapse": 0.01, + "globaltime": 0, + "id": "d175890f-716a-4ece-ba33-1d17a513b7be", + "iteration": 0, + "last_update_time": 0, + "links": Map {}, + "list_of_graphcanvas": null, + "nodes_actioning": [], + "nodes_executedAction": [], + "nodes_executing": [], + "revision": 0, + "runningtime": 0, + "starttime": 0, + "state": { + "lastGroupId": 0, + "lastLinkId": 0, + "lastNodeId": 0, + "lastRerouteId": 0, + }, + "status": 1, + "vars": {}, + "version": 1, +} +`; diff --git a/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap new file mode 100644 index 0000000000..cc09d850d4 --- /dev/null +++ b/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap @@ -0,0 +1,290 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LGraph > supports schema v0.4 graphs > oldSchemaGraph 1`] = ` +LGraph { + "_groups": [ + LGraphGroup { + "_bounding": Float32Array [ + 20, + 20, + 1, + 3, + ], + "_children": Set {}, + "_nodes": [], + "_pos": Float32Array [ + 20, + 20, + ], + "_size": Float32Array [ + 1, + 3, + ], + "color": "#6029aa", + "flags": {}, + "font": undefined, + "font_size": 14, + "graph": [Circular], + "id": 123, + "isPointInside": [Function], + "selected": undefined, + "setDirtyCanvas": [Function], + "title": "A group to test with", + }, + ], + "_input_nodes": undefined, + "_last_trigger_time": undefined, + "_links": Map {}, + "_nodes": [ + LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": true, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": { + "id": 1, + }, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": undefined, + "title_buttons": [], + "type": "", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + ], + "_nodes_by_id": { + "1": LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": true, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": { + "id": 1, + }, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": undefined, + "title_buttons": [], + "type": "", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + }, + "_nodes_executable": [], + "_nodes_in_order": [ + LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": true, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": { + "id": 1, + }, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": undefined, + "title_buttons": [], + "type": "", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + ], + "_subgraphs": Map {}, + "_version": 3, + "catch_errors": true, + "config": {}, + "elapsed_time": 0.01, + "errors_in_execution": undefined, + "events": CustomEventTarget {}, + "execution_time": undefined, + "execution_timer_id": undefined, + "extra": {}, + "filter": undefined, + "fixedtime": 0, + "fixedtime_lapse": 0.01, + "globaltime": 0, + "id": "b4e984f1-b421-4d24-b8b4-ff895793af13", + "iteration": 0, + "last_update_time": 0, + "links": Map {}, + "list_of_graphcanvas": null, + "nodes_actioning": [], + "nodes_executedAction": [], + "nodes_executing": [], + "revision": 0, + "runningtime": 0, + "starttime": 0, + "state": { + "lastGroupId": 123, + "lastLinkId": 0, + "lastNodeId": 1, + "lastRerouteId": 0, + }, + "status": 1, + "vars": {}, + "version": 0.4, +} +`; diff --git a/src/lib/litegraph/test/__snapshots__/LGraphGroup.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraphGroup.test.ts.snap new file mode 100644 index 0000000000..fc086fe26f --- /dev/null +++ b/src/lib/litegraph/test/__snapshots__/LGraphGroup.test.ts.snap @@ -0,0 +1,17 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LGraphGroup > serializes to the existing format > Basic 1`] = ` +{ + "bounding": [ + 10, + 10, + 140, + 80, + ], + "color": "#3f789e", + "flags": {}, + "font_size": 24, + "id": 929, + "title": "title", +} +`; diff --git a/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap new file mode 100644 index 0000000000..cd54aa0949 --- /dev/null +++ b/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap @@ -0,0 +1,331 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LGraph (constructor only) > Matches previous snapshot > basicLGraph 1`] = ` +LGraph { + "_groups": [ + LGraphGroup { + "_bounding": Float32Array [ + 20, + 20, + 1, + 3, + ], + "_children": Set {}, + "_nodes": [], + "_pos": Float32Array [ + 20, + 20, + ], + "_size": Float32Array [ + 1, + 3, + ], + "color": "#6029aa", + "flags": {}, + "font": undefined, + "font_size": 14, + "graph": [Circular], + "id": 123, + "isPointInside": [Function], + "selected": undefined, + "setDirtyCanvas": [Function], + "title": "A group to test with", + }, + ], + "_input_nodes": undefined, + "_last_trigger_time": undefined, + "_links": Map {}, + "_nodes": [ + LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": undefined, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": undefined, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": "LGraphNode", + "title_buttons": [], + "type": "mustBeSet", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + ], + "_nodes_by_id": { + "1": LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": undefined, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": undefined, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": "LGraphNode", + "title_buttons": [], + "type": "mustBeSet", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + }, + "_nodes_executable": [], + "_nodes_in_order": [ + LGraphNode { + "_collapsed_width": undefined, + "_level": undefined, + "_pos": Float32Array [ + 10, + 10, + ], + "_posSize": Float32Array [ + 10, + 10, + 140, + 60, + ], + "_relative_id": undefined, + "_shape": undefined, + "_size": Float32Array [ + 140, + 60, + ], + "action_call": undefined, + "action_triggered": undefined, + "badgePosition": "top-left", + "badges": [], + "bgcolor": undefined, + "block_delete": undefined, + "boxcolor": undefined, + "clip_area": undefined, + "clonable": undefined, + "color": undefined, + "console": undefined, + "exec_version": undefined, + "execute_triggered": undefined, + "flags": {}, + "freeWidgetSpace": undefined, + "gotFocusAt": undefined, + "graph": [Circular], + "has_errors": undefined, + "id": 1, + "ignore_remove": undefined, + "inputs": [], + "last_serialization": undefined, + "locked": undefined, + "lostFocusAt": undefined, + "mode": 0, + "mouseOver": undefined, + "onMouseDown": [Function], + "order": 0, + "outputs": [], + "progress": undefined, + "properties": {}, + "properties_info": [], + "redraw_on_mouse": undefined, + "removable": undefined, + "resizable": undefined, + "selected": undefined, + "serialize_widgets": undefined, + "showAdvanced": undefined, + "strokeStyles": { + "error": [Function], + "selected": [Function], + }, + "title": "LGraphNode", + "title_buttons": [], + "type": "mustBeSet", + "widgets": undefined, + "widgets_start_y": undefined, + "widgets_up": undefined, + }, + ], + "_subgraphs": Map {}, + "_version": 3, + "catch_errors": true, + "config": {}, + "elapsed_time": 0.01, + "errors_in_execution": undefined, + "events": CustomEventTarget {}, + "execution_time": undefined, + "execution_timer_id": undefined, + "extra": {}, + "filter": undefined, + "fixedtime": 0, + "fixedtime_lapse": 0.01, + "globaltime": 0, + "id": "ca9da7d8-fddd-4707-ad32-67be9be13140", + "iteration": 0, + "last_update_time": 0, + "links": Map {}, + "list_of_graphcanvas": null, + "nodes_actioning": [], + "nodes_executedAction": [], + "nodes_executing": [], + "revision": 0, + "runningtime": 0, + "starttime": 0, + "state": { + "lastGroupId": 123, + "lastLinkId": 0, + "lastNodeId": 1, + "lastRerouteId": 0, + }, + "status": 1, + "vars": {}, + "version": 1, +} +`; + +exports[`LGraph (constructor only) > Matches previous snapshot > minLGraph 1`] = ` +LGraph { + "_groups": [], + "_input_nodes": undefined, + "_last_trigger_time": undefined, + "_links": Map {}, + "_nodes": [], + "_nodes_by_id": {}, + "_nodes_executable": [], + "_nodes_in_order": [], + "_subgraphs": Map {}, + "_version": 0, + "catch_errors": true, + "config": {}, + "elapsed_time": 0.01, + "errors_in_execution": undefined, + "events": CustomEventTarget {}, + "execution_time": undefined, + "execution_timer_id": undefined, + "extra": {}, + "filter": undefined, + "fixedtime": 0, + "fixedtime_lapse": 0.01, + "globaltime": 0, + "id": "d175890f-716a-4ece-ba33-1d17a513b7be", + "iteration": 0, + "last_update_time": 0, + "links": Map {}, + "list_of_graphcanvas": null, + "nodes_actioning": [], + "nodes_executedAction": [], + "nodes_executing": [], + "revision": 0, + "runningtime": 0, + "starttime": 0, + "state": { + "lastGroupId": 0, + "lastLinkId": 0, + "lastNodeId": 0, + "lastRerouteId": 0, + }, + "status": 1, + "vars": {}, + "version": 1, +} +`; diff --git a/src/lib/litegraph/test/__snapshots__/LLink.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LLink.test.ts.snap new file mode 100644 index 0000000000..a112c516ee --- /dev/null +++ b/src/lib/litegraph/test/__snapshots__/LLink.test.ts.snap @@ -0,0 +1,23 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LLink > matches previous snapshot > Basic 1`] = ` +[ + 1, + 4, + 2, + 5, + 3, + "float", +] +`; + +exports[`LLink > serializes to the previous snapshot > Basic 1`] = ` +[ + 1, + 4, + 2, + 5, + 3, + "float", +] +`; diff --git a/src/lib/litegraph/test/__snapshots__/litegraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/litegraph.test.ts.snap new file mode 100644 index 0000000000..b69165d8da --- /dev/null +++ b/src/lib/litegraph/test/__snapshots__/litegraph.test.ts.snap @@ -0,0 +1,203 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Litegraph module > has the same structure > minLGraph 1`] = ` +LiteGraphGlobal { + "ACTION": -1, + "ALWAYS": 0, + "ARROW_SHAPE": 5, + "AUTOHIDE_TITLE": 3, + "BOX_SHAPE": 1, + "CANVAS_GRID_SIZE": 10, + "CARD_SHAPE": 4, + "CENTER": 5, + "CIRCLE_SHAPE": 3, + "CONNECTING_LINK_COLOR": "#AFA", + "Classes": { + "InputIndicators": [Function], + "Rectangle": [Function], + "SubgraphIONodeBase": [Function], + "SubgraphSlot": [Function], + }, + "ContextMenu": [Function], + "CurveEditor": [Function], + "DEFAULT_FONT": "Arial", + "DEFAULT_GROUP_FONT": 24, + "DEFAULT_GROUP_FONT_SIZE": undefined, + "DEFAULT_POSITION": [ + 100, + 100, + ], + "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", + "DOWN": 2, + "DragAndScale": [Function], + "EVENT": -1, + "EVENT_LINK_COLOR": "#A86", + "GRID_SHAPE": 6, + "GROUP_FONT": "Arial", + "Globals": {}, + "HIDDEN_LINK": -1, + "INPUT": 1, + "LEFT": 3, + "LGraph": [Function], + "LGraphCanvas": [Function], + "LGraphGroup": [Function], + "LGraphNode": [Function], + "LINEAR_LINK": 1, + "LINK_COLOR": "#9A9", + "LINK_RENDER_MODES": [ + "Straight", + "Linear", + "Spline", + ], + "LLink": [Function], + "LabelPosition": { + "Left": "left", + "Right": "right", + }, + "MAX_NUMBER_OF_NODES": 10000, + "NEVER": 2, + "NODE_BOX_OUTLINE_COLOR": "#FFF", + "NODE_COLLAPSED_RADIUS": 10, + "NODE_COLLAPSED_WIDTH": 80, + "NODE_DEFAULT_BGCOLOR": "#353535", + "NODE_DEFAULT_BOXCOLOR": "#666", + "NODE_DEFAULT_COLOR": "#333", + "NODE_DEFAULT_SHAPE": 2, + "NODE_ERROR_COLOUR": "#E00", + "NODE_FONT": "Arial", + "NODE_MIN_WIDTH": 50, + "NODE_MODES": [ + "Always", + "On Event", + "Never", + "On Trigger", + ], + "NODE_MODES_COLORS": [ + "#666", + "#422", + "#333", + "#224", + "#626", + ], + "NODE_SELECTED_TITLE_COLOR": "#FFF", + "NODE_SLOT_HEIGHT": 20, + "NODE_SUBTEXT_SIZE": 12, + "NODE_TEXT_COLOR": "#AAA", + "NODE_TEXT_HIGHLIGHT_COLOR": "#EEE", + "NODE_TEXT_SIZE": 14, + "NODE_TITLE_COLOR": "#999", + "NODE_TITLE_HEIGHT": 30, + "NODE_TITLE_TEXT_Y": 20, + "NODE_WIDGET_HEIGHT": 20, + "NODE_WIDTH": 140, + "NORMAL_TITLE": 0, + "NO_TITLE": 1, + "Nodes": {}, + "ON_EVENT": 1, + "ON_TRIGGER": 3, + "OUTPUT": 2, + "RIGHT": 4, + "ROUND_RADIUS": 8, + "ROUND_SHAPE": 2, + "Reroute": [Function], + "SPLINE_LINK": 2, + "STRAIGHT_LINK": 0, + "SlotDirection": { + "1": "Up", + "2": "Down", + "3": "Left", + "4": "Right", + "Down": 2, + "Left": 3, + "Right": 4, + "Up": 1, + }, + "SlotShape": { + "1": "Box", + "3": "Circle", + "5": "Arrow", + "6": "Grid", + "7": "HollowCircle", + "Arrow": 5, + "Box": 1, + "Circle": 3, + "Grid": 6, + "HollowCircle": 7, + }, + "SlotType": { + "-1": "Event", + "Array": "array", + "Event": -1, + }, + "TRANSPARENT_TITLE": 2, + "UP": 1, + "VALID_SHAPES": [ + "default", + "box", + "round", + "card", + ], + "VERSION": 0.4, + "VERTICAL_LAYOUT": "vertical", + "WIDGET_ADVANCED_OUTLINE_COLOR": "rgba(56, 139, 253, 0.8)", + "WIDGET_BGCOLOR": "#222", + "WIDGET_DISABLED_TEXT_COLOR": "#666", + "WIDGET_OUTLINE_COLOR": "#666", + "WIDGET_SECONDARY_TEXT_COLOR": "#999", + "WIDGET_TEXT_COLOR": "#DDD", + "allow_multi_output_for_events": true, + "allow_scripts": false, + "alt_drag_do_clone_nodes": false, + "alwaysRepeatWarnings": false, + "alwaysSnapToGrid": undefined, + "auto_load_slot_types": false, + "canvasNavigationMode": "legacy", + "catch_exceptions": true, + "click_do_break_link_to": false, + "context_menu_scaling": false, + "ctrl_alt_click_do_break_link": true, + "ctrl_shift_v_paste_connect_unselected_outputs": true, + "debug": false, + "dialog_close_on_mouse_leave": false, + "dialog_close_on_mouse_leave_delay": 500, + "distance": [Function], + "do_add_triggers_slots": false, + "highlight_selected_group": true, + "isInsideRectangle": [Function], + "macGesturesRequireMac": true, + "macTrackpadGestures": false, + "middle_click_slot_add_default_node": false, + "node_box_coloured_by_mode": false, + "node_box_coloured_when_on": false, + "node_images_path": "", + "node_types_by_file_extension": {}, + "onDeprecationWarning": [ + [Function], + ], + "overlapBounding": [Function], + "pointerevents_method": "pointer", + "proxy": null, + "registered_node_types": {}, + "registered_slot_in_types": {}, + "registered_slot_out_types": {}, + "release_link_on_empty_shows_menu": false, + "saveViewportWithGraph": true, + "search_filter_enabled": false, + "search_hide_on_mouse_leave": true, + "search_show_all_on_open": true, + "searchbox_extras": {}, + "shift_click_do_break_link_from": false, + "slot_types_default_in": {}, + "slot_types_default_out": {}, + "slot_types_in": [], + "slot_types_out": [], + "snapToGrid": undefined, + "snap_highlights_node": true, + "snaps_for_comfy": true, + "throw_errors": true, + "truncateWidgetTextEvenly": false, + "truncateWidgetValuesFirst": false, + "use_uuids": false, + "uuidv4": [Function], +} +`; diff --git a/src/lib/litegraph/test/assets/floatingBranch.json b/src/lib/litegraph/test/assets/floatingBranch.json new file mode 100644 index 0000000000..0764d73bf7 --- /dev/null +++ b/src/lib/litegraph/test/assets/floatingBranch.json @@ -0,0 +1,123 @@ +{ + "id": "e5ffd5e1-1c01-45ac-90dd-b7d83a206b0f", + "revision": 0, + "last_node_id": 3, + "last_link_id": 3, + "nodes": [ + { + "id": 1, + "type": "InvertMask", + "pos": [100, 130], + "size": [140, 26], + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [ + { + "localized_name": "mask", + "name": "mask", + "type": "MASK", + "link": null + } + ], + "outputs": [ + { + "localized_name": "MASK", + "name": "MASK", + "type": "MASK", + "links": [2, 3] + } + ], + "properties": { "Node name for S&R": "InvertMask" }, + "widgets_values": [] + }, + { + "id": 3, + "type": "InvertMask", + "pos": [400, 220], + "size": [140, 26], + "flags": {}, + "order": 2, + "mode": 0, + "inputs": [ + { "localized_name": "mask", "name": "mask", "type": "MASK", "link": 3 } + ], + "outputs": [ + { + "localized_name": "MASK", + "name": "MASK", + "type": "MASK", + "links": null + } + ], + "properties": { "Node name for S&R": "InvertMask" }, + "widgets_values": [] + }, + { + "id": 2, + "type": "InvertMask", + "pos": [400, 130], + "size": [140, 26], + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [ + { "localized_name": "mask", "name": "mask", "type": "MASK", "link": 2 } + ], + "outputs": [ + { + "localized_name": "MASK", + "name": "MASK", + "type": "MASK", + "links": null + } + ], + "properties": { "Node name for S&R": "InvertMask" }, + "widgets_values": [] + } + ], + "links": [ + [2, 1, 0, 2, 0, "MASK"], + [3, 1, 0, 3, 0, "MASK"] + ], + "floatingLinks": [ + { + "id": 6, + "origin_id": 1, + "origin_slot": 0, + "target_id": -1, + "target_slot": -1, + "type": "MASK", + "parentId": 1 + } + ], + "groups": [], + "config": {}, + "extra": { + "ds": { + "scale": 1.2100000000000002, + "offset": [319.8264462809916, 109.2148760330578] + }, + "linkExtensions": [ + { "id": 2, "parentId": 3 }, + { "id": 3, "parentId": 3 } + ], + "reroutes": [ + { + "id": 1, + "parentId": 2, + "pos": [350, 110], + "linkIds": [], + "floating": { "slotType": "output" } + }, + { "id": 2, "parentId": 4, "pos": [310, 150], "linkIds": [2, 3] }, + { "id": 3, "parentId": 2, "pos": [360, 170], "linkIds": [2, 3] }, + { + "id": 4, + "pos": [271.9090881347656, 146.9834747314453], + "linkIds": [2, 3] + } + ] + }, + "version": 0.4 +} diff --git a/src/lib/litegraph/test/assets/floatingLink.json b/src/lib/litegraph/test/assets/floatingLink.json new file mode 100644 index 0000000000..b10ee8b426 --- /dev/null +++ b/src/lib/litegraph/test/assets/floatingLink.json @@ -0,0 +1,68 @@ +{ + "id": "d175890f-716a-4ece-ba33-1d17a513b7be", + "revision": 0, + "last_node_id": 2, + "last_link_id": 1, + "nodes": [ + { + "id": 2, + "type": "VAEDecode", + "pos": [63.44815444946289, 178.71633911132812], + "size": [210, 46], + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [ + { + "name": "samples", + "type": "LATENT", + "link": null + }, + { + "name": "vae", + "type": "VAE", + "link": null + } + ], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": [] + } + ], + "properties": { + "Node name for S&R": "VAEDecode" + }, + "widgets_values": [] + } + ], + "links": [], + "floatingLinks": [ + { + "id": 4, + "origin_id": 2, + "origin_slot": 0, + "target_id": -1, + "target_slot": -1, + "type": "IMAGE", + "parentId": 1 + } + ], + "groups": [], + "config": {}, + "extra": { + "linkExtensions": [], + "reroutes": [ + { + "id": 1, + "pos": [393.2383117675781, 194.61941528320312], + "linkIds": [], + "floating": { + "slotType": "output" + } + } + ] + }, + "version": 0.4 +} diff --git a/src/lib/litegraph/test/assets/linkedNodes.json b/src/lib/litegraph/test/assets/linkedNodes.json new file mode 100644 index 0000000000..5eed02368b --- /dev/null +++ b/src/lib/litegraph/test/assets/linkedNodes.json @@ -0,0 +1,96 @@ +{ + "id": "26a34f13-1767-4847-b25f-a21dedf6840d", + "revision": 0, + "last_node_id": 3, + "last_link_id": 2, + "nodes": [ + { + "id": 2, + "type": "VAEDecode", + "pos": [ + 63.44815444946289, + 178.71633911132812 + ], + "size": [ + 210, + 46 + ], + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [ + { + "name": "samples", + "type": "LATENT", + "link": null + }, + { + "name": "vae", + "type": "VAE", + "link": null + } + ], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": [ + 2 + ] + } + ], + "properties": { + "Node name for S&R": "VAEDecode" + }, + "widgets_values": [] + }, + { + "id": 3, + "type": "SaveImage", + "pos": [ + 419.36920166015625, + 179.71388244628906 + ], + "size": [ + 226.3714141845703, + 58 + ], + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [ + { + "name": "images", + "type": "IMAGE", + "link": 2 + } + ], + "outputs": [], + "properties": {}, + "widgets_values": [ + "ComfyUI" + ] + } + ], + "links": [ + [ + 2, + 2, + 0, + 3, + 0, + "IMAGE" + ] + ], + "groups": [], + "config": {}, + "extra": { + "linkExtensions": [ + { + "id": 2, + "parentId": 1 + } + ] + }, + "version": 0.4 +} \ No newline at end of file diff --git a/src/lib/litegraph/test/assets/reroutesComplex.json b/src/lib/litegraph/test/assets/reroutesComplex.json new file mode 100644 index 0000000000..941228baf0 --- /dev/null +++ b/src/lib/litegraph/test/assets/reroutesComplex.json @@ -0,0 +1 @@ +{"id":"e5ffd5e1-1c01-45ac-90dd-b7d83a206b0f","revision":0,"last_node_id":9,"last_link_id":12,"nodes":[{"id":3,"type":"InvertMask","pos":[390,270],"size":[140,26],"flags":{},"order":8,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":3}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":7,"type":"InvertMask","pos":[390,560],"size":[140,26],"flags":{},"order":4,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":10}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":8,"type":"InvertMask","pos":[390,640],"size":[140,26],"flags":{},"order":3,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":9}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":5,"type":"InvertMask","pos":[390,480],"size":[140,26],"flags":{"collapsed":false},"order":5,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":11}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":6,"type":"InvertMask","pos":[390,400],"size":[140,26],"flags":{},"order":6,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":12}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":4,"type":"InvertMask","pos":[50,640],"size":[140,26],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":null}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":[9,10,11,12]}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":2,"type":"InvertMask","pos":[390,180],"size":[140,26],"flags":{},"order":7,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":2}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":1,"type":"InvertMask","pos":[50,170],"size":[140,26],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":null}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":[2,3]}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":9,"type":"InvertMask","pos":[50,410],"size":[140,26],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":null}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":[]}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]}],"links":[[2,1,0,2,0,"MASK"],[3,1,0,3,0,"MASK"],[9,4,0,8,0,"MASK"],[10,4,0,7,0,"MASK"],[11,4,0,5,0,"MASK"],[12,4,0,6,0,"MASK"]],"floatingLinks":[{"id":6,"origin_id":1,"origin_slot":0,"target_id":-1,"target_slot":-1,"type":"MASK","parentId":1}],"groups":[],"config":{},"extra":{"ds":{"scale":1,"offset":[0,0]},"linkExtensions":[{"id":2,"parentId":3},{"id":3,"parentId":3},{"id":9,"parentId":12},{"id":10,"parentId":15},{"id":11,"parentId":7},{"id":12,"parentId":7}],"reroutes":[{"id":1,"parentId":2,"pos":[340,160],"linkIds":[],"floating":{"slotType":"output"}},{"id":2,"parentId":4,"pos":[290,190],"linkIds":[2,3]},{"id":3,"parentId":2,"pos":[350,220],"linkIds":[2,3]},{"id":4,"pos":[250,190],"linkIds":[2,3]},{"id":6,"parentId":8,"pos":[300,450],"linkIds":[11,12]},{"id":7,"parentId":6,"pos":[350,450],"linkIds":[11,12]},{"id":8,"parentId":13,"pos":[250,450],"linkIds":[11,12]},{"id":10,"pos":[250,650],"linkIds":[9,10,11,12]},{"id":11,"parentId":10,"pos":[300,650],"linkIds":[9]},{"id":12,"parentId":11,"pos":[350,650],"linkIds":[9]},{"id":13,"parentId":10,"pos":[250,570],"linkIds":[10,11,12]},{"id":14,"parentId":13,"pos":[300,570],"linkIds":[10]},{"id":15,"parentId":14,"pos":[350,570],"linkIds":[10]}]},"version":0.4} \ No newline at end of file diff --git a/src/lib/litegraph/test/assets/testGraphs.ts b/src/lib/litegraph/test/assets/testGraphs.ts new file mode 100644 index 0000000000..a4e57671ca --- /dev/null +++ b/src/lib/litegraph/test/assets/testGraphs.ts @@ -0,0 +1,70 @@ +import type { ISerialisedGraph, SerialisableGraph } from "@/litegraph" + +export const oldSchemaGraph: ISerialisedGraph = { + id: "b4e984f1-b421-4d24-b8b4-ff895793af13", + revision: 0, + version: 0.4, + config: {}, + last_node_id: 0, + last_link_id: 0, + groups: [ + { + id: 123, + bounding: [20, 20, 1, 3], + color: "#6029aa", + font_size: 14, + title: "A group to test with", + }, + ], + nodes: [ + { + id: 1, + }, + ], + links: [], +} + +export const minimalSerialisableGraph: SerialisableGraph = { + id: "d175890f-716a-4ece-ba33-1d17a513b7be", + revision: 0, + version: 1, + config: {}, + state: { + lastNodeId: 0, + lastLinkId: 0, + lastGroupId: 0, + lastRerouteId: 0, + }, + nodes: [], + links: [], + groups: [], +} + +export const basicSerialisableGraph: SerialisableGraph = { + id: "ca9da7d8-fddd-4707-ad32-67be9be13140", + revision: 0, + version: 1, + config: {}, + state: { + lastNodeId: 0, + lastLinkId: 0, + lastGroupId: 0, + lastRerouteId: 0, + }, + groups: [ + { + id: 123, + bounding: [20, 20, 1, 3], + color: "#6029aa", + font_size: 14, + title: "A group to test with", + }, + ], + nodes: [ + { + id: 1, + type: "mustBeSet", + }, + ], + links: [], +} diff --git a/src/lib/litegraph/test/canvas/LinkConnector.test.ts b/src/lib/litegraph/test/canvas/LinkConnector.test.ts new file mode 100644 index 0000000000..0cb8d835fc --- /dev/null +++ b/src/lib/litegraph/test/canvas/LinkConnector.test.ts @@ -0,0 +1,131 @@ +import type { INodeInputSlot, LGraphNode } from "@/litegraph" + +import { beforeEach, describe, expect, test, vi } from "vitest" + +// We don't strictly need RenderLink interface import for the mock +import { LinkConnector } from "@/litegraph" + +// Mocks +const mockSetConnectingLinks = vi.fn() + +// Mock a structure that has the needed method +function mockRenderLinkImpl(canConnect: boolean) { + return { + canConnectToInput: vi.fn().mockReturnValue(canConnect), + // Add other properties if they become necessary for tests + } +} + +const mockNode = {} as LGraphNode +const mockInput = {} as INodeInputSlot + +describe("LinkConnector", () => { + let connector: LinkConnector + + beforeEach(() => { + connector = new LinkConnector(mockSetConnectingLinks) + // Clear the array directly before each test + connector.renderLinks.length = 0 + vi.clearAllMocks() + }) + + describe("isInputValidDrop", () => { + test("should return false if there are no render links", () => { + expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(false) + }) + + test("should return true if at least one render link can connect", () => { + const link1 = mockRenderLinkImpl(false) + const link2 = mockRenderLinkImpl(true) + // Cast to any to satisfy the push requirement, as we only need the canConnectToInput method + connector.renderLinks.push(link1 as any, link2 as any) + expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true) + expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput) + expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput) + }) + + test("should return false if no render links can connect", () => { + const link1 = mockRenderLinkImpl(false) + const link2 = mockRenderLinkImpl(false) + connector.renderLinks.push(link1 as any, link2 as any) + expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(false) + expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput) + expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput) + }) + + test("should call canConnectToInput on each render link until one returns true", () => { + const link1 = mockRenderLinkImpl(false) + const link2 = mockRenderLinkImpl(true) // This one can connect + const link3 = mockRenderLinkImpl(false) + connector.renderLinks.push(link1 as any, link2 as any, link3 as any) + + expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true) + + expect(link1.canConnectToInput).toHaveBeenCalledTimes(1) + expect(link2.canConnectToInput).toHaveBeenCalledTimes(1) // Stops here + expect(link3.canConnectToInput).not.toHaveBeenCalled() // Should not be called + }) + }) + + describe("listenUntilReset", () => { + test("should add listener for the specified event and for reset", () => { + const listener = vi.fn() + const addEventListenerSpy = vi.spyOn(connector.events, "addEventListener") + + connector.listenUntilReset("before-drop-links", listener) + + expect(addEventListenerSpy).toHaveBeenCalledWith("before-drop-links", listener, undefined) + expect(addEventListenerSpy).toHaveBeenCalledWith("reset", expect.any(Function), { once: true }) + }) + + test("should call the listener when the event is dispatched before reset", () => { + const listener = vi.fn() + const eventData = { renderLinks: [], event: {} as any } // Mock event data + connector.listenUntilReset("before-drop-links", listener) + + connector.events.dispatch("before-drop-links", eventData) + + expect(listener).toHaveBeenCalledTimes(1) + expect(listener).toHaveBeenCalledWith(new CustomEvent("before-drop-links")) + }) + + test("should remove the listener when reset is dispatched", () => { + const listener = vi.fn() + const removeEventListenerSpy = vi.spyOn(connector.events, "removeEventListener") + + connector.listenUntilReset("before-drop-links", listener) + + // Simulate the reset event being dispatched + connector.events.dispatch("reset", false) + + // Check if removeEventListener was called correctly for the original listener + expect(removeEventListenerSpy).toHaveBeenCalledWith("before-drop-links", listener) + }) + + test("should not call the listener after reset is dispatched", () => { + const listener = vi.fn() + const eventData = { renderLinks: [], event: {} as any } + connector.listenUntilReset("before-drop-links", listener) + + // Dispatch reset first + connector.events.dispatch("reset", false) + + // Then dispatch the original event + connector.events.dispatch("before-drop-links", eventData) + + expect(listener).not.toHaveBeenCalled() + }) + + test("should pass options to addEventListener", () => { + const listener = vi.fn() + const options = { once: true } + const addEventListenerSpy = vi.spyOn(connector.events, "addEventListener") + + connector.listenUntilReset("after-drop-links", listener, options) + + expect(addEventListenerSpy).toHaveBeenCalledWith("after-drop-links", listener, options) + // Still adds the reset listener + expect(addEventListenerSpy).toHaveBeenCalledWith("reset", expect.any(Function), { once: true }) + }) + }) +}) diff --git a/src/lib/litegraph/test/infrastructure/Rectangle.resize.test.ts b/src/lib/litegraph/test/infrastructure/Rectangle.resize.test.ts new file mode 100644 index 0000000000..47fb4cb4b6 --- /dev/null +++ b/src/lib/litegraph/test/infrastructure/Rectangle.resize.test.ts @@ -0,0 +1,144 @@ +import { beforeEach, describe, expect, test } from "vitest" + +import { Rectangle } from "@/infrastructure/Rectangle" + +describe("Rectangle resize functionality", () => { + let rect: Rectangle + + beforeEach(() => { + rect = new Rectangle(100, 200, 300, 400) // x, y, width, height + // So: left=100, top=200, right=400, bottom=600 + }) + + describe("findContainingCorner", () => { + const cornerSize = 15 + + test("should detect NW (top-left) corner", () => { + expect(rect.findContainingCorner(100, 200, cornerSize)).toBe("NW") + expect(rect.findContainingCorner(110, 210, cornerSize)).toBe("NW") + expect(rect.findContainingCorner(114, 214, cornerSize)).toBe("NW") + }) + + test("should detect NE (top-right) corner", () => { + // Top-right corner starts at (right - cornerSize, top) = (385, 200) + expect(rect.findContainingCorner(385, 200, cornerSize)).toBe("NE") + expect(rect.findContainingCorner(390, 210, cornerSize)).toBe("NE") + expect(rect.findContainingCorner(399, 214, cornerSize)).toBe("NE") + }) + + test("should detect SW (bottom-left) corner", () => { + // Bottom-left corner starts at (left, bottom - cornerSize) = (100, 585) + expect(rect.findContainingCorner(100, 585, cornerSize)).toBe("SW") + expect(rect.findContainingCorner(110, 590, cornerSize)).toBe("SW") + expect(rect.findContainingCorner(114, 599, cornerSize)).toBe("SW") + }) + + test("should detect SE (bottom-right) corner", () => { + // Bottom-right corner starts at (right - cornerSize, bottom - cornerSize) = (385, 585) + expect(rect.findContainingCorner(385, 585, cornerSize)).toBe("SE") + expect(rect.findContainingCorner(390, 590, cornerSize)).toBe("SE") + expect(rect.findContainingCorner(399, 599, cornerSize)).toBe("SE") + }) + + test("should return undefined when not in any corner", () => { + // Middle of rectangle + expect(rect.findContainingCorner(250, 400, cornerSize)).toBeUndefined() + // On edge but not in corner + expect(rect.findContainingCorner(200, 200, cornerSize)).toBeUndefined() + expect(rect.findContainingCorner(100, 400, cornerSize)).toBeUndefined() + // Outside rectangle + expect(rect.findContainingCorner(50, 150, cornerSize)).toBeUndefined() + }) + }) + + describe("corner detection methods", () => { + const cornerSize = 20 + + describe("isInTopLeftCorner", () => { + test("should return true when point is in top-left corner", () => { + expect(rect.isInTopLeftCorner(100, 200, cornerSize)).toBe(true) + expect(rect.isInTopLeftCorner(110, 210, cornerSize)).toBe(true) + expect(rect.isInTopLeftCorner(119, 219, cornerSize)).toBe(true) + }) + + test("should return false when point is outside top-left corner", () => { + expect(rect.isInTopLeftCorner(120, 200, cornerSize)).toBe(false) + expect(rect.isInTopLeftCorner(100, 220, cornerSize)).toBe(false) + expect(rect.isInTopLeftCorner(99, 200, cornerSize)).toBe(false) + expect(rect.isInTopLeftCorner(100, 199, cornerSize)).toBe(false) + }) + }) + + describe("isInTopRightCorner", () => { + test("should return true when point is in top-right corner", () => { + // Top-right corner area is from (right - cornerSize, top) to (right, top + cornerSize) + // That's (380, 200) to (400, 220) + expect(rect.isInTopRightCorner(380, 200, cornerSize)).toBe(true) + expect(rect.isInTopRightCorner(390, 210, cornerSize)).toBe(true) + expect(rect.isInTopRightCorner(399, 219, cornerSize)).toBe(true) + }) + + test("should return false when point is outside top-right corner", () => { + expect(rect.isInTopRightCorner(379, 200, cornerSize)).toBe(false) + expect(rect.isInTopRightCorner(400, 220, cornerSize)).toBe(false) + expect(rect.isInTopRightCorner(401, 200, cornerSize)).toBe(false) + expect(rect.isInTopRightCorner(400, 199, cornerSize)).toBe(false) + }) + }) + + describe("isInBottomLeftCorner", () => { + test("should return true when point is in bottom-left corner", () => { + // Bottom-left corner area is from (left, bottom - cornerSize) to (left + cornerSize, bottom) + // That's (100, 580) to (120, 600) + expect(rect.isInBottomLeftCorner(100, 580, cornerSize)).toBe(true) + expect(rect.isInBottomLeftCorner(110, 590, cornerSize)).toBe(true) + expect(rect.isInBottomLeftCorner(119, 599, cornerSize)).toBe(true) + }) + + test("should return false when point is outside bottom-left corner", () => { + expect(rect.isInBottomLeftCorner(120, 600, cornerSize)).toBe(false) + expect(rect.isInBottomLeftCorner(100, 579, cornerSize)).toBe(false) + expect(rect.isInBottomLeftCorner(99, 600, cornerSize)).toBe(false) + expect(rect.isInBottomLeftCorner(100, 601, cornerSize)).toBe(false) + }) + }) + + describe("isInBottomRightCorner", () => { + test("should return true when point is in bottom-right corner", () => { + // Bottom-right corner area is from (right - cornerSize, bottom - cornerSize) to (right, bottom) + // That's (380, 580) to (400, 600) + expect(rect.isInBottomRightCorner(380, 580, cornerSize)).toBe(true) + expect(rect.isInBottomRightCorner(390, 590, cornerSize)).toBe(true) + expect(rect.isInBottomRightCorner(399, 599, cornerSize)).toBe(true) + }) + + test("should return false when point is outside bottom-right corner", () => { + expect(rect.isInBottomRightCorner(379, 600, cornerSize)).toBe(false) + expect(rect.isInBottomRightCorner(400, 579, cornerSize)).toBe(false) + expect(rect.isInBottomRightCorner(401, 600, cornerSize)).toBe(false) + expect(rect.isInBottomRightCorner(400, 601, cornerSize)).toBe(false) + }) + }) + }) + + describe("edge cases", () => { + test("should handle zero-sized corner areas", () => { + expect(rect.findContainingCorner(100, 200, 0)).toBeUndefined() + expect(rect.isInTopLeftCorner(100, 200, 0)).toBe(false) + }) + + test("should handle rectangles at origin", () => { + const originRect = new Rectangle(0, 0, 100, 100) + expect(originRect.findContainingCorner(0, 0, 10)).toBe("NW") + // Bottom-right corner is at (90, 90) to (100, 100) + expect(originRect.findContainingCorner(90, 90, 10)).toBe("SE") + }) + + test("should handle negative coordinates", () => { + const negRect = new Rectangle(-50, -50, 100, 100) + expect(negRect.findContainingCorner(-50, -50, 10)).toBe("NW") + // Bottom-right corner is at (40, 40) to (50, 50) + expect(negRect.findContainingCorner(40, 40, 10)).toBe("SE") + }) + }) +}) diff --git a/src/lib/litegraph/test/infrastructure/Rectangle.test.ts b/src/lib/litegraph/test/infrastructure/Rectangle.test.ts new file mode 100644 index 0000000000..2dd00f9649 --- /dev/null +++ b/src/lib/litegraph/test/infrastructure/Rectangle.test.ts @@ -0,0 +1,515 @@ +import type { Point, Size } from "@/interfaces" + +import { describe, expect, test as baseTest, vi } from "vitest" + +import { Rectangle } from "@/infrastructure/Rectangle" + +// TODO: If there's a common test context, use it here +// For now, we'll define a simple context for Rectangle tests +const test = baseTest.extend<{ rect: Rectangle }>({ + rect: async ({}, use) => { + await use(new Rectangle()) + }, +}) + +describe("Rectangle", () => { + describe("constructor and basic properties", () => { + test("should create a default rectangle", ({ rect }) => { + expect(rect.x).toBe(0) + expect(rect.y).toBe(0) + expect(rect.width).toBe(0) + expect(rect.height).toBe(0) + expect(rect.length).toBe(4) + }) + + test("should create a rectangle with specified values", () => { + const rect = new Rectangle(1, 2, 3, 4) + expect(rect.x).toBe(1) + expect(rect.y).toBe(2) + expect(rect.width).toBe(3) + expect(rect.height).toBe(4) + }) + + test("should update the rectangle values", ({ rect }) => { + const newValues: [number, number, number, number] = [1, 2, 3, 4] + rect.updateTo(newValues) + expect(rect.x).toBe(1) + expect(rect.y).toBe(2) + expect(rect.width).toBe(3) + expect(rect.height).toBe(4) + }) + }) + + describe("array operations", () => { + test("should return a Float64Array representing the subarray", () => { + const rect = new Rectangle(10, 20, 30, 40) + const sub = rect.subarray(1, 3) + expect(sub).toBeInstanceOf(Float64Array) + expect(sub.length).toBe(2) + expect(sub[0]).toBe(20) // y + expect(sub[1]).toBe(30) // width + }) + + test("should return a Float64Array for the entire array if no args", () => { + const rect = new Rectangle(10, 20, 30, 40) + const sub = rect.subarray() + expect(sub).toBeInstanceOf(Float64Array) + expect(sub.length).toBe(4) + expect(sub[0]).toBe(10) + expect(sub[1]).toBe(20) + expect(sub[2]).toBe(30) + expect(sub[3]).toBe(40) + }) + + test("should return an array with [x, y, width, height]", () => { + const rect = new Rectangle(1, 2, 3, 4) + const arr = rect.toArray() + expect(arr).toEqual([1, 2, 3, 4]) + expect(Array.isArray(arr)).toBe(true) + expect(arr).not.toBeInstanceOf(Float64Array) + + const exported = rect.export() + expect(exported).toEqual([1, 2, 3, 4]) + expect(Array.isArray(exported)).toBe(true) + expect(exported).not.toBeInstanceOf(Float64Array) + }) + }) + + describe("position and size properties", () => { + test("should get the position", ({ rect }) => { + rect.x = 10 + rect.y = 20 + const pos = rect.pos + expect(pos[0]).toBe(10) + expect(pos[1]).toBe(20) + expect(pos.length).toBe(2) + }) + + test("should set the position", ({ rect }) => { + const newPos: Point = [5, 15] + rect.pos = newPos + expect(rect.x).toBe(5) + expect(rect.y).toBe(15) + }) + + test("should update the rectangle when the returned pos object is modified", ({ rect }) => { + rect.x = 1 + rect.y = 2 + const pos = rect.pos + pos[0] = 100 + pos[1] = 200 + expect(rect.x).toBe(100) + expect(rect.y).toBe(200) + }) + + test("should get the size", ({ rect }) => { + rect.width = 30 + rect.height = 40 + const size = rect.size + expect(size[0]).toBe(30) + expect(size[1]).toBe(40) + expect(size.length).toBe(2) + }) + + test("should set the size", ({ rect }) => { + const newSize: Size = [35, 45] + rect.size = newSize + expect(rect.width).toBe(35) + expect(rect.height).toBe(45) + }) + + test("should update the rectangle when the returned size object is modified", ({ rect }) => { + rect.width = 3 + rect.height = 4 + const size = rect.size + size[0] = 300 + size[1] = 400 + expect(rect.width).toBe(300) + expect(rect.height).toBe(400) + }) + }) + + describe("edge properties", () => { + test("should get x", ({ rect }) => { + rect[0] = 5 + expect(rect.x).toBe(5) + }) + + test("should set x", ({ rect }) => { + rect.x = 10 + expect(rect[0]).toBe(10) + }) + + test("should get y", ({ rect }) => { + rect[1] = 6 + expect(rect.y).toBe(6) + }) + + test("should set y", ({ rect }) => { + rect.y = 11 + expect(rect[1]).toBe(11) + }) + + test("should get width", ({ rect }) => { + rect[2] = 7 + expect(rect.width).toBe(7) + }) + + test("should set width", ({ rect }) => { + rect.width = 12 + expect(rect[2]).toBe(12) + }) + + test("should get height", ({ rect }) => { + rect[3] = 8 + expect(rect.height).toBe(8) + }) + + test("should set height", ({ rect }) => { + rect.height = 13 + expect(rect[3]).toBe(13) + }) + + test("should get left", ({ rect }) => { + rect[0] = 1 + expect(rect.left).toBe(1) + }) + + test("should set left", ({ rect }) => { + rect.left = 2 + expect(rect[0]).toBe(2) + }) + + test("should get top", ({ rect }) => { + rect[1] = 3 + expect(rect.top).toBe(3) + }) + + test("should set top", ({ rect }) => { + rect.top = 4 + expect(rect[1]).toBe(4) + }) + + test("should get right", ({ rect }) => { + rect[0] = 1 + rect[2] = 10 + expect(rect.right).toBe(11) + }) + + test("should set right", ({ rect }) => { + rect.x = 1 + rect.width = 10 // right is 11 + rect.right = 20 // new right + expect(rect.x).toBe(10) // x = right - width = 20 - 10 + expect(rect.width).toBe(10) + }) + + test("should get bottom", ({ rect }) => { + rect[1] = 2 + rect[3] = 20 + expect(rect.bottom).toBe(22) + }) + + test("should set bottom", ({ rect }) => { + rect.y = 2 + rect.height = 20 // bottom is 22 + rect.bottom = 30 // new bottom + expect(rect.y).toBe(10) // y = bottom - height = 30 - 20 + expect(rect.height).toBe(20) + }) + + test("should get centreX", () => { + const rect = new Rectangle(0, 0, 10, 0) + expect(rect.centreX).toBe(5) + rect.x = 5 + expect(rect.centreX).toBe(10) + rect.width = 20 + expect(rect.centreX).toBe(15) // 5 + (20 * 0.5) + }) + + test("should get centreY", () => { + const rect = new Rectangle(0, 0, 0, 10) + expect(rect.centreY).toBe(5) + rect.y = 5 + expect(rect.centreY).toBe(10) + rect.height = 20 + expect(rect.centreY).toBe(15) // 5 + (20 * 0.5) + }) + }) + + describe("geometric operations", () => { + test("should return the centre point", () => { + const rect = new Rectangle(10, 20, 30, 40) // centreX = 10 + 15 = 25, centreY = 20 + 20 = 40 + const centre = rect.getCentre() + expect(centre[0]).toBe(25) + expect(centre[1]).toBe(40) + expect(centre).not.toBe(rect.pos) // Should be a new Point + }) + + test("should return the area", () => { + expect(new Rectangle(0, 0, 5, 10).getArea()).toBe(50) + expect(new Rectangle(1, 1, 0, 10).getArea()).toBe(0) + }) + + test("should return the perimeter", () => { + expect(new Rectangle(0, 0, 5, 10).getPerimeter()).toBe(30) // 2 * (5+10) + expect(new Rectangle(0, 0, 0, 0).getPerimeter()).toBe(0) + }) + + test("should return the top-left point", () => { + const rect = new Rectangle(1, 2, 3, 4) + const tl = rect.getTopLeft() + expect(tl[0]).toBe(1) + expect(tl[1]).toBe(2) + expect(tl).not.toBe(rect.pos) + }) + + test("should return the bottom-right point", () => { + const rect = new Rectangle(1, 2, 10, 20) // right=11, bottom=22 + const br = rect.getBottomRight() + expect(br[0]).toBe(11) + expect(br[1]).toBe(22) + }) + + test("should return the size", () => { + const rect = new Rectangle(1, 2, 30, 40) + const s = rect.getSize() + expect(s[0]).toBe(30) + expect(s[1]).toBe(40) + expect(s).not.toBe(rect.size) + }) + + test("should return the offset from top-left to the point", () => { + const rect = new Rectangle(10, 20, 5, 5) + const offset = rect.getOffsetTo([12, 23]) + expect(offset[0]).toBe(2) // 12 - 10 + expect(offset[1]).toBe(3) // 23 - 20 + }) + + test("should return the offset from the point to the top-left", () => { + const rect = new Rectangle(10, 20, 5, 5) + const offset = rect.getOffsetFrom([12, 23]) + expect(offset[0]).toBe(-2) // 10 - 12 + expect(offset[1]).toBe(-3) // 20 - 23 + }) + }) + + describe("containment and overlap", () => { + const rect = new Rectangle(10, 10, 20, 20) // x: 10, y: 10, right: 30, bottom: 30 + + test.each([ + [10, 10, true], // top-left corner + [29, 29, true], // bottom-right corner + [15, 15, true], // inside + [5, 15, false], // outside left + [30, 15, false], // outside right + [15, 5, false], // outside top + [15, 30, false], // outside bottom + [10, 29, true], // on bottom edge + [29, 10, true], // on right edge + ])("when checking if (%s, %s) is inside, should return %s", (x, y, expected) => { + expect(rect.containsXy(x, y)).toBe(expected) + }) + + test.each([ + [[0, 0] as Point, true], + [[9, 9] as Point, true], + [[5, 5] as Point, true], + [[-1, 5] as Point, false], + [[11, 5] as Point, false], + [[5, -1] as Point, false], + [[5, 11] as Point, false], + ])("should return %s for point %j", (point: Point, expected: boolean) => { + rect.updateTo([0, 0, 10, 10]) + expect(rect.containsPoint(point)).toBe(expected) + }) + + test.each([ + // Completely inside + [new Rectangle(10, 10, 10, 10), true], + // Touching edges + [new Rectangle(0, 0, 10, 10), true], + [new Rectangle(90, 90, 10, 10), true], + // Partially outside + [new Rectangle(-10, 10, 20, 20), false], + [new Rectangle(10, -10, 20, 20), false], + [new Rectangle(90, 10, 20, 20), false], + [new Rectangle(10, 90, 20, 20), false], + // Completely outside + [new Rectangle(200, 200, 10, 10), false], + // Outer rectangle is smaller + [new Rectangle(0, 0, 5, 5), new Rectangle(0, 0, 10, 10), true], + // Same size + [new Rectangle(0, 0, 99, 99), true], + ])("should return %s when checking if %s is inside outer rect", (inner: Rectangle, expectedOrOuter: boolean | Rectangle, expectedIfThreeArgs?: boolean) => { + let testOuter = rect + rect.updateTo([0, 0, 100, 100]) + + let testExpected = expectedOrOuter as boolean + if (typeof expectedOrOuter !== "boolean") { + testOuter = expectedOrOuter as Rectangle + testExpected = expectedIfThreeArgs as boolean + } + expect(testOuter.containsRect(inner)).toBe(testExpected) + }) + + test.each([ + // Completely overlapping + [new Rectangle(15, 15, 10, 10), true], // r2 inside r1 + // Partially overlapping + [new Rectangle(0, 0, 15, 15), true], // r2 top-left of r1 + [new Rectangle(20, 0, 15, 15), true], // r2 top-right of r1 + [new Rectangle(0, 20, 15, 15), true], // r2 bottom-left of r1 + [new Rectangle(20, 20, 15, 15), true], // r2 bottom-right of r1 + [new Rectangle(15, 5, 10, 30), true], // r2 overlaps vertically + [new Rectangle(5, 15, 30, 10), true], // r2 overlaps horizontally + // Touching (not overlapping by definition used) + [new Rectangle(30, 10, 10, 10), false], // r2 to the right, touching + [new Rectangle(0, 10, 10, 10), false], // r2 to the left, touching + [new Rectangle(10, 30, 10, 10), false], // r2 below, touching + [new Rectangle(10, 0, 10, 10), false], // r2 above, touching + // Not overlapping + [new Rectangle(100, 100, 5, 5), false], // r2 far away + [new Rectangle(0, 0, 5, 5), false], // r2 outside top-left + // rect1 inside rect2 + [new Rectangle(0, 0, 100, 100), true], + ])("should return %s for overlap with %s", (rect2, expected) => { + const rect = new Rectangle(10, 10, 20, 20) // 10,10 to 30,30 + + expect(rect.overlaps(rect2)).toBe(expected) + // Overlap should be commutative + expect(rect2.overlaps(rect)).toBe(expected) + }) + }) + + describe("resize operations", () => { + test("should resize from top-left corner while maintaining bottom-right", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) // x: 10, y: 10, width: 20, height: 20 + rect.resizeTopLeft(5, 5) + expect(rect.x).toBe(5) + expect(rect.y).toBe(5) + expect(rect.width).toBe(25) // 20 + (10 - 5) + expect(rect.height).toBe(25) // 20 + (10 - 5) + }) + + test("should handle negative coordinates for top-left resize", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeTopLeft(-5, -5) + expect(rect.x).toBe(-5) + expect(rect.y).toBe(-5) + expect(rect.width).toBe(35) // 20 + (10 - (-5)) + expect(rect.height).toBe(35) // 20 + (10 - (-5)) + }) + + test("should resize from bottom-left corner while maintaining top-right", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeBottomLeft(5, 35) + expect(rect.x).toBe(5) + expect(rect.y).toBe(10) + expect(rect.width).toBe(25) // 20 + (10 - 5) + expect(rect.height).toBe(25) // 35 - 10 + }) + + test("should handle negative coordinates for bottom-left resize", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeBottomLeft(-5, 35) + expect(rect.x).toBe(-5) + expect(rect.y).toBe(10) + expect(rect.width).toBe(35) // 20 + (10 - (-5)) + expect(rect.height).toBe(25) // 35 - 10 + }) + + test("should resize from top-right corner while maintaining bottom-left", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeTopRight(35, 5) + expect(rect.x).toBe(10) + expect(rect.y).toBe(5) + expect(rect.width).toBe(25) // 35 - 10 + expect(rect.height).toBe(25) // 20 + (10 - 5) + }) + + test("should handle negative coordinates for top-right resize", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeTopRight(35, -5) + expect(rect.x).toBe(10) + expect(rect.y).toBe(-5) + expect(rect.width).toBe(25) // 35 - 10 + expect(rect.height).toBe(35) // 20 + (10 - (-5)) + }) + + test("should resize from bottom-right corner while maintaining top-left", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeBottomRight(35, 35) + expect(rect.x).toBe(10) + expect(rect.y).toBe(10) + expect(rect.width).toBe(25) // 35 - 10 + expect(rect.height).toBe(25) // 35 - 10 + }) + + test("should handle negative coordinates for bottom-right resize", ({ rect }) => { + rect.updateTo([10, 10, 20, 20]) + rect.resizeBottomRight(35, -5) + expect(rect.x).toBe(10) + expect(rect.y).toBe(10) + expect(rect.width).toBe(25) // 35 - 10 + expect(rect.height).toBe(-15) // -5 - 10 + }) + + test("should set width, anchoring the right edge", () => { + const rect = new Rectangle(10, 0, 20, 0) // x:10, width:20 -> right:30 + rect.setWidthRightAnchored(15) // new width 15 + expect(rect.width).toBe(15) + expect(rect.x).toBe(15) // x = oldX + (oldWidth - newWidth) = 10 + (20 - 15) = 15 + expect(rect.right).toBe(30) // right should remain 30 (15+15) + }) + + test("should set height, anchoring the bottom edge", () => { + const rect = new Rectangle(0, 10, 0, 20) // y:10, height:20 -> bottom:30 + rect.setHeightBottomAnchored(15) // new height 15 + expect(rect.height).toBe(15) + expect(rect.y).toBe(15) // y = oldY + (oldHeight - newHeight) = 10 + (20-15) = 15 + expect(rect.bottom).toBe(30) // bottom should remain 30 (15+15) + }) + }) + + describe("debug drawing", () => { + test("should call canvas context methods", () => { + const rect = new Rectangle(10, 20, 30, 40) + const mockCtx = { + strokeStyle: "black", + lineWidth: 1, + beginPath: vi.fn(), + strokeRect: vi.fn(), + } as unknown as CanvasRenderingContext2D + + rect._drawDebug(mockCtx, "blue") + + expect(mockCtx.beginPath).toHaveBeenCalledOnce() + expect(mockCtx.strokeRect).toHaveBeenCalledWith(10, 20, 30, 40) + expect(mockCtx.strokeStyle).toBe("black") // Restored + expect(mockCtx.lineWidth).toBe(1) // Restored + + // Check if it was set during the call + // This is a bit tricky as it's restored in finally. + // We'd need to spy on the setter or check the calls in order. + // For simplicity, we're assuming the implementation is correct if strokeRect was called with correct params. + // A more robust test could involve spying on property assignments if vitest supports it easily. + }) + + test("should use default color if not provided", () => { + const rect = new Rectangle(1, 2, 3, 4) + const mockCtx = { + strokeStyle: "black", + lineWidth: 1, + beginPath: vi.fn(), + strokeRect: vi.fn(), + } as unknown as CanvasRenderingContext2D + rect._drawDebug(mockCtx) + // Check if strokeStyle was "red" at the time of strokeRect + // This requires a more complex mock or observing calls. + // A simple check is that it ran without error and values were restored. + expect(mockCtx.strokeRect).toHaveBeenCalledWith(1, 2, 3, 4) + expect(mockCtx.strokeStyle).toBe("black") + }) + }) +}) diff --git a/src/lib/litegraph/test/litegraph.test.ts b/src/lib/litegraph/test/litegraph.test.ts new file mode 100644 index 0000000000..16e3b0ef27 --- /dev/null +++ b/src/lib/litegraph/test/litegraph.test.ts @@ -0,0 +1,42 @@ +import { beforeEach, describe, expect, vi } from "vitest" + +import { clamp, LGraphCanvas, LiteGraph } from "@/litegraph" +import { LiteGraphGlobal } from "@/LiteGraphGlobal" + +import { test } from "./testExtensions" + +describe("Litegraph module", () => { + test("contains a global export", ({ expect }) => { + expect(LiteGraph).toBeInstanceOf(LiteGraphGlobal) + expect(LiteGraph.LGraphCanvas).toBe(LGraphCanvas) + }) + + test("has the same structure", ({ expect }) => { + const lgGlobal = new LiteGraphGlobal() + expect(lgGlobal).toMatchSnapshot("minLGraph") + }) + + test("clamps values", () => { + expect(clamp(-1.124, 13, 24)).toStrictEqual(13) + expect(clamp(Infinity, 18, 29)).toStrictEqual(29) + }) +}) + +describe("Import order dependency", () => { + beforeEach(() => { + vi.resetModules() + }) + + test("Imports without error when entry point is imported first", async ({ expect }) => { + async function importNormally() { + const entryPointImport = await import("@/litegraph") + const directImport = await import("@/LGraph") + + // Sanity check that imports were cleared. + expect(Object.is(LiteGraph, entryPointImport.LiteGraph)).toBe(false) + expect(Object.is(LiteGraph.LGraph, directImport.LGraph)).toBe(false) + } + + await expect(importNormally()).resolves.toBeUndefined() + }) +}) diff --git a/src/lib/litegraph/test/measure.test.ts b/src/lib/litegraph/test/measure.test.ts new file mode 100644 index 0000000000..57967d07bc --- /dev/null +++ b/src/lib/litegraph/test/measure.test.ts @@ -0,0 +1,282 @@ +import type { Point, Rect } from "../src/interfaces" + +import { test as baseTest } from "vitest" + +import { + addDirectionalOffset, + containsCentre, + containsRect, + createBounds, + dist2, + distance, + findPointOnCurve, + getOrientation, + isInRect, + isInRectangle, + isInsideRectangle, + isPointInRect, + overlapBounding, + rotateLink, + snapPoint, +} from "../src/measure" +import { LinkDirection } from "../src/types/globalEnums" + +const test = baseTest.extend({}) + +test("distance calculates correct distance between two points", ({ expect }) => { + expect(distance([0, 0], [3, 4])).toBe(5) // 3-4-5 triangle + expect(distance([1, 1], [4, 5])).toBe(5) // Same triangle, shifted + expect(distance([0, 0], [0, 0])).toBe(0) // Same point +}) + +test("dist2 calculates squared distance between points", ({ expect }) => { + expect(dist2(0, 0, 3, 4)).toBe(25) // 3-4-5 triangle squared + expect(dist2(1, 1, 4, 5)).toBe(25) // Same triangle, shifted + expect(dist2(0, 0, 0, 0)).toBe(0) // Same point +}) + +test("isInRectangle correctly identifies points inside rectangle", ({ expect }) => { + // Test points inside + expect(isInRectangle(5, 5, 0, 0, 10, 10)).toBe(true) + // Test points on edges (should be true) + expect(isInRectangle(0, 5, 0, 0, 10, 10)).toBe(true) + expect(isInRectangle(5, 0, 0, 0, 10, 10)).toBe(true) + // Test points outside + expect(isInRectangle(-1, 5, 0, 0, 10, 10)).toBe(false) + expect(isInRectangle(11, 5, 0, 0, 10, 10)).toBe(false) +}) + +test("isPointInRect correctly identifies points inside rectangle", ({ expect }) => { + const rect: Rect = [0, 0, 10, 10] + expect(isPointInRect([5, 5], rect)).toBe(true) + expect(isPointInRect([-1, 5], rect)).toBe(false) +}) + +test("overlapBounding correctly identifies overlapping rectangles", ({ expect }) => { + const rect1: Rect = [0, 0, 10, 10] + const rect2: Rect = [5, 5, 10, 10] + const rect3: Rect = [20, 20, 10, 10] + + expect(overlapBounding(rect1, rect2)).toBe(true) + expect(overlapBounding(rect1, rect3)).toBe(false) +}) + +test("containsCentre correctly identifies if rectangle contains center of another", ({ expect }) => { + const container: Rect = [0, 0, 20, 20] + const inside: Rect = [5, 5, 10, 10] // Center at 10,10 + const outside: Rect = [15, 15, 10, 10] // Center at 20,20 + + expect(containsCentre(container, inside)).toBe(true) + expect(containsCentre(container, outside)).toBe(false) +}) + +test("addDirectionalOffset correctly adds offsets", ({ expect }) => { + const point: Point = [10, 10] + + // Test each direction + addDirectionalOffset(5, LinkDirection.RIGHT, point) + expect(point).toEqual([15, 10]) + + point[0] = 10 // Reset X + addDirectionalOffset(5, LinkDirection.LEFT, point) + expect(point).toEqual([5, 10]) + + point[0] = 10 // Reset X + addDirectionalOffset(5, LinkDirection.DOWN, point) + expect(point).toEqual([10, 15]) + + point[1] = 10 // Reset Y + addDirectionalOffset(5, LinkDirection.UP, point) + expect(point).toEqual([10, 5]) +}) + +test("findPointOnCurve correctly interpolates curve points", ({ expect }) => { + const out: Point = [0, 0] + const start: Point = [0, 0] + const end: Point = [10, 10] + const controlA: Point = [0, 10] + const controlB: Point = [10, 0] + + // Test midpoint + findPointOnCurve(out, start, end, controlA, controlB, 0.5) + expect(out[0]).toBeCloseTo(5) + expect(out[1]).toBeCloseTo(5) +}) + +test("snapPoint correctly snaps points to grid", ({ expect }) => { + const point: Point = [12.3, 18.7] + + // Snap to 5 + snapPoint(point, 5) + expect(point).toEqual([10, 20]) + + // Test with no snap + const point2: Point = [12.3, 18.7] + expect(snapPoint(point2, 0)).toBe(false) + expect(point2).toEqual([12.3, 18.7]) + + const point3: Point = [15, 24.499] + expect(snapPoint(point3, 10)).toBe(true) + expect(point3).toEqual([20, 20]) +}) + +test("createBounds correctly creates bounding box", ({ expect }) => { + const objects = [ + { boundingRect: [0, 0, 10, 10] as Rect }, + { boundingRect: [5, 5, 10, 10] as Rect }, + ] + + const defaultBounds = createBounds(objects) + expect(defaultBounds).toEqual([-10, -10, 35, 35]) + + const bounds = createBounds(objects, 5) + expect(bounds).toEqual([-5, -5, 25, 25]) + + // Test empty set + expect(createBounds([])).toBe(null) +}) + +test("isInsideRectangle handles edge cases differently from isInRectangle", ({ expect }) => { + // isInsideRectangle returns false when point is exactly on left or top edge + expect(isInsideRectangle(0, 5, 0, 0, 10, 10)).toBe(false) + expect(isInsideRectangle(5, 0, 0, 0, 10, 10)).toBe(false) + + // Points just inside + expect(isInsideRectangle(0.1, 5, 0, 0, 10, 10)).toBe(true) + expect(isInsideRectangle(5, 0.1, 0, 0, 10, 10)).toBe(true) + + // Points clearly inside + expect(isInsideRectangle(5, 5, 0, 0, 10, 10)).toBe(true) + + // Points outside + expect(isInsideRectangle(-1, 5, 0, 0, 10, 10)).toBe(false) + expect(isInsideRectangle(11, 5, 0, 0, 10, 10)).toBe(false) +}) + +test("containsRect correctly identifies nested rectangles", ({ expect }) => { + const container: Rect = [0, 0, 20, 20] + + // Fully contained rectangle + const inside: Rect = [5, 5, 10, 10] + expect(containsRect(container, inside)).toBe(true) + + // Partially overlapping rectangle + const partial: Rect = [15, 15, 10, 10] + expect(containsRect(container, partial)).toBe(false) + + // Completely outside rectangle + const outside: Rect = [30, 30, 10, 10] + expect(containsRect(container, outside)).toBe(false) + + // Same size rectangle at same position (should return false) + const identical: Rect = [0, 0, 20, 20] + expect(containsRect(container, identical)).toBe(false) + + // Larger rectangle (should return false) + const larger: Rect = [-5, -5, 30, 30] + expect(containsRect(container, larger)).toBe(false) +}) + +test("rotateLink correctly rotates offsets between directions", ({ expect }) => { + const testCases = [ + { + offset: [10, 5] as Point, + from: LinkDirection.LEFT, + to: LinkDirection.RIGHT, + expected: [-10, -5], + }, + { + offset: [10, 5] as Point, + from: LinkDirection.LEFT, + to: LinkDirection.UP, + expected: [5, -10], + }, + { + offset: [10, 5] as Point, + from: LinkDirection.LEFT, + to: LinkDirection.DOWN, + expected: [-5, 10], + }, + { + offset: [10, 5] as Point, + from: LinkDirection.RIGHT, + to: LinkDirection.LEFT, + expected: [-10, -5], + }, + { + offset: [10, 5] as Point, + from: LinkDirection.UP, + to: LinkDirection.DOWN, + expected: [-10, -5], + }, + ] + + for (const { offset, from, to, expected } of testCases) { + const testOffset = [...offset] as Point + rotateLink(testOffset, from, to) + expect(testOffset).toEqual(expected) + } + + // Test no rotation when directions are the same + const sameDir = [10, 5] as Point + rotateLink(sameDir, LinkDirection.LEFT, LinkDirection.LEFT) + expect(sameDir).toEqual([10, 5]) + + // Test center/none cases + const centerCase = [10, 5] as Point + rotateLink(centerCase, LinkDirection.LEFT, LinkDirection.CENTER) + expect(centerCase).toEqual([10, 5]) + + const noneCase = [10, 5] as Point + rotateLink(noneCase, LinkDirection.LEFT, LinkDirection.NONE) + expect(noneCase).toEqual([10, 5]) +}) + +test("getOrientation correctly determines point position relative to line", ({ expect }) => { + const lineStart: Point = [0, 0] + const lineEnd: Point = [10, 10] + + // Point to the left of the line + expect(getOrientation(lineStart, lineEnd, 0, 10)).toBeLessThan(0) + + // Point to the right of the line + expect(getOrientation(lineStart, lineEnd, 10, 0)).toBeGreaterThan(0) + + // Point on the line + expect(getOrientation(lineStart, lineEnd, 5, 5)).toBe(0) + + // Test with horizontal line + const hLineEnd: Point = [10, 0] + expect(getOrientation(lineStart, hLineEnd, 5, 5)).toBeLessThan(0) // Above line + expect(getOrientation(lineStart, hLineEnd, 5, -5)).toBeGreaterThan(0) // Below line + + // Test with vertical line + const vLineEnd: Point = [0, 10] + expect(getOrientation(lineStart, vLineEnd, 5, 5)).toBeGreaterThan(0) // Right of line + expect(getOrientation(lineStart, vLineEnd, -5, 5)).toBeLessThan(0) // Left of line +}) + +test("isInRect correctly identifies if point coordinates are inside rectangle", ({ expect }) => { + const rect: Rect = [0, 0, 10, 10] + + // Points inside + expect(isInRect(5, 5, rect)).toBe(true) + + // Points on edges (should be true for left/top, false for right/bottom) + expect(isInRect(0, 5, rect)).toBe(true) // Left edge + expect(isInRect(5, 0, rect)).toBe(true) // Top edge + expect(isInRect(10, 5, rect)).toBe(false) // Right edge + expect(isInRect(5, 10, rect)).toBe(false) // Bottom edge + + // Points at corners + expect(isInRect(0, 0, rect)).toBe(true) // Top-left + expect(isInRect(10, 0, rect)).toBe(false) // Top-right + expect(isInRect(0, 10, rect)).toBe(false) // Bottom-left + expect(isInRect(10, 10, rect)).toBe(false) // Bottom-right + + // Points outside + expect(isInRect(-1, 5, rect)).toBe(false) + expect(isInRect(11, 5, rect)).toBe(false) + expect(isInRect(5, -1, rect)).toBe(false) + expect(isInRect(5, 11, rect)).toBe(false) +}) diff --git a/src/lib/litegraph/test/serialise.test.ts b/src/lib/litegraph/test/serialise.test.ts new file mode 100644 index 0000000000..6c4c9e9eea --- /dev/null +++ b/src/lib/litegraph/test/serialise.test.ts @@ -0,0 +1,30 @@ +import type { ISerialisedGraph } from "@/types/serialisation" + +import { describe } from "vitest" + +import { LGraph, LGraphGroup, LGraphNode } from "@/litegraph" + +import { test } from "./testExtensions" + +describe("LGraph Serialisation", () => { + test("can (de)serialise node / group titles", ({ expect, minimalGraph }) => { + const nodeTitle = "Test Node" + const groupTitle = "Test Group" + + minimalGraph.add(new LGraphNode(nodeTitle)) + minimalGraph.add(new LGraphGroup(groupTitle)) + + expect(minimalGraph.nodes.length).toBe(1) + expect(minimalGraph.nodes[0].title).toEqual(nodeTitle) + + expect(minimalGraph.groups.length).toBe(1) + expect(minimalGraph.groups[0].title).toEqual(groupTitle) + + const serialised = JSON.stringify(minimalGraph.serialize()) + const deserialised = JSON.parse(serialised) as ISerialisedGraph + + const copied = new LGraph(deserialised) + expect(copied.nodes.length).toBe(1) + expect(copied.groups.length).toBe(1) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/ExecutableNodeDTO.test.ts b/src/lib/litegraph/test/subgraph/ExecutableNodeDTO.test.ts new file mode 100644 index 0000000000..0782ff4f9d --- /dev/null +++ b/src/lib/litegraph/test/subgraph/ExecutableNodeDTO.test.ts @@ -0,0 +1,460 @@ +import { describe, expect, it, vi } from "vitest" + +import { LGraph, LGraphNode } from "@/litegraph" +import { ExecutableNodeDTO } from "@/subgraph/ExecutableNodeDTO" + +import { + createNestedSubgraphs, + createTestSubgraph, + createTestSubgraphNode, +} from "./fixtures/subgraphHelpers" + +describe("ExecutableNodeDTO Creation", () => { + it("should create DTO from regular node", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.addInput("in", "number") + node.addOutput("out", "string") + graph.add(node) + + const executableNodes = new Map() + const dto = new ExecutableNodeDTO(node, [], executableNodes, undefined) + + expect(dto.node).toBe(node) + expect(dto.subgraphNodePath).toEqual([]) + expect(dto.subgraphNode).toBeUndefined() + expect(dto.id).toBe(node.id.toString()) + }) + + it("should create DTO with subgraph path", () => { + const graph = new LGraph() + const node = new LGraphNode("Inner Node") + node.id = 42 + graph.add(node) + const subgraphPath = ["10", "20"] as const + + const dto = new ExecutableNodeDTO(node, subgraphPath, new Map(), undefined) + + expect(dto.subgraphNodePath).toBe(subgraphPath) + expect(dto.id).toBe("10:20:42") + }) + + it("should clone input slot data", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.addInput("input1", "number") + node.addInput("input2", "string") + node.inputs[0].link = 123 // Simulate connected input + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + expect(dto.inputs).toHaveLength(2) + expect(dto.inputs[0].name).toBe("input1") + expect(dto.inputs[0].type).toBe("number") + expect(dto.inputs[0].linkId).toBe(123) + expect(dto.inputs[1].name).toBe("input2") + expect(dto.inputs[1].type).toBe("string") + expect(dto.inputs[1].linkId).toBeNull() + + // Should be a copy, not reference + expect(dto.inputs).not.toBe(node.inputs) + }) + + it("should inherit graph reference", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + expect(dto.graph).toBe(graph) + }) + + it("should wrap applyToGraph method if present", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + const mockApplyToGraph = vi.fn() + Object.assign(node, { applyToGraph: mockApplyToGraph }) + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + expect(dto.applyToGraph).toBeDefined() + + // Test that wrapper calls original method + const args = ["arg1", "arg2"] + dto.applyToGraph!(args[0], args[1]) + + expect(mockApplyToGraph).toHaveBeenCalledWith(args[0], args[1]) + }) + + it("should not create applyToGraph wrapper if method doesn't exist", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + expect(dto.applyToGraph).toBeUndefined() + }) +}) + +describe("ExecutableNodeDTO Path-Based IDs", () => { + it("should generate simple ID for root node", () => { + const graph = new LGraph() + const node = new LGraphNode("Root Node") + node.id = 5 + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + expect(dto.id).toBe("5") + }) + + it("should generate path-based ID for nested node", () => { + const graph = new LGraph() + const node = new LGraphNode("Nested Node") + node.id = 3 + graph.add(node) + const path = ["1", "2"] as const + + const dto = new ExecutableNodeDTO(node, path, new Map(), undefined) + + expect(dto.id).toBe("1:2:3") + }) + + it("should handle deep nesting paths", () => { + const graph = new LGraph() + const node = new LGraphNode("Deep Node") + node.id = 99 + graph.add(node) + const path = ["1", "2", "3", "4", "5"] as const + + const dto = new ExecutableNodeDTO(node, path, new Map(), undefined) + + expect(dto.id).toBe("1:2:3:4:5:99") + }) + + it("should handle string and number IDs consistently", () => { + const graph = new LGraph() + const node1 = new LGraphNode("Node 1") + node1.id = 10 + graph.add(node1) + + const node2 = new LGraphNode("Node 2") + node2.id = 20 + graph.add(node2) + + const dto1 = new ExecutableNodeDTO(node1, ["5"], new Map(), undefined) + const dto2 = new ExecutableNodeDTO(node2, ["5"], new Map(), undefined) + + expect(dto1.id).toBe("5:10") + expect(dto2.id).toBe("5:20") + }) +}) + +describe("ExecutableNodeDTO Input Resolution", () => { + it("should return undefined for unconnected inputs", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.addInput("in", "number") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + // Unconnected input should return undefined + const resolved = dto.resolveInput(0) + expect(resolved).toBeUndefined() + }) + + it("should throw for non-existent input slots", () => { + const graph = new LGraph() + const node = new LGraphNode("No Input Node") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + // Should throw SlotIndexError for non-existent input + expect(() => dto.resolveInput(0)).toThrow("No input found for flattened id") + }) + + it("should handle subgraph boundary inputs", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + nodeCount: 1, + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Get the inner node and create DTO + const innerNode = subgraph.nodes[0] + const dto = new ExecutableNodeDTO(innerNode, ["1"], new Map(), subgraphNode) + + // Should return undefined for unconnected input + const resolved = dto.resolveInput(0) + expect(resolved).toBeUndefined() + }) +}) + +describe("ExecutableNodeDTO Output Resolution", () => { + it("should resolve outputs for simple nodes", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.addOutput("out", "string") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + // resolveOutput requires type and visited parameters + const resolved = dto.resolveOutput(0, "string", new Set()) + + expect(resolved).toBeDefined() + expect(resolved?.node).toBe(dto) + expect(resolved?.origin_id).toBe(dto.id) + expect(resolved?.origin_slot).toBe(0) + }) + + it("should resolve cross-boundary outputs in subgraphs", () => { + const subgraph = createTestSubgraph({ + outputs: [{ name: "output1", type: "string" }], + nodeCount: 1, + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Get the inner node and create DTO + const innerNode = subgraph.nodes[0] + const dto = new ExecutableNodeDTO(innerNode, ["1"], new Map(), subgraphNode) + + const resolved = dto.resolveOutput(0, "string", new Set()) + + expect(resolved).toBeDefined() + }) + + it("should handle nodes with no outputs", () => { + const graph = new LGraph() + const node = new LGraphNode("No Output Node") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + // For regular nodes, resolveOutput returns the node itself even if no outputs + // This tests the current implementation behavior + const resolved = dto.resolveOutput(0, "string", new Set()) + expect(resolved).toBeDefined() + expect(resolved?.node).toBe(dto) + expect(resolved?.origin_slot).toBe(0) + }) +}) + +describe("ExecutableNodeDTO Properties", () => { + it("should provide access to basic properties", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.id = 42 + node.addInput("input", "number") + node.addOutput("output", "string") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, ["1", "2"], new Map(), undefined) + + expect(dto.id).toBe("1:2:42") + expect(dto.type).toBe(node.type) + expect(dto.title).toBe(node.title) + expect(dto.mode).toBe(node.mode) + expect(dto.isVirtualNode).toBe(node.isVirtualNode) + }) + + it("should provide access to input information", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.addInput("testInput", "number") + node.inputs[0].link = 999 // Simulate connection + graph.add(node) + + const dto = new ExecutableNodeDTO(node, [], new Map(), undefined) + + expect(dto.inputs).toBeDefined() + expect(dto.inputs).toHaveLength(1) + expect(dto.inputs[0].name).toBe("testInput") + expect(dto.inputs[0].type).toBe("number") + expect(dto.inputs[0].linkId).toBe(999) + }) +}) + +describe("ExecutableNodeDTO Memory Efficiency", () => { + it("should create lightweight objects", () => { + const graph = new LGraph() + const node = new LGraphNode("Test Node") + node.addInput("in1", "number") + node.addInput("in2", "string") + node.addOutput("out1", "number") + node.addOutput("out2", "string") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, ["1"], new Map(), undefined) + + // DTO should be lightweight - only essential properties + expect(dto.node).toBe(node) // Reference, not copy + expect(dto.subgraphNodePath).toEqual(["1"]) // Reference to path + expect(dto.inputs).toHaveLength(2) // Copied input data only + + // Should not duplicate heavy node data + expect(dto.hasOwnProperty("outputs")).toBe(false) // Outputs not copied + expect(dto.hasOwnProperty("widgets")).toBe(false) // Widgets not copied + }) + + it("should handle disposal without memory leaks", () => { + const graph = new LGraph() + const nodes: ExecutableNodeDTO[] = [] + + // Create DTOs + for (let i = 0; i < 100; i++) { + const node = new LGraphNode(`Node ${i}`) + node.id = i + graph.add(node) + const dto = new ExecutableNodeDTO(node, ["parent"], new Map(), undefined) + nodes.push(dto) + } + + expect(nodes).toHaveLength(100) + + // Clear references + nodes.length = 0 + + // DTOs should be eligible for garbage collection + // (No explicit disposal needed - they're lightweight wrappers) + expect(nodes).toHaveLength(0) + }) + + it("should not retain unnecessary references", () => { + const subgraph = createTestSubgraph({ nodeCount: 1 }) + const subgraphNode = createTestSubgraphNode(subgraph) + const innerNode = subgraph.nodes[0] + + const dto = new ExecutableNodeDTO(innerNode, ["1"], new Map(), subgraphNode) + + // Should hold necessary references + expect(dto.node).toBe(innerNode) + expect(dto.subgraphNode).toBe(subgraphNode) + expect(dto.graph).toBe(innerNode.graph) + + // Should not hold heavy references that prevent GC + expect(dto.hasOwnProperty("parentGraph")).toBe(false) + expect(dto.hasOwnProperty("rootGraph")).toBe(false) + }) +}) + +describe("ExecutableNodeDTO Integration", () => { + it("should work with SubgraphNode flattening", () => { + const subgraph = createTestSubgraph({ nodeCount: 3 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + const flattened = subgraphNode.getInnerNodes(new Map()) + + expect(flattened).toHaveLength(3) + expect(flattened[0]).toBeInstanceOf(ExecutableNodeDTO) + expect(flattened[0].id).toMatch(/^1:\d+$/) + }) + + it.skip("should handle nested subgraph flattening", () => { + // FIXME: Complex nested structure requires proper parent graph setup + // This test needs investigation of how resolveSubgraphIdPath works + // Skip for now - will implement in edge cases test file + const nested = createNestedSubgraphs({ + depth: 2, + nodesPerLevel: 1, + }) + + const rootSubgraphNode = nested.subgraphNodes[0] + const executableNodes = new Map() + const flattened = rootSubgraphNode.getInnerNodes(executableNodes) + + expect(flattened.length).toBeGreaterThan(0) + const hierarchicalIds = flattened.filter(dto => dto.id.includes(":")) + expect(hierarchicalIds.length).toBeGreaterThan(0) + }) + + it("should preserve original node properties through DTO", () => { + const graph = new LGraph() + const originalNode = new LGraphNode("Original") + originalNode.id = 123 + originalNode.addInput("test", "number") + originalNode.properties = { value: 42 } + graph.add(originalNode) + + const dto = new ExecutableNodeDTO(originalNode, ["parent"], new Map(), undefined) + + // DTO should provide access to original node properties + expect(dto.node.id).toBe(123) + expect(dto.node.inputs).toHaveLength(1) + expect(dto.node.properties.value).toBe(42) + + // But DTO ID should be path-based + expect(dto.id).toBe("parent:123") + }) + + it("should handle execution context correctly", () => { + const subgraph = createTestSubgraph({ nodeCount: 1 }) + const subgraphNode = createTestSubgraphNode(subgraph, { id: 99 }) + const innerNode = subgraph.nodes[0] + innerNode.id = 55 + + const dto = new ExecutableNodeDTO(innerNode, ["99"], new Map(), subgraphNode) + + // DTO provides execution context + expect(dto.id).toBe("99:55") // Path-based execution ID + expect(dto.node.id).toBe(55) // Original node ID preserved + expect(dto.subgraphNode?.id).toBe(99) // Subgraph context + }) +}) + +describe("ExecutableNodeDTO Scale Testing", () => { + it("should create DTOs at scale", () => { + const graph = new LGraph() + const startTime = performance.now() + const dtos: ExecutableNodeDTO[] = [] + + // Create DTOs to test performance + for (let i = 0; i < 1000; i++) { + const node = new LGraphNode(`Node ${i}`) + node.id = i + node.addInput("in", "number") + graph.add(node) + + const dto = new ExecutableNodeDTO(node, ["parent"], new Map(), undefined) + dtos.push(dto) + } + + const endTime = performance.now() + const duration = endTime - startTime + + expect(dtos).toHaveLength(1000) + // Test deterministic properties instead of flaky timing + expect(dtos[0].id).toBe("parent:0") + expect(dtos[999].id).toBe("parent:999") + expect(dtos.every((dto, i) => dto.id === `parent:${i}`)).toBe(true) + + console.log(`Created 1000 DTOs in ${duration.toFixed(2)}ms`) + }) + + it("should handle complex path generation correctly", () => { + const graph = new LGraph() + const node = new LGraphNode("Deep Node") + node.id = 999 + graph.add(node) + + // Test deterministic path generation behavior + const testCases = [ + { depth: 1, expectedId: "1:999" }, + { depth: 3, expectedId: "1:2:3:999" }, + { depth: 5, expectedId: "1:2:3:4:5:999" }, + { depth: 10, expectedId: "1:2:3:4:5:6:7:8:9:10:999" }, + ] + + for (const testCase of testCases) { + const path = Array.from({ length: testCase.depth }, (_, i) => (i + 1).toString()) + const dto = new ExecutableNodeDTO(node, path, new Map(), undefined) + expect(dto.id).toBe(testCase.expectedId) + } + }) +}) diff --git a/src/lib/litegraph/test/subgraph/Subgraph.test.ts b/src/lib/litegraph/test/subgraph/Subgraph.test.ts new file mode 100644 index 0000000000..af3c7d6b8d --- /dev/null +++ b/src/lib/litegraph/test/subgraph/Subgraph.test.ts @@ -0,0 +1,303 @@ +/** + * Core Subgraph Tests + * + * This file implements fundamental tests for the Subgraph class that establish + * patterns for the rest of the testing team. These tests cover construction, + * basic I/O management, and known issues. + */ + +import { describe, expect, it } from "vitest" + +import { RecursionError } from "@/infrastructure/RecursionError" +import { LGraph, Subgraph } from "@/litegraph" +import { createUuidv4 } from "@/utils/uuid" + +import { subgraphTest } from "./fixtures/subgraphFixtures" +import { + assertSubgraphStructure, + createTestSubgraph, + createTestSubgraphData, +} from "./fixtures/subgraphHelpers" + +describe("Subgraph Construction", () => { + it("should create a subgraph with minimal data", () => { + const subgraph = createTestSubgraph() + + assertSubgraphStructure(subgraph, { + inputCount: 0, + outputCount: 0, + nodeCount: 0, + name: "Test Subgraph", + }) + + expect(subgraph.id).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i) + expect(subgraph.inputNode).toBeDefined() + expect(subgraph.outputNode).toBeDefined() + expect(subgraph.inputNode.id).toBe(-10) + expect(subgraph.outputNode.id).toBe(-20) + }) + + it("should require a root graph", () => { + const subgraphData = createTestSubgraphData() + + expect(() => { + // @ts-expect-error Testing invalid null parameter + new Subgraph(null, subgraphData) + }).toThrow("Root graph is required") + }) + + it("should accept custom name and ID", () => { + const customId = createUuidv4() + const customName = "My Custom Subgraph" + + const subgraph = createTestSubgraph({ + id: customId, + name: customName, + }) + + expect(subgraph.id).toBe(customId) + expect(subgraph.name).toBe(customName) + }) + + it("should initialize with empty inputs and outputs", () => { + const subgraph = createTestSubgraph() + + expect(subgraph.inputs).toHaveLength(0) + expect(subgraph.outputs).toHaveLength(0) + expect(subgraph.widgets).toHaveLength(0) + }) + + it("should have properly configured input and output nodes", () => { + const subgraph = createTestSubgraph() + + // Input node should be positioned on the left + expect(subgraph.inputNode.pos[0]).toBeLessThan(100) + + // Output node should be positioned on the right + expect(subgraph.outputNode.pos[0]).toBeGreaterThan(300) + + // Both should reference the subgraph + expect(subgraph.inputNode.subgraph).toBe(subgraph) + expect(subgraph.outputNode.subgraph).toBe(subgraph) + }) +}) + +describe("Subgraph Input/Output Management", () => { + subgraphTest("should add a single input", ({ emptySubgraph }) => { + const input = emptySubgraph.addInput("test_input", "number") + + expect(emptySubgraph.inputs).toHaveLength(1) + expect(input.name).toBe("test_input") + expect(input.type).toBe("number") + expect(emptySubgraph.inputs.indexOf(input)).toBe(0) + }) + + subgraphTest("should add a single output", ({ emptySubgraph }) => { + const output = emptySubgraph.addOutput("test_output", "string") + + expect(emptySubgraph.outputs).toHaveLength(1) + expect(output.name).toBe("test_output") + expect(output.type).toBe("string") + expect(emptySubgraph.outputs.indexOf(output)).toBe(0) + }) + + subgraphTest("should maintain correct indices when adding multiple inputs", ({ emptySubgraph }) => { + const input1 = emptySubgraph.addInput("input_1", "number") + const input2 = emptySubgraph.addInput("input_2", "string") + const input3 = emptySubgraph.addInput("input_3", "boolean") + + expect(emptySubgraph.inputs.indexOf(input1)).toBe(0) + expect(emptySubgraph.inputs.indexOf(input2)).toBe(1) + expect(emptySubgraph.inputs.indexOf(input3)).toBe(2) + expect(emptySubgraph.inputs).toHaveLength(3) + }) + + subgraphTest("should maintain correct indices when adding multiple outputs", ({ emptySubgraph }) => { + const output1 = emptySubgraph.addOutput("output_1", "number") + const output2 = emptySubgraph.addOutput("output_2", "string") + const output3 = emptySubgraph.addOutput("output_3", "boolean") + + expect(emptySubgraph.outputs.indexOf(output1)).toBe(0) + expect(emptySubgraph.outputs.indexOf(output2)).toBe(1) + expect(emptySubgraph.outputs.indexOf(output3)).toBe(2) + expect(emptySubgraph.outputs).toHaveLength(3) + }) + + subgraphTest("should remove inputs correctly", ({ simpleSubgraph }) => { + // Add a second input first + simpleSubgraph.addInput("second_input", "string") + expect(simpleSubgraph.inputs).toHaveLength(2) + + // Remove the first input + const firstInput = simpleSubgraph.inputs[0] + simpleSubgraph.removeInput(firstInput) + + expect(simpleSubgraph.inputs).toHaveLength(1) + expect(simpleSubgraph.inputs[0].name).toBe("second_input") + // Verify it's at index 0 in the array + expect(simpleSubgraph.inputs.indexOf(simpleSubgraph.inputs[0])).toBe(0) + }) + + subgraphTest("should remove outputs correctly", ({ simpleSubgraph }) => { + // Add a second output first + simpleSubgraph.addOutput("second_output", "string") + expect(simpleSubgraph.outputs).toHaveLength(2) + + // Remove the first output + const firstOutput = simpleSubgraph.outputs[0] + simpleSubgraph.removeOutput(firstOutput) + + expect(simpleSubgraph.outputs).toHaveLength(1) + expect(simpleSubgraph.outputs[0].name).toBe("second_output") + // Verify it's at index 0 in the array + expect(simpleSubgraph.outputs.indexOf(simpleSubgraph.outputs[0])).toBe(0) + }) +}) + +describe("Subgraph Serialization", () => { + subgraphTest("should serialize empty subgraph", ({ emptySubgraph }) => { + const serialized = emptySubgraph.asSerialisable() + + expect(serialized.version).toBe(1) + expect(serialized.id).toBeTruthy() + expect(serialized.name).toBe("Empty Test Subgraph") + expect(serialized.inputs).toHaveLength(0) + expect(serialized.outputs).toHaveLength(0) + expect(serialized.nodes).toHaveLength(0) + expect(typeof serialized.links).toBe("object") + }) + + subgraphTest("should serialize subgraph with inputs and outputs", ({ simpleSubgraph }) => { + const serialized = simpleSubgraph.asSerialisable() + + expect(serialized.inputs).toHaveLength(1) + expect(serialized.outputs).toHaveLength(1) + expect(serialized.inputs[0].name).toBe("input") + expect(serialized.inputs[0].type).toBe("number") + expect(serialized.outputs[0].name).toBe("output") + expect(serialized.outputs[0].type).toBe("number") + }) + + subgraphTest("should include input and output nodes in serialization", ({ emptySubgraph }) => { + const serialized = emptySubgraph.asSerialisable() + + expect(serialized.inputNode).toBeDefined() + expect(serialized.outputNode).toBeDefined() + expect(serialized.inputNode.id).toBe(-10) + expect(serialized.outputNode.id).toBe(-20) + }) +}) + +describe("Subgraph Known Issues", () => { + it.todo("should enforce MAX_NESTED_SUBGRAPHS limit", () => { + // This test documents that MAX_NESTED_SUBGRAPHS = 1000 is defined + // but not actually enforced anywhere in the code. + // + // Expected behavior: Should throw error when nesting exceeds limit + // Actual behavior: No validation is performed + // + // This safety limit should be implemented to prevent runaway recursion. + }) + + it("should provide MAX_NESTED_SUBGRAPHS constant", () => { + expect(Subgraph.MAX_NESTED_SUBGRAPHS).toBe(1000) + }) + + it("should have recursion detection in place", () => { + // Verify that RecursionError is available and can be thrown + expect(() => { + throw new RecursionError("test recursion") + }).toThrow(RecursionError) + + expect(() => { + throw new RecursionError("test recursion") + }).toThrow("test recursion") + }) +}) + +describe("Subgraph Root Graph Relationship", () => { + it("should maintain reference to root graph", () => { + const rootGraph = new LGraph() + const subgraphData = createTestSubgraphData() + const subgraph = new Subgraph(rootGraph, subgraphData) + + expect(subgraph.rootGraph).toBe(rootGraph) + }) + + it("should inherit root graph in nested subgraphs", () => { + const rootGraph = new LGraph() + const parentData = createTestSubgraphData({ + name: "Parent Subgraph", + }) + const parentSubgraph = new Subgraph(rootGraph, parentData) + + // Create a nested subgraph + const nestedData = createTestSubgraphData({ + name: "Nested Subgraph", + }) + const nestedSubgraph = new Subgraph(rootGraph, nestedData) + + expect(nestedSubgraph.rootGraph).toBe(rootGraph) + expect(parentSubgraph.rootGraph).toBe(rootGraph) + }) +}) + +describe("Subgraph Error Handling", () => { + subgraphTest("should handle removing non-existent input gracefully", ({ emptySubgraph }) => { + // Create a fake input that doesn't belong to this subgraph + const fakeInput = emptySubgraph.addInput("temp", "number") + emptySubgraph.removeInput(fakeInput) // Remove it first + + // Now try to remove it again + expect(() => { + emptySubgraph.removeInput(fakeInput) + }).toThrow("Input not found") + }) + + subgraphTest("should handle removing non-existent output gracefully", ({ emptySubgraph }) => { + // Create a fake output that doesn't belong to this subgraph + const fakeOutput = emptySubgraph.addOutput("temp", "number") + emptySubgraph.removeOutput(fakeOutput) // Remove it first + + // Now try to remove it again + expect(() => { + emptySubgraph.removeOutput(fakeOutput) + }).toThrow("Output not found") + }) +}) + +describe("Subgraph Integration", () => { + it("should work with LGraph's node management", () => { + const subgraph = createTestSubgraph({ + nodeCount: 3, + }) + + // Verify nodes were added to the subgraph + expect(subgraph.nodes).toHaveLength(3) + + // Verify we can access nodes by ID + const firstNode = subgraph.getNodeById(1) + expect(firstNode).toBeDefined() + expect(firstNode?.title).toContain("Test Node") + }) + + it("should maintain link integrity", () => { + const subgraph = createTestSubgraph({ + nodeCount: 2, + }) + + const node1 = subgraph.nodes[0] + const node2 = subgraph.nodes[1] + + // Connect the nodes + node1.connect(0, node2, 0) + + // Verify link was created + expect(subgraph.links.size).toBe(1) + + // Verify link integrity + const link = Array.from(subgraph.links.values())[0] + expect(link.origin_id).toBe(node1.id) + expect(link.target_id).toBe(node2.id) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphEdgeCases.test.ts b/src/lib/litegraph/test/subgraph/SubgraphEdgeCases.test.ts new file mode 100644 index 0000000000..c6ee6156f7 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphEdgeCases.test.ts @@ -0,0 +1,364 @@ +/** + * SubgraphEdgeCases Tests + * + * Tests for edge cases, error handling, and boundary conditions in the subgraph system. + * This covers unusual scenarios, invalid states, and stress testing. + */ + +import { describe, expect, it } from "vitest" + +import { LGraph, LGraphNode, Subgraph } from "@/litegraph" + +import { + createNestedSubgraphs, + createTestSubgraph, + createTestSubgraphNode, +} from "./fixtures/subgraphHelpers" + +describe("SubgraphEdgeCases - Recursion Detection", () => { + it("should handle circular subgraph references without crashing", () => { + const sub1 = createTestSubgraph({ name: "Sub1" }) + const sub2 = createTestSubgraph({ name: "Sub2" }) + + // Create circular reference + const node1 = createTestSubgraphNode(sub1, { id: 1 }) + const node2 = createTestSubgraphNode(sub2, { id: 2 }) + + sub1.add(node2) + sub2.add(node1) + + // Should not crash or hang - currently throws path resolution error due to circular structure + expect(() => { + const executableNodes = new Map() + node1.getInnerNodes(executableNodes) + }).toThrow(/Node \[\d+\] not found/) // Current behavior: path resolution fails + }) + + it("should handle deep nesting scenarios", () => { + // Test with reasonable depth to avoid timeout + const nested = createNestedSubgraphs({ depth: 10, nodesPerLevel: 1 }) + + // Should create nested structure without errors + expect(nested.subgraphs).toHaveLength(10) + expect(nested.subgraphNodes).toHaveLength(10) + + // First level should exist and be accessible + const firstLevel = nested.rootGraph.nodes[0] + expect(firstLevel).toBeDefined() + expect(firstLevel.isSubgraphNode()).toBe(true) + }) + + it.todo("should use WeakSet for cycle detection", () => { + // TODO: This test is currently skipped because cycle detection has a bug + // The fix is to pass 'visited' directly instead of 'new Set(visited)' in SubgraphNode.ts:299 + const subgraph = createTestSubgraph({ nodeCount: 1 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Add to own subgraph to create cycle + subgraph.add(subgraphNode) + + // Should throw due to cycle detection + const executableNodes = new Map() + expect(() => { + subgraphNode.getInnerNodes(executableNodes) + }).toThrow(/while flattening subgraph/i) + }) + + it("should respect MAX_NESTED_SUBGRAPHS constant", () => { + // Verify the constant exists and is a reasonable positive number + expect(Subgraph.MAX_NESTED_SUBGRAPHS).toBeDefined() + expect(typeof Subgraph.MAX_NESTED_SUBGRAPHS).toBe("number") + expect(Subgraph.MAX_NESTED_SUBGRAPHS).toBeGreaterThan(0) + expect(Subgraph.MAX_NESTED_SUBGRAPHS).toBeLessThanOrEqual(10_000) // Reasonable upper bound + + // Note: Currently not enforced in implementation + // This test documents the intended behavior + }) +}) + +describe("SubgraphEdgeCases - Invalid States", () => { + it("should handle removing non-existent inputs gracefully", () => { + const subgraph = createTestSubgraph() + const fakeInput = { name: "fake", type: "number", disconnect: () => {} } as any + + // Should throw appropriate error for non-existent input + expect(() => { + subgraph.removeInput(fakeInput) + }).toThrow(/Input not found/) // Expected error + }) + + it("should handle removing non-existent outputs gracefully", () => { + const subgraph = createTestSubgraph() + const fakeOutput = { name: "fake", type: "number", disconnect: () => {} } as any + + expect(() => { + subgraph.removeOutput(fakeOutput) + }).toThrow(/Output not found/) // Expected error + }) + + it("should handle null/undefined input names", () => { + const subgraph = createTestSubgraph() + + // ISSUE: Current implementation allows null/undefined names which may cause runtime errors + // TODO: Consider adding validation to prevent null/undefined names + // This test documents the current permissive behavior + expect(() => { + subgraph.addInput(null as any, "number") + }).not.toThrow() // Current behavior: allows null + + expect(() => { + subgraph.addInput(undefined as any, "number") + }).not.toThrow() // Current behavior: allows undefined + }) + + it("should handle null/undefined output names", () => { + const subgraph = createTestSubgraph() + + // ISSUE: Current implementation allows null/undefined names which may cause runtime errors + // TODO: Consider adding validation to prevent null/undefined names + // This test documents the current permissive behavior + expect(() => { + subgraph.addOutput(null as any, "number") + }).not.toThrow() // Current behavior: allows null + + expect(() => { + subgraph.addOutput(undefined as any, "number") + }).not.toThrow() // Current behavior: allows undefined + }) + + it("should handle empty string names", () => { + const subgraph = createTestSubgraph() + + // Current implementation may allow empty strings + // Document the actual behavior + expect(() => { + subgraph.addInput("", "number") + }).not.toThrow() // Current behavior: allows empty strings + + expect(() => { + subgraph.addOutput("", "number") + }).not.toThrow() // Current behavior: allows empty strings + }) + + it("should handle undefined types gracefully", () => { + const subgraph = createTestSubgraph() + + // Undefined type should not crash but may have default behavior + expect(() => { + subgraph.addInput("test", undefined as any) + }).not.toThrow() + + expect(() => { + subgraph.addOutput("test", undefined as any) + }).not.toThrow() + }) + + it("should handle duplicate slot names", () => { + const subgraph = createTestSubgraph() + + // Add first input + subgraph.addInput("duplicate", "number") + + // Adding duplicate should not crash (current behavior allows it) + expect(() => { + subgraph.addInput("duplicate", "string") + }).not.toThrow() + + // Should now have 2 inputs with same name + expect(subgraph.inputs.length).toBe(2) + expect(subgraph.inputs[0].name).toBe("duplicate") + expect(subgraph.inputs[1].name).toBe("duplicate") + }) +}) + +describe("SubgraphEdgeCases - Boundary Conditions", () => { + it("should handle empty subgraphs (no nodes, no IO)", () => { + const subgraph = createTestSubgraph({ nodeCount: 0 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Should handle empty subgraph without errors + const executableNodes = new Map() + const flattened = subgraphNode.getInnerNodes(executableNodes) + + expect(flattened).toHaveLength(0) + expect(subgraph.inputs).toHaveLength(0) + expect(subgraph.outputs).toHaveLength(0) + }) + + it("should handle single input/output subgraphs", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "single_in", type: "number" }], + outputs: [{ name: "single_out", type: "number" }], + nodeCount: 1, + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.inputs).toHaveLength(1) + expect(subgraphNode.outputs).toHaveLength(1) + expect(subgraphNode.inputs[0].name).toBe("single_in") + expect(subgraphNode.outputs[0].name).toBe("single_out") + }) + + it("should handle subgraphs with many slots", () => { + const subgraph = createTestSubgraph({ nodeCount: 1 }) + + // Add many inputs (test with 20 to keep test fast) + for (let i = 0; i < 20; i++) { + subgraph.addInput(`input_${i}`, "number") + } + + // Add many outputs + for (let i = 0; i < 20; i++) { + subgraph.addOutput(`output_${i}`, "number") + } + + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraph.inputs).toHaveLength(20) + expect(subgraph.outputs).toHaveLength(20) + expect(subgraphNode.inputs).toHaveLength(20) + expect(subgraphNode.outputs).toHaveLength(20) + + // Should still flatten correctly + const executableNodes = new Map() + const flattened = subgraphNode.getInnerNodes(executableNodes) + expect(flattened).toHaveLength(1) // Original node count + }) + + it("should handle very long slot names", () => { + const subgraph = createTestSubgraph() + const longName = "a".repeat(1000) // 1000 character name + + expect(() => { + subgraph.addInput(longName, "number") + subgraph.addOutput(longName, "string") + }).not.toThrow() + + expect(subgraph.inputs[0].name).toBe(longName) + expect(subgraph.outputs[0].name).toBe(longName) + }) + + it("should handle Unicode characters in names", () => { + const subgraph = createTestSubgraph() + const unicodeName = "测试_🚀_تست_тест" + + expect(() => { + subgraph.addInput(unicodeName, "number") + subgraph.addOutput(unicodeName, "string") + }).not.toThrow() + + expect(subgraph.inputs[0].name).toBe(unicodeName) + expect(subgraph.outputs[0].name).toBe(unicodeName) + }) +}) + +describe("SubgraphEdgeCases - Type Validation", () => { + it("should allow connecting mismatched types (no validation currently)", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph() + + subgraph.addInput("num", "number") + subgraph.addOutput("str", "string") + + // Create a basic node manually since createNode is not available + const numberNode = new LGraphNode("basic/const") + numberNode.addOutput("value", "number") + rootGraph.add(numberNode) + + const subgraphNode = createTestSubgraphNode(subgraph) + rootGraph.add(subgraphNode) + + // Currently allows mismatched connections (no type validation) + expect(() => { + numberNode.connect(0, subgraphNode, 0) + }).not.toThrow() + }) + + it("should handle invalid type strings", () => { + const subgraph = createTestSubgraph() + + // These should not crash (current behavior) + expect(() => { + subgraph.addInput("test1", "invalid_type") + subgraph.addInput("test2", "") + subgraph.addInput("test3", "123") + subgraph.addInput("test4", "special!@#$%") + }).not.toThrow() + }) + + it("should handle complex type strings", () => { + const subgraph = createTestSubgraph() + + expect(() => { + subgraph.addInput("array", "array") + subgraph.addInput("object", "object<{x: number, y: string}>") + subgraph.addInput("union", "number|string") + }).not.toThrow() + + expect(subgraph.inputs).toHaveLength(3) + expect(subgraph.inputs[0].type).toBe("array") + expect(subgraph.inputs[1].type).toBe("object<{x: number, y: string}>") + expect(subgraph.inputs[2].type).toBe("number|string") + }) +}) + +describe("SubgraphEdgeCases - Performance and Scale", () => { + it("should handle large numbers of nodes in subgraph", () => { + // Create subgraph with many nodes (keep reasonable for test speed) + const subgraph = createTestSubgraph({ nodeCount: 50 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + const executableNodes = new Map() + const flattened = subgraphNode.getInnerNodes(executableNodes) + + expect(flattened).toHaveLength(50) + + // Performance is acceptable for 50 nodes (typically < 1ms) + }) + + it("should handle rapid IO changes", () => { + const subgraph = createTestSubgraph() + + // Rapidly add and remove inputs/outputs + for (let i = 0; i < 10; i++) { + const input = subgraph.addInput(`rapid_${i}`, "number") + const output = subgraph.addOutput(`rapid_${i}`, "number") + + // Remove them immediately + subgraph.removeInput(input) + subgraph.removeOutput(output) + } + + // Should end up with no inputs/outputs + expect(subgraph.inputs).toHaveLength(0) + expect(subgraph.outputs).toHaveLength(0) + }) + + it("should handle concurrent modifications safely", () => { + // This test ensures the system doesn't crash under concurrent access + // Note: JavaScript is single-threaded, so this tests rapid sequential access + const subgraph = createTestSubgraph({ nodeCount: 5 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Simulate concurrent operations + const operations = [] + for (let i = 0; i < 20; i++) { + operations.push(() => { + const executableNodes = new Map() + subgraphNode.getInnerNodes(executableNodes) + }, () => { + subgraph.addInput(`concurrent_${i}`, "number") + }, () => { + if (subgraph.inputs.length > 0) { + subgraph.removeInput(subgraph.inputs[0]) + } + }) + } + + // Execute all operations - should not crash + expect(() => { + for (const op of operations) op() + }).not.toThrow() + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphEvents.test.ts b/src/lib/litegraph/test/subgraph/SubgraphEvents.test.ts new file mode 100644 index 0000000000..ef73ec32d5 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphEvents.test.ts @@ -0,0 +1,458 @@ +import { describe, expect, vi } from "vitest" + +import { subgraphTest } from "./fixtures/subgraphFixtures" +import { verifyEventSequence } from "./fixtures/subgraphHelpers" + +describe("SubgraphEvents - Event Payload Verification", () => { + subgraphTest("dispatches input-added with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const input = subgraph.addInput("test_input", "number") + + const addedEvents = capture.getEventsByType("input-added") + expect(addedEvents).toHaveLength(1) + + expect(addedEvents[0].detail).toEqual({ + input: expect.objectContaining({ + name: "test_input", + type: "number", + }), + }) + + expect(addedEvents[0].detail.input).toBe(input) + }) + + subgraphTest("dispatches output-added with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const output = subgraph.addOutput("test_output", "string") + + const addedEvents = capture.getEventsByType("output-added") + expect(addedEvents).toHaveLength(1) + + expect(addedEvents[0].detail).toEqual({ + output: expect.objectContaining({ + name: "test_output", + type: "string", + }), + }) + + expect(addedEvents[0].detail.output).toBe(output) + }) + + subgraphTest("dispatches removing-input with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const input = subgraph.addInput("to_remove", "boolean") + + capture.clear() + + subgraph.removeInput(input) + + const removingEvents = capture.getEventsByType("removing-input") + expect(removingEvents).toHaveLength(1) + + expect(removingEvents[0].detail).toEqual({ + input: expect.objectContaining({ + name: "to_remove", + type: "boolean", + }), + index: 0, + }) + + expect(removingEvents[0].detail.input).toBe(input) + }) + + subgraphTest("dispatches removing-output with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const output = subgraph.addOutput("to_remove", "number") + + capture.clear() + + subgraph.removeOutput(output) + + const removingEvents = capture.getEventsByType("removing-output") + expect(removingEvents).toHaveLength(1) + + expect(removingEvents[0].detail).toEqual({ + output: expect.objectContaining({ + name: "to_remove", + type: "number", + }), + index: 0, + }) + + expect(removingEvents[0].detail.output).toBe(output) + }) + + subgraphTest("dispatches renaming-input with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const input = subgraph.addInput("old_name", "string") + + capture.clear() + + subgraph.renameInput(input, "new_name") + + const renamingEvents = capture.getEventsByType("renaming-input") + expect(renamingEvents).toHaveLength(1) + + expect(renamingEvents[0].detail).toEqual({ + input: expect.objectContaining({ + type: "string", + }), + index: 0, + oldName: "old_name", + newName: "new_name", + }) + + expect(renamingEvents[0].detail.input).toBe(input) + + // Verify the label was updated after the event (renameInput sets label, not name) + expect(input.label).toBe("new_name") + expect(input.displayName).toBe("new_name") + expect(input.name).toBe("old_name") + }) + + subgraphTest("dispatches renaming-output with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const output = subgraph.addOutput("old_name", "number") + + capture.clear() + + subgraph.renameOutput(output, "new_name") + + const renamingEvents = capture.getEventsByType("renaming-output") + expect(renamingEvents).toHaveLength(1) + + expect(renamingEvents[0].detail).toEqual({ + output: expect.objectContaining({ + name: "old_name", // Should still have the old name when event is dispatched + type: "number", + }), + index: 0, + oldName: "old_name", + newName: "new_name", + }) + + expect(renamingEvents[0].detail.output).toBe(output) + + // Verify the label was updated after the event + expect(output.label).toBe("new_name") + expect(output.displayName).toBe("new_name") + expect(output.name).toBe("old_name") + }) + + subgraphTest("dispatches adding-input with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addInput("test_input", "number") + + const addingEvents = capture.getEventsByType("adding-input") + expect(addingEvents).toHaveLength(1) + + expect(addingEvents[0].detail).toEqual({ + name: "test_input", + type: "number", + }) + }) + + subgraphTest("dispatches adding-output with correct payload", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addOutput("test_output", "string") + + const addingEvents = capture.getEventsByType("adding-output") + expect(addingEvents).toHaveLength(1) + + expect(addingEvents[0].detail).toEqual({ + name: "test_output", + type: "string", + }) + }) +}) + +describe("SubgraphEvents - Event Handler Isolation", () => { + subgraphTest("continues dispatching if handler throws", ({ emptySubgraph }) => { + const handler1 = vi.fn(() => { + throw new Error("Handler 1 error") + }) + const handler2 = vi.fn() + const handler3 = vi.fn() + + emptySubgraph.events.addEventListener("input-added", handler1) + emptySubgraph.events.addEventListener("input-added", handler2) + emptySubgraph.events.addEventListener("input-added", handler3) + + // The operation itself should not throw (error is isolated) + expect(() => { + emptySubgraph.addInput("test", "number") + }).not.toThrow() + + // Verify all handlers were called despite the first one throwing + expect(handler1).toHaveBeenCalled() + expect(handler2).toHaveBeenCalled() + expect(handler3).toHaveBeenCalled() + + // Verify the throwing handler actually received the event + expect(handler1).toHaveBeenCalledWith(expect.objectContaining({ + type: "input-added", + })) + + // Verify other handlers received correct event data + expect(handler2).toHaveBeenCalledWith(expect.objectContaining({ + type: "input-added", + detail: expect.objectContaining({ + input: expect.objectContaining({ + name: "test", + type: "number", + }), + }), + })) + expect(handler3).toHaveBeenCalledWith(expect.objectContaining({ + type: "input-added", + })) + }) + + subgraphTest("maintains handler execution order", ({ emptySubgraph }) => { + const executionOrder: number[] = [] + + const handler1 = vi.fn(() => executionOrder.push(1)) + const handler2 = vi.fn(() => executionOrder.push(2)) + const handler3 = vi.fn(() => executionOrder.push(3)) + + emptySubgraph.events.addEventListener("input-added", handler1) + emptySubgraph.events.addEventListener("input-added", handler2) + emptySubgraph.events.addEventListener("input-added", handler3) + + emptySubgraph.addInput("test", "number") + + expect(executionOrder).toEqual([1, 2, 3]) + }) + + subgraphTest("prevents handler accumulation with proper cleanup", ({ emptySubgraph }) => { + const handler = vi.fn() + + for (let i = 0; i < 5; i++) { + emptySubgraph.events.addEventListener("input-added", handler) + emptySubgraph.events.removeEventListener("input-added", handler) + } + + emptySubgraph.events.addEventListener("input-added", handler) + + emptySubgraph.addInput("test", "number") + + expect(handler).toHaveBeenCalledTimes(1) + }) + + subgraphTest("supports AbortController cleanup patterns", ({ emptySubgraph }) => { + const abortController = new AbortController() + const { signal } = abortController + + const handler = vi.fn() + + emptySubgraph.events.addEventListener("input-added", handler, { signal }) + + emptySubgraph.addInput("test1", "number") + expect(handler).toHaveBeenCalledTimes(1) + + abortController.abort() + + emptySubgraph.addInput("test2", "number") + expect(handler).toHaveBeenCalledTimes(1) + }) +}) + +describe("SubgraphEvents - Event Sequence Testing", () => { + subgraphTest("maintains correct event sequence for inputs", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addInput("input1", "number") + + verifyEventSequence(capture.events, [ + "adding-input", + "input-added", + ]) + }) + + subgraphTest("maintains correct event sequence for outputs", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addOutput("output1", "string") + + verifyEventSequence(capture.events, [ + "adding-output", + "output-added", + ]) + }) + + subgraphTest("maintains correct event sequence for rapid operations", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addInput("input1", "number") + subgraph.addInput("input2", "string") + subgraph.addOutput("output1", "boolean") + subgraph.addOutput("output2", "number") + + verifyEventSequence(capture.events, [ + "adding-input", + "input-added", + "adding-input", + "input-added", + "adding-output", + "output-added", + "adding-output", + "output-added", + ]) + }) + + subgraphTest("handles concurrent event handling", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const handler1 = vi.fn(() => { + return new Promise(resolve => setTimeout(resolve, 1)) + }) + + const handler2 = vi.fn() + const handler3 = vi.fn() + + subgraph.events.addEventListener("input-added", handler1) + subgraph.events.addEventListener("input-added", handler2) + subgraph.events.addEventListener("input-added", handler3) + + subgraph.addInput("test", "number") + + expect(handler1).toHaveBeenCalled() + expect(handler2).toHaveBeenCalled() + expect(handler3).toHaveBeenCalled() + + const addedEvents = capture.getEventsByType("input-added") + expect(addedEvents).toHaveLength(1) + }) + + subgraphTest("validates event timestamps are properly ordered", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addInput("input1", "number") + subgraph.addInput("input2", "string") + subgraph.addOutput("output1", "boolean") + + for (let i = 1; i < capture.events.length; i++) { + expect(capture.events[i].timestamp).toBeGreaterThanOrEqual( + capture.events[i - 1].timestamp, + ) + } + }) +}) + +describe("SubgraphEvents - Event Cancellation", () => { + subgraphTest("supports preventDefault() for cancellable events", ({ emptySubgraph }) => { + const preventHandler = vi.fn((event: Event) => { + event.preventDefault() + }) + + emptySubgraph.events.addEventListener("removing-input", preventHandler) + + const input = emptySubgraph.addInput("test", "number") + + emptySubgraph.removeInput(input) + + expect(emptySubgraph.inputs).toContain(input) + expect(preventHandler).toHaveBeenCalled() + }) + + subgraphTest("supports preventDefault() for output removal", ({ emptySubgraph }) => { + const preventHandler = vi.fn((event: Event) => { + event.preventDefault() + }) + + emptySubgraph.events.addEventListener("removing-output", preventHandler) + + const output = emptySubgraph.addOutput("test", "number") + + emptySubgraph.removeOutput(output) + + expect(emptySubgraph.outputs).toContain(output) + expect(preventHandler).toHaveBeenCalled() + }) + + subgraphTest("allows removal when not prevented", ({ emptySubgraph }) => { + const allowHandler = vi.fn() + + emptySubgraph.events.addEventListener("removing-input", allowHandler) + + const input = emptySubgraph.addInput("test", "number") + + emptySubgraph.removeInput(input) + + expect(emptySubgraph.inputs).not.toContain(input) + expect(emptySubgraph.inputs).toHaveLength(0) + expect(allowHandler).toHaveBeenCalled() + }) +}) + +describe("SubgraphEvents - Event Detail Structure Validation", () => { + subgraphTest("validates all event detail structures match TypeScript types", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + const input = subgraph.addInput("test_input", "number") + subgraph.renameInput(input, "renamed_input") + subgraph.removeInput(input) + + const output = subgraph.addOutput("test_output", "string") + subgraph.renameOutput(output, "renamed_output") + subgraph.removeOutput(output) + + const addingInputEvent = capture.getEventsByType("adding-input")[0] + expect(addingInputEvent.detail).toEqual({ + name: expect.any(String), + type: expect.any(String), + }) + + const inputAddedEvent = capture.getEventsByType("input-added")[0] + expect(inputAddedEvent.detail).toEqual({ + input: expect.any(Object), + }) + + const renamingInputEvent = capture.getEventsByType("renaming-input")[0] + expect(renamingInputEvent.detail).toEqual({ + input: expect.any(Object), + index: expect.any(Number), + oldName: expect.any(String), + newName: expect.any(String), + }) + + const removingInputEvent = capture.getEventsByType("removing-input")[0] + expect(removingInputEvent.detail).toEqual({ + input: expect.any(Object), + index: expect.any(Number), + }) + + const addingOutputEvent = capture.getEventsByType("adding-output")[0] + expect(addingOutputEvent.detail).toEqual({ + name: expect.any(String), + type: expect.any(String), + }) + + const outputAddedEvent = capture.getEventsByType("output-added")[0] + expect(outputAddedEvent.detail).toEqual({ + output: expect.any(Object), + }) + + const renamingOutputEvent = capture.getEventsByType("renaming-output")[0] + expect(renamingOutputEvent.detail).toEqual({ + output: expect.any(Object), + index: expect.any(Number), + oldName: expect.any(String), + newName: expect.any(String), + }) + + const removingOutputEvent = capture.getEventsByType("removing-output")[0] + expect(removingOutputEvent.detail).toEqual({ + output: expect.any(Object), + index: expect.any(Number), + }) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphIO.test.ts b/src/lib/litegraph/test/subgraph/SubgraphIO.test.ts new file mode 100644 index 0000000000..be6679854f --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphIO.test.ts @@ -0,0 +1,386 @@ +import { describe, expect, it } from "vitest" + +import { LGraphNode } from "@/litegraph" + +import { subgraphTest } from "./fixtures/subgraphFixtures" +import { + createTestSubgraph, + createTestSubgraphNode, +} from "./fixtures/subgraphHelpers" + +describe("SubgraphIO - Input Slot Dual-Nature Behavior", () => { + subgraphTest("input accepts external connections from parent graph", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + subgraph.addInput("test_input", "number") + + const externalNode = new LGraphNode("External Source") + externalNode.addOutput("out", "number") + parentGraph.add(externalNode) + + expect(() => { + externalNode.connect(0, subgraphNode, 0) + }).not.toThrow() + + expect(externalNode.outputs[0].links?.includes(subgraphNode.inputs[0].link)).toBe(true) + expect(subgraphNode.inputs[0].link).not.toBe(null) + }) + + subgraphTest("empty input slot creation enables dynamic IO", ({ simpleSubgraph }) => { + const initialInputCount = simpleSubgraph.inputs.length + + // Create empty input slot + simpleSubgraph.addInput("", "*") + + // Should create new input + expect(simpleSubgraph.inputs.length).toBe(initialInputCount + 1) + + // The empty slot should be configurable + const emptyInput = simpleSubgraph.inputs.at(-1) + expect(emptyInput.name).toBe("") + expect(emptyInput.type).toBe("*") + }) + + subgraphTest("handles slot removal with active connections", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + const externalNode = new LGraphNode("External Source") + externalNode.addOutput("out", "*") + parentGraph.add(externalNode) + + externalNode.connect(0, subgraphNode, 0) + + // Verify connection exists + expect(subgraphNode.inputs[0].link).not.toBe(null) + + // Remove the existing input (fixture creates one input) + const inputToRemove = subgraph.inputs[0] + subgraph.removeInput(inputToRemove) + + // Connection should be cleaned up + expect(subgraphNode.inputs.length).toBe(0) + expect(externalNode.outputs[0].links).toHaveLength(0) + }) + + subgraphTest("handles slot renaming with active connections", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + const externalNode = new LGraphNode("External Source") + externalNode.addOutput("out", "*") + parentGraph.add(externalNode) + + externalNode.connect(0, subgraphNode, 0) + + // Verify connection exists + expect(subgraphNode.inputs[0].link).not.toBe(null) + + // Rename the existing input (fixture creates input named "input") + const inputToRename = subgraph.inputs[0] + subgraph.renameInput(inputToRename, "new_name") + + // Connection should persist and subgraph definition should be updated + expect(subgraphNode.inputs[0].link).not.toBe(null) + expect(subgraph.inputs[0].label).toBe("new_name") + expect(subgraph.inputs[0].displayName).toBe("new_name") + }) +}) + +describe("SubgraphIO - Output Slot Dual-Nature Behavior", () => { + subgraphTest("output provides connections to parent graph", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + // Add an output to the subgraph + subgraph.addOutput("test_output", "number") + + const externalNode = new LGraphNode("External Target") + externalNode.addInput("in", "number") + parentGraph.add(externalNode) + + // External connection from subgraph output should work + expect(() => { + subgraphNode.connect(0, externalNode, 0) + }).not.toThrow() + + expect(subgraphNode.outputs[0].links?.includes(externalNode.inputs[0].link)).toBe(true) + expect(externalNode.inputs[0].link).not.toBe(null) + }) + + subgraphTest("empty output slot creation enables dynamic IO", ({ simpleSubgraph }) => { + const initialOutputCount = simpleSubgraph.outputs.length + + // Create empty output slot + simpleSubgraph.addOutput("", "*") + + // Should create new output + expect(simpleSubgraph.outputs.length).toBe(initialOutputCount + 1) + + // The empty slot should be configurable + const emptyOutput = simpleSubgraph.outputs.at(-1) + expect(emptyOutput.name).toBe("") + expect(emptyOutput.type).toBe("*") + }) + + subgraphTest("handles slot removal with active connections", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + const externalNode = new LGraphNode("External Target") + externalNode.addInput("in", "*") + parentGraph.add(externalNode) + + subgraphNode.connect(0, externalNode, 0) + + // Verify connection exists + expect(externalNode.inputs[0].link).not.toBe(null) + + // Remove the existing output (fixture creates one output) + const outputToRemove = subgraph.outputs[0] + subgraph.removeOutput(outputToRemove) + + // Connection should be cleaned up + expect(subgraphNode.outputs.length).toBe(0) + expect(externalNode.inputs[0].link).toBe(null) + }) + + subgraphTest("handles slot renaming updates all references", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + const externalNode = new LGraphNode("External Target") + externalNode.addInput("in", "*") + parentGraph.add(externalNode) + + subgraphNode.connect(0, externalNode, 0) + + // Verify connection exists + expect(externalNode.inputs[0].link).not.toBe(null) + + // Rename the existing output (fixture creates output named "output") + const outputToRename = subgraph.outputs[0] + subgraph.renameOutput(outputToRename, "new_name") + + // Connection should persist and subgraph definition should be updated + expect(externalNode.inputs[0].link).not.toBe(null) + expect(subgraph.outputs[0].label).toBe("new_name") + expect(subgraph.outputs[0].displayName).toBe("new_name") + }) +}) + +describe("SubgraphIO - Boundary Connection Management", () => { + subgraphTest("verifies cross-boundary link resolution", ({ complexSubgraph }) => { + const subgraphNode = createTestSubgraphNode(complexSubgraph) + const parentGraph = subgraphNode.graph! + + const externalSource = new LGraphNode("External Source") + externalSource.addOutput("out", "number") + parentGraph.add(externalSource) + + const externalTarget = new LGraphNode("External Target") + externalTarget.addInput("in", "number") + parentGraph.add(externalTarget) + + externalSource.connect(0, subgraphNode, 0) + subgraphNode.connect(0, externalTarget, 0) + + expect(subgraphNode.inputs[0].link).not.toBe(null) + expect(externalTarget.inputs[0].link).not.toBe(null) + }) + + subgraphTest("handles bypass nodes that pass through data", ({ simpleSubgraph }) => { + const subgraphNode = createTestSubgraphNode(simpleSubgraph) + const parentGraph = subgraphNode.graph! + + const externalSource = new LGraphNode("External Source") + externalSource.addOutput("out", "number") + parentGraph.add(externalSource) + + const externalTarget = new LGraphNode("External Target") + externalTarget.addInput("in", "number") + parentGraph.add(externalTarget) + + externalSource.connect(0, subgraphNode, 0) + subgraphNode.connect(0, externalTarget, 0) + + expect(subgraphNode.inputs[0].link).not.toBe(null) + expect(externalTarget.inputs[0].link).not.toBe(null) + }) + + subgraphTest("tests link integrity across subgraph boundaries", ({ subgraphWithNode }) => { + const { subgraphNode, parentGraph } = subgraphWithNode + + const externalSource = new LGraphNode("External Source") + externalSource.addOutput("out", "*") + parentGraph.add(externalSource) + + const externalTarget = new LGraphNode("External Target") + externalTarget.addInput("in", "*") + parentGraph.add(externalTarget) + + externalSource.connect(0, subgraphNode, 0) + subgraphNode.connect(0, externalTarget, 0) + + const inputBoundaryLink = subgraphNode.inputs[0].link + const outputBoundaryLink = externalTarget.inputs[0].link + + expect(inputBoundaryLink).toBeTruthy() + expect(outputBoundaryLink).toBeTruthy() + + // Links should exist in parent graph + expect(inputBoundaryLink).toBeTruthy() + expect(outputBoundaryLink).toBeTruthy() + }) + + subgraphTest("verifies proper link cleanup on slot removal", ({ complexSubgraph }) => { + const subgraphNode = createTestSubgraphNode(complexSubgraph) + const parentGraph = subgraphNode.graph! + + const externalSource = new LGraphNode("External Source") + externalSource.addOutput("out", "number") + parentGraph.add(externalSource) + + const externalTarget = new LGraphNode("External Target") + externalTarget.addInput("in", "number") + parentGraph.add(externalTarget) + + externalSource.connect(0, subgraphNode, 0) + subgraphNode.connect(0, externalTarget, 0) + + expect(subgraphNode.inputs[0].link).not.toBe(null) + expect(externalTarget.inputs[0].link).not.toBe(null) + + const inputToRemove = complexSubgraph.inputs[0] + complexSubgraph.removeInput(inputToRemove) + + expect(subgraphNode.inputs.findIndex(i => i.name === "data")).toBe(-1) + expect(externalSource.outputs[0].links).toHaveLength(0) + + const outputToRemove = complexSubgraph.outputs[0] + complexSubgraph.removeOutput(outputToRemove) + + expect(subgraphNode.outputs.findIndex(o => o.name === "result")).toBe(-1) + expect(externalTarget.inputs[0].link).toBe(null) + }) +}) + +describe("SubgraphIO - Advanced Scenarios", () => { + it("handles multiple inputs and outputs with complex connections", () => { + const subgraph = createTestSubgraph({ + name: "Complex IO Test", + inputs: [ + { name: "input1", type: "number" }, + { name: "input2", type: "string" }, + { name: "input3", type: "boolean" }, + ], + outputs: [ + { name: "output1", type: "number" }, + { name: "output2", type: "string" }, + ], + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + // Should have correct number of slots + expect(subgraphNode.inputs.length).toBe(3) + expect(subgraphNode.outputs.length).toBe(2) + + // Each slot should have correct type + expect(subgraphNode.inputs[0].type).toBe("number") + expect(subgraphNode.inputs[1].type).toBe("string") + expect(subgraphNode.inputs[2].type).toBe("boolean") + expect(subgraphNode.outputs[0].type).toBe("number") + expect(subgraphNode.outputs[1].type).toBe("string") + }) + + it("handles dynamic slot creation and removal", () => { + const subgraph = createTestSubgraph({ + name: "Dynamic IO Test", + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + // Start with no slots + expect(subgraphNode.inputs.length).toBe(0) + expect(subgraphNode.outputs.length).toBe(0) + + // Add slots dynamically + subgraph.addInput("dynamic_input", "number") + subgraph.addOutput("dynamic_output", "string") + + // SubgraphNode should automatically update + expect(subgraphNode.inputs.length).toBe(1) + expect(subgraphNode.outputs.length).toBe(1) + expect(subgraphNode.inputs[0].name).toBe("dynamic_input") + expect(subgraphNode.outputs[0].name).toBe("dynamic_output") + + // Remove slots + subgraph.removeInput(subgraph.inputs[0]) + subgraph.removeOutput(subgraph.outputs[0]) + + // SubgraphNode should automatically update + expect(subgraphNode.inputs.length).toBe(0) + expect(subgraphNode.outputs.length).toBe(0) + }) + + it("maintains slot synchronization across multiple instances", () => { + const subgraph = createTestSubgraph({ + name: "Multi-Instance Test", + inputs: [{ name: "shared_input", type: "number" }], + outputs: [{ name: "shared_output", type: "number" }], + }) + + // Create multiple instances + const instance1 = createTestSubgraphNode(subgraph) + const instance2 = createTestSubgraphNode(subgraph) + const instance3 = createTestSubgraphNode(subgraph) + + // All instances should have same slots + expect(instance1.inputs.length).toBe(1) + expect(instance2.inputs.length).toBe(1) + expect(instance3.inputs.length).toBe(1) + + // Modify the subgraph definition + subgraph.addInput("new_input", "string") + subgraph.addOutput("new_output", "boolean") + + // All instances should automatically update + expect(instance1.inputs.length).toBe(2) + expect(instance2.inputs.length).toBe(2) + expect(instance3.inputs.length).toBe(2) + expect(instance1.outputs.length).toBe(2) + expect(instance2.outputs.length).toBe(2) + expect(instance3.outputs.length).toBe(2) + }) +}) + +describe("SubgraphIO - Empty Slot Connection", () => { + subgraphTest("creates new input and connects when dragging from empty slot inside subgraph", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode } = subgraphWithNode + + // Create a node inside the subgraph that will receive the connection + const internalNode = new LGraphNode("Internal Node") + internalNode.addInput("in", "string") + subgraph.add(internalNode) + + // Simulate the connection process from the empty slot to an internal node + // The -1 indicates a connection from the "empty" slot + subgraph.inputNode.connectByType(-1, internalNode, "string") + + // 1. A new input should have been created on the subgraph + expect(subgraph.inputs.length).toBe(2) // Fixture adds one input already + const newInput = subgraph.inputs[1] + expect(newInput.name).toBe("in") + expect(newInput.type).toBe("string") + + // 2. The subgraph node should now have a corresponding real input slot + expect(subgraphNode.inputs.length).toBe(2) + const subgraphInputSlot = subgraphNode.inputs[1] + expect(subgraphInputSlot.name).toBe("in") + + // 3. A link should be established inside the subgraph + expect(internalNode.inputs[0].link).not.toBe(null) + const link = subgraph.links.get(internalNode.inputs[0].link!) + expect(link).toBeDefined() + expect(link.target_id).toBe(internalNode.id) + expect(link.target_slot).toBe(0) + expect(link.origin_id).toBe(subgraph.inputNode.id) + expect(link.origin_slot).toBe(1) // Should be the second slot + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphMemory.test.ts b/src/lib/litegraph/test/subgraph/SubgraphMemory.test.ts new file mode 100644 index 0000000000..9d3bf73544 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphMemory.test.ts @@ -0,0 +1,428 @@ +import { describe, expect, it, vi } from "vitest" + +import { LGraph } from "@/litegraph" + +import { subgraphTest } from "./fixtures/subgraphFixtures" +import { + createTestSubgraph, + createTestSubgraphNode, +} from "./fixtures/subgraphHelpers" + +describe("SubgraphNode Memory Management", () => { + describe("Event Listener Cleanup", () => { + it("should register event listeners on construction", () => { + const subgraph = createTestSubgraph() + + // Spy on addEventListener to track listener registration + const addEventSpy = vi.spyOn(subgraph.events, "addEventListener") + const initialCalls = addEventSpy.mock.calls.length + + createTestSubgraphNode(subgraph) + + // Should have registered listeners for subgraph events + expect(addEventSpy.mock.calls.length).toBeGreaterThan(initialCalls) + + // Should have registered listeners for all major events + const eventTypes = addEventSpy.mock.calls.map(call => call[0]) + expect(eventTypes).toContain("input-added") + expect(eventTypes).toContain("removing-input") + expect(eventTypes).toContain("output-added") + expect(eventTypes).toContain("removing-output") + expect(eventTypes).toContain("renaming-input") + expect(eventTypes).toContain("renaming-output") + }) + + it("should clean up input listeners on removal", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Add input should have created listeners + expect(subgraphNode.inputs[0]._listenerController).toBeDefined() + expect(subgraphNode.inputs[0]._listenerController?.signal.aborted).toBe(false) + + // Call onRemoved to simulate node removal + subgraphNode.onRemoved() + + // Input listeners should be aborted + expect(subgraphNode.inputs[0]._listenerController?.signal.aborted).toBe(true) + }) + + it("should not accumulate listeners during reconfiguration", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + const addEventSpy = vi.spyOn(subgraph.events, "addEventListener") + const initialCalls = addEventSpy.mock.calls.length + + // Reconfigure multiple times + for (let i = 0; i < 5; i++) { + subgraphNode.configure({ + id: subgraphNode.id, + type: subgraph.id, + pos: [100 * i, 100 * i], + size: [200, 100], + inputs: [], + outputs: [], + properties: {}, + flags: {}, + mode: 0, + }) + } + + // Should not add new main subgraph listeners + // (Only input-specific listeners might be reconfigured) + const finalCalls = addEventSpy.mock.calls.length + expect(finalCalls).toBe(initialCalls) // Main listeners not re-added + }) + }) + + describe("Widget Promotion Memory Management", () => { + it("should clean up promoted widget references", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "testInput", type: "number" }], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Simulate widget promotion scenario + const input = subgraphNode.inputs[0] + const mockWidget = { + type: "number", + name: "promoted_widget", + value: 123, + draw: vi.fn(), + mouse: vi.fn(), + computeSize: vi.fn(), + createCopyForNode: vi.fn().mockReturnValue({ + type: "number", + name: "promoted_widget", + value: 123, + }), + } + + // Simulate widget promotion + input._widget = mockWidget + input.widget = { name: "promoted_widget" } + subgraphNode.widgets.push(mockWidget) + + expect(input._widget).toBe(mockWidget) + expect(input.widget).toBeDefined() + expect(subgraphNode.widgets).toContain(mockWidget) + + // Remove widget (this should clean up references) + subgraphNode.removeWidget(mockWidget) + + // Widget should be removed from array + expect(subgraphNode.widgets).not.toContain(mockWidget) + }) + + it("should not leak widgets during reconfiguration", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Track widget count before and after reconfigurations + const initialWidgetCount = subgraphNode.widgets.length + + // Reconfigure multiple times + for (let i = 0; i < 3; i++) { + subgraphNode.configure({ + id: subgraphNode.id, + type: subgraph.id, + pos: [100, 100], + size: [200, 100], + inputs: [], + outputs: [], + properties: {}, + flags: {}, + mode: 0, + }) + } + + // Widget count should not accumulate + expect(subgraphNode.widgets.length).toBe(initialWidgetCount) + }) + }) +}) + +describe("SubgraphMemory - Event Listener Management", () => { + subgraphTest("event handlers still work after node creation", ({ emptySubgraph }) => { + const rootGraph = new LGraph() + const subgraphNode = createTestSubgraphNode(emptySubgraph) + rootGraph.add(subgraphNode) + + const handler = vi.fn() + emptySubgraph.events.addEventListener("input-added", handler) + + emptySubgraph.addInput("test", "number") + + expect(handler).toHaveBeenCalledTimes(1) + expect(handler).toHaveBeenCalledWith(expect.objectContaining({ + type: "input-added", + })) + }) + + subgraphTest("can add and remove multiple nodes without errors", ({ emptySubgraph }) => { + const rootGraph = new LGraph() + const nodes: ReturnType[] = [] + + // Should be able to create multiple nodes without issues + for (let i = 0; i < 5; i++) { + const subgraphNode = createTestSubgraphNode(emptySubgraph) + rootGraph.add(subgraphNode) + nodes.push(subgraphNode) + } + + expect(rootGraph.nodes.length).toBe(5) + + // Should be able to remove them all without issues + for (const node of nodes) { + rootGraph.remove(node) + } + + expect(rootGraph.nodes.length).toBe(0) + }) + + subgraphTest("supports AbortController cleanup patterns", ({ emptySubgraph }) => { + const abortController = new AbortController() + const { signal } = abortController + + const handler = vi.fn() + + emptySubgraph.events.addEventListener("input-added", handler, { signal }) + + emptySubgraph.addInput("test1", "number") + expect(handler).toHaveBeenCalledTimes(1) + + abortController.abort() + + emptySubgraph.addInput("test2", "number") + expect(handler).toHaveBeenCalledTimes(1) + }) + + subgraphTest("handles multiple creation/deletion cycles", ({ emptySubgraph }) => { + const rootGraph = new LGraph() + + for (let cycle = 0; cycle < 3; cycle++) { + const nodes = [] + + for (let i = 0; i < 5; i++) { + const subgraphNode = createTestSubgraphNode(emptySubgraph) + rootGraph.add(subgraphNode) + nodes.push(subgraphNode) + } + + expect(rootGraph.nodes.length).toBe(5) + + for (const node of nodes) { + rootGraph.remove(node) + } + + expect(rootGraph.nodes.length).toBe(0) + } + }) +}) + +describe("SubgraphMemory - Reference Management", () => { + it("properly manages subgraph references in root graph", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph() + const subgraphId = subgraph.id + + // Add subgraph to root graph registry + rootGraph.subgraphs.set(subgraphId, subgraph) + expect(rootGraph.subgraphs.has(subgraphId)).toBe(true) + expect(rootGraph.subgraphs.get(subgraphId)).toBe(subgraph) + + // Remove subgraph from registry + rootGraph.subgraphs.delete(subgraphId) + expect(rootGraph.subgraphs.has(subgraphId)).toBe(false) + }) + + it("maintains proper parent-child references", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph({ nodeCount: 2 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Add to graph + rootGraph.add(subgraphNode) + expect(subgraphNode.graph).toBe(rootGraph) + expect(rootGraph.nodes).toContain(subgraphNode) + + // Remove from graph + rootGraph.remove(subgraphNode) + expect(rootGraph.nodes).not.toContain(subgraphNode) + }) + + it("prevents circular reference creation", () => { + const subgraph = createTestSubgraph({ nodeCount: 1 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Subgraph should not contain its own instance node + expect(subgraph.nodes).not.toContain(subgraphNode) + + // If circular references were attempted, they should be detected + expect(subgraphNode.subgraph).toBe(subgraph) + expect(subgraph.nodes.includes(subgraphNode)).toBe(false) + }) +}) + +describe("SubgraphMemory - Widget Reference Management", () => { + subgraphTest("properly sets and clears widget references", ({ simpleSubgraph }) => { + const subgraphNode = createTestSubgraphNode(simpleSubgraph) + const input = subgraphNode.inputs[0] + + // Mock widget for testing + const mockWidget = { + type: "number", + value: 42, + name: "test_widget", + } + + // Set widget reference + if (input && "_widget" in input) { + ;(input as any)._widget = mockWidget + expect((input as any)._widget).toBe(mockWidget) + } + + // Clear widget reference + if (input && "_widget" in input) { + ;(input as any)._widget = undefined + expect((input as any)._widget).toBeUndefined() + } + }) + + subgraphTest("maintains widget count consistency", ({ simpleSubgraph }) => { + const subgraphNode = createTestSubgraphNode(simpleSubgraph) + + const initialWidgetCount = subgraphNode.widgets?.length || 0 + + // Add mock widgets + const widget1 = { type: "number", value: 1, name: "widget1" } + const widget2 = { type: "string", value: "test", name: "widget2" } + + if (subgraphNode.widgets) { + subgraphNode.widgets.push(widget1, widget2) + expect(subgraphNode.widgets.length).toBe(initialWidgetCount + 2) + } + + // Remove widgets + if (subgraphNode.widgets) { + subgraphNode.widgets.length = initialWidgetCount + expect(subgraphNode.widgets.length).toBe(initialWidgetCount) + } + }) + + subgraphTest("cleans up references during node removal", ({ simpleSubgraph }) => { + const subgraphNode = createTestSubgraphNode(simpleSubgraph) + const input = subgraphNode.inputs[0] + const output = subgraphNode.outputs[0] + + // Set up references that should be cleaned up + const mockReferences = { + widget: { type: "number", value: 42 }, + connection: { id: 1, type: "number" }, + listener: vi.fn(), + } + + // Set references + if (input) { + ;(input as any)._widget = mockReferences.widget + ;(input as any)._connection = mockReferences.connection + } + if (output) { + ;(input as any)._connection = mockReferences.connection + } + + // Verify references are set + expect((input as any)?._widget).toBe(mockReferences.widget) + expect((input as any)?._connection).toBe(mockReferences.connection) + + // Simulate proper cleanup (what onRemoved should do) + subgraphNode.onRemoved() + + // Input-specific listeners should be cleaned up (this works) + if (input && "_listenerController" in input) { + expect((input as any)._listenerController?.signal.aborted).toBe(true) + } + }) +}) + +describe("SubgraphMemory - Performance and Scale", () => { + subgraphTest("handles multiple subgraphs in same graph", ({ subgraphWithNode }) => { + const { parentGraph } = subgraphWithNode + const subgraphA = createTestSubgraph({ name: "Subgraph A" }) + const subgraphB = createTestSubgraph({ name: "Subgraph B" }) + + const nodeA = createTestSubgraphNode(subgraphA) + const nodeB = createTestSubgraphNode(subgraphB) + + parentGraph.add(nodeA) + parentGraph.add(nodeB) + + expect(nodeA.graph).toBe(parentGraph) + expect(nodeB.graph).toBe(parentGraph) + expect(parentGraph.nodes.length).toBe(3) // Original + nodeA + nodeB + + parentGraph.remove(nodeA) + parentGraph.remove(nodeB) + + expect(parentGraph.nodes.length).toBe(1) // Only the original subgraphNode remains + }) + + it("handles many instances without issues", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "stress_input", type: "number" }], + outputs: [{ name: "stress_output", type: "number" }], + }) + + const rootGraph = new LGraph() + const instances = [] + + // Create instances + for (let i = 0; i < 25; i++) { + const instance = createTestSubgraphNode(subgraph) + rootGraph.add(instance) + instances.push(instance) + } + + expect(instances.length).toBe(25) + expect(rootGraph.nodes.length).toBe(25) + + // Remove all instances (proper cleanup) + for (const instance of instances) { + rootGraph.remove(instance) + } + + expect(rootGraph.nodes.length).toBe(0) + }) + + it("maintains consistent behavior across multiple cycles", () => { + const subgraph = createTestSubgraph() + const rootGraph = new LGraph() + + for (let cycle = 0; cycle < 10; cycle++) { + const instances = [] + + // Create instances + for (let i = 0; i < 10; i++) { + const instance = createTestSubgraphNode(subgraph) + rootGraph.add(instance) + instances.push(instance) + } + + expect(rootGraph.nodes.length).toBe(10) + + // Remove instances + for (const instance of instances) { + rootGraph.remove(instance) + } + + expect(rootGraph.nodes.length).toBe(0) + } + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphNode.test.ts b/src/lib/litegraph/test/subgraph/SubgraphNode.test.ts new file mode 100644 index 0000000000..aa92ead09d --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphNode.test.ts @@ -0,0 +1,578 @@ +/** + * SubgraphNode Tests + * + * Tests for SubgraphNode instances including construction, + * IO synchronization, and edge cases. + */ + +import { describe, expect, it, vi } from "vitest" + +import { LGraph, Subgraph } from "@/litegraph" + +import { subgraphTest } from "./fixtures/subgraphFixtures" +import { + createTestSubgraph, + createTestSubgraphNode, +} from "./fixtures/subgraphHelpers" + +describe("SubgraphNode Construction", () => { + it("should create a SubgraphNode from a subgraph definition", () => { + const subgraph = createTestSubgraph({ + name: "Test Definition", + inputs: [{ name: "input", type: "number" }], + outputs: [{ name: "output", type: "number" }], + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode).toBeDefined() + expect(subgraphNode.subgraph).toBe(subgraph) + expect(subgraphNode.type).toBe(subgraph.id) + expect(subgraphNode.isVirtualNode).toBe(true) + expect(subgraphNode.displayType).toBe("Subgraph node") + }) + + it("should configure from instance data", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "value", type: "number" }], + outputs: [{ name: "result", type: "number" }], + }) + + const subgraphNode = createTestSubgraphNode(subgraph, { + id: 42, + pos: [300, 150], + size: [180, 80], + }) + + expect(subgraphNode.id).toBe(42) + expect(Array.from(subgraphNode.pos)).toEqual([300, 150]) + expect(Array.from(subgraphNode.size)).toEqual([180, 80]) + }) + + it("should maintain reference to root graph", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + const parentGraph = subgraphNode.graph + + expect(subgraphNode.rootGraph).toBe(parentGraph.rootGraph) + }) + + subgraphTest("should synchronize slots with subgraph definition", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode } = subgraphWithNode + + // SubgraphNode should have same number of inputs/outputs as definition + expect(subgraphNode.inputs).toHaveLength(subgraph.inputs.length) + expect(subgraphNode.outputs).toHaveLength(subgraph.outputs.length) + }) + + subgraphTest("should update slots when subgraph definition changes", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode } = subgraphWithNode + + const initialInputCount = subgraphNode.inputs.length + + // Add an input to the subgraph definition + subgraph.addInput("new_input", "string") + + // SubgraphNode should automatically update (this tests the event system) + expect(subgraphNode.inputs).toHaveLength(initialInputCount + 1) + expect(subgraphNode.inputs.at(-1)?.name).toBe("new_input") + expect(subgraphNode.inputs.at(-1)?.type).toBe("string") + }) +}) + +describe("SubgraphNode Synchronization", () => { + it("should sync input addition", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.inputs).toHaveLength(0) + + subgraph.addInput("value", "number") + + expect(subgraphNode.inputs).toHaveLength(1) + expect(subgraphNode.inputs[0].name).toBe("value") + expect(subgraphNode.inputs[0].type).toBe("number") + }) + + it("should sync output addition", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.outputs).toHaveLength(0) + + subgraph.addOutput("result", "string") + + expect(subgraphNode.outputs).toHaveLength(1) + expect(subgraphNode.outputs[0].name).toBe("result") + expect(subgraphNode.outputs[0].type).toBe("string") + }) + + it("should sync input removal", () => { + const subgraph = createTestSubgraph({ + inputs: [ + { name: "input1", type: "number" }, + { name: "input2", type: "string" }, + ], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.inputs).toHaveLength(2) + + subgraph.removeInput(subgraph.inputs[0]) + + expect(subgraphNode.inputs).toHaveLength(1) + expect(subgraphNode.inputs[0].name).toBe("input2") + }) + + it("should sync output removal", () => { + const subgraph = createTestSubgraph({ + outputs: [ + { name: "output1", type: "number" }, + { name: "output2", type: "string" }, + ], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.outputs).toHaveLength(2) + + subgraph.removeOutput(subgraph.outputs[0]) + + expect(subgraphNode.outputs).toHaveLength(1) + expect(subgraphNode.outputs[0].name).toBe("output2") + }) + + it("should sync slot renaming", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "oldName", type: "number" }], + outputs: [{ name: "oldOutput", type: "string" }], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Rename input + subgraph.inputs[0].label = "newName" + subgraph.events.dispatch("renaming-input", { + input: subgraph.inputs[0], + index: 0, + oldName: "oldName", + newName: "newName", + }) + + expect(subgraphNode.inputs[0].label).toBe("newName") + + // Rename output + subgraph.outputs[0].label = "newOutput" + subgraph.events.dispatch("renaming-output", { + output: subgraph.outputs[0], + index: 0, + oldName: "oldOutput", + newName: "newOutput", + }) + + expect(subgraphNode.outputs[0].label).toBe("newOutput") + }) +}) + +describe("SubgraphNode Lifecycle", () => { + it("should initialize with empty widgets array", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.widgets).toBeDefined() + expect(subgraphNode.widgets).toHaveLength(0) + }) + + it("should handle reconfiguration", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + outputs: [{ name: "output1", type: "string" }], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Initial state + expect(subgraphNode.inputs).toHaveLength(1) + expect(subgraphNode.outputs).toHaveLength(1) + + // Add more slots to subgraph + subgraph.addInput("input2", "string") + subgraph.addOutput("output2", "number") + + // Reconfigure + subgraphNode.configure({ + id: subgraphNode.id, + type: subgraph.id, + pos: [200, 200], + size: [180, 100], + inputs: [], + outputs: [], + properties: {}, + flags: {}, + mode: 0, + }) + + // Should reflect updated subgraph structure + expect(subgraphNode.inputs).toHaveLength(2) + expect(subgraphNode.outputs).toHaveLength(2) + }) + + it("should handle removal lifecycle", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + const parentGraph = new LGraph() + + parentGraph.add(subgraphNode) + expect(parentGraph.nodes).toContain(subgraphNode) + + // Test onRemoved method + subgraphNode.onRemoved() + + // Note: onRemoved doesn't automatically remove from graph + // but it should clean up internal state + expect(subgraphNode.inputs).toBeDefined() + }) +}) + +describe("SubgraphNode Basic Functionality", () => { + it("should identify as subgraph node", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.isSubgraphNode()).toBe(true) + expect(subgraphNode.isVirtualNode).toBe(true) + }) + + it("should inherit input types correctly", () => { + const subgraph = createTestSubgraph({ + inputs: [ + { name: "numberInput", type: "number" }, + { name: "stringInput", type: "string" }, + { name: "anyInput", type: "*" }, + ], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.inputs[0].type).toBe("number") + expect(subgraphNode.inputs[1].type).toBe("string") + expect(subgraphNode.inputs[2].type).toBe("*") + }) + + it("should inherit output types correctly", () => { + const subgraph = createTestSubgraph({ + outputs: [ + { name: "numberOutput", type: "number" }, + { name: "stringOutput", type: "string" }, + { name: "anyOutput", type: "*" }, + ], + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.outputs[0].type).toBe("number") + expect(subgraphNode.outputs[1].type).toBe("string") + expect(subgraphNode.outputs[2].type).toBe("*") + }) +}) + +describe("SubgraphNode Execution", () => { + it("should flatten to ExecutableNodeDTOs", () => { + const subgraph = createTestSubgraph({ nodeCount: 3 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + const executableNodes = new Map() + const flattened = subgraphNode.getInnerNodes(executableNodes) + + expect(flattened).toHaveLength(3) + expect(flattened[0].id).toMatch(/^1:\d+$/) // Should have path-based ID like "1:1" + expect(flattened[1].id).toMatch(/^1:\d+$/) + expect(flattened[2].id).toMatch(/^1:\d+$/) + }) + + it.skip("should handle nested subgraph execution", () => { + // FIXME: Complex nested structure requires proper parent graph setup + // Skip for now - similar issue to ExecutableNodeDTO nested test + // Will implement proper nested execution test in edge cases file + const childSubgraph = createTestSubgraph({ + name: "Child", + nodeCount: 1, + }) + + const parentSubgraph = createTestSubgraph({ + name: "Parent", + nodeCount: 1, + }) + + const childSubgraphNode = createTestSubgraphNode(childSubgraph, { id: 42 }) + parentSubgraph.add(childSubgraphNode) + + const parentSubgraphNode = createTestSubgraphNode(parentSubgraph, { id: 10 }) + + const executableNodes = new Map() + const flattened = parentSubgraphNode.getInnerNodes(executableNodes) + + expect(flattened.length).toBeGreaterThan(0) + }) + + it("should resolve cross-boundary input links", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + nodeCount: 1, + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + const resolved = subgraphNode.resolveSubgraphInputLinks(0) + + expect(resolved).toBeDefined() + expect(Array.isArray(resolved)).toBe(true) + }) + + it("should resolve cross-boundary output links", () => { + const subgraph = createTestSubgraph({ + outputs: [{ name: "output1", type: "number" }], + nodeCount: 1, + }) + const subgraphNode = createTestSubgraphNode(subgraph) + + const resolved = subgraphNode.resolveSubgraphOutputLink(0) + + // May be undefined if no internal connection exists + expect(resolved === undefined || typeof resolved === "object").toBe(true) + }) + + it("should prevent infinite recursion", () => { + // Cycle detection properly prevents infinite recursion when a subgraph contains itself + const subgraph = createTestSubgraph({ nodeCount: 1 }) + const subgraphNode = createTestSubgraphNode(subgraph) + + // Add subgraph node to its own subgraph (circular reference) + subgraph.add(subgraphNode) + + const executableNodes = new Map() + expect(() => { + subgraphNode.getInnerNodes(executableNodes) + }).toThrow(/Circular reference detected.*infinite loop in the subgraph hierarchy/i) + }) + + it("should handle nested subgraph execution", () => { + // This test verifies that subgraph nodes can be properly executed + // when they contain other nodes and produce correct output + const subgraph = createTestSubgraph({ + name: "Nested Execution Test", + nodeCount: 3, + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + // Verify that we can get executable DTOs for all nested nodes + const executableNodes = new Map() + const flattened = subgraphNode.getInnerNodes(executableNodes) + + expect(flattened).toHaveLength(3) + + // Each DTO should have proper execution context + for (const dto of flattened) { + expect(dto).toHaveProperty("id") + expect(dto).toHaveProperty("graph") + expect(dto).toHaveProperty("inputs") + expect(dto.id).toMatch(/^\d+:\d+$/) // Path-based ID format + } + }) + + it("should resolve cross-boundary links", () => { + // This test verifies that links can cross subgraph boundaries + // Currently this is a basic test - full cross-boundary linking + // requires more complex setup with actual connected nodes + const subgraph = createTestSubgraph({ + inputs: [{ name: "external_input", type: "number" }], + outputs: [{ name: "external_output", type: "number" }], + nodeCount: 2, + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + // Verify the subgraph node has the expected I/O structure for cross-boundary links + expect(subgraphNode.inputs).toHaveLength(1) + expect(subgraphNode.outputs).toHaveLength(1) + expect(subgraphNode.inputs[0].name).toBe("external_input") + expect(subgraphNode.outputs[0].name).toBe("external_output") + + // Internal nodes should be flattened correctly + const executableNodes = new Map() + const flattened = subgraphNode.getInnerNodes(executableNodes) + expect(flattened).toHaveLength(2) + }) +}) + +describe("SubgraphNode Edge Cases", () => { + it("should handle deep nesting", () => { + // Create a simpler deep nesting test that works with current implementation + const subgraph = createTestSubgraph({ + name: "Deep Test", + nodeCount: 5, // Multiple nodes to test flattening at depth + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + // Should be able to flatten without errors even with multiple nodes + const executableNodes = new Map() + expect(() => { + subgraphNode.getInnerNodes(executableNodes) + }).not.toThrow() + + const flattened = subgraphNode.getInnerNodes(executableNodes) + expect(flattened.length).toBe(5) + + // All flattened nodes should have proper path-based IDs + for (const dto of flattened) { + expect(dto.id).toMatch(/^\d+:\d+$/) + } + }) + + it("should validate against MAX_NESTED_SUBGRAPHS", () => { + // Test that the MAX_NESTED_SUBGRAPHS constant exists + // Note: Currently not enforced in the implementation + expect(Subgraph.MAX_NESTED_SUBGRAPHS).toBe(1000) + + // This test documents the current behavior - limit is not enforced + // TODO: Implement actual limit enforcement when business requirements clarify + }) +}) + +describe("SubgraphNode Integration", () => { + it("should be addable to a parent graph", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + const parentGraph = new LGraph() + + parentGraph.add(subgraphNode) + + expect(parentGraph.nodes).toContain(subgraphNode) + expect(subgraphNode.graph).toBe(parentGraph) + }) + + subgraphTest("should maintain reference to root graph", ({ subgraphWithNode }) => { + const { subgraphNode } = subgraphWithNode + + // For this test, parentGraph should be the root, but in nested scenarios + // it would traverse up to find the actual root + expect(subgraphNode.rootGraph).toBeDefined() + }) + + it("should handle graph removal properly", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + const parentGraph = new LGraph() + + parentGraph.add(subgraphNode) + expect(parentGraph.nodes).toContain(subgraphNode) + + parentGraph.remove(subgraphNode) + expect(parentGraph.nodes).not.toContain(subgraphNode) + }) +}) + +describe("Foundation Test Utilities", () => { + it("should create test SubgraphNodes with custom options", () => { + const subgraph = createTestSubgraph() + const customPos: [number, number] = [500, 300] + const customSize: [number, number] = [250, 120] + + const subgraphNode = createTestSubgraphNode(subgraph, { + pos: customPos, + size: customSize, + }) + + expect(Array.from(subgraphNode.pos)).toEqual(customPos) + expect(Array.from(subgraphNode.size)).toEqual(customSize) + }) + + subgraphTest("fixtures should provide properly configured SubgraphNode", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + expect(subgraph).toBeDefined() + expect(subgraphNode).toBeDefined() + expect(parentGraph).toBeDefined() + expect(parentGraph.nodes).toContain(subgraphNode) + }) +}) + +describe("SubgraphNode Cleanup", () => { + it("should clean up event listeners when removed", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph() + + // Create and add two nodes + const node1 = createTestSubgraphNode(subgraph) + const node2 = createTestSubgraphNode(subgraph) + rootGraph.add(node1) + rootGraph.add(node2) + + // Verify both nodes start with no inputs + expect(node1.inputs.length).toBe(0) + expect(node2.inputs.length).toBe(0) + + // Remove node2 + rootGraph.remove(node2) + + // Now trigger an event - only node1 should respond + subgraph.events.dispatch("input-added", { + input: { name: "test", type: "number", id: "test-id" } as any, + }) + + // Only node1 should have added an input + expect(node1.inputs.length).toBe(1) // node1 responds + expect(node2.inputs.length).toBe(0) // node2 should NOT respond (but currently does) + }) + + it("should not accumulate handlers over multiple add/remove cycles", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph() + + // Add and remove nodes multiple times + const removedNodes: SubgraphNode[] = [] + for (let i = 0; i < 3; i++) { + const node = createTestSubgraphNode(subgraph) + rootGraph.add(node) + rootGraph.remove(node) + removedNodes.push(node) + } + + // All nodes should have 0 inputs + for (const node of removedNodes) { + expect(node.inputs.length).toBe(0) + } + + // Trigger an event - no nodes should respond + subgraph.events.dispatch("input-added", { + input: { name: "test", type: "number", id: "test-id" } as any, + }) + + // Without cleanup: all 3 removed nodes would have added an input + // With cleanup: no nodes should have added an input + for (const node of removedNodes) { + expect(node.inputs.length).toBe(0) // Should stay 0 after cleanup + } + }) + + it("should clean up input listener controllers on removal", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph({ + inputs: [{ name: "in1", type: "number" }, { name: "in2", type: "string" }], + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + rootGraph.add(subgraphNode) + + // Verify listener controllers exist + expect(subgraphNode.inputs[0]._listenerController).toBeDefined() + expect(subgraphNode.inputs[1]._listenerController).toBeDefined() + + // Track abort calls + const abortSpy1 = vi.spyOn(subgraphNode.inputs[0]._listenerController!, "abort") + const abortSpy2 = vi.spyOn(subgraphNode.inputs[1]._listenerController!, "abort") + + // Remove node + rootGraph.remove(subgraphNode) + + // Verify abort was called on each controller + expect(abortSpy1).toHaveBeenCalledTimes(1) + expect(abortSpy2).toHaveBeenCalledTimes(1) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts b/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts new file mode 100644 index 0000000000..7dcc0ebbcd --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts @@ -0,0 +1,231 @@ +import { describe, expect, it, vi } from "vitest" + +import { LGraphButton } from "@/LGraphButton" +import { LGraphCanvas } from "@/LGraphCanvas" + +import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +describe("SubgraphNode Title Button", () => { + describe("Constructor", () => { + it("should automatically add enter_subgraph button", () => { + const subgraph = createTestSubgraph({ + name: "Test Subgraph", + inputs: [{ name: "input", type: "number" }], + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + + expect(subgraphNode.title_buttons).toHaveLength(1) + + const button = subgraphNode.title_buttons[0] + expect(button).toBeInstanceOf(LGraphButton) + expect(button.name).toBe("enter_subgraph") + expect(button.text).toBe("\uE93B") // pi-window-maximize + expect(button.xOffset).toBe(-10) + expect(button.yOffset).toBe(0) + expect(button.fontSize).toBe(16) + }) + + it("should preserve enter_subgraph button when adding more buttons", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + // Add another button + const customButton = subgraphNode.addTitleButton({ + name: "custom_button", + text: "C", + }) + + expect(subgraphNode.title_buttons).toHaveLength(2) + expect(subgraphNode.title_buttons[0].name).toBe("enter_subgraph") + expect(subgraphNode.title_buttons[1]).toBe(customButton) + }) + }) + + describe("onTitleButtonClick", () => { + it("should open subgraph when enter_subgraph button is clicked", () => { + const subgraph = createTestSubgraph({ + name: "Test Subgraph", + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + const enterButton = subgraphNode.title_buttons[0] + + const canvas = { + openSubgraph: vi.fn(), + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + subgraphNode.onTitleButtonClick(enterButton, canvas) + + expect(canvas.openSubgraph).toHaveBeenCalledWith(subgraph) + expect(canvas.dispatch).not.toHaveBeenCalled() // Should not call parent implementation + }) + + it("should call parent implementation for other buttons", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + const customButton = subgraphNode.addTitleButton({ + name: "custom_button", + text: "X", + }) + + const canvas = { + openSubgraph: vi.fn(), + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + subgraphNode.onTitleButtonClick(customButton, canvas) + + expect(canvas.openSubgraph).not.toHaveBeenCalled() + expect(canvas.dispatch).toHaveBeenCalledWith("litegraph:node-title-button-clicked", { + node: subgraphNode, + button: customButton, + }) + }) + }) + + describe("Integration with node click handling", () => { + it("should handle clicks on enter_subgraph button", () => { + const subgraph = createTestSubgraph({ + name: "Nested Subgraph", + nodeCount: 3, + }) + + const subgraphNode = createTestSubgraphNode(subgraph) + subgraphNode.pos = [100, 100] + subgraphNode.size = [200, 100] + + const enterButton = subgraphNode.title_buttons[0] + enterButton.getWidth = vi.fn().mockReturnValue(25) + enterButton.height = 20 + + // Simulate button being drawn at node-relative coordinates + // Button x: 200 - 5 - 25 = 170 + // Button y: -30 (title height) + enterButton._last_area[0] = 170 + enterButton._last_area[1] = -30 + enterButton._last_area[2] = 25 + enterButton._last_area[3] = 20 + + const canvas = { + ctx: { + measureText: vi.fn().mockReturnValue({ width: 25 }), + } as unknown as CanvasRenderingContext2D, + openSubgraph: vi.fn(), + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + // Simulate click on the enter button + const event = { + canvasX: 275, // Near right edge where button should be + canvasY: 80, // In title area + } as any + + // Calculate node-relative position + const clickPosRelativeToNode: [number, number] = [ + 275 - subgraphNode.pos[0], // 275 - 100 = 175 + 80 - subgraphNode.pos[1], // 80 - 100 = -20 + ] + + const handled = subgraphNode.onMouseDown(event, clickPosRelativeToNode, canvas) + + expect(handled).toBe(true) + expect(canvas.openSubgraph).toHaveBeenCalledWith(subgraph) + }) + + it("should not interfere with normal node operations", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + subgraphNode.pos = [100, 100] + subgraphNode.size = [200, 100] + + const canvas = { + ctx: { + measureText: vi.fn().mockReturnValue({ width: 25 }), + } as unknown as CanvasRenderingContext2D, + openSubgraph: vi.fn(), + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + // Click in the body of the node, not on button + const event = { + canvasX: 200, // Middle of node + canvasY: 150, // Body area + } as any + + // Calculate node-relative position + const clickPosRelativeToNode: [number, number] = [ + 200 - subgraphNode.pos[0], // 200 - 100 = 100 + 150 - subgraphNode.pos[1], // 150 - 100 = 50 + ] + + const handled = subgraphNode.onMouseDown(event, clickPosRelativeToNode, canvas) + + expect(handled).toBe(false) + expect(canvas.openSubgraph).not.toHaveBeenCalled() + }) + + it("should not process button clicks when node is collapsed", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + subgraphNode.pos = [100, 100] + subgraphNode.size = [200, 100] + subgraphNode.flags.collapsed = true + + const enterButton = subgraphNode.title_buttons[0] + enterButton.getWidth = vi.fn().mockReturnValue(25) + enterButton.height = 20 + + // Set button area as if it was drawn + enterButton._last_area[0] = 170 + enterButton._last_area[1] = -30 + enterButton._last_area[2] = 25 + enterButton._last_area[3] = 20 + + const canvas = { + ctx: { + measureText: vi.fn().mockReturnValue({ width: 25 }), + } as unknown as CanvasRenderingContext2D, + openSubgraph: vi.fn(), + dispatch: vi.fn(), + } as unknown as LGraphCanvas + + // Try to click on where the button would be + const event = { + canvasX: 275, + canvasY: 80, + } as any + + const clickPosRelativeToNode: [number, number] = [ + 275 - subgraphNode.pos[0], // 175 + 80 - subgraphNode.pos[1], // -20 + ] + + const handled = subgraphNode.onMouseDown(event, clickPosRelativeToNode, canvas) + + // Should not handle the click when collapsed + expect(handled).toBe(false) + expect(canvas.openSubgraph).not.toHaveBeenCalled() + }) + }) + + describe("Visual properties", () => { + it("should have appropriate visual properties for enter button", () => { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + + const enterButton = subgraphNode.title_buttons[0] + + // Check visual properties + expect(enterButton.text).toBe("\uE93B") // pi-window-maximize + expect(enterButton.fontSize).toBe(16) // Icon size + expect(enterButton.xOffset).toBe(-10) // Positioned from right edge + expect(enterButton.yOffset).toBe(0) // Centered vertically + + // Should be visible by default + expect(enterButton.visible).toBe(true) + }) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphSerialization.test.ts b/src/lib/litegraph/test/subgraph/SubgraphSerialization.test.ts new file mode 100644 index 0000000000..dd3ff1eb7a --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphSerialization.test.ts @@ -0,0 +1,432 @@ +/** + * SubgraphSerialization Tests + * + * Tests for saving, loading, and version compatibility of subgraphs. + * This covers serialization, deserialization, data integrity, and migration scenarios. + */ + +import { describe, expect, it } from "vitest" + +import { LGraph, Subgraph } from "@/litegraph" + +import { + createTestSubgraph, + createTestSubgraphNode, +} from "./fixtures/subgraphHelpers" + +describe("SubgraphSerialization - Basic Serialization", () => { + it("should save and load simple subgraphs", () => { + const original = createTestSubgraph({ + name: "Simple Test", + nodeCount: 2, + }) + original.addInput("in1", "number") + original.addInput("in2", "string") + original.addOutput("out", "boolean") + + // Serialize + const exported = original.asSerialisable() + + // Verify exported structure + expect(exported).toHaveProperty("id", original.id) + expect(exported).toHaveProperty("name", "Simple Test") + expect(exported).toHaveProperty("nodes") + expect(exported).toHaveProperty("links") + expect(exported).toHaveProperty("inputs") + expect(exported).toHaveProperty("outputs") + expect(exported).toHaveProperty("version") + + // Create new instance from serialized data + const restored = new Subgraph(new LGraph(), exported) + + // Verify structure is preserved + expect(restored.id).toBe(original.id) + expect(restored.name).toBe(original.name) + expect(restored.inputs.length).toBe(2) // Only added inputs, not original nodeCount + expect(restored.outputs.length).toBe(1) + // Note: nodes may not be restored if they're not registered types + // This is expected behavior - serialization preserves I/O but nodes need valid types + + // Verify input details + expect(restored.inputs[0].name).toBe("in1") + expect(restored.inputs[0].type).toBe("number") + expect(restored.inputs[1].name).toBe("in2") + expect(restored.inputs[1].type).toBe("string") + expect(restored.outputs[0].name).toBe("out") + expect(restored.outputs[0].type).toBe("boolean") + }) + + it("should verify all properties are preserved", () => { + const original = createTestSubgraph({ + name: "Property Test", + nodeCount: 3, + inputs: [ + { name: "input1", type: "number" }, + { name: "input2", type: "string" }, + ], + outputs: [ + { name: "output1", type: "boolean" }, + { name: "output2", type: "array" }, + ], + }) + + const exported = original.asSerialisable() + const restored = new Subgraph(new LGraph(), exported) + + // Verify core properties + expect(restored.id).toBe(original.id) + expect(restored.name).toBe(original.name) + expect(restored.description).toBe(original.description) + + // Verify I/O structure + expect(restored.inputs.length).toBe(original.inputs.length) + expect(restored.outputs.length).toBe(original.outputs.length) + // Nodes may not be restored if they don't have registered types + + // Verify I/O details match + for (let i = 0; i < original.inputs.length; i++) { + expect(restored.inputs[i].name).toBe(original.inputs[i].name) + expect(restored.inputs[i].type).toBe(original.inputs[i].type) + } + + for (let i = 0; i < original.outputs.length; i++) { + expect(restored.outputs[i].name).toBe(original.outputs[i].name) + expect(restored.outputs[i].type).toBe(original.outputs[i].type) + } + }) + + it("should test export() and configure() methods", () => { + const subgraph = createTestSubgraph({ nodeCount: 1 }) + subgraph.addInput("test_input", "number") + subgraph.addOutput("test_output", "string") + + // Test export + const exported = subgraph.asSerialisable() + expect(exported).toHaveProperty("id") + expect(exported).toHaveProperty("nodes") + expect(exported).toHaveProperty("links") + expect(exported).toHaveProperty("inputs") + expect(exported).toHaveProperty("outputs") + + // Test configure with partial data + const newSubgraph = createTestSubgraph({ nodeCount: 0 }) + expect(() => { + newSubgraph.configure(exported) + }).not.toThrow() + + // Verify configuration applied + expect(newSubgraph.inputs.length).toBe(1) + expect(newSubgraph.outputs.length).toBe(1) + expect(newSubgraph.inputs[0].name).toBe("test_input") + expect(newSubgraph.outputs[0].name).toBe("test_output") + }) +}) + +describe("SubgraphSerialization - Complex Serialization", () => { + it("should serialize nested subgraphs with multiple levels", () => { + // Create a nested structure + const childSubgraph = createTestSubgraph({ + name: "Child", + nodeCount: 2, + inputs: [{ name: "child_in", type: "number" }], + outputs: [{ name: "child_out", type: "string" }], + }) + + const parentSubgraph = createTestSubgraph({ + name: "Parent", + nodeCount: 1, + inputs: [{ name: "parent_in", type: "boolean" }], + outputs: [{ name: "parent_out", type: "array" }], + }) + + // Add child to parent + const childInstance = createTestSubgraphNode(childSubgraph, { id: 100 }) + parentSubgraph.add(childInstance) + + // Serialize both + const childExported = childSubgraph.asSerialisable() + const parentExported = parentSubgraph.asSerialisable() + + // Verify both can be serialized + expect(childExported).toHaveProperty("name", "Child") + expect(parentExported).toHaveProperty("name", "Parent") + expect(parentExported.nodes.length).toBe(2) // 1 original + 1 child subgraph + + // Restore and verify + const restoredChild = new Subgraph(new LGraph(), childExported) + const restoredParent = new Subgraph(new LGraph(), parentExported) + + expect(restoredChild.name).toBe("Child") + expect(restoredParent.name).toBe("Parent") + expect(restoredChild.inputs.length).toBe(1) + expect(restoredParent.inputs.length).toBe(1) + }) + + it("should serialize subgraphs with many nodes and connections", () => { + const largeSubgraph = createTestSubgraph({ + name: "Large Subgraph", + nodeCount: 10, // Many nodes + }) + + // Add many I/O slots + for (let i = 0; i < 5; i++) { + largeSubgraph.addInput(`input_${i}`, "number") + largeSubgraph.addOutput(`output_${i}`, "string") + } + + const exported = largeSubgraph.asSerialisable() + const restored = new Subgraph(new LGraph(), exported) + + // Verify I/O data preserved + expect(restored.inputs.length).toBe(5) + expect(restored.outputs.length).toBe(5) + // Nodes may not be restored if they don't have registered types + + // Verify I/O naming preserved + for (let i = 0; i < 5; i++) { + expect(restored.inputs[i].name).toBe(`input_${i}`) + expect(restored.outputs[i].name).toBe(`output_${i}`) + } + }) + + it("should preserve custom node data", () => { + const subgraph = createTestSubgraph({ nodeCount: 2 }) + + // Add custom properties to nodes (if supported) + const nodes = subgraph.nodes + if (nodes.length > 0) { + const firstNode = nodes[0] + if (firstNode.properties) { + firstNode.properties.customValue = 42 + firstNode.properties.customString = "test" + } + } + + const exported = subgraph.asSerialisable() + const restored = new Subgraph(new LGraph(), exported) + + // Test nodes may not be restored if they don't have registered types + // This is expected behavior + + // Custom properties preservation depends on node implementation + // This test documents the expected behavior + if (restored.nodes.length > 0 && restored.nodes[0].properties) { + // Properties should be preserved if the node supports them + expect(restored.nodes[0].properties).toBeDefined() + } + }) +}) + +describe("SubgraphSerialization - Version Compatibility", () => { + it("should handle version field in exports", () => { + const subgraph = createTestSubgraph({ nodeCount: 1 }) + const exported = subgraph.asSerialisable() + + // Should have version field + expect(exported).toHaveProperty("version") + expect(typeof exported.version).toBe("number") + }) + + it("should load version 1.0+ format", () => { + const modernFormat = { + version: 1, // Number as expected by current implementation + id: "test-modern-id", + name: "Modern Subgraph", + nodes: [], + links: {}, + groups: [], + config: {}, + definitions: { subgraphs: [] }, + inputs: [{ id: "input-id", name: "modern_input", type: "number" }], + outputs: [{ id: "output-id", name: "modern_output", type: "string" }], + inputNode: { + id: -10, + bounding: [0, 0, 120, 60], + }, + outputNode: { + id: -20, + bounding: [300, 0, 120, 60], + }, + widgets: [], + } + + expect(() => { + const subgraph = new Subgraph(new LGraph(), modernFormat) + expect(subgraph.name).toBe("Modern Subgraph") + expect(subgraph.inputs.length).toBe(1) + expect(subgraph.outputs.length).toBe(1) + }).not.toThrow() + }) + + it("should handle missing fields gracefully", () => { + const incompleteFormat = { + version: 1, + id: "incomplete-id", + name: "Incomplete Subgraph", + nodes: [], + links: {}, + groups: [], + config: {}, + definitions: { subgraphs: [] }, + inputNode: { + id: -10, + bounding: [0, 0, 120, 60], + }, + outputNode: { + id: -20, + bounding: [300, 0, 120, 60], + }, + // Missing optional: inputs, outputs, widgets + } + + expect(() => { + const subgraph = new Subgraph(new LGraph(), incompleteFormat) + expect(subgraph.name).toBe("Incomplete Subgraph") + // Should have default empty arrays + expect(Array.isArray(subgraph.inputs)).toBe(true) + expect(Array.isArray(subgraph.outputs)).toBe(true) + }).not.toThrow() + }) + + it("should consider future-proofing", () => { + const futureFormat = { + version: 2, // Future version (number) + id: "future-id", + name: "Future Subgraph", + nodes: [], + links: {}, + groups: [], + config: {}, + definitions: { subgraphs: [] }, + inputs: [], + outputs: [], + inputNode: { + id: -10, + bounding: [0, 0, 120, 60], + }, + outputNode: { + id: -20, + bounding: [300, 0, 120, 60], + }, + widgets: [], + futureFeature: "unknown_data", // Unknown future field + } + + // Should handle future format gracefully + expect(() => { + const subgraph = new Subgraph(new LGraph(), futureFormat) + expect(subgraph.name).toBe("Future Subgraph") + }).not.toThrow() + }) +}) + +describe("SubgraphSerialization - Data Integrity", () => { + it("should pass round-trip testing (save → load → save → compare)", () => { + const original = createTestSubgraph({ + name: "Round Trip Test", + nodeCount: 3, + inputs: [ + { name: "rt_input1", type: "number" }, + { name: "rt_input2", type: "string" }, + ], + outputs: [{ name: "rt_output1", type: "boolean" }], + }) + + // First round trip + const exported1 = original.asSerialisable() + const restored1 = new Subgraph(new LGraph(), exported1) + + // Second round trip + const exported2 = restored1.asSerialisable() + const restored2 = new Subgraph(new LGraph(), exported2) + + // Compare key properties + expect(restored2.id).toBe(original.id) + expect(restored2.name).toBe(original.name) + expect(restored2.inputs.length).toBe(original.inputs.length) + expect(restored2.outputs.length).toBe(original.outputs.length) + // Nodes may not be restored if they don't have registered types + + // Compare I/O details + for (let i = 0; i < original.inputs.length; i++) { + expect(restored2.inputs[i].name).toBe(original.inputs[i].name) + expect(restored2.inputs[i].type).toBe(original.inputs[i].type) + } + + for (let i = 0; i < original.outputs.length; i++) { + expect(restored2.outputs[i].name).toBe(original.outputs[i].name) + expect(restored2.outputs[i].type).toBe(original.outputs[i].type) + } + }) + + it("should verify IDs remain unique", () => { + const subgraph1 = createTestSubgraph({ name: "Unique1", nodeCount: 2 }) + const subgraph2 = createTestSubgraph({ name: "Unique2", nodeCount: 2 }) + + const exported1 = subgraph1.asSerialisable() + const exported2 = subgraph2.asSerialisable() + + // IDs should be unique + expect(exported1.id).not.toBe(exported2.id) + + const restored1 = new Subgraph(new LGraph(), exported1) + const restored2 = new Subgraph(new LGraph(), exported2) + + expect(restored1.id).not.toBe(restored2.id) + expect(restored1.id).toBe(subgraph1.id) + expect(restored2.id).toBe(subgraph2.id) + }) + + it("should maintain connection integrity after load", () => { + const subgraph = createTestSubgraph({ nodeCount: 2 }) + subgraph.addInput("connection_test", "number") + subgraph.addOutput("connection_result", "string") + + const exported = subgraph.asSerialisable() + const restored = new Subgraph(new LGraph(), exported) + + // Verify I/O connections can be established + expect(restored.inputs.length).toBe(1) + expect(restored.outputs.length).toBe(1) + expect(restored.inputs[0].name).toBe("connection_test") + expect(restored.outputs[0].name).toBe("connection_result") + + // Verify subgraph can be instantiated + const instance = createTestSubgraphNode(restored) + expect(instance.inputs.length).toBe(1) + expect(instance.outputs.length).toBe(1) + }) + + it("should preserve node positions and properties", () => { + const subgraph = createTestSubgraph({ nodeCount: 2 }) + + // Modify node positions if possible + if (subgraph.nodes.length > 0) { + const node = subgraph.nodes[0] + if ("pos" in node) { + node.pos = [100, 200] + } + if ("size" in node) { + node.size = [150, 80] + } + } + + const exported = subgraph.asSerialisable() + const restored = new Subgraph(new LGraph(), exported) + + // Test nodes may not be restored if they don't have registered types + // This is expected behavior + + // Position/size preservation depends on node implementation + // This test documents the expected behavior + if (restored.nodes.length > 0) { + const restoredNode = restored.nodes[0] + expect(restoredNode).toBeDefined() + + // Properties should be preserved if supported + if ("pos" in restoredNode && restoredNode.pos) { + expect(Array.isArray(restoredNode.pos)).toBe(true) + } + } + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts b/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts new file mode 100644 index 0000000000..da9672daa8 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts @@ -0,0 +1,332 @@ +import { describe, expect, it, vi } from "vitest" + +import { LinkConnector } from "@/canvas/LinkConnector" +import { ToInputFromIoNodeLink } from "@/canvas/ToInputFromIoNodeLink" +import { SUBGRAPH_INPUT_ID } from "@/constants" +import { LGraphNode, type LinkNetwork } from "@/litegraph" +import { NodeInputSlot } from "@/node/NodeInputSlot" +import { NodeOutputSlot } from "@/node/NodeOutputSlot" +import { isSubgraphInput, isSubgraphOutput } from "@/subgraph/subgraphUtils" + +import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +describe("Subgraph slot connections", () => { + describe("SubgraphInput connections", () => { + it("should connect to compatible regular input slots", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "test_input", type: "number" }], + }) + + const subgraphInput = subgraph.inputs[0] + + const node = new LGraphNode("TestNode") + node.addInput("compatible_input", "number") + node.addInput("incompatible_input", "string") + subgraph.add(node) + + const compatibleSlot = node.inputs[0] as NodeInputSlot + const incompatibleSlot = node.inputs[1] as NodeInputSlot + + expect(compatibleSlot.isValidTarget(subgraphInput)).toBe(true) + expect(incompatibleSlot.isValidTarget(subgraphInput)).toBe(false) + }) + + // "not implemented" yet, but the test passes in terms of type checking + // it("should connect to compatible SubgraphOutput", () => { + // const subgraph = createTestSubgraph({ + // inputs: [{ name: "test_input", type: "number" }], + // outputs: [{ name: "test_output", type: "number" }], + // }) + + // const subgraphInput = subgraph.inputs[0] + // const subgraphOutput = subgraph.outputs[0] + + // expect(subgraphOutput.isValidTarget(subgraphInput)).toBe(true) + // }) + + it("should not connect to another SubgraphInput", () => { + const subgraph = createTestSubgraph({ + inputs: [ + { name: "input1", type: "number" }, + { name: "input2", type: "number" }, + ], + }) + + const subgraphInput1 = subgraph.inputs[0] + const subgraphInput2 = subgraph.inputs[1] + + expect(subgraphInput2.isValidTarget(subgraphInput1)).toBe(false) + }) + + it("should not connect to output slots", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "test_input", type: "number" }], + }) + + const subgraphInput = subgraph.inputs[0] + + const node = new LGraphNode("TestNode") + node.addOutput("test_output", "number") + subgraph.add(node) + const outputSlot = node.outputs[0] as NodeOutputSlot + + expect(outputSlot.isValidTarget(subgraphInput)).toBe(false) + }) + }) + + describe("SubgraphOutput connections", () => { + it("should connect from compatible regular output slots", () => { + const subgraph = createTestSubgraph() + const node = new LGraphNode("TestNode") + node.addOutput("out", "number") + subgraph.add(node) + + const subgraphOutput = subgraph.addOutput("result", "number") + const nodeOutput = node.outputs[0] + + expect(subgraphOutput.isValidTarget(nodeOutput)).toBe(true) + }) + + it("should connect from SubgraphInput", () => { + const subgraph = createTestSubgraph() + + const subgraphInput = subgraph.addInput("value", "number") + const subgraphOutput = subgraph.addOutput("result", "number") + + expect(subgraphOutput.isValidTarget(subgraphInput)).toBe(true) + }) + + it("should not connect to another SubgraphOutput", () => { + const subgraph = createTestSubgraph() + + const subgraphOutput1 = subgraph.addOutput("result1", "number") + const subgraphOutput2 = subgraph.addOutput("result2", "number") + + expect(subgraphOutput1.isValidTarget(subgraphOutput2)).toBe(false) + }) + }) + + describe("LinkConnector dragging behavior", () => { + it("should drag existing link when dragging from input slot connected to subgraph input node", () => { + // Create a subgraph with one input + const subgraph = createTestSubgraph({ + inputs: [{ name: "input1", type: "number" }], + }) + + // Create a node inside the subgraph + const internalNode = new LGraphNode("InternalNode") + internalNode.id = 100 + internalNode.addInput("in", "number") + subgraph.add(internalNode) + + // Connect the subgraph input to the internal node's input + const link = subgraph.inputNode.slots[0].connect(internalNode.inputs[0], internalNode) + expect(link).toBeDefined() + expect(link!.origin_id).toBe(SUBGRAPH_INPUT_ID) + expect(link!.target_id).toBe(internalNode.id) + + // Verify the input slot has the link + expect(internalNode.inputs[0].link).toBe(link!.id) + + // Create a LinkConnector + const setConnectingLinks = vi.fn() + const connector = new LinkConnector(setConnectingLinks) + + // Now try to drag from the input slot + connector.moveInputLink(subgraph as LinkNetwork, internalNode.inputs[0]) + + // Verify that we're dragging the existing link + expect(connector.isConnecting).toBe(true) + expect(connector.state.connectingTo).toBe("input") + expect(connector.state.draggingExistingLinks).toBe(true) + + // Check that we have exactly one render link + expect(connector.renderLinks).toHaveLength(1) + + // The render link should be a ToInputFromIoNodeLink, not MovingInputLink + expect(connector.renderLinks[0]).toBeInstanceOf(ToInputFromIoNodeLink) + + // The input links collection should contain our link + expect(connector.inputLinks).toHaveLength(1) + expect(connector.inputLinks[0]).toBe(link) + + // Verify the link is marked as dragging + expect(link!._dragging).toBe(true) + }) + }) + + describe("Type compatibility", () => { + it("should respect type compatibility for SubgraphInput connections", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "number_input", type: "number" }], + }) + + const subgraphInput = subgraph.inputs[0] + + const node = new LGraphNode("TestNode") + node.addInput("number_slot", "number") + node.addInput("string_slot", "string") + node.addInput("any_slot", "*") + node.addInput("boolean_slot", "boolean") + subgraph.add(node) + + const numberSlot = node.inputs[0] as NodeInputSlot + const stringSlot = node.inputs[1] as NodeInputSlot + const anySlot = node.inputs[2] as NodeInputSlot + const booleanSlot = node.inputs[3] as NodeInputSlot + + expect(numberSlot.isValidTarget(subgraphInput)).toBe(true) + expect(stringSlot.isValidTarget(subgraphInput)).toBe(false) + expect(anySlot.isValidTarget(subgraphInput)).toBe(true) + expect(booleanSlot.isValidTarget(subgraphInput)).toBe(false) + }) + + it("should respect type compatibility for SubgraphOutput connections", () => { + const subgraph = createTestSubgraph() + const node = new LGraphNode("TestNode") + node.addOutput("out", "string") + subgraph.add(node) + + const subgraphOutput = subgraph.addOutput("result", "number") + const nodeOutput = node.outputs[0] + + expect(subgraphOutput.isValidTarget(nodeOutput)).toBe(false) + }) + + it("should handle wildcard SubgraphInput", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "any_input", type: "*" }], + }) + + const subgraphInput = subgraph.inputs[0] + + const node = new LGraphNode("TestNode") + node.addInput("number_slot", "number") + subgraph.add(node) + + const numberSlot = node.inputs[0] as NodeInputSlot + + expect(numberSlot.isValidTarget(subgraphInput)).toBe(true) + }) + }) + + describe("Type guards", () => { + it("should correctly identify SubgraphInput", () => { + const subgraph = createTestSubgraph() + const subgraphInput = subgraph.addInput("value", "number") + const node = new LGraphNode("TestNode") + node.addInput("in", "number") + + expect(isSubgraphInput(subgraphInput)).toBe(true) + expect(isSubgraphInput(node.inputs[0])).toBe(false) + expect(isSubgraphInput(null)).toBe(false) + // eslint-disable-next-line unicorn/no-useless-undefined + expect(isSubgraphInput(undefined)).toBe(false) + expect(isSubgraphInput({})).toBe(false) + }) + + it("should correctly identify SubgraphOutput", () => { + const subgraph = createTestSubgraph() + const subgraphOutput = subgraph.addOutput("result", "number") + const node = new LGraphNode("TestNode") + node.addOutput("out", "number") + + expect(isSubgraphOutput(subgraphOutput)).toBe(true) + expect(isSubgraphOutput(node.outputs[0])).toBe(false) + expect(isSubgraphOutput(null)).toBe(false) + // eslint-disable-next-line unicorn/no-useless-undefined + expect(isSubgraphOutput(undefined)).toBe(false) + expect(isSubgraphOutput({})).toBe(false) + }) + }) + + describe("Nested subgraphs", () => { + it("should handle dragging from SubgraphInput in nested subgraphs", () => { + const parentSubgraph = createTestSubgraph({ + inputs: [{ name: "parent_input", type: "number" }], + outputs: [{ name: "parent_output", type: "number" }], + }) + + const nestedSubgraph = createTestSubgraph({ + inputs: [{ name: "nested_input", type: "number" }], + outputs: [{ name: "nested_output", type: "number" }], + }) + + const nestedSubgraphNode = createTestSubgraphNode(nestedSubgraph) + parentSubgraph.add(nestedSubgraphNode) + + const regularNode = new LGraphNode("TestNode") + regularNode.addInput("test_input", "number") + nestedSubgraph.add(regularNode) + + const nestedSubgraphInput = nestedSubgraph.inputs[0] + const regularNodeSlot = regularNode.inputs[0] as NodeInputSlot + + expect(regularNodeSlot.isValidTarget(nestedSubgraphInput)).toBe(true) + }) + + it("should handle multiple levels of nesting", () => { + const level1 = createTestSubgraph({ + inputs: [{ name: "level1_input", type: "string" }], + }) + + const level2 = createTestSubgraph({ + inputs: [{ name: "level2_input", type: "string" }], + }) + + const level3 = createTestSubgraph({ + inputs: [{ name: "level3_input", type: "string" }], + outputs: [{ name: "level3_output", type: "string" }], + }) + + const level2Node = createTestSubgraphNode(level2) + level1.add(level2Node) + + const level3Node = createTestSubgraphNode(level3) + level2.add(level3Node) + + const deepNode = new LGraphNode("DeepNode") + deepNode.addInput("deep_input", "string") + level3.add(deepNode) + + const level3Input = level3.inputs[0] + const deepNodeSlot = deepNode.inputs[0] as NodeInputSlot + + expect(deepNodeSlot.isValidTarget(level3Input)).toBe(true) + + const level3Output = level3.outputs[0] + expect(level3Output.isValidTarget(level3Input)).toBe(true) + }) + + it("should maintain type checking across nesting levels", () => { + const outer = createTestSubgraph({ + inputs: [{ name: "outer_number", type: "number" }], + }) + + const inner = createTestSubgraph({ + inputs: [ + { name: "inner_number", type: "number" }, + { name: "inner_string", type: "string" }, + ], + }) + + const innerNode = createTestSubgraphNode(inner) + outer.add(innerNode) + + const node = new LGraphNode("TestNode") + node.addInput("number_slot", "number") + node.addInput("string_slot", "string") + inner.add(node) + + const innerNumberInput = inner.inputs[0] + const innerStringInput = inner.inputs[1] + const numberSlot = node.inputs[0] as NodeInputSlot + const stringSlot = node.inputs[1] as NodeInputSlot + + expect(numberSlot.isValidTarget(innerNumberInput)).toBe(true) + expect(numberSlot.isValidTarget(innerStringInput)).toBe(false) + expect(stringSlot.isValidTarget(innerNumberInput)).toBe(false) + expect(stringSlot.isValidTarget(innerStringInput)).toBe(true) + }) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphSlotVisualFeedback.test.ts b/src/lib/litegraph/test/subgraph/SubgraphSlotVisualFeedback.test.ts new file mode 100644 index 0000000000..2871edacd5 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphSlotVisualFeedback.test.ts @@ -0,0 +1,181 @@ +import { beforeEach, describe, expect, it, vi } from "vitest" + +import { LGraphNode } from "@/litegraph" + +import { createTestSubgraph } from "./fixtures/subgraphHelpers" + +describe("SubgraphSlot visual feedback", () => { + let mockCtx: CanvasRenderingContext2D + let mockColorContext: any + let globalAlphaValues: number[] + + beforeEach(() => { + // Clear the array before each test + globalAlphaValues = [] + + // Create a mock canvas context that tracks all globalAlpha values + const mockContext = { + _globalAlpha: 1, + get globalAlpha() { + return this._globalAlpha + }, + set globalAlpha(value: number) { + this._globalAlpha = value + globalAlphaValues.push(value) + }, + fillStyle: "", + strokeStyle: "", + lineWidth: 1, + beginPath: vi.fn(), + arc: vi.fn(), + fill: vi.fn(), + stroke: vi.fn(), + rect: vi.fn(), + fillText: vi.fn(), + } + mockCtx = mockContext as unknown as CanvasRenderingContext2D + + // Create a mock color context + mockColorContext = { + defaultInputColor: "#FF0000", + defaultOutputColor: "#00FF00", + getConnectedColor: vi.fn().mockReturnValue("#0000FF"), + getDisconnectedColor: vi.fn().mockReturnValue("#AAAAAA"), + } + }) + + it("should render SubgraphInput slots with full opacity when dragging from compatible slot", () => { + const subgraph = createTestSubgraph() + const node = new LGraphNode("TestNode") + node.addInput("in", "number") + subgraph.add(node) + + // Add a subgraph input + const subgraphInput = subgraph.addInput("value", "number") + + // Simulate dragging from the subgraph input (which acts as output inside subgraph) + const nodeInput = node.inputs[0] + + // Draw the slot with a compatible fromSlot + subgraphInput.draw({ + ctx: mockCtx, + colorContext: mockColorContext, + fromSlot: nodeInput, + editorAlpha: 1, + }) + + // Should render with full opacity (not 0.4) + // Check that 0.4 was NOT set during drawing + expect(globalAlphaValues).not.toContain(0.4) + }) + + it("should render SubgraphInput slots with 40% opacity when dragging from another SubgraphInput", () => { + const subgraph = createTestSubgraph() + + // Add two subgraph inputs + const subgraphInput1 = subgraph.addInput("value1", "number") + const subgraphInput2 = subgraph.addInput("value2", "number") + + // Draw subgraphInput2 while dragging from subgraphInput1 (incompatible - both are outputs inside subgraph) + subgraphInput2.draw({ + ctx: mockCtx, + colorContext: mockColorContext, + fromSlot: subgraphInput1, + editorAlpha: 1, + }) + + // Should render with 40% opacity + // Check that 0.4 was set during drawing + expect(globalAlphaValues).toContain(0.4) + }) + + it("should render SubgraphOutput slots with full opacity when dragging from compatible slot", () => { + const subgraph = createTestSubgraph() + const node = new LGraphNode("TestNode") + node.addOutput("out", "number") + subgraph.add(node) + + // Add a subgraph output + const subgraphOutput = subgraph.addOutput("result", "number") + + // Simulate dragging from a node output + const nodeOutput = node.outputs[0] + + // Draw the slot with a compatible fromSlot + subgraphOutput.draw({ + ctx: mockCtx, + colorContext: mockColorContext, + fromSlot: nodeOutput, + editorAlpha: 1, + }) + + // Should render with full opacity (not 0.4) + // Check that 0.4 was NOT set during drawing + expect(globalAlphaValues).not.toContain(0.4) + }) + + it("should render SubgraphOutput slots with 40% opacity when dragging from another SubgraphOutput", () => { + const subgraph = createTestSubgraph() + + // Add two subgraph outputs + const subgraphOutput1 = subgraph.addOutput("result1", "number") + const subgraphOutput2 = subgraph.addOutput("result2", "number") + + // Draw subgraphOutput2 while dragging from subgraphOutput1 (incompatible - both are inputs inside subgraph) + subgraphOutput2.draw({ + ctx: mockCtx, + colorContext: mockColorContext, + fromSlot: subgraphOutput1, + editorAlpha: 1, + }) + + // Should render with 40% opacity + // Check that 0.4 was set during drawing + expect(globalAlphaValues).toContain(0.4) + }) + + // "not implmeneted yet" + // it("should render slots with full opacity when dragging between compatible SubgraphInput and SubgraphOutput", () => { + // const subgraph = createTestSubgraph() + + // // Add subgraph input and output with matching types + // const subgraphInput = subgraph.addInput("value", "number") + // const subgraphOutput = subgraph.addOutput("result", "number") + + // // Draw SubgraphOutput slot while dragging from SubgraphInput + // subgraphOutput.draw({ + // ctx: mockCtx, + // colorContext: mockColorContext, + // fromSlot: subgraphInput, + // editorAlpha: 1, + // }) + + // // Should render with full opacity + // expect(mockCtx.globalAlpha).toBe(1) + // }) + + it("should render slots with 40% opacity when dragging between incompatible types", () => { + const subgraph = createTestSubgraph() + const node = new LGraphNode("TestNode") + node.addOutput("string_output", "string") + subgraph.add(node) + + // Add subgraph output with incompatible type + const subgraphOutput = subgraph.addOutput("result", "number") + + // Get the string output slot from the node + const nodeStringOutput = node.outputs[0] + + // Draw the SubgraphOutput slot while dragging from a node output with incompatible type + subgraphOutput.draw({ + ctx: mockCtx, + colorContext: mockColorContext, + fromSlot: nodeStringOutput, + editorAlpha: 1, + }) + + // Should render with 40% opacity due to type mismatch + // Check that 0.4 was set during drawing + expect(globalAlphaValues).toContain(0.4) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts b/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts new file mode 100644 index 0000000000..5af4e36be3 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts @@ -0,0 +1,349 @@ +import type { ISlotType } from "@/interfaces" +import type { TWidgetType } from "@/types/widgets" + +import { describe, expect, it } from "vitest" + +import { LGraphNode, Subgraph } from "@/litegraph" +import { BaseWidget } from "@/widgets/BaseWidget" + +import { createEventCapture, createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +// Helper to create a node with a widget +function createNodeWithWidget( + title: string, + widgetType: TWidgetType = "number", + widgetValue: any = 42, + slotType: ISlotType = "number", + tooltip?: string, +) { + const node = new LGraphNode(title) + const input = node.addInput("value", slotType) + node.addOutput("out", slotType) + + const widget = new BaseWidget({ + name: "widget", + type: widgetType, + value: widgetValue, + y: 0, + options: widgetType === "number" ? { min: 0, max: 100, step: 1 } : {}, + node, + tooltip, + }) + node.widgets = [widget] + input.widget = { name: widget.name } + + return { node, widget, input } +} + +// Helper to connect subgraph input to node and create SubgraphNode +function setupPromotedWidget(subgraph: Subgraph, node: LGraphNode, slotIndex = 0) { + subgraph.add(node) + subgraph.inputNode.slots[slotIndex].connect(node.inputs[slotIndex], node) + return createTestSubgraphNode(subgraph) +} + +describe("SubgraphWidgetPromotion", () => { + describe("Widget Promotion Functionality", () => { + it("should promote widgets when connecting node to subgraph input", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "value", type: "number" }], + }) + + const { node } = createNodeWithWidget("Test Node") + const subgraphNode = setupPromotedWidget(subgraph, node) + + // The widget should be promoted to the subgraph node + expect(subgraphNode.widgets).toHaveLength(1) + expect(subgraphNode.widgets[0].name).toBe("value") // Uses subgraph input name + expect(subgraphNode.widgets[0].type).toBe("number") + expect(subgraphNode.widgets[0].value).toBe(42) + }) + + it("should promote all widget types", () => { + const subgraph = createTestSubgraph({ + inputs: [ + { name: "numberInput", type: "number" }, + { name: "stringInput", type: "string" }, + { name: "toggleInput", type: "boolean" }, + ], + }) + + // Create nodes with different widget types + const { node: numberNode } = createNodeWithWidget("Number Node", "number", 100) + const { node: stringNode } = createNodeWithWidget("String Node", "string", "test", "string") + const { node: toggleNode } = createNodeWithWidget("Toggle Node", "toggle", true, "boolean") + + // Setup all nodes + subgraph.add(numberNode) + subgraph.add(stringNode) + subgraph.add(toggleNode) + + subgraph.inputNode.slots[0].connect(numberNode.inputs[0], numberNode) + subgraph.inputNode.slots[1].connect(stringNode.inputs[0], stringNode) + subgraph.inputNode.slots[2].connect(toggleNode.inputs[0], toggleNode) + + const subgraphNode = createTestSubgraphNode(subgraph) + + // All widgets should be promoted + expect(subgraphNode.widgets).toHaveLength(3) + + // Check specific widget values + expect(subgraphNode.widgets[0].value).toBe(100) + expect(subgraphNode.widgets[1].value).toBe("test") + expect(subgraphNode.widgets[2].value).toBe(true) + }) + + it("should fire widget-promoted event when widget is promoted", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input", type: "number" }], + }) + + const eventCapture = createEventCapture(subgraph.events, [ + "widget-promoted", + "widget-demoted", + ]) + + const { node } = createNodeWithWidget("Test Node") + const subgraphNode = setupPromotedWidget(subgraph, node) + + // Check event was fired + const promotedEvents = eventCapture.getEventsByType("widget-promoted") + expect(promotedEvents).toHaveLength(1) + expect(promotedEvents[0].detail.widget).toBeDefined() + expect(promotedEvents[0].detail.subgraphNode).toBe(subgraphNode) + + eventCapture.cleanup() + }) + + it("should fire widget-demoted event when removing promoted widget", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input", type: "number" }], + }) + + const { node } = createNodeWithWidget("Test Node") + const subgraphNode = setupPromotedWidget(subgraph, node) + expect(subgraphNode.widgets).toHaveLength(1) + + const eventCapture = createEventCapture(subgraph.events, ["widget-demoted"]) + + // Remove the widget + subgraphNode.removeWidgetByName("input") + + // Check event was fired + const demotedEvents = eventCapture.getEventsByType("widget-demoted") + expect(demotedEvents).toHaveLength(1) + expect(demotedEvents[0].detail.widget).toBeDefined() + expect(demotedEvents[0].detail.subgraphNode).toBe(subgraphNode) + + // Widget should be removed + expect(subgraphNode.widgets).toHaveLength(0) + + eventCapture.cleanup() + }) + + it("should handle multiple widgets on same node", () => { + const subgraph = createTestSubgraph({ + inputs: [ + { name: "input1", type: "number" }, + { name: "input2", type: "string" }, + ], + }) + + // Create node with multiple widgets + const multiWidgetNode = new LGraphNode("Multi Widget Node") + const numInput = multiWidgetNode.addInput("num", "number") + const strInput = multiWidgetNode.addInput("str", "string") + + const widget1 = new BaseWidget({ + name: "widget1", + type: "number", + value: 10, + y: 0, + options: {}, + node: multiWidgetNode, + }) + + const widget2 = new BaseWidget({ + name: "widget2", + type: "string", + value: "hello", + y: 40, + options: {}, + node: multiWidgetNode, + }) + + multiWidgetNode.widgets = [widget1, widget2] + numInput.widget = { name: widget1.name } + strInput.widget = { name: widget2.name } + subgraph.add(multiWidgetNode) + + // Connect both inputs + subgraph.inputNode.slots[0].connect(multiWidgetNode.inputs[0], multiWidgetNode) + subgraph.inputNode.slots[1].connect(multiWidgetNode.inputs[1], multiWidgetNode) + + // Create SubgraphNode + const subgraphNode = createTestSubgraphNode(subgraph) + + // Both widgets should be promoted + expect(subgraphNode.widgets).toHaveLength(2) + expect(subgraphNode.widgets[0].name).toBe("input1") + expect(subgraphNode.widgets[0].value).toBe(10) + + expect(subgraphNode.widgets[1].name).toBe("input2") + expect(subgraphNode.widgets[1].value).toBe("hello") + }) + + it("should fire widget-demoted events when node is removed", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input", type: "number" }], + }) + + const { node } = createNodeWithWidget("Test Node") + const subgraphNode = setupPromotedWidget(subgraph, node) + + expect(subgraphNode.widgets).toHaveLength(1) + + const eventCapture = createEventCapture(subgraph.events, ["widget-demoted"]) + + // Remove the subgraph node + subgraphNode.onRemoved() + + // Should fire demoted events for all widgets + const demotedEvents = eventCapture.getEventsByType("widget-demoted") + expect(demotedEvents).toHaveLength(1) + + eventCapture.cleanup() + }) + + it("should not promote widget if input is not connected", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input", type: "number" }], + }) + + const { node } = createNodeWithWidget("Test Node") + subgraph.add(node) + + // Don't connect - just create SubgraphNode + const subgraphNode = createTestSubgraphNode(subgraph) + + // No widgets should be promoted + expect(subgraphNode.widgets).toHaveLength(0) + }) + + it("should handle disconnection of promoted widget", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "input", type: "number" }], + }) + + const { node } = createNodeWithWidget("Test Node") + const subgraphNode = setupPromotedWidget(subgraph, node) + expect(subgraphNode.widgets).toHaveLength(1) + + // Disconnect the link + subgraph.inputNode.slots[0].disconnect() + + // Widget should be removed (through event listeners) + expect(subgraphNode.widgets).toHaveLength(0) + }) + }) + + describe("Tooltip Promotion", () => { + it("should preserve widget tooltip when promoting", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "value", type: "number" }], + }) + + const originalTooltip = "This is a test tooltip" + const { node } = createNodeWithWidget("Test Node", "number", 42, "number", originalTooltip) + const subgraphNode = setupPromotedWidget(subgraph, node) + + // The promoted widget should preserve the original tooltip + expect(subgraphNode.widgets).toHaveLength(1) + expect(subgraphNode.widgets[0].tooltip).toBe(originalTooltip) + }) + + it("should handle widgets with no tooltip", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "value", type: "number" }], + }) + + const { node } = createNodeWithWidget("Test Node", "number", 42, "number") + const subgraphNode = setupPromotedWidget(subgraph, node) + + // The promoted widget should have undefined tooltip + expect(subgraphNode.widgets).toHaveLength(1) + expect(subgraphNode.widgets[0].tooltip).toBeUndefined() + }) + + it("should preserve tooltips for multiple promoted widgets", () => { + const subgraph = createTestSubgraph({ + inputs: [ + { name: "input1", type: "number" }, + { name: "input2", type: "string" }, + ], + }) + + // Create node with multiple widgets with different tooltips + const multiWidgetNode = new LGraphNode("Multi Widget Node") + const numInput = multiWidgetNode.addInput("num", "number") + const strInput = multiWidgetNode.addInput("str", "string") + + const widget1 = new BaseWidget({ + name: "widget1", + type: "number", + value: 10, + y: 0, + options: {}, + node: multiWidgetNode, + tooltip: "Number widget tooltip", + }) + + const widget2 = new BaseWidget({ + name: "widget2", + type: "string", + value: "hello", + y: 40, + options: {}, + node: multiWidgetNode, + tooltip: "String widget tooltip", + }) + + multiWidgetNode.widgets = [widget1, widget2] + numInput.widget = { name: widget1.name } + strInput.widget = { name: widget2.name } + subgraph.add(multiWidgetNode) + + // Connect both inputs + subgraph.inputNode.slots[0].connect(multiWidgetNode.inputs[0], multiWidgetNode) + subgraph.inputNode.slots[1].connect(multiWidgetNode.inputs[1], multiWidgetNode) + + // Create SubgraphNode + const subgraphNode = createTestSubgraphNode(subgraph) + + // Both widgets should preserve their tooltips + expect(subgraphNode.widgets).toHaveLength(2) + expect(subgraphNode.widgets[0].tooltip).toBe("Number widget tooltip") + expect(subgraphNode.widgets[1].tooltip).toBe("String widget tooltip") + }) + + it("should preserve original tooltip after promotion", () => { + const subgraph = createTestSubgraph({ + inputs: [{ name: "value", type: "number" }], + }) + + const originalTooltip = "Original tooltip" + const { node } = createNodeWithWidget("Test Node", "number", 42, "number", originalTooltip) + const subgraphNode = setupPromotedWidget(subgraph, node) + + const promotedWidget = subgraphNode.widgets[0] + + // The promoted widget should preserve the original tooltip + expect(promotedWidget.tooltip).toBe(originalTooltip) + + // The promoted widget should still function normally + expect(promotedWidget.name).toBe("value") // Uses subgraph input name + expect(promotedWidget.type).toBe("number") + expect(promotedWidget.value).toBe(42) + }) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/fixtures/README.md b/src/lib/litegraph/test/subgraph/fixtures/README.md new file mode 100644 index 0000000000..86d2e9e19d --- /dev/null +++ b/src/lib/litegraph/test/subgraph/fixtures/README.md @@ -0,0 +1,311 @@ +# Subgraph Testing Fixtures and Utilities + +This directory contains the testing infrastructure for LiteGraph's subgraph functionality. These utilities provide a consistent, easy-to-use API for writing subgraph tests. + +## What is a Subgraph? + +A subgraph in LiteGraph is a graph-within-a-graph that can be reused as a single node. It has: +- Input slots that map to an internal input node +- Output slots that map to an internal output node +- Internal nodes and connections +- The ability to be instantiated multiple times as SubgraphNode instances + +## Quick Start + +```typescript +// Import what you need +import { createTestSubgraph, assertSubgraphStructure } from "./fixtures/subgraphHelpers" +import { subgraphTest } from "./fixtures/subgraphFixtures" + +// Option 1: Create a subgraph manually +it("should do something", () => { + const subgraph = createTestSubgraph({ + name: "My Test Subgraph", + inputCount: 2, + outputCount: 1 + }) + + // Test your functionality + expect(subgraph.inputs).toHaveLength(2) +}) + +// Option 2: Use pre-configured fixtures +subgraphTest("should handle events", ({ simpleSubgraph, eventCapture }) => { + // simpleSubgraph comes pre-configured with 1 input, 1 output, and 2 nodes + expect(simpleSubgraph.inputs).toHaveLength(1) + // Your test logic here +}) +``` + +## Files Overview + +### `subgraphHelpers.ts` - Core Helper Functions + +**Main Factory Functions:** +- `createTestSubgraph(options?)` - Creates a fully configured Subgraph instance with root graph +- `createTestSubgraphNode(subgraph, options?)` - Creates a SubgraphNode (instance of a subgraph) +- `createNestedSubgraphs(options?)` - Creates nested subgraph hierarchies for testing deep structures + +**Assertion & Validation:** +- `assertSubgraphStructure(subgraph, expected)` - Validates subgraph has expected inputs/outputs/nodes +- `verifyEventSequence(events, expectedSequence)` - Ensures events fired in correct order +- `logSubgraphStructure(subgraph, label?)` - Debug helper to print subgraph structure + +**Test Data & Events:** +- `createTestSubgraphData(overrides?)` - Creates raw ExportedSubgraph data for serialization tests +- `createComplexSubgraphData(nodeCount?)` - Generates complex subgraph with internal connections +- `createEventCapture(eventTarget, eventTypes)` - Sets up event monitoring with automatic cleanup + +### `subgraphFixtures.ts` - Vitest Fixtures + +Pre-configured test scenarios that automatically set up and tear down: + +**Basic Fixtures (`subgraphTest`):** +- `emptySubgraph` - Minimal subgraph with no inputs/outputs/nodes +- `simpleSubgraph` - 1 input ("input": number), 1 output ("output": number), 2 internal nodes +- `complexSubgraph` - 3 inputs (data, control, text), 2 outputs (result, status), 5 nodes +- `nestedSubgraph` - 3-level deep hierarchy with 2 nodes per level +- `subgraphWithNode` - Complete setup: subgraph definition + SubgraphNode instance + parent graph +- `eventCapture` - Subgraph with event monitoring for all I/O events + +**Edge Case Fixtures (`edgeCaseTest`):** +- `circularSubgraph` - Two subgraphs set up for circular reference testing +- `deeplyNestedSubgraph` - 50 levels deep for performance/limit testing +- `maxIOSubgraph` - 20 inputs and 20 outputs for stress testing + +### `testSubgraphs.json` - Sample Test Data +Pre-defined subgraph configurations for consistent testing across different scenarios. + +**Note on Static UUIDs**: The hardcoded UUIDs in this file (e.g., "simple-subgraph-uuid", "complex-subgraph-uuid") are intentionally static to ensure test reproducibility and snapshot testing compatibility. + +## Usage Examples + +### Basic Test Creation + +```typescript +import { describe, expect, it } from "vitest" +import { createTestSubgraph, assertSubgraphStructure } from "./fixtures/subgraphHelpers" + +describe("My Subgraph Feature", () => { + it("should work correctly", () => { + const subgraph = createTestSubgraph({ + name: "My Test", + inputCount: 2, + outputCount: 1, + nodeCount: 3 + }) + + assertSubgraphStructure(subgraph, { + inputCount: 2, + outputCount: 1, + nodeCount: 3, + name: "My Test" + }) + + // Your specific test logic... + }) +}) +``` + +### Using Fixtures + +```typescript +import { subgraphTest } from "./fixtures/subgraphFixtures" + +subgraphTest("should handle events", ({ eventCapture }) => { + const { subgraph, capture } = eventCapture + + subgraph.addInput("test", "number") + + expect(capture.events).toHaveLength(2) // adding-input, input-added +}) +``` + +### Event Testing + +```typescript +import { createEventCapture, verifyEventSequence } from "./fixtures/subgraphHelpers" + +it("should fire events in correct order", () => { + const subgraph = createTestSubgraph() + const capture = createEventCapture(subgraph.events, ["adding-input", "input-added"]) + + subgraph.addInput("test", "number") + + verifyEventSequence(capture.events, ["adding-input", "input-added"]) + + capture.cleanup() // Important: clean up listeners +}) +``` + +### Nested Structure Testing + +```typescript +import { createNestedSubgraphs } from "./fixtures/subgraphHelpers" + +it("should handle deep nesting", () => { + const nested = createNestedSubgraphs({ + depth: 5, + nodesPerLevel: 2 + }) + + expect(nested.subgraphs).toHaveLength(5) + expect(nested.leafSubgraph.nodes).toHaveLength(2) +}) +``` + +## Common Patterns + +### Testing SubgraphNode Instances + +```typescript +it("should create and configure a SubgraphNode", () => { + // First create the subgraph definition + const subgraph = createTestSubgraph({ + inputs: [{ name: "value", type: "number" }], + outputs: [{ name: "result", type: "number" }] + }) + + // Then create an instance of it + const subgraphNode = createTestSubgraphNode(subgraph, { + pos: [100, 200], + size: [180, 100] + }) + + // The SubgraphNode will have matching slots + expect(subgraphNode.inputs).toHaveLength(1) + expect(subgraphNode.outputs).toHaveLength(1) + expect(subgraphNode.subgraph).toBe(subgraph) +}) +``` + +### Complete Test with Parent Graph + +```typescript +subgraphTest("should work in a parent graph", ({ subgraphWithNode }) => { + const { subgraph, subgraphNode, parentGraph } = subgraphWithNode + + // Everything is pre-configured and connected + expect(parentGraph.nodes).toContain(subgraphNode) + expect(subgraphNode.graph).toBe(parentGraph) + expect(subgraphNode.subgraph).toBe(subgraph) +}) +``` + +## Configuration Options + +### `createTestSubgraph(options)` +```typescript +interface TestSubgraphOptions { + id?: UUID // Custom UUID + name?: string // Custom name + nodeCount?: number // Number of internal nodes + inputCount?: number // Number of inputs (uses generic types) + outputCount?: number // Number of outputs (uses generic types) + inputs?: Array<{ // Specific input definitions + name: string + type: ISlotType + }> + outputs?: Array<{ // Specific output definitions + name: string + type: ISlotType + }> +} +``` + +**Note**: Cannot specify both `inputs` array and `inputCount` (or `outputs` array and `outputCount`) - the function will throw an error with details. + +### `createNestedSubgraphs(options)` +```typescript +interface NestedSubgraphOptions { + depth?: number // Nesting depth (default: 2) + nodesPerLevel?: number // Nodes per subgraph (default: 2) + inputsPerSubgraph?: number // Inputs per subgraph (default: 1) + outputsPerSubgraph?: number // Outputs per subgraph (default: 1) +} +``` + +## Important Architecture Notes + +### Subgraph vs SubgraphNode +- **Subgraph**: The definition/template (like a class definition) +- **SubgraphNode**: An instance of a subgraph placed in a graph (like a class instance) +- One Subgraph can have many SubgraphNode instances + +### Special Node IDs +- Input node always has ID `-10` (SUBGRAPH_INPUT_ID) +- Output node always has ID `-20` (SUBGRAPH_OUTPUT_ID) +- These are virtual nodes that exist in every subgraph + +### Common Pitfalls + +1. **Array vs Index**: The `inputs` and `outputs` arrays don't have an `index` property on items. Use `indexOf()`: + ```typescript + // ❌ Wrong + expect(input.index).toBe(0) + + // ✅ Correct + expect(subgraph.inputs.indexOf(input)).toBe(0) + ``` + +2. **Graph vs Subgraph Property**: SubgraphInputNode/OutputNode have `subgraph`, not `graph`: + ```typescript + // ❌ Wrong + expect(inputNode.graph).toBe(subgraph) + + // ✅ Correct + expect(inputNode.subgraph).toBe(subgraph) + ``` + +3. **Event Detail Structure**: Events have specific detail structures: + ```typescript + // Input events + "adding-input": { name: string, type: string } + "input-added": { input: SubgraphInput, index: number } + + // Output events + "adding-output": { name: string, type: string } + "output-added": { output: SubgraphOutput, index: number } + ``` + +4. **Links are stored in a Map**: Use `.size` not `.length`: + ```typescript + // ❌ Wrong + expect(subgraph.links.length).toBe(1) + + // ✅ Correct + expect(subgraph.links.size).toBe(1) + ``` + +## Testing Best Practices + +- Always use helper functions instead of manual setup +- Use fixtures for common scenarios to avoid repetitive code +- Clean up event listeners with `capture.cleanup()` after event tests +- Use `verifyEventSequence()` to test event ordering +- Remember fixtures are created fresh for each test (no shared state) +- Use `assertSubgraphStructure()` for comprehensive validation + +## Debugging Tips + +- Use `logSubgraphStructure(subgraph)` to print subgraph details +- Check `subgraph.rootGraph` to verify graph hierarchy +- Event capture includes timestamps for debugging timing issues +- All factory functions accept optional parameters for customization + +## Adding New Test Utilities + +When extending the test infrastructure: + +1. Add new helper functions to `subgraphHelpers.ts` +2. Add new fixtures to `subgraphFixtures.ts` +3. Update this README with usage examples +4. Follow existing patterns for consistency +5. Add TypeScript types for all parameters + +## Performance Notes + +- Helper functions are optimized for test clarity, not performance +- Use `structuredClone()` for deep copying test data +- Event capture systems automatically clean up listeners +- Fixtures are created fresh for each test to avoid state contamination diff --git a/src/lib/litegraph/test/subgraph/fixtures/advancedEventHelpers.ts b/src/lib/litegraph/test/subgraph/fixtures/advancedEventHelpers.ts new file mode 100644 index 0000000000..cec8aae3b3 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/fixtures/advancedEventHelpers.ts @@ -0,0 +1,244 @@ +import type { CapturedEvent } from "./subgraphHelpers" + +import { expect } from "vitest" + +/** + * Extended captured event with additional metadata not in the base infrastructure + */ +export interface ExtendedCapturedEvent extends CapturedEvent { + defaultPrevented: boolean + bubbles: boolean + cancelable: boolean +} + +/** + * Creates an enhanced event capture that includes additional event properties + * This extends the basic createEventCapture with more metadata + */ +export function createExtendedEventCapture( + eventTarget: EventTarget, + eventTypes: string[], +) { + const capturedEvents: ExtendedCapturedEvent[] = [] + const listeners: Array<() => void> = [] + + for (const eventType of eventTypes) { + const listener = (event: Event) => { + capturedEvents.push({ + type: eventType, + detail: (event as CustomEvent).detail, + timestamp: Date.now(), + defaultPrevented: event.defaultPrevented, + bubbles: event.bubbles, + cancelable: event.cancelable, + }) + } + + eventTarget.addEventListener(eventType, listener) + listeners.push(() => eventTarget.removeEventListener(eventType, listener)) + } + + return { + events: capturedEvents, + clear: () => { capturedEvents.length = 0 }, + cleanup: () => { for (const cleanup of listeners) cleanup() }, + getEventsByType: (type: string) => capturedEvents.filter(e => e.type === type), + getLatestEvent: () => capturedEvents.at(-1), + getFirstEvent: () => capturedEvents[0], + + /** + * Wait for a specific event type to be captured + */ + async waitForEvent(type: string, timeoutMs: number = 1000): Promise> { + const existingEvent = capturedEvents.find(e => e.type === type) + if (existingEvent) return existingEvent + + return new Promise((resolve, reject) => { + const timeout = setTimeout(() => { + eventTarget.removeEventListener(type, eventListener) + reject(new Error(`Event ${type} not received within ${timeoutMs}ms`)) + }, timeoutMs) + + const eventListener = (_event: Event) => { + const capturedEvent = capturedEvents.find(e => e.type === type) + if (capturedEvent) { + clearTimeout(timeout) + eventTarget.removeEventListener(type, eventListener) + resolve(capturedEvent) + } + } + + eventTarget.addEventListener(type, eventListener) + }) + }, + + /** + * Wait for a sequence of events to occur in order + */ + async waitForSequence(expectedSequence: string[], timeoutMs: number = 1000): Promise[]> { + // Check if sequence is already complete + if (capturedEvents.length >= expectedSequence.length) { + const actualSequence = capturedEvents.slice(0, expectedSequence.length).map(e => e.type) + if (JSON.stringify(actualSequence) === JSON.stringify(expectedSequence)) { + return capturedEvents.slice(0, expectedSequence.length) + } + } + + return new Promise((resolve, reject) => { + const timeout = setTimeout(() => { + cleanup() + const actual = capturedEvents.map(e => e.type).join(", ") + const expected = expectedSequence.join(", ") + reject(new Error(`Event sequence not completed within ${timeoutMs}ms. Expected: ${expected}, Got: ${actual}`)) + }, timeoutMs) + + const checkSequence = () => { + if (capturedEvents.length >= expectedSequence.length) { + const actualSequence = capturedEvents.slice(0, expectedSequence.length).map(e => e.type) + if (JSON.stringify(actualSequence) === JSON.stringify(expectedSequence)) { + cleanup() + resolve(capturedEvents.slice(0, expectedSequence.length)) + } + } + } + + const eventListener = () => checkSequence() + + const cleanup = () => { + clearTimeout(timeout) + for (const type of expectedSequence) { + eventTarget.removeEventListener(type, eventListener) + } + } + + // Listen for all expected event types + for (const type of expectedSequence) { + eventTarget.addEventListener(type, eventListener) + } + + // Initial check in case events already exist + checkSequence() + }) + }, + } +} + +/** + * Options for memory leak testing + */ +export interface MemoryLeakTestOptions { + cycles?: number + instancesPerCycle?: number + gcAfterEach?: boolean + maxMemoryGrowth?: number +} + +/** + * Creates a memory leak test factory + * Useful for testing that event listeners and references are properly cleaned up + */ +export function createMemoryLeakTest( + setupFn: () => { ref: WeakRef, cleanup: () => void }, + options: MemoryLeakTestOptions = {}, +) { + const { + cycles = 1, + instancesPerCycle = 1, + gcAfterEach = true, + maxMemoryGrowth = 0, + } = options + + return async () => { + const refs: WeakRef[] = [] + const initialMemory = process.memoryUsage?.()?.heapUsed || 0 + + for (let cycle = 0; cycle < cycles; cycle++) { + const cycleRefs: WeakRef[] = [] + + for (let instance = 0; instance < instancesPerCycle; instance++) { + const { ref, cleanup } = setupFn() + cycleRefs.push(ref) + cleanup() + } + + refs.push(...cycleRefs) + + if (gcAfterEach && global.gc) { + global.gc() + await new Promise(resolve => setTimeout(resolve, 10)) + } + } + + // Final garbage collection + if (global.gc) { + global.gc() + await new Promise(resolve => setTimeout(resolve, 50)) + + // Check if objects were collected + const uncollectedRefs = refs.filter(ref => ref.deref() !== undefined) + if (uncollectedRefs.length > 0) { + console.warn(`${uncollectedRefs.length} objects were not garbage collected`) + } + } + + // Memory growth check + if (maxMemoryGrowth > 0 && process.memoryUsage) { + const finalMemory = process.memoryUsage().heapUsed + const memoryGrowth = finalMemory - initialMemory + + if (memoryGrowth > maxMemoryGrowth) { + throw new Error(`Memory growth ${memoryGrowth} bytes exceeds limit ${maxMemoryGrowth} bytes`) + } + } + + return refs + } +} + +/** + * Creates a performance monitor for event operations + */ +export function createEventPerformanceMonitor() { + const measurements: Array<{ + operation: string + duration: number + timestamp: number + }> = [] + + return { + measure: (operation: string, fn: () => T): T => { + const start = performance.now() + const result = fn() + const end = performance.now() + + measurements.push({ + operation, + duration: end - start, + timestamp: start, + }) + + return result + }, + + getMeasurements: () => [...measurements], + + getAverageDuration: (operation: string) => { + const operationMeasurements = measurements.filter(m => m.operation === operation) + if (operationMeasurements.length === 0) return 0 + + const totalDuration = operationMeasurements.reduce((sum, m) => sum + m.duration, 0) + return totalDuration / operationMeasurements.length + }, + + clear: () => { measurements.length = 0 }, + + assertPerformance: (operation: string, maxDuration: number) => { + const measurements = this.getMeasurements() + const relevantMeasurements = measurements.filter(m => m.operation === operation) + if (relevantMeasurements.length === 0) return + + const avgDuration = relevantMeasurements.reduce((sum, m) => sum + m.duration, 0) / relevantMeasurements.length + expect(avgDuration).toBeLessThan(maxDuration) + }, + } +} diff --git a/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts new file mode 100644 index 0000000000..b91772fa11 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts @@ -0,0 +1,293 @@ +/** + * Vitest Fixtures for Subgraph Testing + * + * This file provides reusable Vitest fixtures that other developers can use + * in their test files. Each fixture provides a clean, pre-configured subgraph + * setup for different testing scenarios. + */ + +import { LGraph, Subgraph } from "@/litegraph" +import { SubgraphNode } from "@/subgraph/SubgraphNode" + +import { test } from "../../testExtensions" +import { + createEventCapture, + createNestedSubgraphs, + createTestSubgraph, + createTestSubgraphNode, +} from "./subgraphHelpers" + +export interface SubgraphFixtures { + /** A minimal subgraph with no inputs, outputs, or nodes */ + emptySubgraph: Subgraph + + /** A simple subgraph with 1 input and 1 output */ + simpleSubgraph: Subgraph + + /** A complex subgraph with multiple inputs, outputs, and internal nodes */ + complexSubgraph: Subgraph + + /** A nested subgraph structure (3 levels deep) */ + nestedSubgraph: ReturnType + + /** A subgraph with its corresponding SubgraphNode instance */ + subgraphWithNode: { + subgraph: Subgraph + subgraphNode: SubgraphNode + parentGraph: LGraph + } + + /** Event capture system for testing subgraph events */ + eventCapture: { + subgraph: Subgraph + capture: ReturnType + } +} + +/** + * Extended test with subgraph fixtures. + * Use this instead of the base `test` for subgraph testing. + * @example + * ```typescript + * import { subgraphTest } from "./fixtures/subgraphFixtures" + * + * subgraphTest("should handle simple operations", ({ simpleSubgraph }) => { + * expect(simpleSubgraph.inputs.length).toBe(1) + * expect(simpleSubgraph.outputs.length).toBe(1) + * }) + * ``` + */ +export const subgraphTest = test.extend({ + + emptySubgraph: async ({ }, use: (value: unknown) => Promise) => { + const subgraph = createTestSubgraph({ + name: "Empty Test Subgraph", + inputCount: 0, + outputCount: 0, + nodeCount: 0, + }) + + await use(subgraph) + }, + + simpleSubgraph: async ({ }, use: (value: unknown) => Promise) => { + const subgraph = createTestSubgraph({ + name: "Simple Test Subgraph", + inputs: [{ name: "input", type: "number" }], + outputs: [{ name: "output", type: "number" }], + nodeCount: 2, + }) + + await use(subgraph) + }, + + complexSubgraph: async ({ }, use: (value: unknown) => Promise) => { + const subgraph = createTestSubgraph({ + name: "Complex Test Subgraph", + inputs: [ + { name: "data", type: "number" }, + { name: "control", type: "boolean" }, + { name: "text", type: "string" }, + ], + outputs: [ + { name: "result", type: "number" }, + { name: "status", type: "boolean" }, + ], + nodeCount: 5, + }) + + await use(subgraph) + }, + + nestedSubgraph: async ({ }, use: (value: unknown) => Promise) => { + const nested = createNestedSubgraphs({ + depth: 3, + nodesPerLevel: 2, + inputsPerSubgraph: 1, + outputsPerSubgraph: 1, + }) + + await use(nested) + }, + + subgraphWithNode: async ({ }, use: (value: unknown) => Promise) => { + // Create the subgraph definition + const subgraph = createTestSubgraph({ + name: "Subgraph With Node", + inputs: [{ name: "input", type: "*" }], + outputs: [{ name: "output", type: "*" }], + nodeCount: 1, + }) + + // Create the parent graph and subgraph node instance + const parentGraph = new LGraph() + const subgraphNode = createTestSubgraphNode(subgraph, { + pos: [200, 200], + size: [180, 80], + }) + + // Add the subgraph node to the parent graph + parentGraph.add(subgraphNode) + + await use({ + subgraph, + subgraphNode, + parentGraph, + }) + }, + + eventCapture: async ({ }, use: (value: unknown) => Promise) => { + const subgraph = createTestSubgraph({ + name: "Event Test Subgraph", + }) + + // Set up event capture for all subgraph events + const capture = createEventCapture(subgraph.events, [ + "adding-input", + "input-added", + "removing-input", + "renaming-input", + "adding-output", + "output-added", + "removing-output", + "renaming-output", + ]) + + await use({ subgraph, capture }) + + // Cleanup event listeners + capture.cleanup() + }, +}) + +/** + * Fixtures that test edge cases and error conditions. + * These may leave the system in an invalid state and should be used carefully. + */ +export interface EdgeCaseFixtures { + /** Subgraph with circular references (for testing recursion detection) */ + circularSubgraph: { + rootGraph: LGraph + subgraphA: Subgraph + subgraphB: Subgraph + nodeA: SubgraphNode + nodeB: SubgraphNode + } + + /** Deeply nested subgraphs approaching the theoretical limit */ + deeplyNestedSubgraph: ReturnType + + /** Subgraph with maximum inputs and outputs */ + maxIOSubgraph: Subgraph +} + +/** + * Test with edge case fixtures. Use sparingly and with caution. + * These tests may intentionally create invalid states. + */ +export const edgeCaseTest = subgraphTest.extend({ + + circularSubgraph: async ({ }, use: (value: unknown) => Promise) => { + const rootGraph = new LGraph() + + // Create two subgraphs that will reference each other + const subgraphA = createTestSubgraph({ + name: "Subgraph A", + inputs: [{ name: "input", type: "*" }], + outputs: [{ name: "output", type: "*" }], + }) + + const subgraphB = createTestSubgraph({ + name: "Subgraph B", + inputs: [{ name: "input", type: "*" }], + outputs: [{ name: "output", type: "*" }], + }) + + // Create instances (this doesn't create circular refs by itself) + const nodeA = createTestSubgraphNode(subgraphA, { pos: [100, 100] }) + const nodeB = createTestSubgraphNode(subgraphB, { pos: [300, 100] }) + + // Add nodes to root graph + rootGraph.add(nodeA) + rootGraph.add(nodeB) + + await use({ + rootGraph, + subgraphA, + subgraphB, + nodeA, + nodeB, + }) + }, + + deeplyNestedSubgraph: async ({ }, use: (value: unknown) => Promise) => { + // Create a very deep nesting structure (but not exceeding MAX_NESTED_SUBGRAPHS) + const nested = createNestedSubgraphs({ + depth: 50, // Deep but reasonable + nodesPerLevel: 1, + inputsPerSubgraph: 1, + outputsPerSubgraph: 1, + }) + + await use(nested) + }, + + maxIOSubgraph: async ({ }, use: (value: unknown) => Promise) => { + // Create a subgraph with many inputs and outputs + const inputs = Array.from({ length: 20 }, (_, i) => ({ + name: `input_${i}`, + type: i % 2 === 0 ? "number" : "string" as const, + })) + + const outputs = Array.from({ length: 20 }, (_, i) => ({ + name: `output_${i}`, + type: i % 2 === 0 ? "number" : "string" as const, + })) + + const subgraph = createTestSubgraph({ + name: "Max IO Subgraph", + inputs, + outputs, + nodeCount: 10, + }) + + await use(subgraph) + }, +}) + +/** + * Helper to verify fixture integrity. + * Use this in tests to ensure fixtures are properly set up. + */ +export function verifyFixtureIntegrity>( + fixture: T, + expectedProperties: (keyof T)[], +): void { + for (const prop of expectedProperties) { + if (!(prop in fixture)) { + throw new Error(`Fixture missing required property: ${String(prop)}`) + } + if (fixture[prop] === undefined || fixture[prop] === null) { + throw new Error(`Fixture property ${String(prop)} is null or undefined`) + } + } +} + +/** + * Creates a snapshot-friendly representation of a subgraph for testing. + * Useful for serialization tests and regression detection. + */ +export function createSubgraphSnapshot(subgraph: Subgraph) { + return { + id: subgraph.id, + name: subgraph.name, + inputCount: subgraph.inputs.length, + outputCount: subgraph.outputs.length, + nodeCount: subgraph.nodes.length, + linkCount: subgraph.links.size, + inputs: subgraph.inputs.map(i => ({ name: i.name, type: i.type })), + outputs: subgraph.outputs.map(o => ({ name: o.name, type: o.type })), + hasInputNode: !!subgraph.inputNode, + hasOutputNode: !!subgraph.outputNode, + } +} diff --git a/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts new file mode 100644 index 0000000000..69c5d3ec8f --- /dev/null +++ b/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts @@ -0,0 +1,493 @@ +/** + * Test Helper Functions for Subgraph Testing + * + * This file contains the core utilities that all subgraph developers will use. + * These functions provide consistent ways to create test subgraphs, nodes, and + * verify their behavior. + */ + +import type { ISlotType, NodeId } from "@/litegraph" +import type { ExportedSubgraph, ExportedSubgraphInstance } from "@/types/serialisation" +import type { UUID } from "@/utils/uuid" + +import { expect } from "vitest" + +import { LGraph, LGraphNode, Subgraph } from "@/litegraph" +import { SubgraphNode } from "@/subgraph/SubgraphNode" +import { createUuidv4 } from "@/utils/uuid" + +export interface TestSubgraphOptions { + id?: UUID + name?: string + nodeCount?: number + inputCount?: number + outputCount?: number + inputs?: Array<{ name: string, type: ISlotType }> + outputs?: Array<{ name: string, type: ISlotType }> +} + +export interface TestSubgraphNodeOptions { + id?: NodeId + pos?: [number, number] + size?: [number, number] +} + +export interface NestedSubgraphOptions { + depth?: number + nodesPerLevel?: number + inputsPerSubgraph?: number + outputsPerSubgraph?: number +} + +export interface SubgraphStructureExpectation { + inputCount?: number + outputCount?: number + nodeCount?: number + name?: string + hasInputNode?: boolean + hasOutputNode?: boolean +} + +export interface CapturedEvent { + type: string + detail: T + timestamp: number +} + +/** + * Creates a test subgraph with specified inputs, outputs, and nodes. + * This is the primary function for creating subgraphs in tests. + * @param options Configuration options for the subgraph + * @returns A configured Subgraph instance + * @example + * ```typescript + * // Create empty subgraph + * const subgraph = createTestSubgraph() + * + * // Create subgraph with specific I/O + * const subgraph = createTestSubgraph({ + * inputs: [{ name: "value", type: "number" }], + * outputs: [{ name: "result", type: "string" }], + * nodeCount: 3 + * }) + * ``` + */ +export function createTestSubgraph(options: TestSubgraphOptions = {}): Subgraph { + // Validate options - cannot specify both inputs array and inputCount + if (options.inputs && options.inputCount) { + throw new Error(`Cannot specify both 'inputs' array and 'inputCount'. Choose one approach. Received options: ${JSON.stringify(options)}`) + } + + // Validate options - cannot specify both outputs array and outputCount + if (options.outputs && options.outputCount) { + throw new Error(`Cannot specify both 'outputs' array and 'outputCount'. Choose one approach. Received options: ${JSON.stringify(options)}`) + } + const rootGraph = new LGraph() + + // Create the base subgraph data + const subgraphData: ExportedSubgraph = { + // Basic graph properties + version: 1, + nodes: [], + links: {}, + groups: [], + config: {}, + definitions: { subgraphs: [] }, + + // Subgraph-specific properties + id: options.id || createUuidv4(), + name: options.name || "Test Subgraph", + + // IO Nodes (required for subgraph functionality) + inputNode: { + id: -10, // SUBGRAPH_INPUT_ID + bounding: [10, 100, 150, 126], // [x, y, width, height] + pinned: false, + }, + outputNode: { + id: -20, // SUBGRAPH_OUTPUT_ID + bounding: [400, 100, 140, 126], // [x, y, width, height] + pinned: false, + }, + + // IO definitions - will be populated by addInput/addOutput calls + inputs: [], + outputs: [], + widgets: [], + } + + // Create the subgraph + const subgraph = new Subgraph(rootGraph, subgraphData) + + // Add requested inputs + if (options.inputs) { + for (const input of options.inputs) { + subgraph.addInput(input.name, input.type) + } + } else if (options.inputCount) { + for (let i = 0; i < options.inputCount; i++) { + subgraph.addInput(`input_${i}`, "*") + } + } + + // Add requested outputs + if (options.outputs) { + for (const output of options.outputs) { + subgraph.addOutput(output.name, output.type) + } + } else if (options.outputCount) { + for (let i = 0; i < options.outputCount; i++) { + subgraph.addOutput(`output_${i}`, "*") + } + } + + // Add test nodes if requested + if (options.nodeCount) { + for (let i = 0; i < options.nodeCount; i++) { + const node = new LGraphNode(`Test Node ${i}`) + node.addInput("in", "*") + node.addOutput("out", "*") + subgraph.add(node) + } + } + + return subgraph +} + +/** + * Creates a SubgraphNode instance from a subgraph definition. + * The node is automatically added to a test parent graph. + * @param subgraph The subgraph definition to create a node from + * @param options Configuration options for the subgraph node + * @returns A configured SubgraphNode instance + * @example + * ```typescript + * const subgraph = createTestSubgraph({ inputs: [{ name: "value", type: "number" }] }) + * const subgraphNode = createTestSubgraphNode(subgraph, { + * id: 42, + * pos: [100, 200], + * size: [180, 100] + * }) + * ``` + */ +export function createTestSubgraphNode( + subgraph: Subgraph, + options: TestSubgraphNodeOptions = {}, +): SubgraphNode { + const parentGraph = new LGraph() + + const instanceData: ExportedSubgraphInstance = { + id: options.id || 1, + type: subgraph.id, + pos: options.pos || [100, 100], + size: options.size || [200, 100], + inputs: [], + outputs: [], + properties: {}, + flags: {}, + mode: 0, + } + + return new SubgraphNode(parentGraph, subgraph, instanceData) +} + +/** + * Creates a nested hierarchy of subgraphs for testing deep nesting scenarios. + * @param options Configuration for the nested structure + * @returns Object containing the root graph and all created subgraphs + * @example + * ```typescript + * const nested = createNestedSubgraphs({ depth: 3, nodesPerLevel: 2 }) + * // Creates: Root -> Subgraph1 -> Subgraph2 -> Subgraph3 + * ``` + */ +export function createNestedSubgraphs(options: NestedSubgraphOptions = {}) { + const { + depth = 2, + nodesPerLevel = 2, + inputsPerSubgraph = 1, + outputsPerSubgraph = 1, + } = options + + const rootGraph = new LGraph() + const subgraphs: Subgraph[] = [] + const subgraphNodes: SubgraphNode[] = [] + + let currentParent = rootGraph + + for (let level = 0; level < depth; level++) { + // Create subgraph for this level + const subgraph = createTestSubgraph({ + name: `Level ${level} Subgraph`, + nodeCount: nodesPerLevel, + inputCount: inputsPerSubgraph, + outputCount: outputsPerSubgraph, + }) + + subgraphs.push(subgraph) + + // Create instance in parent + const subgraphNode = createTestSubgraphNode(subgraph, { + pos: [100 + level * 200, 100], + }) + + if (currentParent instanceof LGraph) { + currentParent.add(subgraphNode) + } else { + currentParent.add(subgraphNode) + } + + subgraphNodes.push(subgraphNode) + + // Next level will be nested inside this subgraph + currentParent = subgraph + } + + return { + rootGraph, + subgraphs, + subgraphNodes, + depth, + leafSubgraph: subgraphs.at(-1), + } +} + +/** + * Asserts that a subgraph has the expected structure. + * This provides consistent validation across all tests. + * @param subgraph The subgraph to validate + * @param expected The expected structure + * @example + * ```typescript + * assertSubgraphStructure(subgraph, { + * inputCount: 2, + * outputCount: 1, + * name: "Expected Name" + * }) + * ``` + */ +export function assertSubgraphStructure( + subgraph: Subgraph, + expected: SubgraphStructureExpectation, +): void { + if (expected.inputCount !== undefined) { + expect(subgraph.inputs.length).toBe(expected.inputCount) + } + + if (expected.outputCount !== undefined) { + expect(subgraph.outputs.length).toBe(expected.outputCount) + } + + if (expected.nodeCount !== undefined) { + expect(subgraph.nodes.length).toBe(expected.nodeCount) + } + + if (expected.name !== undefined) { + expect(subgraph.name).toBe(expected.name) + } + + if (expected.hasInputNode !== false) { + expect(subgraph.inputNode).toBeDefined() + expect(subgraph.inputNode.id).toBe(-10) + } + + if (expected.hasOutputNode !== false) { + expect(subgraph.outputNode).toBeDefined() + expect(subgraph.outputNode.id).toBe(-20) + } +} + +/** + * Verifies that events were fired in the expected sequence. + * Useful for testing event-driven behavior. + * @param capturedEvents Array of captured events + * @param expectedSequence Expected sequence of event types + * @example + * ```typescript + * verifyEventSequence(events, [ + * "adding-input", + * "input-added", + * "adding-output", + * "output-added" + * ]) + * ``` + */ +export function verifyEventSequence( + capturedEvents: CapturedEvent[], + expectedSequence: string[], +): void { + expect(capturedEvents.length).toBe(expectedSequence.length) + + for (const [i, element] of expectedSequence.entries()) { + expect(capturedEvents[i].type).toBe(element) + } + + // Verify timestamps are in order + for (let i = 1; i < capturedEvents.length; i++) { + expect(capturedEvents[i].timestamp).toBeGreaterThanOrEqual( + capturedEvents[i - 1].timestamp, + ) + } +} + +/** + * Creates test subgraph data with optional overrides. + * Useful for serialization/deserialization tests. + * @param overrides Properties to override in the default data + * @returns ExportedSubgraph data structure + */ +export function createTestSubgraphData(overrides: Partial = {}): ExportedSubgraph { + return { + version: 1, + nodes: [], + links: {}, + groups: [], + config: {}, + definitions: { subgraphs: [] }, + + id: createUuidv4(), + name: "Test Data Subgraph", + + inputNode: { + id: -10, + bounding: [10, 100, 150, 126], + pinned: false, + }, + outputNode: { + id: -20, + bounding: [400, 100, 140, 126], + pinned: false, + }, + + inputs: [], + outputs: [], + widgets: [], + + ...overrides, + } +} + +/** + * Creates a complex subgraph with multiple nodes and connections. + * Useful for testing realistic scenarios. + * @param nodeCount Number of internal nodes to create + * @returns Complex subgraph data structure + */ +export function createComplexSubgraphData(nodeCount: number = 5): ExportedSubgraph { + const nodes = [] + const links: Record = {} + + // Create internal nodes + for (let i = 0; i < nodeCount; i++) { + nodes.push({ + id: i + 1, // Start from 1 to avoid conflicts with IO nodes + type: "basic/test", + pos: [100 + i * 150, 200], + size: [120, 60], + inputs: [{ name: "in", type: "*", link: null }], + outputs: [{ name: "out", type: "*", links: [] }], + properties: { value: i }, + flags: {}, + mode: 0, + }) + } + + // Create some internal links + for (let i = 0; i < nodeCount - 1; i++) { + const linkId = i + 1 + links[linkId] = { + id: linkId, + origin_id: i + 1, + origin_slot: 0, + target_id: i + 2, + target_slot: 0, + type: "*", + } + } + + return createTestSubgraphData({ + nodes, + links, + inputs: [ + { name: "input1", type: "number", pos: [0, 0] }, + { name: "input2", type: "string", pos: [0, 1] }, + ], + outputs: [ + { name: "output1", type: "number", pos: [0, 0] }, + { name: "output2", type: "string", pos: [0, 1] }, + ], + }) +} + +/** + * Creates an event capture system for testing event sequences. + * @param eventTarget The event target to monitor + * @param eventTypes Array of event types to capture + * @returns Object with captured events and helper methods + */ +export function createEventCapture( + eventTarget: EventTarget, + eventTypes: string[], +) { + const capturedEvents: CapturedEvent[] = [] + const listeners: Array<() => void> = [] + + // Set up listeners for each event type + for (const eventType of eventTypes) { + const listener = (event: Event) => { + capturedEvents.push({ + type: eventType, + detail: (event as CustomEvent).detail, + timestamp: Date.now(), + }) + } + + eventTarget.addEventListener(eventType, listener) + listeners.push(() => eventTarget.removeEventListener(eventType, listener)) + } + + return { + events: capturedEvents, + clear: () => { capturedEvents.length = 0 }, + cleanup: () => { + // Remove all event listeners to prevent memory leaks + for (const cleanup of listeners) cleanup() + }, + getEventsByType: (type: string) => capturedEvents.filter(e => e.type === type), + } +} + +/** + * Utility to log subgraph structure for debugging tests. + * @param subgraph The subgraph to inspect + * @param label Optional label for the log output + */ +export function logSubgraphStructure(subgraph: Subgraph, label: string = "Subgraph"): void { + console.log(`\n=== ${label} Structure ===`) + console.log(`Name: ${subgraph.name}`) + console.log(`ID: ${subgraph.id}`) + console.log(`Inputs: ${subgraph.inputs.length}`) + console.log(`Outputs: ${subgraph.outputs.length}`) + console.log(`Nodes: ${subgraph.nodes.length}`) + console.log(`Links: ${subgraph.links.size}`) + + if (subgraph.inputs.length > 0) { + console.log("Input details:", subgraph.inputs.map(i => ({ name: i.name, type: i.type }))) + } + + if (subgraph.outputs.length > 0) { + console.log("Output details:", subgraph.outputs.map(o => ({ name: o.name, type: o.type }))) + } + + console.log("========================\n") +} + +// Re-export expect from vitest for convenience +export { expect } from "vitest" diff --git a/src/lib/litegraph/test/subgraph/fixtures/testSubgraphs.json b/src/lib/litegraph/test/subgraph/fixtures/testSubgraphs.json new file mode 100644 index 0000000000..afce66a3bd --- /dev/null +++ b/src/lib/litegraph/test/subgraph/fixtures/testSubgraphs.json @@ -0,0 +1,444 @@ +{ + "simpleSubgraph": { + "version": 1, + "nodes": [ + { + "id": 1, + "type": "basic/math", + "pos": [200, 150], + "size": [120, 60], + "inputs": [ + { "name": "a", "type": "number", "link": null }, + { "name": "b", "type": "number", "link": null } + ], + "outputs": [ + { "name": "result", "type": "number", "links": [] } + ], + "properties": { "operation": "add" }, + "flags": {}, + "mode": 0 + } + ], + "links": {}, + "groups": [], + "config": {}, + "definitions": { "subgraphs": [] }, + + "id": "simple-subgraph-uuid", + "name": "Simple Math Subgraph", + + "inputNode": { + "id": -10, + "type": "subgraph/input", + "pos": [10, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + "outputNode": { + "id": -20, + "type": "subgraph/output", + "pos": [400, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + + "inputs": [ + { + "name": "input_a", + "type": "number", + "pos": [0, 0] + }, + { + "name": "input_b", + "type": "number", + "pos": [0, 1] + } + ], + "outputs": [ + { + "name": "result", + "type": "number", + "pos": [0, 0] + } + ], + "widgets": [] + }, + + "complexSubgraph": { + "version": 1, + "nodes": [ + { + "id": 1, + "type": "math/multiply", + "pos": [150, 100], + "size": [120, 60], + "inputs": [ + { "name": "a", "type": "number", "link": null }, + { "name": "b", "type": "number", "link": null } + ], + "outputs": [ + { "name": "result", "type": "number", "links": [1] } + ], + "properties": {}, + "flags": {}, + "mode": 0 + }, + { + "id": 2, + "type": "math/add", + "pos": [300, 100], + "size": [120, 60], + "inputs": [ + { "name": "a", "type": "number", "link": 1 }, + { "name": "b", "type": "number", "link": null } + ], + "outputs": [ + { "name": "result", "type": "number", "links": [2] } + ], + "properties": {}, + "flags": {}, + "mode": 0 + }, + { + "id": 3, + "type": "logic/compare", + "pos": [150, 200], + "size": [120, 60], + "inputs": [ + { "name": "a", "type": "number", "link": null }, + { "name": "b", "type": "number", "link": null } + ], + "outputs": [ + { "name": "result", "type": "boolean", "links": [] } + ], + "properties": { "operation": "greater_than" }, + "flags": {}, + "mode": 0 + }, + { + "id": 4, + "type": "string/concat", + "pos": [300, 200], + "size": [120, 60], + "inputs": [ + { "name": "a", "type": "string", "link": null }, + { "name": "b", "type": "string", "link": null } + ], + "outputs": [ + { "name": "result", "type": "string", "links": [] } + ], + "properties": {}, + "flags": {}, + "mode": 0 + } + ], + "links": { + "1": { + "id": 1, + "origin_id": 1, + "origin_slot": 0, + "target_id": 2, + "target_slot": 0, + "type": "number" + }, + "2": { + "id": 2, + "origin_id": 2, + "origin_slot": 0, + "target_id": -20, + "target_slot": 0, + "type": "number" + } + }, + "groups": [], + "config": {}, + "definitions": { "subgraphs": [] }, + + "id": "complex-subgraph-uuid", + "name": "Complex Processing Subgraph", + + "inputNode": { + "id": -10, + "type": "subgraph/input", + "pos": [10, 150], + "size": [140, 86], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + "outputNode": { + "id": -20, + "type": "subgraph/output", + "pos": [450, 150], + "size": [140, 66], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + + "inputs": [ + { + "name": "number1", + "type": "number", + "pos": [0, 0] + }, + { + "name": "number2", + "type": "number", + "pos": [0, 1] + }, + { + "name": "text1", + "type": "string", + "pos": [0, 2] + }, + { + "name": "text2", + "type": "string", + "pos": [0, 3] + } + ], + "outputs": [ + { + "name": "calculated_result", + "type": "number", + "pos": [0, 0] + }, + { + "name": "comparison_result", + "type": "boolean", + "pos": [0, 1] + }, + { + "name": "concatenated_text", + "type": "string", + "pos": [0, 2] + } + ], + "widgets": [] + }, + + "nestedSubgraphLevel1": { + "version": 1, + "nodes": [], + "links": {}, + "groups": [], + "config": {}, + "definitions": { + "subgraphs": [ + { + "version": 1, + "nodes": [ + { + "id": 1, + "type": "basic/constant", + "pos": [200, 100], + "size": [100, 40], + "inputs": [], + "outputs": [ + { "name": "value", "type": "number", "links": [] } + ], + "properties": { "value": 42 }, + "flags": {}, + "mode": 0 + } + ], + "links": {}, + "groups": [], + "config": {}, + "definitions": { "subgraphs": [] }, + + "id": "nested-level2-uuid", + "name": "Level 2 Subgraph", + + "inputNode": { + "id": -10, + "type": "subgraph/input", + "pos": [10, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + "outputNode": { + "id": -20, + "type": "subgraph/output", + "pos": [350, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + + "inputs": [], + "outputs": [ + { + "name": "constant_value", + "type": "number", + "pos": [0, 0] + } + ], + "widgets": [] + } + ] + }, + + "id": "nested-level1-uuid", + "name": "Level 1 Subgraph", + + "inputNode": { + "id": -10, + "type": "subgraph/input", + "pos": [10, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + "outputNode": { + "id": -20, + "type": "subgraph/output", + "pos": [400, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + + "inputs": [ + { + "name": "external_input", + "type": "string", + "pos": [0, 0] + } + ], + "outputs": [ + { + "name": "processed_output", + "type": "number", + "pos": [0, 0] + } + ], + "widgets": [] + }, + + "emptySubgraph": { + "version": 1, + "nodes": [], + "links": {}, + "groups": [], + "config": {}, + "definitions": { "subgraphs": [] }, + + "id": "empty-subgraph-uuid", + "name": "Empty Subgraph", + + "inputNode": { + "id": -10, + "type": "subgraph/input", + "pos": [10, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + "outputNode": { + "id": -20, + "type": "subgraph/output", + "pos": [400, 100], + "size": [140, 26], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + + "inputs": [], + "outputs": [], + "widgets": [] + }, + + "maxIOSubgraph": { + "version": 1, + "nodes": [], + "links": {}, + "groups": [], + "config": {}, + "definitions": { "subgraphs": [] }, + + "id": "max-io-subgraph-uuid", + "name": "Max I/O Subgraph", + + "inputNode": { + "id": -10, + "type": "subgraph/input", + "pos": [10, 100], + "size": [140, 200], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + "outputNode": { + "id": -20, + "type": "subgraph/output", + "pos": [400, 100], + "size": [140, 200], + "inputs": [], + "outputs": [], + "properties": {}, + "flags": {}, + "mode": 0 + }, + + "inputs": [ + { "name": "input_0", "type": "number", "pos": [0, 0] }, + { "name": "input_1", "type": "string", "pos": [0, 1] }, + { "name": "input_2", "type": "boolean", "pos": [0, 2] }, + { "name": "input_3", "type": "number", "pos": [0, 3] }, + { "name": "input_4", "type": "string", "pos": [0, 4] }, + { "name": "input_5", "type": "boolean", "pos": [0, 5] }, + { "name": "input_6", "type": "number", "pos": [0, 6] }, + { "name": "input_7", "type": "string", "pos": [0, 7] }, + { "name": "input_8", "type": "boolean", "pos": [0, 8] }, + { "name": "input_9", "type": "number", "pos": [0, 9] } + ], + "outputs": [ + { "name": "output_0", "type": "number", "pos": [0, 0] }, + { "name": "output_1", "type": "string", "pos": [0, 1] }, + { "name": "output_2", "type": "boolean", "pos": [0, 2] }, + { "name": "output_3", "type": "number", "pos": [0, 3] }, + { "name": "output_4", "type": "string", "pos": [0, 4] }, + { "name": "output_5", "type": "boolean", "pos": [0, 5] }, + { "name": "output_6", "type": "number", "pos": [0, 6] }, + { "name": "output_7", "type": "string", "pos": [0, 7] }, + { "name": "output_8", "type": "boolean", "pos": [0, 8] }, + { "name": "output_9", "type": "number", "pos": [0, 9] } + ], + "widgets": [] + } +} \ No newline at end of file diff --git a/src/lib/litegraph/test/subgraph/subgraphSerialization.test.ts b/src/lib/litegraph/test/subgraph/subgraphSerialization.test.ts new file mode 100644 index 0000000000..4f75f0a621 --- /dev/null +++ b/src/lib/litegraph/test/subgraph/subgraphSerialization.test.ts @@ -0,0 +1,145 @@ +import { describe, expect, it } from "vitest" + +import { LGraph } from "@/litegraph" + +import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +describe("Subgraph Serialization", () => { + describe("LGraph.asSerialisable", () => { + it("should not include unused subgraph definitions", () => { + const rootGraph = new LGraph() + + // Create subgraphs + const usedSubgraph = createTestSubgraph({ name: "Used Subgraph" }) + const unusedSubgraph = createTestSubgraph({ name: "Unused Subgraph" }) + + // Add both to registry + rootGraph._subgraphs.set(usedSubgraph.id, usedSubgraph) + rootGraph._subgraphs.set(unusedSubgraph.id, unusedSubgraph) + + // Only add node for used subgraph + const node = createTestSubgraphNode(usedSubgraph) + rootGraph.add(node) + + // Serialize + const serialized = rootGraph.asSerialisable() + + // Check that only used subgraph is included + expect(serialized.definitions?.subgraphs).toBeDefined() + expect(serialized.definitions!.subgraphs!.length).toBe(1) + expect(serialized.definitions!.subgraphs![0].id).toBe(usedSubgraph.id) + expect(serialized.definitions!.subgraphs![0].name).toBe("Used Subgraph") + }) + + it("should include nested subgraphs", () => { + const rootGraph = new LGraph() + + // Create nested subgraphs + const level1Subgraph = createTestSubgraph({ name: "Level 1" }) + const level2Subgraph = createTestSubgraph({ name: "Level 2" }) + + // Add to registry + rootGraph._subgraphs.set(level1Subgraph.id, level1Subgraph) + rootGraph._subgraphs.set(level2Subgraph.id, level2Subgraph) + + // Add level1 to root + const level1Node = createTestSubgraphNode(level1Subgraph) + rootGraph.add(level1Node) + + // Add level2 to level1 + const level2Node = createTestSubgraphNode(level2Subgraph) + level1Subgraph.add(level2Node) + + // Serialize + const serialized = rootGraph.asSerialisable() + + // Both subgraphs should be included + expect(serialized.definitions?.subgraphs).toBeDefined() + expect(serialized.definitions!.subgraphs!.length).toBe(2) + + const ids = serialized.definitions!.subgraphs!.map(s => s.id) + expect(ids).toContain(level1Subgraph.id) + expect(ids).toContain(level2Subgraph.id) + }) + + it("should handle circular subgraph references", () => { + const rootGraph = new LGraph() + + // Create two subgraphs that reference each other + const subgraph1 = createTestSubgraph({ name: "Subgraph 1" }) + const subgraph2 = createTestSubgraph({ name: "Subgraph 2" }) + + // Add to registry + rootGraph._subgraphs.set(subgraph1.id, subgraph1) + rootGraph._subgraphs.set(subgraph2.id, subgraph2) + + // Add subgraph1 to root + const node1 = createTestSubgraphNode(subgraph1) + rootGraph.add(node1) + + // Add subgraph2 to subgraph1 + const node2 = createTestSubgraphNode(subgraph2) + subgraph1.add(node2) + + // Add subgraph1 to subgraph2 (circular) + const node3 = createTestSubgraphNode(subgraph1, { id: 3 }) + subgraph2.add(node3) + + // Serialize - should not hang + const serialized = rootGraph.asSerialisable() + + // Both should be included + expect(serialized.definitions?.subgraphs).toBeDefined() + expect(serialized.definitions!.subgraphs!.length).toBe(2) + }) + + it("should handle empty subgraph registry", () => { + const rootGraph = new LGraph() + + // Serialize with no subgraphs + const serialized = rootGraph.asSerialisable() + + // Should not include definitions + expect(serialized.definitions).toBeUndefined() + }) + + it("should only serialize from root graph", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph({ name: "Parent Subgraph" }) + + // Add subgraph to root registry + rootGraph._subgraphs.set(subgraph.id, subgraph) + + // Try to serialize from subgraph (not root) + const serialized = subgraph.asSerialisable() + + // Should not include definitions since it's not the root + expect(serialized.definitions).toBeUndefined() + }) + + it("should handle multiple instances of same subgraph", () => { + const rootGraph = new LGraph() + const subgraph = createTestSubgraph({ name: "Reused Subgraph" }) + + // Add to registry + rootGraph._subgraphs.set(subgraph.id, subgraph) + + // Add multiple instances + const node1 = createTestSubgraphNode(subgraph, { id: 1 }) + const node2 = createTestSubgraphNode(subgraph, { id: 2 }) + const node3 = createTestSubgraphNode(subgraph, { id: 3 }) + + rootGraph.add(node1) + rootGraph.add(node2) + rootGraph.add(node3) + + // Serialize + const serialized = rootGraph.asSerialisable() + + // Should only include one definition + expect(serialized.definitions?.subgraphs).toBeDefined() + expect(serialized.definitions!.subgraphs!.length).toBe(1) + expect(serialized.definitions!.subgraphs![0].id).toBe(subgraph.id) + }) + }) +}) diff --git a/src/lib/litegraph/test/subgraph/subgraphUtils.test.ts b/src/lib/litegraph/test/subgraph/subgraphUtils.test.ts new file mode 100644 index 0000000000..e8175faecf --- /dev/null +++ b/src/lib/litegraph/test/subgraph/subgraphUtils.test.ts @@ -0,0 +1,147 @@ +import type { UUID } from "@/utils/uuid" + +import { describe, expect, it } from "vitest" + +import { LGraph } from "@/litegraph" +import { + findUsedSubgraphIds, + getDirectSubgraphIds, +} from "@/subgraph/subgraphUtils" + +import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +describe("subgraphUtils", () => { + describe("getDirectSubgraphIds", () => { + it("should return empty set for graph with no subgraph nodes", () => { + const graph = new LGraph() + const result = getDirectSubgraphIds(graph) + expect(result.size).toBe(0) + }) + + it("should find single subgraph node", () => { + const graph = new LGraph() + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + graph.add(subgraphNode) + + const result = getDirectSubgraphIds(graph) + expect(result.size).toBe(1) + expect(result.has(subgraph.id)).toBe(true) + }) + + it("should find multiple unique subgraph nodes", () => { + const graph = new LGraph() + const subgraph1 = createTestSubgraph({ name: "Subgraph 1" }) + const subgraph2 = createTestSubgraph({ name: "Subgraph 2" }) + + const node1 = createTestSubgraphNode(subgraph1) + const node2 = createTestSubgraphNode(subgraph2) + + graph.add(node1) + graph.add(node2) + + const result = getDirectSubgraphIds(graph) + expect(result.size).toBe(2) + expect(result.has(subgraph1.id)).toBe(true) + expect(result.has(subgraph2.id)).toBe(true) + }) + + it("should return unique IDs when same subgraph is used multiple times", () => { + const graph = new LGraph() + const subgraph = createTestSubgraph() + + const node1 = createTestSubgraphNode(subgraph, { id: 1 }) + const node2 = createTestSubgraphNode(subgraph, { id: 2 }) + + graph.add(node1) + graph.add(node2) + + const result = getDirectSubgraphIds(graph) + expect(result.size).toBe(1) + expect(result.has(subgraph.id)).toBe(true) + }) + }) + + describe("findUsedSubgraphIds", () => { + it("should handle graph with no subgraphs", () => { + const graph = new LGraph() + const registry = new Map() + + const result = findUsedSubgraphIds(graph, registry) + expect(result.size).toBe(0) + }) + + it("should find nested subgraphs", () => { + const rootGraph = new LGraph() + const subgraph1 = createTestSubgraph({ name: "Level 1" }) + const subgraph2 = createTestSubgraph({ name: "Level 2" }) + + // Add subgraph1 node to root + const node1 = createTestSubgraphNode(subgraph1) + rootGraph.add(node1) + + // Add subgraph2 node inside subgraph1 + const node2 = createTestSubgraphNode(subgraph2) + subgraph1.add(node2) + + const registry = new Map([ + [subgraph1.id, subgraph1], + [subgraph2.id, subgraph2], + ]) + + const result = findUsedSubgraphIds(rootGraph, registry) + expect(result.size).toBe(2) + expect(result.has(subgraph1.id)).toBe(true) + expect(result.has(subgraph2.id)).toBe(true) + }) + + it("should handle circular references without infinite loop", () => { + const rootGraph = new LGraph() + const subgraph1 = createTestSubgraph({ name: "Subgraph 1" }) + const subgraph2 = createTestSubgraph({ name: "Subgraph 2" }) + + // Add subgraph1 to root + const node1 = createTestSubgraphNode(subgraph1) + rootGraph.add(node1) + + // Add subgraph2 to subgraph1 + const node2 = createTestSubgraphNode(subgraph2) + subgraph1.add(node2) + + // Add subgraph1 to subgraph2 (circular reference) + const node3 = createTestSubgraphNode(subgraph1, { id: 3 }) + subgraph2.add(node3) + + const registry = new Map([ + [subgraph1.id, subgraph1], + [subgraph2.id, subgraph2], + ]) + + const result = findUsedSubgraphIds(rootGraph, registry) + expect(result.size).toBe(2) + expect(result.has(subgraph1.id)).toBe(true) + expect(result.has(subgraph2.id)).toBe(true) + }) + + it("should handle missing subgraphs in registry gracefully", () => { + const rootGraph = new LGraph() + const subgraph1 = createTestSubgraph({ name: "Subgraph 1" }) + const subgraph2 = createTestSubgraph({ name: "Subgraph 2" }) + + // Add both subgraph nodes + const node1 = createTestSubgraphNode(subgraph1) + const node2 = createTestSubgraphNode(subgraph2) + + rootGraph.add(node1) + rootGraph.add(node2) + + // Only register subgraph1 + const registry = new Map([[subgraph1.id, subgraph1]]) + + const result = findUsedSubgraphIds(rootGraph, registry) + expect(result.size).toBe(2) + expect(result.has(subgraph1.id)).toBe(true) + expect(result.has(subgraph2.id)).toBe(true) // Still found, just can't recurse into it + }) + }) +}) diff --git a/src/lib/litegraph/test/testExtensions.ts b/src/lib/litegraph/test/testExtensions.ts new file mode 100644 index 0000000000..49e238d60d --- /dev/null +++ b/src/lib/litegraph/test/testExtensions.ts @@ -0,0 +1,66 @@ +import type { ISerialisedGraph, SerialisableGraph } from "../src/types/serialisation" + +import { test as baseTest } from "vitest" + +import { LGraph } from "@/LGraph" +import { LiteGraph } from "@/litegraph" + +import floatingBranch from "./assets/floatingBranch.json" +import floatingLink from "./assets/floatingLink.json" +import linkedNodes from "./assets/linkedNodes.json" +import reroutesComplex from "./assets/reroutesComplex.json" +import { basicSerialisableGraph, minimalSerialisableGraph, oldSchemaGraph } from "./assets/testGraphs" + +interface LitegraphFixtures { + minimalGraph: LGraph + minimalSerialisableGraph: SerialisableGraph + oldSchemaGraph: ISerialisedGraph + floatingLinkGraph: ISerialisedGraph + linkedNodesGraph: ISerialisedGraph + floatingBranchGraph: LGraph + reroutesComplexGraph: LGraph +} + +/** These fixtures alter global state, and are difficult to reset. Relies on a single test per-file to reset state. */ +interface DirtyFixtures { + basicSerialisableGraph: SerialisableGraph +} + +export const test = baseTest.extend({ + minimalGraph: async ({ }, use) => { + // Before each test function + const serialisable = structuredClone(minimalSerialisableGraph) + const lGraph = new LGraph(serialisable) + + // use the fixture value + await use(lGraph) + }, + minimalSerialisableGraph: structuredClone(minimalSerialisableGraph), + oldSchemaGraph: structuredClone(oldSchemaGraph), + floatingLinkGraph: structuredClone(floatingLink as unknown as ISerialisedGraph), + linkedNodesGraph: structuredClone(linkedNodes as unknown as ISerialisedGraph), + floatingBranchGraph: async ({}, use) => { + const cloned = structuredClone(floatingBranch as unknown as ISerialisedGraph) + const graph = new LGraph(cloned) + await use(graph) + }, + reroutesComplexGraph: async ({}, use) => { + const cloned = structuredClone(reroutesComplex as unknown as ISerialisedGraph) + const graph = new LGraph(cloned) + await use(graph) + }, +}) + +/** Test that use {@link DirtyFixtures}. One test per file. */ +export const dirtyTest = test.extend({ + basicSerialisableGraph: async ({}, use) => { + if (!basicSerialisableGraph.nodes) throw new Error("Invalid test object") + + // Register node types + for (const node of basicSerialisableGraph.nodes) { + LiteGraph.registerNodeType(node.type!, LiteGraph.LGraphNode) + } + + await use(structuredClone(basicSerialisableGraph)) + }, +}) diff --git a/src/lib/litegraph/test/tsconfig.json b/src/lib/litegraph/test/tsconfig.json new file mode 100644 index 0000000000..4c8bef17ad --- /dev/null +++ b/src/lib/litegraph/test/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + /* Test files should not be compiled */ + "noEmit": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "resolveJsonModule": true + }, + "include": ["**/*"] +} diff --git a/src/lib/litegraph/test/utils/spaceDistribution.test.ts b/src/lib/litegraph/test/utils/spaceDistribution.test.ts new file mode 100644 index 0000000000..312b63fbf6 --- /dev/null +++ b/src/lib/litegraph/test/utils/spaceDistribution.test.ts @@ -0,0 +1,41 @@ +import { describe, expect, it } from "vitest" + +import { distributeSpace, type SpaceRequest } from "@/utils/spaceDistribution" + +describe("distributeSpace", () => { + it("should distribute space according to minimum sizes when space is limited", () => { + const requests: SpaceRequest[] = [ + { minSize: 100 }, + { minSize: 100 }, + { minSize: 100 }, + ] + expect(distributeSpace(300, requests)).toEqual([100, 100, 100]) + }) + + it("should distribute extra space equally when no maxSize", () => { + const requests: SpaceRequest[] = [{ minSize: 100 }, { minSize: 100 }] + expect(distributeSpace(400, requests)).toEqual([200, 200]) + }) + + it("should respect maximum sizes", () => { + const requests: SpaceRequest[] = [ + { minSize: 100, maxSize: 150 }, + { minSize: 100 }, + ] + expect(distributeSpace(400, requests)).toEqual([150, 250]) + }) + + it("should handle empty requests array", () => { + expect(distributeSpace(1000, [])).toEqual([]) + }) + + it("should handle negative total space", () => { + const requests: SpaceRequest[] = [{ minSize: 100 }, { minSize: 100 }] + expect(distributeSpace(-100, requests)).toEqual([100, 100]) + }) + + it("should handle total space smaller than minimum sizes", () => { + const requests: SpaceRequest[] = [{ minSize: 100 }, { minSize: 100 }] + expect(distributeSpace(100, requests)).toEqual([100, 100]) + }) +}) diff --git a/src/lib/litegraph/test/utils/textUtils.test.ts b/src/lib/litegraph/test/utils/textUtils.test.ts new file mode 100644 index 0000000000..da3db053dd --- /dev/null +++ b/src/lib/litegraph/test/utils/textUtils.test.ts @@ -0,0 +1,82 @@ +import { describe, expect, it, vi } from "vitest" + +import { truncateText } from "@/utils/textUtils" + +describe("truncateText", () => { + const createMockContext = (charWidth: number = 10) => { + return { + measureText: vi.fn((text: string) => ({ width: text.length * charWidth })), + } as unknown as CanvasRenderingContext2D + } + + it("should return original text if it fits within maxWidth", () => { + const ctx = createMockContext() + const result = truncateText(ctx, "Short", 100) + expect(result).toBe("Short") + }) + + it("should return original text if maxWidth is 0 or negative", () => { + const ctx = createMockContext() + expect(truncateText(ctx, "Text", 0)).toBe("Text") + expect(truncateText(ctx, "Text", -10)).toBe("Text") + }) + + it("should truncate text and add ellipsis when text is too long", () => { + const ctx = createMockContext(10) // 10 pixels per character + const result = truncateText(ctx, "This is a very long text", 100) + // 100px total, "..." takes 30px, leaving 70px for text (7 chars) + expect(result).toBe("This is...") + }) + + it("should use custom ellipsis when provided", () => { + const ctx = createMockContext(10) + const result = truncateText(ctx, "This is a very long text", 100, "…") + // 100px total, "…" takes 10px, leaving 90px for text (9 chars) + expect(result).toBe("This is a…") + }) + + it("should return only ellipsis if available width is too small", () => { + const ctx = createMockContext(10) + const result = truncateText(ctx, "Text", 20) // Only room for 2 chars, but "..." needs 3 + expect(result).toBe("...") + }) + + it("should handle empty text", () => { + const ctx = createMockContext() + const result = truncateText(ctx, "", 100) + expect(result).toBe("") + }) + + it("should use binary search efficiently", () => { + const ctx = createMockContext(10) + const longText = "A".repeat(100) // 100 characters + + const result = truncateText(ctx, longText, 200) // Room for 20 chars total + expect(result).toBe(`${"A".repeat(17)}...`) // 17 chars + "..." = 20 chars = 200px + + // Verify binary search efficiency - should not measure every possible substring + // Binary search for 100 chars should take around log2(100) ≈ 7 iterations + // Plus a few extra calls for measuring the full text and ellipsis + const callCount = (ctx.measureText as any).mock.calls.length + expect(callCount).toBeLessThan(20) + expect(callCount).toBeGreaterThan(5) + }) + + it("should handle unicode characters correctly", () => { + const ctx = createMockContext(10) + const result = truncateText(ctx, "Hello 👋 World", 80) + // Assuming each char (including emoji) is 10px, total is 130px + // 80px total, "..." takes 30px, leaving 50px for text (5 chars) + expect(result).toBe("Hello...") + }) + + it("should handle exact boundary cases", () => { + const ctx = createMockContext(10) + + // Text exactly fits + expect(truncateText(ctx, "Exact", 50)).toBe("Exact") // 5 chars = 50px + + // Text is exactly 1 pixel too long + expect(truncateText(ctx, "Exact!", 50)).toBe("Ex...") // 6 chars = 60px, truncated + }) +}) diff --git a/src/lib/litegraph/test/utils/widget.test.ts b/src/lib/litegraph/test/utils/widget.test.ts new file mode 100644 index 0000000000..9851980e7e --- /dev/null +++ b/src/lib/litegraph/test/utils/widget.test.ts @@ -0,0 +1,45 @@ +import type { IWidgetOptions } from "@/types/widgets" + +import { describe, expect, test } from "vitest" + +import { getWidgetStep } from "@/utils/widget" + +describe("getWidgetStep", () => { + test("should return step2 when available", () => { + const options: IWidgetOptions = { + step2: 0.5, + step: 20, + } + + expect(getWidgetStep(options)).toBe(0.5) + }) + + test("should calculate from step when step2 is not available", () => { + const options: IWidgetOptions = { + step: 20, + } + + expect(getWidgetStep(options)).toBe(2) // 20 * 0.1 = 2 + }) + + test("should use default step value of 10 when neither step2 nor step is provided", () => { + const options: IWidgetOptions = {} + + expect(getWidgetStep(options)).toBe(1) // 10 * 0.1 = 1 + }) + // Zero value is not allowed for step, fallback to 1. + test("should handle zero values correctly", () => { + const optionsWithZeroStep2: IWidgetOptions = { + step2: 0, + step: 20, + } + + expect(getWidgetStep(optionsWithZeroStep2)).toBe(2) + + const optionsWithZeroStep: IWidgetOptions = { + step: 0, + } + + expect(getWidgetStep(optionsWithZeroStep)).toBe(1) + }) +}) diff --git a/src/lib/litegraph/tsconfig.json b/src/lib/litegraph/tsconfig.json new file mode 100644 index 0000000000..ef4ccc887a --- /dev/null +++ b/src/lib/litegraph/tsconfig.json @@ -0,0 +1,37 @@ +{ + "compilerOptions": { + "noEmit": true, + + "target": "ES2022", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2023", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + "sourceMap": true, + "esModuleInterop": true, + "moduleResolution": "Node", + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": false, + "noUnusedParameters": false, + "noFallthroughCasesInSwitch": true, + "downlevelIteration": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "verbatimModuleSyntax": true, + + /* AllowJs during migration phase */ + "allowJs": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, + "typeRoots": [], + "outDir": "./dist", + "rootDir": "./" + }, + "include": ["src/**/*"] +} diff --git a/src/lib/litegraph/vite.config.mts b/src/lib/litegraph/vite.config.mts new file mode 100644 index 0000000000..00236f0768 --- /dev/null +++ b/src/lib/litegraph/vite.config.mts @@ -0,0 +1,40 @@ +/// +import path from "node:path" + +import { defineConfig } from "vite" +import dts from "vite-plugin-dts" + +export default defineConfig({ + build: { + lib: { + entry: path.resolve(import.meta.dirname, "src/litegraph"), + name: "litegraph.js", + fileName: format => `litegraph.${format}.js`, + formats: ["es", "umd"], + }, + sourcemap: true, + target: ["es2022"], + }, + esbuild: { + minifyIdentifiers: false, + minifySyntax: false, + }, + plugins: [ + dts({ + entryRoot: "src", + insertTypesEntry: true, + include: ["src/**/*.ts"], + outDir: "dist", + aliasesExclude: ["@"], + }), + ], + resolve: { + alias: { "@": "/src" }, + }, + test: { + alias: { "@/": path.resolve(import.meta.dirname, "./src/") }, + environment: "jsdom", + restoreMocks: true, + unstubGlobals: true, + }, +})