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

refactor(types): Remove internal __vf field

Browse Source 
* fields are merged into the GraphNode / Node interface
* Remove passing props from VueFlow container, use injected state

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent 3f0b0dbd70
commit f28e10b05a
17 changed files with 219 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/ConnectionLine.vue
+16 -41
View File
@@ -1,56 +1,31 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
import {
ConnectionLineType,
HandleElement,
Position,
HandleType,
XYPosition,
ConnectionMode,
Transform,
GraphNode,
} from '../../types'
import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
import { useStore } from '../../composables'
interface ConnectionLineProps {
sourceNode: GraphNode
connectionLineType?: ConnectionLineType
connectionLineStyle?: CSSProperties
connectionHandleId?: string
connectionNodeId?: string
connectionHandleType?: HandleType
connectionPosition?: XYPosition
connectionMode: ConnectionMode
nodes: GraphNode[]
transform: Transform
}
const props = withDefaults(defineProps<ConnectionLineProps>(), {
connectionLineType: ConnectionLineType.Bezier,
connectionLineStyle: () => ({}),
connectionPosition: () => ({ x: 0, y: 0 }),
})
const props = defineProps<ConnectionLineProps>()
const store = useStore()
const sourceHandle =
props.connectionHandleId && props.connectionHandleType
? props.sourceNode.__vf.handleBounds[props.connectionHandleType]?.find(
(d: HandleElement) => d.id === props.connectionHandleId,
)
: props.connectionHandleType && props.sourceNode.__vf.handleBounds[props.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
store.connectionHandleId && store.connectionHandleType
? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
: store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.height
const sourceX = props.sourceNode.position.x + sourceHandleX
const sourceY = props.sourceNode.position.y + sourceHandleY
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
const targetX = computed(() => (props.connectionPosition.x - props.transform[0]) / props.transform[2])
const targetY = computed(() => (props.connectionPosition.y - props.transform[1]) / props.transform[2])
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},${sourceY} ${targetX.value},${targetY.value}`
switch (props.connectionLineType) {
switch (store.connectionLineType) {
case ConnectionLineType.Bezier:
path = getBezierPath({
sourceX,
@@ -101,14 +76,14 @@ export default {
targetX,
targetY,
targetPosition,
connectionLineType: props.connectionLineType,
connectionLineStyle: props.connectionLineStyle,
nodes: props.nodes,
connectionLineType: store.connectionLineType,
connectionLineStyle: store.connectionLineStyle,
nodes: store.getNodes,
sourceNode: props.sourceNode,
sourceHandle,
}"
>
<path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />
<path :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle" />
</slot>
</g>
</template>