diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts index 081145c..a44ef47 100644 --- a/src/components/grid-container/container.ts +++ b/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) diff --git a/src/components/grid-container/contianer-interface.ts b/src/components/grid-container/contianer-interface.ts index 57c0fd2..220afe7 100644 --- a/src/components/grid-container/contianer-interface.ts +++ b/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 { diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts index 2ce7998..c5f97c3 100644 --- a/src/components/grid-container/gaia-container-child.ts +++ b/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[] } /** diff --git a/src/widgets/gaia-widget.ts b/src/widgets/gaia-widget.ts index da9f5a6..0ea4b5b 100644 --- a/src/widgets/gaia-widget.ts +++ b/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) } diff --git a/src/widgets/mozElement.ts b/src/widgets/mozElement.ts new file mode 100644 index 0000000..8f32210 --- /dev/null +++ b/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` + + ` + } +} diff --git a/tasks/build-widgets.js b/tasks/build-widgets.js index ab63ef0..0a65776 100644 --- a/tasks/build-widgets.js +++ b/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) => {