alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(examples): cleanup

Browse Source
This commit is contained in:
moklick
2023-11-16 11:55:59 +01:00
parent 14caf422c3
commit b56f5ad9e1
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/DragNDrop/index.tsx
+2 -2
View File
@@ -49,7 +49,7 @@ const DnDFlow = () => {
if (reactFlowInstance) { if (reactFlowInstance) {
const type = event.dataTransfer.getData('application/reactflow'); const type = event.dataTransfer.getData('application/reactflow');
const position = reactFlowInstance.screenToFlowCoordinate({ const position = reactFlowInstance.screenToFlowPosition({
x: event.clientX, x: event.clientX,
y: event.clientY, y: event.clientY,
}); });
@@ -66,7 +66,7 @@ const DnDFlow = () => {
return ( return (
<div className={styles.dndflow}> <div className={styles.dndflow}>
<ReactFlowProvider nodes={initialNodes} edges={[]}> <ReactFlowProvider initialNodes={initialNodes} initialEdges={[]}>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
+5 -6
View File
@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { SvelteFlow, useSvelteFlow } from '@xyflow/svelte';
import type { Edge, Node } from '@xyflow/svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import { SvelteFlow, useSvelteFlow, type Edge, type Node } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css'; import '@xyflow/svelte/dist/style.css';
@@ -22,7 +21,7 @@
let id = 1; let id = 1;
const getId = () => `${id++}`; const getId = () => `${id++}`;
const { screenToFlowCoordinate, flowToScreenCoordinate } = useSvelteFlow(); const { screenToFlowPosition, flowToScreenPosition } = useSvelteFlow();
function handleConnectEnd({ detail: { event } }: { detail: { event: MouseEvent | TouchEvent } }) { function handleConnectEnd({ detail: { event } }: { detail: { event: MouseEvent | TouchEvent } }) {
// See of connection landed inside the flow pane // See of connection landed inside the flow pane
@@ -34,7 +33,7 @@
y: event.clientY y: event.clientY
}; };
const doubleTransformedPosition = flowToScreenCoordinate(screenToFlowCoordinate(position)); const doubleTransformedPosition = flowToScreenPosition(screenToFlowPosition(position));
console.log( console.log(
'Is transforming in both directions (screen-flow, flow-screen) the same?', 'Is transforming in both directions (screen-flow, flow-screen) the same?',
position.x === doubleTransformedPosition.x && position.y === doubleTransformedPosition.y position.x === doubleTransformedPosition.x && position.y === doubleTransformedPosition.y
@@ -43,8 +42,8 @@
const newNode: Node = { const newNode: Node = {
id, id,
data: { label: `Node ${id}` }, data: { label: `Node ${id}` },
// project the screen coordinates to pane coordinates // project the screen position to pane position
position: screenToFlowCoordinate(position), position: screenToFlowPosition(position),
// set the origin of the new node so it is centered // set the origin of the new node so it is centered
origin: [0.5, 0.0] origin: [0.5, 0.0]
}; };