Add "data-flume-node-type" attribute to the Node <div> (#188)

* Add "data-flume-node-type" attribute to the Node <div> * Add the node type, as defined in the Flume config, as a "data-flume-node-type" attribute to the Node <div> * Added documentation on theming capabilities --------- Co-authored-by: Mark Nguyen <[email protected]> Co-authored-by: Christopher Patty <[email protected]>
chrisjpatty · Mar 19, 2023 · 5382a6c · 5382a6c
1 parent c4aad9c
commit 5382a6c
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 5 deletions.
diff --git a/docs/components/DynamicThemingExample.js b/docs/components/DynamicThemingExample.js
@@ -0,0 +1,107 @@
+import React from 'react'
+import { Colors, Controls, FlumeConfig, NodeEditor } from "flume";
+
+const defaultNodes = {
+  "RaOIu-i1Qo": {
+    id: "RaOIu-i1Qo",
+    x: -282.375,
+    y: -77.6640625,
+    type: "number",
+    width: 140,
+    connections: { inputs: {}, outputs: { number: [] } },
+    inputData: { number: { number: 0 } }
+  },
+  "GGx-8iFtPP": {
+    id: "GGx-8iFtPP",
+    x: -65.3828125,
+    y: -109.6640625,
+    type: "addNumbers",
+    width: 140,
+    connections: { inputs: {}, outputs: {} },
+    inputData: { num1: { number: 0 }, num2: { number: 0 } }
+  },
+  Esjqq_aoSE: {
+    id: "Esjqq_aoSE",
+    x: 152.625,
+    y: -84.6640625,
+    type: "string",
+    width: 140,
+    connections: { inputs: {}, outputs: {} },
+    inputData: { string: { string: "" } }
+  }
+};
+
+const config = new FlumeConfig()
+  .addPortType({
+    type: "number",
+    name: "number",
+    label: "Number",
+    color: Colors.red,
+    controls: [
+      Controls.number({
+        name: "number",
+        label: "Number"
+      })
+    ]
+  })
+  .addPortType({
+    type: "string",
+    name: "string",
+    label: "Text",
+    color: Colors.green,
+    controls: [
+      Controls.text({
+        name: "string",
+        label: "Text"
+      })
+    ]
+  })
+  .addNodeType({
+    type: "string",
+    label: "Text",
+    initialWidth: 140,
+    inputs: ports => [ports.string()],
+    outputs: ports => [ports.string()]
+  })
+  .addNodeType({
+    type: "number",
+    label: "Number",
+    initialWidth: 140,
+    inputs: ports => [ports.number()],
+    outputs: ports => [ports.number()]
+  })
+  .addNodeType({
+    type: "addNumbers",
+    label: "Add Numbers",
+    initialWidth: 140,
+    inputs: ports => [
+      ports.number({ name: "num1" }),
+      ports.number({ name: "num2" })
+    ],
+    outputs: ports => [ports.number()]
+  });
+
+export const DynamicThemingExample = () => {
+  return (
+    <div style={{ width: "100%", height: 400, color: "#000" }}>
+      <style type="text/css">
+        {`
+          [data-flume-node-type="addNumbers"] {
+            background: linear-gradient(to top, #4e2020 0%, #20204e 100%);
+            border: 1px solid rgba(255,255,255,.5);
+            color: #fff;
+          }
+          [data-flume-node-type="addNumbers"] [data-flume-component="node-header"] {
+            background: none;
+          }
+        `}
+      </style>
+      <NodeEditor
+        defaultNodes={Object.values(defaultNodes)}
+        portTypes={config.portTypes}
+        nodeTypes={config.nodeTypes}
+        debug
+      />
+    </div>
+  );
+}
diff --git a/docs/docs/theming.mdx b/docs/docs/theming.mdx
@@ -56,4 +56,31 @@ The following is a comprehensive list of all available data attributes. Each com
 - `ctx-menu-input`
 - `ctx-menu-list`
 - `ctx-menu-empty`
-- `ctx-menu-option`
+- `ctx-menu-option`
+
+## Theming based on node type
+
+In some cases you may want to style some nodes based on their type. There are a few dynamic data attributes you can use for this.
+
+- `data-flume-node-type=[nodeType]` 
+- `data-flume-component-is-root=[boolean]`
+- `data-port-color=[color]`
+- `data-port-name=[portName]`
+- `data-port-type=[portType]
+
+For example, to target a node with type `addNumbers` you could add this to your CSS:
+
+```css
+[data-flume-node-type="addNumbers"] {
+  background: linear-gradient(to top, #4e2020 0%, #20204e 100%);
+  border: 1px solid rgba(255,255,255,.5);
+  color: #fff;
+}
+[data-flume-node-type="addNumbers"] [data-flume-component="node-header"] {
+  background: none;
+}
+```
+
+import {DynamicThemingExample} from '../components/DynamicThemingExample'
+
+<DynamicThemingExample />
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -17367,12 +17367,13 @@ scheduler@^0.18.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"
+    object-assign "^4.1.1"
 
 [email protected]:
   version "2.7.0"

diff --git a/src/components/Node/Node.js b/src/components/Node/Node.js
@@ -171,6 +171,7 @@ const Node = ({
       innerRef={nodeWrapper}
       data-node-id={id}
       data-flume-component="node"
+      data-flume-node-type={currentNodeType.type}
       data-flume-component-is-root={!!root}
       onContextMenu={handleContextMenu}
       stageState={stageState}