alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nodes): Add teleport option to nodes

Browse Source 
# What's changed?

* Add option to set a teleport target to nodes
This commit is contained in:
Braks
2022-05-27 23:36:01 +02:00
parent ce7569da5f
commit 0d35f1c7e3
2 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+36 -34
View File
@@ -246,38 +246,40 @@ export default {
</script> </script>
<template> <template>
<div <Teleport :disabled="!node.teleport" :to="node.teleport">
ref="nodeElement" <div
:class="getClass" ref="nodeElement"
:style="getStyle" :class="getClass"
:data-id="id" :style="getStyle"
@mouseenter="onMouseEnter" :data-id="id"
@mousemove="onMouseMove" @mouseenter="onMouseEnter"
@mouseleave="onMouseLeave" @mousemove="onMouseMove"
@contextmenu="onContextMenu" @mouseleave="onMouseLeave"
@click="onSelectNode" @contextmenu="onContextMenu"
@dblclick="onDoubleClick" @click="onSelectNode"
> @dblclick="onDoubleClick"
<component >
:is="type" <component
:id="node.id" :is="type"
:type="node.type" :id="node.id"
:data="node.data" :type="node.type"
:selected="!!node.selected" :data="node.data"
:connectable="connectable" :selected="!!node.selected"
:position="node.position" :connectable="connectable"
:computed-position="node.computedPosition" :position="node.position"
:dimensions="node.dimensions" :computed-position="node.computedPosition"
:is-valid-target-pos="node.isValidTargetPos" :dimensions="node.dimensions"
:is-valid-source-pos="node.isValidSourcePos" :is-valid-target-pos="node.isValidTargetPos"
:parent-node="node.parentNode" :is-valid-source-pos="node.isValidSourcePos"
:dragging="!!node.dragging" :parent-node="node.parentNode"
:z-index="node.computedPosition.z" :dragging="!!node.dragging"
:target-position="node.targetPosition" :z-index="node.computedPosition.z"
:source-position="node.sourcePosition" :target-position="node.targetPosition"
:label="node.label" :source-position="node.sourcePosition"
:drag-handle="node.dragHandle" :label="node.label"
:node-element="nodeElement" :drag-handle="node.dragHandle"
/> :node-element="nodeElement"
</div> />
</div>
</Teleport>
</template> </template>
packages/vue-flow/src/types/node.ts
+4 -1
View File
@@ -1,4 +1,4 @@
import type { Component, VNode } from 'vue' import type { Component, TeleportProps, VNode } from 'vue'
import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow' import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow'
import type { DefaultNodeTypes, NodeComponent } from './components' import type { DefaultNodeTypes, NodeComponent } from './components'
import type { HandleElement, ValidConnectionFunc } from './handle' import type { HandleElement, ValidConnectionFunc } from './handle'
@@ -58,6 +58,9 @@ export interface Node<Data = ElementData> extends BaseElement<Data> {
/** overwrites current node type */ /** overwrites current node type */
template?: NodeComponent template?: NodeComponent
/** teleports node element to specified dom location */
teleport?: TeleportProps['to']
} }
export interface GraphNode<Data = ElementData> extends Node<Data> { export interface GraphNode<Data = ElementData> extends Node<Data> {