@owdproject/core 3.4.0 → 4.0.0-alpha.4

package/runtime/internal/controllers/WindowController.ts

@@ -1,547 +0,0 @@
-import { useApplicationManager } from '../../composables/useApplicationManager'
-import { useDesktopWindowStore } from '../../stores/storeDesktopWindow'
-import { deepClone } from '../../utils/utilCommon'
-import { markRaw, reactive } 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 = reactive({})
-
-  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
-    }
-
-    const DEFAULT_OVERRIDABLE = {
-      draggable: true,
-      resizable: false,
-      position: false,
-      size: false,
-      maximized: false,
-      destroyable: false,
-      minimizable: false,
-      maximizable: false,
-    }
-
-    DEFAULT_OVERRIDABLE.position = DEFAULT_OVERRIDABLE.draggable
-    DEFAULT_OVERRIDABLE.size = DEFAULT_OVERRIDABLE.resizable
-    DEFAULT_OVERRIDABLE.maximized = DEFAULT_OVERRIDABLE.maximizable
-
-    this.config.overridable = {
-      ...DEFAULT_OVERRIDABLE,
-      ...(config.overridable || {}),
-    }
-  }
-
-  // state
-
-  get state() {
-    return this.storedState.state
-  }
-
-  private restoreState() {
-    const overridable = this.config.overridable || {}
-
-    for (const key in overridable) {
-      if (overridable[key as keyof typeof overridable]) {
-        const stateKey = key as keyof WindowState
-
-        if (typeof this.state[stateKey] === 'undefined') {
-          if (typeof this.config[stateKey] === 'object') {
-            this.state[stateKey] = deepClone(this.config[stateKey])
-          } else {
-            this.state[stateKey] = !!this.config[stateKey]
-          }
-        }
-      }
-    }
-  }
-
-  private setState(state: WindowState) {
-    this.storedState.state = state
-  }
-
-  // meta
-
-  get meta() {
-    return this.storedState.meta
-  }
-
-  // position
-
-  public 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
-  }
-
-  public setActive(value: boolean) {
-    this.state.active = value
-  }
-
-  public setFocus(value: boolean) {
-    this.state.focused = value
-  }
-
-  public focus() {
-    const applicationManager = useApplicationManager()
-    const desktopWindowStore = useDesktopWindowStore()
-
-    if (!this.state.position) {
-      this.state.position = { x: 0, y: 0, z: 0 }
-    }
-
-    for (const window of applicationManager.windowsOpened.value.values()) {
-      if (window !== this) {
-        window.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 windowTitle(): string {
-    if (typeof this.override.windowTitle !== 'undefined') {
-      return this.override.windowTitle
-    }
-
-    return this.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
-  }
-
-  // position
-
-  get position() {
-    if (typeof this.state.position === 'undefined') {
-      return this.config.position
-    }
-
-    return this.state.position
-  }
-
-  // sizes
-
-  get size() {
-    const stateSize = this.state.size || {}
-    const configSize = this.config.size || {}
-
-    return {
-      width:
-        typeof stateSize.width !== 'undefined'
-          ? stateSize.width
-          : configSize.width,
-      height:
-        typeof stateSize.height !== 'undefined'
-          ? stateSize.height
-          : configSize.height,
-      minWidth:
-        typeof stateSize.minWidth !== 'undefined'
-          ? stateSize.minWidth
-          : configSize.minWidth,
-      maxWidth:
-        typeof stateSize.maxWidth !== 'undefined'
-          ? stateSize.maxWidth
-          : configSize.maxWidth,
-      minHeight:
-        typeof stateSize.minHeight !== 'undefined'
-          ? stateSize.minHeight
-          : configSize.minHeight,
-      maxHeight:
-        typeof stateSize.maxHeight !== 'undefined'
-          ? stateSize.maxHeight
-          : configSize.maxHeight,
-    }
-  }
-
-  public 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 (this.config.overridable?.minimizable) {
-      return !!this.state.minimizable
-    }
-
-    return !!this.config.minimizable
-  }
-
-  public minimize() {
-    if (!this.isMinimizable) {
-      return false
-    }
-
-    this.state.active = false
-    return true
-  }
-
-  public unminimize() {
-    this.state.active = true
-    return true
-  }
-
-  public toggleMinimize() {
-    this.state.active = !this.state.active
-    this.focus()
-  }
-
-  // maximize
-
-  get isMaximizable() {
-    if (typeof this.state.maximizable === 'undefined') {
-      return !!this.config.maximizable
-    }
-
-    return this.state.maximizable
-  }
-
-  get isMaximized() {
-    if (this.state.layout === 'maximize') {
-      return true
-    }
-
-    if (this.config.overridable?.maximized) {
-      return !!this.state.maximized
-    }
-
-    return !!this.config.maximized
-  }
-
-  private parseSizeValue(value: WindowSizeValue | undefined, fallback: number): number {
-    if (typeof value === 'number') {
-      return value
-    }
-    if (typeof value === 'string') {
-      const parsed = Number.parseFloat(value)
-      if (!Number.isNaN(parsed)) {
-        return parsed
-      }
-    }
-    return fallback
-  }
-
-  public saveBoundsBeforeLayout() {
-    if (this.state.layout && this.state.layout !== 'normal') {
-      return
-    }
-
-    const pos = this.position
-    const size = this.size
-
-    this.state.boundsBeforeLayout = {
-      x: pos?.x ?? 0,
-      y: pos?.y ?? 0,
-      width: this.parseSizeValue(size.width, 400),
-      height: this.parseSizeValue(size.height, 300),
-    }
-  }
-
-  public setLayout(layout: WindowLayout) {
-    if (layout === 'normal') {
-      return this.clearLayout()
-    }
-
-    if (!this.isMaximizable) {
-      return false
-    }
-
-    this.saveBoundsBeforeLayout()
-    this.state.layout = layout
-    this.state.maximized = layout === 'maximize'
-    return true
-  }
-
-  public clearLayout() {
-    const bounds = this.state.boundsBeforeLayout
-    if (bounds) {
-      this.setPosition({ x: bounds.x, y: bounds.y })
-      this.setSize({ width: bounds.width, height: bounds.height })
-      delete this.state.boundsBeforeLayout
-    }
-
-    this.state.layout = 'normal'
-    this.state.maximized = false
-    return true
-  }
-
-  public toggleMaximize() {
-    if (!this.isMaximizable) {
-      return false
-    }
-
-    if (this.isMaximized) {
-      return this.clearLayout()
-    }
-
-    return this.setLayout('maximize')
-  }
-
-  public maximize() {
-    if (!this.isMaximizable) {
-      return false
-    }
-
-    return this.setLayout('maximize')
-  }
-
-  public unmaximize() {
-    if (!this.isMaximizable) {
-      return false
-    }
-
-    return this.clearLayout()
-  }
-
-  // destroy
-
-  get isDestroyable() {
-    if (this.config.overridable?.destroyable) {
-      return !!this.state.destroyable
-    }
-
-    return !!this.config.destroyable
-  }
-
-  public destroy() {
-    if (!this.isDestroyable) {
-      return false
-    }
-
-    this.application.closeWindow(this.state.id)
-
-    return true
-  }
-
-  // draggable
-  get isDraggable() {
-    if (this.config.overridable?.draggable) {
-      return !!this.state.draggable
-    }
-
-    return !!this.config.draggable
-  }
-
-  // resizable
-  get isResizable() {
-    if (this.config.overridable?.resizable) {
-      return !!this.state.resizable
-    }
-
-    return !!this.config.resizable
-  }
-
-  // workspace
-  public setWorkspace(workspaceId: string) {
-    this.state.workspace = workspaceId
-  }
-
-  // override
-
-  public setTitleOverride(value: undefined | string) {
-    this.override.title = value
-  }
-
-  public resetTitleOverride() {
-    this.override.title = undefined
-  }
-
-  public setWindowTitleOverride(value: undefined | string) {
-    this.override.windowTitle = value
-  }
-
-  public resetWindowTitleOverride() {
-    this.override.windowTitle = undefined
-  }
-
-  // menu
-
-  public menu: any[] = []
-
-  public setMenu(menu: any[]) {
-    this.menu = menu
-  }
-
-  // deprecated ?
-  get actions() {
-    return {
-      // position
-      setActive: this.setActive.bind(this),
-      setFocus: this.setFocus.bind(this),
-      bringToFront: this.focus.bind(this),
-      focus: this.focus.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),
-
-      // layout
-      setLayout: this.setLayout.bind(this),
-      clearLayout: this.clearLayout.bind(this),
-      saveBoundsBeforeLayout: this.saveBoundsBeforeLayout.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),
-      setWindowTitleOverride: this.setWindowTitleOverride.bind(this),
-      resetWindowTitleOverride: this.resetWindowTitleOverride.bind(this),
-    }
-  }
-}

