82 lines
2.4 KiB
TypeScript
82 lines
2.4 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 { processManager } from '@/core/process/ProcessManager.ts'
|
||
import './ui/DesktopElement.ts'
|
||
import { ObservableImpl } from '@/core/state/impl/ObservableImpl.ts'
|
||
|
||
interface IDesktopDataState {
|
||
/** 显示器宽度 */
|
||
monitorWidth: number;
|
||
/** 显示器高度 */
|
||
monitorHeight: number;
|
||
}
|
||
|
||
export class DesktopProcess extends ProcessImpl {
|
||
/** 桌面根dom，类似显示器 */
|
||
private readonly _monitorDom: HTMLElement
|
||
private _isMounted: boolean = false
|
||
private _data = new ObservableImpl<IDesktopDataState>({
|
||
monitorWidth: 0,
|
||
monitorHeight: 0,
|
||
})
|
||
|
||
public get monitorDom() {
|
||
return this._monitorDom
|
||
}
|
||
public get isMounted() {
|
||
return this._isMounted
|
||
}
|
||
public get basicSystemProcess() {
|
||
return processManager.findProcessByName<BasicSystemProcess>('basic-system')
|
||
}
|
||
|
||
get data() {
|
||
return this._data
|
||
}
|
||
|
||
constructor(info: IProcessInfo, dom: HTMLDivElement) {
|
||
super(info)
|
||
console.log('DesktopProcess')
|
||
dom.style.position = 'relative'
|
||
dom.style.overflow = 'hidden'
|
||
dom.style.width = `${window.innerWidth}px`
|
||
dom.style.height = `${window.innerHeight}px`
|
||
|
||
this._monitorDom = dom
|
||
this._data.state.monitorWidth = window.innerWidth
|
||
this._data.state.monitorHeight = window.innerHeight
|
||
window.addEventListener('resize', this.onResize)
|
||
|
||
this.createDesktopUI()
|
||
}
|
||
|
||
private onResize = debounce(() => {
|
||
this._monitorDom.style.width = `${window.innerWidth}px`
|
||
this._monitorDom.style.height = `${window.innerHeight}px`
|
||
this._data.state.monitorWidth = window.innerWidth
|
||
this._data.state.monitorHeight = window.innerHeight
|
||
}, 300)
|
||
|
||
private createDesktopUI() {
|
||
if (this._isMounted) return
|
||
const app = createApp(DesktopComponent, { process: this })
|
||
app.use(naiveUi)
|
||
app.mount(this._monitorDom)
|
||
this._isMounted = true
|
||
}
|
||
|
||
private initDesktop(dom: HTMLDivElement) {
|
||
const d = document.createElement('desktop-element')
|
||
dom.appendChild(d)
|
||
}
|
||
|
||
override destroy() {
|
||
super.destroy()
|
||
window.removeEventListener('resize', this.onResize)
|
||
}
|
||
} |