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

refactor(core): cleanup edge and node renderer

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-02 08:47:38 +01:00
committed by Braks
parent e5a2a79605
commit 4d535ed34c
4 changed files with 42 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/EdgeWrapper.ts
+20 -11
View File
@@ -15,7 +15,7 @@ interface Props {
const EdgeWrapper = defineComponent({
name: 'Edge',
compatConfig: { MODE: 3 },
props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
props: ['name', 'type', 'id', 'edge'],
setup(props: Props) {
const {
id: vueFlowId,
@@ -29,6 +29,9 @@ const EdgeWrapper = defineComponent({
removeSelectedEdges,
findEdge,
findNode,
edgesUpdatable,
edgesFocusable,
elementsSelectable,
} = useVueFlow()
const hooks = useEdgeHooks(props.edge, emits)
@@ -52,6 +55,12 @@ const EdgeWrapper = defineComponent({
provide(EdgeId, props.id)
provide(EdgeRef, edgeEl)
const selectable = $computed(() => (typeof edge.selectable === 'undefined' ? elementsSelectable : edge.selectable))
const updatable = $computed(() => (typeof edge.updatable === 'undefined' ? edgesUpdatable : edge.updatable))
const focusable = $computed(() => (typeof edge.focusable === 'undefined' ? edgesFocusable : edge.focusable))
const sourceNode = $computed(() => findNode(edge.source))
const targetNode = $computed(() => findNode(edge.target))
@@ -118,7 +127,7 @@ const EdgeWrapper = defineComponent({
updating: mouseOver,
selected: edge.selected,
animated: edge.animated,
inactive: !props.selectable,
inactive: !selectable,
},
],
'onClick': onEdgeClick,
@@ -127,11 +136,11 @@ const EdgeWrapper = defineComponent({
'onMouseenter': onEdgeMouseEnter,
'onMousemove': onEdgeMouseMove,
'onMouseleave': onEdgeMouseLeave,
'onKeyDown': props.focusable ? onKeyDown : undefined,
'tabIndex': props.focusable ? 0 : undefined,
'onKeyDown': focusable ? onKeyDown : undefined,
'tabIndex': focusable ? 0 : undefined,
'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
'aria-describedby': props.focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
'role': props.focusable ? 'button' : undefined,
'aria-describedby': focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
'role': focusable ? 'button' : undefined,
},
[
updating
@@ -143,7 +152,7 @@ const EdgeWrapper = defineComponent({
source: edge.source,
target: edge.target,
type: edge.type,
updatable: props.updatable,
updatable,
selected: edge.selected,
animated: edge.animated,
label: edge.label,
@@ -169,7 +178,7 @@ const EdgeWrapper = defineComponent({
}),
[
props.updatable === 'source' || props.updatable === true
updatable === 'source' || updatable === true
? [
h(
'g',
@@ -188,7 +197,7 @@ const EdgeWrapper = defineComponent({
),
]
: null,
props.updatable === 'target' || props.updatable === true
updatable === 'target' || updatable === true
? [
h(
'g',
@@ -247,7 +256,7 @@ const EdgeWrapper = defineComponent({
function onEdgeClick(event: MouseEvent) {
const data = { event, edge }
if (props.selectable) {
if (selectable) {
nodesSelectionActive.value = false
addSelectedEdges([edge])
@@ -284,7 +293,7 @@ const EdgeWrapper = defineComponent({
}
function onKeyDown(event: KeyboardEvent) {
if (elementSelectionKeys.includes(event.key) && props.selectable) {
if (elementSelectionKeys.includes(event.key) && selectable) {
const unselect = event.key === 'Escape'
if (unselect) {
packages/core/src/components/Nodes/NodeWrapper.vue
+19 -9
View File
@@ -1,14 +1,10 @@
<script lang="ts" setup>
import { isNumber } from '@vueuse/core'
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
import type { GraphNode, NodeComponent } from '../../types'
import { ARIA_NODE_DESC_KEY } from '../../utils/a11y'
const { id, type, name, draggable, selectable, connectable, ...props } = defineProps<{
const { id, type, name, ...props } = defineProps<{
id: string
draggable: boolean
selectable: boolean
connectable: HandleConnectable
focusable: boolean
type: NodeComponent | Function | Object | false
name: string
node: GraphNode
@@ -38,6 +34,10 @@ const {
ariaLiveMessage,
snapToGrid,
snapGrid,
nodesDraggable,
elementsSelectable,
nodesConnectable,
nodesFocusable,
} = $(useVueFlow())
const updateNodePositions = useUpdateNodePositions()
@@ -48,6 +48,16 @@ const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode)
const connectedEdges = $computed(() => getConnectedEdges([node], edges))
const intersections = $computed(() => getIntersectingNodes(node))
const draggable = $computed(() => (typeof node.draggable === 'undefined' ? nodesDraggable : node.draggable))
const selectable = $computed(() => (typeof node.selectable === 'undefined' ? elementsSelectable : node.selectable))
const connectable = $computed(() => (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable))
const focusable = $computed(() => (typeof node.focusable === 'undefined' ? nodesFocusable : node.focusable))
const nodeElement = ref<HTMLDivElement>()
provide(NodeRef, nodeElement)
@@ -59,13 +69,13 @@ const dragging = useDrag({
el: nodeElement,
disabled: computed(() => !draggable),
onStart(event, node, nodes) {
emit.dragStart({ event, node, nodes, intersections: getIntersectingNodes(node) })
emit.dragStart({ event, node, nodes, intersections })
},
onDrag(event, node, nodes) {
emit.drag({ event, node, nodes, intersections: getIntersectingNodes(node) })
emit.drag({ event, node, nodes, intersections })
},
onStop(event, node, nodes) {
emit.dragStop({ event, node, nodes, intersections: getIntersectingNodes(node) })
emit.dragStop({ event, node, nodes, intersections })
},
})
packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+1 -11
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import EdgeWrapper from '../../components/Edges/EdgeWrapper'
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
import type { EdgeComponent, GraphEdge } from '../../types'
import MarkerDefinitions from './MarkerDefinitions.vue'
const slots = inject(Slots)
@@ -9,9 +9,6 @@ const slots = inject(Slots)
const {
connectionStartHandle,
nodesConnectable,
edgesUpdatable,
edgesFocusable,
elementsSelectable,
getSelectedNodes,
findNode,
getEdges,
@@ -53,10 +50,6 @@ onBeforeUnmount(() => {
stop?.()
})
const selectable = (edgeSelectable?: boolean) => (typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable)
const updatable = (edgeUpdatable?: EdgeUpdatable) => (typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable)
const focusable = (edgeFocusable?: boolean) => (typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable)
function getType(type?: string, template?: GraphEdge['template']) {
const name = type || 'default'
let edgeType = template ?? getEdgeTypes[name]
@@ -100,9 +93,6 @@ export default {
:edge="edge"
:type="getType(edge.type, edge.template)"
:name="edge.type || 'default'"
:selectable="selectable(edge.selectable)"
:updatable="updatable(edge.updatable)"
:focusable="focusable(edge.focusable)"
/>
</g>
</svg>
packages/core/src/container/NodeRenderer/NodeRenderer.vue
+2 -23
View File
@@ -1,21 +1,10 @@
<script lang="ts" setup>
import { NodeWrapper } from '../../components'
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
import type { GraphNode, NodeComponent } from '../../types'
const slots = inject(Slots)
const {
nodesDraggable,
nodesFocusable,
elementsSelectable,
nodesConnectable,
nodes,
getNodes,
getNodesInitialized,
getNodeTypes,
updateNodeDimensions,
emits,
} = $(useVueFlow())
const { nodes, getNodes, getNodesInitialized, getNodeTypes, updateNodeDimensions, emits } = $(useVueFlow())
let resizeObserver = $ref<ResizeObserver>()
@@ -44,12 +33,6 @@ onMounted(() => {
onBeforeUnmount(() => resizeObserver?.disconnect())
const draggable = (nodeDraggable?: boolean) => (typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable)
const selectable = (nodeSelectable?: boolean) => (typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable)
const connectable = (nodeConnectable?: HandleConnectable) =>
typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
const focusable = (nodeFocusable?: boolean) => (typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable)
function getType(type?: string, template?: GraphNode['template']) {
const name = type || 'default'
let nodeType = template ?? getNodeTypes[name]
@@ -92,10 +75,6 @@ export default {
:resize-observer="resizeObserver"
:type="getType(node.type, node.template)"
:name="node.type || 'default'"
:draggable="draggable(node.draggable)"
:selectable="selectable(node.selectable)"
:connectable="connectable(node.connectable)"
:focusable="focusable(node.focusable)"
:node="node"
/>
</template>