@owdproject/core 3.4.0 → 4.0.0-alpha.3

package/runtime/composables/useWorkspaceEdgeDrop.ts

@@ -1,176 +0,0 @@
-import type { IWindowController } from '@owdproject/core'
-import { computed, ref } from 'vue'
-import { useDesktopWorkspaceStore } from '../stores/storeDesktopWorkspace'
-import { WORKSPACE_EDGE_DROP_PX } from '../constants/shellLayout'
-
-const edgeHint = ref<'left' | 'right' | null>(null)
-const isWindowDragActive = ref(false)
-let draggingWindowId: string | null = null
-
-function adjacentWorkspaceId(side: 'left' | 'right'): string | null {
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-  if (desktopWorkspaceStore.overview) return null
-  const list = desktopWorkspaceStore.list
-  if (list.length < 2) return null
-
-  const index = desktopWorkspaceStore.workspaceActiveIndex
-  if (index < 0) return null
-
-  if (side === 'left' && index > 0) {
-    return list[index - 1] ?? null
-  }
-  if (side === 'right' && index < list.length - 1) {
-    return list[index + 1] ?? null
-  }
-  return null
-}
-
-function updateEdgeHintFromClientX(clientX: number) {
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-  if (!isWindowDragActive.value || desktopWorkspaceStore.overview) {
-    edgeHint.value = null
-    return
-  }
-
-  const viewportWidth =
-    typeof globalThis !== 'undefined' ? globalThis.innerWidth : 0
-
-  if (clientX <= WORKSPACE_EDGE_DROP_PX && adjacentWorkspaceId('left')) {
-    edgeHint.value = 'left'
-    return
-  }
-
-  if (
-    clientX >= viewportWidth - WORKSPACE_EDGE_DROP_PX &&
-    adjacentWorkspaceId('right')
-  ) {
-    edgeHint.value = 'right'
-    return
-  }
-
-  edgeHint.value = null
-}
-
-function onDocumentPointerMove(e: PointerEvent) {
-  updateEdgeHintFromClientX(e.clientX)
-}
-
-function stopPointerTracking() {
-  document.removeEventListener('pointermove', onDocumentPointerMove)
-}
-
-/**
- * While dragging a window (normal desktop, not overview), highlight left/right
- * screen edges when an adjacent workspace exists so the user can drop there.
- */
-export function useWorkspaceEdgeDrop() {
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-
-  function beginWindowDrag(windowId: string) {
-    if (desktopWorkspaceStore.overview) return
-    if (desktopWorkspaceStore.list.length < 2) return
-
-    draggingWindowId = windowId
-    isWindowDragActive.value = true
-    edgeHint.value = null
-
-    document.addEventListener('pointermove', onDocumentPointerMove, {
-      passive: true,
-    })
-  }
-
-  function commitEdgeDrop(win: IWindowController) {
-    const side = edgeHint.value
-    if (!side || !draggingWindowId) return false
-
-    const targetWorkspaceId = adjacentWorkspaceId(side)
-    if (!targetWorkspaceId) return false
-
-    win.actions.setWorkspace(targetWorkspaceId)
-    desktopWorkspaceStore.setWorkspace(targetWorkspaceId)
-
-    const inset = WORKSPACE_EDGE_DROP_PX + 24
-    const pos = win.position
-    if (pos && typeof pos.y === 'number') {
-      const viewportWidth =
-        typeof globalThis !== 'undefined' ? globalThis.innerWidth : 1920
-      const rawWidth = win.size?.width ?? 400
-      const width =
-        typeof rawWidth === 'number'
-          ? rawWidth
-          : Number.parseFloat(String(rawWidth)) || 400
-      const x =
-        side === 'left'
-          ? inset
-          : Math.max(inset, viewportWidth - width - inset)
-      win.actions.setPosition({ x, y: pos.y })
-    }
-
-    return true
-  }
-
-  function endWindowDrag(win?: IWindowController): boolean {
-    stopPointerTracking()
-
-    let moved = false
-    if (win && edgeHint.value) {
-      moved = commitEdgeDrop(win)
-    }
-
-    isWindowDragActive.value = false
-    draggingWindowId = null
-    edgeHint.value = null
-
-    return moved
-  }
-
-  const edgeTargetDesktopIndex = computed(() => {
-    const side = edgeHint.value
-    if (!side) return null
-
-    const targetId = adjacentWorkspaceId(side)
-    if (!targetId) return null
-
-    const index = desktopWorkspaceStore.list.indexOf(targetId)
-    return index >= 0 ? index + 1 : null
-  })
-
-  return {
-    edgeHint,
-    edgeTargetDesktopIndex,
-    isWindowDragActive,
-    beginWindowDrag,
-    endWindowDrag,
-    adjacentWorkspaceId,
-  }
-}
-
-/**
- * Wire {@link useWorkspaceEdgeDrop} to DesktopWindow drag events (theme Window wrapper).
- */
-export function useWorkspaceEdgeDropWindowHandlers(
-  getWindow: () => IWindowController | undefined,
-) {
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-  const { beginWindowDrag, endWindowDrag } = useWorkspaceEdgeDrop()
-
-  function onDragStart() {
-    const win = getWindow()
-    if (!win?.state?.id || desktopWorkspaceStore.overview) return
-    beginWindowDrag(win.state.id)
-  }
-
-  function onDragEnd(data: { left: number; top: number }) {
-    const win = getWindow()
-    const moved =
-      Boolean(win) &&
-      !desktopWorkspaceStore.overview &&
-      endWindowDrag(win)
-
-    if (!moved && win) {
-      win.actions.setPosition({ x: data.left, y: data.top })
-    }
-  }
-
-  return { onDragStart, onDragEnd }
-}

