updated graph rendering to be more efficient. added smooth scrolling, added color type, mmb drag for cutting

scripts/nodes/library/colorLiteral.js

@@ -0,0 +1,26 @@
+import { createNodeModule } from "../nodeTypes.js";
+
+/**
+ * Constant color literal.
+ */
+export const colorLiteralNode = createNodeModule(
+  {
+    id: "color_literal",
+    title: "Color",
+    category: "Values",
+    description: "Constant color literal (0-15).",
+    searchTags: ["color", "literal", "constant", "value"],
+    inputs: [],
+    outputs: [
+      { id: "value", name: "Value", direction: "output", kind: "color" },
+    ],
+    properties: [
+      { key: "value", label: "Color", type: "number", defaultValue: 7 },
+    ],
+  },
+  {
+    evaluateValue: ({ node, formatLiteral }) => {
+      return formatLiteral("number", node.properties.value ?? 7);
+    },
+  }
+);

scripts/nodes/library/converters/colorToNumber.js

@@ -0,0 +1,26 @@
+import { createNodeModule } from "../../nodeTypes.js";
+
+/**
+ * Converts a color value to a numeric value.
+ */
+export const colorToNumberNode = createNodeModule(
+  {
+    id: "convert_color_to_number",
+    title: "Color to Number",
+    category: "Converters",
+    description: "Convert a color value to a numeric value.",
+    searchTags: ["color", "number", "convert", "cast"],
+    inputs: [
+      { id: "color", name: "Color", direction: "input", kind: "color" }
+    ],
+    outputs: [
+      { id: "number", name: "Number", direction: "output", kind: "number" }
+    ],
+    properties: [],
+  },
+  {
+    evaluateValue: ({ resolveValueInput }) => {
+      return resolveValueInput("color", "0");
+    },
+  }
+);

scripts/nodes/library/converters/index.js

@@ -0,0 +1,7 @@
+import { colorToNumberNode } from "./colorToNumber.js";
+import { numberToColorNode } from "./numberToColor.js";
+
+/**
+ * All type conversion nodes.
+ */
+export const converterNodes = [colorToNumberNode, numberToColorNode];

scripts/nodes/library/converters/numberToColor.js

@@ -0,0 +1,26 @@
+import { createNodeModule } from "../../nodeTypes.js";
+
+/**
+ * Converts a numeric value to a color value.
+ */
+export const numberToColorNode = createNodeModule(
+  {
+    id: "convert_number_to_color",
+    title: "Number to Color",
+    category: "Converters",
+    description: "Convert a numeric value to a color value.",
+    searchTags: ["number", "color", "convert", "cast"],
+    inputs: [
+      { id: "number", name: "Number", direction: "input", kind: "number" }
+    ],
+    outputs: [
+      { id: "color", name: "Color", direction: "output", kind: "color" }
+    ],
+    properties: [],
+  },
+  {
+    evaluateValue: ({ resolveValueInput }) => {
+      return resolveValueInput("number", "0");
+    },
+  }
+);

scripts/nodes/library/graphics/circ.js

