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

TASK: #104293 - Add the function of adapting to rotating screen

This commit is contained in:
luojiahao 2022-10-08 10:26:31 +08:00
parent 144ee92347
commit e61b7b8fe3
2 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,9 @@ const cubic_bezier = (
class GaiaContainer extends StarBaseElement {
name: string = 'gaia-container'
row: number = 6
_row: number = this.row
column: number = 4
_column: number = this.column
_frozen: boolean = false
ready: boolean = false
_pendingStateChanges: Function[] = []
@ -225,8 +227,8 @@ class GaiaContainer extends StarBaseElement {
exchangeTimer: number | undefined
constructor(row = 6, column = 4) {
super()
this.row = row
this.column = column
this.row = this._row = row
this.column = this._column = column
this.exchangeStratege = new ExchangeStrategy(this)
this.startGestureDetector({
panThreshold: 0,
@ -501,12 +503,25 @@ class GaiaContainer extends StarBaseElement {
// TODO：用于适应旋转屏幕时，改变行数与列数，需要配合row、column属性
changeLayout = () => {
// this.styleDom.innerHTML = this.shadowStyle;
// 更新位置与高度信息
const {height, width, top, left} = this.getBoundingClientRect()
this.height = height
this.width = width
this.top = top
this.left = left
if (screen.orientation.type.includes('portrait')) {
this.style.setProperty('--columns', String(this._column))
this.style.setProperty('--rows', String(this._row))
this.row = this._row
this.column = this._column
} else {
this.style.setProperty('--rows', String(this._column))
this.style.setProperty('--columns', String(this._row))
this.row = this._column
this.column = this._row
}
this.pageWidth = this.pages.length ? this.pages[0].offsetWidth : 0
this.pageHeight = this.pages.length ? this.pages[0].offsetHeight : 0
this.gridHeight = this.pageHeight / this.row
@ -516,13 +531,6 @@ class GaiaContainer extends StarBaseElement {
this.style.setProperty('--page-height', this.pageHeight + 'px')
this.style.setProperty('--grid-height', this.gridHeight + 'px')
this.style.setProperty('--grid-width', this.gridWidth + 'px')
if (screen.orientation.type.includes('portrait')) {
this.style.setProperty('--columns', String(this.column))
this.style.setProperty('--rows', String(this.row))
} else {
this.style.setProperty('--rows', String(this.column))
this.style.setProperty('--columns', String(this.row))
}
// this._children.forEach((child) => child.changeSize())
this.synchronise()
@ -674,18 +682,18 @@ class GaiaContainer extends StarBaseElement {
if (!page) {
page = this.addPage()
}
const shadowPage = this.pages._shadowPagesMap.get(page)
let proto = HTMLElement.prototype.appendChild
let func
Array.prototype.forEach.call(args, (element) => {
const retainAfterRotate = this.appendShadowPage(element, page)
func = proto.call(page, element)
proto.call(shadowPage, this.getChildByElement(element)?.shadowContainer!)
// 判断插入节点后是否会越界
if (page.offsetHeight < page.scrollHeight) {
if (page.offsetHeight < page.scrollHeight || !retainAfterRotate) {
// 越界后判断是否需要重新拿出来放入下一个页面
if (this._status & STATUS.DRAG) {
// 如果是拖拽中的元素，则返回原位,同时记录本页面无法插入
// TODO: 拖拽中的元素应该强制放入
if (!this._staticElements.includes(page)) {
this._staticElements.push(page)
}
@ -711,6 +719,8 @@ class GaiaContainer extends StarBaseElement {
let func
Array.from(args).forEach((element) => {
const target = element.parentNode
const child = this.getChildByElement(element)
child?.shadowContainer?.remove()
let proto = HTMLElement.prototype.removeChild
func = proto.call(target, element)
@ -727,8 +737,12 @@ class GaiaContainer extends StarBaseElement {
const nodes = args as unknown as [HTMLElement, HTMLElement]
let proto = HTMLElement.prototype.insertBefore
let func = proto.apply(targetParent, nodes)
const retainAfterRotate = this.appendShadowPage(nodes[0], targetParent)
// 判断插入节点后是否会越界
if (targetParent.offsetHeight < targetParent.scrollHeight) {
if (
targetParent.offsetHeight < targetParent.scrollHeight ||
!retainAfterRotate
) {
this.insertCrossBorder(...nodes)
}
return func
@ -745,14 +759,18 @@ class GaiaContainer extends StarBaseElement {
if (!targetParent) throw new Error('parentElement does not exist!')
let func
if (targetParent.lastChild == args[1]) {
func = append.call(targetParent, arguments[0])
func = append.call(targetParent, args[0])
} else {
func = insert.call(targetParent, arguments[0], arguments[1].nextSibling)
func = insert.call(targetParent, args[0], args[1].nextSibling)
}
const retainAfterRotate = this.appendShadowPage(args[0], targetParent)
// 判断插入节点后是否会越界
if (targetParent.offsetHeight < targetParent.scrollHeight) {
this.insertCrossBorder(...arguments)
if (
targetParent.offsetHeight < targetParent.scrollHeight ||
!retainAfterRotate
) {
this.insertCrossBorder(...args)
}
return func
@ -791,6 +809,26 @@ class GaiaContainer extends StarBaseElement {
return this.realAppendChild(this.pagination + 1, args[0])
}
/**
* 为影子页面添加子节点，若越界，则表示旋转屏幕后也会越界
* @returns boolean
*/
appendShadowPage(element: HTMLElement, page: HTMLElement) {
const shadowPage = this.pages._shadowPagesMap.get(page)!
const shadowChild = this.getChildByElement(element)?.shadowContainer!
if (!shadowPage || !shadowChild) {
return false
}
shadowPage.appendChild(shadowChild)
if (shadowPage.offsetHeight < shadowPage.scrollHeight) {
shadowPage.removeChild(shadowChild)
return false
} else {
return true
}
}
realReplaceChild(...args: [HTMLElement, HTMLElement]) {
let proto = HTMLElement.prototype.replaceChild
let func = proto.apply(this, args)
@ -918,11 +956,6 @@ class GaiaContainer extends StarBaseElement {
this.pageHeight = page.offsetHeight
this.gridHeight = this.pageHeight / this.row
this.gridWidth = this.pageWidth / this.column
this.style.setProperty('--page-width', this.pageWidth + 'px')
this.style.setProperty('--page-height', this.pageHeight + 'px')
this.style.setProperty('--grid-height', this.gridHeight + 'px')
this.style.setProperty('--grid-width', this.gridWidth + 'px')
}
return page
}
@ -1699,10 +1732,8 @@ class GaiaContainer extends StarBaseElement {
gridId: number
) {
let resolve!: Function
let reject!: Function
let promise = new Promise((res, rej) => {
let promise = new Promise((res) => {
resolve = res
reject = rej
})
for (let row = 0; row < child.row; row++) {
@ -1712,7 +1743,6 @@ class GaiaContainer extends StarBaseElement {
this.childCoordinate[pagination][targetId] != undefined &&
this.childCoordinate[pagination][targetId] != child
) {
reject()
return false
}
promise.then(() => {
@ -2262,9 +2292,6 @@ class GaiaContainer extends StarBaseElement {
child.synchroniseMaster()
// }
}
if (Object.keys(this.folders).length) {
// debugger
}
for (let i = 0; i < children.length; i++) {
child = children[i]
@ -2274,6 +2301,7 @@ class GaiaContainer extends StarBaseElement {
if (!child.synchroniseContainer(isActive)) {
return
}
child.anchor()
// 越界
// if (!isActive) {

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

@ -169,7 +169,7 @@ export default class GaiaContainerChild {
* 按记录的锚固坐标，将元素锚固到 Grid 网格中
*/
anchor(type: anchorType = 'recorder') {
const area = this.getArea(type)
const area = this.setArea(type)
if (!area) return
const [rowStart, columnStart] = area
@ -194,14 +194,12 @@ export default class GaiaContainerChild {
return this.anchorCoordinate[orientation]
}
const unitHeight = this.master.offsetHeight / this.row
const unitWidth = this.master.offsetWidth / this.column
const offsetTop = Math.abs(this.master.offsetTop)
const offsetLeft = Math.abs(
this.master.offsetLeft - this.pagination * this.manager.pageHeight
)
const rowStart = Math.floor(offsetTop / unitHeight) + 1
const columnStart = Math.floor(offsetLeft / unitWidth) + 1
const rowStart = Math.floor(offsetTop / this.manager.gridHeight) + 1
const columnStart = Math.floor(offsetLeft / this.manager.gridWidth) + 1
return [rowStart, columnStart]
}
@ -220,8 +218,8 @@ export default class GaiaContainerChild {
* 解除元素的锚固
*/
loosen() {
const orientation = screen.orientation.type.split('-')[0]
this.anchorCoordinate[orientation] = null
// const orientation = screen.orientation.type.split('-')[0]
// this.anchorCoordinate[orientation] = null
this.master.style.gridArea = 'unset'
this.master.style.gridRowStart = `span ${this.row}`
this.master.style.gridColumnStart = `span ${this.column}`