@owdproject/core 3.0.0-alpha.0

package/runtime/components/Core/Window/CoreWindow.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {ref,provide} from 'vue'
+import {computed} from "@vue/reactivity"
+import {useDesktopManager} from "../../../composables/useDesktopManager"
+import {handleWindowControllerProps} from "../../../utils/utilsWindow"
+
+const props = defineProps<{
+  window?: IWindowController
+  content?: WindowContent
+}>()
+
+const emit = defineEmits([
+  'resize:start',
+  'resize:move',
+  'resize:end',
+  'drag:start',
+  'drag:move',
+  'drag:end',
+  'close',
+  'open',
+  'blur',
+  'focus',
+  'minimize',
+  'restore',
+  'maximize',
+  'unmaximize',
+  'toggle-maximize'
+])
+
+const desktopManager = useDesktopManager() // used in <style v-bind>
+const windowController: IWindowController = handleWindowControllerProps(props.window)
+
+provide<IWindowController>('windowController', windowController)
+provide<WindowContent>('windowContent', props.content ?? {})
+
+const isDragging = ref(false)
+const isResizing = ref(false)
+
+function onWindowPointerDown() {
+  windowController?.actions?.setActive(true)
+  windowController?.actions?.bringToFront()
+}
+
+function onWindowDragStart(data: any) {
+  isDragging.value = true
+
+  emit('drag:start', data)
+}
+
+function onWindowDragMove(data: any) {
+  emit('drag:move', data)
+}
+
+function onWindowDragEnd(data: { left: number; top: number }) {
+  windowController?.actions?.setPosition({
+    x: data.left,
+    y: data.top
+  })
+
+  isDragging.value = false
+
+  emit('drag:end', data)
+}
+
+function onWindowResizeStart(data: any) {
+  isResizing.value = true
+
+  emit('resize:start', data)
+}
+
+function onWindowResizeMove(data: any) {
+  emit('resize:move', data)
+}
+
+/**
+ * Window end resize event
+ */
+function onWindowResizeEnd(data: { left: number; top: number, width: number, height: number }) {
+  isResizing.value = false
+
+  windowController?.actions?.setPosition({
+    x: data.left,
+    y: data.top
+  })
+
+  windowController?.actions?.setSize({
+    width: data.width,
+    height: data.height
+  })
+
+  emit('resize:end', data)
+}
+
+const classes = computed(() => {
+  const list = ['owd-window']
+
+  if (windowController?.state.focused) {
+    list.push('owd-window--focused')
+  }
+
+  if (isDragging.value) {
+    list.push('owd-window--dragging')
+  }
+
+  if (isResizing.value) {
+    list.push('owd-window--resizing')
+  }
+
+  return list
+})
+</script>
+
+<template>
+  <vue-resizable
+      ref="windowResizableController"
+      :class="classes"
+      :width="windowController?.state.size?.width"
+      :height="windowController?.state.size?.height"
+      :min-width="windowController?.state.size?.minWidth"
+      :min-height="windowController?.state.size?.minHeight"
+      :max-width="windowController?.state.size?.maxWidth"
+      :max-height="windowController?.state.size?.maxHeight"
+      :left="windowController?.state.position?.x"
+      :top="windowController?.state.position?.y"
+      :active="windowController?.isResizable ? undefined : []"
+      @drag:start="onWindowDragStart"
+      @drag:move="onWindowDragMove"
+      @drag:end="onWindowDragEnd"
+      @resize:start="onWindowResizeStart"
+      @resize:move="onWindowResizeMove"
+      @resize:end="onWindowResizeEnd"
+      :style="{zIndex: windowController?.state.position?.z}"
+      :drag-selector="windowController?.isDraggable ? '.owd-window-nav__draggable' : '.owd-window-nav__draggable-none'"
+      @pointerdown="onWindowPointerDown"
+  >
+
+    <slot/>
+
+  </vue-resizable>
+</template>
+
+<style scoped lang="scss">
+.owd-window {
+  position: v-bind('desktopManager.config.windows.position');
+
+  &--dragging, &--resizing {
+    :deep(.owd-window__content) {
+      pointer-events: none;
+    }
+  }
+
+  :deep(.owd-window__content) {
+    overflow-y: auto;
+    height: 100%;
+  }
+}
+</style>

