refactor(store): simplify setElement

example/src/Basic/index.js

@@ -6,10 +6,10 @@ const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onElementClick = (event, element) => console.log('click', element);
 
 const initialElements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ];
@@ -40,9 +40,23 @@ const BasicFlow = () => {
   };
 
   const logToObject = () => console.log(rfInstance.toObject());
-
   const resetTransform = () => rfInstance.setTransform({ x: 0, y: 0, zoom: 1 });
 
+  const toggleClassnames = () => {
+    setElements((elms) => {
+      return elms.map((el) => {
+        if (isNode(el)) {
+          return {
+            ...el,
+            className: el.className === 'light' ? 'dark' : 'light',
+          };
+        }
+
+        return el;
+      });
+    });
+  };
+
   return (
     <ReactFlow
       elements={elements}
@@ -65,6 +79,9 @@ const BasicFlow = () => {
         <button onClick={updatePos} style={{ marginRight: 5 }}>
           change pos
         </button>
+        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
+          toggle classnames
+        </button>
         <button onClick={logToObject}>toObject</button>
       </div>
     </ReactFlow>

example/src/index.css

@@ -140,6 +140,11 @@ nav a.active:before {
   color: #f8f8f8;
 }
 
+.react-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
 .react-flow__node-selectorNode {
   font-size: 12px;
   background: #f0f2f3;