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

fix: properly check if node is connectable/draggable/connectable

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-17 00:45:43 +01:00
parent 6b4cb9e937
commit 677c9a8b5e
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nodes/Node.vue
+10 -6
View File
@@ -23,9 +23,13 @@ provide(NodeIdContextKey, props.node.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null) const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selectable = computed(() => props.node.selectable ?? store.elementsSelectable) const selectable = computed(() =>
const draggable = computed(() => props.node.draggable ?? store.nodesDraggable) typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
const connectable = computed(() => props.node.connectable ?? store.nodesConnectable) )
const draggable = computed(() => (typeof props.node.draggable === 'undefined' ? store.nodesDraggable : props.node.draggable))
const connectable = computed(() =>
typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
)
const scale = computed(() => store.transform[2]) const scale = computed(() => store.transform[2])
const onMouseEnterHandler = () => const onMouseEnterHandler = () =>
@@ -40,7 +44,7 @@ const onMouseLeaveHandler = () =>
const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node }) const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
const onSelectNodeHandler = (event: MouseEvent) => { const onSelectNodeHandler = (event: MouseEvent) => {
if (!draggable) { if (!draggable.value) {
const n = props.node const n = props.node
if (selectable.value) { if (selectable.value) {
store.unsetNodesSelection() store.unsetNodesSelection()
@@ -59,7 +63,7 @@ const onDragStart: DraggableEventListener = ({ event }) => {
store.unsetNodesSelection() store.unsetNodesSelection()
if (!props.selected) store.addSelectedElements([n]) if (!props.selected) store.addSelectedElements([n])
} else if (!props.selectNodesOnDrag && !props.selected && selectable) { } else if (!props.selectNodesOnDrag && !props.selected && selectable.value) {
store.unsetNodesSelection() store.unsetNodesSelection()
store.addSelectedElements([]) store.addSelectedElements([])
} }
@@ -86,7 +90,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
// onDragStop also gets called when user just clicks on a 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 // Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__rf?.isDragging) { if (!props.node.__rf?.isDragging) {
if (selectable && !props.selectNodesOnDrag && !props.selected) { if (selectable.value && !props.selectNodesOnDrag && !props.selected) {
store.addSelectedElements([n]) store.addSelectedElements([n])
} }
hooks.nodeClick.trigger({ event, node: n }) hooks.nodeClick.trigger({ event, node: n })