From 71f4dcc1c9ff2d00836d83a7aeeb78029097aa77 Mon Sep 17 00:00:00 2001 From: luojiahao Date: Mon, 10 Oct 2022 14:22:30 +0800 Subject: [PATCH] fix bugs of multiple fingers in container --- CHANGELOG.md | 1 + src/components/grid-container/container.ts | 147 +++++---------------- 2 files changed, 36 insertions(+), 112 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48d2fed..4bb1205 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,3 +26,4 @@ - fix bugs of container - add gauss blur component - change container's gesture function +- fix bugs of multiple fingers in container diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts index bb7c126..f210539 100644 --- a/src/components/grid-container/container.ts +++ b/src/components/grid-container/container.ts @@ -388,11 +388,11 @@ class GaiaContainer extends StarBaseElement { this.slideType = '' } const targetPagination = this.pages.indexOf(element) - const animateTime = 450 + const animateTime = type == 'reset' ? 1 : 450 const target = -element.offsetLeft - const origin = this.offsetX + const origin = this.pages[0].getBoundingClientRect().left - this.left // 移动总距离 - const distance = target - origin + const distance = target - Number(origin) const startTime = new Date().getTime() this.dispatchEvent( @@ -408,14 +408,12 @@ class GaiaContainer extends StarBaseElement { const cur = new Date().getTime() const t = (cur - startTime) / animateTime const ratio = cubic_bezier(0.2, 1, 0.95, 1, t) - this.offsetX = origin + parseInt(String(distance * ratio)) + this.offsetX = Number(origin) + parseInt(String(distance * ratio)) // 在切换页面的时候，由以下代码控制拖拽元素的位置 if (this._status & STATUS.DRAG) { this.status |= STATUS.SWIPE - ;( - this._dnd.child as unknown as GaiaContainerChild - ).container.style.transform = + ;(this._dnd.child as GaiaContainerChild).container.style.transform = 'translate(' + (this._dnd.left - this.offsetX) + 'px, ' + @@ -493,9 +491,13 @@ class GaiaContainer extends StarBaseElement { if (value) { this._dnd.delay = 0 this.status |= STATUS.SORT + // @ts-ignore + this.gestureDetector.setOption('holdThreshold', 100) } else { this._dnd.delay = DEFAULT_DND_TIMEOUT this.status &= ~STATUS.SORT + // @ts-ignore + this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT) } this._sortMode = value } @@ -534,6 +536,7 @@ class GaiaContainer extends StarBaseElement { // this._children.forEach((child) => child.changeSize()) this.synchronise() + this.resetView('reset') } get containerChildren(): HTMLElement[] { @@ -1021,35 +1024,6 @@ class GaiaContainer extends StarBaseElement { : 'reorderChild called on unknown child' } - reorderChild_bak(callback?: Function) { - let children: GaiaContainerChild[] = [] - let childCoordinate = [] - - this.pages.forEach((page, pagination) => { - let coordinates: {[gridId: number]: GaiaContainerChild} = {} - const nodes = Array.from(page.children) - for (const childMaster of nodes) { - const child = this.getChildByElement(childMaster as HTMLElement) - if (!child) continue - children.push(child) - for (let i = 0; i < child.row; i++) { - for (let j = 0; j < child.column; j++) { - coordinates[child.gridId + j + i * this.column] = child - } - } - } - - childCoordinate[pagination] = coordinates - }) - - this._children = children - - if (callback) { - callback() - } - return - } - insertContainerBefore( element: HTMLElement, reference: HTMLElement | null, @@ -1361,7 +1335,8 @@ class GaiaContainer extends StarBaseElement { let left = (this._dnd.start.translateX as number) - this.holdDistanceX - - this.pages[this._dnd.pagination!].offsetLeft + this.pages[this._dnd.pagination!].offsetLeft - + this.panDistanceX * this.ratio let top = (this._dnd.start.translateY as number) - this.holdDistanceY this._dnd.left = left this._dnd.top = top @@ -1434,9 +1409,11 @@ class GaiaContainer extends StarBaseElement { ) { // 拖动中的节点距离分页DOM左上角距离 = 定位坐标 + 手指移动距离 + 与原本页面距离 const distanceX = - gridX ?? this._dnd.gridPosition.x + this.panDistanceX - this.holdDistanceX - this.offsetWidth * - (this.pagination - (this._dnd.pagination ?? this.pagination)) + gridX ?? + this._dnd.gridPosition.x - + this.holdDistanceX + + this.offsetWidth * + (this.pagination - (this._dnd.pagination ?? this.pagination)) const distanceY = gridY ?? this._dnd.gridPosition.y + @@ -1922,7 +1899,7 @@ class GaiaContainer extends StarBaseElement { } handleTransformRatio(x: number) { - if (this._status & STATUS.DRAG) return 1 + // if (this._status & STATUS.DRAG) return 1 const percentage = Math.abs(x) / this.pageHeight this.ratio = 1 @@ -2044,14 +2021,6 @@ class GaiaContainer extends StarBaseElement { this._dnd.start.clientX = event.touches[0].clientX this._dnd.start.clientY = event.touches[0].clientY } - // const detail = (event as CustomEvent).detail - - // // 用于计算滑动页面距离 - // this._dnd.start.pageX = detail.touches[0].pageX - // this._dnd.start.pageY = detail.touches[0].pageY - // // 用于计算拖动图标距离 - // this._dnd.start.clientX = detail.touches[0].clientX - // this._dnd.start.clientY = detail.touches[0].clientY this._dnd.last.pageX = this._dnd.start.pageX this._dnd.last.pageY = this._dnd.start.pageY @@ -2085,15 +2054,6 @@ class GaiaContainer extends StarBaseElement { } else if (this._dnd.delay <= 0) { this.startDrag() } - - // if (this._dnd.delay > 0) { - // this._dnd.timeout = window.setTimeout(() => { - // this._dnd.timeout = undefined - // this.startDrag() - // }, this._dnd.delay) - // } else { - // this.startDrag() - // } } handleHoldMove(event: CustomEvent) { @@ -2104,8 +2064,6 @@ class GaiaContainer extends StarBaseElement { this.holdDistanceY = this._dnd.start.clientY - clientY if (this._dnd.active) { event.preventDefault() - // this._dnd.last.pageX = pageX - // this._dnd.last.pageY = pageY this._dnd.last.clientX = clientX this._dnd.last.clientY = clientY this._dnd.last.timeStamp = event.timeStamp @@ -2114,10 +2072,8 @@ class GaiaContainer extends StarBaseElement { } if (this._dnd.child?.priority == 1 && !this._dnd.child.isFolder) { - const centerX = - this.left + this._dnd.center.x + this.panDistanceX - this.holdDistanceX - const centerY = - this.top + this._dnd.center.y + this.panDistanceY - this.holdDistanceY + const centerX = this.left + this._dnd.center.x - this.holdDistanceX + const centerY = this.top + this._dnd.center.y - this.holdDistanceY const elementHeight = this._dnd.child.element.offsetHeight const elementWidth = this._dnd.child.element.offsetWidth @@ -2165,40 +2121,16 @@ class GaiaContainer extends StarBaseElement { return } - let pageX: number, pageY: number /* , clientX, clientY */ + this.panDistanceX = event.detail.absolute.dx + this.panDistanceY = event.detail.absolute.dy - pageX = (event as CustomEvent).detail.touches[0].pageX - pageY = (event as CustomEvent).detail.touches[0].pageY - - this.panDistanceX = pageX - this._dnd.last.pageX - this.panDistanceY = pageY - this._dnd.last.pageY - - const ratio = this.handleTransformRatio(this.panDistanceX) + this.handleTransformRatio(this.panDistanceX) + this.continueDrag() this.istouching && (this.status |= STATUS.SWIPE) && (this.style.transform = `translateX(${ - parseInt(String(this.panDistanceX * ratio)) + this.offsetX + parseInt(String(this.panDistanceX * this.ratio)) + this.offsetX }px`) - // } - - /* if (this._dnd.timeout) { - if ( - Math.abs(pageX - this._dnd.start.pageX) > DND_THRESHOLD || - Math.abs(pageY - this._dnd.start.pageY) > DND_THRESHOLD - ) { - clearTimeout(this._dnd.timeout) - this._dnd.timeout = undefined - } - } else if (this._dnd.active) { - event.preventDefault() - this._dnd.last.pageX = pageX - this._dnd.last.pageY = pageY - this._dnd.last.clientX = clientX - this._dnd.last.clientY = clientY - this._dnd.last.timeStamp = event.timeStamp - - this.continueDrag() - }*/ } handleEnd(event: CustomEvent) { @@ -2209,27 +2141,18 @@ class GaiaContainer extends StarBaseElement { } this.istouching = false - if (!(this._status & STATUS.DRAG)) { - this.offsetX += +this.panDistanceX * this.ratio - this.ratio = 1 - if (Math.abs(this.panDistanceX) < this.width / 2) { - } else if (this.panDistanceX > 0) { - this.turnPre(event.type) - } else { - this.turnNext(event.type) - } - this.panDistanceX = 0 - this.panDistanceY = 0 + this.offsetX += +this.panDistanceX * this.ratio + this.ratio = 1 + if (Math.abs(this.panDistanceX) < this.width / 2) { + } else if (this.panDistanceX > 0) { + this.turnPre(event.type) } else { - // this._dnd.child?.container?.style.setProperty( - // '--offset-position-left', - // '0px' - // ) - // this._dnd.child?.container?.style.setProperty( - // '--offset-position-top', - // '0px' - // ) + this.turnNext(event.type) } + + this.panDistanceX = 0 + this.panDistanceY = 0 + this.continueDrag() this.resetView('') if (this._dnd.active) {