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

update!: graphnode and node typing

Browse Source 
* graphnode is a node containing internal Vue Flow data
* move util files to util directory
* move flow actions type into store file
* rename panel type file to zoom
* rename types file to flow
* Rename Node to NodeWrapper
* Rename Edge to EdgeWrapper

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-21 16:25:27 +01:00
parent ba24f3ca62
commit 062aee45b2
36 changed files with 280 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/ConnectionLine.vue
+10 -10
View File
@@ -2,10 +2,10 @@
import { CSSProperties } from 'vue'
import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
import { useStore } from '../../composables'
import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
import { ConnectionLineType, HandleElement, GraphNode, Position } from '../../types'
interface ConnectionLineProps {
sourceNode: Node
sourceNode: GraphNode
connectionLineType?: ConnectionLineType
connectionLineStyle?: CSSProperties
}
@@ -19,29 +19,29 @@ const store = useStore()
const sourceHandle =
store.connectionHandleId && store.connectionHandleType
? props.sourceNode.__vf?.handleBounds[store.connectionHandleType].find(
? props.sourceNode.__vf.handleBounds[store.connectionHandleType]?.find(
(d: HandleElement) => d.id === store.connectionHandleId,
)
: store.connectionHandleType && props.sourceNode.__vf?.handleBounds[store.connectionHandleType ?? 'source'][0]
: store.connectionHandleType && props.sourceNode.__vf.handleBounds[store.connectionHandleType ?? 'source']?.[0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__vf?.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__vf?.height
const sourceX = props.sourceNode.__vf?.position?.x + sourceHandleX
const sourceY = props.sourceNode.__vf?.position?.y + sourceHandleY
const isRightOrLeft = sourceHandle.position === Position.Left || sourceHandle.position === Position.Right
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2])
const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2])
const dAttr = computed(() => {
let path = `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`
let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
switch (props.connectionLineType) {
case ConnectionLineType.Bezier:
path = getBezierPath({
sourceX,
sourceY,
sourcePosition: sourceHandle.position,
sourcePosition: sourceHandle?.position,
targetX: targetX.value,
targetY: targetY.value,
targetPosition,
@@ -51,7 +51,7 @@ const dAttr = computed(() => {
path = getSmoothStepPath({
sourceX,
sourceY,
sourcePosition: sourceHandle.position,
sourcePosition: sourceHandle?.position,
targetX: targetX.value,
targetY: targetY.value,
targetPosition,
@@ -62,7 +62,7 @@ const dAttr = computed(() => {
path = getSmoothStepPath({
sourceX,
sourceY,
sourcePosition: sourceHandle.position,
sourcePosition: sourceHandle?.position,
targetX: targetX.value,
targetY: targetY.value,
targetPosition,
@@ -78,7 +78,7 @@ const dAttr = computed(() => {
v-bind="{
sourceX,
sourceY,
sourcePosition: sourceHandle.position,
sourcePosition: sourceHandle?.position,
targetX,
targetY,
targetPosition,