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

refactor: Destructure props with reactivity transform

Browse Source
This commit is contained in:
Braks
2022-04-22 14:28:41 +02:00
parent e722f49e6e
commit dc1d71d0bd
12 changed files with 182 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -1,4 +1,5 @@
const baseRules = {
'vue/no-setup-props-destructure': 0,
'no-console': 0,
'chai-friendly/no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
'prettier/prettier': ['error', {}, { usePrettierrc: true }],

1
package/.eslintrc.js
View File

@@ -1,6 +1,7 @@
module.exports = {
rules: {
'no-use-before-define': 0,
'vue/no-setup-props-destructure': 0,
},
extends: ['../.eslintrc.js'],
}

46
package/src/additional-components/Background/Background.vue
View File

@@ -3,15 +3,17 @@ import { BackgroundVariant } from '../../types'
import { useVueFlow } from '../../composables'
import type { BackgroundProps } from '../../types/components'
const props = withDefaults(defineProps<BackgroundProps>(), {
variant: 'dots' as BackgroundVariant,
gap: 10,
size: 0.4,
height: 100,
width: 100,
x: 0,
y: 0,
})
const {
variant = 'dots' as BackgroundVariant,
gap = 10,
size = 0.4,
height = 100,
width = 100,
x = 0,
y = 0,
bgColor,
patternColor: initialPatternColor,
} = defineProps<BackgroundProps>()
const defaultColors: Record<BackgroundVariant, string> = {
[BackgroundVariant.Dots]: '#81818a',
@@ -21,25 +23,23 @@ const defaultColors: Record<BackgroundVariant, string> = {
const { viewport } = $(useVueFlow())
const background = $computed(() => {
const scaledGap = props.gap && props.gap * viewport.zoom
const scaledGap = gap && gap * viewport.zoom
const xOffset = scaledGap && viewport.x % scaledGap
const yOffset = scaledGap && viewport.y % scaledGap
const size = props.size || 0.4 * viewport.zoom
const bgSize = size || 0.4 * viewport.zoom
return {
scaledGap,
xOffset,
yOffset,
size,
size: bgSize,
}
})
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
const patternColor = computed(() =>
props.patternColor ? props.patternColor : defaultColors[props.variant || BackgroundVariant.Dots],
)
const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
const d = computed(
() => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
@@ -54,8 +54,8 @@ export default {
<svg
class="vue-flow__background"
:style="{
height: `${props.height > 100 ? 100 : props.height}%`,
width: `${props.width > 100 ? 100 : props.width}%`,
height: `${height > 100 ? 100 : height}%`,
width: `${width > 100 ? 100 : width}%`,
}"
>
<pattern
@@ -66,17 +66,17 @@ export default {
:height="background.scaledGap"
patternUnits="userSpaceOnUse"
>
<template v-if="props.variant === BackgroundVariant.Lines">
<path :stroke="patternColor" :stroke-width="props.size" :d="d" />
<template v-if="variant === BackgroundVariant.Lines">
<path :stroke="patternColor" :stroke-width="size" :d="d" />
</template>
<template v-else-if="props.variant === BackgroundVariant.Dots">
<template v-else-if="variant === BackgroundVariant.Dots">
<circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
</template>
<svg v-if="props.bgColor" height="100" width="100">
<rect width="100%" height="100%" :fill="props.bgColor" />
<svg v-if="bgColor" height="100" width="100">
<rect width="100%" height="100%" :fill="bgColor" />
</svg>
</pattern>
<rect :x="props.x" :y="props.y" width="100%" height="100%" :fill="`url(#${patternId})`" />
<rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
<slot></slot>
</svg>
</template>

15
package/src/additional-components/Controls/Controls.vue
View File

@@ -8,11 +8,8 @@ import Fitview from '~/assets/icons/fitview.svg'
import Lock from '~/assets/icons/lock.svg'
import Unlock from '~/assets/icons/unlock.svg'
const props = withDefaults(defineProps<ControlProps>(), {
showZoom: true,
showFitView: true,
showInteractive: true,
})
const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
const emit = defineEmits<{
(event: 'zoom-in'): void
(event: 'zoom-out'): void
@@ -35,7 +32,7 @@ const onZoomOutHandler = () => {
}
const onFitViewHandler = () => {
instance?.fitView(props.fitViewParams)
instance?.fitView(fitViewParams)
emit('fit-view')
}
@@ -51,7 +48,7 @@ export default {
</script>
<template>
<div class="vue-flow__controls">
<template v-if="props.showZoom">
<template v-if="showZoom">
<slot name="control-zoom-in">
<ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
<slot name="icon-zoom-in">
@@ -68,14 +65,14 @@ export default {
</slot>
</template>
<slot name="control-fitview">
<ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
<ControlButton v-if="showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
<slot name="icon-fitview">
<Fitview />
</slot>
</ControlButton>
</slot>
<slot name="control-interactive">
<ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
<ControlButton v-if="showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
<slot name="icon-unlock">
<Unlock v-if="isInteractive" />
</slot>

33
package/src/additional-components/MiniMap/MiniMap.vue
View File

@@ -5,14 +5,14 @@ import { getBoundsofRects, getRectOfNodes } from '../../utils'
import type { MiniMapProps } from '../../types/components'
import MiniMapNode from './MiniMapNode'
const props = withDefaults(defineProps<MiniMapProps>(), {
nodeStrokeColor: '#555',
nodeColor: '#fff',
nodeClassName: '',
nodeBorderRadius: 5,
nodeStrokeWidth: 2,
maskColor: 'rgb(240, 242, 243, 0.7)',
})
const {
nodeStrokeColor = '#555',
nodeColor = '#fff',
nodeClassName,
nodeBorderRadius = 5,
nodeStrokeWidth = 2,
maskColor = 'rgb(240, 242, 243, 0.7)',
} = defineProps<MiniMapProps>()
const attrs: Record<string, any> = useAttrs()
@@ -27,13 +27,12 @@ const elementWidth = attrs.style?.width ?? defaultWidth
const elementHeight = attrs.style?.height ?? defaultHeight
const nodeColorFunc: MiniMapNodeFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
const nodeColorFunc: MiniMapNodeFunc = nodeColor instanceof Function ? nodeColor : () => nodeColor as string
const nodeStrokeColorFunc: MiniMapNodeFunc =
props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string
const nodeClassNameFunc =
props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc)
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
@@ -113,9 +112,9 @@ export default {
:style="node.style"
:class="nodeClassNameFunc(node)"
:color="nodeColorFunc(node)"
:border-radius="props.nodeBorderRadius"
:border-radius="nodeBorderRadius"
:stroke-color="nodeStrokeColorFunc(node)"
:stroke-width="props.nodeStrokeWidth"
:stroke-width="nodeStrokeWidth"
:shape-rendering="shapeRendering"
@click="(e: MouseEvent) => onNodeClick(e, node)"
@dblclick="(e: MouseEvent) => onNodeDblClick(e, node)"
@@ -131,12 +130,12 @@ export default {
:style="node.style"
:class="nodeClassNameFunc(node)"
:color="nodeColorFunc(node)"
:border-radius="props.nodeBorderRadius"
:border-radius="nodeBorderRadius"
:stroke-color="nodeStrokeColorFunc(node)"
:stroke-width="props.nodeStrokeWidth"
:stroke-width="nodeStrokeWidth"
:shape-rendering="shapeRendering"
/>
</MiniMapNode>
<path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
<path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
</svg>
</template>

16
package/src/components/ConnectionLine/ConnectionLine.vue
View File

@@ -8,7 +8,7 @@ interface ConnectionLineProps {
sourceNode: GraphNode
}
const props = defineProps<ConnectionLineProps>()
const { sourceNode } = defineProps<ConnectionLineProps>()
const {
getNodes,
@@ -27,14 +27,14 @@ const hasSlot = slots?.({})
const sourceHandle =
connectionHandleId && connectionHandleType
? props.sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
: connectionHandleType && props.sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
? sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
: connectionHandleType && sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height
const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
const sourceX = sourceNode.computedPosition.x + sourceHandleX
const sourceY = sourceNode.computedPosition.y + sourceHandleY
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
@@ -101,7 +101,7 @@ export default {
connectionLineType,
connectionLineStyle,
nodes: getNodes,
sourceNode: props.sourceNode,
sourceNode,
sourceHandle,
}"
/>

111
package/src/components/Edges/EdgeWrapper.vue
View File

@@ -15,13 +15,13 @@ interface EdgeWrapper {
updatable?: boolean
}
const props = defineProps<EdgeWrapper>()
const { id, edge, sourceNode, targetNode, selectable, updatable } = defineProps<EdgeWrapper>()
const slots = inject(Slots)
const { hooks, connectionMode, setState, addSelectedEdges, getEdgeTypes, edgeUpdaterRadius, noPanClassName } = $(useVueFlow())
const edge = $(useVModel(props, 'edge'))
const { hooks, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, addSelectedEdges, getEdgeTypes } = $(
useVueFlow(),
)
let name = $ref(edge.type ?? 'default')
watch(
@@ -31,41 +31,11 @@ watch(
let updating = $ref(false)
onMounted(() => {
watch(
[
sourcePosition,
targetPosition,
() => props.sourceNode.position,
() => props.targetNode.position,
() => props.sourceNode.computedPosition,
() => props.targetNode.computedPosition,
() => props.sourceNode.dimensions,
() => props.targetNode.dimensions,
],
() => {
const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
props.sourceNode,
sourceHandle.value,
sourcePosition.value,
props.targetNode,
targetHandle.value,
targetPosition.value,
)
if (edge.sourceX !== sourceX) edge.sourceX = sourceX
if (edge.sourceY !== sourceY) edge.sourceY = sourceY
if (edge.targetX !== targetX) edge.targetX = targetX
if (edge.targetY !== targetY) edge.targetY = targetY
},
{ immediate: true },
)
})
const { onMouseDown } = useHandle()
const onEdgeClick = (event: MouseEvent) => {
const data = { event, edge }
if (props.selectable) {
if (selectable) {
setState({
nodesSelectionActive: false,
})
@@ -112,35 +82,66 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
}
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() => {
const targetNodeHandles = $computed(() => {
if (connectionMode === ConnectionMode.Strict) {
return props.targetNode.handleBounds.target
return targetNode.handleBounds.target
}
const targetBounds = props.targetNode.handleBounds.target
const sourceBounds = props.targetNode.handleBounds.source
const targetBounds = targetNode.handleBounds.target
const sourceBounds = targetNode.handleBounds.source
return targetBounds ?? sourceBounds
})
const sourceNodeHandles = computed(() => {
const sourceNodeHandles = $computed(() => {
if (connectionMode === ConnectionMode.Strict) {
return props.sourceNode.handleBounds.source
return sourceNode.handleBounds.source
}
const targetBounds = props.sourceNode.handleBounds.target
const sourceBounds = props.sourceNode.handleBounds.source
const targetBounds = sourceNode.handleBounds.target
const sourceBounds = sourceNode.handleBounds.source
return sourceBounds ?? targetBounds
})
const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.sourceHandle))
const sourceHandle = $computed(() => getHandle(sourceNodeHandles, edge.sourceHandle))
const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.targetHandle))
const targetHandle = $computed(() => getHandle(targetNodeHandles, edge.targetHandle))
const sourcePosition = controlledComputed(sourceHandle, () =>
sourceHandle.value ? sourceHandle.value.position : Position.Bottom,
)
const sourcePosition = $(controlledComputed($$(sourceHandle), () => (sourceHandle ? sourceHandle.position : Position.Bottom)))
const targetPosition = controlledComputed(targetHandle, () => (targetHandle.value ? targetHandle.value.position : Position.Top))
const targetPosition = $(controlledComputed($$(targetHandle), () => (targetHandle ? targetHandle.position : Position.Top)))
onMounted(() => {
watch(
[
sourcePosition,
targetPosition,
() => sourceNode.position,
() => targetNode.position,
() => sourceNode.computedPosition,
() => targetNode.computedPosition,
() => sourceNode.dimensions,
() => targetNode.dimensions,
],
() => {
const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
sourceNode,
sourceHandle,
sourcePosition,
targetNode,
targetHandle,
targetPosition,
)
const edge = getEdge(id)!
if (edge.sourceX !== sourceX) edge.sourceX = sourceX
if (edge.sourceY !== sourceY) edge.sourceY = sourceY
if (edge.targetX !== targetX) edge.targetX = targetX
if (edge.targetY !== targetY) edge.targetY = targetY
},
{ immediate: true },
)
})
const type = computed(() => {
let edgeType = edge.template ?? getEdgeTypes[name]
@@ -175,7 +176,7 @@ const getClass = computed(() => {
{
selected: edge.selected,
animated: edge.animated,
inactive: !props.selectable,
inactive: !selectable,
updating,
},
extraClass,
@@ -203,11 +204,11 @@ export default {
<component
:is="type"
:id="edge.id"
:source-node="props.sourceNode"
:target-node="props.targetNode"
:source-node="sourceNode"
:target-node="targetNode"
:source="edge.source"
:target="edge.target"
:updatable="props.updatable"
:updatable="updatable"
:selected="edge.selected"
:animated="edge.animated"
:label="edge.label"
@@ -230,7 +231,7 @@ export default {
:target-handle-id="edge.targetHandle"
/>
<g
v-if="props.updatable"
v-if="updatable"
@mousedown="onEdgeUpdaterSourceMouseDown"
@mouseenter="onEdgeUpdaterMouseEnter"
@mouseout="onEdgeUpdaterMouseOut"
@@ -238,7 +239,7 @@ export default {
<EdgeAnchor :position="sourcePosition" :center-x="edge.sourceX" :center-y="edge.sourceY" :radius="edgeUpdaterRadius" />
</g>
<g
v-if="props.updatable"
v-if="updatable"
@mousedown="onEdgeUpdaterTargetMouseDown"
@mouseenter="onEdgeUpdaterMouseEnter"
@mouseout="onEdgeUpdaterMouseOut"

45
package/src/components/Handle/Handle.vue
View File

@@ -4,45 +4,47 @@ import { ConnectionMode, Position } from '../../types'
import { NodeId } from '../../context'
import type { HandleProps } from '../../types/handle'
const props = withDefaults(defineProps<HandleProps>(), {
type: 'source',
position: 'top' as Position,
connectable: true,
})
const {
type = 'source',
position = 'top' as Position,
connectable = true,
id,
isValidConnection = function () {
return true
},
} = defineProps<HandleProps>()
const { id, hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
const { hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
const nodeId = inject(NodeId, '')
const handleId = $computed(
() => props.id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
)
const handleId = $computed(() => id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${position}`))
const { onMouseDown, onClick } = useHandle()
const onMouseDownHandler = (event: MouseEvent) => {
onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
onMouseDown(event, handleId, nodeId, type === 'target', isValidConnection, undefined)
}
const onClickHandler = (event: MouseEvent) => {
onClick(event, handleId ?? null, nodeId, props.type, props.isValidConnection)
onClick(event, handleId ?? null, nodeId, type, isValidConnection)
}
const getClasses = computed(() => {
return [
'vue-flow__handle',
`vue-flow__handle-${props.position}`,
`vue-flow__handle-${position}`,
`vue-flow__handle-${handleId}`,
'nodrag',
{
source: props.type !== 'target',
target: props.type === 'target',
connectable: props.connectable,
source: type !== 'target',
target: type === 'target',
connectable,
connecting:
connectionStartHandle &&
connectionStartHandle.nodeId === nodeId &&
connectionStartHandle.handleId === handleId &&
connectionStartHandle.type === props.type,
connectionStartHandle.type === type,
},
]
})
@@ -56,11 +58,18 @@ export default {
<div
:data-handleid="handleId"
:data-nodeid="nodeId"
:data-handlepos="props.position"
:data-handlepos="position"
:class="getClasses"
@mousedown="onMouseDownHandler"
@click="onClickHandler"
>
<slot :node-id="nodeId" v-bind="props"></slot>
<slot
:id="id"
:node-id="nodeId"
:type="type"
:position="position"
:connectable="connectable"
:is-valid-connection="isValidConnection"
/>
</div>
</template>

32
package/src/components/Nodes/NodeWrapper.vue
View File

@@ -15,9 +15,9 @@ interface NodeWrapperProps {
snapGrid?: SnapGrid
}
const props = defineProps<NodeWrapperProps>()
const { id, node, draggable, selectable, connectable, snapGrid } = defineProps<NodeWrapperProps>()
provide(NodeId, props.id)
provide(NodeId, id)
const slots = inject(Slots)
@@ -35,8 +35,6 @@ const {
addSelectedNodes,
} = $(useVueFlow())
const node = $(useVModel(props, 'node'))
let name = $ref(node.type ?? 'default')
watch(
() => node.type,
@@ -47,8 +45,8 @@ const nodeElement = ref()
const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
handle: node.dragHandle,
disabled: !props.draggable,
grid: props.snapGrid,
disabled: !draggable,
grid: snapGrid,
cancel: `.${noDragClassName}`,
enableUserSelectHack: false,
scale: viewport.zoom,
@@ -100,12 +98,12 @@ watch(
}
if (parent) {
node.computedPosition = getXYZPos(parent, xyzPos)
getNode(id)!.computedPosition = getXYZPos(parent, xyzPos)
} else {
node.computedPosition = xyzPos
getNode(id)!.computedPosition = xyzPos
}
node.handleBounds = getHandleBounds(nodeElement.value, scale.value)
getNode(id)!.handleBounds = getHandleBounds(nodeElement.value, scale.value)
},
{ deep: true, flush: 'post' },
)
@@ -142,8 +140,8 @@ const onContextMenu = (event: MouseEvent) => {
const onDoubleClick = (event: MouseEvent) => hooks.nodeDoubleClick.trigger({ event, node })
const onSelectNode = (event: MouseEvent) => {
if (!props.draggable) {
if (props.selectable) {
if (!draggable) {
if (selectable) {
setState({
nodesSelectionActive: false,
})
@@ -182,13 +180,13 @@ onDragStart(({ event }) => {
addSelectedNodes([])
hooks.nodeDragStart.trigger({ event, node })
if (selectNodesOnDrag && props.selectable) {
if (selectNodesOnDrag && selectable) {
setState({
nodesSelectionActive: false,
})
if (!node.selected) addSelectedNodes([node])
} else if (!selectNodesOnDrag && !node.selected && props.selectable) {
} else if (!selectNodesOnDrag && !node.selected && selectable) {
setState({
nodesSelectionActive: false,
})
@@ -206,7 +204,7 @@ onDragStop(({ event, data: { deltaX, deltaY } }) => {
// 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 (!node.dragging) {
if (props.selectable && !selectNodesOnDrag && !node.selected) {
if (selectable && !selectNodesOnDrag && !node.selected) {
addSelectedNodes([node])
}
hooks.nodeClick.trigger({ event, node })
@@ -225,7 +223,7 @@ const getClass = computed(() => {
{
dragging: node.dragging,
selected: node.selected,
selectable: props.selectable,
selectable,
},
extraClass,
]
@@ -241,7 +239,7 @@ const getStyle = computed(() => {
return {
zIndex: node.computedPosition.z,
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
pointerEvents: selectable || draggable ? 'all' : 'none',
...styles,
} as CSSProperties
})
@@ -271,7 +269,7 @@ export default {
:type="node.type"
:data="node.data"
:selected="!!node.selected"
:connectable="props.connectable"
:connectable="connectable"
:position="node.position"
:computed-position="node.computedPosition"
:dimensions="node.dimensions"

8
package/src/components/UserSelection/SelectionRect.vue
View File

@@ -6,7 +6,7 @@ interface SelectionRectProps {
y: number
}
const props = defineProps<SelectionRectProps>()
const { width, height, x, y } = defineProps<SelectionRectProps>()
</script>
<script lang="ts">
export default {
@@ -17,9 +17,9 @@ export default {
<div
class="vue-flow__selection"
:style="{
width: `${props.width}px`,
height: `${props.height}px`,
transform: `translate(${props.x}px, ${props.y}px)`,
width: `${width}px`,
height: `${height}px`,
transform: `translate(${x}px, ${y}px)`,
}"
/>
</template>

42
package/src/container/EdgeRenderer/Marker.vue
View File

@@ -1,14 +1,16 @@
<script lang="ts" setup>
import type { MarkerProps } from '../../types/edge'
const props = withDefaults(defineProps<MarkerProps>(), {
width: 12.5,
height: 12.5,
markerUnits: 'strokeWidth',
orient: 'auto',
strokeWidth: 1,
color: 'none',
})
const {
id,
type,
width = 12.5,
height = 12.5,
markerUnits = 'strokeWidth',
orient = 'auto',
strokeWidth = 1,
color = 'none',
} = defineProps<MarkerProps>()
</script>
<script lang="ts">
export default {
@@ -17,31 +19,31 @@ export default {
</script>
<template>
<marker
:id="props.id"
:id="id"
class="vue-flow__arrowhead"
viewBox="-10 -10 20 20"
refX="0"
refY="0"
:markerWidth="`${props.width}`"
:markerHeight="`${props.height}`"
:markerUnits="props.markerUnits"
:orient="props.orient"
:markerWidth="`${width}`"
:markerHeight="`${height}`"
:markerUnits="markerUnits"
:orient="orient"
>
<polyline
v-if="props.type === 'arrowclosed'"
:stroke="props.color"
v-if="type === 'arrowclosed'"
:stroke="color"
stroke-linecap="round"
stroke-linejoin="round"
:stroke-width="props.strokeWidth"
:fill="props.color"
:stroke-width="strokeWidth"
:fill="color"
points="-5,-4 0,0 -5,4 -5,-4"
/>
<polyline
v-if="props.type === 'arrow'"
:stroke="props.color"
v-if="type === 'arrow'"
:stroke="color"
stroke-linecap="round"
stroke-linejoin="round"
:stroke-width="props.strokeWidth"
:stroke-width="strokeWidth"
fill="none"
points="-5,-4 0,0 -5,4"
/>

8
package/src/container/EdgeRenderer/MarkerDefinitions.vue
View File

@@ -9,9 +9,7 @@ interface MarkerDefinitionsProps {
defaultColor: string
}
const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
defaultColor: '',
})
const { defaultColor = '' } = defineProps<MarkerDefinitionsProps>()
const { edges } = $(useVueFlow())
@@ -23,8 +21,8 @@ const markers = computed(() => {
if (marker) {
const markerId = getMarkerId(marker)
if (!ids.includes(markerId)) {
if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || props.defaultColor })
else markers.push({ id: markerId, color: props.defaultColor, type: marker as MarkerType })
if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
else markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
ids.push(markerId)
}
}