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

chore(core): cleanup

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-16 09:20:13 +01:00
committed by Braks
parent e678f6fdd8
commit ccb302f132
1 changed files with 0 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
packages/core/src/components/Nodes/NodeWrapper.vue
View File

@@ -1,328 +0,0 @@
<script lang="ts" setup>
import { isNumber } from '@vueuse/core'
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
import { ARIA_NODE_DESC_KEY } from '../../utils/a11y'
const { id, type, name, draggable, selectable, connectable, ...props } = defineProps<{
id: string
draggable: boolean
selectable: boolean
connectable: HandleConnectable
focusable: boolean
type: NodeComponent | Function | Object | false
name: string
node: GraphNode
resizeObserver: ResizeObserver
}>()
provide(NodeId, id)
const {
id: vueFlowId,
edges,
noPanClassName,
selectNodesOnDrag,
nodesSelectionActive,
multiSelectionActive,
emits,
findNode,
removeSelectedNodes,
addSelectedNodes,
updateNodeDimensions,
onUpdateNodeInternals,
getIntersectingNodes,
getNodeTypes,
nodeExtent,
elevateNodesOnSelect,
disableKeyboardA11y,
ariaLiveMessage,
snapToGrid,
snapGrid,
} = $(useVueFlow())
const updateNodePositions = useUpdateNodePositions()
const node = $(useVModel(props, 'node'))
const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode) : undefined))
const connectedEdges = $computed(() => getConnectedEdges([node], edges))
const nodeElement = ref<HTMLDivElement>()
provide(NodeRef, nodeElement)
const { emit, on } = useNodeHooks(node, emits)
const dragging = useDrag({
id,
el: nodeElement,
disabled: computed(() => !draggable),
selectable: computed(() => selectable),
onStart(event, node, nodes) {
emit.dragStart({ event, node, nodes, intersections: getIntersectingNodes(node) })
},
onDrag(event, node, nodes) {
emit.drag({ event, node, nodes, intersections: getIntersectingNodes(node) })
},
onStop(event, node, nodes) {
emit.dragStop({ event, node, nodes, intersections: getIntersectingNodes(node) })
},
})
const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
const getStyle = computed(() => {
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
const width = node.width instanceof Function ? node.width(node) : node.width
const height = node.height instanceof Function ? node.height(node) : node.height
if (width) styles.width = typeof width === 'string' ? width : `${width}px`
if (height) styles.height = typeof height === 'string' ? height : `${height}px`
return styles
})
const zIndex = computed(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(id)) {
updateInternals()
}
})
onMounted(() => {
props.resizeObserver.observe(nodeElement.value as HTMLDivElement)
})
onBeforeUnmount(() => {
props.resizeObserver.unobserve(nodeElement.value as HTMLDivElement)
})
watch(
[() => node.type, () => node.sourcePosition, () => node.targetPosition],
() => {
updateNodeDimensions([{ id, nodeElement: nodeElement.value as HTMLDivElement, forceUpdate: true }])
},
{ flush: 'pre' },
)
/** this watcher only updates XYZPosition (when dragging a parent etc) */
watch(
[
() => node.position.x,
() => node.position.y,
() => parentNode?.computedPosition.x,
() => parentNode?.computedPosition.y,
() => parentNode?.computedPosition.z,
() => node.selected,
() => node.dimensions.height,
() => node.dimensions.width,
() => parentNode?.dimensions.height,
() => parentNode?.dimensions.width,
zIndex,
],
([newX, newY, parentX, parentY, parentZ]) => {
const xyzPos = {
x: newX,
y: newY,
z: zIndex.value + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0),
}
if (isNumber(parentX) && isNumber(parentY)) {
node.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
} else {
node.computedPosition = xyzPos
}
},
{ flush: 'pre', immediate: true },
)
watch([() => node.extent, () => nodeExtent], ([nodeExtent, globalExtent], [oldNodeExtent, oldGlobalExtent]) => {
// update position if extent has actually changed
if (nodeExtent !== oldNodeExtent || globalExtent !== oldGlobalExtent) {
clampPosition()
}
})
// clamp initial position to nodes' extent
// if extent is parent, we need dimensions to properly clamp the position
if (node.extent === 'parent' || (typeof node.extent === 'object' && 'range' in node.extent && node.extent.range === 'parent')) {
until(() => node.initialized)
.toBe(true)
.then(clampPosition)
}
// if extent is not parent, we can clamp it immediately
else {
clampPosition()
}
/** this re-calculates the current position, necessary for clamping by a node's extent */
function clampPosition() {
const nextPos = node.computedPosition
if (snapToGrid) {
nextPos.x = snapGrid[0] * Math.round(nextPos.x / snapGrid[0])
nextPos.y = snapGrid[1] * Math.round(nextPos.y / snapGrid[1])
}
const { computedPosition, position } = calcNextPosition(node, nextPos, nodeExtent, parentNode)
// only overwrite positions if there are changes when clamping
if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) {
node.computedPosition = { ...node.computedPosition, ...computedPosition }
}
if (node.position.x !== position.x || node.position.y !== position.y) {
node.position = position
}
}
function updateInternals() {
if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
}
function onMouseEnter(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseEnter({ event, node, connectedEdges })
}
}
function onMouseMove(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseMove({ event, node, connectedEdges })
}
}
function onMouseLeave(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseLeave({ event, node, connectedEdges })
}
}
function onContextMenu(event: MouseEvent) {
return emit.contextMenu({ event, node, connectedEdges })
}
function onDoubleClick(event: MouseEvent) {
return emit.doubleClick({ event, node, connectedEdges })
}
function onSelectNode(event: MouseEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) {
handleNodeClick(
node,
multiSelectionActive,
addSelectedNodes,
removeSelectedNodes,
$$(nodesSelectionActive),
false,
nodeElement.value!,
)
}
emit.click({ event, node, connectedEdges })
}
function onKeyDown(event: KeyboardEvent) {
if (isInputDOMNode(event)) return
if (elementSelectionKeys.includes(event.key) && selectable) {
const unselect = event.key === 'Escape'
if (unselect) {
nodeElement.value?.blur()
}
handleNodeClick(
node,
multiSelectionActive,
addSelectedNodes,
removeSelectedNodes,
$$(nodesSelectionActive),
unselect,
nodeElement.value!,
)
} else if (!disableKeyboardA11y && draggable && node.selected && arrowKeyDiffs[event.key]) {
$$(ariaLiveMessage).value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
.position.x}, y: ${~~node.position.y}`
updateNodePositions(
{
x: arrowKeyDiffs[event.key].x,
y: arrowKeyDiffs[event.key].y,
},
event.shiftKey,
)
}
}
</script>
<script lang="ts">
export default {
name: 'Node',
inheritAttrs: false,
compatConfig: { MODE: 3 },
}
</script>
<template>
<div
ref="nodeElement"
class="vue-flow__node"
:class="[
`vue-flow__node-${type === false ? 'default' : name}`,
{
[noPanClassName]: draggable,
dragging,
selected: node.selected,
selectable,
},
getClass,
]"
:style="{
zIndex: node.computedPosition.z ?? zIndex,
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: selectable || draggable ? 'all' : 'none',
visibility: node.initialized ? 'visible' : 'hidden',
...getStyle,
}"
:tabIndex="focusable ? 0 : undefined"
:role="focusable ? 'button' : undefined"
:aria-describedby="disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`"
:aria-label="node.ariaLabel"
:data-id="node.id"
@mouseenter="onMouseEnter"
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
@contextmenu="onContextMenu"
@click="onSelectNode"
@dblclick="onDoubleClick"
@keydown="onKeyDown"
>
<component
:is="type === false ? getNodeTypes.default : type"
:id="node.id"
:type="node.type"
:data="node.data"
:events="{ ...node.events, ...on }"
:selected="!!node.selected"
:resizing="!!node.resizing"
:dragging="dragging"
:connectable="connectable"
:position="node.position"
:dimensions="node.dimensions"
:is-valid-target-pos="node.isValidTargetPos"
:is-valid-source-pos="node.isValidSourcePos"
:parent-node="node.parentNode"
:z-index="node.computedPosition.z"
:target-position="node.targetPosition"
:source-position="node.sourcePosition"
:label="node.label"
:drag-handle="node.dragHandle"
@update-node-internals="updateInternals"
/>
</div>
</template>