refactor: Refactor some jsx files to vue files

feat: add global hooks to emulate sort of an event bus between components
* global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient

examples/CustomNode/ColorSelectorNode.tsx

@@ -1,33 +0,0 @@
-import { CSSProperties, defineComponent } from 'vue';
-import { Handle, Position, Connection, Edge } from '../../src';
-
-const targetHandleStyle: CSSProperties = { background: '#555' };
-const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
-const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
-
-const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-
-const ColorSelectorNode = defineComponent({
-  props: {
-    data: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    return () => (
-      <>
-        <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
-        <div>
-          Custom Color Picker Node: <strong>{props.data.color}</strong>
-        </div>
-        <input class="nodrag" type="color" onInput={props.data.onChange} v-model={props.data.color} />
-        <Handle type="source" position={Position.Right} id="a" style={sourceHandleStyleA} />
-        <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} />
-      </>
-    );
-  }
-});
-
-export default ColorSelectorNode;

examples/CustomNode/ColorSelectorNode.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
+    <div>
+      Custom Color Picker Node: <strong>{{ data.color }}</strong>
+    </div>
+    <input class="nodrag" type="color" :value="data.color" @input="onChange" />
+    <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+    <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+  </div>
+</template>
+<script lang="ts">
+import { CSSProperties, defineComponent } from 'vue';
+import { Handle, Position, Connection, Edge } from '../../src';
+
+const ColorSelectorNode = defineComponent({
+  components: { Handle },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const targetHandleStyle: CSSProperties = { background: '#555' };
+    const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
+    const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
+
+    const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+    return {
+      Position,
+      targetHandleStyle,
+      sourceHandleStyleA,
+      sourceHandleStyleB,
+      onConnect,
+      onChange: props.data.onChange as any
+    };
+  }
+});
+
+export default ColorSelectorNode;
+</script>

examples/CustomNode/CustomNode.vue

