fix

apps/web/prisma/migrations/20240927084310_nodes/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - The values [TO_HSV,FROM_HSV,TO_HSL,FROM_HSL,TO_RGB,FROM_RGB] on the enum `NodeType` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "NodeType_new" AS ENUM ('ADDITION', 'SUBTRACTION', 'MULTIPLICATION', 'DIVISION', 'MODULO', 'POWER', 'SQUARE_ROOT', 'ABSOLUTE', 'SINE', 'COSINE', 'TANGENT', 'ARCSINE', 'ARCCOSINE', 'ARCTANGENT', 'LOGARITHM', 'LOGARITHM2', 'EXPONENTIAL', 'PI', 'EULER', 'MIN', 'MAX', 'CEIL', 'FLOOR', 'ROUND', 'RANDOM', 'SIGN', 'TRIAD_COLOR', 'TETRADIC_COLOR', 'ANALOGOUS_COLOR', 'COMPLEMENTARY_COLOR', 'SQUARE_COLOR', 'GRADIENT', 'IMAGE', 'WEBCAM', 'GAMEPAD', 'IMAGE_VARIATION_AI', 'PROMPT_AI', 'CIRCUIT', 'CIRCUIT_INPUTS', 'CIRCUIT_OUTPUTS', 'TIMER', 'CONSOLE', 'LERP', 'CUBIC_BEZIER', 'OSCILLATOR', 'IMAGE_EDIT_AI', 'SYNTHESIZED_IMAGE', 'VISION', 'FROM_VECTOR', 'SHADER', 'COLOR');
+ALTER TABLE "nodes" ALTER COLUMN "type" TYPE "NodeType_new" USING ("type"::text::"NodeType_new");
+ALTER TYPE "NodeType" RENAME TO "NodeType_old";
+ALTER TYPE "NodeType_new" RENAME TO "NodeType";
+DROP TYPE "NodeType_old";
+COMMIT;

apps/web/prisma/migrations/20240927094811_rename_color_node/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - The values [COLOR] on the enum `NodeType` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "NodeType_new" AS ENUM ('ADDITION', 'SUBTRACTION', 'MULTIPLICATION', 'DIVISION', 'MODULO', 'POWER', 'SQUARE_ROOT', 'ABSOLUTE', 'SINE', 'COSINE', 'TANGENT', 'ARCSINE', 'ARCCOSINE', 'ARCTANGENT', 'LOGARITHM', 'LOGARITHM2', 'EXPONENTIAL', 'PI', 'EULER', 'MIN', 'MAX', 'CEIL', 'FLOOR', 'ROUND', 'RANDOM', 'SIGN', 'TRIAD_COLOR', 'TETRADIC_COLOR', 'ANALOGOUS_COLOR', 'COMPLEMENTARY_COLOR', 'SQUARE_COLOR', 'GRADIENT', 'IMAGE', 'WEBCAM', 'GAMEPAD', 'IMAGE_VARIATION_AI', 'PROMPT_AI', 'CIRCUIT', 'CIRCUIT_INPUTS', 'CIRCUIT_OUTPUTS', 'TIMER', 'CONSOLE', 'LERP', 'CUBIC_BEZIER', 'OSCILLATOR', 'IMAGE_EDIT_AI', 'SYNTHESIZED_IMAGE', 'VISION', 'FROM_VECTOR', 'SHADER', 'FROM_COLOR');
+ALTER TABLE "nodes" ALTER COLUMN "type" TYPE "NodeType_new" USING ("type"::text::"NodeType_new");
+ALTER TYPE "NodeType" RENAME TO "NodeType_old";
+ALTER TYPE "NodeType_new" RENAME TO "NodeType";
+DROP TYPE "NodeType_old";
+COMMIT;

apps/web/prisma/migrations/20240927103105_to_color/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "NodeType" ADD VALUE 'TO_COLOR';

apps/web/prisma/schema.prisma

