getEdgeId #58
-
|
🙏 Can you please make |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
You can add edge properties to the params: onConnect((params) => {
addEdges([
{
...params,
style: { stroke: 'blue' },
animated: true,
label: `${params.source} - connected to - ${params.target}`,
labelBgStyle: { fill: 'orange' },
},
])
})Here the TypeScript interface as a reference /** base element props */
export interface Element {
id: string
label?:
| string
| {
props?: any
component: any
}
type?: string
data?: Data
class?: string
style?: CSSProperties
hidden?: boolean
}
export interface Edge extends Element {
/** Source node id */
source: string
/** Target node id */
target: string
/** Source handle id */
sourceHandle?: string | null
/** Target handle id */
targetHandle?: string | null
/** Source position */
sourcePosition?: Position
/** Target position */
targetPosition?: Position
/** Label styles (CSSProperties) */
labelStyle?: CSSProperties
/** Show label bg */
labelShowBg?: boolean
/** Label Bg styles (CSSProperties) */
labelBgStyle?: CSSProperties
/** Label Bg padding */
labelBgPadding?: [number, number]
/** Label Bg border radius */
labelBgBorderRadius?: number
/** Animated edge */
animated?: boolean
/** EdgeMarker */
markerStart?: EdgeMarkerType
/** EdgeMarker */
markerEnd?: EdgeMarkerType
/** Disable/enable updating edge */
updatable?: boolean
/** Disable/enable selecting edge */
selectable?: boolean
} |
Beta Was this translation helpful? Give feedback.
-
|
You could implement a custom edge for that: <script lang="ts" setup>
import { getEdgeCenter, getBezierPath, Position, useVueFlow, EdgeProps } from '@braks/vue-flow'
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
id: string
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
data?: T
markerEnd: string
selected?: boolean
}
const props = defineProps<CustomEdgeProps>()
const { id: storeId, applyEdgeChanges, store, getEdges } = useVueFlow()
const onClick = (evt: Event, id: string) => {
applyEdgeChanges([{ type: 'remove', id }])
evt.stopPropagation()
}
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 center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
}),
)
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
<foreignObject
:width="foreignObjectSize"
:height="foreignObjectSize"
:x="center[0] - foreignObjectSize / 2"
:y="center[1] - foreignObjectSize / 2"
class="edgebutton-foreignobject"
requiredExtensions="http://www.w3.org/1999/xhtml"
>
<body>
<Transition name="fade">
<button v-if="props.selected" class="edgebutton" @click="(event) => onClick(event, props.id)">×</button>
</Transition>
</body>
</foreignObject>
</template>
<style>
.edgebutton {
border-radius: 999px;
cursor: pointer;
transition: opacity 100ms ease-in-out;
}
.edgebutton:hover {
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>I updated the example. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! It was very helpful! If you want I can give you this my test project sources so you can use them as example for fellows that use Quasar. Just say) |
Beta Was this translation helpful? Give feedback.
-
|
Yes sure :) |
Beta Was this translation helpful? Give feedback.
-
|
quasar2_vue-flows_0.4.0-30 custom nodes, edge and menu Here you are! Thanks for additional example. But I made it before) UPD fixed |
Beta Was this translation helpful? Give feedback.
-
|
sorry. update files again it was a bug)) |
Beta Was this translation helpful? Give feedback.
You can add edge properties to the params:
Here the TypeScript interface as a reference