ywana-core8 0.1.103 → 0.2.2

package/src/desktop/WindowManager.js

@@ -0,0 +1,355 @@
+/**
+ * WindowManager - Manages the state of all windows
+ */
+export class WindowManager {
+    constructor(desktopSize = { width: 1200, height: 800 }) {
+        this.windows = new Map()
+        this.activeWindowId = null
+        this.nextZIndex = 1000
+        this.listeners = new Set()
+        this.desktopSize = desktopSize
+    }
+
+    /**
+     * Add a listener for changes
+     */
+    addListener(listener) {
+        this.listeners.add(listener)
+    }
+
+    /**
+     * Remove a listener
+     */
+    removeListener(listener) {
+        this.listeners.delete(listener)
+    }
+
+    /**
+     * Notify all listeners about changes
+     */
+    notifyListeners() {
+        const state = this.getState()
+        this.listeners.forEach(listener => listener(state))
+    }
+
+    /**
+     * Update desktop size
+     */
+    setDesktopSize(size) {
+        const oldSize = this.desktopSize
+        this.desktopSize = size
+
+        // Reposition windows that are out of bounds
+        this.repositionWindowsInBounds()
+
+        this.notifyListeners()
+        return { oldSize, newSize: size }
+    }
+
+    /**
+     * Get current desktop size
+     */
+    getDesktopSize() {
+        return this.desktopSize
+    }
+
+    /**
+     * Get current state
+     */
+    getState() {
+        return {
+            windows: Array.from(this.windows.values()),
+            activeWindowId: this.activeWindowId,
+            desktopSize: this.desktopSize
+        }
+    }
+
+    /**
+     * Create a new window
+     */
+    createWindow(config) {
+        const size = config.size || { width: 600, height: 400 }
+        const window = {
+            id: config.id || `window-${Date.now()}`,
+            title: config.title || 'New Window',
+            icon: config.icon || 'window',
+            position: config.position || this.calculatePosition(size),
+            size: size,
+            minimized: false,
+            maximized: false,
+            zIndex: this.nextZIndex++,
+            ...config
+        }
+
+        this.windows.set(window.id, window)
+        this.activeWindowId = window.id
+        this.notifyListeners()
+
+        return window.id
+    }
+
+    /**
+     * Calculate automatic position for new windows
+     */
+    calculatePosition(windowSize = { width: 600, height: 400 }) {
+        const existingWindows = Array.from(this.windows.values())
+        const baseX = 50
+        const baseY = 50
+        const offsetStep = 40
+
+        // Calculate cascade position
+        let x = baseX + (existingWindows.length * offsetStep)
+        let y = baseY + (existingWindows.length * offsetStep)
+
+        // Check if it goes out of desktop bounds
+        const maxX = this.desktopSize.width - windowSize.width - 20
+        const maxY = this.desktopSize.height - windowSize.height - 100 // Space for taskbar
+
+        // If out of bounds, restart cascade
+        if (x > maxX || y > maxY) {
+            const cascadeIndex = existingWindows.length % 8
+            x = baseX + (cascadeIndex * 30)
+            y = baseY + (cascadeIndex * 30)
+        }
+
+        return { x: Math.max(0, x), y: Math.max(0, y) }
+    }
+
+    /**
+     * Get a window by ID
+     */
+    getWindow(windowId) {
+        return this.windows.get(windowId)
+    }
+
+    /**
+     * Close a window
+     */
+    closeWindow(windowId) {
+        if (!this.windows.has(windowId)) return false
+
+        this.windows.delete(windowId)
+
+        // If it was the active window, activate another one
+        if (this.activeWindowId === windowId) {
+            const remaining = Array.from(this.windows.values())
+            this.activeWindowId = remaining.length > 0 ? remaining[0].id : null
+        }
+
+        this.notifyListeners()
+        return true
+    }
+
+    /**
+     * Focus a window
+     */
+    focusWindow(windowId) {
+        const window = this.windows.get(windowId)
+        if (!window) return false
+
+        // If minimized, restore it
+        if (window.minimized) {
+            window.minimized = false
+        }
+
+        // Bring to front
+        window.zIndex = this.nextZIndex++
+        this.activeWindowId = windowId
+
+        this.notifyListeners()
+        return true
+    }
+
+    /**
+     * Minimize a window
+     */
+    minimizeWindow(windowId, minimize = true) {
+        const window = this.windows.get(windowId)
+        if (!window) return false
+
+        window.minimized = minimize
+
+        // If minimizing the active window, find another one
+        if (minimize && this.activeWindowId === windowId) {
+            const visible = Array.from(this.windows.values()).filter(w => !w.minimized)
+            this.activeWindowId = visible.length > 0 ? visible[0].id : null
+        }
+
+        this.notifyListeners()
+        return true
+    }
+
+    /**
+     * Maximize a window
+     */
+    maximizeWindow(windowId, maximize = true) {
+        const window = this.windows.get(windowId)
+        if (!window) return false
+
+        window.maximized = maximize
+
+        // If maximizing, also focus it
+        if (maximize) {
+            this.focusWindow(windowId)
+        } else {
+            this.notifyListeners()
+        }
+
+        return true
+    }
+
+    /**
+     * Update window position
+     */
+    updateWindowPosition(windowId, position) {
+        const window = this.windows.get(windowId)
+        if (!window) return false
+
+        window.position = { ...window.position, ...position }
+        this.notifyListeners()
+        return true
+    }
+
+    /**
+     * Get all windows
+     */
+    getAllWindows() {
+        return Array.from(this.windows.values())
+    }
+
+    /**
+     * Get visible windows (not minimized)
+     */
+    getVisibleWindows() {
+        return Array.from(this.windows.values()).filter(w => !w.minimized)
+    }
+
+    /**
+     * Clear all windows
+     */
+    clearAllWindows() {
+        this.windows.clear()
+        this.activeWindowId = null
+        this.notifyListeners()
+    }
+
+    /**
+     * Reposition windows that are out of desktop bounds
+     */
+    repositionWindowsInBounds() {
+        this.windows.forEach(window => {
+            if (window.maximized) return // Maximized windows don't need repositioning
+
+            const maxX = this.desktopSize.width - window.size.width
+            const maxY = this.desktopSize.height - window.size.height - 50 // Space for taskbar
+
+            // Adjust position if out of bounds
+            if (window.position.x > maxX) {
+                window.position.x = Math.max(0, maxX)
+            }
+            if (window.position.y > maxY) {
+                window.position.y = Math.max(0, maxY)
+            }
+        })
+    }
+
+    /**
+     * Arrange windows in cascade
+     */
+    cascadeWindows() {
+        const visibleWindows = this.getVisibleWindows().filter(w => !w.maximized)
+        const baseX = 50
+        const baseY = 50
+        const offsetStep = 30
+
+        visibleWindows.forEach((window, index) => {
+            window.position = {
+                x: baseX + (index * offsetStep),
+                y: baseY + (index * offsetStep)
+            }
+            window.maximized = false
+        })
+
+        this.notifyListeners()
+    }
+
+    /**
+     * Arrange windows in tile layout
+     */
+    tileWindows() {
+        const visibleWindows = this.getVisibleWindows().filter(w => !w.maximized)
+        if (visibleWindows.length === 0) return
+
+        const cols = Math.ceil(Math.sqrt(visibleWindows.length))
+        const rows = Math.ceil(visibleWindows.length / cols)
+        const windowWidth = Math.floor(this.desktopSize.width / cols)
+        const windowHeight = Math.floor((this.desktopSize.height - 80) / rows) // Space for taskbar
+
+        visibleWindows.forEach((window, index) => {
+            const col = index % cols
+            const row = Math.floor(index / cols)
+
+            window.position = {
+                x: col * windowWidth,
+                y: row * windowHeight
+            }
+            window.size = {
+                width: windowWidth - 10, // Small margin
+                height: windowHeight - 10
+            }
+            window.maximized = false
+        })
+
+        this.notifyListeners()
+    }
+
+    /**
+     * Center a window on the desktop
+     */
+    centerWindow(windowId) {
+        const window = this.windows.get(windowId)
+        if (!window || window.maximized) return false
+
+        window.position = {
+            x: (this.desktopSize.width - window.size.width) / 2,
+            y: (this.desktopSize.height - window.size.height - 50) / 2 // Space for taskbar
+        }
+
+        this.notifyListeners()
+        return true
+    }
+
+    /**
+     * Center all visible windows
+     */
+    centerAllWindows() {
+        const visibleWindows = this.getVisibleWindows().filter(w => !w.maximized)
+        const offsetStep = 20
+
+        visibleWindows.forEach((window, index) => {
+            const baseX = (this.desktopSize.width - window.size.width) / 2
+            const baseY = (this.desktopSize.height - window.size.height - 50) / 2
+
+            window.position = {
+                x: baseX + (index * offsetStep),
+                y: baseY + (index * offsetStep)
+            }
+        })
+
+        this.notifyListeners()
+    }
+
+    /**
+     * Get statistics
+     */
+    getStats() {
+        const windows = this.getAllWindows()
+        return {
+            total: windows.length,
+            visible: windows.filter(w => !w.minimized).length,
+            minimized: windows.filter(w => w.minimized).length,
+            maximized: windows.filter(w => w.maximized).length,
+            desktopSize: this.desktopSize
+        }
+    }
+}

package/src/desktop/desktop.css

@@ -1,6 +1,57 @@
+/* Desktop Component Styles */
+
 .desktop {
-     height: 100vh;
-     width: 100vw;
-     background-color: rgb(113, 102, 226);
-     position: relative;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    user-select: none;
+}
+
+.desktop__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    z-index: 0;
+}
+
+.desktop__content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+/* Desktop variants */
+.desktop--dark {
+    color: white;
+}
+
+.desktop--dark .desktop__background {
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+}
+
+.desktop--light {
+    color: #333;
+}
+
+.desktop--light .desktop__background {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .desktop {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .desktop {
+        font-size: 12px;
+    }
 }