请问节点做了自定义拖拽功能的情况下如何和画布的拖拽平移功能共存？

[cha-mi]

问题描述

请问节点做了自定义拖拽功能的情况下如何和画布的拖拽平移功能共存，希望可以提供一下思路

重现链接

https://codesandbox.io/p/sandbox/daraggable-forked-jhxch5

重现步骤

拖拽节点画布会和节点一起平移了

预期行为

希望是拖拽节点的时候可以画布静止，不和节点拖拽行为冲突，应该如何去实现

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @cha-mi

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[Yeti-xxx]

尝试为画布拖拽添加修饰键呢？

[cha-mi]

尝试为画布拖拽添加修饰键呢？
还是会有问题：这么做的话拖拽完节点要再拖拽画布还得点几次画布才能正常拖拽，不知为何......

[Yeti-xxx]

尝试为画布拖拽添加修饰键呢？
还是会有问题：这么做的话拖拽完节点要再拖拽画布还得点几次画布才能正常拖拽，不知为何......

我看了下确实还需要点击几次，我觉得可能是元素自定义的拖拽事件和画布更新的时机不同或者冲突导致的

[xielinhan]

@Yeti-xxx @cha-mi 我这边也遇到问题，开启了画布可拖动和节点可拖动时，我这边根据是否按下shift键去禁用画布拖动和节点可拖动，发现每次都需要拖动一次画布后才能正常禁用graph = new Graph({
container: document.getElementById('graph-container')!,
// background: {
// color: '#F2F7FA',
// },
interacting: function (cellView) {
if (shiftPressed) {
graph.disablePanning(); // 画布不可以移动
return { nodeMovable: false };
} else {
graph.enablePanning();// 画布不可以移动
}
return true
},
grid: {
type: 'mesh',
size: 16, // 网格大小，即每次移动元素至少20px
visible: true, // 渲染网格背景
},
highlighting: {
magnetAvailable: {
name: 'stroke',
args: {
padding: 3,
attrs: {
strokeWidth: 3,
stroke: '#52c41a',
},
},
},
},
connecting: {
router: {
name: 'normal',
},
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
// anchor: 'center',
// connectionPoint: 'anchor',
allowBlank: false,
snap: { // “吸附”功能
radius: 20,
},
// highlight: false,
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
targetMarker: {
name: 'block',
width: 12,
height: 8,
},
},
},
tools: [
{
name: 'inputEdit',
args: {
tooltip: 'Tooltip Content',
},
},
],
zIndex: 0,
})
},
validateConnection({ sourceMagnet, targetMagnet }) {
return !!targetMagnet && sourceMagnet !== targetMagnet;
}
},
resizing: false,
rotating: false,
snapline: false,
keyboard: true,
clipboard: true,
selecting: {
enabled: true, // 开启框选
multiple: true, // 支持多选
rubberband: true, // 框选
movable: true, // 选中后可以移动
showNodeSelectionBox: true, // 显示节点选择框
modifiers: ['ctrl'],
pointerEvents: 'none',
},
scroller: {
enabled: true,
pannable: false,
},
mousewheel: {
enabled: true,
global: false,
modifiers: ['ctrl'],
},
});
}graph = new Graph({
container: document.getElementById('graph-container')!,
// background: {
// color: '#F2F7FA',
// },
interacting: function (cellView) {
if (shiftPressed) {
graph.disablePanning(); // 画布不可以移动
return { nodeMovable: false };
} else {
graph.enablePanning();// 画布不可以移动
}
return true
},
grid: {
type: 'mesh',
size: 16, // 网格大小，即每次移动元素至少20px
visible: true, // 渲染网格背景
},
highlighting: {
magnetAvailable: {
name: 'stroke',
args: {
padding: 3,
attrs: {
strokeWidth: 3,
stroke: '#52c41a',
},
},
},
},
connecting: {
router: {
name: 'normal',
},
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
// anchor: 'center',
// connectionPoint: 'anchor',
allowBlank: false,
snap: { // “吸附”功能
radius: 20,
},
// highlight: false,
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
targetMarker: {
name: 'block',
width: 12,
height: 8,
},
},
},
tools: [
{
name: 'inputEdit',
args: {
tooltip: 'Tooltip Content',
},
},
],
zIndex: 0,
})
},
validateConnection({ sourceMagnet, targetMagnet }) {
return !!targetMagnet && sourceMagnet !== targetMagnet;
}
},
resizing: false,
rotating: false,
snapline: false,
keyboard: true,
clipboard: true,
selecting: {
enabled: true, // 开启框选
multiple: true, // 支持多选
rubberband: true, // 框选
movable: true, // 选中后可以移动
showNodeSelectionBox: true, // 显示节点选择框
modifiers: ['ctrl'],
pointerEvents: 'none',
},
scroller: {
enabled: true,
pannable: false,
},
mousewheel: {
enabled: true,
global: false,
modifiers: ['ctrl'],
},
});
}graph = new Graph({
container: document.getElementById('graph-container')!,
// background: {
// color: '#F2F7FA',
// },
interacting: function (cellView) {
if (shiftPressed) {
graph.disablePanning(); // 画布不可以移动
return { nodeMovable: false };
} else {
graph.enablePanning();// 画布不可以移动
}
return true
},
grid: {
type: 'mesh',
size: 16, // 网格大小，即每次移动元素至少20px
visible: true, // 渲染网格背景
},
highlighting: {
magnetAvailable: {
name: 'stroke',
args: {
padding: 3,
attrs: {
strokeWidth: 3,
stroke: '#52c41a',
},
},
},
},
connecting: {
router: {
name: 'normal',
},
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
// anchor: 'center',
// connectionPoint: 'anchor',
allowBlank: false,
snap: { // “吸附”功能
radius: 20,
},
// highlight: false,
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
targetMarker: {
name: 'block',
width: 12,
height: 8,
},
},
},
tools: [
{
name: 'inputEdit',
args: {
tooltip: 'Tooltip Content',
},
},
],
zIndex: 0,
})
},
validateConnection({ sourceMagnet, targetMagnet }) {
return !!targetMagnet && sourceMagnet !== targetMagnet;
}
},
resizing: false,
rotating: false,
snapline: false,
keyboard: true,
clipboard: true,
selecting: {
enabled: true, // 开启框选
multiple: true, // 支持多选
rubberband: true, // 框选
movable: true, // 选中后可以移动
showNodeSelectionBox: true, // 显示节点选择框
modifiers: ['ctrl'],
pointerEvents: 'none',
},
scroller: {
enabled: true,
pannable: false,
},
mousewheel: {
enabled: true,
global: false,
modifiers: ['ctrl'],
},
});
}，只要我在初始化graph的时候禁用画布拖动就可以正常禁用节点的拖动