package/runtime/composables/useWorkspaceManager.ts

@@ -1,67 +0,0 @@
-import { useEventListener } from '@vueuse/core'
-import { useApplicationManager } from './useApplicationManager'
-import { useDesktopWorkspaceStore } from '../stores/storeDesktopWorkspace'
-import { collectWindowsOnWorkspace } from '../utils/utilWorkspaceWindows'
-
-/**
- * Keyboard + HTML5 drop handlers for workspace management (move windows between desktops).
- */
-export function useWorkspaceManager() {
-  const applicationManager = useApplicationManager()
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-
-  useEventListener(window, 'keydown', (e: KeyboardEvent) => {
-    if (e.key !== 'Escape') return
-    if (!desktopWorkspaceStore.overview) return
-    desktopWorkspaceStore.setOverview(false)
-  })
-
-  function onWorkspaceDragOver(e: DragEvent) {
-    if (!desktopWorkspaceStore.overview) return
-    e.preventDefault()
-  }
-
-  function onWorkspaceDrop(e: DragEvent, workspaceId: string) {
-    e.preventDefault()
-    if (!desktopWorkspaceStore.overview) return
-
-    const raw =
-      e.dataTransfer?.getData('text/plain') ||
-      e.dataTransfer?.getData('text') ||
-      ''
-    if (!raw) return
-
-    const win = applicationManager.getWindowOpenedId(raw)
-    win?.actions.setWorkspace(workspaceId)
-  }
-
-  /**
-   * Remove a virtual desktop: migrate its windows to the last remaining workspace
-   * (excluding the removed id), then drop the workspace from the list.
-   */
-  function removeWorkspace(workspaceId: string): boolean {
-    if (desktopWorkspaceStore.list.length <= 2) return false
-
-    const fallbackId = desktopWorkspaceStore.resolveWorkspaceFallback(workspaceId)
-    if (!fallbackId) return false
-
-    const activeId = desktopWorkspaceStore.active
-    const windows = collectWindowsOnWorkspace(
-      applicationManager.apps.values(),
-      workspaceId,
-      activeId,
-    )
-
-    for (const win of windows) {
-      win.actions.setWorkspace(fallbackId)
-    }
-
-    return desktopWorkspaceStore.removeWorkspace(workspaceId)
-  }
-
-  return {
-    onWorkspaceDragOver,
-    onWorkspaceDrop,
-    removeWorkspace,
-  }
-}

