TASK: #115114 - 完善主屏组件编辑模式功能、添加小组件边距

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 = `<div class="container-before"><div>`
       container.appendChild(this._element)
 
       this._container = container

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
       }

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;
+  }
 `

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

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

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 = `<div class="container-before"><div>`
 
       // 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
     }