Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fixed an issue where when a node is moved through touch events on the mobile terminal, it is stuck and cannot be moved. #4572

Closed
wants to merge 2 commits into from
Closed

fix: Fixed an issue where when a node is moved through touch events on the mobile terminal, it is stuck and cannot be moved. #4572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b92521
修复在手机端上通过触摸事件对节点进行移动操作的时候，出现卡顿导致无法移动的问题。
little-snow-fox Feb 6, 2025
10e5bed
框选功能支持手机端的触摸事件。
little-snow-fox Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions packages/x6-plugin-selection/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,18 +305,26 @@ export class Selection

protected startListening() {
this.graph.on('blank:mousedown', this.onBlankMouseDown, this)
this.graph.on('blank:touchstart', this.onBlankMouseDown, this)
this.graph.on('blank:click', this.onBlankClick, this)
this.graph.on('cell:mousemove', this.onCellMouseMove, this)
this.graph.on('cell:touchmove', this.onCellMouseMove, this)
this.graph.on('cell:mouseup', this.onCellMouseUp, this)
this.graph.on('cell:touchend', this.onCellMouseUp, this)
this.selectionImpl.on('box:mousedown', this.onBoxMouseDown, this)
this.selectionImpl.on('blank:touchstart', this.onBoxMouseDown, this)
}

protected stopListening() {
this.graph.off('blank:mousedown', this.onBlankMouseDown, this)
this.graph.off('blank:touchstart', this.onBlankMouseDown, this)
this.graph.off('blank:click', this.onBlankClick, this)
this.graph.off('cell:mousemove', this.onCellMouseMove, this)
this.graph.off('cell:touchmove', this.onCellMouseMove, this)
this.graph.off('cell:mouseup', this.onCellMouseUp, this)
this.graph.off('cell:touchend', this.onCellMouseUp, this)
this.selectionImpl.off('box:mousedown', this.onBoxMouseDown, this)
this.selectionImpl.off('blank:touchstart', this.onBoxMouseDown, this)
}

protected onBlankMouseDown({ e }: EventArgs['blank:mousedown']) {
Expand All @@ -335,10 +343,11 @@ export class Selection
}
}

protected allowBlankMouseDown(e: Dom.MouseDownEvent) {
protected allowBlankMouseDown(e: Dom.MouseDownEvent | Dom.TouchStartEvent) {
const eventTypes = this.options.eventTypes
return (
(eventTypes?.includes('leftMouseDown') && e.button === 0) ||
(eventTypes?.includes('leftMouseDown') &&
(e.button === 0 || e.touches?.length === 1)) ||
(eventTypes?.includes('mouseWheelDown') && e.button === 1)
)
}
Expand Down
45 changes: 24 additions & 21 deletions packages/x6-plugin-selection/src/selection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
}

case 'translating': {
if (evt.clientX == null || evt.clientY == null) break
const client = graph.snapToGrid(evt.clientX, evt.clientY)
if (!this.options.following) {
const data = eventData as EventData.Translating
Expand Down Expand Up @@ -819,33 +820,39 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
if (this.canShowSelectionBox(cell)) {
const view = this.graph.renderer.findViewByCell(cell)
if (view) {
const bbox = view.getBBox({
useCellGeometry: true,
})

const className = this.boxClassName
const box = document.createElement('div')
const pointerEvents = this.options.pointerEvents
Dom.addClass(box, className)
Dom.addClass(box, `${className}-${cell.isNode() ? 'node' : 'edge'}`)
Dom.attr(box, 'data-cell-id', cell.id)
Dom.css(box, {
position: 'absolute',
left: bbox.x,
top: bbox.y,
width: bbox.width,
height: bbox.height,
pointerEvents: pointerEvents
? this.getPointerEventsValue(pointerEvents)
: 'auto',
})
this.updateBoxPosition(box, cell)
Dom.appendTo(box, this.container)
this.showSelected()
this.boxCount += 1
}
}
}

protected updateBoxPosition(box: Element, cell: Cell) {
const view = this.graph.renderer.findViewByCell(cell)
if (view) {
const bbox = view.getBBox({
useCellGeometry: true,
})
const pointerEvents = this.options.pointerEvents
Dom.css(box, {
position: 'absolute',
left: bbox.x,
top: bbox.y,
width: bbox.width,
height: bbox.height,
pointerEvents: pointerEvents
? this.getPointerEventsValue(pointerEvents)
: 'auto',
})
}
}

protected updateSelectionBoxes() {
if (this.collection.length > 0) {
this.boxesUpdated = true
Expand All @@ -856,20 +863,16 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {

confirmUpdate() {
if (this.boxCount) {
this.hide()
for (
let i = 0, $boxes = this.$boxes, len = $boxes.length;
i < len;
i += 1
) {
const box = $boxes[i]
const cellId = Dom.attr(box, 'data-cell-id')
Dom.remove(box)
this.boxCount -= 1
const cell = this.collection.get(cellId)
if (cell) {
this.createSelectionBox(cell)
}

if (cell) this.updateBoxPosition(box, cell)
}

this.updateContainer()
Expand Down
Loading