Skip to content

feat: integrate surf-display UI framework into surf-api#309

Draft
Copilot wants to merge 4 commits intoversion/26.1from
copilot/add-display-ui-api-framework
Draft

feat: integrate surf-display UI framework into surf-api#309
Copilot wants to merge 4 commits intoversion/26.1from
copilot/add-display-ui-api-framework

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 12, 2026

Ports the surf-display map-based Display/UI framework into surf-api, following the existing API/impl module split.

API module (dev.slne.surf.api.paper.display)

  • Element tree: Element, Div, Label, ImageElement, ShapeElement — DOM-like hierarchy with Kotlin DSL builders
  • Style system: CSS-like Style class — flex layout, padding/margin/border, text alignment, overflow, cursor style
  • Shape primitives: Circle, Rectangle, Ellipse, Triangle, Line, RoundedRectangle, Polygon via Shape interface with BitSet rasterization
  • Behavior system: Clickable, Hoverable, Draggable, Scrollable, TooltipBehavior — composable interaction handlers
  • Renderer: Two-phase layout (border-box flexbox) + paint onto Canvas pixel buffer
  • Document DSL: document(width, height) { ... } entry point

Server module (dev.slne.surf.api.paper.server.display)

  • Display: Spawns invisible item frame wall, renders Canvas tiles to map packets, software cursor overlay
  • DisplaySession: Fake player camera + invisible horse mount for yaw/pitch → pixel cursor mapping
  • DisplayProtocolListener: PacketEvents listener wiring rotation/click/sneak packets to display interactions
  • DisplayLoader: Registered in PaperInstance for lifecycle management
  • Modal system: confirmDialog(), alertDialog(), successDialog(), errorDialog(), warningDialog()
  • Web support: WebDisplay/WebRenderer/JavaFxPlatform for HTML rendering via offscreen JavaFX WebView

Test plugin

  • /surfapitest display open|close — demo with shapes, hover buttons, modal dialog, text alignment

Example usage

val doc = document(384, 256) {
    style { backgroundColor = color(0x1E1E2E); padding = Insets.all(8); gap = 6 }
    div {
        label("Hello Display") { style { color = color(0xCDD6F4); fontSize = 16 } }
        div {
            style { cursor = CursorStyle.POINTER; border = Border(1, color(0xA6E3A1)) }
            label("Click me") { style { color = color(0xA6E3A1) } }
            hoverable(
                onEnter = { style.backgroundColor = color(0x45475A); display.update() },
                onExit  = { style.backgroundColor = null; display.update() }
            )
            onClick { ctx -> player.sendMessage("Clicked at ${ctx.pixelX},${ctx.pixelY}") }
        }
    }
}
DisplayManager.open(player, Display(doc))

Copilot AI and others added 4 commits April 12, 2026 09:46
Add the public-facing Display/UI API classes across 35 files organized into
7 packages under dev.slne.surf.api.paper.display:

- Color.kt: ARGB color utility functions
- style/: CSS-like styling (Insets, Border, TextAlign, VerticalAlign,
  Overflow, FlexDirection, JustifyContent, AlignItems, Style)
- cursor/: CursorStyle enum for hover cursor display
- behavior/: Interaction system (Behavior, Clickable, Hoverable, Draggable,
  Scrollable, TooltipBehavior, InteractionContext, ElementPhase)
- element/: UI element tree (Element, Div, Label, ImageElement, ShapeElement)
- render/: Canvas pixel buffer and Renderer layout/paint engine
- shape/: Geometric shapes (Rectangle, Circle, Ellipse, Line, Triangle,
  RoundedRectangle, Polygon) with BitSet rasterization
- document/: Document root and DSL entry point

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: TheBjoRedCraft <143264463+TheBjoRedCraft@users.noreply.github.com>
Create the server-side display implementation in surf-api-paper-server
with the following components:

- user/DisplayUser.kt - Player wrapper with packet sending and session tracking
- map/DisplayMap.kt - Map data container with packet creation
- frame/DisplayItemFrame.kt - Virtual item frame entity management
- cursor/Cursor.kt - Horse-based cursor rendering via equipment packets
- DisplaySession.kt - Session lifecycle (horse mount, fake camera, visual effects)
- Display.kt - Main display class with rendering, cursor, modals, interaction
- DisplayManager.kt - Active display registry for open/close/lookup
- protocol/DisplayProtocolListener.kt - PacketEvents listener for input handling
- modal/Modal.kt - Confirm/alert/success/error/warning dialog builders
- web/JavaFxPlatform.kt - JavaFX platform initialization and thread utilities
- web/WebRenderer.kt - Offscreen WebView rendering to Canvas
- web/WebDisplay.kt - WebView-backed display with async rendering

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: TheBjoRedCraft <143264463+TheBjoRedCraft@users.noreply.github.com>
…d, update API dump

Agent-Logs-Url: https://github.com/SLNE-Development/surf-api/sessions/b48cae1b-adb9-4a36-a5af-f09bf8bf8fec

Co-authored-by: TheBjoRedCraft <143264463+TheBjoRedCraft@users.noreply.github.com>
Agent-Logs-Url: https://github.com/SLNE-Development/surf-api/sessions/b48cae1b-adb9-4a36-a5af-f09bf8bf8fec

Co-authored-by: TheBjoRedCraft <143264463+TheBjoRedCraft@users.noreply.github.com>
@TheBjoRedCraft
Copy link
Copy Markdown
Member

Keine Ahnung ob man das irgendwann mal reinpacken möchte
, braucht denke ich noch viele Verbesserungen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants