fix gradients

emilwidlund · Jun 2, 2024 · bcbb78c · bcbb78c
1 parent f969c7e
commit bcbb78c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/apps/web/src/windows/GradientWindow.tsx b/apps/web/src/windows/GradientWindow.tsx
@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
-import { hsv2rgb } from '../components/ColorPicker/ColorPicker.utils';
 import { NodeWindow } from '../circuit/components/Node/Node';
-import { FromHSV } from '../../../../packages/nodes/src/color/FromHSV/FromHSV';
-import { ColorSchema, GradientSchema } from '@bitspace/schemas';
+import { GradientSchema } from '@bitspace/schemas';
 import { Gradient } from '@bitspace/nodes';
 
 const defaultGradient: Zod.infer<ReturnType<typeof GradientSchema>> = {
@@ -14,9 +12,9 @@ const defaultGradient: Zod.infer<ReturnType<typeof GradientSchema>> = {
     angle: 0
 };
 
-function hsv_to_hsl(h, s, v) {
+function hsv_to_hsl(h: number = 0, s: number = 0, v: number = 0) {
     // both hsv and hsl values are in [0, 1]
-    var l = ((2 - s) * v) / 2;
+    let l = ((2 - s) * v) / 2;
 
     if (l != 0) {
         if (l == 1) {
@@ -56,7 +54,7 @@ export const GradientWindow = ({ node }: { node: Gradient }) => {
                     color.value
                 );
 
-                return `hsl(${h} ${s * 100}% ${l * 100}%)`;
+                return `hsl(${h} ${(s ?? 0) * 100}% ${(l ?? 0) * 100}%)`;
             })
             .join(', ')}`,
         ')'

diff --git a/packages/nodes/src/color/Gradient/Gradient.ts b/packages/nodes/src/color/Gradient/Gradient.ts
@@ -1,6 +1,11 @@
 import { NodeType } from '../../types';
 import { Input, Node, Output } from '@bitspace/circuit';
-import { ColorSchema, GradientSchema, minMaxNumber } from '@bitspace/schemas';
+import {
+    ColorSchema,
+    GradientSchema,
+    HSVSchema,
+    minMaxNumber
+} from '@bitspace/schemas';
 import { combineLatest, map } from 'rxjs';
 
 export class Gradient extends Node {
@@ -10,20 +15,20 @@ export class Gradient extends Node {
     inputs = {
         a: new Input({
             name: 'A',
-            type: ColorSchema(),
+            type: HSVSchema(),
             defaultValue: {
-                red: 0,
-                green: 0,
-                blue: 0
+                hue: 0,
+                saturation: 0.5,
+                value: 1
             }
         }),
         b: new Input({
             name: 'B',
-            type: ColorSchema(),
+            type: HSVSchema(),
             defaultValue: {
-                red: 0,
-                green: 0,
-                blue: 0
+                hue: 180,
+                saturation: 0.5,
+                value: 1
             }
         }),
         angle: new Input({

diff --git a/packages/schemas/src/gradient.ts b/packages/schemas/src/gradient.ts
@@ -1,10 +1,10 @@
 import { z } from 'zod';
-import { ColorSchema, minMaxNumber } from '.';
+import { ColorSchema, HSVSchema, minMaxNumber } from '.';
 
 const GradientType = z.enum(['linear', 'radial', 'conic']);
 
 const ColorStop = z.object({
-    color: ColorSchema(),
+    color: HSVSchema(),
     position: minMaxNumber(0, 1)
 });