docs(website): texts, docs, examples, favicon, cleanup

website/src/example-flows/CustomNode/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+
 import ReactFlow, {
   isEdge,
   removeElements,
@@ -11,15 +12,17 @@ import ColorSelectorNode from './ColorSelectorNode';
 
 import './index.css';
 
-const onLoad = (reactFlowInstance) =>
+const onLoad = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
+  setTimeout(() => reactFlowInstance.fitView(), 1);
+};
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onElementClick = (event, element) => console.log('click', element);
 
-const initBgColor = '#f0e742';
+const initBgColor = '#1A192B';
 
 const connectionLineStyle = { stroke: '#fff' };
-const snapGrid = [16, 16];
+const snapGrid = [20, 20];
 const nodeTypes = {
   selectorNode: ColorSelectorNode,
 };
@@ -32,7 +35,7 @@ const CustomNodeFlow = () => {
     const onChange = (event) => {
       setElements((els) =>
         els.map((e) => {
-          if (isEdge(e) || e.id !== 'custom-2') {
+          if (isEdge(e) || e.id !== '2') {
             return e;
           }
 
@@ -53,52 +56,52 @@ const CustomNodeFlow = () => {
 
     setElements([
       {
-        id: 'custom-1',
+        id: '1',
         type: 'input',
         data: { label: 'An input node' },
         position: { x: 0, y: 50 },
         sourcePosition: 'right',
       },
       {
-        id: 'custom-2',
+        id: '2',
         type: 'selectorNode',
         data: { onChange: onChange, color: initBgColor },
         style: { border: '1px solid #777', padding: 10 },
-        position: { x: 250, y: 50 },
+        position: { x: 300, y: 50 },
       },
       {
-        id: 'custom-3',
+        id: '3',
         type: 'output',
         data: { label: 'Output A' },
-        position: { x: 550, y: 25 },
+        position: { x: 650, y: 25 },
         targetPosition: 'left',
       },
       {
-        id: 'custom-4',
+        id: '4',
         type: 'output',
         data: { label: 'Output B' },
-        position: { x: 550, y: 100 },
+        position: { x: 650, y: 100 },
         targetPosition: 'left',
       },
 
       {
-        id: 'custom-e1-2',
-        source: 'custom-1',
-        target: 'custom-2',
+        id: 'e1-2',
+        source: '1',
+        target: '2',
         animated: true,
         style: { stroke: '#fff' },
       },
       {
-        id: 'custom-e2a-3',
-        source: 'custom-2__a',
-        target: 'custom-3',
+        id: 'e2a-3',
+        source: '2__a',
+        target: '3',
         animated: true,
         style: { stroke: '#fff' },
       },
       {
-        id: 'custom-e2b-4',
-        source: 'custom-2__b',
-        target: 'custom-4',
+        id: 'e2b-4',
+        source: '2__b',
+        target: '4',
         animated: true,
         style: { stroke: '#fff' },
       },
@@ -125,12 +128,17 @@ const CustomNodeFlow = () => {
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
+      defaultZoom={1.5}
     >
       <MiniMap
-        nodeColor={(n) => {
-          if (n.type === 'input') return 'blue';
+        nodeStrokeColor={(n) => {
+          if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;
-          if (n.type === 'output') return 'green';
+          if (n.type === 'output') return '#ff0072';
+        }}
+        nodeColor={(n) => {
+          if (n.type === 'selectorNode') return bgColor;
+          return '#fff';
         }}
       />
       <Controls />