TASK: #115114 - 修改容器组件与小组件基类,以适配小组件编辑页面与容器的交互

src/components/grid-container/container.ts

@@ -92,7 +92,7 @@ const cubic_bezier = (
 }
 
 @customElement('gaia-container')
-class GaiaContainer extends StarBaseElement {
+export class GaiaContainer extends StarBaseElement {
   name: string = 'gaia-container'
   row: number = 6
   _row: number = this.row
@@ -580,8 +580,9 @@ class GaiaContainer extends StarBaseElement {
     let children = [...this._children]
     for (const child of children) {
       if (
-        child.master === element ||
-        child.container.compareDocumentPosition(element) & 16
+        child.container.compareDocumentPosition(element) & 16 ||
+        child.element === element ||
+        child.master === element
       ) {
         return child
       }
@@ -1721,6 +1722,7 @@ class GaiaContainer extends StarBaseElement {
       column: number
       gridHeight: number
       gridWidth: number
+      isWidget?: boolean
     }
   ) {
     this.dragInType = DragInType.PAGES
@@ -1728,15 +1730,19 @@ class GaiaContainer extends StarBaseElement {
 
     if (dragInfo) {
       this.dragInType = DragInType.COMPONENT
-      let {element, centerX, centerY, row, column} = dragInfo
+      let {element, centerX, centerY, row, column, isWidget} = dragInfo
       const page = this.pages[this.pagination]
       if (!this._dnd.child) {
+        this._dnd.active = true
+        this.istouching = true
+        this.status |= STATUS.DRAG
         this._dnd.child = new GaiaContainerChild(
           element,
           row,
           column,
           undefined,
-          this
+          this,
+          isWidget
         )
         page.appendChild(this._dnd.child.master)
         this._children.push(this._dnd.child)

src/components/grid-container/contianer-interface.ts

@@ -27,11 +27,11 @@ interface lastClickInfo extends ClickInfo {
 }
 
 export interface Coordinate {
-  [key: string]: number[] | null
+  [key: string]: number[] | number | null
   landscape: number[] | null
   portrait: number[] | null
-  landscapeGridId: number[] | null
-  portraitGridId: number[] | null
+  landscapeGridId: number[] | number | null
+  portraitGridId: number[] | number | null
 }
 
 export enum STATUS {

src/components/grid-container/gaia-container-child.ts

@@ -193,6 +193,8 @@ export default class GaiaContainerChild {
 
     if (type === 'recorder' && this.anchorCoordinate[orientation]) {
       return this.anchorCoordinate[orientation]
+    } else if (this.anchorCoordinate[`${orientation}GridId`]) {
+      return this.gridId2coordinate(orientation)!
     }
 
     const offsetTop = Math.abs(this.master.offsetTop)
@@ -205,6 +207,24 @@ export default class GaiaContainerChild {
     return [rowStart, columnStart]
   }
 
+  /**
+   * 将坐标记录 anchorCoordinate 的 GridId 转化成该网格左上角所在的二维坐标
+   * @param orientation 方向
+   * @returns
+   */
+  gridId2coordinate(orientation: string) {
+    let grid = this.anchorCoordinate[`${orientation}GridId`]
+    if (!grid) {
+      return
+    } else if (grid instanceof Array) {
+      grid = Math.min(...grid)
+    }
+
+    const rowStart = Math.floor(grid / this.manager.column) + 1
+    const columnStart = (grid % this.manager.column) + 1
+    return [rowStart, columnStart]
+  }
+
   /**
    * 设置组件在 Grid 布局中的位置
    * @param {String} type 以何种方式设置网格区域： recorder 从记录中，current 从目前位置
@@ -212,7 +232,7 @@ export default class GaiaContainerChild {
   setArea(type: anchorType = 'recorder') {
     const orientation = screen.orientation.type.split('-')[0]
     this.anchorCoordinate[orientation] = this.getArea(type)
-    return this.anchorCoordinate[orientation]
+    return this.anchorCoordinate[orientation] as number[]
   }
 
   /**

src/widgets/gaia-widget.ts

@@ -46,6 +46,7 @@ export default class GaiaWidget extends StarBaseElement {
   viewName: string = '' // 视图名，当该组件有多个视图时，视图名用于区分
   createTime: number = new Date().getTime()
   container!: HTMLElement
+  params: any
   activityRequestTimer: number | undefined
   lifeCycle!:
     | 'initializing'
@@ -56,6 +57,7 @@ export default class GaiaWidget extends StarBaseElement {
     | 'preparation-failed'
   // TODO: 补充activity失败原因
   status!: 'requesting' | 'idle' | 'activity-shut-down' | 'err'
+  singleton: boolean = true
   constructor({
     url,
     size,
@@ -93,6 +95,14 @@ export default class GaiaWidget extends StarBaseElement {
       }
     }
 
+    for (const key in params) {
+      if (Object.prototype.hasOwnProperty.call(params, key)) {
+        const value = params[key]
+        // @ts-ignore
+        this[key] = value
+      }
+    }
+
     this.lifeCycle = 'initializing'
     setTimeout(this.init)
   }

src/widgets/mozElement.ts

@@ -0,0 +1,61 @@
+import {html, LitElement} from 'lit'
+import {customElement} from 'lit/decorators.js'
+
+function lowerCase(str: string) {
+  str = str.replace(/\s/g, '')
+  return str.toLocaleLowerCase()
+}
+
+// 利用 -moz-element 属性映射实际的桌面小组件
+@customElement('widget-copy')
+export default class MozElement extends LitElement {
+  _id!: string
+  isWidget: boolean = true
+  url: string
+  size: [number, number]
+  origin: string
+  appName: string
+  widgetType: string
+  widgetName: string
+  constructor(
+    id: string,
+    {
+      url,
+      size,
+      origin,
+      appName,
+      widgetType,
+      widgetName,
+    }: {
+      url: string
+      size: [number, number]
+      origin: string
+      appName: string
+      widgetType: string
+      widgetName: string
+    }
+  ) {
+    super()
+    this._id = id
+    this.url = url
+    this.size = size
+    this.origin = origin
+    this.appName = lowerCase(appName)
+    this.widgetType = widgetType
+    this.widgetName = widgetName
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+          height: 100%;
+          width: 100%;
+          background: -moz-element(#${this._id});
+          background-size: cover;
+          background-repeat: no-repeat;
+        }
+      </style>
+    `
+  }
+}

tasks/build-widgets.js

@@ -2,14 +2,18 @@ import fs from 'fs'
 import {build} from 'vite'
 const PWD = process.cwd()
 
-const clearDir = (path, exclude) => {
+const clearDir = (path, excludes) => {
   var files = []
 
   if (fs.existsSync(path)) {
     files = fs.readdirSync(path)
 
-    for (const file of files) {
-      if (file === exclude) continue
+    nextFile: for (const file of files) {
+      if(excludes) {
+        for (let exclude of excludes) {
+          if (file === exclude) continue nextFile
+        }
+      }
       var curPath = path + '/' + file
 
       if (fs.statSync(curPath).isDirectory()) {
@@ -26,15 +30,16 @@ const fun = async (widgetName, entryName) => {
   await build({
     build: {
       lib: {
+        name: widgetName,
         entry: `src/widgets/${widgetName}/${entryName}.ts`,
-        formats: ['es'],
+        formats: ['cjs', 'es'],
         fileName: `${widgetName}`,
       },
       outDir: `dist/widgets/${widgetName}/`,
     },
   })
 
-  clearDir(`dist/widgets/${widgetName}`, `${widgetName}.js`)
+  clearDir(`dist/widgets/${widgetName}`, [`${widgetName}.cjs`, `${widgetName}.js`])
 }
 
 const safeReadDirSync = (path) => {