Guide to Building a Blockable UI System

Introduction

A blockable UI system (also known as a dockable panel system) allows users to customize their workspace by rearranging UI components. This guide explains how to implement such a system for Symphony IDE, similar to what you’d find in Visual Studio, VS Code, or JetBrains IDEs.

Core Concepts

1. Key Components

• Dock Container: The root container that manages all panels
• Dock Panel: Individual UI components that can be moved around
• Dock Zone: Areas where panels can be docked (top, right, bottom, left, center)
• Dock Group: Multiple panels stacked together (usually as tabs)
• Splitter: Resizable divider between panels or groups

2. Panel States

• Docked: Panel is attached to a specific zone
• Floating: Panel is in its own window, detached from the main interface
• Tabbed: Panel is grouped with other panels in a tab container
• Auto-hidden: Panel is minimized to the edge of the window
• Maximized: Panel takes up the entire dock container

Architecture Overview

Online FlowChart & Diagrams Editor - Mermaid Live Editor

graph TD
    DockManager[Dock Manager] --> DockContainer
    DockContainer --> DockZone1[Dock Zone: Top]
    DockContainer --> DockZone2[Dock Zone: Left]
    DockContainer --> DockZone3[Dock Zone: Center]
    DockContainer --> DockZone4[Dock Zone: Right]
    DockContainer --> DockZone5[Dock Zone: Bottom]

    DockZone2 --> DockGroup1[Dock Group]
    DockZone3 --> DockGroup2[Dock Group]
    DockZone4 --> DockGroup3[Dock Group]

    DockGroup1 --> Panel1[Panel: Explorer]
    DockGroup2 --> Panel2[Panel: Editor]
    DockGroup3 --> Panel3[Panel: Properties]
    DockGroup3 --> Panel4[Panel: Output]

    DockManager -.-> DragController[Drag Controller]
    DockManager -.-> DropTarget[Drop Target Indicator]
    DockManager -.-> LayoutSerializer[Layout Serializer]

Implementation Strategy