package/runtime/plugins/01.desktop-shell-init.client.ts

@@ -1,28 +0,0 @@
-import { defineNuxtPlugin } from 'nuxt/app'
-import {
-  bindDesktopPinia,
-  initDesktopShell,
-  syncDesktopShellAppConfig,
-} from '../utils/initDesktopShell'
-import { migratePersistedStoreIds } from '../utils/migratePersistedStoreIds'
-
-export default defineNuxtPlugin({
-  name: 'desktop-shell-init',
-  dependsOn: ['pinia'],
-  enforce: 'pre',
-  setup(nuxtApp) {
-    migratePersistedStoreIds()
-    bindDesktopPinia(nuxtApp.$pinia)
-    initDesktopShell()
-
-    nuxtApp.hook('app:created', () => {
-      syncDesktopShellAppConfig()
-    })
-
-    return {
-      provide: {
-        desktopShellReady: true,
-      },
-    }
-  },
-})

package/runtime/plugins/02.desktop-register-desktop-apps.client.ts

@@ -1,13 +0,0 @@
-import { defineNuxtPlugin } from 'nuxt/app'
-import { flushPendingDesktopApps } from '../../kit/defineDesktopApp'
-
-export default defineNuxtPlugin({
-  name: 'desktop-register-desktop-apps',
-  dependsOn: ['pinia', 'desktop-shell-init'],
-  enforce: 'post',
-  setup(nuxtApp) {
-    nuxtApp.hook('app:created', async () => {
-      await flushPendingDesktopApps()
-    })
-  },
-})

