Windowing System

🖼️ Windowing System Documentation

🌟 Introduction

The windowing system in DuckOS is responsible for managing and displaying windows within the graphical user interface (GUI). It provides functionalities such as window creation, resizing, minimizing, maximizing, dragging, and maintaining the z-index order of windows. The code provided below constitutes the implementation of the windowing system.

🔑 Core Concepts

1. zIndexCounter
   • zIndexCounter is a variable that keeps track of the z-index value assigned to each window. The z-index determines the stacking order of windows on the screen, with higher values appearing above lower ones.
2. isResizing and originalPosition
   • isResizing is a boolean variable that indicates whether a window is currently being resized.
   • originalPosition stores the original position of a window before resizing, allowing it to be restored to its original state.
3. openedWindows
   • openedWindows is an object that keeps track of opened windows using their titles as keys. It stores references to the corresponding window elements.

🛠️ Functions

1. createWindow(title, content, width, height)
   • Creates a new window with the specified title, content, width, and height.
   • If a window with the same title is already open, it either restores, brings to front, or activates the existing window based on its state.
2. bringToFront()
   • Updates the z-index of a window to bring it to the front.
3. handleMouseDown(e)
   • Handles the mouse down event on the window header.
   • Initiates the dragging process to move the window.
4. handleContentClick()
   • Handles a click on the window content area.
   • Brings the window to the front when the content area is clicked.
5. handleResizeMouseDown(e)
   • Handles the mouse down event on the resize handle.
   • Initiates the resizing process.
6. handleMouseMove(e)
   • Handles the mouse move event during dragging.
   • Updates the window position based on the mouse movement.
7. handleResizeMouseMove(e)
   • Handles the mouse move event during resizing.
   • Updates the window size based on the mouse movement.
8. handleMouseUp()
   • Handles the mouse up event.
   • Ends the dragging or resizing process.
9. handleResizeMouseUp()
   • Handles the mouse up event during resizing.
   • Ends the resizing process.

🏠 Window Structure

1. Window Element
   • Each window is represented by a div element with the class window.
   • It contains a header, body, and a resize handle.
2. Header
   • The header contains the title of the window and buttons for closing, minimizing, and maximizing.
3. Buttons
   • Close, minimize, and maximize buttons are created dynamically and have associated event listeners.
4. Body
   • The body of the window contains the main content, which can include HTML, iframes, or other content.
5. Resize Handle
   • A div element with the class resize-handle is included to enable resizing of the window.

🚀 Initial Window Creation

The createWindow function initializes a window with a specified title, content, width, and height. It calculates the initial position based on the remaining space in the viewport. Event listeners for mouse actions are attached to enable dragging and resizing.

💡 Example Usage

The provided code includes examples of creating windows for the Welcome screen, Proxies, Calculator, Games, and Terminal. Additional apps can be added using the createApp function and providing relevant data.

🎉 Conclusion

The windowing system in DuckOS provides a flexible and interactive environment for managing and interacting with applications. Developers can extend the functionality by adding new applications and customizing window behavior.