Mixins / foldkit-mixins-ui

FloatingPanelSlots

const · packages/mixins-ui/src/floatingPanel.ts:44

const FloatingPanelSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly boundary: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly panel: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"keydown">, Event.EventToken<"pointerdown">, Event.EventToken<"focus">], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly header: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly dragTrigger: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"keydown">, Event.EventToken<"pointerdown">], readonly [Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly title: Sl …;

A floating panel, Zag's: a non-modal window over the page that its header drags, its edges and corners resize, and its controls minimize, maximize, restore and close. Where it is and how big is this Model, which the application keeps and folds with update(limits); the view draws it there, fixed to the viewport.

drag trigger, edge: Move -> Gesture* -> update -> rect, kept within the viewport
arrows on the drag trigger or the corner -> Nudged -> update -> rect
view: rect, stage -> left, top, width, height; order -> stacking

The viewport is measured by Bounds on a box of its size drawn beside the panel, so a drag cannot take the panel past it (overflow allows it). A drag is worked out from where it began, so a clamped move gives the panel back as the pointer returns. Minimized, the body hides and the panel cannot be resized; maximized, it fills the viewport and cannot be moved, and restore puts it back where it was.

Several panels stack by order, the application's list of their ids from the bottom: a press or focus inside one sends the Raised OutMessage, which the application folds with raise. The topmost is marked data-topmost, the others data-behind.

The panel is a non-modal dialog named by its title. Its drag trigger is a tab stop the arrows move the panel from, and its bottom-end corner one they resize it from (step a press, five times that with Shift); Escape closes it.