feat: add edge with button example

2021-08-08 20:25:44 +02:00
parent 6912993ebd
commit 74a2a3d8c3
4 changed files with 139 additions and 0 deletions
@@ -0,0 +1,57 @@
+import { computed, defineComponent } from 'vue';
+import { getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
+import { DefaultEdgeProps } from '../../src/components/Edges/utils';
+
+export default defineComponent({
+  props: {
+    ...DefaultEdgeProps
+  },
+  setup(props) {
+    const onEdgeClick = (evt: Event, id: string) => {
+      evt.stopPropagation();
+      alert(`remove ${id}`);
+    };
+
+    const foreignObjectSize = 40;
+
+    const edgePath = computed(() =>
+      getBezierPath({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        sourcePosition: props.sourcePosition,
+        targetX: props.targetX,
+        targetY: props.targetY,
+        targetPosition: props.targetPosition
+      })
+    );
+    const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
+    const center = computed(() =>
+      getEdgeCenter({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        targetX: props.targetX,
+        targetY: props.targetY
+      })
+    );
+
+    return () => (
+      <>
+        <path id={props.id} style={props.style} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
+        <foreignObject
+          width={foreignObjectSize}
+          height={foreignObjectSize}
+          x={center.value[0] - foreignObjectSize / 2}
+          y={center.value[1] - foreignObjectSize / 2}
+          class="edgebutton-foreignobject"
+          requiredExtensions="http://www.w3.org/1999/xhtml"
+        >
+          <body>
+            <button class="edgebutton" onClick={(event) => onEdgeClick(event, props.id)}>
+              ×
+            </button>
+          </body>
+        </foreignObject>
+      </>
+    );
+  }
+});
@@ -0,0 +1,69 @@
+<template>
+  <RevueFlow
+    key="edge-with-button"
+    v-model="elements"
+    :snap-to-grid="true"
+    :edge-types="edgeTypes"
+    @load="onLoad"
+    @elementsRemove="onElementsRemove"
+    @connect="onConnect"
+  >
+    <MiniMap />
+    <Controls />
+    <Background />
+  </RevueFlow>
+</template>
+<script lang="ts">
+import ButtonEdge from './ButtonEdge';
+import { defineComponent, ref } from 'vue';
+import RevueFlow, {
+  addEdge,
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  Elements,
+  MiniMap,
+  OnLoadParams,
+  removeElements
+} from '../../src';
+
+export default defineComponent({
+  components: { RevueFlow, Background, Controls, MiniMap },
+  setup() {
+    const edgeTypes = {
+      buttonedge: ButtonEdge as any
+    };
+
+    const elements = ref<Elements>([
+      {
+        id: 'ewb-1',
+        type: 'input',
+        data: { label: 'Input 1' },
+        position: { x: 250, y: 0 }
+      },
+      { id: 'ewb-2', data: { label: 'Node 2' }, position: { x: 250, y: 300 } },
+      {
+        id: 'edge-1-2',
+        source: 'ewb-1',
+        target: 'ewb-2',
+        type: 'buttonedge'
+      }
+    ] as Elements);
+
+    const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+    const onElementsRemove = (elementsToRemove: Elements) =>
+      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
+    const onConnect = (params: Connection | Edge) =>
+      (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements));
+
+    return {
+      onLoad,
+      onElementsRemove,
+      onConnect,
+      elements,
+      edgeTypes
+    };
+  }
+});
+</script>