From 40a3e13f25774ceeb7c384402c8dff2f7baacc48 Mon Sep 17 00:00:00 2001 From: Joey Ballentine Date: Tue, 14 May 2024 02:04:57 -0400 Subject: [PATCH 1/4] Make type colors themeable --- src/renderer/colors.scss | 27 ++++++++++++++ .../components/CustomEdge/CustomEdge.tsx | 8 +++- .../components/NodeDocumentation/NodeDocs.tsx | 8 +++- .../components/inputs/InputContainer.tsx | 8 +++- .../inputs/elements/StyledSlider.tsx | 5 ++- src/renderer/components/node/BreakPoint.tsx | 5 ++- .../components/outputs/OutputContainer.tsx | 8 +++- src/renderer/helpers/accentColors.ts | 37 ++++++++++++++----- 8 files changed, 88 insertions(+), 18 deletions(-) diff --git a/src/renderer/colors.scss b/src/renderer/colors.scss index a7d4d37016..bd6897db00 100644 --- a/src/renderer/colors.scss +++ b/src/renderer/colors.scss @@ -70,6 +70,15 @@ --header-bg: var(--bg-800); --chain-editor-bg: var(--bg-800); --node-selector-bg: var(--bg-800); + + /* 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='light'] { @@ -124,6 +133,15 @@ --header-bg: var(--bg-800); --chain-editor-bg: var(--bg-800); --node-selector-bg: var(--bg-800); + + /* 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; } // Default theme (copied from Chakra UI) @@ -316,4 +334,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 37e717574c..1f0ba68eaa 100644 --- a/src/renderer/components/CustomEdge/CustomEdge.tsx +++ b/src/renderer/components/CustomEdge/CustomEdge.tsx @@ -82,7 +82,7 @@ export const CustomEdge = memo( (c) => c.effectivelyDisabledNodes ); const { paused, getNodeStatus } = useContext(ExecutionContext); - const { animateChain } = useSettings(); + const { animateChain, theme } = useSettings(); const sourceStatus = getNodeStatus(source); const targetStatus = getNodeStatus(target); @@ -179,7 +179,11 @@ export const CustomEdge = memo( c.typeState.functions.get(source)?.outputs.get(outputId) ); - const [accentColor] = getTypeAccentColors(type || definitionType); + const [accentColor] = useMemo( + () => getTypeAccentColors(type || definitionType), + // eslint-disable-next-line react-hooks/exhaustive-deps + [type, definitionType, theme] + ); 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 376faebf87..0474ccc9da 100644 --- a/src/renderer/components/NodeDocumentation/NodeDocs.tsx +++ b/src/renderer/components/NodeDocumentation/NodeDocs.tsx @@ -14,7 +14,7 @@ import { VStack, useMediaQuery, } from '@chakra-ui/react'; -import { memo } from 'react'; +import { memo, useMemo } from 'react'; import { useContext } from 'use-context-selector'; import { Condition, Input, NodeSchema, Output, TextInput } from '../../../common/common-types'; import { isTautology } from '../../../common/nodes/condition'; @@ -25,6 +25,7 @@ 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 { useSettings } from '../../contexts/SettingsContext'; import { getCategoryAccentColor, getTypeAccentColors } from '../../helpers/accentColors'; import { IconFactory } from '../CustomIcons'; import { Markdown } from '../Markdown'; @@ -101,6 +102,8 @@ interface OutputItemProps extends InputOutputItemProps { const InputOutputItem = memo( ({ type, kind, item, condition, schema }: InputItemProps | OutputItemProps) => { + const { theme } = useSettings(); + const isOptional = 'optional' in item && item.optional; if (isOptional) { // eslint-disable-next-line no-param-reassign @@ -112,7 +115,8 @@ 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); + // eslint-disable-next-line react-hooks/exhaustive-deps + const handleColors = useMemo(() => getTypeAccentColors(type), [type, theme]); 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 1ca00ab84c..cb8abc9468 100644 --- a/src/renderer/components/inputs/InputContainer.tsx +++ b/src/renderer/components/inputs/InputContainer.tsx @@ -9,6 +9,7 @@ import { assertNever, stringifyTargetHandle } from '../../../common/util'; import { VALID, invalid } from '../../../common/Validity'; import { GlobalVolatileContext } from '../../contexts/GlobalNodeState'; import { InputContext } from '../../contexts/InputContext'; +import { useSettings } from '../../contexts/SettingsContext'; import { getTypeAccentColors } from '../../helpers/accentColors'; import { useSourceTypeColor } from '../../hooks/useSourceTypeColor'; import { Handle } from '../Handle'; @@ -33,6 +34,7 @@ export const InputHandle = memo( isConnected, }: React.PropsWithChildren) => { const { isValidConnection, useConnectingFrom } = useContext(GlobalVolatileContext); + const { theme } = useSettings(); const [connectingFrom] = useConnectingFrom; const targetHandle = stringifyTargetHandle({ nodeId: id, inputId }); @@ -64,7 +66,11 @@ export const InputHandle = memo( }); }, [connectingFrom, id, targetHandle, isValidConnection]); - const handleColors = getTypeAccentColors(connectableType); + const handleColors = useMemo( + () => getTypeAccentColors(connectableType), + // eslint-disable-next-line react-hooks/exhaustive-deps + [connectableType, theme] + ); const sourceTypeColor = useSourceTypeColor(targetHandle); diff --git a/src/renderer/components/inputs/elements/StyledSlider.tsx b/src/renderer/components/inputs/elements/StyledSlider.tsx index 75cee1804f..492b2d152c 100644 --- a/src/renderer/components/inputs/elements/StyledSlider.tsx +++ b/src/renderer/components/inputs/elements/StyledSlider.tsx @@ -10,6 +10,7 @@ import { useColorModeValue, } from '@chakra-ui/react'; import { MouseEventHandler, memo, useMemo, useState } from 'react'; +import { useSettings } from '../../../contexts/SettingsContext'; import { getTypeAccentColors } from '../../../helpers/accentColors'; export interface Scale { @@ -142,8 +143,10 @@ export const StyledSlider = memo( onContextMenu, }: StyledSliderProps) => { const [showTooltip, setShowTooltip] = useState(false); + const { theme } = useSettings(); - const [typeAccentColor] = useMemo(() => getTypeAccentColors(NumberType.instance), []); + // eslint-disable-next-line react-hooks/exhaustive-deps + const [typeAccentColor] = useMemo(() => getTypeAccentColors(NumberType.instance), [theme]); let customBackground; if (style.type === 'gradient') { diff --git a/src/renderer/components/node/BreakPoint.tsx b/src/renderer/components/node/BreakPoint.tsx index 63dca703e4..e50ac9bb20 100644 --- a/src/renderer/components/node/BreakPoint.tsx +++ b/src/renderer/components/node/BreakPoint.tsx @@ -7,6 +7,7 @@ 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 { useSettings } from '../../contexts/SettingsContext'; import { getTypeAccentColors } from '../../helpers/accentColors'; import { UseContextMenu, useContextMenu } from '../../hooks/useContextMenu'; @@ -51,6 +52,7 @@ const BreakPointInner = memo(({ id }: NodeProps) => { const { edgeChanges } = useContext(GlobalVolatileContext); const { removeNodesById, removeEdgeBreakpoint } = useContext(GlobalContext); const { functionDefinitions } = useContext(BackendContext); + const { theme } = useSettings(); const menu = useBreakPointMenu(id); @@ -98,7 +100,8 @@ const BreakPointInner = memo(({ id }: NodeProps) => { const [accentColor] = useMemo( () => getTypeAccentColors(type || definitionType), - [type, definitionType] + // eslint-disable-next-line react-hooks/exhaustive-deps + [type, definitionType, theme] ); return ( diff --git a/src/renderer/components/outputs/OutputContainer.tsx b/src/renderer/components/outputs/OutputContainer.tsx index 82a1d6694e..ca273de68a 100644 --- a/src/renderer/components/outputs/OutputContainer.tsx +++ b/src/renderer/components/outputs/OutputContainer.tsx @@ -7,6 +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 { useSettings } from '../../contexts/SettingsContext'; import { getTypeAccentColors } from '../../helpers/accentColors'; import { Handle } from '../Handle'; import { TypeTags } from '../TypeTag'; @@ -22,6 +23,7 @@ export interface OutputHandleProps { export const OutputHandle = memo( ({ id, outputId, isIterated, definitionType, type, isConnected }: OutputHandleProps) => { + const { theme } = useSettings(); const { isValidConnection, useConnectingFrom } = useContext(GlobalVolatileContext); const [connectingFrom] = useConnectingFrom; @@ -53,7 +55,11 @@ export const OutputHandle = memo( }); }, [connectingFrom, id, sourceHandle, isValidConnection]); - const handleColors = getTypeAccentColors(type || definitionType); + const handleColors = useMemo( + () => getTypeAccentColors(type || definitionType), + // eslint-disable-next-line react-hooks/exhaustive-deps + [type, definitionType, theme] + ); 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; From 64c5578b3330c028ff59be44197c39c29912de66 Mon Sep 17 00:00:00 2001 From: Joey Ballentine Date: Sat, 18 May 2024 15:29:33 -0400 Subject: [PATCH 2/4] Move theme color selection to hook --- .../components/CustomEdge/CustomEdge.tsx | 8 +- .../components/NodeDocumentation/NodeDocs.tsx | 11 +-- .../components/inputs/InputContainer.tsx | 16 ++-- .../inputs/elements/StyledSlider.tsx | 9 +-- src/renderer/components/node/BreakPoint.tsx | 8 +- .../components/node/CollapsedHandles.tsx | 81 ++++++++++++------- .../components/outputs/OutputContainer.tsx | 10 +-- src/renderer/hooks/useSourceTypeColor.ts | 21 +++-- src/renderer/hooks/useTypeColor.ts | 10 +++ 9 files changed, 91 insertions(+), 83 deletions(-) create mode 100644 src/renderer/hooks/useTypeColor.ts diff --git a/src/renderer/components/CustomEdge/CustomEdge.tsx b/src/renderer/components/CustomEdge/CustomEdge.tsx index 1f0ba68eaa..4aac14c5d5 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,11 +179,7 @@ export const CustomEdge = memo( c.typeState.functions.get(source)?.outputs.get(outputId) ); - const [accentColor] = useMemo( - () => getTypeAccentColors(type || definitionType), - // eslint-disable-next-line react-hooks/exhaustive-deps - [type, definitionType, theme] - ); + 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 0474ccc9da..50bbaffe2b 100644 --- a/src/renderer/components/NodeDocumentation/NodeDocs.tsx +++ b/src/renderer/components/NodeDocumentation/NodeDocs.tsx @@ -14,7 +14,7 @@ import { VStack, useMediaQuery, } from '@chakra-ui/react'; -import { memo, useMemo } from 'react'; +import { memo } from 'react'; import { useContext } from 'use-context-selector'; import { Condition, Input, NodeSchema, Output, TextInput } from '../../../common/common-types'; import { isTautology } from '../../../common/nodes/condition'; @@ -25,8 +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 { useSettings } from '../../contexts/SettingsContext'; -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'; @@ -102,8 +102,6 @@ interface OutputItemProps extends InputOutputItemProps { const InputOutputItem = memo( ({ type, kind, item, condition, schema }: InputItemProps | OutputItemProps) => { - const { theme } = useSettings(); - const isOptional = 'optional' in item && item.optional; if (isOptional) { // eslint-disable-next-line no-param-reassign @@ -115,8 +113,7 @@ const InputOutputItem = memo( ? schema.iteratorInputs.some((i) => i.inputs.includes(item.id)) : schema.iteratorOutputs.some((i) => i.outputs.includes(item.id)); - // eslint-disable-next-line react-hooks/exhaustive-deps - const handleColors = useMemo(() => getTypeAccentColors(type), [type, theme]); + 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 cb8abc9468..1c1786b8e9 100644 --- a/src/renderer/components/inputs/InputContainer.tsx +++ b/src/renderer/components/inputs/InputContainer.tsx @@ -9,9 +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 { useSettings } from '../../contexts/SettingsContext'; -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'; @@ -34,7 +34,6 @@ export const InputHandle = memo( isConnected, }: React.PropsWithChildren) => { const { isValidConnection, useConnectingFrom } = useContext(GlobalVolatileContext); - const { theme } = useSettings(); const [connectingFrom] = useConnectingFrom; const targetHandle = stringifyTargetHandle({ nodeId: id, inputId }); @@ -66,11 +65,7 @@ export const InputHandle = memo( }); }, [connectingFrom, id, targetHandle, isValidConnection]); - const handleColors = useMemo( - () => getTypeAccentColors(connectableType), - // eslint-disable-next-line react-hooks/exhaustive-deps - [connectableType, theme] - ); + const handleColors = useTypeColor(connectableType); const sourceTypeColor = useSourceTypeColor(targetHandle); @@ -87,7 +82,10 @@ export const InputHandle = memo( > { const [showTooltip, setShowTooltip] = useState(false); - const { theme } = useSettings(); - // eslint-disable-next-line react-hooks/exhaustive-deps - const [typeAccentColor] = useMemo(() => getTypeAccentColors(NumberType.instance), [theme]); + 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 e50ac9bb20..1692194a31 100644 --- a/src/renderer/components/node/BreakPoint.tsx +++ b/src/renderer/components/node/BreakPoint.tsx @@ -8,8 +8,8 @@ import { EdgeData, NodeData, OutputId } from '../../../common/common-types'; import { BackendContext } from '../../contexts/BackendContext'; import { GlobalContext, GlobalVolatileContext } from '../../contexts/GlobalNodeState'; import { useSettings } from '../../contexts/SettingsContext'; -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); @@ -98,11 +98,7 @@ const BreakPointInner = memo(({ id }: NodeProps) => { [leftEdge, typeState] ); - const [accentColor] = useMemo( - () => getTypeAccentColors(type || definitionType), - // eslint-disable-next-line react-hooks/exhaustive-deps - [type, definitionType, theme] - ); + 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 ca273de68a..6c8dfaa56a 100644 --- a/src/renderer/components/outputs/OutputContainer.tsx +++ b/src/renderer/components/outputs/OutputContainer.tsx @@ -7,8 +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 { useSettings } from '../../contexts/SettingsContext'; -import { getTypeAccentColors } from '../../helpers/accentColors'; +import { useTypeColor } from '../../hooks/useTypeColor'; import { Handle } from '../Handle'; import { TypeTags } from '../TypeTag'; @@ -23,7 +22,6 @@ export interface OutputHandleProps { export const OutputHandle = memo( ({ id, outputId, isIterated, definitionType, type, isConnected }: OutputHandleProps) => { - const { theme } = useSettings(); const { isValidConnection, useConnectingFrom } = useContext(GlobalVolatileContext); const [connectingFrom] = useConnectingFrom; @@ -55,11 +53,7 @@ export const OutputHandle = memo( }); }, [connectingFrom, id, sourceHandle, isValidConnection]); - const handleColors = useMemo( - () => getTypeAccentColors(type || definitionType), - // eslint-disable-next-line react-hooks/exhaustive-deps - [type, definitionType, theme] - ); + const handleColors = useTypeColor(type || definitionType); return (
{ 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 0000000000..e1f9c73121 --- /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]); +}; From 2a7286b3c163243f8d80106d6c2d4e738d60fa90 Mon Sep 17 00:00:00 2001 From: Joey Ballentine Date: Sat, 18 May 2024 15:30:31 -0400 Subject: [PATCH 3/4] move common type colors to root selector --- src/renderer/colors.scss | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/src/renderer/colors.scss b/src/renderer/colors.scss index bd6897db00..58a95f12dc 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); @@ -70,15 +81,6 @@ --header-bg: var(--bg-800); --chain-editor-bg: var(--bg-800); --node-selector-bg: var(--bg-800); - - /* 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='light'] { @@ -133,15 +135,6 @@ --header-bg: var(--bg-800); --chain-editor-bg: var(--bg-800); --node-selector-bg: var(--bg-800); - - /* 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; } // Default theme (copied from Chakra UI) From a6e8773cbc1a5cd54171335ae1dcc5c938589dd1 Mon Sep 17 00:00:00 2001 From: Joey Ballentine Date: Sat, 18 May 2024 16:01:40 -0400 Subject: [PATCH 4/4] remove unused vars --- src/renderer/components/CustomEdge/CustomEdge.tsx | 2 +- src/renderer/components/node/BreakPoint.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/renderer/components/CustomEdge/CustomEdge.tsx b/src/renderer/components/CustomEdge/CustomEdge.tsx index 4aac14c5d5..ac6e6ea9ae 100644 --- a/src/renderer/components/CustomEdge/CustomEdge.tsx +++ b/src/renderer/components/CustomEdge/CustomEdge.tsx @@ -82,7 +82,7 @@ export const CustomEdge = memo( (c) => c.effectivelyDisabledNodes ); const { paused, getNodeStatus } = useContext(ExecutionContext); - const { animateChain, theme } = useSettings(); + const { animateChain } = useSettings(); const sourceStatus = getNodeStatus(source); const targetStatus = getNodeStatus(target); diff --git a/src/renderer/components/node/BreakPoint.tsx b/src/renderer/components/node/BreakPoint.tsx index 1692194a31..069314e517 100644 --- a/src/renderer/components/node/BreakPoint.tsx +++ b/src/renderer/components/node/BreakPoint.tsx @@ -7,7 +7,6 @@ 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 { useSettings } from '../../contexts/SettingsContext'; import { UseContextMenu, useContextMenu } from '../../hooks/useContextMenu'; import { useTypeColor } from '../../hooks/useTypeColor'; @@ -52,7 +51,6 @@ const BreakPointInner = memo(({ id }: NodeProps) => { const { edgeChanges } = useContext(GlobalVolatileContext); const { removeNodesById, removeEdgeBreakpoint } = useContext(GlobalContext); const { functionDefinitions } = useContext(BackendContext); - const { theme } = useSettings(); const menu = useBreakPointMenu(id);