update(deps): Add unplugin-components

fix: Excessive rerender of edge texts update(script-setup): Update some examples * Remove more jsx files
2021-10-20 22:39:54 +02:00
parent 1ff3a8dc9c
commit a5ae6a4e48
38 changed files with 377 additions and 1513 deletions
@@ -1,64 +0,0 @@
-import { computed, defineComponent, inject } from 'vue'
-import { getBezierPath, getEdgeCenter, getMarkerEnd, RevueFlowStore } from '../../src'
-import { DefaultEdgeProps } from '../../src/components/Edges/utils'
-import { RevueFlowHooks } from '../../src/hooks/RevueFlowHooks'
-
-export default defineComponent({
-  props: {
-    ...DefaultEdgeProps
-  },
-  setup(props) {
-    const store = inject<RevueFlowStore>('store')!
-    const hooks = inject<RevueFlowHooks>('hooks')!
-    const onEdgeClick = (evt: Event, id: string) => {
-      const edge = store.edges.find((edge) => edge.id === id)
-      if (edge) {
-        hooks.elementsRemove.trigger([edge])
-      }
-      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,75 @@
+<script lang="ts" setup>
+import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
+import {
+  getEdgeCenter,
+  getBezierPath,
+  getMarkerEnd,
+  ArrowHeadType,
+  EdgeProps,
+  ElementId,
+  Position,
+  RevueFlowStore,
+} from '~/index'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  id: ElementId
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  arrowHeadType?: ArrowHeadType
+  markerEndId?: string
+  data?: T
+}
+
+const props = defineProps<CustomEdgeProps>()
+const store = inject<RevueFlowStore>('store')!
+const hooks = inject<RevueFlowHooks>('hooks')!
+const onEdgeClick = (evt: Event, id: string) => {
+  const edge = store.edges.find((edge) => edge.id === id)
+  if (edge) {
+    hooks.elementsRemove.trigger([edge])
+  }
+  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,
+  }),
+)
+</script>
+<template>
+  <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" @click="(event) => onEdgeClick(event, props.id)">×</button>
+    </body>
+  </foreignObject>
+</template>