Mixins / foldkit-mixins-ui

FloatingPanel

namespace · packages/mixins-ui/src/floatingPanel.ts:1

export * as FloatingPanel from './floatingPanel.js'

In the guides

Members

FloatingPanel.BASE_LAYER

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

const BASE_LAYER: 40

The z-index of the lowest panel in a stack, above the page's own layers.

FloatingPanel.close

function · packages/mixins-ui/src/floatingPanel.ts:205

function close(model: Model): Return

Closes the panel, keeping where it was, and gives focus back to its opener.

FloatingPanel.Edge

type · packages/mixins-ui/src/floatingPanel.ts:98

type Edge = Exclude<Handle, 'move'>

FloatingPanel.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.

FloatingPanel.FloatingPanelView

interface · packages/mixins-ui/src/floatingPanel.ts:341

interface FloatingPanelView<ParentMessage> {
  readonly model: Model
  readonly onMessage: (message: Message) => NoInfer<ParentMessage>
  readonly title: string
  readonly content: Html
  readonly order?: ReadonlyArray<string> | undefined
  readonly resizable?: boolean | undefined
  readonly draggable?: boolean | undefined
  readonly closeOnEscape?: boolean | undefined
  readonly step?: number | undefined
  readonly direction?: 'ltr' | 'rtl' | undefined
  readonly labels?:
    | {
        readonly minimize?: string
        readonly maximize?: string
        readonly restore?: string
        readonly close?: string
        readonly move?: string
        readonly resize?: string
      }
    | undefined
  readonly style?: NamedStyle<typeof FloatingPanelSlots> | undefined
  readonly mixins?: MixinList<ParentMessage> | undefined
}

FloatingPanel.Focus

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

const Focus: Command.CommandDefinitionWithArgs<
  'FloatingPanel.Focus',
  { elementId: Schema.String },
  Effect.Effect<{ readonly _tag: 'CompletedFocus' }, never, never>
>

Focuses the element of this id once the render that drew it has committed.

FloatingPanel.Handle

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

const Handle: Schema.Literals<
  readonly ['move', 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
>

What a gesture moves: the whole panel, or one edge or corner of it.

FloatingPanel.init

function · packages/mixins-ui/src/floatingPanel.ts:157

function init(options: {
  readonly id: string
  readonly rect: Rect
  readonly open?: boolean | undefined
}): Model

FloatingPanel.Limits

interface · packages/mixins-ui/src/floatingPanel.ts:147

interface Limits {
  readonly min?:
    | {
        readonly width: number
        readonly height: number
      }
    | undefined
  readonly max?:
    | {
        readonly width: number
        readonly height: number
      }
    | undefined
  readonly grid?: number | undefined
  readonly overflow?: boolean | undefined
}

FloatingPanel.Message

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

const Message: MessageUnion<{
  readonly Measured: {
    readonly width: Schema.Number
    readonly height: Schema.Number
  }
  readonly GestureStarted: {
    readonly handle: Schema.Literals<
      readonly ['move', 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
    >
  }
  readonly GestureMoved: {
    readonly deltaX: Schema.Number
    readonly deltaY: Schema.Number
  }
  readonly GestureEnded: {}
  readonly Nudged: {
    readonly handle: Schema.Literals<
      readonly ['move', 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
    >
    readonly deltaX: Schema.Number
    readonly deltaY: Schema.Number
  }
  readonly StageChosen: {
    readonly stage: Schema.Literals<
      readonly ['default', 'minimized', 'maximized']
    >
  }
  readonly Closed: {}
  readonly Activated: {}
  readonly CompletedFocus: {}
}>

FloatingPanel.MIN_SIZE

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

const MIN_SIZE = { width, height }

The smallest size update lets a resize reach, unless the limits say otherwise.

FloatingPanel.Model

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

const Model: Schema.Struct<{
  readonly id: Schema.String
  readonly open: Schema.Boolean
  readonly stage: Schema.Literals<
    readonly ['default', 'minimized', 'maximized']
  >
  readonly rect: Schema.Struct<{
    readonly x: Schema.Number
    readonly y: Schema.Number
    readonly width: Schema.Number
    readonly height: Schema.Number
  }>
  readonly boundary: Schema.Struct<{
    readonly width: Schema.Number
    readonly height: Schema.Number
  }>
  readonly gesture: Schema.Option<
    Schema.Struct<{
      readonly handle: Schema.Literals<
        readonly ['move', 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
      >
      readonly from: Schema.Struct<{
        readonly x: Schema.Number
        readonly y: Schema.Number
        readonly width: Schema.Number
        readonly height: Schema.Number
      }>
    }>
  >
  readonly opener: Schema.Option<Schema.String>
}>

FloatingPanel.moveRect

function · packages/mixins-ui/src/floatingPanel.ts:230

function moveRect(
  from: Rect,
  handle: Handle,
  deltaX: number,
  deltaY: number,
  boundary: {
    readonly width: number
    readonly height: number
  },
  limits?: Limits,
): Rect

Where from goes when handle moves by deltaX, deltaY, within the limits and the viewport. Pure, so a drag and the keys agree.

FloatingPanel.open

function · packages/mixins-ui/src/floatingPanel.ts:193

function open(
  model: Model,
  options?: {
    readonly opener?: string
  },
): Return

Opens the panel where it last was and focuses it; opener, the id of what opened it, takes focus back on close.

FloatingPanel.raise

function · packages/mixins-ui/src/floatingPanel.ts:217

function raise(order: ReadonlyArray<string>, id: string): ReadonlyArray<string>

order with id on top: the same array when it already is.

FloatingPanel.Raised

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

const Raised: Schema.TaggedStruct<'Raised', { readonly id: Schema.String }>

Told to the application: bring this panel above the others (raise).

FloatingPanel.Rect

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

const Rect: Schema.Struct<{
  readonly x: Schema.Number
  readonly y: Schema.Number
  readonly width: Schema.Number
  readonly height: Schema.Number
}>

FloatingPanel.Return

type · packages/mixins-ui/src/floatingPanel.ts:187

type Return = ReturnWithOutMessage<Model, Message, Raised>

FloatingPanel.Stage

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

const Stage: Schema.Literals<readonly ['default', 'minimized', 'maximized']>

FloatingPanel.update

function · packages/mixins-ui/src/floatingPanel.ts:282

function update(limits?: Limits): (model: Model, message: Message) => Return

The panel's update within limits; the same Model when nothing changes.

FloatingPanel.view

function · packages/mixins-ui/src/floatingPanel.ts:379

function view<ParentMessage>(
  options: FloatingPanelView<ParentMessage>,
  h: HtmlBuilder<ParentMessage>,
): Html