@owdproject/core 3.0.0-alpha.0

package/runtime/core/controllers/WindowController.ts

@@ -0,0 +1,413 @@
+import {useApplicationManager} from '../../composables/useApplicationManager'
+import {useDesktopWindowStore} from '../../stores/storeDesktopWindow'
+import {deepClone} from '../../utils/utilsCommon'
+import {markRaw} from '@vue/reactivity'
+import {defineAsyncComponent} from "vue"
+
+export class WindowController implements IWindowController {
+    public readonly application: IApplicationController
+
+    public readonly instanced: boolean = true
+    public readonly model: string
+
+    public config: WindowConfig = {
+        title: '',
+        category: '',
+
+        component: undefined,
+
+        // position
+        position: {
+            x: 0,
+            y: 0,
+            z: 0,
+        },
+
+        // sizes
+        size: {
+            width: undefined,
+            height: undefined,
+        },
+
+        // minimize
+        minimizable: true,
+
+        // maximize
+        maximized: false,
+        maximizable: false,
+
+        // destroy
+        destroyable: true,
+
+        // draggable
+        draggable: true,
+
+        // resizable
+        resizable: true,
+    }
+
+    public override: WindowOverride = {}
+
+    public meta: any = {}
+    private storedState: WindowStoredState
+
+    constructor(
+        application: IApplicationController,
+        model: string,
+        windowConfig: WindowConfig,
+        windowStoredState: WindowStoredState,
+    ) {
+        this.application = application
+        this.model = model
+        this.storedState = windowStoredState
+
+        this.setConfig(windowConfig)
+
+        this.restoreState()
+    }
+
+    private setConfig(config: WindowConfig) {
+        // component
+        if (config.component) {
+            this.config.component = markRaw(
+                defineAsyncComponent(config.component)
+            )
+        }
+
+        // title
+        if (config.title) this.config.title = config.title
+        if (config.icon) this.config.icon = config.icon
+
+        // position
+        if (!this.config.position) this.config.position = { x: 0, y: 0, z: 0 }
+        if (config.position?.x) this.config.position.x = config.position.x
+        if (config.position?.y) this.config.position.y = config.position.y
+        if (config.position?.z) this.config.position.z = config.position.z
+
+        // sizes
+        if (config.size?.width) this.config.size.width = config.size.width
+        if (config.size?.height) this.config.size.height = config.size.height
+        if (config.size?.minWidth) this.config.size.minWidth = config.size.minWidth
+        if (config.size?.minHeight) this.config.size.minHeight = config.size.minHeight
+        if (config.size?.maxWidth) this.config.size.maxWidth = config.size.maxWidth
+        if (config.size?.maxHeight) this.config.size.maxHeight = config.size.maxHeight
+
+        // minimize
+        if (typeof config.minimizable !== 'undefined') {
+            this.config.minimizable = config.minimizable
+        }
+        if (typeof config.maximizable !== 'undefined') {
+            this.config.maximizable = config.maximizable
+        }
+
+        // maximize
+        if (typeof config.maximized !== 'undefined') {
+            this.config.maximized = config.maximized
+        }
+
+        // draggable
+        if (typeof config.draggable !== 'undefined') {
+            this.config.draggable = config.draggable
+        }
+
+        // resizable
+        if (typeof config.resizable !== 'undefined') {
+            this.config.resizable = config.resizable
+        }
+
+        // destroy
+        if (typeof config.destroyable !== 'undefined') {
+            this.config.destroyable = config.destroyable
+        }
+    }
+
+    // state
+
+    get state() {
+        return this.storedState.state
+    }
+
+    private restoreState() {
+        if (!this.state.pinned) this.state.pinned = this.config.pinned
+        if (!this.state.position) this.state.position = deepClone(this.config.position)
+
+        if (!this.state.minimizable) this.state.minimizable = this.config.minimizable
+        if (!this.state.maximized) this.state.maximized = this.config.maximized
+        if (!this.state.destroyable) this.state.destroyable = this.config.destroyable
+        if (!this.state.draggable) this.state.draggable = this.config.draggable
+        if (!this.state.resizable) this.state.resizable = this.config.resizable
+
+        if (!this.state.size) {
+            this.state.size = deepClone(this.config.size)
+        }
+    }
+
+    // position
+
+    private setPosition(data: { x: number, y: number}) {
+        if (!this.state.position) {
+            this.state.position = { x: 0, y: 0}
+        }
+
+        this.state.position.x = data.x
+        this.state.position.y = data.y
+    }
+
+    private setActive(value: boolean) {
+        this.state.active = value
+    }
+
+    private setFocus(value: boolean) {
+        this.state.focused = value
+    }
+
+    private bringToFront() {
+        const applicationManager = useApplicationManager()
+        const desktopWindowStore = useDesktopWindowStore()
+
+        if (!this.state.position) {
+            this.state.position = { x: 0, y: 0, z: 0 }
+        }
+
+        // already focused
+        if (this.state.focused) {
+            return
+        }
+
+        // set focus false on all other windows
+        for (const [windowId, window] of applicationManager.windowsOpened) {
+            window.actions.setFocus(false)
+        }
+
+        this.setFocus(true)
+
+        this.state.position.z = desktopWindowStore.incrementPositionZ()
+    }
+
+    // common
+
+    get title(): string {
+        if (typeof this.override.title !== 'undefined') {
+            return this.override.title
+        }
+
+        if (this.config.title) {
+            return this.config.title
+        }
+
+        return this.application.config.title
+    }
+
+    get icon() {
+        if (typeof this.override.icon !== 'undefined') {
+            return this.override.icon
+        }
+
+        if (this.config.icon) {
+            return this.config.icon
+        }
+
+        return this.application.config.icon
+    }
+
+    // sizes
+
+    get width() {
+        if (typeof this.state.size?.width === 'undefined') {
+            return this.config.size.width
+        }
+
+        return this.state.size.width
+    }
+
+    get maxWidth() {
+        if (typeof this.state.size?.maxWidth === 'undefined') {
+            return this.config.size.maxWidth
+        }
+
+        return this.state.size.maxWidth
+    }
+
+    get minWidth() {
+        if (typeof this.state.size?.minWidth === 'undefined') {
+            return this.config.size.minWidth
+        }
+
+        return this.state.size.minWidth
+    }
+
+    get height() {
+        if (typeof this.state.size?.height === 'undefined') {
+            return this.config.size.height
+        }
+
+        return this.state.size.height
+    }
+
+    get maxHeight() {
+        if (typeof this.state.size?.maxHeight === 'undefined') {
+            return this.config.size.maxHeight ?? 600
+        }
+
+        return this.state.size.maxHeight
+    }
+
+    get minHeight() {
+        if (typeof this.state.size?.minHeight === 'undefined') {
+            return this.config.size.minHeight
+        }
+
+        return this.state.size.minHeight
+    }
+
+    private setSize(data: { width: number, height: number}) {
+        if (!this.state.size) {
+            this.state.size = { width: undefined, height: undefined }
+        }
+
+        this.state.size.width = data.width
+        this.state.size.height = data.height
+    }
+
+    // minimize
+
+    get isMinimizable() {
+        if (typeof this.state.minimizable === 'undefined') {
+            return !!this.config.minimizable
+        }
+
+        return this.state.minimizable
+    }
+
+    private minimize() {
+        if (!this.isMinimizable) {
+            return false
+        }
+
+        this.state.active = false
+        return true
+    }
+
+    private toggleMinimize() {
+        this.state.active = !this.state.active
+        this.bringToFront()
+    }
+
+    // maximize
+
+    get isMaximizable() {
+        if (typeof this.state.maximizable === 'undefined') {
+            return !!this.config.maximizable
+        }
+
+        return this.state.maximizable
+    }
+
+    get isMaximized() {
+        if (typeof this.state.maximized === 'undefined') {
+            return !!this.config.maximized
+        }
+
+        return this.state.maximized
+    }
+
+    private toggleMaximize() {
+        if (!this.isMaximizable) {
+            return false
+        }
+
+        this.state.maximized = !this.state.maximized
+        return true
+    }
+
+    private maximize() {
+        if (!this.isMaximizable) {
+            return false
+        }
+
+        this.state.maximized = true
+        return true
+    }
+
+    private unmaximize() {
+        if (!this.isMaximizable) {
+            return false
+        }
+
+        this.state.maximized = false
+        return true
+    }
+
+    // destroy
+
+    get isDestroyable() {
+        return !!this.state.destroyable
+    }
+
+    private destroy() {
+        if (!this.isDestroyable) {
+            return false
+        }
+
+        this.application.closeWindow(this.state.id)
+
+        return true
+    }
+
+    // draggable
+    get isDraggable() {
+        return !!this.state.draggable
+    }
+
+    // resizable
+    get isResizable() {
+        return !!this.state.resizable
+    }
+
+    // workspace
+    private setWorkspace(workspaceId: string) {
+        this.state.workspace = workspaceId
+    }
+
+    // override
+
+    setTitleOverride(value: undefined|string) {
+        this.override.title = value
+    }
+
+    resetTitleOverride() {
+        this.override.title = undefined
+    }
+
+    get actions() {
+        return {
+            // position
+            setActive: this.setActive.bind(this),
+            setFocus: this.setFocus.bind(this),
+            bringToFront: this.bringToFront.bind(this),
+            setPosition: this.setPosition.bind(this),
+
+            // size
+            setSize: this.setSize.bind(this),
+
+            // minimize
+            minimize: this.minimize.bind(this),
+            toggleMinimize: this.toggleMinimize.bind(this),
+
+            // maximize
+            toggleMaximize: this.toggleMaximize.bind(this),
+            maximize: this.maximize.bind(this),
+            unmaximize: this.unmaximize.bind(this),
+
+            // destroy
+            destroy: this.destroy.bind(this),
+
+            // workspace
+            setWorkspace: this.setWorkspace.bind(this),
+
+            // override
+            setTitleOverride: this.setTitleOverride.bind(this),
+            resetTitleOverride: this.resetTitleOverride.bind(this),
+        }
+    }
+}

