From e5b420c4d375e651978a2b20c5807917ae5ba66b Mon Sep 17 00:00:00 2001 From: luojiahao Date: Mon, 17 Oct 2022 14:43:08 +0800 Subject: [PATCH] =?UTF-8?q?TASK:=20#115114=20-=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E4=B8=BB=E5=B1=8F=E7=BB=84=E4=BB=B6=E7=BC=96=E8=BE=91=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E5=8A=9F=E8=83=BD=E3=80=81=E6=B7=BB=E5=8A=A0=E5=B0=8F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=BE=B9=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dock/dock-child.ts | 1 + src/components/dock/dock.ts | 3 +-- .../grid-container/container-style.ts | 17 +++++++++++++-- src/components/grid-container/container.ts | 21 +++++++++++++------ .../grid-container/contianer-interface.ts | 1 + .../grid-container/gaia-container-child.ts | 13 +++++++----- 6 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/components/dock/dock-child.ts b/src/components/dock/dock-child.ts index f840463..f5b1347 100644 --- a/src/components/dock/dock-child.ts +++ b/src/components/dock/dock-child.ts @@ -47,6 +47,7 @@ export default class DockChild { if (!this._container) { const container = document.createElement('div') container.classList.add('dock-child-container') + container.innerHTML = `
` container.appendChild(this._element) this._container = container diff --git a/src/components/dock/dock.ts b/src/components/dock/dock.ts index 77d50dd..632003a 100644 --- a/src/components/dock/dock.ts +++ b/src/components/dock/dock.ts @@ -219,9 +219,8 @@ export default class StarDock extends StarBaseElement { let children = [...this._children] for (const child of children) { if ( - child._element === element || child.master === element || - child.container === element + child.master.compareDocumentPosition(element) & 16 ) { return child } diff --git a/src/components/grid-container/container-style.ts b/src/components/grid-container/container-style.ts index 907601a..e6a7ccb 100644 --- a/src/components/grid-container/container-style.ts +++ b/src/components/grid-container/container-style.ts @@ -68,8 +68,12 @@ export default css` } ::slotted(.gaia-container-child) { - height: calc(var(--grid-height) * var(--rows, 1)); - width: calc(var(--grid-width) * var(--columns, 1)); + height: calc( + var(--grid-height) * var(--rows, 1) - var(--grid-margin-top, 0px) * 2 + ); + width: calc( + var(--grid-width) * var(--columns, 1) - var(--grid-margin-left, 0px) * 2 + ); display: flex !important; flex-direction: column; align-items: center; @@ -79,4 +83,13 @@ export default css` ::slotted(.folder) > .gaia-container-child { transition: transform 0.2s, height 0.2s, width 0.2s; } + + ::slotted(.container-master.widget) .container-before { + width: 100%; + } + + ::slotted(.container-before) { + width: var(--icon-size, 100%); + height: 0; + } ` diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts index 6b172b1..7648118 100644 --- a/src/components/grid-container/container.ts +++ b/src/components/grid-container/container.ts @@ -496,11 +496,13 @@ class GaiaContainer extends StarBaseElement { if (value) { this.status |= STATUS.SORT this.gestureDetector.setOption('holdThreshold', 100) + this.setAttribute('sort-mode', '') this.firstUpdated().then(this.addTailPage) this.setAttribute('sort-mode', '') } else { this.status &= ~STATUS.SORT this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT) + this.removeAttribute('sort-mode') this.removeTailPage() this.removeAttribute('sort-mode') } @@ -577,9 +579,8 @@ class GaiaContainer extends StarBaseElement { let children = [...this._children] for (const child of children) { if ( - child._element === element || child.master === element || - child.container === element + child.container.compareDocumentPosition(element) & 16 ) { return child } @@ -854,7 +855,7 @@ class GaiaContainer extends StarBaseElement { * @param {Object} options 所添加元素的尺寸信息和添加回调 */ appendContainerChild(element: HTMLElement, options?: ChildElementInfo) { - if (element.tagName.split('-').length > 1) { + if (element.tagName.split('-').length > 1 || options?.isWidget) { let obj: ChildElementInfo = options ? {...options} : ({} as ChildElementInfo) @@ -1067,6 +1068,7 @@ class GaiaContainer extends StarBaseElement { pagination, anchorCoordinate, folderName, + isWidget, }: ChildElementInfo = {} as ChildElementInfo ) { let children = this._children @@ -1075,7 +1077,8 @@ class GaiaContainer extends StarBaseElement { row, column, anchorCoordinate, - this + this, + isWidget ) let referenceIndex = -1 @@ -1297,8 +1300,14 @@ class GaiaContainer extends StarBaseElement { if (this._dnd.active) { this._dnd.child.container.classList.remove('dragging') this._dnd.child.container.style.position = 'absolute' - this._dnd.child.container.style.top = '0' - this._dnd.child.container.style.left = '0' + this._dnd.child.container.style.setProperty( + 'top', + 'var(--grid-margin-top, 0)' + ) + this._dnd.child.container.style.setProperty( + 'left', + 'var(--grid-margin-left, 0)' + ) this._dnd.child.markDirty() this._dnd.active = false this._dnd.clickCapture = true diff --git a/src/components/grid-container/contianer-interface.ts b/src/components/grid-container/contianer-interface.ts index 28b1664..57c0fd2 100644 --- a/src/components/grid-container/contianer-interface.ts +++ b/src/components/grid-container/contianer-interface.ts @@ -7,6 +7,7 @@ export interface ChildElementInfo { folderName?: string anchorCoordinate?: Coordinate callback?: Function + isWidget?: boolean } interface ClickInfo { pageX: number diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts index 6cd9030..2ce7998 100644 --- a/src/components/grid-container/gaia-container-child.ts +++ b/src/components/grid-container/gaia-container-child.ts @@ -61,10 +61,11 @@ export default class GaiaContainerChild { row: number = 1, column: number = 1, anchorCoordinate: Coordinate | undefined, - manager: GaiaContainer + manager: GaiaContainer, + isWidget: boolean = false ) { this._element = element - this.isWidget = element?.tagName === 'GAIA-WIDGET' + this.isWidget = isWidget this.row = row this.column = column this.priority = row * column @@ -235,8 +236,10 @@ export default class GaiaContainerChild { let container = document.createElement('div') container.classList.add('gaia-container-child') container.style.position = 'absolute' - container.style.top = '0' - container.style.left = '0' + container.style.setProperty('top', 'var(--grid-margin-top, 0)') + container.style.setProperty('left', 'var(--grid-margin-left, 0)') + + container.innerHTML = `
` // container.style.height = height + 'px'; // container.style.width = width + 'px'; @@ -279,7 +282,7 @@ export default class GaiaContainerChild { master.style.gridColumnStart = `span ${this.column}` master.style.height = '100%' master.style.width = '100%' - master.className = 'container-master' + master.className = `container-master ${this.isWidget ? 'widget' : ''}` master.appendChild(this.container) this._master = master }