alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: typings

Browse Source
This commit is contained in:
Braks
2021-10-22 14:29:27 +02:00
parent cb96b1ab00
commit 6ec8258f33
50 changed files with 165 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/ConnectionLine.vue
+8 -6
View File
@@ -19,12 +19,14 @@ const store = useStore()
const sourceHandle =
store.connectionHandleId && store.connectionHandleType
? props.sourceNode.__rf.handleBounds[store.connectionHandleType].find((d: HandleElement) => d.id === store.connectionHandleId)
: store.connectionHandleType && props.sourceNode.__rf.handleBounds[store.connectionHandleType][0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf.height
const sourceX = props.sourceNode.__rf.position.x + sourceHandleX
const sourceY = props.sourceNode.__rf.position.y + sourceHandleY
? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
(d: HandleElement) => d.id === store.connectionHandleId,
)
: store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType][0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf?.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf?.height
const sourceX = props.sourceNode.__rf?.position?.x + sourceHandleX
const sourceY = props.sourceNode.__rf?.position?.y + sourceHandleY
const isRightOrLeft = sourceHandle.position === Position.Left || sourceHandle.position === Position.Right
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
src/components/Edges/BezierEdge.vue
+1 -1
View File
@@ -19,7 +19,7 @@ interface BezierEdgeProps<T = any> {
label?:
| string
| {
component: VNode
component: any
props?: any
}
labelStyle?: any
src/components/Edges/Edge.vue
+4 -4
View File
@@ -93,12 +93,12 @@ const nodes = computed(() => {
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
store.connectionMode === ConnectionMode.Strict
? nodes.value.targetNode?.__rf.handleBounds.target
: nodes.value.targetNode?.__rf.handleBounds.target ?? nodes.value.targetNode?.__rf.handleBounds.source,
? nodes.value.targetNode?.__rf?.handleBounds.target
: nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
)
const sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null),
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
)
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -126,7 +126,7 @@ const edgePos = computed(() =>
selected: isSelected,
animated: props.edge.animated,
inactive: !store.elementsSelectable,
updating: updating.value,
updating,
},
]"
@click="onEdgeClick"
src/components/Edges/EdgeAnchor.vue
+4 -8
View File
@@ -24,14 +24,10 @@ interface EdgeAnchorProps extends HTMLAttributes {
const props = withDefaults(defineProps<EdgeAnchorProps>(), {
radius: 10,
})
const cx = computed(() => shiftX(props.centerX, props.radius, props.position))
const cy = computed(() => shiftY(props.centerY, props.radius, props.position))
</script>
<template>
<circle
class="vue-flow__edgeupdater"
:cx="shiftX(props.centerX, props.radius, props.position)"
:cy="shiftY(props.centerY, props.radius, props.position)"
:r="props.radius"
stroke="transparent"
fill="transparent"
/>
<circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
</template>
src/components/Edges/EdgeText.vue
+13 -11
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { HTMLAttributes, VNode } from 'vue'
import { CSSProperties, HTMLAttributes } from 'vue'
interface EdgeTextProps extends HTMLAttributes {
x: number
@@ -7,10 +7,11 @@ interface EdgeTextProps extends HTMLAttributes {
label?:
| string
| {
component: VNode
component: any
props?: any
}
labelStyle?: any
| any
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: any
labelBgPadding?: [number, number]
@@ -26,17 +27,18 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
})
const edgeRef = templateRef<SVGTextElement>('edge-text', null)
// @ts-ignore
const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
const { width, height, x, y } = useElementBounding(edgeRef)
const transform = computed(() => `translate(${props.x - width.value / 2} ${props.y - height.value / 2})`)
const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
</script>
<template>
<g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
<g :transform="transform" class="vue-flow__edge-textwrapper">
<rect
v-if="props.labelShowBg"
:width="width + 2 * props.labelBgPadding[0] + 'px'"
:height="height + 2 * props.labelBgPadding[1] + 'px'"
:x="-props.labelBgPadding[0]"
:y="-props.labelBgPadding[1]"
:width="width + 2 * bgPadding[0] + 'px'"
:height="height + 2 * bgPadding[1] + 'px'"
:x="-bgPadding[0]"
:y="-bgPadding[1]"
class="vue-flow__edge-textbg"
:style="props.labelBgStyle"
:rx="props.labelBgBorderRadius"
@@ -46,7 +48,7 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
<component
:is="props.label.component"
v-if="typeof props.label.component !== 'undefined'"
v-bind="{ ...props, ...props.label.props, width, height, x, y }"
v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
/>
<template v-else v-html="props.label">
{{ props.label }}
src/components/Edges/SmoothStepEdge.vue
+1 -1
View File
@@ -19,7 +19,7 @@ export interface EdgeSmoothStepProps<T = any> {
label?:
| string
| {
component: VNode
component: any
props?: any
}
labelStyle?: any
src/components/Edges/StepEdge.vue
+1 -1
View File
@@ -18,7 +18,7 @@ export interface EdgeStepProps<T = any> {
label?:
| string
| {
component: VNode
component: any
props?: any
}
labelStyle?: any
src/components/Edges/StraightEdge.vue
+1 -1
View File
@@ -19,7 +19,7 @@ interface StraightEdgeProps<T = any> {
label?:
| string
| {
component: VNode
component: any
props?: any
}
labelStyle?: any
src/components/Nodes/Node.vue
+12 -12
View File
@@ -28,13 +28,13 @@ const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
const onMouseEnterHandler = () =>
props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
const onMouseMoveHandler = () =>
props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
const onMouseLeaveHandler = () =>
props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
@@ -84,7 +84,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
const n = props.node
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__rf.isDragging) {
if (!props.node.__rf?.isDragging) {
if (selectable && !props.selectNodesOnDrag && !props.selected) {
store.addSelectedElements([n])
}
@@ -165,9 +165,9 @@ watch(
]"
:style="{
zIndex: props.selected ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
pointerEvents: selectable || draggable ? 'all' : 'none',
opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
...props.node.style,
}"
:data-id="props.node.id"
@@ -182,13 +182,13 @@ watch(
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
xPos: props.node.__rf?.position?.x,
yPos: props.node.__rf?.position?.y,
selected: props.selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__rf.isDragging,
dragging: props.node.__rf?.isDragging,
}"
>
<component
@@ -197,13 +197,13 @@ watch(
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
xPos: props.node.__rf?.position?.x,
yPos: props.node.__rf?.position?.y,
selected: props.selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__rf.isDragging,
dragging: props.node.__rf?.isDragging,
}"
/>
</slot>
src/components/NodesSelection/NodesSelection.vue
+1 -1
View File
@@ -13,7 +13,7 @@ const selectedNodes = store.selectedElements
return {
...matchingNode,
position: matchingNode?.__rf.position,
position: matchingNode?.__rf?.position,
} as Node
})
: []