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>
@@ -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;
 }
@@ -24,6 +24,10 @@ export const routes: RouterOptions['routes'] = [
  {
    path: '/edges',
    component: () => import('./Edges')
  },
  {
    path: '/button-edge',
    component: () => import('./EdgeWithButton/EdgeWithButton.vue')
  }
 ];