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

feat: script setup style

Browse Source 
* Add Node.vue
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 9307c9066a
commit f8728f0d6e
4 changed files with 266 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Node.vue
+192
View File
@@ -0,0 +1,192 @@
<script lang="ts" setup>
import { computed, inject, onMounted, provide } from 'vue'
import { DraggableEventListener } from '@braks/revue-draggable'
import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
import { Node, RevueFlowStore, NodeDimensionUpdate } from '~/types'
interface NodeProps {
node: Node
snapToGrid?: boolean
snapGrid?: [number, number]
scale?: number
selectNodesOnDrag: boolean
}
const props = withDefaults(defineProps<NodeProps>(), {
selectNodesOnDrag: true,
scale: 1,
})
const emit = defineEmits(['updateNodeDimensions'])
const store = inject<RevueFlowStore>('store')!
const hooks = inject<RevueFlowHooks>('hooks')!
provide('NodeIdContext', props.node.id)
const nodeElement = templateRef<HTMLDivElement>('nodeElement', null)
const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false)
const isDraggable = computed(() => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined'))
const isSelectable = computed(
() => props.node.selectable || (store.elementsSelectable && typeof props.node.selectable === 'undefined'),
)
const isConnectable = computed(
() => props.node.connectable || (store.nodesConnectable && typeof props.node.connectable === 'undefined'),
)
const onMouseEnterHandler = () => {
if (props.node.__rf.isDragging) {
return
}
return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node })
}
const onMouseMoveHandler = () => {
if (props.node.__rf.isDragging) {
return
}
return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node })
}
const onMouseLeaveHandler = () => {
if (props.node.__rf.isDragging) {
return
}
return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node })
}
const onContextMenuHandler = () => {
return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
}
const onSelectNodeHandler = (event: MouseEvent) => {
if (!isDraggable.value) {
const n = props.node
if (isSelectable.value) {
store.unsetNodesSelection()
if (!selected.value) {
store.addSelectedElements([n])
}
}
hooks.nodeClick.trigger({ event, node: n })
}
}
const onDragStart: DraggableEventListener = ({ event }) => {
const n = props.node
hooks.nodeDragStart.trigger({ event, node: n })
if (props.selectNodesOnDrag && isSelectable.value) {
store.unsetNodesSelection()
if (!selected.value) {
store.addSelectedElements([n])
}
} else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
store.unsetNodesSelection()
store.addSelectedElements([])
}
}
const onDrag: DraggableEventListener = ({ event, data }) => {
const n = props.node
n.position.x += data.deltaX
n.position.y += data.deltaY
hooks.nodeDrag.trigger({ event, node: n })
store?.updateNodePosDiff({
id: props.node.id as string,
diff: {
x: data.deltaX,
y: data.deltaY,
},
isDragging: true,
})
}
const onDragStop: DraggableEventListener = ({ event }) => {
const n = props.node
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__rf.isDragging) {
if (isSelectable.value && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n })
return
}
store.updateNodePosDiff({
id: n.id,
isDragging: false,
})
hooks.nodeDragStop.trigger({ event, node: n })
}
useResizeObserver(nodeElement, (entries) => {
const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
id: entry.target.getAttribute('data-id') as string,
nodeElement: entry.target as HTMLDivElement,
}))
emit('updateNodeDimensions', updates)
})
onMounted(() => {
emit('updateNodeDimensions', [
{
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
},
])
})
</script>
<template>
<DraggableCore
v-if="!props.node.isHidden"
cancel=".nodrag"
:scale="props.scale"
:disabled="!isDraggable"
:grid="props.snapGrid"
:enable-user-select-hack="false"
@start="onDragStart"
@move="onDrag"
@stop="onDragStop"
>
<div
ref="nodeElement"
:class="[
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
{
selected: selected,
selectable: isSelectable,
},
]"
:style="{
zIndex: selected ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
...props.node.style,
}"
:data-id="props.node.id"
@mouseenter="onMouseEnterHandler"
@mousemove="onMouseMoveHandler"
@mouseleave="onMouseLeaveHandler"
@contextmenu="onContextMenuHandler"
@click="onSelectNodeHandler"
>
<slot :selected="selected" :isConnectable="isConnectable"></slot>
</div>
</DraggableCore>
</template>
src/components/Nodes/utils.ts
+13 -13
View File
@@ -1,20 +1,11 @@
import { HandleElement, Position } from '../../types'
import { getDimensions } from '../../utils'
export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
const bounds = nodeElement.getBoundingClientRect()
return {
source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale)
}
}
import { HandleElement, Position } from '~/types'
import { getDimensions } from '~/utils'
export const getHandleBoundsByHandleType = (
selector: string,
nodeElement: HTMLDivElement,
parentBounds: ClientRect | DOMRect,
k: number
k: number,
): HandleElement[] | null => {
const handles = nodeElement.querySelectorAll(selector)
@@ -35,7 +26,16 @@ export const getHandleBoundsByHandleType = (
position: handlePosition,
x: (bounds.left - parentBounds.left) / k,
y: (bounds.top - parentBounds.top) / k,
...dimensions
...dimensions,
}
})
}
export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
const bounds = nodeElement.getBoundingClientRect()
return {
source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
}
}
src/composables/useZoom.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import { RevueFlowHooks } from '~/hooks/RevueFlowHooks'
import { clamp } from '~/utils'
import useKeyPress from '~/hooks/useKeyPress'
import useZoomPanHelper from '~/hooks/useZoomPanHelper'
import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
// import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
src/container/NodeRenderer.vue
+60 -16
View File
@@ -1,7 +1,9 @@
<script lang="ts" setup>
import Node from '~/components/Nodes/Node'
import { NodeType, Node as TNode, Transform, Dimensions } from '~/types'
import Node from '~/components/Node.vue'
import { NodeType, Node as TNode, Transform, Dimensions, NodeDimensionUpdate } from '~/types'
import { getNodesInside } from '~/utils/graph'
import { getDimensions } from '~/utils'
import { getHandleBounds } from '~/components/Nodes/utils'
interface NodeRendererProps {
nodes: TNode[]
@@ -24,11 +26,12 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
dimensions: () => ({ width: 0, height: 0 }),
})
const nodes = ref(props.nodes)
const getNodes = () =>
props.onlyRenderVisibleElements
? props.nodes &&
? nodes.value &&
getNodesInside(
props.nodes,
nodes.value,
{
x: 0,
y: 0,
@@ -38,20 +41,45 @@ const getNodes = () =>
props.transform,
true,
)
: props.nodes
: nodes.value
const cNodes = computed(() => getNodes())
const type = (node: TNode) => {
const nodeType = node.type || 'default'
if (props.nodeTypes) {
const type = props.nodeTypes[nodeType] || props.nodeTypes.default
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
}
return type
const type = props.nodeTypes[nodeType] || props.nodeTypes.default
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
}
return false
return type
}
const updateNodeDimensions = (updates: NodeDimensionUpdate[]) => {
nodes.value = nodes.value.map((node) => {
const update = updates.find((u) => u.id === node.id)
if (update) {
const dimensions = getDimensions(update.nodeElement)
const doUpdate =
dimensions.width &&
dimensions.height &&
(node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || update.forceUpdate)
if (doUpdate) {
const handleBounds = getHandleBounds(update.nodeElement, props.transform[2])
return {
...node,
__rf: {
...node.__rf,
...dimensions,
handleBounds,
},
}
}
}
return node
})
}
</script>
<template>
@@ -60,15 +88,31 @@ const type = (node: TNode) => {
:style="{ transform: `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})` }"
>
<template v-for="(node, i) of cNodes" :key="`node-${i}`">
<div>Node</div>
<Node
v-if="type(node)"
:node="node"
:snap-grid="props.snapGrid"
:snap-to-grid="props.snapToGrid"
:select-nodes-on-drag="props.selectNodesOnDrag"
:type="type(node)"
/>
:scale="props.transform[2]"
@updateNodeDimensions="updateNodeDimensions"
>
<template #default="{ selected, isConnectable }">
<component
:is="type(node)"
v-bind="{
data: node.data,
type: node.type,
xPos: node.__rf.position.x,
yPos: node.__rf.position.y,
selected: selected,
isConnectable: isConnectable,
sourcePosition: node.sourcePosition,
targetPosition: node.targetPosition,
isDragging: node.__rf.isDragging,
}"
/>
</template>
</Node>
</template>
</div>
</template>