添加快捷开关编辑图标组件

src/components/icon-added-container/added-container-child.ts

@@ -0,0 +1,114 @@
+export default class AddedContainerChild {
+  _element: HTMLElement | null
+  _container: HTMLElement | null = null
+  _master: HTMLElement | null = null
+  _lastElementWidth: number | null = null
+  _lastElementHeight: number | null = null
+  _lastElementDisplay: string | null = null
+  _lastElementOrder: string | null = null
+  _lastMasterTop: number | null = null
+  _lastMasterLeft: number | null = null
+  // 状态计时器
+  removed: number | undefined = undefined
+  added: number | undefined = undefined
+
+  constructor(element: HTMLElement | null) {
+    this._element = element
+    this.markDirty()
+  }
+
+  get element() {
+    return this._element
+  }
+
+  /**
+   * The element that will contain the child element and control its position.
+   */
+  get container() {
+    if (!this._container) {
+      // Create container
+      let container = document.createElement('div')
+      container.classList.add('gaia-container-child')
+      container.style.position = 'absolute'
+      container.style.top = '0'
+      container.style.left = '0'
+      container.appendChild(this.element as HTMLElement) //this.element是div.icon-container
+
+      this._container = container
+    }
+    return this._container
+  }
+
+  /**
+   * The element that will be added to the container that will
+   * control the element's transform.
+   */
+  get master() {
+    if (!this._master) {
+      // Create master
+      let master = document.createElement('div')
+      master.style.visibility = 'hidden'
+      this._master = master
+    }
+    return this._master
+  }
+
+  /**
+   * Clears any cached style properties. To be used if elements are
+   * manipulated outside of the methods of this object.
+   */
+  markDirty() {
+    this._lastElementWidth = null
+    this._lastElementHeight = null
+    this._lastElementDisplay = null
+    this._lastElementOrder = null
+    this._lastMasterTop = null
+    this._lastMasterLeft = null
+  }
+
+  /**
+   * Synchronise the size of the master with the managed child element.
+   */
+  synchroniseMaster() {
+    let master = this.master
+    let element = this.element
+
+    let style = window.getComputedStyle(element as HTMLElement)
+    let display = style.display
+    let order = style.order
+    let width = (element as HTMLElement).offsetWidth
+    let height = (element as HTMLElement).offsetHeight
+
+    if (
+      this._lastElementWidth !== width ||
+      this._lastElementHeight !== height ||
+      this._lastElementDisplay !== display ||
+      this._lastElementOrder !== order
+    ) {
+      this._lastElementWidth = width
+      this._lastElementHeight = height
+      this._lastElementDisplay = display
+      this._lastElementOrder = order
+
+      master.style.width = width + 'px'
+      master.style.height = height + 'px'
+      master.style.display = display
+      master.style.order = order
+    }
+  }
+
+  /**
+   * Synchronise the container's transform with the position of the master.
+   */
+  synchroniseContainer() {
+    let master = this.master
+    let container = this.container
+    let top = master.offsetTop
+    let left = master.offsetLeft
+    if (this._lastMasterTop !== top || this._lastMasterLeft !== left) {
+      this._lastMasterTop = top
+      this._lastMasterLeft = left
+      container.style.transform = 'translate(' + left + 'px, ' + top + 'px)'
+    }
+  }
+}

src/components/icon-added-container/index.ts

@@ -0,0 +1 @@
+export * from './icon-added-container.js'

src/components/icon-added-container/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/icon-added-container",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./icon-added-container.js": {
+      "default": "./icon-added-container.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}

src/components/icon-added-container/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}

src/components/icon-unadd-container/container-style.ts

@@ -0,0 +1,19 @@
+import {css} from 'lit'
+
+export default css`
+  :host {
+    // position: relative;
+    display: flex;
+    flex: 1;
+    margin-bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+  ::slotted(.gaia-container-child):not(.dragging):not(.added) {
+    transition: transform 0.2s;
+  }
+  ::slotted(.gaia-container-child.dragging) {
+    z-index: 1;
+    will-change: transform;
+  }
+`

src/components/icon-unadd-container/index.ts

@@ -0,0 +1 @@
+export * from './icon-unadd-container.js'

src/components/icon-unadd-container/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/icon-unadd-container",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./icon-unadd-container.js": {
+      "default": "./icon-unadd-container.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}

src/components/icon-unadd-container/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}

src/components/icon-unadd-container/unadd-container-child.ts

@@ -0,0 +1,114 @@
+export default class UnaddContainerChild {
+  _element: HTMLElement | null
+  _container: HTMLElement | null = null
+  _master: HTMLElement | null = null
+  _lastElementWidth: number | null = null
+  _lastElementHeight: number | null = null
+  _lastElementDisplay: string | null = null
+  _lastElementOrder: string | null = null
+  _lastMasterTop: number | null = null
+  _lastMasterLeft: number | null = null
+  // 状态计时器
+  removed: number | undefined = undefined
+  added: number | undefined = undefined
+
+  constructor(element: HTMLElement | null) {
+    this._element = element
+    this.markDirty()
+  }
+
+  get element() {
+    return this._element
+  }
+
+  /**
+   * The element that will contain the child element and control its position.
+   */
+  get container() {
+    if (!this._container) {
+      // Create container
+      let container = document.createElement('div')
+      container.classList.add('gaia-container-child')
+      container.style.position = 'absolute'
+      container.style.top = '0'
+      container.style.left = '0'
+      container.appendChild(this.element as HTMLElement) //this.element是div.icon-container
+
+      this._container = container
+    }
+    return this._container
+  }
+
+  /**
+   * The element that will be added to the container that will
+   * control the element's transform.
+   */
+  get master() {
+    if (!this._master) {
+      // Create master
+      let master = document.createElement('div')
+      master.style.visibility = 'hidden'
+      this._master = master
+    }
+    return this._master
+  }
+
+  /**
+   * Clears any cached style properties. To be used if elements are
+   * manipulated outside of the methods of this object.
+   */
+  markDirty() {
+    this._lastElementWidth = null
+    this._lastElementHeight = null
+    this._lastElementDisplay = null
+    this._lastElementOrder = null
+    this._lastMasterTop = null
+    this._lastMasterLeft = null
+  }
+
+  /**
+   * Synchronise the size of the master with the managed child element.
+   */
+  synchroniseMaster() {
+    let master = this.master
+    let element = this.element
+
+    let style = window.getComputedStyle(element as HTMLElement)
+    let display = style.display
+    let order = style.order
+    let width = (element as HTMLElement).offsetWidth
+    let height = (element as HTMLElement).offsetHeight
+
+    if (
+      this._lastElementWidth !== width ||
+      this._lastElementHeight !== height ||
+      this._lastElementDisplay !== display ||
+      this._lastElementOrder !== order
+    ) {
+      this._lastElementWidth = width
+      this._lastElementHeight = height
+      this._lastElementDisplay = display
+      this._lastElementOrder = order
+
+      master.style.width = width + 'px'
+      master.style.height = height + 'px'
+      master.style.display = display
+      master.style.order = order
+    }
+  }
+
+  /**
+   * Synchronise the container's transform with the position of the master.
+   */
+  synchroniseContainer() {
+    let master = this.master
+    let container = this.container
+    let top = master.offsetTop
+    let left = master.offsetLeft
+    if (this._lastMasterTop !== top || this._lastMasterLeft !== left) {
+      this._lastMasterTop = top
+      this._lastMasterLeft = left
+      container.style.transform = 'translate(' + left + 'px, ' + top + 'px)'
+    }
+  }
+}