@@ -102,12 +102,6 @@ enum NodeType {
   ANALOGOUS_COLOR
   COMPLEMENTARY_COLOR
   SQUARE_COLOR
-  TO_HSV
-  FROM_HSV
-  TO_HSL
-  FROM_HSL
-  TO_RGB
-  FROM_RGB
   GRADIENT
   IMAGE
   WEBCAM
@@ -127,4 +121,6 @@ enum NodeType {
   VISION
   FROM_VECTOR
   SHADER
+  FROM_COLOR
+  TO_COLOR
 }

apps/web/src/app/(landing)/CircuitExample.tsx

@@ -3,7 +3,12 @@
 import { useMemo } from 'react';
 import { Circuit } from '@bitspace/circuit';
 import { Timer, Oscillator } from '@bitspace/nodes/utilities';
-import { ToHSV, FromHSV, SquareHarmony } from '@bitspace/nodes/color';
+import {
+    AnalogousHarmony,
+    Gradient,
+    SquareHarmony,
+    ToColor
+} from '@bitspace/nodes/color';
 import { Multiplication } from '@bitspace/nodes/math';
 import {
     StoreContext,
@@ -17,39 +22,33 @@ export const CircuitExample = () => {
         const circuit = new Circuit();
 
         const timer = new Timer();
-        const multiplication = new Multiplication();
-        multiplication.inputs.b.next(0.1);
-        const multiplication2 = new Multiplication();
-        multiplication2.inputs.b.next(0.2);
         const osc = new Oscillator();
-        osc.inputs.amplitude.next(1);
-        const toHSV = new ToHSV();
+        osc.inputs.amplitude.next(180);
+        osc.inputs.frequency.next(0.4);
+        timer.outputs.seconds.connect(osc.inputs.time);
+        const toColor = new ToColor();
+        osc.outputs.output.connect(toColor.inputs.hue);
         const sHarmonyNode = new SquareHarmony();
-        const hsvNode = new FromHSV();
+        toColor.outputs.color.connect(sHarmonyNode.inputs.color);
+        const analogousNode = new AnalogousHarmony();
+        sHarmonyNode.outputs.c.connect(analogousNode.inputs.color);
+        const gradientNode = new Gradient();
+        analogousNode.outputs.a.connect(gradientNode.inputs.a);
+        analogousNode.outputs.c.connect(gradientNode.inputs.b);
 
-        timer.setPosition(-2000, 100);
-        multiplication.setPosition(-1000, 100);
-        multiplication2.setPosition(-1400, -50);
-        osc.setPosition(-1000, -50);
-        toHSV.setPosition(-450, 100);
-        sHarmonyNode.setPosition(0, 200);
-        hsvNode.setPosition(450, 200);
+        timer.setPosition(-1400, 100);
+        osc.setPosition(-1000, 100);
+        toColor.setPosition(-600, 0);
+        sHarmonyNode.setPosition(-200, 200);
+        analogousNode.setPosition(200, 200);
+        gradientNode.setPosition(600, 200);
 
         circuit.addNode(timer);
-        circuit.addNode(multiplication);
-        circuit.addNode(multiplication2);
         circuit.addNode(osc);
-        circuit.addNode(toHSV);
+        circuit.addNode(toColor);
         circuit.addNode(sHarmonyNode);
-        circuit.addNode(hsvNode);
-
-        timer.outputs.milliseconds.connect(multiplication.inputs.a);
-        multiplication.outputs.output.connect(toHSV.inputs.hue);
-        timer.outputs.seconds.connect(multiplication2.inputs.a);
-        multiplication2.outputs.output.connect(osc.inputs.time);
-        osc.outputs.output.connect(toHSV.inputs.saturation);
-        toHSV.outputs.color.connect(sHarmonyNode.inputs.color);
-        sHarmonyNode.outputs.b.connect(hsvNode.inputs.color);
+        circuit.addNode(analogousNode);
+        circuit.addNode(gradientNode);
 
         const circuitStore = new CanvasStore(circuit);
 

apps/web/src/components/Controls/ColorControl/ColorControl.tsx

@@ -9,7 +9,7 @@ import {
     useState
 } from 'react';
 import { hsv2rgb } from '../../ColorPicker/ColorPicker.utils';
-import { hsl, rgb } from 'color-convert';
+import { rgb } from 'color-convert';
 import clsx from 'clsx';
 import { ColorSchemaType, resolveColor } from '@/utils';
 
@@ -40,15 +40,7 @@ export const ColorControl = observer(function <T extends ColorSchemaType>({
         if (typeof color === 'string') {
             return color;
         } else if (typeof color === 'object') {
-            if ('red' in color) {
-                return rgb.hex([color.red, color.green, color.blue]);
-            } else if ('hue' in color && 'luminance' in color) {
-                return hsl.hex([color.hue, color.saturation, color.luminance]);
-            } else {
-                return rgb.hex(
-                    hsv2rgb(color.hue, color.saturation, color.value)
-                );
-            }
+            return rgb.hex(hsv2rgb(color.hue, color.saturation, color.value));
         }
 
         return '#000000';
@@ -57,7 +49,7 @@ export const ColorControl = observer(function <T extends ColorSchemaType>({
     const handleBlur: FocusEventHandler<HTMLInputElement> = useCallback(
         e => {
             if (color) {
-                onBlur?.(resolveColor(e.target.value, color));
+                onBlur?.(resolveColor(e.target.value));
             }
         },
         [onBlur, color]
@@ -66,7 +58,7 @@ export const ColorControl = observer(function <T extends ColorSchemaType>({
     const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
         e => {
             if (color) {
-                port.next(resolveColor(e.target.value, color));
+                port.next(resolveColor(e.target.value));
             }
         },
         [port, color]

apps/web/src/components/Controls/Control/Control.tsx

@@ -4,12 +4,7 @@ import { NumberControl } from '../NumberControl/NumberControl';
 import { StringControl } from '../StringControl/StringControl';
 import { ColorControl } from '../ColorControl/ColorControl';
 import { BooleanControl } from '../BooleanControl/BooleanControl';
-import {
-    HSLColorSchemaType,
-    HSVColorSchemaType,
-    HexColorSchemaType,
-    RGBColorSchemaType
-} from '@/utils';
+import { ColorSchemaType } from '@/utils';
 
 export interface ControlProps {
     port: Input | Output;
@@ -44,33 +39,9 @@ export const Control = observer(({ port, disabled, onBlur }: ControlProps) => {
                     onBlur={onBlur}
                 />
             );
-        case 'HEX':
+        case 'Color':
             return (
-                <ColorControl<HexColorSchemaType>
-                    port={port}
-                    disabled={disabled}
-                    onBlur={onBlur}
-                />
-            );
-        case 'RGB':
-            return (
-                <ColorControl<RGBColorSchemaType>
-                    port={port}
-                    disabled={disabled}
-                    onBlur={onBlur}
-                />
-            );
-        case 'HSL':
-            return (
-                <ColorControl<HSLColorSchemaType>
-                    port={port}
-                    disabled={disabled}
-                    onBlur={onBlur}
-                />
-            );
-        case 'HSV':
-            return (
-                <ColorControl<HSVColorSchemaType>
+                <ColorControl<ColorSchemaType>
                     port={port}
                     disabled={disabled}
                     onBlur={onBlur}

apps/web/src/containers/PropertyPanel/PropertyPanel.tsx

@@ -1,7 +1,7 @@
 import { NodeType } from '@bitspace/nodes';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
-import { ComponentProps, useContext, useMemo } from 'react';
+import { ComponentProps, useContext } from 'react';
 import { StoreContext } from '../../circuit';
 import { Control } from '../../components/Controls/Control/Control';
 import { NodeDescriptionsMap } from '@bitspace/nodes/descriptions';
@@ -24,7 +24,7 @@ export const PropertyPanel = observer(
         return (
             <div
                 className={clsx(
-                    'h-full flex flex-col w-80 py-12 pr-4 divide-y divide-slate-200',
+                    'h-full flex flex-col w-80 py-12 pr-4 divide-y divide-slate-200 overflow-y-auto',
                     className
                 )}
                 {...props}
@@ -35,6 +35,7 @@ export const PropertyPanel = observer(
                         {NodeDescriptionsMap[selectedNode.type as NodeType]}
                     </p>
                 </div>
+
                 {inputs.length > 0 && (
                     <div className="flex flex-col gap-y-6 py-8">
                         <h4 className="font-medium">Inputs</h4>

apps/web/src/utils.ts

@@ -1,12 +1,6 @@
 import { z } from 'zod';
 import { Position } from './circuit';
-import {
-    ColorSchema,
-    HSLSchema,
-    HSVSchema,
-    HexSchema,
-    RGBSchema
-} from '@bitspace/schemas';
+import { ColorSchema } from '@bitspace/schemas';
 import { hex } from 'color-convert';
 
 export const lerp = (a: number, b: number, t: number) => {
@@ -21,43 +15,14 @@ export const angleBetween = (a: Position, b: Position) => {
     return Math.atan2(b.x - a.x, b.y - a.y);
 };
 
-export type HexColorSchemaType = z.infer<ReturnType<typeof HexSchema>>;
-export type RGBColorSchemaType = z.infer<ReturnType<typeof RGBSchema>>;
-export type HSLColorSchemaType = z.infer<ReturnType<typeof HSLSchema>>;
-export type HSVColorSchemaType = z.infer<ReturnType<typeof HSVSchema>>;
 export type ColorSchemaType = z.infer<ReturnType<typeof ColorSchema>>;
 
-export const resolveColor = <T extends ColorSchemaType>(
-    raw: string,
-    color: T
-): T => {
-    if (typeof color === 'object') {
-        if ('red' in color) {
-            const [red, green, blue] = hex.rgb(raw);
+export const resolveColor = <T extends ColorSchemaType>(raw: string): T => {
+    const [hue, saturation, value] = hex.hsv(raw);
 
-            return RGBSchema().parse({
-                red,
-                green,
-                blue
-            }) as T;
-        } else if ('hue' in color && 'luminance' in color) {
-            const [hue, saturation, luminance] = hex.hsl(raw);
-
-            return HSLSchema().parse({
-                hue,
-                saturation: saturation / 100,
-                luminance: luminance / 100
-            }) as T;
-        } else {
-            const [hue, saturation, value] = hex.hsv(raw);
-
-            return HSVSchema().parse({
-                hue,
-                saturation: saturation / 100,
-                value: value / 100
-            }) as T;
-        }
-    } else {
-        return HexSchema().parse(raw) as T;
-    }
+    return ColorSchema().parse({
+        hue,
+        saturation: saturation / 100,
+        value: value / 100
+    }) as T;
 };

apps/web/src/windows/ColorHarmonyWindow.tsx

@@ -8,7 +8,7 @@ import { TetradicHarmony } from '../../../../packages/nodes/src/color/TetradicHa
 import { SquareHarmony } from '../../../../packages/nodes/src/color/SquareHarmony/SquareHarmony';
 import { ComplementaryHarmony } from '../../../../packages/nodes/src/color/ComplementaryHarmony/ComplementaryHarmony';
 import { AnalogousHarmony } from '../../../../packages/nodes/src/color/AnalogousHarmony/AnalogousHarmony';
-import { HSVSchema } from '../../../../packages/schemas/src';
+import { ColorSchema } from '../../../../packages/schemas/src';
 
 export const ColorHarmonyWindow = ({
     node
@@ -20,11 +20,13 @@ export const ColorHarmonyWindow = ({
         | ComplementaryHarmony
         | AnalogousHarmony;
 }) => {
-    const [color, setColor] = useState<z.infer<ReturnType<typeof HSVSchema>>>({
-        hue: 0,
-        saturation: 0,
-        value: 0
-    });
+    const [color, setColor] = useState<z.infer<ReturnType<typeof ColorSchema>>>(
+        {
+            hue: 0,
+            saturation: 0,
+            value: 0
+        }
+    );
 
     useEffect(() => {
         const subscription = node.inputs.color.subscribe(value => {

apps/web/src/windows/index.tsx

@@ -4,14 +4,12 @@ import { SynthesizedImage } from '../../../../packages/nodes/src/ai/SynthesizedI
 import { ConsoleWindow } from './ConsoleWindow';
 import { Node } from '@bitspace/circuit';
 import { ImageWindow } from './ImageWindow';
-import { HSVWindow } from './HSVWindow';
 import { ColorHarmonyWindow } from './ColorHarmonyWindow';
 import { TriadHarmony } from '../../../../packages/nodes/src/color/TriadHarmony/TriadHarmony';
 import { TetradicHarmony } from '../../../../packages/nodes/src/color/TetradicHarmony/TetradicHarmony';
 import { SquareHarmony } from '../../../../packages/nodes/src/color/SquareHarmony/SquareHarmony';
 import { ComplementaryHarmony } from '../../../../packages/nodes/src/color/ComplementaryHarmony/ComplementaryHarmony';
 import { AnalogousHarmony } from '../../../../packages/nodes/src/color/AnalogousHarmony/AnalogousHarmony';
-import { FromHSV } from '../../../../packages/nodes/src/color/FromHSV/FromHSV';
 import { CubicBezierWindow } from './CubicBezierWindow';
 import { CubicBezier } from '../../../../packages/nodes/src/easings/CubicBezier/CubicBezier';
 import { ImageEditWindow } from './ImageEditWindow';
@@ -60,8 +58,6 @@ export const nodeWindowResolver: NodeWindowResolver = (node: Node) => {
                     }
                 />
             );
-        case 'From HSV':
-            return <HSVWindow node={node as FromHSV} />;
         case 'Gradient':
             return <GradientWindow node={node as Gradient} />;
     }

packages/nodes/package.json

@@ -20,6 +20,7 @@
     "devDependencies": {
         "@bitspace/eslint-config": "workspace:*",
         "@bitspace/typescript-config": "workspace:*",
+        "@types/color-convert": "^2.0.3",
         "@types/eslint": "^8.44.7",
         "@types/jest": "^29.2.5",
         "@types/node": "^20.5.2",
@@ -32,6 +33,7 @@
     "dependencies": {
         "@bitspace/circuit": "workspace:^",
         "@bitspace/schemas": "workspace:^",
+        "color-convert": "^2.0.1",
         "framer-motion": "^10.16.16",
         "rxjs": "^7.8.1",
         "three": "^0.161.0",

packages/nodes/src/ai/ImageEdit/ImageEdit.tsx

@@ -16,15 +16,15 @@ export class ImageEdit extends Node {
         }),
         image: new Input({
             name: 'Context',
-            type: ImageSchema(),
-            defaultValue: ''
+            type: ImageSchema().optional(),
+            defaultValue: null
         })
     };
 
     outputs = {
         output: new Output({
             name: 'Output',
-            type: ImageSchema(),
+            type: ImageSchema().optional(),
             observable: new Observable()
         })
     };