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>
@@ -1,35 +0,0 @@
-import { getBezierPath, getMarkerEnd } from '../../src'
-import { computed, defineComponent } from 'vue'
-import { DefaultEdgeProps } from '../../src/components/Edges/utils'
-
-const CustomEdge = defineComponent({
-  props: {
-    ...DefaultEdgeProps
-  },
-  setup(props) {
-    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))
-
-    return () => (
-      <>
-        <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
-        <text>
-          <textPath href={`#${props.id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
-            {props.data.text}
-          </textPath>
-        </text>
-      </>
-    )
-  }
-})
-
-export default CustomEdge
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ArrowHeadType, ElementId, getBezierPath, getMarkerEnd, Position, EdgeProps } from '~/index'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  source: ElementId
+  target: ElementId
+  sourceHandleId?: ElementId
+  targetHandleId?: ElementId
+  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 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))
+</script>
+<template>
+  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <text>
+    <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
+      {{ props.data.text }}
+    </textPath>
+  </text>
+</template>
@@ -1,49 +0,0 @@
-import { computed, defineComponent } from 'vue'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src'
-import { DefaultEdgeProps } from '../../src/components/Edges/utils'
-
-const CustomEdge = defineComponent({
-  props: {
-    ...DefaultEdgeProps
-  },
-  setup(props) {
-    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} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
-        <EdgeText
-          x={center.value[0]}
-          y={center.value[1]}
-          label={props.data?.text}
-          labelStyle={{ fill: 'white' }}
-          labelShowBg
-          labelBgStyle={{ fill: 'red' }}
-          labelBgPadding={[2, 4]}
-          labelBgBorderRadius={2}
-          onClick={() => console.log(props.data)}
-        />
-      </>
-    )
-  }
-})
-
-export default CustomEdge
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { getBezierPath, getMarkerEnd } from '~/components/Edges/utils'
+import { ArrowHeadType, EdgeProps, ElementId, getEdgeCenter, Position, EdgeText } from '~/index'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  source: ElementId
+  target: ElementId
+  sourceHandleId?: ElementId
+  targetHandleId?: ElementId
+  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 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" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <EdgeText
+    :x="center[0]"
+    :y="center[1]"
+    :label="props.data?.text"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: 'red' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+    @click="() => console.log(props.data)"
+  />
+</template>
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <tspan dy="10" x="0">I am a `tspan`</tspan>
+</template>
@@ -1,19 +1,19 @@
-import { ref } from 'vue'
-import CustomEdge from './CustomEdge'
-import CustomEdge2 from './CustomEdge2'
-import RevueFlow, {
-  Elements,
-  FlowElement,
-  OnLoadParams,
-  ArrowHeadType,
-  Background,
-  Controls,
+<script lang="ts" setup>
+import CustomEdge from './CustomEdge.vue'
+import CustomEdge2 from './CustomEdge2.vue'
+import Flow, {
  MiniMap,
-  addEdge,
+  Controls,
+  Background,
+  Elements,
+  OnLoadParams,
+  FlowElement,
+  removeElements,
  Connection,
  Edge,
-  removeElements
-} from '../../src'
+  addEdge,
+  ArrowHeadType,
+} from '~/index'

 const initialElements = [
  { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
@@ -37,16 +37,9 @@ const initialElements = [
    id: 'e5-6',
    source: '5',
    target: '6',
-    label: (
-      <>
-        <tspan>i am using</tspan>
-        <tspan dy={10} x={0}>
-          {'<tspan>'}
-        </tspan>
-      </>
-    ),
+    label: 'foobar',
    labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: ArrowHeadType.Arrow
+    arrowHeadType: ArrowHeadType.Arrow,
  },
  {
    id: 'e5-7',
@@ -56,7 +49,7 @@ const initialElements = [
    labelBgPadding: [8, 4],
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: ArrowHeadType.ArrowClosed
+    arrowHeadType: ArrowHeadType.ArrowClosed,
  },
  {
    id: 'e5-8',
@@ -64,47 +57,43 @@ const initialElements = [
    target: '8',
    type: 'custom',
    data: { text: 'custom edge' },
-    arrowHeadType: ArrowHeadType.ArrowClosed
+    arrowHeadType: ArrowHeadType.ArrowClosed,
  },
  {
    id: 'e5-9',
    source: '5',
    target: '9',
    type: 'custom2',
-    data: { text: 'custom edge 2' }
-  }
+    data: { text: 'custom edge 2' },
+  },
 ]

 const edgeTypes: Record<string, any> = {
  custom: CustomEdge,
-  custom2: CustomEdge2
+  custom2: CustomEdge2,
 }

-const EdgesFlow = () => {
-  const elements = ref<Elements>(initialElements as Elements)
+const elements = ref<Elements>(initialElements as Elements)

-  const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
-  const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
-  const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
-  const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-  const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-
-  return (
-    <RevueFlow
-      v-model={elements.value}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
-      onNodeDragStop={onNodeDragStop}
-      onLoad={onLoad}
-      snapToGrid={true}
-      edgeTypes={edgeTypes}
-    >
-      <MiniMap />
-      <Controls />
-      <Background />
-    </RevueFlow>
-  )
-}
-
-export default EdgesFlow
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :on-element-click="onElementClick"
+    :on-elements-remove="onElementsRemove"
+    :on-connect="onConnect"
+    :on-node-drag-stop="onNodeDragStop"
+    :on-load="onLoad"
+    :snap-to-grid="true"
+    :edge-types="edgeTypes"
+  >
+    <MiniMap />
+    <Controls />
+    <Background />
+  </Flow>
+</template>
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import Flowy from '~/container/Flow.vue'
+import Flowy from '~/container/Flow/Flow.vue'
 import { Elements } from '~/types'

 const elements = ref<Elements>([
@@ -23,7 +23,7 @@ export const routes: RouterOptions['routes'] = [
  },
  {
    path: '/edges',
-    component: () => import('./Edges'),
+    component: () => import('./Edges/EdgesExample.vue'),
  },
  {
    path: '/button-edge',