Move canvas state to plain object (#233)

* Move canvas state to plain object

POCO that can be proxied without side-effects.
LGraphCanvasState interface added to package exports

* Add item dragging to canvas state

src/LGraphCanvas.ts

@@ -87,12 +87,20 @@ interface IDrawSelectionBoundingOptions {
     collapsed?: boolean
 }
 
+/** @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
+}
+
 /**
  * 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
  *
- * @class LGraphCanvas
- * @constructor
  * @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas element itself)
  * @param {LGraph} graph [optional]
  * @param {Object} options [optional] { skip_rendering, autoresize, viewport }
@@ -131,37 +139,42 @@ export class LGraphCanvas {
         black: { color: "#222", bgcolor: "#000", groupcolor: "#444" }
     }
 
-    private _dragging_canvas: boolean = false
+    /**
+     * 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,
+    }
+
+    /** @inheritdoc {@link LGraphCanvasState.draggingCanvas} */
     get dragging_canvas(): boolean {
-        return this._dragging_canvas
+        return this.state.draggingCanvas
     }
     set dragging_canvas(value: boolean) {
-        if (value !== this._dragging_canvas) {
+        this.state.draggingCanvas = value
-            this._dragging_canvas = value
-            this.emitEvent({
-                subType: "dragging-canvas",
-                draggingCanvas: value
-            })
-        }
     }
 
     // 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
 
-    // if set to true users cannot modify the graph
+    /** @inheritdoc {@link LGraphCanvasState.readOnly} */
-    private _read_only: boolean = false
     get read_only(): boolean {
-        return this._read_only
+        return this.state.readOnly
     }
     set read_only(value: boolean) {
-        if (value !== this._read_only) {
+        this.state.readOnly = value
-            this._read_only = value
+    }
-            this.emitEvent({
+
-                subType: "read-only",
+    get isDragging(): boolean {
-                readOnly: value
+        return this.state.draggingItems
-            })
+    }
-        }
+    set isDragging(value: boolean) {
+        this.state.draggingItems = value
     }
     options: { skip_events?: any; viewport?: any; skip_render?: any; autoresize?: any }
     background_image: string
@@ -238,7 +251,6 @@ export class LGraphCanvas {
     selected_nodes: Dictionary<LGraphNode>
     /** @deprecated Temporary implementation only - will be replaced with `selectedItems: Set<Positionable>`. */
     selectedGroups: Set<LGraphGroup>
-    isDragging?: boolean
     selected_group: LGraphGroup
     visible_nodes: LGraphNode[]
     node_dragged?: LGraphNode

src/litegraph.ts

@@ -8,7 +8,7 @@ import { LiteGraphGlobal } from "./LiteGraphGlobal"
 import { loadPolyfills } from "./polyfills"
 
 import { LGraph } from "./LGraph"
-import { LGraphCanvas } from "./LGraphCanvas"
+import { LGraphCanvas, type LGraphCanvasState } from "./LGraphCanvas"
 import { DragAndScale } from "./DragAndScale"
 import { LGraphNode } from "./LGraphNode"
 import { LGraphGroup } from "./LGraphGroup"
@@ -18,7 +18,7 @@ import { CurveEditor } from "./CurveEditor"
 import { LGraphBadge, BadgePosition } from "./LGraphBadge"
 
 export const LiteGraph = new LiteGraphGlobal()
-export { LGraph, LGraphCanvas, DragAndScale, LGraphNode, LGraphGroup, LLink, ContextMenu, CurveEditor }
+export { LGraph, LGraphCanvas, LGraphCanvasState, DragAndScale, LGraphNode, LGraphGroup, LLink, ContextMenu, CurveEditor }
 export { INodeSlot, INodeInputSlot, INodeOutputSlot, ConnectingLink, CanvasColour, Direction, IBoundaryNodes, IContextMenuOptions, IContextMenuValue, IFoundSlot, IInputOrOutput, INodeFlags, IOptionalSlotData, ISlotType, KeysOfType, MethodNames, PickByType, Rect, Rect32, Size }
 export { IWidget }
 export { LGraphBadge, BadgePosition }