@@ -0,0 +1,152 @@
+<template>
+  <RevueFlow
+    v-model="elements"
+    :onElementClick="onElementClick"
+    :onElementsRemove="onElementsRemove"
+    :onConnect="onConnect"
+    :onNodeDragStop="onNodeDragStop"
+    :style="`background: ${bgColor}`"
+    :onLoad="onLoad"
+    :nodeTypes="nodeTypes"
+    :connectionLineStyle="connectionLineStyle"
+    :snapToGrid="true"
+    :snapGrid="snapGrid"
+    :defaultZoom="1.5"
+  >
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+    <Controls />
+  </RevueFlow>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import RevueFlow, {
+  isEdge,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Node,
+  FlowElement,
+  OnLoadParams,
+  Elements,
+  Position,
+  SnapGrid,
+  Connection,
+  Edge
+} from '../../src';
+import ColorSelectorNode from './ColorSelectorNode.vue';
+
+const CustomNodeFlow = defineComponent({
+  components: { RevueFlow, MiniMap, Controls },
+  setup() {
+    const connectionLineStyle = { stroke: '#fff' };
+    const snapGrid: SnapGrid = [16, 16];
+    const nodeTypes = {
+      selectorNode: ColorSelectorNode
+    };
+
+    const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
+    const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+    const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+    const nodeStroke = (n: Node): string => {
+      if (n.type === 'input') return '#0041d0';
+      if (n.type === 'selectorNode') return bgColor.value;
+      if (n.type === 'output') return '#ff0072';
+      return '#eee';
+    };
+    const nodeColor = (n: Node): string => {
+      if (n.type === 'selectorNode') return bgColor.value;
+      return '#fff';
+    };
+
+    const elements = ref<Elements>([]);
+    const bgColor = ref('#1A192B');
+
+    onMounted(() => {
+      const onChange = (event: Event) => {
+        elements.value = elements.value.map((e: FlowElement) => {
+          if (isEdge(e) || e.id !== '2') {
+            return e;
+          }
+
+          const color = (event.target as HTMLInputElement).value;
+
+          bgColor.value = color;
+
+          return {
+            ...e,
+            data: {
+              ...e.data,
+              color
+            }
+          };
+        });
+      };
+
+      elements.value = [
+        {
+          id: '1',
+          type: 'input',
+          data: { label: 'An input node' },
+          position: { x: 0, y: 50 },
+          sourcePosition: Position.Right
+        },
+        {
+          id: '2',
+          type: 'selectorNode',
+          data: { onChange: onChange, color: bgColor.value },
+          style: { border: '1px solid #777', padding: 10 },
+          position: { x: 250, y: 50 }
+        },
+        {
+          id: '3',
+          type: 'output',
+          data: { label: 'Output A' },
+          position: { x: 550, y: 25 },
+          targetPosition: Position.Left
+        },
+        {
+          id: '4',
+          type: 'output',
+          data: { label: 'Output B' },
+          position: { x: 550, y: 100 },
+          targetPosition: Position.Left
+        },
+
+        { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
+        { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
+        { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
+      ];
+    });
+
+    const onElementsRemove = (elementsToRemove: Elements) =>
+      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
+    const onConnect = (params: Connection | Edge) =>
+      (elements.value = addEdge(
+        {
+          ...params,
+          animated: true,
+          style: { stroke: '#fff' }
+        } as Edge,
+        elements.value as Elements
+      ));
+
+    return {
+      elements,
+      onConnect,
+      onElementsRemove,
+      onLoad,
+      onNodeDragStop,
+      onElementClick,
+      nodeStroke,
+      nodeColor,
+      connectionLineStyle,
+      snapGrid,
+      nodeTypes,
+      bgColor
+    };
+  }
+});
+
+export default CustomNodeFlow;
+</script>

examples/CustomNode/index.tsx

@@ -1,132 +0,0 @@
-import { defineComponent, onMounted, ref } from 'vue';
-import RevueFlow, {
-  isEdge,
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Node,
-  FlowElement,
-  OnLoadParams,
-  Elements,
-  Position,
-  SnapGrid,
-  Connection,
-  Edge
-} from '../../src';
-import ColorSelectorNode from './ColorSelectorNode';
-
-const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-
-const initBgColor = '#1A192B';
-
-const connectionLineStyle = { stroke: '#fff' };
-const snapGrid: SnapGrid = [16, 16];
-const nodeTypes = {
-  selectorNode: ColorSelectorNode
-};
-
-const CustomNodeFlow = defineComponent({
-  setup() {
-    const elements = ref<Elements>([]);
-    const bgColor = ref(initBgColor);
-
-    onMounted(() => {
-      const onChange = (event: Event) => {
-        elements.value = elements.value.map((e) => {
-          if (isEdge(e) || e.id !== '2') {
-            return e;
-          }
-
-          const color = (event.target as HTMLInputElement).value;
-
-          bgColor.value = color;
-
-          return {
-            ...e,
-            data: {
-              ...e.data,
-              color
-            }
-          };
-        });
-      };
-
-      elements.value = [
-        {
-          id: '1',
-          type: 'input',
-          data: { label: 'An input node' },
-          position: { x: 0, y: 50 },
-          sourcePosition: Position.Right
-        },
-        {
-          id: '2',
-          type: 'selectorNode',
-          data: { onChange: onChange, color: initBgColor },
-          style: { border: '1px solid #777', padding: 10 },
-          position: { x: 250, y: 50 }
-        },
-        {
-          id: '3',
-          type: 'output',
-          data: { label: 'Output A' },
-          position: { x: 550, y: 25 },
-          targetPosition: Position.Left
-        },
-        {
-          id: '4',
-          type: 'output',
-          data: { label: 'Output B' },
-          position: { x: 550, y: 100 },
-          targetPosition: Position.Left
-        },
-
-        { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
-        { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
-        { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
-      ];
-    });
-
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
-    const onConnect = (params: Connection | Edge) =>
-      (elements.value = addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, elements.value));
-
-    return () => (
-      <RevueFlow
-        elements={elements.value}
-        onElementClick={onElementClick}
-        onElementsRemove={onElementsRemove}
-        onConnect={onConnect}
-        onNodeDragStop={onNodeDragStop}
-        style={{ background: bgColor.value }}
-        onLoad={onLoad}
-        nodeTypes={nodeTypes}
-        connectionLineStyle={connectionLineStyle}
-        snapToGrid={true}
-        snapGrid={snapGrid}
-        defaultZoom={1.5}
-      >
-        <MiniMap
-          nodeStrokeColor={(n: Node): string => {
-            if (n.type === 'input') return '#0041d0';
-            if (n.type === 'selectorNode') return bgColor.value;
-            if (n.type === 'output') return '#ff0072';
-
-            return '#eee';
-          }}
-          nodeColor={(n: Node): string => {
-            if (n.type === 'selectorNode') return bgColor.value;
-
-            return '#fff';
-          }}
-        />
-        <Controls />
-      </RevueFlow>
-    );
-  }
-});
-
-export default CustomNodeFlow;