diff --git a/src/renderer/colors.scss b/src/renderer/colors.scss index a7d4d3701..58a95f12d 100644 --- a/src/renderer/colors.scss +++ b/src/renderer/colors.scss @@ -18,6 +18,17 @@ } } +:root { + /* type colors */ + --type-color-directory: #805ad5; + --type-color-image: #d69e2e; + --type-color-number: #3182ce; + --type-color-string: #10b52c; + --type-color-torch: #dd6b20; + --type-color-onnx: #63b3ed; + --type-color-ncnn: #ed64a6; +} + :root[data-theme='dark'] { /* backgrounds */ --bg-800: var(--theme-800); @@ -316,4 +327,13 @@ 900: #151515, ) ); + + /* type colors */ + --type-color-directory: #db7f85; + --type-color-image: #67b6f4; + --type-color-number: #f9d600; + --type-color-string: #72e4b9; + --type-color-torch: #fbae2e; + --type-color-onnx: #ac9fdc; + --type-color-ncnn: #ae5354; } diff --git a/src/renderer/components/CustomEdge/CustomEdge.tsx b/src/renderer/components/CustomEdge/CustomEdge.tsx index 37e717574..ac6e6ea9a 100644 --- a/src/renderer/components/CustomEdge/CustomEdge.tsx +++ b/src/renderer/components/CustomEdge/CustomEdge.tsx @@ -11,7 +11,6 @@ import { BackendContext } from '../../contexts/BackendContext'; import { ExecutionContext, NodeExecutionStatus } from '../../contexts/ExecutionContext'; import { GlobalContext, GlobalVolatileContext } from '../../contexts/GlobalNodeState'; import { useSettings } from '../../contexts/SettingsContext'; -import { getTypeAccentColors } from '../../helpers/accentColors'; import { shadeColor } from '../../helpers/colorTools'; import { BREAKPOINT_RADIUS, @@ -21,6 +20,7 @@ import { } from '../../helpers/graphUtils'; import { useEdgeMenu } from '../../hooks/useEdgeMenu'; import './CustomEdge.scss'; +import { useTypeColor } from '../../hooks/useTypeColor'; const EDGE_CLASS = { RUNNING: 'running', @@ -179,7 +179,7 @@ export const CustomEdge = memo( c.typeState.functions.get(source)?.outputs.get(outputId) ); - const [accentColor] = getTypeAccentColors(type || definitionType); + const [accentColor] = useTypeColor(type || definitionType); const currentColor = selected ? shadeColor(accentColor, -40) : accentColor; const buttonSize = 32; diff --git a/src/renderer/components/NodeDocumentation/NodeDocs.tsx b/src/renderer/components/NodeDocumentation/NodeDocs.tsx index 376faebf8..50bbaffe2 100644 --- a/src/renderer/components/NodeDocumentation/NodeDocs.tsx +++ b/src/renderer/components/NodeDocumentation/NodeDocs.tsx @@ -25,7 +25,8 @@ import { prettyPrintType } from '../../../common/types/pretty'; import { withoutError, withoutNull } from '../../../common/types/util'; import { capitalize, isAutoInput } from '../../../common/util'; import { BackendContext } from '../../contexts/BackendContext'; -import { getCategoryAccentColor, getTypeAccentColors } from '../../helpers/accentColors'; +import { getCategoryAccentColor } from '../../helpers/accentColors'; +import { useTypeColor } from '../../hooks/useTypeColor'; import { IconFactory } from '../CustomIcons'; import { Markdown } from '../Markdown'; import { TypeTag } from '../TypeTag'; @@ -112,7 +113,7 @@ const InputOutputItem = memo( ? schema.iteratorInputs.some((i) => i.inputs.includes(item.id)) : schema.iteratorOutputs.some((i) => i.outputs.includes(item.id)); - const handleColors = getTypeAccentColors(type); + const handleColors = useTypeColor(type); const isFileInput = item.kind === 'file'; const supportedFileTypes = isFileInput ? item.filetypes : []; diff --git a/src/renderer/components/inputs/InputContainer.tsx b/src/renderer/components/inputs/InputContainer.tsx index 1ca00ab84..1c1786b8e 100644 --- a/src/renderer/components/inputs/InputContainer.tsx +++ b/src/renderer/components/inputs/InputContainer.tsx @@ -9,8 +9,9 @@ import { assertNever, stringifyTargetHandle } from '../../../common/util'; import { VALID, invalid } from '../../../common/Validity'; import { GlobalVolatileContext } from '../../contexts/GlobalNodeState'; import { InputContext } from '../../contexts/InputContext'; -import { getTypeAccentColors } from '../../helpers/accentColors'; +import { defaultColor } from '../../helpers/accentColors'; import { useSourceTypeColor } from '../../hooks/useSourceTypeColor'; +import { useTypeColor } from '../../hooks/useTypeColor'; import { Handle } from '../Handle'; import { Markdown } from '../Markdown'; import { TypeTag } from '../TypeTag'; @@ -64,7 +65,7 @@ export const InputHandle = memo( }); }, [connectingFrom, id, targetHandle, isValidConnection]); - const handleColors = getTypeAccentColors(connectableType); + const handleColors = useTypeColor(connectableType); const sourceTypeColor = useSourceTypeColor(targetHandle); @@ -81,7 +82,10 @@ export const InputHandle = memo( > { const [showTooltip, setShowTooltip] = useState(false); - const [typeAccentColor] = useMemo(() => getTypeAccentColors(NumberType.instance), []); + const [typeAccentColor] = useTypeColor(NumberType.instance); let customBackground; if (style.type === 'gradient') { diff --git a/src/renderer/components/node/BreakPoint.tsx b/src/renderer/components/node/BreakPoint.tsx index 63dca703e..069314e51 100644 --- a/src/renderer/components/node/BreakPoint.tsx +++ b/src/renderer/components/node/BreakPoint.tsx @@ -7,8 +7,8 @@ import { useContext, useContextSelector } from 'use-context-selector'; import { EdgeData, NodeData, OutputId } from '../../../common/common-types'; import { BackendContext } from '../../contexts/BackendContext'; import { GlobalContext, GlobalVolatileContext } from '../../contexts/GlobalNodeState'; -import { getTypeAccentColors } from '../../helpers/accentColors'; import { UseContextMenu, useContextMenu } from '../../hooks/useContextMenu'; +import { useTypeColor } from '../../hooks/useTypeColor'; const useBreakPointMenu = (id: string): UseContextMenu => { const { removeNodesById, removeEdgeBreakpoint } = useContext(GlobalContext); @@ -96,10 +96,7 @@ const BreakPointInner = memo(({ id }: NodeProps) => { [leftEdge, typeState] ); - const [accentColor] = useMemo( - () => getTypeAccentColors(type || definitionType), - [type, definitionType] - ); + const [accentColor] = useTypeColor(type || definitionType); return ( { isConnectable={false} position={Position.Left} style={{ - borderColor: sourceTypeColor || defaultColor, + borderColor: sourceTypeColor, borderRadius: isIterated ? '10%' : '50%', }} type="target" @@ -40,6 +42,46 @@ const InputHandle = memo(({ isIterated, targetHandle }: InputHandleProps) => { ); }); +interface OutputHandleProps { + output: Output; + nodeState: NodeState; + functionDefinition: FunctionDefinition | undefined; + isIterated: boolean; + sourceHandle: string; +} + +const OutputHandle = memo( + ({ output, nodeState, functionDefinition, isIterated, sourceHandle }: OutputHandleProps) => { + const functions = functionDefinition?.outputDefaults; + const definitionType = functions?.get(output.id) ?? NeverType.instance; + const type = nodeState.type.instance?.outputs.get(output.id); + + const handleColors = useTypeColor(type || definitionType); + + return ( + + + + ); + } +); + interface CollapsedHandlesProps { nodeState: NodeState; } @@ -98,36 +140,17 @@ export const CollapsedHandles = memo(({ nodeState }: CollapsedHandlesProps) => { if (!isConnected) { return null; } - - const functions = functionDefinition?.outputDefaults; - const definitionType = functions?.get(output.id) ?? NeverType.instance; - const type = nodeState.type.instance?.outputs.get(output.id); - const handleColors = getTypeAccentColors(type || definitionType); - const isIterated = iteratedOutputs.has(output.id); - const sourceHandle = stringifySourceHandle({ nodeId, outputId: output.id }); - return ( - - - + ); })} diff --git a/src/renderer/components/outputs/OutputContainer.tsx b/src/renderer/components/outputs/OutputContainer.tsx index 82a1d6694..6c8dfaa56 100644 --- a/src/renderer/components/outputs/OutputContainer.tsx +++ b/src/renderer/components/outputs/OutputContainer.tsx @@ -7,7 +7,7 @@ import { Output, OutputId } from '../../../common/common-types'; import { stringifySourceHandle } from '../../../common/util'; import { VALID, invalid } from '../../../common/Validity'; import { GlobalVolatileContext } from '../../contexts/GlobalNodeState'; -import { getTypeAccentColors } from '../../helpers/accentColors'; +import { useTypeColor } from '../../hooks/useTypeColor'; import { Handle } from '../Handle'; import { TypeTags } from '../TypeTag'; @@ -53,7 +53,7 @@ export const OutputHandle = memo( }); }, [connectingFrom, id, sourceHandle, isValidConnection]); - const handleColors = getTypeAccentColors(type || definitionType); + const handleColors = useTypeColor(type || definitionType); return (
{ +const getComputedColor = (color: string) => + getComputedStyle(document.documentElement).getPropertyValue(color); + +const colorList = () => { const scope = getChainnerScope(); return [ - { type: evaluate(new NamedExpression('Directory'), scope), color: '#805AD5' }, - { type: evaluate(new NamedExpression('Image'), scope), color: '#D69E2E' }, - { type: NumberType.instance, color: '#3182CE' }, - { type: StringType.instance, color: '#10b52c' }, - { type: evaluate(new NamedExpression('PyTorchModel'), scope), color: '#DD6B20' }, - { type: evaluate(new NamedExpression('OnnxModel'), scope), color: '#63B3ED' }, - { type: evaluate(new NamedExpression('NcnnNetwork'), scope), color: '#ED64A6' }, + { + type: evaluate(new NamedExpression('Directory'), scope), + color: getComputedColor('--type-color-directory'), + }, + { + type: evaluate(new NamedExpression('Image'), scope), + color: getComputedColor('--type-color-image'), + }, + { type: NumberType.instance, color: getComputedColor('--type-color-number') }, + { type: StringType.instance, color: getComputedColor('--type-color-string') }, + { + type: evaluate(new NamedExpression('PyTorchModel'), scope), + color: getComputedColor('--type-color-torch'), + }, + { + type: evaluate(new NamedExpression('OnnxModel'), scope), + color: getComputedColor('--type-color-onnx'), + }, + { + type: evaluate(new NamedExpression('NcnnNetwork'), scope), + color: getComputedColor('--type-color-ncnn'), + }, ]; -}); +}; const defaultColorList = [defaultColor] as const; diff --git a/src/renderer/hooks/useSourceTypeColor.ts b/src/renderer/hooks/useSourceTypeColor.ts index bfbce1999..20c64e555 100644 --- a/src/renderer/hooks/useSourceTypeColor.ts +++ b/src/renderer/hooks/useSourceTypeColor.ts @@ -5,7 +5,7 @@ import { NodeData } from '../../common/common-types'; import { parseSourceHandle } from '../../common/util'; import { BackendContext } from '../contexts/BackendContext'; import { GlobalVolatileContext } from '../contexts/GlobalNodeState'; -import { defaultColor, getTypeAccentColors } from '../helpers/accentColors'; +import { useTypeColor } from './useTypeColor'; export const useSourceTypeColor = (targetHandle: string) => { const { functionDefinitions } = useContext(BackendContext); @@ -17,27 +17,24 @@ export const useSourceTypeColor = (targetHandle: string) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [edgeChanges, getEdges, targetHandle]); - const sourceTypeColor = useMemo(() => { + const sourceType = useMemo(() => { if (sourceHandle) { const source = parseSourceHandle(sourceHandle); const sourceNode: Node | undefined = getNode(source.nodeId); if (sourceNode) { const sourceDef = functionDefinitions.get(sourceNode.data.schemaId); if (!sourceDef) { - return defaultColor; + return; } - const sourceType = + return ( typeState.functions.get(source.nodeId)?.outputs.get(source.outputId) ?? - sourceDef.outputDefaults.get(source.outputId); - if (!sourceType) { - return defaultColor; - } - return getTypeAccentColors(sourceType)[0]; + sourceDef.outputDefaults.get(source.outputId) + ); } - return defaultColor; } - return null; }, [sourceHandle, functionDefinitions, typeState, getNode]); - return sourceTypeColor; + const sourceTypeColor = useTypeColor(sourceType); + + return sourceTypeColor[0]; }; diff --git a/src/renderer/hooks/useTypeColor.ts b/src/renderer/hooks/useTypeColor.ts new file mode 100644 index 000000000..e1f9c7312 --- /dev/null +++ b/src/renderer/hooks/useTypeColor.ts @@ -0,0 +1,10 @@ +import { Type } from '@chainner/navi'; +import { useMemo } from 'react'; +import { useSettings } from '../contexts/SettingsContext'; +import { defaultColor, getTypeAccentColors } from '../helpers/accentColors'; + +export const useTypeColor = (type: Type | undefined) => { + const { theme } = useSettings(); + // eslint-disable-next-line react-hooks/exhaustive-deps + return useMemo(() => (type ? getTypeAccentColors(type) : [defaultColor]), [type, theme]); +};