package/runtime/composables/useWorkspaceOverviewCapture.ts

@@ -1,92 +0,0 @@
-import { useDebounceFn } from '@vueuse/core'
-import { nextTick, ref, shallowRef, watch } from 'vue'
-import { useDesktopWorkspaceStore } from '@owdproject/core/runtime/stores/storeDesktopWorkspace'
-import { captureElementToCanvas } from '../utils/utilCaptureElementToCanvas'
-
-export type WorkspaceRootResolver = (
-  workspaceId: string,
-) => HTMLElement | null | undefined
-
-export type UseWorkspaceOverviewCaptureOptions = {
-  /** Delay before capturing after overview opens (ms). Default 150. */
-  debounceMs?: number
-  /** JPEG quality for thumbnail data URLs (0–1). Default 0.7. */
-  jpegQuality?: number
-  /** Passed through to html2canvas. */
-  captureOptions?: Record<string, unknown>
-}
-
-/**
- * Captures workspace desktop roots as JPEG data URLs while workspace overview is open.
- * Themes supply a resolver that maps each workspace id to its DOM root (e.g. a layer wrapping
- * {@link DesktopApplicationRender} with `workspace-filter`).
- */
-export function useWorkspaceOverviewCapture(
-  resolveWorkspaceRoot: WorkspaceRootResolver,
-  options: UseWorkspaceOverviewCaptureOptions = {},
-) {
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-  const thumbnails = shallowRef(new Map<string, string>())
-  const isCapturing = ref(false)
-
-  const debounceMs = options.debounceMs ?? 150
-  const jpegQuality = options.jpegQuality ?? 0.7
-
-  async function captureWorkspace(workspaceId: string): Promise<string | null> {
-    const element = resolveWorkspaceRoot(workspaceId)
-    const canvas = await captureElementToCanvas(element, options.captureOptions)
-    if (!canvas) return null
-    return canvas.toDataURL('image/jpeg', jpegQuality)
-  }
-
-  async function refreshThumbnails() {
-    if (!desktopWorkspaceStore.overview) return
-
-    isCapturing.value = true
-    const next = new Map<string, string>()
-
-    try {
-      await nextTick()
-      const ids = [...desktopWorkspaceStore.list]
-      await Promise.all(
-        ids.map(async (id) => {
-          const dataUrl = await captureWorkspace(id)
-          if (dataUrl) next.set(id, dataUrl)
-        }),
-      )
-      thumbnails.value = next
-    } finally {
-      isCapturing.value = false
-    }
-  }
-
-  const scheduleRefresh = useDebounceFn(() => {
-    void refreshThumbnails()
-  }, debounceMs)
-
-  watch(
-    () => desktopWorkspaceStore.overview,
-    (open) => {
-      if (open) scheduleRefresh()
-      else thumbnails.value = new Map()
-    },
-  )
-
-  watch(
-    () => desktopWorkspaceStore.list.join('\0'),
-    () => {
-      if (desktopWorkspaceStore.overview) scheduleRefresh()
-    },
-  )
-
-  function thumbnailFor(workspaceId: string): string | undefined {
-    return thumbnails.value.get(workspaceId)
-  }
-
-  return {
-    thumbnails,
-    isCapturing,
-    refreshThumbnails,
-    thumbnailFor,
-  }
-}

package/runtime/composables/useWorkspaceOverviewLiveScale.ts