package/runtime/core/managers/ApplicationManager.ts

@@ -0,0 +1,256 @@
+import type {Reactive} from "@vue/reactivity"
+import {reactive, markRaw} from "@vue/reactivity"
+import {ApplicationController} from "../controllers/ApplicationController";
+import {debugLog} from "../../utils/utilsDebug"
+
+export class ApplicationManager implements IApplicationManager {
+    public apps = reactive(
+        new Map<string, IApplicationController>()
+    )
+
+    constructor() {
+    }
+
+    /**
+     * Import applications on nuxt start
+     */
+    public async importApps() {
+        const {owdConfig} = await import(`~~/owd.config`)
+
+        if (owdConfig && typeof owdConfig.loader === 'function') {
+            await owdConfig.loader()
+        }
+    }
+
+    /**
+     * Define new application
+     *
+     * @param id
+     * @param config
+     */
+    public async defineApp(id: string, config: ApplicationConfig) {
+        if (this.isAppDefined(id)) {
+            debugLog(`App "${id}" is already defined`);
+            return this.apps.get(id)!;
+        }
+
+        if (!config.version) config.version = 'unknown'
+        if (!config.description) config.description = ''
+        if (!config.category) config.category = 'other'
+
+        const applicationConfig = markRaw(config)
+
+        const applicationController: IApplicationController = new ApplicationController(id, applicationConfig)
+
+        // finalize application setup doing other async operations
+        await applicationController.initApplication()
+
+        // define application
+        this.apps.set(id, applicationController)
+
+        return applicationController
+    }
+
+    /**
+     * Check if app has been defned
+     *
+     * @param id
+     */
+    public isAppDefined(id: string) {
+        return this.apps.has(id)
+    }
+
+    /**
+     * Check if app is running
+     *
+     * @param id
+     */
+    public isAppRunning(id: string) {
+        if (!this.isAppDefined(id)) {
+            throw Error(`App "${id}" is not defined`);
+        }
+
+        const applicationController: IApplicationController = this.apps.get(id)!
+
+        if (!applicationController.isRunning) {
+            return false
+        }
+
+        return true
+    }
+
+    /**
+     * Launch app rntry
+     *
+     * @param id
+     * @param entryKey
+     */
+    public async launchAppEntry(id: string, entryKey: string) {
+        if (!this.isAppDefined(id)) {
+            throw Error(`App "${id}" is not defined`);
+        }
+
+        const applicationController: IApplicationController = this.apps.get(id)!
+
+        if (applicationController.config.entries && !applicationController.config.entries.hasOwnProperty(entryKey)) {
+            throw Error(`App entry "${entryKey}" is not defined in ${id} application`);
+        }
+
+        const entry: ApplicationEntry = applicationController.config.entries[entryKey]!
+
+        console.log('dio cane', entry)
+
+        await this.execAppCommand(applicationController.id, entry.command)
+    }
+
+    /**
+     * Run app command
+     *
+     * @param id
+     * @param command
+     */
+    public async execAppCommand(id: string, command: string) {
+        if (!this.isAppDefined(id)) {
+            throw Error(`App "${id}" is not defined`);
+        }
+
+        const applicationController: IApplicationController = this.apps.get(id)!
+
+        if (applicationController.config.commands && !applicationController.config.commands.hasOwnProperty(command)) {
+            throw Error(`App command "${command}" is not defined in ${id} application`);
+        }
+
+        const commandSplit: string[] = command.split(" ")
+
+        const commandFn: any = applicationController.config.commands![
+            commandSplit[0] as keyof typeof applicationController.config.commands
+            ]
+
+        commandFn(applicationController, commandSplit.shift())
+
+        applicationController.setRunning(true)
+
+        return applicationController;
+    }
+
+    /**
+     * Close application
+     *
+     * @param id
+     */
+    public closeApp(id: string) {
+        if (!this.isAppDefined(id)) {
+            throw Error(`App "${id}" is not defined`);
+        }
+
+        const applicationController: IApplicationController = this.apps.get(id)!
+
+        applicationController.closeAllWindows()
+        applicationController.setRunning(false)
+    }
+
+    /**
+     * Array of available menu entries for system bars, docks
+     */
+    public get appsEntries() {
+        const entries: Reactive<ApplicationEntryWithInherited[]> = reactive([])
+
+        for (const applicationController of this.apps.values()) {
+            if (!applicationController.config.entries) {
+                continue
+            }
+
+            for (const entryKey of Object.keys(applicationController.config.entries)) {
+                const entry: ApplicationEntry = applicationController.config.entries[entryKey]!
+
+                entries.push({
+                    application: applicationController,
+                    title: entry.title !== undefined ? entry.title : applicationController.config.title,
+                    icon: entry.icon !== undefined ? entry.icon : applicationController.config.icon,
+                    category: entry.category !== undefined ? entry.category : applicationController.config.category,
+                    command: entry.command
+                })
+            }
+        }
+
+        return entries
+    }
+
+    /**
+     * Array of opened windows for system bars, docks
+     */
+    public get windowsOpened() {
+        const windows: Reactive<Map<string, IWindowController>[]> = reactive([])
+
+        for (const applicationController of this.apps.values()) {
+            if (applicationController.isRunning) {
+                windows.push(...applicationController.windows)
+            }
+        }
+
+        return windows
+    }
+
+    /**
+     * Array of opened windows for system bars, docks
+     */
+    public get appsRunning() {
+        const applications: Reactive<IApplicationController[]> = reactive([])
+
+        for (const applicationController of this.apps.values()) {
+            if (applicationController.isRunning) {
+                applications.push(applicationController)
+            }
+        }
+
+        return applications
+    }
+
+    public getWindowOpenedId(windowId: string) {
+        const mapWindowFound: Map<string, IWindowController> | undefined = this.windowsOpened.find((window: any) => {
+            return window[1].state.id === windowId
+        })
+
+        if (mapWindowFound) {
+            // @ts-ignore
+            return mapWindowFound[1] as IWindowController
+        }
+    }
+
+    /**
+     * Gets all unique categories from the installed apps
+     */
+    public get appCategories(): string[] {
+        const categories = new Set<string>()
+
+        for (const applicationController of this.apps.values()) {
+            if (applicationController.config.category) {
+                categories.add(applicationController.config.category)
+            }
+        }
+        return Array.from(categories).sort()
+    }
+
+    /**
+     * Gets the apps ordered by category
+     */
+    public get appsByCategory(): { [category: string]: IApplicationController[] } {
+        const categorizedApps: { [category: string]: IApplicationController[] } = {}
+
+        for (const applicationController of this.apps.values()) {
+            const category = applicationController.config.category || 'other'
+            if (!categorizedApps[category]) {
+                categorizedApps[category] = []
+            }
+            categorizedApps[category].push(applicationController)
+        }
+
+        for (const category in categorizedApps) {
+            categorizedApps[category]!.sort(
+                (a, b) => a.config.title.localeCompare(b.config.title)
+            )
+        }
+
+        return categorizedApps
+    }
+}

