remove example

This commit is contained in:
peterkogo
2025-06-12 13:57:19 +02:00
parent 8474ba49cc
commit fe5b8c453f
2 changed files with 0 additions and 109 deletions

View File

@@ -24,7 +24,6 @@
import '@xyflow/svelte/dist/style.css';
import InitTracker from './InitTracker.svelte';
import TriggerConnection from './TriggerConnection.svelte';
const nodeTypes: NodeTypes = {
custom: CustomNode,
@@ -244,7 +243,6 @@
}));
}}>left-right</button
>
<TriggerConnection />
</Panel>
<InitTracker />
</SvelteFlow>

View File

@@ -1,107 +0,0 @@
<script lang="ts">
import { useConnection, useViewport } from '@xyflow/svelte';
const connection = useConnection();
const viewport = useViewport();
let blockMouseUp = true;
// Replace this with the flowId of your flow (default is 1)
const flowId = 1;
/** Replace this selector with the handle of your choice.
* Take a look at the DOM structure to see what how the data-*
* attributes are structured for handles
*/
const fromHandleSelector = '[data-nodeid="1"].svelte-flow__handle';
function createPointerEvent(type: string, element: HTMLElement) {
const { left, top } = element.getBoundingClientRect();
return new PointerEvent(type, {
bubbles: true,
cancelable: true,
pointerId: 1,
pointerType: 'mouse',
clientX: left + element.offsetWidth / 2,
clientY: top + element.offsetHeight / 2,
button: 0,
buttons: 1
});
}
function mouseDownBlocker(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
}
function mouseUpBlocker(event: MouseEvent) {
// we only want to block the original mouseUpEvent
if (!blockMouseUp) {
return;
}
event.preventDefault();
event.stopPropagation();
connectionFinish();
}
function addEventListeners() {
document.addEventListener('mousedown', mouseDownBlocker, true);
document.addEventListener('mouseup', mouseUpBlocker, true);
}
function removeEventListeners() {
document.removeEventListener('mousedown', mouseDownBlocker, true);
document.removeEventListener('mouseup', mouseUpBlocker, true);
}
function connectionFinish() {
blockMouseUp = false;
const { inProgress, isValid, toHandle } = connection.current;
if (inProgress && isValid && toHandle) {
const toHandleElement = document.querySelector(
`[data-id="${flowId}-${toHandle.nodeId}-${toHandle.id ?? null}-${toHandle.type}"].svelte-flow__handle`
) as HTMLElement | null;
if (toHandleElement) {
const mouseupEvent = createPointerEvent('mouseup', toHandleElement);
const success = toHandleElement.dispatchEvent(mouseupEvent);
if (success) {
removeEventListeners();
return;
}
}
}
connectionCancel();
}
function connectionStart() {
const fromHandle = document.querySelector(fromHandleSelector) as HTMLElement | null;
if (fromHandle) {
const mousedownEvent = createPointerEvent('mousedown', fromHandle);
const success = fromHandle.dispatchEvent(mousedownEvent);
if (success) {
blockMouseUp = true;
addEventListeners();
}
}
}
function connectionCancel() {
const fromHandle = document.querySelector(fromHandleSelector) as HTMLElement | null;
if (fromHandle) {
const mouseUpEvent = createPointerEvent('mouseup', fromHandle);
fromHandle.dispatchEvent(mouseUpEvent);
}
removeEventListeners();
}
</script>
<!-- onclick works as well -->
<button onpointerdown={connectionStart}>trigger-connection</button>