@@ -1,151 +0,0 @@
-import type { CSSProperties, Ref } from 'vue'
-import {
-  nextTick,
-  onScopeDispose,
-  readonly,
-  shallowRef,
-  watch,
-} from 'vue'
-import { useDesktopWorkspaceStore } from '@owdproject/core/runtime/stores/storeDesktopWorkspace'
-
-export type WorkspaceStageSize = {
-  width: number
-  height: number
-}
-
-export type WorkspaceOverviewLiveScaleOptions = {
-  /** Upper bound for scale (default 1). */
-  maxScale?: number
-}
-
-export type WorkspaceOverviewInnerStyleOptions =
-  WorkspaceOverviewLiveScaleOptions & {
-    transformOrigin?: string
-  }
-
-/**
- * Fit factor to show a 1:1 shell stage inside a panel viewport without clipping.
- */
-export function computeScaleToFit(
-  panelWidth: number,
-  panelHeight: number,
-  stageWidth: number,
-  stageHeight: number,
-  options?: WorkspaceOverviewLiveScaleOptions,
-): number {
-  if (
-    panelWidth <= 0 ||
-    panelHeight <= 0 ||
-    stageWidth <= 0 ||
-    stageHeight <= 0
-  ) {
-    return 1
-  }
-
-  const scale = Math.min(panelWidth / stageWidth, panelHeight / stageHeight)
-  const maxScale = options?.maxScale ?? 1
-  return Math.min(scale, maxScale)
-}
-
-/**
- * Live DOM workspace overview: measure shell stage, scale desktop roots to fit cards.
- */
-export function useWorkspaceOverviewLiveScale(
-  shellStageRef: Ref<HTMLElement | null | undefined>,
-) {
-  const desktopWorkspaceStore = useDesktopWorkspaceStore()
-  const stageSize = shallowRef<WorkspaceStageSize>({ width: 0, height: 0 })
-
-  let resizeObserver: ResizeObserver | null = null
-
-  function readStageSize() {
-    const el = shellStageRef.value
-    if (!el) {
-      stageSize.value = { width: 0, height: 0 }
-      return
-    }
-    stageSize.value = {
-      width: el.clientWidth,
-      height: el.clientHeight,
-    }
-  }
-
-  function stopObserving() {
-    resizeObserver?.disconnect()
-    resizeObserver = null
-  }
-
-  function startObserving() {
-    stopObserving()
-    const el = shellStageRef.value
-    if (!el || typeof ResizeObserver === 'undefined') return
-
-    readStageSize()
-    resizeObserver = new ResizeObserver(() => readStageSize())
-    resizeObserver.observe(el)
-  }
-
-  watch(
-    () => desktopWorkspaceStore.overview,
-    (open) => {
-      if (open) {
-        void nextTick(() => startObserving())
-      } else {
-        stopObserving()
-        stageSize.value = { width: 0, height: 0 }
-      }
-    },
-  )
-
-  watch(shellStageRef, (el) => {
-    if (desktopWorkspaceStore.overview && el) {
-      void nextTick(() => startObserving())
-    }
-  })
-
-  onScopeDispose(stopObserving)
-
-  function scaleToFit(
-    panelEl: HTMLElement | null | undefined,
-    options?: WorkspaceOverviewLiveScaleOptions,
-  ): number {
-    if (!panelEl) return 1
-    const { width: stageWidth, height: stageHeight } = stageSize.value
-    if (stageWidth <= 0 || stageHeight <= 0) return 1
-
-    return computeScaleToFit(
-      panelEl.clientWidth,
-      panelEl.clientHeight,
-      stageWidth,
-      stageHeight,
-      options,
-    )
-  }
-
-  function innerOverviewStyle(
-    panelEl: HTMLElement | null | undefined,
-    options?: WorkspaceOverviewInnerStyleOptions,
-  ): CSSProperties | undefined {
-    if (!desktopWorkspaceStore.overview) return undefined
-
-    const { width: stageWidth, height: stageHeight } = stageSize.value
-    if (stageWidth <= 0 || stageHeight <= 0) return undefined
-
-    const scale = scaleToFit(panelEl, options)
-    const transformOrigin = options?.transformOrigin ?? 'top left'
-
-    return {
-      width: `${stageWidth}px`,
-      height: `${stageHeight}px`,
-      transform: `scale(${scale})`,
-      transformOrigin,
-    }
-  }
-
-  return {
-    stageSize: readonly(stageSize),
-    scaleToFit,
-    innerOverviewStyle,
-    refreshStageSize: readStageSize,
-  }
-}

