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 - fix bugs of container
- add gauss blur component - add gauss blur component
- change container's gesture function - change container's gesture function
- fix bugs of multiple fingers in container
- add pagination controller of container

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

@ -325,6 +325,7 @@ class GaiaContainer extends StarBaseElement {
set status(value) { set status(value) {
if (value !== this._status) { if (value !== this._status) {
this._status = value
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('statuschange', { new CustomEvent('statuschange', {
detail: { detail: {
@ -335,7 +336,6 @@ class GaiaContainer extends StarBaseElement {
composed: true, composed: true,
}) })
) )
this._status = value
} }
} }
@ -343,41 +343,45 @@ class GaiaContainer extends StarBaseElement {
event.type === 'swipeleft' ? this.turnNext('swipe') : this.turnPre('swipe') event.type === 'swipeleft' ? this.turnNext('swipe') : this.turnPre('swipe')
} }
turnPre(type: string) { turnPre(type: string, callback?: Function) {
if (this.pagination <= 0) { if (this.pagination <= 0) {
this.pagination = 0 this.pagination = 0
} else { } else {
this.status |= STATUS.TURN this.status |= STATUS.TURN
this.pagination-- 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) { if (this.pagination < this.pages.length - 1) {
this.pagination++ this.pagination++
this.status |= STATUS.TURN this.status |= STATUS.TURN
} else { } else {
this.pagination = this.pages.length - 1 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] const target: HTMLElement = (this.pages as any)[pagination]
if (!target && pagination > 0) return this.resetView(type, --pagination) if (!target && pagination > 0) return this.resetView(type, --pagination)
this.smoothSlide(target, type) this.smoothSlide(target, type, callback)
return true return true
} }
// 同时触发划动时，不同触发原因的优先级顺序，越后越优先 // 同时触发划动时，不同触发原因的优先级顺序，越后越优先
typeIndex = ['reset', 'swipe', 'mouseup', 'touchend', 'holdend', 'panend'] typeIndex = ['', 'swipe', 'mouseup', 'touchend', 'holdend', 'panend', 'reset']
// 划动计时器 // 划动计时器
timer: Function | undefined = undefined timer: Function | undefined = undefined
// 触发划动的原因类型 // 触发划动的原因类型
slideType: string = '' slideType: string = ''
smoothSlide(element: HTMLElement, type: string) { smoothSlide(element: HTMLElement, type: string, callback?: Function) {
if ( if (
!element || !element ||
this.typeIndex.indexOf(this.slideType) > this.typeIndex.indexOf(type) this.typeIndex.indexOf(this.slideType) > this.typeIndex.indexOf(type)
@ -388,11 +392,11 @@ class GaiaContainer extends StarBaseElement {
this.slideType = '' this.slideType = ''
} }
const targetPagination = this.pages.indexOf(element) const targetPagination = this.pages.indexOf(element)
const animateTime = 450 const animateTime = type == 'reset' ? 1 : 450
const target = -element.offsetLeft 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() const startTime = new Date().getTime()
this.dispatchEvent( this.dispatchEvent(
@ -408,14 +412,12 @@ class GaiaContainer extends StarBaseElement {
const cur = new Date().getTime() const cur = new Date().getTime()
const t = (cur - startTime) / animateTime const t = (cur - startTime) / animateTime
const ratio = cubic_bezier(0.2, 1, 0.95, 1, t) 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) { if (this._status & STATUS.DRAG) {
this.status |= STATUS.SWIPE this.status |= STATUS.SWIPE
;( ;(this._dnd.child as GaiaContainerChild).container.style.transform =
this._dnd.child as unknown as GaiaContainerChild
).container.style.transform =
'translate(' + 'translate(' +
(this._dnd.left - this.offsetX) + (this._dnd.left - this.offsetX) +
'px, ' + 'px, ' +
@ -448,6 +450,7 @@ class GaiaContainer extends StarBaseElement {
this.status &= ~STATUS.SWIPE this.status &= ~STATUS.SWIPE
// 如果处于拖拽状态则更新一次落点位置 // 如果处于拖拽状态则更新一次落点位置
this.continueDrag() this.continueDrag()
callback?.()
} else if (this.timer) { } else if (this.timer) {
this.timer() this.timer()
} }
@ -493,9 +496,15 @@ class GaiaContainer extends StarBaseElement {
if (value) { if (value) {
this._dnd.delay = 0 this._dnd.delay = 0
this.status |= STATUS.SORT this.status |= STATUS.SORT
// @ts-ignore
this.gestureDetector.setOption('holdThreshold', 100)
this.firstUpdated().then(this.addTailPage)
} else { } else {
this._dnd.delay = DEFAULT_DND_TIMEOUT this._dnd.delay = DEFAULT_DND_TIMEOUT
this.status &= ~STATUS.SORT this.status &= ~STATUS.SORT
// @ts-ignore
this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT)
this.removeTailPage()
} }
this._sortMode = value this._sortMode = value
} }
@ -534,6 +543,7 @@ class GaiaContainer extends StarBaseElement {
// this._children.forEach((child) => child.changeSize()) // this._children.forEach((child) => child.changeSize())
this.synchronise() this.synchronise()
this.resetView('reset')
} }
get containerChildren(): HTMLElement[] { get containerChildren(): HTMLElement[] {
@ -621,6 +631,7 @@ class GaiaContainer extends StarBaseElement {
pagination: number = this.pagination pagination: number = this.pagination
) { ) {
let page = this.pages[pagination] let page = this.pages[pagination]
const {width, height} = page.getBoundingClientRect()
x += page.scrollLeft - page.offsetLeft x += page.scrollLeft - page.offsetLeft
y += page.scrollTop - page.offsetTop y += page.scrollTop - page.offsetTop
@ -628,6 +639,10 @@ class GaiaContainer extends StarBaseElement {
x = x < 0 ? 0 : x x = x < 0 ? 0 : x
y = y < 0 ? 0 : y 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 coordinateX = parseInt(String(x / Math.floor(this.gridWidth)))
const coordinateY = parseInt(String(y / Math.floor(this.gridHeight))) const coordinateY = parseInt(String(y / Math.floor(this.gridHeight)))
const gridId = coordinateX + coordinateY * this.column const gridId = coordinateX + coordinateY * this.column
@ -946,8 +961,8 @@ class GaiaContainer extends StarBaseElement {
throw 'removeChild called on unknown child' throw 'removeChild called on unknown child'
} }
addPage() { addPage(pages?: {page: HTMLElement; shadowPage: HTMLElement}) {
const {page, shadowPage} = this.pages.addPage() const {page, shadowPage} = pages ?? this.pages.addPage()
HTMLElement.prototype.appendChild.call(this, page) HTMLElement.prototype.appendChild.call(this, page)
HTMLElement.prototype.appendChild.call(this, shadowPage) HTMLElement.prototype.appendChild.call(this, shadowPage)
@ -960,6 +975,24 @@ class GaiaContainer extends StarBaseElement {
return page 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. * Reorders the given element to appear before referenceElement.
*/ */
@ -1021,35 +1054,6 @@ class GaiaContainer extends StarBaseElement {
: 'reorderChild called on unknown child' : '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( insertContainerBefore(
element: HTMLElement, element: HTMLElement,
reference: HTMLElement | null, reference: HTMLElement | null,
@ -1246,6 +1250,9 @@ class GaiaContainer extends StarBaseElement {
gridId, gridId,
this._dnd.child this._dnd.child
).recommended ).recommended
if (!this.childCoordinate[this.pagination]) {
this.childCoordinate[this.pagination] = {}
}
children = this.childCoordinate[this.pagination] children = this.childCoordinate[this.pagination]
child = children[gridId]! child = children[gridId]!
element = child?.element ?? this.pages[this.pagination] element = child?.element ?? this.pages[this.pagination]
@ -1302,15 +1309,20 @@ class GaiaContainer extends StarBaseElement {
this._dnd.lastDropChild = null this._dnd.lastDropChild = null
} }
// 进行拖拽的手指未松开之前，即使其他手指松开也不会添加空白尾页
if (!(this._status & STATUS.DRAG)) {
this.addTailPage()
}
this.removeTailPage()
this._dnd.child = null this._dnd.child = null
this._dnd.isSpanning = false this._dnd.isSpanning = false
this.status &= ~STATUS.DRAG
this.exchangeStratege.reset() this.exchangeStratege.reset()
this.synchronise() this.synchronise()
} }
startDrag() { startDrag() {
this.status |= STATUS.DRAG this.status |= STATUS.DRAG
this.addTailPage()
const child = this._dnd.child const child = this._dnd.child
this._staticElements = [child.element] this._staticElements = [child.element]
this._dnd.start.translateX = child.master.offsetLeft this._dnd.start.translateX = child.master.offsetLeft
@ -1361,7 +1373,8 @@ class GaiaContainer extends StarBaseElement {
let left = let left =
(this._dnd.start.translateX as number) - (this._dnd.start.translateX as number) -
this.holdDistanceX - 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 let top = (this._dnd.start.translateY as number) - this.holdDistanceY
this._dnd.left = left this._dnd.left = left
this._dnd.top = top this._dnd.top = top
@ -1434,7 +1447,9 @@ class GaiaContainer extends StarBaseElement {
) { ) {
// 拖动中的节点距离分页DOM左上角距离 = 定位坐标 + 手指移动距离 + 与原本页面距离 // 拖动中的节点距离分页DOM左上角距离 = 定位坐标 + 手指移动距离 + 与原本页面距离
const distanceX = const distanceX =
gridX ?? this._dnd.gridPosition.x + this.panDistanceX - this.holdDistanceX gridX ??
this._dnd.gridPosition.x -
this.holdDistanceX +
this.offsetWidth * this.offsetWidth *
(this.pagination - (this._dnd.pagination ?? this.pagination)) (this.pagination - (this._dnd.pagination ?? this.pagination))
const distanceY = const distanceY =
@ -1922,7 +1937,7 @@ class GaiaContainer extends StarBaseElement {
} }
handleTransformRatio(x: number) { handleTransformRatio(x: number) {
if (this._status & STATUS.DRAG) return 1 // if (this._status & STATUS.DRAG) return 1
const percentage = Math.abs(x) / this.pageHeight const percentage = Math.abs(x) / this.pageHeight
this.ratio = 1 this.ratio = 1
@ -1990,6 +2005,7 @@ class GaiaContainer extends StarBaseElement {
) { ) {
this.handleEnd(event) this.handleEnd(event)
} else { } else {
this.status &= ~STATUS.DRAG
this.endDrag(event) this.endDrag(event)
} }
break break
@ -2044,14 +2060,6 @@ class GaiaContainer extends StarBaseElement {
this._dnd.start.clientX = event.touches[0].clientX this._dnd.start.clientX = event.touches[0].clientX
this._dnd.start.clientY = event.touches[0].clientY 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.pageX = this._dnd.start.pageX
this._dnd.last.pageY = this._dnd.start.pageY this._dnd.last.pageY = this._dnd.start.pageY
@ -2085,15 +2093,6 @@ class GaiaContainer extends StarBaseElement {
} else if (this._dnd.delay <= 0) { } else if (this._dnd.delay <= 0) {
this.startDrag() 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) { handleHoldMove(event: CustomEvent) {
@ -2104,8 +2103,6 @@ class GaiaContainer extends StarBaseElement {
this.holdDistanceY = this._dnd.start.clientY - clientY this.holdDistanceY = this._dnd.start.clientY - clientY
if (this._dnd.active) { if (this._dnd.active) {
event.preventDefault() event.preventDefault()
// this._dnd.last.pageX = pageX
// this._dnd.last.pageY = pageY
this._dnd.last.clientX = clientX this._dnd.last.clientX = clientX
this._dnd.last.clientY = clientY this._dnd.last.clientY = clientY
this._dnd.last.timeStamp = event.timeStamp this._dnd.last.timeStamp = event.timeStamp
@ -2114,10 +2111,8 @@ class GaiaContainer extends StarBaseElement {
} }
if (this._dnd.child?.priority == 1 && !this._dnd.child.isFolder) { if (this._dnd.child?.priority == 1 && !this._dnd.child.isFolder) {
const centerX = const centerX = this.left + this._dnd.center.x - this.holdDistanceX
this.left + this._dnd.center.x + this.panDistanceX - this.holdDistanceX const centerY = this.top + this._dnd.center.y - this.holdDistanceY
const centerY =
this.top + this._dnd.center.y + this.panDistanceY - this.holdDistanceY
const elementHeight = this._dnd.child.element.offsetHeight const elementHeight = this._dnd.child.element.offsetHeight
const elementWidth = this._dnd.child.element.offsetWidth const elementWidth = this._dnd.child.element.offsetWidth
@ -2165,40 +2160,16 @@ class GaiaContainer extends StarBaseElement {
return 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 this.handleTransformRatio(this.panDistanceX)
pageY = (event as CustomEvent).detail.touches[0].pageY this.continueDrag()
this.panDistanceX = pageX - this._dnd.last.pageX
this.panDistanceY = pageY - this._dnd.last.pageY
const ratio = this.handleTransformRatio(this.panDistanceX)
this.istouching && this.istouching &&
(this.status |= STATUS.SWIPE) && (this.status |= STATUS.SWIPE) &&
(this.style.transform = `translateX(${ (this.style.transform = `translateX(${
parseInt(String(this.panDistanceX * ratio)) + this.offsetX parseInt(String(this.panDistanceX * this.ratio)) + this.offsetX
}px`) }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) { handleEnd(event: CustomEvent) {
@ -2209,7 +2180,6 @@ class GaiaContainer extends StarBaseElement {
} }
this.istouching = false this.istouching = false
if (!(this._status & STATUS.DRAG)) {
this.offsetX += +this.panDistanceX * this.ratio this.offsetX += +this.panDistanceX * this.ratio
this.ratio = 1 this.ratio = 1
if (Math.abs(this.panDistanceX) < this.width / 2) { if (Math.abs(this.panDistanceX) < this.width / 2) {
@ -2218,18 +2188,10 @@ class GaiaContainer extends StarBaseElement {
} else { } else {
this.turnNext(event.type) this.turnNext(event.type)
} }
this.panDistanceX = 0 this.panDistanceX = 0
this.panDistanceY = 0 this.panDistanceY = 0
} else { this.continueDrag()
// this._dnd.child?.container?.style.setProperty(
// '--offset-position-left',
// '0px'
// )
// this._dnd.child?.container?.style.setProperty(
// '--offset-position-top',
// '0px'
// )
}
this.resetView('') this.resetView('')
if (this._dnd.active) { 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.priority = row * column
this.manager = manager this.manager = manager
this._isStatic = false this._isStatic = false
this.anchorCoordinate = anchorCoordinate ?? defaultCoordinate // 两种屏幕方向的锚固坐标 this.anchorCoordinate = anchorCoordinate ?? {...defaultCoordinate} // 两种屏幕方向的锚固坐标
this.markDirty() this.markDirty()
} }

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

@ -1,19 +1,32 @@
import GaiaContainer from './container' import GaiaContainer from './container'
import {STATUS} from './contianer-interface'
class GaiaContainerPage { class GaiaContainerPage {
_pages: HTMLElement[] = [] // 存储所有添加进 gaia-container 的页面 _pages: HTMLElement[] = [] // 存储所有添加进 gaia-container 的页面
// 等待被移除的页面，仅在编辑、拖拽时出现，若结束前两种状态时仍然没有子节点，则删除 // 等待被移除的页面，仅在编辑、拖拽时出现，若结束前两种状态时仍然没有子节点，则删除
_suspending: HTMLElement | null = null _suspending: HTMLElement[] = []
_manager: GaiaContainer _manager: GaiaContainer
_shadowPagesMap: WeakMap<HTMLElement, HTMLElement> = new WeakMap() _shadowPagesMap: WeakMap<HTMLElement, HTMLElement> = new WeakMap()
_tail: HTMLElement | undefined
_shadowTail: HTMLElement | undefined
observerCallback: MutationCallback observerCallback: MutationCallback
constructor(manager: GaiaContainer) { constructor(manager: GaiaContainer) {
this._manager = manager this._manager = manager
this._manager.addEventListener('statuschange', () => { this._manager.addEventListener('statuschange', () => {
// gaia-container 退出拖拽模式，且有待删除页面 // gaia-container 退出拖拽模式，且有待删除页面
if (!(this._manager._status & 2) && this._suspending) { if (
this.deletePage(this._suspending) !(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 page = mutation.target as HTMLElement
const container = page.parentElement as any const container = page.parentElement as any
page.classList.add('removed')
const callback = () => { const callback = () => {
if (!container || !page.dataset.page) return if (!container || !page.dataset.page) return
if ( if (
@ -37,7 +49,8 @@ class GaiaContainerPage {
} }
if (this.editMode) { if (this.editMode) {
this._suspending = page // 处于编辑状态时，空白页不被删除
this._suspending.push(page)
} else { } else {
this.deletePage(page) 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() { 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) => { observe = (page: HTMLElement) => {
@ -102,20 +133,35 @@ class GaiaContainerPage {
}) })
} }
deletePage = (page: HTMLElement) => { deletePage = (page?: HTMLElement) => {
if (page.children.length) return if (!page || page.children.length) return
let index = this._pages.indexOf(page) let index = this._pages.indexOf(page)
if (this.editMode && index == this.length - 1) { if (this.editMode && index == this.length - 1) {
// 处于拖拽状态时，尾页不被删除 // 处于拖拽状态时，尾页不被删除
this._suspending = page this._suspending.push(page)
return return
} }
if (this._pages.length < 2) { if (this._pages.length < 2) {
// 页面数量少于1 // 页面数量少于1
return return
} }
if (index > -1) {
page?.remove?.()
this._shadowPagesMap.get(page)?.remove?.()
delete this._pages[index] delete this._pages[index]
let flag = false
let coordinates: GaiaContainer['childCoordinate'] = []
// @ts-ignore
this._pages = this._pages.filter((page, 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( this._manager.dispatchEvent(
new CustomEvent('page-change', { new CustomEvent('page-change', {
detail: { detail: {
@ -124,21 +170,18 @@ class GaiaContainerPage {
composed: true, composed: true,
}) })
) )
if (index > -1) { }
page?.remove?.() this._manager.synchronise()
let flag = false }
let coordinates: GaiaContainer['childCoordinate'] = []
this._pages = this._pages.filter((page, i) => { sortPagination() {
if (flag) { this._pages.forEach((page, i) => {
;(page.dataset.page as any) = --i page.dataset.page = String(i)
page.style.setProperty('--pagination', String(i)) page.style.setProperty('--pagination', String(i))
} this._shadowPagesMap
if (i == index) flag = true .get(page)
coordinates[i] = this._manager.childCoordinate[i - +flag] ?.style.setProperty('--pagination', String(i))
return i !== index
}) })
this._manager.childCoordinate = coordinates
}
} }
get length() { 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).dock = this.dock
;(window as any).container = this.container ;(window as any).container = this.container
;(window as any).pageIndicator = this.pageIndicator
;(window as any).home = this ;(window as any).home = this
// container 相关事件 // container 相关事件
@ -128,6 +129,7 @@ export class PanelContainer extends LitElement {
}) })
} else { } else {
this.addAppIcon(1, 1) this.addAppIcon(1, 1)
this.container.changeLayout()
let promise = new Promise((res) => { let promise = new Promise((res) => {
res(undefined) res(undefined)
}) })