diff --git a/examples/EdgeWithButton/ButtonEdge.tsx b/examples/EdgeWithButton/ButtonEdge.tsx deleted file mode 100644 index 5ba0cc20..00000000 --- a/examples/EdgeWithButton/ButtonEdge.tsx +++ /dev/null @@ -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('store')! - const hooks = inject('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 () => ( - <> - - - - - - - - ) - } -}) diff --git a/examples/EdgeWithButton/ButtonEdge.vue b/examples/EdgeWithButton/ButtonEdge.vue new file mode 100644 index 00000000..cc3c52a9 --- /dev/null +++ b/examples/EdgeWithButton/ButtonEdge.vue @@ -0,0 +1,75 @@ + + diff --git a/examples/Edges/CustomEdge.tsx b/examples/Edges/CustomEdge.tsx deleted file mode 100644 index 9010a66e..00000000 --- a/examples/Edges/CustomEdge.tsx +++ /dev/null @@ -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 () => ( - <> - - - - {props.data.text} - - - - ) - } -}) - -export default CustomEdge diff --git a/examples/Edges/CustomEdge.vue b/examples/Edges/CustomEdge.vue new file mode 100644 index 00000000..ed08362f --- /dev/null +++ b/examples/Edges/CustomEdge.vue @@ -0,0 +1,41 @@ + + diff --git a/examples/Edges/CustomEdge2.tsx b/examples/Edges/CustomEdge2.tsx deleted file mode 100644 index 6f877733..00000000 --- a/examples/Edges/CustomEdge2.tsx +++ /dev/null @@ -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 () => ( - <> - - console.log(props.data)} - /> - - ) - } -}) - -export default CustomEdge diff --git a/examples/Edges/CustomEdge2.vue b/examples/Edges/CustomEdge2.vue new file mode 100644 index 00000000..64e6ac90 --- /dev/null +++ b/examples/Edges/CustomEdge2.vue @@ -0,0 +1,57 @@ + + diff --git a/examples/Edges/CustomLabel.vue b/examples/Edges/CustomLabel.vue new file mode 100644 index 00000000..364a9df4 --- /dev/null +++ b/examples/Edges/CustomLabel.vue @@ -0,0 +1,4 @@ + + diff --git a/examples/Edges/index.tsx b/examples/Edges/EdgesExample.vue similarity index 60% rename from examples/Edges/index.tsx rename to examples/Edges/EdgesExample.vue index 20e70a96..f7fabca4 100644 --- a/examples/Edges/index.tsx +++ b/examples/Edges/EdgesExample.vue @@ -1,19 +1,19 @@ -import { ref } from 'vue' -import CustomEdge from './CustomEdge' -import CustomEdge2 from './CustomEdge2' -import RevueFlow, { - Elements, - FlowElement, - OnLoadParams, - ArrowHeadType, - Background, - Controls, + + diff --git a/examples/Superflow/Superflow.vue b/examples/Superflow/Superflow.vue index eaef687e..40579be7 100644 --- a/examples/Superflow/Superflow.vue +++ b/examples/Superflow/Superflow.vue @@ -1,6 +1,6 @@ diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue index d0a60134..cdcb76a8 100644 --- a/src/additional-components/MiniMap/MiniMap.vue +++ b/src/additional-components/MiniMap/MiniMap.vue @@ -1,6 +1,6 @@