package/runtime/core/managers/DesktopManager.ts

@@ -0,0 +1,41 @@
+import {deepMerge} from "../../utils/utilsCommon"
+
+export class DesktopManager {
+    public config: DesktopConfig = {} as DesktopConfig
+    private defaultApps: DefaultAppsConfig = {}
+
+    constructor() {
+
+    }
+
+    public hasFeature(featureName: string) {
+        return this.config.features?.indexOf(featureName) !== -1
+    }
+
+    public setConfig(config: DesktopConfig) {
+        this.config = config
+        this.loadDefaultAppsFromConfig()
+    }
+
+    public overrideConfig(config: Partial<DesktopConfig>) {
+        this.config = deepMerge(this.config, config) as DesktopConfig
+        this.loadDefaultAppsFromConfig()
+    }
+
+    public setDefaultApp(feature: string, application: IApplicationController, entry: ApplicationEntry) {
+        this.defaultApps[feature] = {
+            application,
+            entry
+        }
+    }
+
+    public getDefaultApp(feature: string): DefaultAppConfig {
+        return this.defaultApps[feature] as DefaultAppConfig
+    }
+
+    private loadDefaultAppsFromConfig() {
+        if (this.config.defaultApps) {
+            this.defaultApps = { ...this.config.defaultApps }
+        }
+    }
+}

package/runtime/plugins/resize.client.ts

@@ -0,0 +1,6 @@
+import VueResizable from 'vue-resizable/src/components/vue-resizable.vue'
+import {defineNuxtPlugin} from "nuxt/app"
+
+export default defineNuxtPlugin(nuxtApp => {
+    nuxtApp.vueApp.component('vue-resizable', VueResizable)
+})