openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #72 in YR/star-web-components from dock to master 

* commit 'd1b1313b5e142b4234382fc89a1aee7f6a54a138':
  TASK: #115114 - 容器组件添加页面切换结束回调功能
  TASK: #115114 - 添加分页管理功能
  fix bugs of multiple fingers in container
This commit is contained in:
汪昌棋 2022-10-12 09:33:15 +08:00
parent 0b5bf2363f d1b1313b5e
commit 9fa108a8e2
5 changed files with 156 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -26,3 +26,5 @@
- fix bugs of container
- add gauss blur component
- change container's gesture function
- fix bugs of multiple fingers in container
- add pagination controller of container

210
src/components/grid-container/container.ts
View File

@ -325,6 +325,7 @@ class GaiaContainer extends StarBaseElement {
set status(value) {
if (value !== this._status) {
this._status = value
this.dispatchEvent(
new CustomEvent('statuschange', {
detail: {
@ -335,7 +336,6 @@ class GaiaContainer extends StarBaseElement {
composed: true,
})
)
this._status = value
}
}
@ -343,41 +343,45 @@ class GaiaContainer extends StarBaseElement {
event.type === 'swipeleft' ? this.turnNext('swipe') : this.turnPre('swipe')
}
turnPre(type: string) {
turnPre(type: string, callback?: Function) {
if (this.pagination <= 0) {
this.pagination = 0
} else {
this.status |= STATUS.TURN
this.pagination--
}
this.resetView(type)
this.resetView(type, this.pagination, callback)
}
turnNext(type: string) {
turnNext(type: string, callback?: Function) {
if (this.pagination < this.pages.length - 1) {
this.pagination++
this.status |= STATUS.TURN
} else {
this.pagination = this.pages.length - 1
}
this.resetView(type)
this.resetView(type, this.pagination, callback)
}
resetView(type: string, pagination = this.pagination): boolean {
resetView(
type: string,
pagination = this.pagination,
callback?: Function
): boolean {
const target: HTMLElement = (this.pages as any)[pagination]
if (!target && pagination > 0) return this.resetView(type, --pagination)
this.smoothSlide(target, type)
this.smoothSlide(target, type, callback)
return true
}
// 同时触发划动时，不同触发原因的优先级顺序，越后越优先
typeIndex = ['reset', 'swipe', 'mouseup', 'touchend', 'holdend', 'panend']
typeIndex = ['', 'swipe', 'mouseup', 'touchend', 'holdend', 'panend', 'reset']
// 划动计时器
timer: Function | undefined = undefined
// 触发划动的原因类型
slideType: string = ''
smoothSlide(element: HTMLElement, type: string) {
smoothSlide(element: HTMLElement, type: string, callback?: Function) {
if (
!element ||
this.typeIndex.indexOf(this.slideType) > this.typeIndex.indexOf(type)
@ -388,11 +392,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 +412,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, ' +
@ -448,6 +450,7 @@ class GaiaContainer extends StarBaseElement {
this.status &= ~STATUS.SWIPE
// 如果处于拖拽状态则更新一次落点位置
this.continueDrag()
callback?.()
} else if (this.timer) {
this.timer()
}
@ -493,9 +496,15 @@ class GaiaContainer extends StarBaseElement {
if (value) {
this._dnd.delay = 0
this.status |= STATUS.SORT
// @ts-ignore
this.gestureDetector.setOption('holdThreshold', 100)
this.firstUpdated().then(this.addTailPage)
} else {
this._dnd.delay = DEFAULT_DND_TIMEOUT
this.status &= ~STATUS.SORT
// @ts-ignore
this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT)
this.removeTailPage()
}
this._sortMode = value
}
@ -534,6 +543,7 @@ class GaiaContainer extends StarBaseElement {
// this._children.forEach((child) => child.changeSize())
this.synchronise()
this.resetView('reset')
}
get containerChildren(): HTMLElement[] {
@ -621,6 +631,7 @@ class GaiaContainer extends StarBaseElement {
pagination: number = this.pagination
) {
let page = this.pages[pagination]
const {width, height} = page.getBoundingClientRect()
x += page.scrollLeft - page.offsetLeft
y += page.scrollTop - page.offsetTop
@ -628,6 +639,10 @@ class GaiaContainer extends StarBaseElement {
x = x < 0 ? 0 : x
y = y < 0 ? 0 : y
// 越界时，需要将落点坐标退回到分页内部
x = x > width ? width - 1 : x
y = y > height ? height - 1 : y
const coordinateX = parseInt(String(x / Math.floor(this.gridWidth)))
const coordinateY = parseInt(String(y / Math.floor(this.gridHeight)))
const gridId = coordinateX + coordinateY * this.column
@ -946,8 +961,8 @@ class GaiaContainer extends StarBaseElement {
throw 'removeChild called on unknown child'
}
addPage() {
const {page, shadowPage} = this.pages.addPage()
addPage(pages?: {page: HTMLElement; shadowPage: HTMLElement}) {
const {page, shadowPage} = pages ?? this.pages.addPage()
HTMLElement.prototype.appendChild.call(this, page)
HTMLElement.prototype.appendChild.call(this, shadowPage)
@ -960,6 +975,24 @@ class GaiaContainer extends StarBaseElement {
return page
}
addTailPage() {
if (this._status & STATUS.DRAG || this._status & STATUS.SORT) {
// 仅仅在拖动状态和编辑状态时，允许添加空白尾页
if (this.pages[this.pagination] == this.pages._tail) {
// 当当前页为尾页时，再行添加尾页前，需要去掉当前页面的尾页标记
this.pages._tail = undefined
}
this.pages.addTail()
}
}
removeTailPage() {
if (!(this._status & STATUS.SORT) && !(this._status & STATUS.DRAG)) {
this.pages.removeTail()
}
}
/**
* Reorders the given element to appear before referenceElement.
*/
@ -1021,35 +1054,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,
@ -1246,6 +1250,9 @@ class GaiaContainer extends StarBaseElement {
gridId,
this._dnd.child
).recommended
if (!this.childCoordinate[this.pagination]) {
this.childCoordinate[this.pagination] = {}
}
children = this.childCoordinate[this.pagination]
child = children[gridId]!
element = child?.element ?? this.pages[this.pagination]
@ -1302,15 +1309,20 @@ class GaiaContainer extends StarBaseElement {
this._dnd.lastDropChild = null
}
// 进行拖拽的手指未松开之前，即使其他手指松开也不会添加空白尾页
if (!(this._status & STATUS.DRAG)) {
this.addTailPage()
}
this.removeTailPage()
this._dnd.child = null
this._dnd.isSpanning = false
this.status &= ~STATUS.DRAG
this.exchangeStratege.reset()
this.synchronise()
}
startDrag() {
this.status |= STATUS.DRAG
this.addTailPage()
const child = this._dnd.child
this._staticElements = [child.element]
this._dnd.start.translateX = child.master.offsetLeft
@ -1361,7 +1373,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 +1447,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 +1937,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
@ -1990,6 +2005,7 @@ class GaiaContainer extends StarBaseElement {
) {
this.handleEnd(event)
} else {
this.status &= ~STATUS.DRAG
this.endDrag(event)
}
break
@ -2044,14 +2060,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 +2093,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 +2103,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 +2111,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 +2160,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 +2180,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) {

2
src/components/grid-container/gaia-container-child.ts
View File

@ -70,7 +70,7 @@ export default class GaiaContainerChild {
this.priority = row * column
this.manager = manager
this._isStatic = false
this.anchorCoordinate = anchorCoordinate ?? defaultCoordinate // 两种屏幕方向的锚固坐标
this.anchorCoordinate = anchorCoordinate ?? {...defaultCoordinate} // 两种屏幕方向的锚固坐标
this.markDirty()
}

87
src/components/grid-container/gaia-container-page.ts
View File

@ -1,19 +1,32 @@
import GaiaContainer from './container'
import {STATUS} from './contianer-interface'
class GaiaContainerPage {
_pages: HTMLElement[] = [] // 存储所有添加进 gaia-container 的页面
// 等待被移除的页面，仅在编辑、拖拽时出现，若结束前两种状态时仍然没有子节点，则删除
_suspending: HTMLElement | null = null
_suspending: HTMLElement[] = []
_manager: GaiaContainer
_shadowPagesMap: WeakMap<HTMLElement, HTMLElement> = new WeakMap()
_tail: HTMLElement | undefined
_shadowTail: HTMLElement | undefined
observerCallback: MutationCallback
constructor(manager: GaiaContainer) {
this._manager = manager
this._manager.addEventListener('statuschange', () => {
// gaia-container 退出拖拽模式，且有待删除页面
if (!(this._manager._status & 2) && this._suspending) {
this.deletePage(this._suspending)
if (
!(this._manager._status & STATUS.DRAG) &&
!(this._manager._status & STATUS.SORT) &&
this._suspending.length
) {
while (this._suspending.length) {
const page = this._suspending.shift()
this.deletePage(page)
}
this.removeTail()
this._manager.turnPre('reset')
}
})
@ -26,7 +39,6 @@ class GaiaContainerPage {
const page = mutation.target as HTMLElement
const container = page.parentElement as any
page.classList.add('removed')
const callback = () => {
if (!container || !page.dataset.page) return
if (
@ -37,7 +49,8 @@ class GaiaContainerPage {
}
if (this.editMode) {
this._suspending = page
// 处于编辑状态时，空白页不被删除
this._suspending.push(page)
} else {
this.deletePage(page)
}
@ -90,8 +103,26 @@ class GaiaContainerPage {
}
}
addTail = () => {
if (!this._tail || !this._shadowTail || this._tail.children.length) {
const pages = this.addPage()
this._tail = pages.page
this._shadowTail = pages.shadowPage
this._manager.addPage({page: this._tail, shadowPage: this._shadowTail})
}
}
removeTail = () => {
if (!this._tail) return
this.deletePage(this._tail)
this._tail = undefined
this._shadowTail = undefined
}
get editMode() {
return this._manager._status & 2 || this._manager._status & 8
return (
this._manager._status & STATUS.DRAG || this._manager._status & STATUS.SORT
)
}
observe = (page: HTMLElement) => {
@ -102,43 +133,55 @@ class GaiaContainerPage {
})
}
deletePage = (page: HTMLElement) => {
if (page.children.length) return
deletePage = (page?: HTMLElement) => {
if (!page || page.children.length) return
let index = this._pages.indexOf(page)
if (this.editMode && index == this.length - 1) {
// 处于拖拽状态时，尾页不被删除
this._suspending = page
this._suspending.push(page)
return
}
if (this._pages.length < 2) {
// 页面数量少于1
return
}
delete this._pages[index]
this._manager.dispatchEvent(
new CustomEvent('page-change', {
detail: {
deleteIndex: index,
},
composed: true,
})
)
if (index > -1) {
page?.remove?.()
this._shadowPagesMap.get(page)?.remove?.()
delete this._pages[index]
let flag = false
let coordinates: GaiaContainer['childCoordinate'] = []
// @ts-ignore
this._pages = this._pages.filter((page, i) => {
if (flag) {
;(page.dataset.page as any) = --i
page.style.setProperty('--pagination', String(i))
}
if (i == index) flag = true
coordinates[i] = this._manager.childCoordinate[i - +flag]
return i !== index
})
this._manager.childCoordinate = coordinates
this.sortPagination()
this._manager.dispatchEvent(
new CustomEvent('page-change', {
detail: {
deleteIndex: index,
},
composed: true,
})
)
}
this._manager.synchronise()
}
sortPagination() {
this._pages.forEach((page, i) => {
page.dataset.page = String(i)
page.style.setProperty('--pagination', String(i))
this._shadowPagesMap
.get(page)
?.style.setProperty('--pagination', String(i))
})
}
get length() {

2
src/test/panels/container/homescreen-container.ts
View File

@ -75,6 +75,7 @@ export class PanelContainer extends LitElement {
// 存储全局变量
;(window as any).dock = this.dock
;(window as any).container = this.container
;(window as any).pageIndicator = this.pageIndicator
;(window as any).home = this
// container 相关事件
@ -128,6 +129,7 @@ export class PanelContainer extends LitElement {
})
} else {
this.addAppIcon(1, 1)
this.container.changeLayout()
let promise = new Promise((res) => {
res(undefined)
})