From 74a2a3d8c3548423fec900acc97108fe05e895dd Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 8 Aug 2021 20:07:35 +0200
Subject: [PATCH] feat: add edge with button example

---
 examples/EdgeWithButton/ButtonEdge.tsx     | 57 ++++++++++++++++++
 examples/EdgeWithButton/EdgeWithButton.vue | 69 ++++++++++++++++++++++
 examples/index.css                         |  9 +++
 examples/router.ts                         |  4 ++
 4 files changed, 139 insertions(+)
 create mode 100644 examples/EdgeWithButton/ButtonEdge.tsx
 create mode 100644 examples/EdgeWithButton/EdgeWithButton.vue
diff --git a/examples/EdgeWithButton/ButtonEdge.tsx b/examples/EdgeWithButton/ButtonEdge.tsx
new file mode 100644
index 00000000..fb00387d
--- /dev/null
+++ b/examples/EdgeWithButton/ButtonEdge.tsx
@@ -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>
+      </>
+    );
+  }
+});
diff --git a/examples/EdgeWithButton/EdgeWithButton.vue b/examples/EdgeWithButton/EdgeWithButton.vue
new file mode 100644
index 00000000..0fa23d0a
--- /dev/null
+++ b/examples/EdgeWithButton/EdgeWithButton.vue
@@ -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>
diff --git a/examples/index.css b/examples/index.css
index b69664e6..eb8babe3 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -1,5 +1,6 @@
 body {
   color: #111;
+  padding: 5px;
 }
 
 #root {
@@ -89,3 +90,11 @@ header select {
     display: block;
   }
 }
+
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink , 0 0 0 4px #f05f75;
+}
diff --git a/examples/router.ts b/examples/router.ts
index 2a6ef517..28215198 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -24,6 +24,10 @@ export const routes: RouterOptions['routes'] = [
   {
     path: '/edges',
     component: () => import('./Edges')
+  },
+  {
+    path: '/button-edge',
+    component: () => import('./EdgeWithButton/EdgeWithButton.vue')
   }
 ];
 