@@ -33,7 +33,7 @@ export const circNode = createNodeModule(
         kind: "number",
         defaultValue: 4,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/circfill.js

@@ -33,7 +33,7 @@ export const circfillNode = createNodeModule(
         kind: "number",
         defaultValue: 4,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/cls.js

@@ -12,7 +12,7 @@ export const clsNode = createNodeModule(
     searchTags: ["cls", "clear", "screen", "background"],
     inputs: [
       { id: "exec_in", name: "Exec", direction: "input", kind: "exec" },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/color.js

@@ -12,7 +12,7 @@ export const colorNode = createNodeModule(
     searchTags: ["color", "color", "ink", "draw"],
     inputs: [
       { id: "exec_in", name: "Exec", direction: "input", kind: "exec" },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/cursor.js

@@ -15,7 +15,7 @@ export const cursorNode = createNodeModule(
       { id: "exec_in", name: "Exec", direction: "input", kind: "exec" },
       { id: "x", name: "X", direction: "input", kind: "number" },
       { id: "y", name: "Y", direction: "input", kind: "number" },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/line.js

@@ -29,7 +29,7 @@ export const lineNode = createNodeModule(
       },
       { id: "x1", name: "X1", direction: "input", kind: "number" },
       { id: "y1", name: "Y1", direction: "input", kind: "number" },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/oval.js

@@ -40,7 +40,7 @@ export const ovalNode = createNodeModule(
         kind: "number",
         defaultValue: 8,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/ovalfill.js

@@ -40,7 +40,7 @@ export const ovalfillNode = createNodeModule(
         kind: "number",
         defaultValue: 8,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/pal.js

@@ -12,12 +12,12 @@ export const palNode = createNodeModule(
     searchTags: ["pal", "palette", "color", "remap"],
     inputs: [
       { id: "exec_in", name: "Exec", direction: "input", kind: "exec" },
-      { id: "c0", name: "Color 0", direction: "input", kind: "number" },
+      { id: "c0", name: "Color 0", direction: "input", kind: "color" },
       {
         id: "c1",
         name: "Color 1",
         direction: "input",
-        kind: "number",
+        kind: "color",
         defaultValue: 0,
       },
       { id: "p", name: "Palette", direction: "input", kind: "number" },

scripts/nodes/library/graphics/palt.js

@@ -12,7 +12,7 @@ export const paltNode = createNodeModule(
     searchTags: ["palt", "transparency", "palette", "sprite"],
     inputs: [
       { id: "exec_in", name: "Exec", direction: "input", kind: "exec" },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
       {
         id: "transparent",
         name: "Transparent",

scripts/nodes/library/graphics/pget.js

@@ -27,7 +27,7 @@ export const pgetNode = createNodeModule(
       },
     ],
     outputs: [
-      { id: "value", name: "Color", direction: "output", kind: "number" },
+      { id: "value", name: "Color", direction: "output", kind: "color" },
     ],
     properties: [],
   },

scripts/nodes/library/graphics/pset.js

@@ -26,7 +26,7 @@ export const psetNode = createNodeModule(
         kind: "number",
         defaultValue: 0,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/rect.js

@@ -40,7 +40,7 @@ export const rectNode = createNodeModule(
         kind: "number",
         defaultValue: 8,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/rectfill.js

@@ -40,7 +40,7 @@ export const rectfillNode = createNodeModule(
         kind: "number",
         defaultValue: 8,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/rrect.js

@@ -47,7 +47,7 @@ export const rrectNode = createNodeModule(
         kind: "number",
         defaultValue: 2,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/rrectfill.js

@@ -47,7 +47,7 @@ export const rrectfillNode = createNodeModule(
         kind: "number",
         defaultValue: 2,
       },
-      { id: "color", name: "Color", direction: "input", kind: "number" },
+      { id: "color", name: "Color", direction: "input", kind: "color" },
     ],
     outputs: [
       { id: "exec_out", name: "Exec", direction: "output", kind: "exec" },

scripts/nodes/library/graphics/sget.js

@@ -28,7 +28,7 @@ export const sgetNode = createNodeModule(
       },
     ],
     outputs: [
-      { id: "value", name: "Color", direction: "output", kind: "number" },
+      { id: "value", name: "Color", direction: "output", kind: "color" },
     ],
     properties: [],
   },

scripts/nodes/library/graphics/sset.js

@@ -30,7 +30,7 @@ export const ssetNode = createNodeModule(
         id: "color",
         name: "Color",
         direction: "input",
-        kind: "number",
+        kind: "color",
         defaultValue: 0,
       },
     ],

scripts/nodes/library/index.js

@@ -7,6 +7,7 @@ import { getVariableNode } from "./getVariable.js";
 import { numberLiteralNode } from "./numberLiteral.js";
 import { stringLiteralNode } from "./stringLiteral.js";
 import { booleanLiteralNode } from "./booleanLiteral.js";
+import { colorLiteralNode } from "./colorLiteral.js";
 import { addNumberNode } from "./addNumber.js";
 import { multiplyNumberNode } from "./multiplyNumber.js";
 import { compareNode } from "./compare.js";
@@ -31,6 +32,7 @@ import { serialNodes, serialFunctionChecklist } from "./serial/index.js";
 import { devkitNodes, devkitFunctionChecklist } from "./devkit/index.js";
 import { luaNodes, luaFunctionChecklist } from "./lua/index.js";
 import { localVariableNodes } from "./localVariables.js";
+import { converterNodes } from "./converters/index.js";
 
 export const nodeModules = [
   eventInitNode,
@@ -42,6 +44,7 @@ export const nodeModules = [
   numberLiteralNode,
   stringLiteralNode,
   booleanLiteralNode,
+  colorLiteralNode,
   addNumberNode,
   multiplyNumberNode,
   compareNode,
@@ -51,6 +54,7 @@ export const nodeModules = [
   customEventNode,
   callCustomEventNode,
   ...localVariableNodes,
+  ...converterNodes,
   ...graphicsNodes,
   ...systemNodes,
   ...tableNodes,

scripts/nodes/library/print.js

@@ -37,7 +37,7 @@ export const printNode = createNodeModule(
         id: "color",
         name: "Color",
         direction: "input",
-        kind: "number",
+        kind: "color",
         defaultValue: 7,
       },
     ],

scripts/nodes/nodeTypes.js

@@ -13,7 +13,7 @@
  * @property {string} id Stable identifier unique within the node definition.
  * @property {string} name Display name.
  * @property {('input'|'output')} direction Pin direction relative to the node.
- * @property {('exec'|'number'|'boolean'|'string'|'table'|'any')} kind Blueprint connection kind.
+ * @property {('exec'|'number'|'boolean'|'string'|'table'|'any'|'color')} kind Blueprint connection kind.
  * @property {string} [description] Optional tooltip text.
  * @property {unknown} [defaultValue] Default literal for data pins.
  */