vue-desktop/src/core/desktop/DesktopProcess.ts

import ProcessImpl from '@/core/process/impl/ProcessImpl.ts'
import type { ProcessInfoImpl } from '@/core/process/impl/ProcessInfoImpl.ts'
import XSystem from '@/core/XSystem.ts'
import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
import { createApp, h } from 'vue'
import DesktopComponent from '@/core/desktop/ui/DesktopComponent.vue'
import { naiveUi } from '@/core/common/naive-ui/components.ts'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { debounce } from 'lodash'
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'

export class DesktopProcess extends ProcessImpl {
  private _desktopRootDom: HTMLElement;
  private _isMounted: boolean = false;
  private _width: number = 0;
  private _height: number = 0;
  private _pendingResize: boolean = false;

  public get desktopRootDom() {
    return this._desktopRootDom;
  }
  public get isMounted() {
    return this._isMounted;
  }
  public get basicSystemProcess() {
    return XSystem.instance.processManage.findProcessByName<BasicSystemProcess>('basic-system')
  }

  public get width() {
    return this._width;
  }
  public set width(value: number) {
    if (this._height === value) return;
    if (!this._isMounted) return;
    this._width = value;
    this._desktopRootDom.style.width = value >= 0 ? `${value}px` : '100%';

    this.scheduleResizeEvent()
  }
  public get height() {
    return this._height;
  }
  public set height(value: number) {
    if (this._height === value) return;
    if (!this._isMounted) return;
    this._height = value;
    this._desktopRootDom.style.height = value >= 0 ? `${value}px` : '100%';

    this.scheduleResizeEvent()
  }

  private scheduleResizeEvent() {
    if (this._pendingResize) return;

    this._pendingResize = true;

    Promise.resolve().then(() => {
      if (this._pendingResize) {
        this._pendingResize = false;
        console.log('onDesktopRootDomResize')
        this.eventManages.notifyEvent(DesktopEventEnum.onDesktopRootDomResize, this._width, this._height);
      }
    });
  }

  private get eventManages() {
    return XSystem.instance.eventManage;
  }

  constructor(info: IProcessInfo) {
    super(info)
    console.log('DesktopProcess')
  }

  public mount(dom: HTMLDivElement) {
    console.log('DesktopProcess: start mount')
    if (this._isMounted) return
    this._width = window.innerWidth
    this._height = window.innerHeight
    window.addEventListener(
      'resize',
      debounce(() => {
        this.width = window.innerWidth
        this.height = window.innerHeight
      }, 300)
    )

    dom.style.zIndex = '0';
    dom.style.width = `${this._width}px`
    dom.style.height = `${this._height}px`
    this._desktopRootDom = dom

    const app = createApp(DesktopComponent, { process: this })
    app.use(naiveUi)
    app.mount(dom)

    this._isMounted = true
  }
}