Skip to content

fix: fire dragStart event only when a cursor is moved (#283) #284

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

Merged
merged 1 commit into from
Dec 18, 2020
Merged

fix: fire dragStart event only when a cursor is moved (#283) #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
68 changes: 45 additions & 23 deletions cypress/integration/7.click.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,24 @@

import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'

function checkEventCount({ dragStartCount, dragEndCount, gutterClickCount, gutterDblClickCount, transitionEndCount }) {
if (dragStartCount !== undefined) {
cy.get('.logs ul li').filter('.dragStart').should('have.length', dragStartCount)
}
if (dragEndCount !== undefined) {
cy.get('.logs ul li').filter('.dragEnd').should('have.length', dragEndCount)
}
if (gutterClickCount !== undefined) {
cy.get('.logs ul li').filter('.gutterClick').should('have.length', gutterClickCount)
}
if (gutterDblClickCount !== undefined) {
cy.get('.logs ul li').filter('.gutterDblClick').should('have.length', gutterDblClickCount)
}
if (transitionEndCount !== undefined) {
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', transitionEndCount)
}
}

context('Gutter click example page tests', () => {
const W = 1070
const H = 300
Expand Down Expand Up @@ -53,8 +71,8 @@ context('Gutter click example page tests', () => {
it('Mix gutter click and dragging', () => {
// Try move gutter event if disabled
moveGutter('.as-split-gutter', 0, -100, 0)
// gutterClick should be fired same as normal click event since dragging is disabled.
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [262.5, 525, 262.5])
cy.get('.logs ul li').should('have.length', 0)

// Enable gutters
cy.get('.btns button').eq(1).click()
Expand All @@ -64,61 +82,65 @@ context('Gutter click example page tests', () => {
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [162.5, 625, 262.5])
cy.wait(10)

cy.get('.logs ul li').filter('.dragStart').should('have.length', 1)
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 1)
checkEventCount({ dragStartCount: 1, dragEndCount: 1, gutterClickCount: 0, transitionEndCount: 0 })

// Click gutter1 to close area1
cy.get('.as-split-gutter').eq(0).click()
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 787.5, 262.5])
cy.wait(10)

cy.get('.logs ul li').filter('.dragStart').should('have.length', 2)
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 1)
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 1)
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 1)
checkEventCount({ dragStartCount: 1, dragEndCount: 1, gutterClickCount: 1, transitionEndCount: 1 })

// Click gutter2 to close area3
cy.get('.as-split-gutter').eq(1).click()
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0])
cy.wait(10)

cy.get('.logs ul li').filter('.dragStart').should('have.length', 3)
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 1)
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 2)
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 2)
checkEventCount({ dragStartCount: 1, dragEndCount: 1, gutterClickCount: 2, transitionEndCount: 2 })

// Move gutter2 to enlarge area3
moveGutter('.as-split-gutter', 1, -20, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1030, 20])

cy.get('.logs ul li').filter('.dragStart').should('have.length', 4)
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 2)
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 2)
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 2)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 2, transitionEndCount: 2 })

// Click gutter2 to close area3
cy.get('.as-split-gutter').eq(1).click()
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0])
cy.wait(10)

cy.get('.logs ul li').filter('.dragStart').should('have.length', 5)
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 2)
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 3)
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 3)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 3, transitionEndCount: 3 })

// Click gutter1 to display area1
cy.get('.as-split-gutter').eq(0).click()
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [262.5, 787.5, 0])
cy.wait(10)

cy.get('.logs ul li').filter('.dragStart').should('have.length', 6)
cy.get('.logs ul li').filter('.dragEnd').should('have.length', 2)
cy.get('.logs ul li').filter('.gutterClick').should('have.length', 4)
cy.get('.logs ul li').filter('.transitionEnd').should('have.length', 4)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 4, transitionEndCount: 4 })

// It should fire Click Event on mouseup if the mouse cursor is not moved.
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
cy.get('.as-split-gutter').eq(0).trigger('mousemove', { which: 1, clientX: 0, clientY: 0 })
cy.wait(10)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 4, transitionEndCount: 4 })

cy.get('.as-split-gutter').eq(0).trigger('mouseup', { which: 1, clientX: 0, clientY: 0 })
cy.wait(2000)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 5, transitionEndCount: 5 })

// It should fire dragStart and should not fire Click Event on mousemove if the mouse cursor is moved.
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
cy.get('.as-split-gutter').eq(0).trigger('mousemove', { which: 1, clientX: 1, clientY: 0 })
cy.wait(10)
checkEventCount({ dragStartCount: 3, dragEndCount: 2, gutterClickCount: 5, transitionEndCount: 5 })

cy.get('.as-split-gutter').eq(0).trigger('mouseup', { which: 1, clientX: 0, clientY: 0 })
cy.wait(20)
checkEventCount({ dragStartCount: 3, dragEndCount: 3, gutterClickCount: 5, transitionEndCount: 5 })
})

it('Test double click event', () => {
Expand Down
32 changes: 25 additions & 7 deletions projects/angular-split/src/lib/component/split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {

private isDragging = false
private isWaitingClear = false
private isWaitingInitialMove = false
private dragListeners: Array<Function> = []
private snapshot: ISplitSnapshot | null = null
private startPoint: IPoint | null = null
Expand Down Expand Up @@ -483,8 +484,13 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
public clickGutter(event: MouseEvent | TouchEvent, gutterNum: number): void {
const tempPoint = getPointFromEvent(event)

// Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick
if (this.startPoint && this.startPoint.x === tempPoint.x && this.startPoint.y === tempPoint.y) {
// Be sure mouseup/touchend happened if touch/cursor is not moved.
if (
this.startPoint &&
this.startPoint.x === tempPoint.x &&
this.startPoint.y === tempPoint.y &&
(!this.isDragging || this.isWaitingInitialMove)
) {
// If timeout in progress and new click > clearTimeout & dblClickEvent
if (this._clickTimeout !== null) {
window.clearTimeout(this._clickTimeout)
Expand Down Expand Up @@ -565,10 +571,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
this.displayedAreas.forEach((area) => area.component.lockEvents())

this.isDragging = true
this.renderer.addClass(this.elRef.nativeElement, 'as-dragging')
this.renderer.addClass(this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged')

this.notify('start', this.snapshot.gutterNum)
this.isWaitingInitialMove = true
}

private dragEvent(event: MouseEvent | TouchEvent): void {
Expand All @@ -589,6 +592,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
return
}

if (this.isWaitingInitialMove) {
if (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) {
this.ngZone.run(() => {
this.isWaitingInitialMove = false

this.renderer.addClass(this.elRef.nativeElement, 'as-dragging')
this.renderer.addClass(this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged')

this.notify('start', this.snapshot.gutterNum)
})
} else {
return
}
}

// Calculate steppedOffset

let offset =
Expand Down Expand Up @@ -706,7 +724,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
this.isDragging = false

// If moved from starting point, notify end
if (this.endPoint && (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y)) {
if (this.isWaitingInitialMove === false) {
this.notify('end', this.snapshot.gutterNum)
}

Expand Down