64 lines
1.3 KiB
Svelte
64 lines
1.3 KiB
Svelte
|
<script>
|
|||
|
|
import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/svelte";
|
|||
|
|
import { auto, removeEdge } from "./stores.js";
|
|||
|
|
|
|||
|
|
export let id;
|
|||
|
|
export let sourceX;
|
|||
|
|
export let sourceY;
|
|||
|
|
export let targetX;
|
|||
|
|
export let targetY;
|
|||
|
|
export let sourcePosition;
|
|||
|
|
export let targetPosition;
|
|||
|
|
export let markerEnd;
|
|||
|
|
|
|||
|
|
$: positions = getBezierPath({
|
|||
|
|
sourceX,
|
|||
|
|
sourceY,
|
|||
|
|
sourcePosition,
|
|||
|
|
targetX,
|
|||
|
|
targetY,
|
|||
|
|
targetPosition,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$: edgePath = positions[0];
|
|||
|
|
$: labelX = positions[1];
|
|||
|
|
$: labelY = positions[2];
|
|||
|
|
|
|||
|
|
function onClick(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
removeEdge(id);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<BaseEdge path={edgePath} {markerEnd} />
|
|||
|
|
<EdgeLabelRenderer>
|
|||
|
|
<div
|
|||
|
|
style="position: absolute; transform: translate(-50%, -50%) translate({labelX}px,{labelY}px); fontSize: 12; pointer-events: all"
|
|||
|
|
class="nodrag nopan"
|
|||
|
|
>
|
|||
|
|
{#if !$auto}
|
|||
|
|
<button class="edgebutton" on:click={onClick}>×</button>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
</EdgeLabelRenderer>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.edgebutton {
|
|||
|
|
padding: 0;
|
|||
|
|
top: -3px;
|
|||
|
|
position: relative;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
background: pink;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 8px;
|
|||
|
|
line-height: 1;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* .edgebutton:hover { */
|
|||
|
|
/* box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08); */
|
|||
|
|
/* } */
|
|||
|
|
</style>
|