ywana-core8 0.2.5 → 0.2.8

package/src/desktop/window.js

@@ -25,14 +25,21 @@ export const Window = ({
     const headerRef = useRef(null)
     
     // Get window data from WindowManager
-    const { getWindow, updateWindowPosition, closeWindow, minimizeWindow, maximizeWindow, focusWindow } = useWindows()
+    const { getWindow, updateWindowPosition, updateWindowSize, closeWindow, minimizeWindow, maximizeWindow, focusWindow } = useWindows()
     const windowData = getWindow(id)
-    
+
     // Local state for dragging
     const [isDragging, setIsDragging] = useState(false)
     const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
     const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 })
 
+    // Local state for resizing
+    const [isResizing, setIsResizing] = useState(false)
+    const [resizeDirection, setResizeDirection] = useState('')
+    const [resizeStartSize, setResizeStartSize] = useState({ width: 0, height: 0 })
+    const [resizeStartPosition, setResizeStartPosition] = useState({ x: 0, y: 0 })
+    const [resizeStartMouse, setResizeStartMouse] = useState({ x: 0, y: 0 })
+
     // If window doesn't exist in WindowManager, don't render
     if (!windowData) {
         return null
@@ -123,14 +130,119 @@ export const Window = ({
         updateWindowPosition(id, finalPosition)
     }
 
-    // Setup drag event listeners
+    // Handle resize start
+    const handleResizeStart = (e, direction) => {
+        if (!resizable || maximized) return
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        setIsResizing(true)
+        setResizeDirection(direction)
+        setResizeStartSize(size)
+        setResizeStartPosition(position)
+        setResizeStartMouse({ x: e.clientX, y: e.clientY })
+
+        // Focus window
+        focusWindow(id)
+    }
+
+    // Handle resize move
+    const handleResizeMove = (e) => {
+        if (!isResizing) return
+
+        e.preventDefault()
+
+        const deltaX = e.clientX - resizeStartMouse.x
+        const deltaY = e.clientY - resizeStartMouse.y
+
+        let newSize = { ...resizeStartSize }
+        let newPosition = { ...resizeStartPosition }
+
+        // Calculate new size and position based on resize direction
+        switch (resizeDirection) {
+            case 'n': // North
+                newSize.height = Math.max(150, resizeStartSize.height - deltaY)
+                newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height)
+                break
+            case 's': // South
+                newSize.height = Math.max(150, resizeStartSize.height + deltaY)
+                break
+            case 'e': // East
+                newSize.width = Math.max(200, resizeStartSize.width + deltaX)
+                break
+            case 'w': // West
+                newSize.width = Math.max(200, resizeStartSize.width - deltaX)
+                newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width)
+                break
+            case 'ne': // Northeast
+                newSize.width = Math.max(200, resizeStartSize.width + deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height - deltaY)
+                newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height)
+                break
+            case 'nw': // Northwest
+                newSize.width = Math.max(200, resizeStartSize.width - deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height - deltaY)
+                newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width)
+                newPosition.y = resizeStartPosition.y + (resizeStartSize.height - newSize.height)
+                break
+            case 'se': // Southeast
+                newSize.width = Math.max(200, resizeStartSize.width + deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height + deltaY)
+                break
+            case 'sw': // Southwest
+                newSize.width = Math.max(200, resizeStartSize.width - deltaX)
+                newSize.height = Math.max(150, resizeStartSize.height + deltaY)
+                newPosition.x = resizeStartPosition.x + (resizeStartSize.width - newSize.width)
+                break
+        }
+
+        // Apply changes visually
+        if (windowRef.current) {
+            windowRef.current.style.width = `${newSize.width}px`
+            windowRef.current.style.height = `${newSize.height}px`
+            windowRef.current.style.left = `${newPosition.x}px`
+            windowRef.current.style.top = `${newPosition.y}px`
+        }
+    }
+
+    // Handle resize end
+    const handleResizeEnd = () => {
+        if (!isResizing) return
+
+        setIsResizing(false)
+        setResizeDirection('')
+
+        // Get final size and position
+        const desktopContainer = windowRef.current?.parentElement
+        if (!desktopContainer) return
+
+        const windowRect = windowRef.current.getBoundingClientRect()
+        const desktopRect = desktopContainer.getBoundingClientRect()
+
+        const finalSize = {
+            width: windowRect.width,
+            height: windowRect.height
+        }
+
+        const finalPosition = {
+            x: windowRect.left - desktopRect.left,
+            y: windowRect.top - desktopRect.top
+        }
+
+        // Update WindowManager
+        updateWindowSize(id, finalSize)
+        updateWindowPosition(id, finalPosition)
+    }
+
+    // Setup drag and resize event listeners
     useEffect(() => {
         if (isDragging) {
             document.addEventListener('mousemove', handleMouseMove)
             document.addEventListener('mouseup', handleMouseUp)
             document.body.style.userSelect = 'none'
             document.body.style.cursor = 'move'
-            
+
             return () => {
                 document.removeEventListener('mousemove', handleMouseMove)
                 document.removeEventListener('mouseup', handleMouseUp)
@@ -140,6 +252,20 @@ export const Window = ({
         }
     }, [isDragging])
 
+    useEffect(() => {
+        if (isResizing) {
+            document.addEventListener('mousemove', handleResizeMove)
+            document.addEventListener('mouseup', handleResizeEnd)
+            document.body.style.userSelect = 'none'
+
+            return () => {
+                document.removeEventListener('mousemove', handleResizeMove)
+                document.removeEventListener('mouseup', handleResizeEnd)
+                document.body.style.userSelect = ''
+            }
+        }
+    }, [isResizing])
+
     // Window control handlers
     const handleMinimize = (e) => {
         e.stopPropagation()
@@ -182,6 +308,7 @@ export const Window = ({
         'window',
         maximized && 'window--maximized',
         isDragging && 'window--dragging',
+        isResizing && 'window--resizing',
         className
     ].filter(Boolean).join(' ')
 
@@ -257,6 +384,47 @@ export const Window = ({
                     {statusBar}
                 </div>
             )}
+
+            {/* Resize Handles */}
+            {resizable && !maximized && (
+                <>
+                    {/* Edge handles */}
+                    <div
+                        className="window__resize-handle window__resize-handle--n"
+                        onMouseDown={(e) => handleResizeStart(e, 'n')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--s"
+                        onMouseDown={(e) => handleResizeStart(e, 's')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--e"
+                        onMouseDown={(e) => handleResizeStart(e, 'e')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--w"
+                        onMouseDown={(e) => handleResizeStart(e, 'w')}
+                    />
+
+                    {/* Corner handles */}
+                    <div
+                        className="window__resize-handle window__resize-handle--ne"
+                        onMouseDown={(e) => handleResizeStart(e, 'ne')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--nw"
+                        onMouseDown={(e) => handleResizeStart(e, 'nw')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--se"
+                        onMouseDown={(e) => handleResizeStart(e, 'se')}
+                    />
+                    <div
+                        className="window__resize-handle window__resize-handle--sw"
+                        onMouseDown={(e) => handleResizeStart(e, 'sw')}
+                    />
+                </>
+            )}
         </div>
     )
 }

package/src/html/button.css

@@ -20,6 +20,11 @@
   white-space: nowrap;
 }
 
+/* Ensure icons inside buttons don't block clicks */
+.btn .icon {
+  pointer-events: none;
+}
+
 .btn.outlined {
   color: var(--primary-color);
   border: solid 1px var(--primary-color);

package/src/html/button.js

@@ -111,7 +111,8 @@ export const Button = (props) => {
         icon: loading ? 'hourglass_empty' : icon,
         size: size === 'small' ? 'small' : size === 'large' ? 'normal' : 'small',
         disabled: disabled || loading,
-        className: loading ? 'loading-icon' : ''
+        className: loading ? 'loading-icon' : '',
+        eventPropagation: true, // Allow click events to bubble up to button
     }
 
     return (