95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import ProcessImpl from '@/core/process/impl/ProcessImpl.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 { debounce } from 'lodash'
|
|
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
|
|
import { eventManager } from '@/core/events/EventManager.ts'
|
|
import { processManager } from '@/core/process/ProcessManager.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 processManager.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')
|
|
eventManager.notifyEvent('onDesktopRootDomResize', this._width, this._height);
|
|
}
|
|
});
|
|
}
|
|
|
|
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`
|
|
dom.style.position = 'relative'
|
|
this._desktopRootDom = dom
|
|
|
|
const app = createApp(DesktopComponent, { process: this })
|
|
app.use(naiveUi)
|
|
app.mount(dom)
|
|
|
|
this._isMounted = true
|
|
}
|
|
} |