From b0ff160faa5925e86cf48ff63e98d108d68284fa Mon Sep 17 00:00:00 2001 From: Alex Kempton Date: Fri, 3 Jan 2025 18:03:36 +0100 Subject: [PATCH] color type param (#479) * updated types and updateSketchParams to handle vectors * addNode as shared func * imports fix * vector value passed to sketch * organise * ParamVector3 component * tweak * loosen lint rules * comments * rgb param type * type shuffling, better checking * types cleanup * project json update * color picker with story * better handling of body click * floating color picker position * ParamColor implemented * update content security policy to allow for data: URLs * picker styling * behaviour fix for color picker * example project update * color picker hue slider fix --- packages/desktop/package.json | 4 +- .../components/ParamColor/ParamColor.tsx | 31 ++ .../components/SketchParams/SketchParams.tsx | 3 + .../core/ColorPicker/ColorPicker.module.css | 36 ++ .../core/ColorPicker/ColorPicker.tsx | 107 +++++ .../hooks/useOnNodeVec3ValueChange.ts | 19 + packages/desktop/src/renderer/index.html | 5 +- .../src/stories/NodeControl.stories.tsx | 69 ++- .../actionCreators/updateSketchParams.ts | 4 +- .../store/selectors/getSketchParamValues.ts | 11 +- packages/engine/src/store/shared/addNode.ts | 10 +- packages/engine/src/store/types.ts | 43 +- packages/example-project/project.json | 234 +---------- .../example-project/sketches/solid/config.ts | 6 + .../example-project/sketches/solid/index.ts | 14 +- yarn.lock | 393 +++++++++++++++++- 16 files changed, 713 insertions(+), 276 deletions(-) create mode 100644 packages/desktop/src/renderer/components/ParamColor/ParamColor.tsx create mode 100644 packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.module.css create mode 100644 packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.tsx create mode 100644 packages/desktop/src/renderer/components/hooks/useOnNodeVec3ValueChange.ts diff --git a/packages/desktop/package.json b/packages/desktop/package.json index 9ea6f481..f1a5fc6f 100644 --- a/packages/desktop/package.json +++ b/packages/desktop/package.json @@ -23,9 +23,11 @@ "dependencies": { "@electron-toolkit/preload": "^3.0.1", "@electron-toolkit/utils": "^3.0.0", + "@floating-ui/react-dom": "^2.1.2", "@hedron/engine": "^1.0.0-alpha.1", "@redux-devtools/extension": "^3.3.0", "@tomjs/electron-devtools-installer": "^2.3.2", + "@uiw/react-color": "^2.3.4", "chokidar": "^4.0.0", "date-fns": "^4.1.0", "electron-updater": "^6.1.7", @@ -66,6 +68,6 @@ "electron-vite": "^2.3.0", "storybook": "^8.2.9", "vite": "^5.3.1", - "vite-tsconfig-paths": "^5.0.1" + "vite-tsconfig-paths": "^5.1.4" } } diff --git a/packages/desktop/src/renderer/components/ParamColor/ParamColor.tsx b/packages/desktop/src/renderer/components/ParamColor/ParamColor.tsx new file mode 100644 index 00000000..8a86e5ec --- /dev/null +++ b/packages/desktop/src/renderer/components/ParamColor/ParamColor.tsx @@ -0,0 +1,31 @@ +import { NodeParamRGB } from '@hedron/engine' +import { useInterval } from 'usehooks-ts' +import { useRef } from 'react' +import { ColorPicker, ColorPickerHandle } from '@components/core/ColorPicker/ColorPicker' +import { useOnNodeVec3ValueChange } from '@components/hooks/useOnNodeVec3ValueChange' +import { engineStore, useEngineStore } from '@renderer/engine' + +interface ParamRGBProps { + id: string +} + +export const ParamColor = ({ id }: ParamRGBProps) => { + const ref = useRef(null) + const node = useEngineStore((state) => state.nodes[id] as NodeParamRGB) + const { childNodeIds } = node + + useInterval(() => { + const state = engineStore.getState() + const nodeValues = node.childNodeIds.map((id) => state.nodeValues[id]) + + ref.current?.updateColor(nodeValues as [number, number, number]) + }, 100) + + const onVec3ValueChange = useOnNodeVec3ValueChange( + childNodeIds[0], + childNodeIds[1], + childNodeIds[2], + ) + + return +} diff --git a/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx b/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx index 13b7ebfe..80628303 100644 --- a/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx +++ b/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx @@ -5,6 +5,7 @@ import { ParamNumber } from '@components/ParamNumber/ParamNumber' import { ParamBoolean } from '@components/ParamBoolean/ParamBoolean' import { ParamEnum } from '@components/ParamEnum/ParamEnum' import { ParamVector3 } from '@components/ParamVector3/ParamVector3' +import { ParamColor } from '@components/ParamColor/ParamColor' import { NodeControl, NodeControlInner, @@ -28,6 +29,8 @@ const getInputElement = (valueType: NodeTypes, id: string) => { return case NodeTypes.Vector3: return + case NodeTypes.RGB: + return default: return Unsupported type {valueType} } diff --git a/packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.module.css b/packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.module.css new file mode 100644 index 00000000..a879fa60 --- /dev/null +++ b/packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.module.css @@ -0,0 +1,36 @@ +.container { + position: relative; + width: 100%; + height: 100%; +} + +.colorBox { + width: 100%; + height: 100%; + cursor: pointer; + border-radius: 0.5rem; + border: 1px solid var(--lineColor1); +} + +.pickerContainer { + z-index: 10; + position: relative; +} + +.picker { + border-radius: 8px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); +} + +.picker::before { + content: ''; + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + border: 2px solid var(--lineColor1); + border-radius: 8px; + pointer-events: none; + z-index: 1; +} diff --git a/packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.tsx b/packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.tsx new file mode 100644 index 00000000..0c58d183 --- /dev/null +++ b/packages/desktop/src/renderer/components/core/ColorPicker/ColorPicker.tsx @@ -0,0 +1,107 @@ +import { + forwardRef, + useCallback, + useEffect, + useImperativeHandle, + useMemo, + useRef, + useState, +} from 'react' +import { + Colorful, + ColorResult, + hexToHsva, + HsvaColor, + hsvaToHex, + rgbaToHex, + rgbaToHsva, +} from '@uiw/react-color' +import { useFloating, shift, offset } from '@floating-ui/react-dom' +import css from './ColorPicker.module.css' + +type RGBColor = [number, number, number] + +export type ColorPickerHandle = { + updateColor: (value: RGBColor) => void +} + +interface ColorPickerProps { + onValueChange: (value: RGBColor) => void +} + +const defaultColor: HsvaColor = hexToHsva('#FFFFFF') + +export const ColorPicker = forwardRef(function ColorPicker( + { onValueChange }, + ref, +) { + const colorBoxRef = useRef(null) + const [color, setColor] = useState(defaultColor) + const colorRef = useRef(defaultColor) + const [isOpen, setIsOpen] = useState(false) + const { refs, floatingStyles } = useFloating({ + middleware: [shift({ padding: 10 }), offset({ mainAxis: 10 })], + }) + + const onBoxClick = useCallback(() => { + setColor(colorRef.current) + setIsOpen((isOpen) => !isOpen) + }, []) + + const onPickerClick = useCallback((e: React.MouseEvent) => { + e.stopPropagation() + }, []) + + const onChange = useCallback( + ({ rgb: { r, g, b }, hsva }: ColorResult) => { + setColor(hsva) + onValueChange([r / 255, g / 255, b / 255]) + }, + [onValueChange], + ) + + useEffect(() => { + const handleClick = (e: MouseEvent) => { + // do not close the picker if the color box is clicked + if (colorBoxRef.current?.contains(e.target as Node)) return + setIsOpen(false) + } + document.body.addEventListener('click', handleClick) + return () => { + document.body.removeEventListener('click', handleClick) + } + }, []) + + // Avoiding using state to keep external frequent updates performant + const updateColor = useCallback(([r, g, b]: RGBColor) => { + const rgba = { r: r * 255, g: g * 255, b: b * 255, a: 1 } + const hsva = rgbaToHsva(rgba) + colorBoxRef.current?.style.setProperty('background-color', rgbaToHex(rgba)) + colorRef.current = hsva + }, []) + + useImperativeHandle(ref, () => ({ updateColor }), [updateColor]) + + const backgroundColor = useMemo(() => hsvaToHex(color), [color]) + + return ( +
+
+ {isOpen && ( +
+ +
+ )} +
+ ) +}) diff --git a/packages/desktop/src/renderer/components/hooks/useOnNodeVec3ValueChange.ts b/packages/desktop/src/renderer/components/hooks/useOnNodeVec3ValueChange.ts new file mode 100644 index 00000000..c9d83b93 --- /dev/null +++ b/packages/desktop/src/renderer/components/hooks/useOnNodeVec3ValueChange.ts @@ -0,0 +1,19 @@ +import { useCallback } from 'react' +import { useOnNodeValueChange } from './useOnNodeValueChange' + +export const useOnNodeVec3ValueChange = (id1: string, id2: string, id3: string) => { + const onValueChange1 = useOnNodeValueChange(id1) + const onValueChange2 = useOnNodeValueChange(id2) + const onValueChange3 = useOnNodeValueChange(id3) + + const onVec3ValueChange = useCallback( + (value: [number, number, number]) => { + onValueChange1(value[0]) + onValueChange2(value[1]) + onValueChange3(value[2]) + }, + [onValueChange1, onValueChange2, onValueChange3], + ) + + return onVec3ValueChange +} diff --git a/packages/desktop/src/renderer/index.html b/packages/desktop/src/renderer/index.html index 63e7327f..686862c2 100644 --- a/packages/desktop/src/renderer/index.html +++ b/packages/desktop/src/renderer/index.html @@ -3,7 +3,10 @@ Electron - + diff --git a/packages/desktop/src/stories/NodeControl.stories.tsx b/packages/desktop/src/stories/NodeControl.stories.tsx index 5ccc92db..d59932c9 100644 --- a/packages/desktop/src/stories/NodeControl.stories.tsx +++ b/packages/desktop/src/stories/NodeControl.stories.tsx @@ -13,6 +13,7 @@ import { ControlGrid } from '@components/core/ControlGrid/ControlGrid' import { FloatSlider, FloatSliderHandle } from '@components/core/FloatSlider/FloatSlider' import { BooleanToggle, BooleanToggleHandle } from '@components/core/BooleanToggle/BooleanToggle' +import { ColorPickerHandle, ColorPicker } from '@components/core/ColorPicker/ColorPicker' import { Panel, PanelBody, PanelHeader } from '@components/core/Panel/Panel' const meta = { @@ -65,15 +66,37 @@ export const Boolean = ({ title = 'Boolean Thing', isActive, onClick }: BasicPro ) } +export const Color = ({ title = 'Color Picker', isActive, onClick }: BasicProps) => { + const ref = useRef(null) + + useInterval(() => { + ref.current!.updateColor([Math.random(), Math.random(), Math.random()]) + }, 3000) + + return ( + + + {title} + + + + + + ) +} + const params = [ - 'Velocity X', - 'Velocity Y', - 'Rotation Speed X', - 'Rotation Speed Y', - 'some long name x', - 'some other thing y', - 'short', - 'another long param', + ['Fun Param Name', 'number'], + ['Another Param', 'boolean'], + ['Color Picker', 'color'], + ['Color Picker', 'color'], + ['Slider', 'number'], + ['Toggle', 'boolean'], + ['Color Picker', 'color'], + ['Slider', 'number'], + ['Slider', 'number'], + ['Toggle', 'boolean'], + ['Color Picker', 'color'], ] export const WithControlGrid = () => { @@ -81,13 +104,29 @@ export const WithControlGrid = () => { return ( - {params.map((item, i) => - i % 2 == 0 ? ( - setActiveId(i)} /> - ) : ( - setActiveId(i)} /> - ), - )} + {params.map(([title, type], i) => ( + <> + {type === 'number' && ( + setActiveId(i)} + /> + )} + {type === 'boolean' && ( + setActiveId(i)} + /> + )} + {type === 'color' && ( + setActiveId(i)} /> + )} + + ))} ) } diff --git a/packages/engine/src/store/actionCreators/updateSketchParams.ts b/packages/engine/src/store/actionCreators/updateSketchParams.ts index 5a49a8e5..2a06cd75 100644 --- a/packages/engine/src/store/actionCreators/updateSketchParams.ts +++ b/packages/engine/src/store/actionCreators/updateSketchParams.ts @@ -1,5 +1,5 @@ import { addNode } from '@store/shared/addNode' -import { NodeTypes, SetterCreator } from '@store/types' +import { hasChildNodes, SetterCreator } from '@store/types' import { createUniqueId } from '@utils/createUniqueId' export const createUpdateSketchParams: SetterCreator<'updateSketchParams'> = @@ -41,7 +41,7 @@ export const createUpdateSketchParams: SetterCreator<'updateSketchParams'> = delete state.nodeValues[oldParamId] // Remove vector child nodes if they exist - if (oldNode.valueType === NodeTypes.Vector3) { + if (hasChildNodes(oldNode)) { oldNode.childNodeIds.forEach((childNodeId) => { delete state.nodes[childNodeId] delete state.nodeValues[childNodeId] diff --git a/packages/engine/src/store/selectors/getSketchParamValues.ts b/packages/engine/src/store/selectors/getSketchParamValues.ts index 65ecbb12..494fe82f 100644 --- a/packages/engine/src/store/selectors/getSketchParamValues.ts +++ b/packages/engine/src/store/selectors/getSketchParamValues.ts @@ -1,4 +1,4 @@ -import { EngineState } from '@store/types' +import { EngineState, hasChildNodes } from '@store/types' // Get the values of the parameters of a sketch, dealing with child nodes export const getSketchParamValues = (state: EngineState, sketchId: string) => { @@ -8,13 +8,14 @@ export const getSketchParamValues = (state: EngineState, sketchId: string) => { const sketch = sketches[sketchId] sketch.paramIds.forEach((id) => { - const { key, valueType } = nodes[id] + const node = nodes[id] + const { key } = node let value - if (valueType === 'vector3') { - // Return an array of values for vector3 - const childNodeIds = nodes[id].childNodeIds + if (hasChildNodes(node)) { + // Return an array of values for nodes with child nodes + const childNodeIds = node.childNodeIds value = childNodeIds.map((childNodeId) => nodeValues[childNodeId]) } else { value = nodeValues[id] diff --git a/packages/engine/src/store/shared/addNode.ts b/packages/engine/src/store/shared/addNode.ts index 0ff5456b..e159a426 100644 --- a/packages/engine/src/store/shared/addNode.ts +++ b/packages/engine/src/store/shared/addNode.ts @@ -1,7 +1,8 @@ -import { EngineState, NodeTypes, SketchConfigParam } from '@store/types' +import { EngineState, NodeTypes, SketchConfigParam, isNodeTypeWithChildren } from '@store/types' import { createUniqueId } from '@utils/createUniqueId' const vector3Keys = ['x', 'y', 'z'] +const rgbKeys = ['r', 'g', 'b'] export const addNode = ( state: EngineState, @@ -9,12 +10,13 @@ export const addNode = ( sketchId: string, { key, valueType = NodeTypes.Number, defaultValue }: SketchConfigParam, ) => { - if (valueType === NodeTypes.Vector3) { + if (isNodeTypeWithChildren(valueType)) { if (!Array.isArray(defaultValue)) { - throw new Error(`Expected defaultValue to be an array for Vector3 type`) + throw new Error(`Expected defaultValue to be an array for ${valueType} type`) } const childNodeIds = Array.from({ length: 3 }, createUniqueId) as [string, string, string] + const keys = valueType === NodeTypes.Vector3 ? vector3Keys : rgbKeys state.nodes[paramId] = { id: paramId, @@ -28,7 +30,7 @@ export const addNode = ( childNodeIds.forEach((childNodeId, index) => { state.nodes[childNodeId] = { id: childNodeId, - key: vector3Keys[index], + key: keys[index], type: 'param', valueType: NodeTypes.Number, sketchId, diff --git a/packages/engine/src/store/types.ts b/packages/engine/src/store/types.ts index 54fb06e9..5163f11b 100644 --- a/packages/engine/src/store/types.ts +++ b/packages/engine/src/store/types.ts @@ -23,34 +23,48 @@ export enum NodeTypes { Boolean = 'boolean', Enum = 'enum', Vector3 = 'vector3', + RGB = 'rgb', } +export const NodeTypesWithChildren = [NodeTypes.Vector3, NodeTypes.RGB] as const +export type NodeTypeWithChildren = (typeof NodeTypesWithChildren)[number] + export interface NodeParamBase extends NodeBase { + type: 'param' sketchId: string } +export interface NodeParamWithChildren extends NodeParamBase { + childNodeIds: string[] + valueType: NodeTypeWithChildren +} + export interface NodeParamNumber extends NodeParamBase { - type: 'param' valueType: NodeTypes.Number } export interface NodeParamBoolean extends NodeParamBase { - type: 'param' valueType: NodeTypes.Boolean } export interface NodeParamEnum extends NodeParamBase { - type: 'param' valueType: NodeTypes.Enum } -export interface NodeParamVector3 extends NodeParamBase { - type: 'param' +export interface NodeParamVector3 extends NodeParamWithChildren { valueType: NodeTypes.Vector3 - childNodeIds: [string, string, string] } -export type Param = NodeParamBoolean | NodeParamNumber | NodeParamEnum | NodeParamVector3 +export interface NodeParamRGB extends NodeParamWithChildren { + valueType: NodeTypes.RGB +} + +export type Param = + | NodeParamBoolean + | NodeParamNumber + | NodeParamEnum + | NodeParamVector3 + | NodeParamRGB export type Node = Param export type Nodes = { [key: string]: Node } @@ -58,6 +72,15 @@ export type Nodes = { [key: string]: Node } export type NodeValue = number | boolean | string export type NodeValues = { [key: string]: NodeValue } +export const isNodeTypeWithChildren = (nodeType: NodeTypes): nodeType is NodeTypeWithChildren => { + return NodeTypesWithChildren.includes(nodeType as NodeTypeWithChildren) +} + +// Utility type guard to check if a node has child nodes +export const hasChildNodes = (node: Node): node is NodeParamWithChildren => { + return 'childNodeIds' in node +} + export interface SketchConfigParamBase { key: string title?: string @@ -84,11 +107,17 @@ export interface SketchConfigParamVector3 extends SketchConfigParamBase { defaultValue: [number, number, number] } +export interface SketchConfigParamRGB extends SketchConfigParamBase { + valueType: NodeTypes.RGB + defaultValue: [number, number, number] +} + export type SketchConfigParam = | SketchConfigParamNumber | SketchConfigParamBoolean | SketchConfigParamEnum | SketchConfigParamVector3 + | SketchConfigParamRGB export interface SketchConfig { title: string diff --git a/packages/example-project/project.json b/packages/example-project/project.json index ca1d354f..8c8a226b 100644 --- a/packages/example-project/project.json +++ b/packages/example-project/project.json @@ -1,233 +1 @@ -{ - "version": 0, - "engine": { - "sketches": { - "c64ceed4673": { - "id": "c64ceed4673", - "moduleId": "solid", - "title": "Solid", - "paramIds": [ - "64ceed46737", - "4ceed467370", - "ceed467370c", - "eed467370c5", - "ed467370c5c", - "d467370c5cb" - ] - }, - "5cbd2fda13a": { - "id": "5cbd2fda13a", - "moduleId": "stars", - "title": "stars", - "paramIds": ["cbd2fda13a6", "bd2fda13a6c", "d2fda13a6c0", "2fda13a6c07"] - }, - "785d72e7c5d3f4a4": { - "id": "785d72e7c5d3f4a4", - "moduleId": "solid", - "title": "Solid", - "paramIds": [ - "85d72e7c5d3f4a45", - "5d72e7c5d3f4a452", - "d72e7c5d3f4a4522", - "72e7c5d3f4a45228", - "2e7c5d3f4a45228b", - "e7c5d3f4a45228b7" - ] - }, - "1359768f6f5f09f4": { - "id": "1359768f6f5f09f4", - "moduleId": "solid", - "title": "Solid", - "paramIds": [ - "359768f6f5f09f4d", - "59768f6f5f09f4db", - "9768f6f5f09f4dbf", - "768f6f5f09f4dbf5", - "68f6f5f09f4dbf57", - "8f6f5f09f4dbf57a" - ] - } - }, - "nodes": { - "64ceed46737": { - "id": "64ceed46737", - "key": "rotSpeedX", - "type": "param", - "valueType": "number", - "sketchId": "c64ceed4673" - }, - "4ceed467370": { - "id": "4ceed467370", - "key": "rotSpeedY", - "type": "param", - "valueType": "number", - "sketchId": "c64ceed4673" - }, - "ceed467370c": { - "id": "ceed467370c", - "key": "rotSpeedZ", - "type": "param", - "valueType": "number", - "sketchId": "c64ceed4673" - }, - "eed467370c5": { - "id": "eed467370c5", - "key": "scale", - "type": "param", - "valueType": "number", - "sketchId": "c64ceed4673" - }, - "ed467370c5c": { - "id": "ed467370c5c", - "key": "isWireframe", - "type": "param", - "valueType": "boolean", - "sketchId": "c64ceed4673" - }, - "d467370c5cb": { - "id": "d467370c5cb", - "key": "geomName", - "type": "param", - "valueType": "enum", - "sketchId": "c64ceed4673" - }, - "cbd2fda13a6": { - "id": "cbd2fda13a6", - "key": "opacity", - "type": "param", - "valueType": "number", - "sketchId": "5cbd2fda13a" - }, - "bd2fda13a6c": { - "id": "bd2fda13a6c", - "key": "speed", - "type": "param", - "valueType": "number", - "sketchId": "5cbd2fda13a" - }, - "d2fda13a6c0": { - "id": "d2fda13a6c0", - "key": "velocity", - "type": "param", - "valueType": "number", - "sketchId": "5cbd2fda13a" - }, - "2fda13a6c07": { - "id": "2fda13a6c07", - "key": "randomWalk", - "type": "param", - "valueType": "number", - "sketchId": "5cbd2fda13a" - }, - "85d72e7c5d3f4a45": { - "id": "85d72e7c5d3f4a45", - "key": "rotSpeedX", - "type": "param", - "valueType": "number", - "sketchId": "785d72e7c5d3f4a4" - }, - "5d72e7c5d3f4a452": { - "id": "5d72e7c5d3f4a452", - "key": "rotSpeedY", - "type": "param", - "valueType": "number", - "sketchId": "785d72e7c5d3f4a4" - }, - "d72e7c5d3f4a4522": { - "id": "d72e7c5d3f4a4522", - "key": "rotSpeedZ", - "type": "param", - "valueType": "number", - "sketchId": "785d72e7c5d3f4a4" - }, - "72e7c5d3f4a45228": { - "id": "72e7c5d3f4a45228", - "key": "scale", - "type": "param", - "valueType": "number", - "sketchId": "785d72e7c5d3f4a4" - }, - "2e7c5d3f4a45228b": { - "id": "2e7c5d3f4a45228b", - "key": "isWireframe", - "type": "param", - "valueType": "boolean", - "sketchId": "785d72e7c5d3f4a4" - }, - "e7c5d3f4a45228b7": { - "id": "e7c5d3f4a45228b7", - "key": "geomName", - "type": "param", - "valueType": "enum", - "sketchId": "785d72e7c5d3f4a4" - }, - "359768f6f5f09f4d": { - "id": "359768f6f5f09f4d", - "key": "rotSpeedX", - "type": "param", - "valueType": "number", - "sketchId": "1359768f6f5f09f4" - }, - "59768f6f5f09f4db": { - "id": "59768f6f5f09f4db", - "key": "rotSpeedY", - "type": "param", - "valueType": "number", - "sketchId": "1359768f6f5f09f4" - }, - "9768f6f5f09f4dbf": { - "id": "9768f6f5f09f4dbf", - "key": "rotSpeedZ", - "type": "param", - "valueType": "number", - "sketchId": "1359768f6f5f09f4" - }, - "768f6f5f09f4dbf5": { - "id": "768f6f5f09f4dbf5", - "key": "scale", - "type": "param", - "valueType": "number", - "sketchId": "1359768f6f5f09f4" - }, - "68f6f5f09f4dbf57": { - "id": "68f6f5f09f4dbf57", - "key": "isWireframe", - "type": "param", - "valueType": "boolean", - "sketchId": "1359768f6f5f09f4" - }, - "8f6f5f09f4dbf57a": { - "id": "8f6f5f09f4dbf57a", - "key": "geomName", - "type": "param", - "valueType": "enum", - "sketchId": "1359768f6f5f09f4" - } - }, - "nodeValues": { - "64ceed46737": 0.5, - "4ceed467370": 0.5, - "ceed467370c": 0.5, - "eed467370c5": 0.5, - "ed467370c5c": false, - "d467370c5cb": "octa", - "cbd2fda13a6": 1, - "bd2fda13a6c": 1, - "d2fda13a6c0": 0, - "2fda13a6c07": 0, - "85d72e7c5d3f4a45": 0.5, - "5d72e7c5d3f4a452": 0.5, - "d72e7c5d3f4a4522": 0.5, - "72e7c5d3f4a45228": 1, - "2e7c5d3f4a45228b": true, - "e7c5d3f4a45228b7": "icosa", - "359768f6f5f09f4d": 0, - "59768f6f5f09f4db": 0, - "9768f6f5f09f4dbf": 0, - "768f6f5f09f4dbf5": 1, - "68f6f5f09f4dbf57": true, - "8f6f5f09f4dbf57a": "cube" - } - }, - "app": { "sketchesDir": "sketches" } -} +{"version":0,"engine":{"sketches":{"d3738327080a78e0":{"id":"d3738327080a78e0","moduleId":"logo","title":"Hedron Logo","paramIds":["3738327080a78e01","738327080a78e013","38327080a78e0131","8327080a78e01314","327080a78e01314e"]},"27080a78e01314ef":{"id":"27080a78e01314ef","moduleId":"solid","title":"Solid","paramIds":["7080a78e01314efa","a78e01314efa9ab8","01314efa9ab8898c","1314efa9ab8898c6","314efa9ab8898c6d","14efa9ab8898c6d0","4efa9ab8898c6d0b","efa9ab8898c6d0bb"]},"9ab8898c6d0bbafa":{"id":"9ab8898c6d0bbafa","moduleId":"stars","title":"stars","paramIds":["ab8898c6d0bbafa1","b8898c6d0bbafa17","8898c6d0bbafa171","898c6d0bbafa1714"]},"98c6d0bbafa17148":{"id":"98c6d0bbafa17148","moduleId":"solid","title":"Solid","paramIds":["8c6d0bbafa17148c","0bbafa17148c2774","fa17148c277417ba","a17148c277417ba4","17148c277417ba49","7148c277417ba490","148c277417ba4902","48c277417ba49022"]},"8c277417ba49022a":{"id":"8c277417ba49022a","moduleId":"solid","title":"Solid","paramIds":["c277417ba49022ad","417ba49022add948","a49022add948d8be","49022add948d8bea","9022add948d8bea6","022add948d8bea6e","22add948d8bea6e3","2add948d8bea6e3e"]},"add948d8bea6e3e2":{"id":"add948d8bea6e3e2","moduleId":"solid","title":"Solid","paramIds":["dd948d8bea6e3e27","8d8bea6e3e27afab","ea6e3e27afab72fb","a6e3e27afab72fb7","6e3e27afab72fb7d","e3e27afab72fb7db","3e27afab72fb7db6","e27afab72fb7db6a"]}},"nodes":{"3738327080a78e01":{"id":"3738327080a78e01","key":"logoRotSpeedX","type":"param","valueType":"number","sketchId":"d3738327080a78e0"},"738327080a78e013":{"id":"738327080a78e013","key":"logoRotSpeedY","type":"param","valueType":"number","sketchId":"d3738327080a78e0"},"38327080a78e0131":{"id":"38327080a78e0131","key":"logoRotSpeedZ","type":"param","valueType":"number","sketchId":"d3738327080a78e0"},"8327080a78e01314":{"id":"8327080a78e01314","key":"logoScale","type":"param","valueType":"number","sketchId":"d3738327080a78e0"},"327080a78e01314e":{"id":"327080a78e01314e","key":"sphereScale","type":"param","valueType":"number","sketchId":"d3738327080a78e0"},"7080a78e01314efa":{"id":"7080a78e01314efa","key":"position","type":"param","valueType":"vector3","sketchId":"27080a78e01314ef","childNodeIds":["080a78e01314efa9","80a78e01314efa9a","0a78e01314efa9ab"]},"080a78e01314efa9":{"id":"080a78e01314efa9","key":"x","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"80a78e01314efa9a":{"id":"80a78e01314efa9a","key":"y","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"0a78e01314efa9ab":{"id":"0a78e01314efa9ab","key":"z","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"a78e01314efa9ab8":{"id":"a78e01314efa9ab8","key":"color","type":"param","valueType":"rgb","sketchId":"27080a78e01314ef","childNodeIds":["78e01314efa9ab88","8e01314efa9ab889","e01314efa9ab8898"]},"78e01314efa9ab88":{"id":"78e01314efa9ab88","key":"r","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"8e01314efa9ab889":{"id":"8e01314efa9ab889","key":"g","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"e01314efa9ab8898":{"id":"e01314efa9ab8898","key":"b","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"01314efa9ab8898c":{"id":"01314efa9ab8898c","key":"rotSpeedX","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"1314efa9ab8898c6":{"id":"1314efa9ab8898c6","key":"rotSpeedY","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"314efa9ab8898c6d":{"id":"314efa9ab8898c6d","key":"rotSpeedZ","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"14efa9ab8898c6d0":{"id":"14efa9ab8898c6d0","key":"scale","type":"param","valueType":"number","sketchId":"27080a78e01314ef"},"4efa9ab8898c6d0b":{"id":"4efa9ab8898c6d0b","key":"isWireframe","type":"param","valueType":"boolean","sketchId":"27080a78e01314ef"},"efa9ab8898c6d0bb":{"id":"efa9ab8898c6d0bb","key":"geomName","type":"param","valueType":"enum","sketchId":"27080a78e01314ef"},"ab8898c6d0bbafa1":{"id":"ab8898c6d0bbafa1","key":"opacity","type":"param","valueType":"number","sketchId":"9ab8898c6d0bbafa"},"b8898c6d0bbafa17":{"id":"b8898c6d0bbafa17","key":"speed","type":"param","valueType":"number","sketchId":"9ab8898c6d0bbafa"},"8898c6d0bbafa171":{"id":"8898c6d0bbafa171","key":"velocity","type":"param","valueType":"number","sketchId":"9ab8898c6d0bbafa"},"898c6d0bbafa1714":{"id":"898c6d0bbafa1714","key":"randomWalk","type":"param","valueType":"number","sketchId":"9ab8898c6d0bbafa"},"8c6d0bbafa17148c":{"id":"8c6d0bbafa17148c","key":"position","type":"param","valueType":"vector3","sketchId":"98c6d0bbafa17148","childNodeIds":["c6d0bbafa17148c2","6d0bbafa17148c27","d0bbafa17148c277"]},"c6d0bbafa17148c2":{"id":"c6d0bbafa17148c2","key":"x","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"6d0bbafa17148c27":{"id":"6d0bbafa17148c27","key":"y","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"d0bbafa17148c277":{"id":"d0bbafa17148c277","key":"z","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"0bbafa17148c2774":{"id":"0bbafa17148c2774","key":"color","type":"param","valueType":"rgb","sketchId":"98c6d0bbafa17148","childNodeIds":["bbafa17148c27741","bafa17148c277417","afa17148c277417b"]},"bbafa17148c27741":{"id":"bbafa17148c27741","key":"r","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"bafa17148c277417":{"id":"bafa17148c277417","key":"g","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"afa17148c277417b":{"id":"afa17148c277417b","key":"b","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"fa17148c277417ba":{"id":"fa17148c277417ba","key":"rotSpeedX","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"a17148c277417ba4":{"id":"a17148c277417ba4","key":"rotSpeedY","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"17148c277417ba49":{"id":"17148c277417ba49","key":"rotSpeedZ","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"7148c277417ba490":{"id":"7148c277417ba490","key":"scale","type":"param","valueType":"number","sketchId":"98c6d0bbafa17148"},"148c277417ba4902":{"id":"148c277417ba4902","key":"isWireframe","type":"param","valueType":"boolean","sketchId":"98c6d0bbafa17148"},"48c277417ba49022":{"id":"48c277417ba49022","key":"geomName","type":"param","valueType":"enum","sketchId":"98c6d0bbafa17148"},"c277417ba49022ad":{"id":"c277417ba49022ad","key":"position","type":"param","valueType":"vector3","sketchId":"8c277417ba49022a","childNodeIds":["277417ba49022add","77417ba49022add9","7417ba49022add94"]},"277417ba49022add":{"id":"277417ba49022add","key":"x","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"77417ba49022add9":{"id":"77417ba49022add9","key":"y","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"7417ba49022add94":{"id":"7417ba49022add94","key":"z","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"417ba49022add948":{"id":"417ba49022add948","key":"color","type":"param","valueType":"rgb","sketchId":"8c277417ba49022a","childNodeIds":["17ba49022add948d","7ba49022add948d8","ba49022add948d8b"]},"17ba49022add948d":{"id":"17ba49022add948d","key":"r","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"7ba49022add948d8":{"id":"7ba49022add948d8","key":"g","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"ba49022add948d8b":{"id":"ba49022add948d8b","key":"b","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"a49022add948d8be":{"id":"a49022add948d8be","key":"rotSpeedX","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"49022add948d8bea":{"id":"49022add948d8bea","key":"rotSpeedY","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"9022add948d8bea6":{"id":"9022add948d8bea6","key":"rotSpeedZ","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"022add948d8bea6e":{"id":"022add948d8bea6e","key":"scale","type":"param","valueType":"number","sketchId":"8c277417ba49022a"},"22add948d8bea6e3":{"id":"22add948d8bea6e3","key":"isWireframe","type":"param","valueType":"boolean","sketchId":"8c277417ba49022a"},"2add948d8bea6e3e":{"id":"2add948d8bea6e3e","key":"geomName","type":"param","valueType":"enum","sketchId":"8c277417ba49022a"},"dd948d8bea6e3e27":{"id":"dd948d8bea6e3e27","key":"position","type":"param","valueType":"vector3","sketchId":"add948d8bea6e3e2","childNodeIds":["d948d8bea6e3e27a","948d8bea6e3e27af","48d8bea6e3e27afa"]},"d948d8bea6e3e27a":{"id":"d948d8bea6e3e27a","key":"x","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"948d8bea6e3e27af":{"id":"948d8bea6e3e27af","key":"y","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"48d8bea6e3e27afa":{"id":"48d8bea6e3e27afa","key":"z","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"8d8bea6e3e27afab":{"id":"8d8bea6e3e27afab","key":"color","type":"param","valueType":"rgb","sketchId":"add948d8bea6e3e2","childNodeIds":["d8bea6e3e27afab7","8bea6e3e27afab72","bea6e3e27afab72f"]},"d8bea6e3e27afab7":{"id":"d8bea6e3e27afab7","key":"r","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"8bea6e3e27afab72":{"id":"8bea6e3e27afab72","key":"g","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"bea6e3e27afab72f":{"id":"bea6e3e27afab72f","key":"b","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"ea6e3e27afab72fb":{"id":"ea6e3e27afab72fb","key":"rotSpeedX","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"a6e3e27afab72fb7":{"id":"a6e3e27afab72fb7","key":"rotSpeedY","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"6e3e27afab72fb7d":{"id":"6e3e27afab72fb7d","key":"rotSpeedZ","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"e3e27afab72fb7db":{"id":"e3e27afab72fb7db","key":"scale","type":"param","valueType":"number","sketchId":"add948d8bea6e3e2"},"3e27afab72fb7db6":{"id":"3e27afab72fb7db6","key":"isWireframe","type":"param","valueType":"boolean","sketchId":"add948d8bea6e3e2"},"e27afab72fb7db6a":{"id":"e27afab72fb7db6a","key":"geomName","type":"param","valueType":"enum","sketchId":"add948d8bea6e3e2"}},"nodeValues":{"3738327080a78e01":0.09722222222222221,"738327080a78e013":0,"38327080a78e0131":0,"8327080a78e01314":0.5472222222222225,"327080a78e01314e":0.7638888888888895,"080a78e01314efa9":0,"80a78e01314efa9a":0.8421052631578949,"0a78e01314efa9ab":0.3157894736842106,"78e01314efa9ab88":0.9686274509803922,"8e01314efa9ab889":0,"e01314efa9ab8898":1,"01314efa9ab8898c":0.06944444444444431,"1314efa9ab8898c6":0.15277777777777768,"314efa9ab8898c6d":0,"14efa9ab8898c6d0":0.5,"4efa9ab8898c6d0b":true,"efa9ab8898c6d0bb":"icosa","ab8898c6d0bbafa1":1,"b8898c6d0bbafa17":50,"8898c6d0bbafa171":0,"898c6d0bbafa1714":0,"c6d0bbafa17148c2":1,"6d0bbafa17148c27":0,"d0bbafa17148c277":0,"bbafa17148c27741":0,"bafa17148c277417":0.9333333333333333,"afa17148c277417b":0.7843137254901961,"fa17148c277417ba":0.5,"a17148c277417ba4":0.5,"17148c277417ba49":0.5,"7148c277417ba490":0.5,"148c277417ba4902":true,"48c277417ba49022":"tetra","277417ba49022add":1,"77417ba49022add9":0.8421052631578947,"7417ba49022add94":0.3684210526315789,"17ba49022add948d":0.15294117647058825,"7ba49022add948d8":0.8196078431372549,"ba49022add948d8b":0.054901960784313725,"a49022add948d8be":0.06944444444444428,"49022add948d8bea":0.5,"9022add948d8bea6":0.5,"022add948d8bea6e":0.5,"22add948d8bea6e3":true,"2add948d8bea6e3e":"cube","d948d8bea6e3e27a":0,"948d8bea6e3e27af":0,"48d8bea6e3e27afa":0,"d8bea6e3e27afab7":0.9725490196078431,"8bea6e3e27afab72":0.984313725490196,"bea6e3e27afab72f":0,"ea6e3e27afab72fb":0.041666666666666706,"a6e3e27afab72fb7":0.5,"6e3e27afab72fb7d":0.2777777777777777,"e3e27afab72fb7db":0.6805555555555555,"3e27afab72fb7db6":true,"e27afab72fb7db6a":"octa"}},"app":{"sketchesDir":"sketches"}} \ No newline at end of file diff --git a/packages/example-project/sketches/solid/config.ts b/packages/example-project/sketches/solid/config.ts index 7741489a..79b67f2e 100644 --- a/packages/example-project/sketches/solid/config.ts +++ b/packages/example-project/sketches/solid/config.ts @@ -8,6 +8,12 @@ export default { valueType: 'vector3', defaultValue: [0, 0, 0], }, + { + key: 'color', + title: 'Color', + valueType: 'rgb', + defaultValue: [1, 1, 1], + }, { key: 'rotSpeedX', title: 'Rotation Speed X', diff --git a/packages/example-project/sketches/solid/index.ts b/packages/example-project/sketches/solid/index.ts index c0e1dee2..e32e2418 100644 --- a/packages/example-project/sketches/solid/index.ts +++ b/packages/example-project/sketches/solid/index.ts @@ -1,16 +1,18 @@ const { THREE } = window.HEDRON.dependencies const geomSize = 1 +const repositionVec = new THREE.Vector3(0.5, 0.5, 0.5) + export default class Solid { root = new THREE.Group() + color = new THREE.Color() + mat = new THREE.MeshBasicMaterial({ wireframe: true }) constructor() { // All sketches need root property to add things to this.meshes = {} - this.mat = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffffff }) - // Defining 5 geometries (the platonic solids!) const geoms = { cube: new THREE.BoxGeometry(geomSize, geomSize, geomSize), @@ -40,7 +42,13 @@ export default class Solid { this.root.rotation.y += params.rotSpeedY * baseSpeed * deltaFrame this.root.rotation.z += params.rotSpeedZ * baseSpeed * deltaFrame - this.root.position.set(...params.position) + // TODO: Won't need to do this once we have min/max values in the UI + this.root.position + .set(...params.position) + .sub(repositionVec) + .multiplyScalar(10) + + this.mat.color.setRGB(...params.color) // Update scale using params this.root.scale.set(params.scale, params.scale, params.scale) diff --git a/yarn.lock b/yarn.lock index a777a628..fcd7815d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1025,6 +1025,44 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.6.0": + version: 1.6.8 + resolution: "@floating-ui/core@npm:1.6.8" + dependencies: + "@floating-ui/utils": "npm:^0.2.8" + checksum: 10c0/d6985462aeccae7b55a2d3f40571551c8c42bf820ae0a477fc40ef462e33edc4f3f5b7f11b100de77c9b58ecb581670c5c3f46d0af82b5e30aa185c735257eb9 + languageName: node + linkType: hard + +"@floating-ui/dom@npm:^1.0.0": + version: 1.6.12 + resolution: "@floating-ui/dom@npm:1.6.12" + dependencies: + "@floating-ui/core": "npm:^1.6.0" + "@floating-ui/utils": "npm:^0.2.8" + checksum: 10c0/c67b39862175b175c6ac299ea970f17a22c7482cfdf3b1bc79313407bf0880188b022b878953fa69d3ce166ff2bd9ae57c86043e5dd800c262b470d877591b7d + languageName: node + linkType: hard + +"@floating-ui/react-dom@npm:^2.1.2": + version: 2.1.2 + resolution: "@floating-ui/react-dom@npm:2.1.2" + dependencies: + "@floating-ui/dom": "npm:^1.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10c0/e855131c74e68cab505f7f44f92cd4e2efab1c125796db3116c54c0859323adae4bf697bf292ee83ac77b9335a41ad67852193d7aeace90aa2e1c4a640cafa60 + languageName: node + linkType: hard + +"@floating-ui/utils@npm:^0.2.8": + version: 0.2.8 + resolution: "@floating-ui/utils@npm:0.2.8" + checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9 + languageName: node + linkType: hard + "@gar/promisify@npm:^1.1.3": version: 1.1.3 resolution: "@gar/promisify@npm:1.1.3" @@ -1039,6 +1077,7 @@ __metadata: "@chromatic-com/storybook": "npm:^1.8.0" "@electron-toolkit/preload": "npm:^3.0.1" "@electron-toolkit/utils": "npm:^3.0.0" + "@floating-ui/react-dom": "npm:^2.1.2" "@hedron/engine": "npm:^1.0.0-alpha.1" "@redux-devtools/extension": "npm:^3.3.0" "@storybook/addon-essentials": "npm:^8.2.9" @@ -1056,6 +1095,7 @@ __metadata: "@types/react": "npm:^18.3.3" "@types/react-dom": "npm:^18.3.0" "@types/three": "npm:^0.167.2" + "@uiw/react-color": "npm:^2.3.4" "@vitejs/plugin-react": "npm:^4.3.1" chokidar: "npm:^4.0.0" date-fns: "npm:^4.1.0" @@ -1078,7 +1118,7 @@ __metadata: three: "npm:^0.171.0" usehooks-ts: "npm:^3.1.0" vite: "npm:^5.3.1" - vite-tsconfig-paths: "npm:^5.0.1" + vite-tsconfig-paths: "npm:^5.1.4" zustand: "npm:^4.5.5" languageName: unknown linkType: soft @@ -3155,6 +3195,335 @@ __metadata: languageName: node linkType: hard +"@uiw/color-convert@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/color-convert@npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + checksum: 10c0/a0f37b022034065d24c633788d27c251cf4c0999856ac655c5eb471677faf662266e3707f7c1e79472c0a6ffd8c7e4255d4b3b295ddb621a902873253196312a + languageName: node + linkType: hard + +"@uiw/react-color-alpha@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-alpha@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-drag-event-interactive": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/590bb8234090dbdaebe15b7327b5fd4c9008e05f90231013a1c31d78293cc9c8a30ec17637587e42889721ec2ebc34de40756d546a37230c045661f66da9979a + languageName: node + linkType: hard + +"@uiw/react-color-block@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-block@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + "@uiw/react-color-swatch": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/302dbed40a2a3d61ee9b6273a83e8d5bd9e5c207a83eda9d5333c840ee7148114afecda941056d0abe44f52c9db5d9ebb134541d921652783bcc8dc2a2cb6dd5 + languageName: node + linkType: hard + +"@uiw/react-color-chrome@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-chrome@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + "@uiw/react-color-editable-input-hsla": "npm:2.3.4" + "@uiw/react-color-editable-input-rgba": "npm:2.3.4" + "@uiw/react-color-github": "npm:2.3.4" + "@uiw/react-color-hue": "npm:2.3.4" + "@uiw/react-color-saturation": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/c61dcc1d302e9136f35d2facd4a0225f922413cc5b9a528b49a901c08234e1012a4ec4f579dfb4b2d41af368347e48be67bbb88854b4b88751960cb31a82a399 + languageName: node + linkType: hard + +"@uiw/react-color-circle@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-circle@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-swatch": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/e6c07ec9fa3a1cff2c5d245bb803b7653e9dfb3ea38f78e033717fdbb5b5ff4199232cfa7abe552119db966582c48c63fb161ed0834d9c5ba48ab22ccf70db4a + languageName: node + linkType: hard + +"@uiw/react-color-colorful@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-colorful@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + "@uiw/react-color-hue": "npm:2.3.4" + "@uiw/react-color-saturation": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/36ae1ed4e6cdfb22316f0c5a45a0fee7d7f37a7e5e25b07d13e65efeeca906aced86e0b21cfbcd22842511dbcb7ed3e7f60e421739c41aa6c669fcef8597a4c7 + languageName: node + linkType: hard + +"@uiw/react-color-compact@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-compact@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + "@uiw/react-color-editable-input-rgba": "npm:2.3.4" + "@uiw/react-color-swatch": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/7cb5f3b3ce1e560b6fd2bc4ce47ca0fdd89023d4da887c1ed4f17e2a5f4522e0a158365a4b5ba6f79729d24ec8e1fbf9742e0beb03b08c79014e9ea0f8aeaea1 + languageName: node + linkType: hard + +"@uiw/react-color-editable-input-hsla@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-editable-input-hsla@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-editable-input-rgba": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/31bdc7f8386fd9e109b59b50f93ff93e77535e2a7c6e339ef7a54add36b948dae03bf22fe849673c38d55ad7943ee33f486ef70d505e7ac99940be85ba9be89a + languageName: node + linkType: hard + +"@uiw/react-color-editable-input-rgba@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-editable-input-rgba@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/07bfb4af5ac7e1e4856889d074b5240c396003a94047daab2abba5b5624ea14048f56eb6d2be82dd94e516cafa3990cdce1e79aac318b68b2fa76444f0b53622 + languageName: node + linkType: hard + +"@uiw/react-color-editable-input@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-editable-input@npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/0012308938399cf4e19e1e290b197ded86c3bd43e059f3f6b782404805ebfefd4168c8b773a2e213d4fea693526153829eb4485c9844326390ab2eaf980ddfa4 + languageName: node + linkType: hard + +"@uiw/react-color-github@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-github@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-swatch": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/f37ac1294313136b02dfc6bed67bf6ddc7b53e6783629e89424ca8996255fa54753577883754eefa73e9feba3c1f76a80c7a769771c7d834067c4387efe7efcf + languageName: node + linkType: hard + +"@uiw/react-color-hue@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-hue@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/d38237344fa381f6befb7a6d358cc8b16a59085dcd87197ef89fc21e8b097a0067af15073396a782fa053585be55b0ab03ee00ff57ce20d2090c722f8d6a98c9 + languageName: node + linkType: hard + +"@uiw/react-color-material@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-material@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + "@uiw/react-color-editable-input-rgba": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/cf76c638f9409aeead86e3755cf3553de8aa9f639aee541154dd4f093ec56c3830c5dcdb97cf84b2e6fd77f131c6fef6653dbac71b3dacf30354b5b72deadd4f + languageName: node + linkType: hard + +"@uiw/react-color-name@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-name@npm:2.3.4" + dependencies: + colors-named: "npm:^1.0.1" + colors-named-hex: "npm:^1.0.1" + peerDependencies: + "@babel/runtime": ">=7.19.0" + checksum: 10c0/9f3cf3f9cc140f343672537ffea9683757f4279d4434ae3a6829443437b5a21e33d1d818445e4465bb11344eb5b42b9112da43563d92b2003f07b3ffc72fd58d + languageName: node + linkType: hard + +"@uiw/react-color-saturation@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-saturation@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-drag-event-interactive": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/2d45c5b2064dbceab5586e41a3f2f9ce58e2348412300a6f6841f6ebe8c17e73afff7bcffc86bfb1570aee35bd287483a12a6f88232b3fb853dcbc719b072cd4 + languageName: node + linkType: hard + +"@uiw/react-color-shade-slider@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-shade-slider@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/c94bac67e4236e57e99c0bcc6c9f003d6b1b7117c1d7e4c8043a6acd378eb87493eccdf8a492a4f6c21ade10e39c3b856258c7e90ae93464bdfa761217526f24 + languageName: node + linkType: hard + +"@uiw/react-color-sketch@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-sketch@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + "@uiw/react-color-editable-input-rgba": "npm:2.3.4" + "@uiw/react-color-hue": "npm:2.3.4" + "@uiw/react-color-saturation": "npm:2.3.4" + "@uiw/react-color-swatch": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/7253448743d5eb093ad89c72ab8c3173539a8f7a7bf0182806a5cfe6d5f79dd1d0b908468e51959248e531d81c547bd5efdeda5208172acb70e94510390b75ae + languageName: node + linkType: hard + +"@uiw/react-color-slider@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-slider@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/b0a3bd6f092486f13fdc2cbf550007632749d42847b678d54e64d0f7d5428c9c77a20e0317a7722a4dffb1c67ee1b3549a07efbe117f209d433ee7d824398c2b + languageName: node + linkType: hard + +"@uiw/react-color-swatch@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-swatch@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/446225d87628c93509cf37988d41217dc9ba7523c9bc6d7bbb0604b4e2133018ffe3a458d4143979e4d88fb6d195f999fe14a613096288c5842d2f2bfe256053 + languageName: node + linkType: hard + +"@uiw/react-color-wheel@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color-wheel@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-drag-event-interactive": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/3d07510650330102208e9ce973462c70d979848b80efa1c064a3c370854f7248c30da36eff0903d41c196ca29d483c4a9f5204f9d5172a037120d43abd095813 + languageName: node + linkType: hard + +"@uiw/react-color@npm:^2.3.4": + version: 2.3.4 + resolution: "@uiw/react-color@npm:2.3.4" + dependencies: + "@uiw/color-convert": "npm:2.3.4" + "@uiw/react-color-alpha": "npm:2.3.4" + "@uiw/react-color-block": "npm:2.3.4" + "@uiw/react-color-chrome": "npm:2.3.4" + "@uiw/react-color-circle": "npm:2.3.4" + "@uiw/react-color-colorful": "npm:2.3.4" + "@uiw/react-color-compact": "npm:2.3.4" + "@uiw/react-color-editable-input": "npm:2.3.4" + "@uiw/react-color-editable-input-hsla": "npm:2.3.4" + "@uiw/react-color-editable-input-rgba": "npm:2.3.4" + "@uiw/react-color-github": "npm:2.3.4" + "@uiw/react-color-hue": "npm:2.3.4" + "@uiw/react-color-material": "npm:2.3.4" + "@uiw/react-color-name": "npm:2.3.4" + "@uiw/react-color-saturation": "npm:2.3.4" + "@uiw/react-color-shade-slider": "npm:2.3.4" + "@uiw/react-color-sketch": "npm:2.3.4" + "@uiw/react-color-slider": "npm:2.3.4" + "@uiw/react-color-swatch": "npm:2.3.4" + "@uiw/react-color-wheel": "npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/4b54a0eab3375d0200ef992c1a0391eb0b1b0fe4240dbc95e37f9ef9223be5012a7ed55cd20556170d644afa4ddc93c0c467eee5b64d836d2af5318289b7148d + languageName: node + linkType: hard + +"@uiw/react-drag-event-interactive@npm:2.3.4": + version: 2.3.4 + resolution: "@uiw/react-drag-event-interactive@npm:2.3.4" + peerDependencies: + "@babel/runtime": ">=7.19.0" + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 10c0/f55e6cc8bb57d01844a9c023e3056808914c66d43838df5e31fad71a8825f6cf4f036c41f383d319805c89973effd74f6a1ca96176d25985fc993f362d3029d9 + languageName: node + linkType: hard + "@ungap/structured-clone@npm:^1.2.0": version: 1.2.0 resolution: "@ungap/structured-clone@npm:1.2.0" @@ -4347,6 +4716,20 @@ __metadata: languageName: node linkType: hard +"colors-named-hex@npm:^1.0.1": + version: 1.0.2 + resolution: "colors-named-hex@npm:1.0.2" + checksum: 10c0/2c1e391d49efa7c9fc4ba27f39c70e5669064d819de69e8e935291f0e3585926c4b0765341f04b0cdd10acafadad8cff0b68cb4de247e735f0aceba1048b34e2 + languageName: node + linkType: hard + +"colors-named@npm:^1.0.1": + version: 1.0.2 + resolution: "colors-named@npm:1.0.2" + checksum: 10c0/78f2aa04c87f1c87d5181134aba38322dea2b36d5d88e4f1644fb73542004ecf67ec37aa308caad2737620d75dd3b4ba1431e62220dfdba4f6e5f4f3f17b5426 + languageName: node + linkType: hard + "columnify@npm:1.6.0": version: 1.6.0 resolution: "columnify@npm:1.6.0" @@ -12015,9 +12398,9 @@ __metadata: languageName: node linkType: hard -"vite-tsconfig-paths@npm:^5.0.1": - version: 5.1.3 - resolution: "vite-tsconfig-paths@npm:5.1.3" +"vite-tsconfig-paths@npm:^5.1.4": + version: 5.1.4 + resolution: "vite-tsconfig-paths@npm:5.1.4" dependencies: debug: "npm:^4.1.1" globrex: "npm:^0.1.2" @@ -12027,7 +12410,7 @@ __metadata: peerDependenciesMeta: vite: optional: true - checksum: 10c0/fb7480efa31fd50439f4a12c91bc953e5cc09d69fdc7eeb6ffff7cc796bc2c1f2c617c3abfdcbf5d7414848076cea9deb60bc002142f93b6e3131e5458760710 + checksum: 10c0/6228f23155ea25d92b1e1702284cf8dc52ad3c683c5ca691edd5a4c82d2913e7326d00708cef1cbfde9bb226261df0e0a12e03ef1d43b6a92d8f02b483ef37e3 languageName: node linkType: hard