package/runtime/plugins/resize.client.ts

@@ -1,6 +0,0 @@
-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)
-})

package/runtime/stores/storeApplicationMeta.ts

@@ -1,60 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { applicationMetaStoreId } from './storeIds'
-
-const metaStoreRegistry = new Map<string, ReturnType<typeof defineStore>>()
-/** Store ids created by the generic fallback (only `meta`), replaceable when an app registers real state. */
-const fallbackMetaStoreIds = new Set<string>()
-
-type MetaStoreSetup = (() => Record<string, unknown>) | Record<string, unknown>
-
-function resolveSetup(states: MetaStoreSetup) {
-  return typeof states === 'function' ? states : () => states
-}
-
-/**
- * Per-app Pinia meta store factory. The first registration for an app id wins so
- * app modules should call this from their store module (imported in the app plugin
- * before `defineDesktopApp`).
- */
-export const useApplicationMetaStore = (
-  appId: string,
-  states?: MetaStoreSetup,
-) => {
-  const id = applicationMetaStoreId(appId)
-
-  if (
-    states !== undefined &&
-    (!metaStoreRegistry.has(id) || fallbackMetaStoreIds.has(id))
-  ) {
-    fallbackMetaStoreIds.delete(id)
-    metaStoreRegistry.set(
-      id,
-      defineStore(id, resolveSetup(states), {
-        persistedState: {
-          persist: true,
-        },
-      }),
-    )
-  }
-
-  if (!metaStoreRegistry.has(id)) {
-    fallbackMetaStoreIds.add(id)
-    metaStoreRegistry.set(
-      id,
-      defineStore(
-        id,
-        () => ({
-          meta: ref<Record<string, unknown>>({}),
-        }),
-        {
-          persistedState: {
-            persist: true,
-          },
-        },
-      ),
-    )
-  }
-
-  return metaStoreRegistry.get(id)!
-}

package/runtime/stores/storeApplicationWindows.ts

@@ -1,21 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { applicationWindowsStoreId } from './storeIds'
-
-export const useApplicationWindowsStore = (appId: string) => {
-  return defineStore(
-    applicationWindowsStoreId(appId),
-    () => {
-      const windows: Ref<{ [windowId: string]: WindowStoredState }> = ref({})
-
-      return {
-        windows,
-      }
-    },
-    {
-      persistedState: {
-        persist: true,
-      },
-    },
-  )()
-}