package/runtime/components/Core/Window/CoreWindowContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {inject} from "vue"
+import {computed} from "@vue/reactivity"
+
+const windowContent = inject<WindowContent>('windowContent')
+
+const classes = computed(() => {
+  const list = ['owd-window__content']
+
+  if (windowContent?.centered) {
+    list.push('owd-window__content--centered')
+  }
+
+  if (windowContent?.padded) {
+    list.push('p-2')
+  }
+
+  return list
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/runtime/components/Core/Window/CoreWindowNav.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {inject} from "vue"
+import {computed} from "@vue/reactivity"
+
+const windowController = inject<IWindowController>('windowController')
+
+const classes = computed(() => {
+  const list = ['owd-window-nav']
+
+  if (typeof windowController?.state.active === 'undefined' || !!windowController?.state.active) {
+    list.push('owd-window-nav--active')
+  }
+
+  if (typeof windowController?.state.focused === 'undefined' || !!windowController?.state.focused) {
+    list.push('owd-window-nav--focused')
+  }
+
+  return list
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <div class="owd-window-nav__draggable"/>
+
+    <slot/>
+
+  </div>
+</template>
+
+<style lang="scss">
+.owd-window-nav {
+  position: relative;
+
+  &__draggable {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+  }
+}
+</style>

package/runtime/composables/useAppEntries.ts

@@ -0,0 +1,21 @@
+import {useApplicationManager} from './useApplicationManager'
+import {computed} from "@vue/reactivity"
+
+export function useAppEntries() {
+    const applicationManager = useApplicationManager()
+
+    const sortedAppEntries = function(sortBy: 'title'): Ref<ApplicationEntryWithInherited[]> {
+        return computed(() => {
+            const currentEntries = [...applicationManager.appsEntries]
+
+            if (sortBy === 'title') {
+                currentEntries.sort((a, b) => (a.title || '').localeCompare(b.title || ''))
+            } else if (sortBy === 'category') {
+                currentEntries.sort((a, b) => (a.category || '').localeCompare(b.category || ''))
+            }
+            return currentEntries
+        })
+    }
+
+    return { sortedAppEntries }
+}

package/runtime/composables/useApplicationManager.ts

@@ -0,0 +1,7 @@
+import {ApplicationManager} from "../core/managers/ApplicationManager";
+
+const applicationManager = new ApplicationManager()
+
+export function useApplicationManager(): IApplicationManager {
+    return applicationManager
+}

package/runtime/composables/useApplicationState.ts

@@ -0,0 +1,19 @@
+import {defineStore} from "pinia"
+import {ref} from "@vue/reactivity"
+
+export const useApplicationState = (appId: string) => {
+    return defineStore(`owd/application/${appId}`, () => {
+        const meta: Ref<any> = ref({})
+
+        const windows: Ref<{[windowId: string]: WindowStoredState}> = ref({})
+
+        return {
+            windows,
+            meta,
+        }
+    }, {
+        persistedState: {
+            persist: true
+        },
+    })()
+}

package/runtime/composables/useDesktopManager.ts

@@ -0,0 +1,7 @@
+import {DesktopManager} from "../core/managers/DesktopManager";
+
+const desktopManager = new DesktopManager()
+
+export function useDesktopManager() {
+    return desktopManager
+}

package/runtime/composables/useTerminalManager.ts

@@ -0,0 +1,3 @@
+export function useTerminalManager() {
+    // todo reimplement index of applications cmds
+}

package/runtime/core/controllers/ApplicationController.ts

@@ -0,0 +1,209 @@
+import {nanoid} from "nanoid";
+import {WindowController} from "./WindowController";
+import {useApplicationManager} from "../../composables/useApplicationManager"
+import {useApplicationState} from "../../composables/useApplicationState"
+import {useDesktopManager} from "../../composables/useDesktopManager"
+import {debugLog, debugError} from "../../utils/utilsDebug"
+import {useDesktopWorkspaceStore} from "../../stores/storeDesktopWorkspace"
+import {reactive} from '@vue/reactivity'
+
+export class ApplicationController implements IApplicationController {
+    private readonly applicationManager: IApplicationManager
+    private readonly desktopManager: IDesktopManager
+
+    public readonly id
+    public readonly config
+    public readonly store
+
+    public windows = reactive(new Map<string, IWindowController>())
+
+    public isRunning: boolean = false
+
+    constructor(
+        id: string,
+        config: ApplicationConfig
+    ) {
+        this.applicationManager = useApplicationManager()
+        this.desktopManager = useDesktopManager()
+
+        this.id = id
+        this.config = config
+        this.store = useApplicationState(id)
+    }
+
+    public async initApplication(): Promise<void> {
+        // set as default app for specific purposes
+        // todo improve this and move it in a store
+        if (this.config.provides) {
+            const existingDefault = this.desktopManager.getDefaultApp(this.config.provides.name)
+
+            if (!existingDefault) {
+                this.desktopManager.setDefaultApp(
+                    this.config.provides.name,
+                    this,
+                    this.config.entries[this.config.provides.entry] as ApplicationEntry
+                )
+
+                debugLog(`${this.config.title} has been set as predefined app for "${this.config.provides}"`)
+            }
+        }
+
+        if (this.store.$persistedState) {
+            await this.store.$persistedState.isReady()
+        }
+
+        // set default meta values
+        this.store.meta = this.config.meta ?? undefined
+
+        // once app is defined, always run "onReady"
+        if (typeof this.config.onReady === 'function') {
+            this.config.onReady(this)
+        }
+
+        // restore application state
+        await this.restoreApplication()
+    }
+
+    /**
+     * App always tries to restore previous windows
+     * and returns a boolean if it succeeded
+     */
+    public async restoreApplication() {
+        if (typeof this.config.onRestore === 'function') {
+            await this.config.onRestore(this)
+        }
+
+        if (!this.store.windows || Object.keys(this.store.windows).length === 0) {
+            return false
+        }
+
+        this.restoreWindows()
+
+        this.setRunning(true)
+
+        return true
+    }
+
+    private restoreWindows() {
+        Object.keys(this.store.windows).map(windowId => {
+            const windowStore: WindowStoredState | undefined = this.store.windows[windowId]
+
+            if (windowStore) {
+                this.openWindow(windowStore.model, windowStore, {isRestoring: true})
+            }
+        })
+
+        debugLog('Windows have been restored', this.windows)
+    }
+
+    public openWindow(model: string, windowStoredState: WindowStoredState | undefined, meta?: any) {
+        const desktopWorkspaceStore = useDesktopWorkspaceStore()
+
+        if (!this.config.windows || !this.config.windows.hasOwnProperty(model)) {
+            debugError(`Window model "${model}" not found`)
+            return
+        }
+
+        let windowId: string
+
+        if (!windowStoredState) {
+
+            windowId = `${model}-${nanoid(6)}`
+
+            const windowConfig: WindowConfig = this.config.windows[model] as WindowConfig
+            const screenHeight = window.innerHeight
+            const centerY = (screenHeight - Number(windowConfig.size.height)) / 2
+            const positionY = windowConfig.position?.y !== undefined
+                ? window.scrollY + windowConfig.position.y
+                : window.scrollY + centerY
+
+            this.store.windows[windowId] = {
+                model,
+                state: {
+                    id: windowId,
+                    active: true,
+                    focused: false,
+                    position: {
+                        x: windowConfig.position?.x,
+                        y: positionY,
+                    },
+                    createdAt: +new Date(),
+                    workspace: desktopWorkspaceStore.active
+                }
+            }
+
+            windowStoredState = this.store.windows[windowId]
+
+        } else {
+
+            // restore previous id if state is defined
+            windowId = windowStoredState.state.id
+
+        }
+
+        const windowConfig = this.config.windows[model] as WindowConfig
+
+        const windowController = new WindowController(
+            this,
+            model,
+            windowConfig,
+            windowStoredState!
+        )
+
+        if (!meta?.isRestoring) {
+            windowController.actions.bringToFront()
+        }
+
+        this.windows.set(
+            windowId,
+            windowController,
+        )
+
+        this.setRunning(true)
+
+        return windowController
+    }
+
+    public closeWindow(windowId: string) {
+        delete this.store.windows[windowId];
+        this.windows.delete(windowId);
+
+        if (this.windows.size === 0) {
+            this.applicationManager.closeApp(this.id)
+        }
+    }
+
+    public closeAllWindows() {
+        this.store.windows = {}
+        this.windows.clear()
+    }
+
+    get windowsOpened() {
+        return this.windows;
+    }
+
+    public setRunning(value: boolean): void {
+        this.isRunning = value
+    }
+
+    // meta
+
+    get meta() {
+        console.log('META', this.id, this.store.meta)
+        return this.store.meta
+    }
+
+    getMeta(key: string) {
+        return this.meta[key]
+    }
+
+    setMeta(key: string, value: any) {
+        this.meta[key] = value
+    }
+
+    // commands
+
+    async execCommand(input: string): Promise<CommandOutput | void> {
+        await this.applicationManager.execAppCommand(this.id, input)
+    }
+}