docs: add examples

lvsouza · lvsouza · commit 2822de92ffb5 · 2024-10-04T12:29:07.000-03:00
diff --git a/example/src/Mock.ts b/example/src/Mock.ts
diff --git a/example/src/Mock.tsx b/example/src/Mock.tsx
@@ -0,0 +1,45 @@
+import { observe } from "react-observing";
+
+import { INode } from 'flow-editor/src';
+
+import { CustomNode } from './app/components/CustomNode';
+
+
+export const FLOW: INode[] = [
+  {
+    id: observe(crypto.randomUUID()),
+    connections: observe([]),
+    height: observe(32),
+    width: observe(100),
+    left: observe(50),
+    top: observe(50),
+    render: CustomNode,
+  },
+  {
+    id: observe(crypto.randomUUID()),
+    connections: observe([]),
+    height: observe(32),
+    width: observe(100),
+    left: observe(50),
+    top: observe(200),
+    render: CustomNode,
+  },
+  {
+    id: observe(crypto.randomUUID()),
+    connections: observe([]),
+    height: observe(32),
+    width: observe(100),
+    left: observe(50),
+    top: observe(300),
+    render: CustomNode,
+  },
+  {
+    id: observe(crypto.randomUUID()),
+    connections: observe([]),
+    height: observe(100),
+    width: observe(100),
+    left: observe(250),
+    top: observe(100),
+    render: CustomNode,
+  },
+];
diff --git a/example/src/app/components/CustomNode.tsx b/example/src/app/components/CustomNode.tsx
@@ -0,0 +1,24 @@
+import { INodeRenderProps } from 'flow-editor';
+import { useObserver } from 'react-observing';
+
+
+
+export const CustomNode = (props: INodeRenderProps) => {
+  const [isSelected] = useObserver(props.isSelected);
+  const [height] = useObserver(props.height);
+  const [width] = useObserver(props.width);
+
+
+  return (
+    <div
+      style={{
+        width: width - 2,
+        height: height - 2,
+        backgroundColor: 'red',
+        border: isSelected ? 'thin solid blue' : 'thin solid transparent',
+      }}
+    >
+      CustomNode
+    </div>
+  );
+};
diff --git a/example/src/app/index.tsx b/example/src/app/index.tsx
@@ -2,13 +2,15 @@ import { useRef } from 'react';
 import { observe } from 'react-observing';
 
 import { FlowEditor } from 'flow-editor/src';
+import { INode } from 'flow-editor';
 
+import { CustomNode } from './components/CustomNode';
 import { FLOW } from './../Mock';
 import './../styles.css';
 
 
 export const App = () => {
-  const flow = useRef(observe(FLOW));
+  const flow = useRef(observe(FLOW.map<INode>(item => ({ ...item, render: props => <CustomNode {...props} /> }))));
 
 
   return (
@@ -27,6 +29,14 @@ export const App = () => {
         <div className='w-[70vw] h-[90vh] bg-background rounded overflow-clip'>
           <FlowEditor
             items={flow.current.value}
+            customCSS={`
+              .bg-paper {
+                background-color: var(--color-background, #3a3a3a);
+              }
+              .border-selection {
+                border: thin solid var(--color-selection, #999fff);
+              }  
+            `}
           />
         </div>
       </div>
