fix bugs of multiple fingers in container
This commit is contained in:
luojiahao
parent
2085d8ba40
commit
71f4dcc1c9
|
|
@ -26,3 +26,4 @@
|
|||
- fix bugs of container
|
||||
- add gauss blur component
|
||||
- change container's gesture function
|
||||
- fix bugs of multiple fingers in container
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue