### Widget text overhaul
#### Current
- Numbers and text overlap
- Combo boxes truncate the value before the label
#### Proposed
**By default, widgets will now truncate their labels before their
values.**
https://github.com/user-attachments/assets/296ea5ab-d2ff-44f2-9139-5d97789e4f12
- Changes the way widget text is rendered, calculated, and truncated
- Truncation now applies in a standard way to the following widgets:
- Text
- Combo
- Number
- Centralises widget draw routines in base class
### Config
```ts
// Truncate **both** widgets and labels evenly
LiteGraph.truncateWidgetTextEvenly = true
// Swap the default from truncating labels before values, to truncating values first (restores legacy behaviour)
// truncateWidgetTextEvenly **must** be `false`.
LiteGraph.truncateWidgetValuesFirst = true
```
### API / interfaces
- Adds rich `Rectangle` concrete impl., with many methods and helpful
accessors (e.g. `right`, `bottom`)
- Actually _improves_ performance due to switch from Float32Array to
Float64Array
- Impact vs plain Float64Array was not detectable outside of a 2M+
instantiation-loop with random data
- Lazy `pos` & `size` `subarray` properties
- Adds `ReadOnlySize`
- Adds higher-level text draw functions to abstract the nitty gritty in
a performant way (binary search)
- Resolves Comfy-Org/ComfyUI_frontend/issues/457
Adds trackpad gesture support to canvas interaction. Supports:
- Pinch to zoom
- Two-finger panning
Feature is off by default. Also by default, the browser user-agent must
include "Mac" (even if the feature has been enabled).
```ts
// Enable mac trackpad gestures
LiteGraph.macTrackpadGestures = true
// Disable the default Mac user-agent check
LiteGraph.macGesturesRequireMac = false
```
Adds a global API to notify devs / users of deprecated features.
- Custom callbacks may be added
- By default, remembers message text and only sends each message once
- Sends to console.warn by default
```ts
// Add a custom notification when a warning is encountered
const warnMessage = (message: string, source?: object) => {
addToast({ message, detail: object })
}
LiteGraph.onDeprecationWarning.push(warnMessage)
```
```ts
// Debugging flag. Repeats deprecation warnings every time they are reported.
// May impact performance.
LiteGraph.alwaysRepeatWarnings = true
```
Generate a warning
```ts
import { warnDeprecated } from "@/utils/feedback"
warnDeprecated(
"[DEPRECATED] graph.oldFeature() will be removed from Litegraph. " +
"Please use graph.newFeature() instead. https://helpful.site/faq",
objectThatCausedThis
)
```
`reset()` is no longer automatically called after `dropLinks`. This
brings the API in line with original intent, and how canvas is already
configured; reset is called by `pointer.finally()`.
Follow up on https://github.com/Comfy-Org/litegraph.js/pull/915
Filter out non-serializable widgets during node configuration. Current
usage in frontend should not be affected as preview media widgets are
mostly dynamically added at the end of widget list.
This should allow frontend drop the stroke logic in hijack of
`drawNodeShape`. Example usage:
```ts
node.strokeStyles["executionError"] = (this: LGraphNode) =>
app.lastNodeErrors?.[this.id] ? { colour: 'red', thickness: 2 } : undefined
```
- Resolves https://github.com/Comfy-Org/ComfyUI_frontend/issues/3247
Bypasses the logic that automatically removed reroutes that had no
remaining links. Reroutes are now always converted to floating whenever
reroutes are reconnected.
Example usage with ComfyUI_frontend, via console / devtools:
```ts
const inputIndicators = new InputIndicators(app.canvas)
// Dispose:
inputIndicators.dispose()
```
- Fixes floating inputs have invisible segment after moving
- Fixes floating input can be moved onto existing input link, resulting
in the slot having two links
Prevents nodes connecting links to themselves when moving existing
links.
If moving multiple links with reroutes, this will instead _reconnect_
any links that would become loopbacks, only without any rereoutes.
- Follow-up on #817
### Unit tests
Adds tests for:
- LinkConnector
- LGraph
### Integration tests for LinkConnector
- Uses and configures a real graph + LGraph
- Avoids mocks
- User input is still mocked
- Performs actual tasks as would be called by LGraphCanvas
- A little verbose in places, but _many_ edge cases are caught by these
tests
