update(examples): Fix examples

2021-10-20 22:39:54 +02:00
parent a5ae6a4e48
commit 29c6df1755
25 changed files with 690 additions and 885 deletions
@@ -1,43 +1,35 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Handle, Position, Connection, Edge, NodeProps } from '~/index'
+
+interface ColorSelectorNodeProps extends NodeProps {
+  data: {
+    color: string
+    onChange: (event: any) => void
+  }
+  type: string
+  selected?: boolean
+  connectable?: boolean
+  xPos?: number
+  yPos?: number
+  targetPosition?: Position
+  sourcePosition?: Position
+  dragging?: boolean
+}
+const props = defineProps<ColorSelectorNodeProps>()
+
+const targetHandleStyle: CSSProperties = { background: '#555' }
+const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' }
+const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
+</script>
 <template>
-  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
+  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
  <div>
    Custom Color Picker Node: <strong>{{ data.color }}</strong>
  </div>
-  <input class="nodrag" type="color" :value="data.color" @input="onChange" />
+  <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
 </template>
-<script lang="ts">
-import { CSSProperties, defineComponent, PropType } from 'vue';
-import { Handle, Position, Connection, Edge } from '../../src';
-
-const ColorSelectorNode = defineComponent({
-  components: { Handle },
-  inheritAttrs: false,
-  props: {
-    data: {
-      type: Object as PropType<{ color: string; onChange: (event: any) => any }>,
-      required: false,
-      default: () => {}
-    }
-  },
-  setup(props) {
-    const targetHandleStyle: CSSProperties = { background: '#555' };
-    const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' };
-    const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px', top: 'auto' };
-
-    const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-
-    return {
-      Position,
-      targetHandleStyle,
-      sourceHandleStyleA,
-      sourceHandleStyleB,
-      onConnect,
-      onChange: props.data.onChange
-    };
-  }
-});
-
-export default ColorSelectorNode;
-</script>
@@ -1,25 +1,6 @@
-<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, {
+<script lang="ts" setup>
+import ColorSelectorNode from './ColorSelectorNode.vue'
+import Flow, {
  isEdge,
  removeElements,
  addEdge,
@@ -32,124 +13,120 @@ import RevueFlow, {
  Position,
  SnapGrid,
  Connection,
-  Edge
-} from '../../src';
-import ColorSelectorNode from './ColorSelectorNode.vue';
+  Edge,
+} from '~/index'

-const CustomNodeFlow = defineComponent({
-  components: { RevueFlow, MiniMap, Controls },
-  setup() {
-    const connectionLineStyle = { stroke: '#fff' };
-    const snapGrid: SnapGrid = [16, 16];
-    const nodeTypes = {
-      selectorNode: ColorSelectorNode
-    };
+const elements = ref<Elements>([])
+const bgColor = ref('#1A192B')
+const connectionLineStyle = { stroke: '#fff' }
+const snapGrid: SnapGrid = [16, 16]
+const nodeTypes = {
+  selectorNode: ColorSelectorNode,
+}

-    const onLoad = (revueFlowInstance: OnLoadParams) => {
-      revueFlowInstance.fitView();
-      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 onLoad = (revueFlowInstance: OnLoadParams) => {
+  revueFlowInstance.fitView()
+  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
+      }

-    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

-          const color = (event.target as HTMLInputElement).value;
+      bgColor.value = color

-          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
+      return {
+        ...e,
+        data: {
+          ...e.data,
+          color,
        },
-        {
-          id: '2',
-          type: 'selectorNode',
-          data: { onChange: onChange, color: bgColor.value },
-          style: { border: '1px solid #777', padding: '10px' },
-          position: { x: 250, y: 50 }
-        },
-        {
-          id: '3',
-          type: 'output',
-          data: { label: 'Output A' },
-          position: { x: 650, y: 25 },
-          targetPosition: Position.Left
-        },
-        {
-          id: '4',
-          type: 'output',
-          data: { label: 'Output B' },
-          position: { x: 650, 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' } }
-      ] as Elements;
-    });
-
-    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;
+  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, color: bgColor.value },
+      style: { border: '1px solid #777', padding: '10px' },
+      position: { x: 250, y: 50 },
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output A' },
+      position: { x: 650, y: 25 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: '4',
+      type: 'output',
+      data: { label: 'Output B' },
+      position: { x: 650, 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' } },
+  ] as Elements
+})
+
+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,
+  ))
 </script>
+<template>
+  <Flow
+    :elements="elements"
+    :on-element-click="onElementClick"
+    :on-elements-remove="onElementsRemove"
+    :on-connect="onConnect"
+    :on-node-drag-stop="onNodeDragStop"
+    :style="`background: ${bgColor}`"
+    :on-load="onLoad"
+    :node-types="nodeTypes"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    :default-zoom="1.5"
+  >
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+    <Controls />
+  </Flow>
+</template>