diff --git a/.changeset/fifty-cherries-perform.md b/.changeset/fifty-cherries-perform.md new file mode 100644 index 00000000..728e6424 --- /dev/null +++ b/.changeset/fifty-cherries-perform.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Remove node intersections from drag event args diff --git a/docs/examples/intersection/App.vue b/docs/examples/intersection/App.vue index c9e997cb..cda8038e 100644 --- a/docs/examples/intersection/App.vue +++ b/docs/examples/intersection/App.vue @@ -1,12 +1,12 @@ diff --git a/docs/examples/intersection/style.css b/docs/examples/intersection/style.css index 78844900..f6c7f832 100644 --- a/docs/examples/intersection/style.css +++ b/docs/examples/intersection/style.css @@ -1,3 +1,19 @@ .vue-flow__node.intersecting { - background-color: yellow; + background-color: #f15a16; +} + +.vue-flow__panel { + height: 250px; + width: 250px; + border: 1px dashed #ccc; + pointer-events: none !important; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; +} + +.vue-flow__panel.intersecting { + border-color: #f15a16; + background-color: rgba(241, 90, 22, 0.03); } diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts index 0be970ad..94787aa9 100644 --- a/docs/src/.vitepress/config.mts +++ b/docs/src/.vitepress/config.mts @@ -210,7 +210,6 @@ export default defineConfigWithTheme({ { text: 'Screenshot', link: '/examples/screenshot' }, { text: 'Confirm Delete', link: '/examples/confirm' }, { text: 'Hidden', link: '/examples/hidden' }, - { text: 'Node Intersections', link: '/examples/intersection' }, { text: 'Multiple Flows', link: '/examples/multi' }, { text: 'Pinia Store', link: '/examples/pinia' }, { text: 'Viewport Transition', link: '/examples/transition' }, @@ -224,6 +223,7 @@ export default defineConfigWithTheme({ items: [ { text: 'Custom Node', link: '/examples/nodes/' }, { text: 'Update Node', link: '/examples/nodes/update-node' }, + { text: 'Intersections', link: '/examples/nodes/intersection' }, { text: 'Nested Nodes', link: '/examples/nodes/nesting' }, { text: 'Node Resizer', link: '/examples/nodes/node-resizer' }, { text: 'Node Toolbar', link: '/examples/nodes/node-toolbar' }, diff --git a/docs/src/examples/intersection.md b/docs/src/examples/intersection.md deleted file mode 100644 index 89f907d1..00000000 --- a/docs/src/examples/intersection.md +++ /dev/null @@ -1,7 +0,0 @@ -# Intersection - -Vue Flow provides utils to find intersections of nodes with other nodes (or a given area). - -
- -
diff --git a/docs/src/examples/nodes/intersection.md b/docs/src/examples/nodes/intersection.md new file mode 100644 index 00000000..09121eec --- /dev/null +++ b/docs/src/examples/nodes/intersection.md @@ -0,0 +1,9 @@ +# Node Intersections + +Sometimes you need to know if two nodes intersect. `useVueFlow` provides you methods like `getIntersectingNodes` +or `isNodeIntersection` to help you find out when two or more nodes intersect, +or if a node intersects with a given area. + +
+ +
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index 36be4f15..663a42e1 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -50,7 +50,6 @@ const NodeWrapper = defineComponent({ addSelectedNodes, updateNodeDimensions, onUpdateNodeInternals, - getIntersectingNodes, getNodeTypes, nodeExtent, elevateNodesOnSelect, @@ -120,17 +119,16 @@ const NodeWrapper = defineComponent({ id: props.id, el: nodeElement, disabled: () => !isDraggable.value, - selectable: () => isSelectable.value, + selectable: isSelectable, dragHandle: () => node.dragHandle, onStart(args) { - // todo: remove intersections from here - they are not needed and only reduce performance - emit.dragStart({ ...args, intersections: getIntersectingNodes(node) }) + emit.dragStart(args) }, onDrag(args) { - emit.drag({ ...args, intersections: getIntersectingNodes(node) }) + emit.drag(args) }, onStop(args) { - emit.dragStop({ ...args, intersections: getIntersectingNodes(node) }) + emit.dragStop(args) }, }) diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts index cad49e44..64181002 100644 --- a/packages/core/src/types/hooks.ts +++ b/packages/core/src/types/hooks.ts @@ -21,7 +21,6 @@ export interface NodeDragEvent { event: MouseTouchEvent node: GraphNode nodes: GraphNode[] - intersections?: GraphNode[] } export interface EdgeMouseEvent {