package/runtime/constants/desktopShellKeys.ts

@@ -1,12 +0,0 @@
-import type { InjectionKey } from 'vue'
-import type { DesktopDialogProvider } from '../dialogs/desktopDialogProvider'
-
-export type DesktopToggleWindowMaximizeFn = (
-  win: IWindowController | undefined,
-) => boolean
-
-export const DESKTOP_DIALOG_PROVIDER_KEY: InjectionKey<DesktopDialogProvider> =
-  Symbol('desktop-dialog-provider')
-
-export const DESKTOP_TOGGLE_WINDOW_MAXIMIZE_KEY: InjectionKey<DesktopToggleWindowMaximizeFn> =
-  Symbol('desktop-toggle-window-maximize')

package/runtime/constants/shellLayout.ts

@@ -1,5 +0,0 @@
-/** Viewport band (px) where a window drag targets the adjacent workspace. */
-export const WORKSPACE_EDGE_DROP_PX = 72
-
-/** Viewport band (px) where a window drag targets a snap zone. */
-export const WINDOW_SNAP_EDGE_PX = 14

package/runtime/dialogs/desktopDialogProvider.ts

@@ -1,73 +0,0 @@
-/** Options for a yes/no confirmation (theme renders labels and chrome). */
-export interface DesktopConfirmDialogOptions {
-  title?: string
-  message: string
-  danger?: boolean
-  acceptLabel?: string
-  rejectLabel?: string
-  /**
-   * Theme-specific payload (e.g. delete dialog passes `toTrash` for slot templates).
-   */
-  extras?: Record<string, unknown>
-}
-
-/**
- * Cross-theme dialog API. Themes implement with PrimeVue, native dialogs, etc.
- * Callers pass user-facing strings (usually from i18n); implementations only render.
- */
-export interface DesktopDialogProvider {
-  confirm(options: DesktopConfirmDialogOptions): Promise<boolean>
-  alert(message: string, options?: { title?: string }): Promise<void>
-  prompt(message: string, defaultValue?: string): Promise<string | null>
-}
-
-function browserGlobals(): {
-  confirm: (message?: string) => boolean
-  alert: (message?: string) => void
-  prompt: (message?: string, defaultText?: string) => string | null
-} | null {
-  const g = globalThis as typeof globalThis & {
-    confirm?: (message?: string) => boolean
-    alert?: (message?: string) => void
-    prompt?: (message?: string, defaultText?: string) => string | null
-  }
-  if (typeof g.confirm !== 'function') return null
-  return {
-    confirm: g.confirm.bind(g),
-    alert:
-      typeof g.alert === 'function'
-        ? g.alert.bind(g)
-        : (m?: string) => {
-            void m
-          },
-    prompt:
-      typeof g.prompt === 'function'
-        ? g.prompt.bind(g)
-        : () => null,
-  }
-}
-
-export function createBrowserFallbackDialogProvider(): DesktopDialogProvider {
-  return {
-    async confirm(opts) {
-      if (import.meta.server) return false
-      const w = browserGlobals()
-      if (!w) return false
-      const text = [opts.title, opts.message].filter(Boolean).join('\n\n')
-      return w.confirm(text)
-    },
-    async alert(message, opts) {
-      if (import.meta.server) return
-      const w = browserGlobals()
-      if (!w) return
-      w.alert([opts?.title, message].filter(Boolean).join('\n\n'))
-    },
-    async prompt(message, defaultValue = '') {
-      if (import.meta.server) return null
-      const w = browserGlobals()
-      if (!w) return null
-      const v = w.prompt(message, defaultValue)
-      return v === null ? null : v
-    },
-  }
-}