@codebolt/litegraph 0.0.1 → 0.0.3

package/LICENSE

@@ -1,19 +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.
+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.

package/README.md

@@ -1,161 +1,161 @@
-
-# @codebolt/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 (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
-- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
-- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
-- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
-- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
-- And now with hundreds more...
-
-# Install
-
-`npm i @codebolt/litegraph`
-
-# litegraph.js
-
-A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
-
-<details>
-
-<summary>Description of the original litegraph.js</summary>
-
-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.
-
-</details>
-
-![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
-
-<details>
-
-<summary>Click to expand</summary>
-
-### [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")
-
-</details>
-
-## Feedback
-
-Please [open an issue](https://github.com/codebolt/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.
-
-
+
+# @codebolt/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 (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
+- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
+- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
+- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
+- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
+- And now with hundreds more...
+
+# Install
+
+`npm i @codebolt/litegraph`
+
+# litegraph.js
+
+A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
+
+<details>
+
+<summary>Description of the original litegraph.js</summary>
+
+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.
+
+</details>
+
+![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
+
+<details>
+
+<summary>Click to expand</summary>
+
+### [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")
+
+</details>
+
+## Feedback
+
+Please [open an issue](https://github.com/codebolt/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.
+
+

package/dist/css/litegraph.css

@@ -180,8 +180,12 @@
 .litegraph.litesearchbox {
   font-family: Tahoma, sans-serif;
   position: absolute;
-  background-color: rgba(0, 0, 0, 0.5);
-  padding-top: 4px;
+  background-color: #2e2e2e;
+  padding: 8px;
+  box-shadow: 0 0 10px black !important;
+  border-radius: 6px;
+  min-width: 300px;
+  z-index: 10;
 }
 
 .litegraph.litesearchbox input,
@@ -189,12 +193,20 @@
   margin-top: 3px;
   min-width: 60px;
   min-height: 1.5em;
-  background-color: black;
-  border: 0;
-  color: white;
-  padding-left: 10px;
+  background-color: #1a1a1a;
+  border: 1px solid #444;
+  color: #aaa;
+  padding: 4px 10px;
   margin-right: 5px;
   max-width: 300px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.litegraph.litesearchbox input:focus,
+.litegraph.litesearchbox select:focus {
+  border-color: #666;
+  color: #fff;
 }
 
 .litegraph.litesearchbox .name {
@@ -202,52 +214,86 @@
   min-width: 60px;
   min-height: 1.5em;
   padding-left: 10px;
+  color: #dde;
+  font-weight: bold;
 }
 
 .litegraph.litesearchbox .helper {
   overflow: auto;
   max-height: 200px;
-  margin-top: 2px;
+  margin-top: 8px;
+  border-radius: 4px;
+}
+
+/* Custom scrollbar for searchbox helper */
+.litegraph.litesearchbox .helper::-webkit-scrollbar {
+  width: 8px;
+}
+
+.litegraph.litesearchbox .helper::-webkit-scrollbar-track {
+  background: #1a1a1a;
+  border-radius: 4px;
+}
+
+.litegraph.litesearchbox .helper::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
+.litegraph.litesearchbox .helper::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
+
+/* Firefox scrollbar styling */
+.litegraph.litesearchbox .helper {
+  scrollbar-width: thin;
+  scrollbar-color: #555 #1a1a1a;
 }
 
 .litegraph.lite-search-item {
   font-family: Tahoma, sans-serif;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding-top: 2px;
+  background-color: transparent;
+  color: #aaa;
+  padding: 4px 8px;
+  margin: 2px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 12px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .litegraph.lite-search-item.not_in_filter {
-  /*background-color: rgba(50, 50, 50, 0.5);*/
-  /*color: #999;*/
-  color: #b99;
+  color: #999;
   font-style: italic;
+  opacity: 0.7;
 }
 
 .litegraph.lite-search-item.generic_type {
-  /*background-color: rgba(50, 50, 50, 0.5);*/
-  /*color: #DD9;*/
   color: #999;
   font-style: italic;
+  opacity: 0.7;
 }
 
 .litegraph.lite-search-item:hover,
 .litegraph.lite-search-item.selected {
-  cursor: pointer;
-  background-color: white;
-  color: black;
+  background-color: #444 !important;
+  color: #eee;
+  transition: all 0.2s;
 }
 
 .litegraph.lite-search-item-type {
   display: inline-block;
-  background: rgba(0, 0, 0, 0.2);
+  background: #1a1a1a;
   margin-left: 5px;
-  font-size: 14px;
+  font-size: 10px;
   padding: 2px 5px;
   position: relative;
-  top: -2px;
+  top: -1px;
   opacity: 0.8;
-  border-radius: 4px;
+  border-radius: 3px;
+  border: 1px solid #444;
 }
 
 /* DIALOGs ******/

package/dist/litegraph.es.js

@@ -11398,7 +11398,7 @@ class LGraphCanvas {
     if (this.bgcanvas == this.canvas) {
       this.drawBackCanvas();
     } else {
-      const scale = window.devicePixelRatio;
+      const scale = 1;
       ctx.drawImage(
         this.bgcanvas,
         0,
@@ -11478,7 +11478,7 @@ class LGraphCanvas {
         ctx.strokeStyle = "#FFF";
         if (eDown && eMove) {
           const transform = ctx.getTransform();
-          const ratio = Math.max(1, window.devicePixelRatio);
+          const ratio = 1;
           ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
           const x2 = eDown.safeOffsetX;
           const y = eDown.safeOffsetY;
@@ -11637,7 +11637,7 @@ class LGraphCanvas {
     }
     const bg_already_painted = this.onRenderBackground ? this.onRenderBackground(canvas2, ctx) : false;
     if (!this.viewport) {
-      const scale = window.devicePixelRatio;
+      const scale = 1;
       ctx.restore();
       ctx.setTransform(scale, 0, 0, scale, 0, 0);
     }