From 9fc6bd7bf9890c2ea7b05abaf8e363d3f3a0010c Mon Sep 17 00:00:00 2001 From: SorsOps <80043879+SorsOps@users.noreply.github.com> Date: Wed, 22 Nov 2023 15:11:31 +0200 Subject: [PATCH] Fix subtraction (#169) --- .changeset/calm-rice-invent.md | 6 ++++ .../components/flow/DropPanel/PanelItems.tsx | 5 +++ .../src/components/flow/nodes/index.ts | 2 ++ .../flow/nodes/string/stringify.tsx | 31 +++++++++++++++++++ .../src/components/flow/wrapper/node.tsx | 2 +- .../graph-engine/src/nodes/math/subtract.ts | 7 +++++ .../graph-engine/src/nodes/string/index.ts | 10 +++++- .../src/nodes/string/stringify.ts | 20 ++++++++++++ packages/graph-engine/src/types.ts | 1 + 9 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 .changeset/calm-rice-invent.md create mode 100644 packages/graph-editor/src/components/flow/nodes/string/stringify.tsx create mode 100644 packages/graph-engine/src/nodes/string/stringify.ts diff --git a/.changeset/calm-rice-invent.md b/.changeset/calm-rice-invent.md new file mode 100644 index 00000000..541bd56d --- /dev/null +++ b/.changeset/calm-rice-invent.md @@ -0,0 +1,6 @@ +--- +"@tokens-studio/graph-editor": patch +"@tokens-studio/graph-engine-ui": patch +--- + +Add support for stringify node, fix an issue with subtract on initial load diff --git a/packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx b/packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx index 6dec2c2c..1281cf4e 100644 --- a/packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx +++ b/packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx @@ -497,6 +497,11 @@ export const defaultPanelItems: PanelGroup[] = [ icon: '^$', text: 'Regex', }, + { + type: NodeTypes.STRINGIFY, + icon: '"a"', + text: 'Stringify', + }, ], }, { diff --git a/packages/graph-editor/src/components/flow/nodes/index.ts b/packages/graph-editor/src/components/flow/nodes/index.ts index b7bd4386..bedf77ce 100644 --- a/packages/graph-editor/src/components/flow/nodes/index.ts +++ b/packages/graph-editor/src/components/flow/nodes/index.ts @@ -48,6 +48,7 @@ import UpperNode from './string/upperCaseNode.tsx'; import advancedBlend from './color/advancedBlend.tsx'; import arrayIndex from './array/arrayIndex.tsx'; import blendNode from './color/blendNode.tsx'; +import stringifyNode from './string/stringify.tsx'; import cssMapNode from './output/cssMapNode.tsx'; import extract from './color/extract.tsx'; import geometricNode from './series/geometricNode.tsx'; @@ -200,4 +201,5 @@ export const { ContrastingFromSetNode, colorNameNode, NearestTokensNode, + stringifyNode, ]); diff --git a/packages/graph-editor/src/components/flow/nodes/string/stringify.tsx b/packages/graph-editor/src/components/flow/nodes/string/stringify.tsx new file mode 100644 index 00000000..12b75cf0 --- /dev/null +++ b/packages/graph-editor/src/components/flow/nodes/string/stringify.tsx @@ -0,0 +1,31 @@ +import { WrapNode, useNode } from '../../wrapper/nodeV2.tsx'; +import { node } from '@tokens-studio/graph-engine/nodes/string/stringify.js'; +import { Stack, Text } from '@tokens-studio/ui'; +import React from 'react'; +import { Handle, HandleContainer } from '../../handles.tsx'; +import { PreviewAny } from '../../preview/any.tsx'; + +export const BasicNode = () => { + const { input, output } = useNode(); + return ( + + + + Input + + + + + + Output + + + + + ); +}; + +export default WrapNode(BasicNode, { + ...node, + title: 'Stringify', +}); diff --git a/packages/graph-editor/src/components/flow/wrapper/node.tsx b/packages/graph-editor/src/components/flow/wrapper/node.tsx index a6884d33..ec0765b7 100644 --- a/packages/graph-editor/src/components/flow/wrapper/node.tsx +++ b/packages/graph-editor/src/components/flow/wrapper/node.tsx @@ -247,7 +247,7 @@ export const Node = (props: NodeProps) => { value={{ collapsed, hide: !showContent }} > - + {title && ( <> { * @returns */ export const process = (input: MappedInput) => { + if (input.inputs.length == 0) { + return 0; + } + if (input.inputs.length == 1) { + return input.inputs[0].value; + } + const vals = input.inputs.slice(1); return vals.reduce((acc, x) => acc - x.value, input.inputs[0].value); }; diff --git a/packages/graph-engine/src/nodes/string/index.ts b/packages/graph-engine/src/nodes/string/index.ts index 0d95a7ed..cce50c15 100644 --- a/packages/graph-engine/src/nodes/string/index.ts +++ b/packages/graph-engine/src/nodes/string/index.ts @@ -3,5 +3,13 @@ import { node as joinString } from "./join.js"; import { node as regex } from "./regex.js"; import { node as uppercase } from "./uppercase.js"; import { node as split } from "./split.js"; +import { node as stringify } from "./stringify.js"; -export const nodes = [lowercase, joinString, regex, uppercase, split]; +export const nodes = [ + lowercase, + stringify, + joinString, + regex, + uppercase, + split, +]; diff --git a/packages/graph-engine/src/nodes/string/stringify.ts b/packages/graph-engine/src/nodes/string/stringify.ts new file mode 100644 index 00000000..601c11ca --- /dev/null +++ b/packages/graph-engine/src/nodes/string/stringify.ts @@ -0,0 +1,20 @@ +import { NodeDefinition, NodeTypes } from "../../types.js"; + +export const type = NodeTypes.STRINGIFY; + +export const process = (input) => { + switch (typeof input.input) { + case "string": + return input.input; + case "object": + return JSON.stringify(input.input); + case "undefined": + return ""; + default: + return String(input.input); + } +}; +export const node: NodeDefinition = { + type, + process, +}; diff --git a/packages/graph-engine/src/types.ts b/packages/graph-engine/src/types.ts index bb09bb4f..0761f325 100644 --- a/packages/graph-engine/src/types.ts +++ b/packages/graph-engine/src/types.ts @@ -162,6 +162,7 @@ export enum NodeTypes { REGEX = "studio.tokens.string.regex", PASS_UNIT = "studio.tokens.typing.passUnit", PARSE_UNIT = "studio.tokens.typing.parseUnit", + STRINGIFY = "studio.tokens.string.stringify", //Accessibility CONTRAST = "studio.tokens.accessibility.contrast",