x-workspace

Workspace Web Component.

npm i x-workspace

pnpm add x-workspace

yarn add x-workspace

Examples

# web

# view source

example/web.tsx

/** @jsxImportSource sigl */
import $ from 'sigl'

import { Rect } from 'sigl'
import { ContextMenuOption, WorkspaceElement, WorkspaceWindowElement } from 'x-workspace'

interface WindowItemElement extends $.Element<WindowItemElement> {}

@$.element()
class WindowItemElement extends $(WorkspaceWindowElement) {
  mounted($: WindowItemElement['$']) {
    $.Controls = $.part(() => <div></div>)
    $.ContextMenu = $.part(() => (
      <>
        <ContextMenuOption keyboard={['Ctrl', 'N']}>New</ContextMenuOption>
        <ContextMenuOption keyboard={['Alt', 'R']}>Remove the thing</ContextMenuOption>
        <ContextMenuOption>and another</ContextMenuOption>
        <hr />
        <ContextMenuOption disabled>and another</ContextMenuOption>
        <ContextMenuOption>and another</ContextMenuOption>
      </>
    ))
    $.Item = $.part(() => <div>hello this is a window</div>)
  }
}

interface SceneElement extends $.Element<SceneElement> {}

@$.element()
class SceneElement extends HTMLElement {
  Workspace = $.element(WorkspaceElement)
  WindowItem = $.element(WindowItemElement)

  items = new $.RefSet<WindowItemElement>([
    { rect: new Rect(0, 0, 200, 200), label: 'one' },
    { rect: new Rect(300, 0, 200, 200), label: 'two' },
  ])

  mounted($: SceneElement['$']) {
    $.render(({ Workspace, WindowItem, items }) => (
      <>
        <style>
          {/*css*/ `
          ${Workspace} {
            position: absolute;
            display: flex;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
          }

          ${WindowItem} {
            border: 5px solid pink;
          }
        `}
        </style>
        <Workspace>
          {items.map(item => <WindowItem {x-workspace.item} />)}
        </Workspace>
      </>
    ))
  }
}

const Scene = $.element(SceneElement)

$.render(<Scene />, document.body)

API

# ImmMap

# constructor(entries)

# new ImmMap()

ImmMap<K, V>

# entries

null | ImmMap<K, V> | readonly readonly [ K, V ] [] | Map<K, V>

# clear()

clear()  =>

ImmMap<K, V>

# delete(key)

# key

K

delete(key)  =>

ImmMap<K, V>

# mutateDelete(key)

# key

K

mutateDelete(key)  =>

boolean

# mutateSet(key, value)

# key

K

# value

V

mutateSet(key, value)  =>

ImmMap<K, V>

# set(key, value)

# key

K

# value

V

set(key, value)  =>

ImmMap<K, V>

# toJSON()

toJSON()  =>

[ K, V ] []

# ImmSet

# constructor(values)

# new ImmSet()

ImmSet<T>

# values

null | ImmSet<T> | readonly T [] | Set<T>

# add(value)

# value

T

add(value)  =>

ImmSet<T>

# clear()

clear()  =>

ImmSet<T>

# delete(value)

# value

T

delete(value)  =>

ImmSet<T>

# mutateAdd(value)

# value

T

mutateAdd(value)  =>

ImmSet<T>

# mutateDelete(value)

# value

T

mutateDelete(value)  =>

boolean

# toJSON()

toJSON()  =>

T []

# PopupElement

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new PopupElement()

PopupElement

# $

Context<PopupElement & JsxContext<PopupElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# center

boolean

# contents

HTMLDivElement

# contentsRect

Rect

# context

ContextClass<PopupElement & JsxContext<PopupElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dest

SurfaceItemElement

# destRect

Rect

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

PopupElement

# hostMatrixString

string

# onmounted

EventHandler<PopupElement, CustomEvent<any>>

# onunmounted

EventHandler<PopupElement, CustomEvent<any>>

# placed

boolean

# placement

Placement

# popup

Popup

# pos

Point

# rect

Rect

# rigid

boolean

# scene

PopupScene

# setHostStyleTransform

# (matrixString)

# matrixString

string

(matrixString)  =>

void

# surface

SurfaceElement

# transition

ValuesOf<{

# CenteringItem

"surfacecenteringitem"

# CenteringView

"surfacecenteringview"

# Connecting

"surfaceconnecting"

# FullSize

"surfacefullsize"

# Idle

"surfaceidle"

# MinimapPanning

"surfaceminimappanning"

# Overlay

"surfaceoverlay"

# Panning

"surfacepanning"

# Pinching

"surfacepinching"

# Selecting

"surfaceselecting"

# Wheeling

"surfacewheeling"

}>

# viewMatrix

Matrix

# viewportRect

Rect

# created(ctx)

# ctx

Context<PopupElement & JsxContext<PopupElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<PopupElement & JsxContext<PopupElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<PopupElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<PopupElement, keyof PopupElement>

# PopupScene

# constructor(surface)

# new PopupScene()

PopupScene

# surface

SurfaceElement

# $

PopupScene & ContextClass<PopupScene> & {

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}

# context

ContextClass<PopupScene>

# popups

Set<Popup>

# runCollisions

# ()

()  =>

void

# surface

SurfaceElement

# viewMatrix

Matrix

# viewportRect

Rect

# create(this)

# this

PopupScene

create(this)  =>

void

# destroy()

destroy()  =>

void

# SurfaceElement

# constructor(args)

# new SurfaceElement()

SurfaceElement

# args

any []

# $

Context<SurfaceElement & JsxContext<SurfaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# Grid

Component<SurfaceGridElement, HTMLElement>

# Minimap

Component<SurfaceMinimapElement, HTMLElement>

# __#2@#offsetHeight

number

# __#2@#offsetLeft

number

# __#2@#offsetTop

number

# __#2@#offsetWidth

number

# centerItem

# (item)

# item

ChildOf<SurfaceItemElement>

(item)  =>

void

# centerOtherItem

# (diff)

# diff

number

(diff)  =>

void

# centerRect

# (rect)

# rect

Rect

(rect)  =>

void

# centerView

# (state, paddingPct)

# state

ValuesOf<{

# CenteringItem

"surfacecenteringitem"

# CenteringView

"surfacecenteringview"

# Connecting

"surfaceconnecting"

# FullSize

"surfacefullsize"

# Idle

"surfaceidle"

# MinimapPanning

"surfaceminimappanning"

# Overlay

"surfaceoverlay"

# Panning

"surfacepanning"

# Pinching

"surfacepinching"

# Selecting

"surfaceselecting"

# Wheeling

"surfacewheeling"

}>

# paddingPct

number

(state, paddingPct)  =>

void

# centeredItem

HTMLElement

# context

ContextClass<SurfaceElement & JsxContext<SurfaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# cursorState

State<SurfaceElement, {

# Copy

"copy"

# EWResize

"ew-resize"

# Grabbing

"grabbing"

# Idle

"default"

# NSResize

"ns-resize"

# NWSEResize

"nwse-resize"

}, "copy" | "default" | "grabbing" | "ew-resize" | "ns-resize" | "nwse-resize"> & EventMethods<SurfaceElement, {
# copycancel

CustomEvent<any>

# copyend

CustomEvent<any>

# copypause

CustomEvent<any>

# copyresume

CustomEvent<any>

# copystart

CustomEvent<any>

# defaultcancel

CustomEvent<any>

# defaultend

CustomEvent<any>

# defaultpause

CustomEvent<any>

# defaultresume

CustomEvent<any>

# defaultstart

CustomEvent<any>

# ew-resizecancel

CustomEvent<any>

# ew-resizeend

CustomEvent<any>

# ew-resizepause

CustomEvent<any>

# ew-resizeresume

CustomEvent<any>

# ew-resizestart

CustomEvent<any>

# grabbingcancel

CustomEvent<any>

# grabbingend

CustomEvent<any>

# grabbingpause

CustomEvent<any>

# grabbingresume

CustomEvent<any>

# grabbingstart

CustomEvent<any>

# ns-resizecancel

CustomEvent<any>

# ns-resizeend

CustomEvent<any>

# ns-resizepause

CustomEvent<any>

# ns-resizeresume

CustomEvent<any>

# ns-resizestart

CustomEvent<any>

# nwse-resizecancel

CustomEvent<any>

# nwse-resizeend

CustomEvent<any>

# nwse-resizepause

CustomEvent<any>

# nwse-resizeresume

CustomEvent<any>

# nwse-resizestart

CustomEvent<any>

}> & InlineEventMap<SurfaceElement, {
# copycancel

CustomEvent<any>

# copyend

CustomEvent<any>

# copypause

CustomEvent<any>

# copyresume

CustomEvent<any>

# copystart

CustomEvent<any>

# defaultcancel

CustomEvent<any>

# defaultend

CustomEvent<any>

# defaultpause

CustomEvent<any>

# defaultresume

CustomEvent<any>

# defaultstart

CustomEvent<any>

# ew-resizecancel

CustomEvent<any>

# ew-resizeend

CustomEvent<any>

# ew-resizepause

CustomEvent<any>

# ew-resizeresume

CustomEvent<any>

# ew-resizestart

CustomEvent<any>

# grabbingcancel

CustomEvent<any>

# grabbingend

CustomEvent<any>

# grabbingpause

CustomEvent<any>

# grabbingresume

CustomEvent<any>

# grabbingstart

CustomEvent<any>

# ns-resizecancel

CustomEvent<any>

# ns-resizeend

CustomEvent<any>

# ns-resizepause

CustomEvent<any>

# ns-resizeresume

CustomEvent<any>

# ns-resizestart

CustomEvent<any>

# nwse-resizecancel

CustomEvent<any>

# nwse-resizeend

CustomEvent<any>

# nwse-resizepause

CustomEvent<any>

# nwse-resizeresume

CustomEvent<any>

# nwse-resizestart

CustomEvent<any>

}>

# didCenterLast

"view" | "item"

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# exitFullSize

null |

# ()

()  =>

void

# fullSize

HTMLElement

# getCenterMatrix

# (rect, paddingPct)

# rect

Rect

# paddingPct

number

(rect, paddingPct)  =>

DOMMatrix

# getPointerPos

# (event)

# event

PointerEvent | WheelEvent

(event)  =>

Point

# gridCellSize

number

# host

SurfaceElement

# hoveringItem

null | ChildOf<SurfaceItemElement>

# items

ChildOf<SurfaceItemElement> []

# makeFullSize

# (item)

# item

ChildOf<SurfaceItemElement> & {

# fullSize

boolean

}

(item)  =>

void

# maxZoom

number

# minZoom

number

# minimap

SurfaceMinimapElement

# minimapRatio

number

# minimapScale

number

# onconnectend

EventHandler<SurfaceElement, CustomEvent<any>>

# onconnectstart

EventHandler<SurfaceElement, CustomEvent<any>>

# onmounted

EventHandler<SurfaceElement, CustomEvent<any>>

# onstatechange

EventHandler<SurfaceElement, CustomEvent<any>>

# onsurfacemoveitemmove

EventHandler<SurfaceElement, CustomEvent<SurfaceMoveDetail>>

# onsurfacemoveitemmoveend

EventHandler<SurfaceElement, CustomEvent<SurfaceMoveDetail>>

# onsurfacemoveitemmovestart

EventHandler<SurfaceElement, CustomEvent<SurfaceMoveDetail>>

# onsurfaceresizeitemresize

EventHandler<SurfaceElement, CustomEvent<SurfaceResizeDetail>>

# onsurfaceresizeitemresizeend

EventHandler<SurfaceElement, CustomEvent<SurfaceResizeDetail>>

# onsurfaceresizeitemresizestart

EventHandler<SurfaceElement, CustomEvent<SurfaceResizeDetail>>

# onsurfaceselecting

EventHandler<SurfaceElement, CustomEvent<{

# event

PointerEvent

# items

ChildOf<SurfaceItemElement> []

# rect

Rect

}>>

# onunmounted

EventHandler<SurfaceElement, CustomEvent<any>>

# ownRect

Rect

# pinchStartDistance

number

# pinchStartMatrix

null | DOMMatrix

# pixelRatio

number

# pointer

{

# id

number

# pos

Point

}

# pointers

Map<number, Point>

# pos

Point

# rect

Rect

# root

ShadowRoot

# selectingRect

null | Rect

# selectingStartPos

null | Point

# selection

HTMLDivElement

# setViewStyleTransform

# (matrixString)

# matrixString

string

(matrixString)  =>

void

# size

Point

# snapThreshold

number

# state

State<SurfaceElement, {

# CenteringItem

"surfacecenteringitem"

# CenteringView

"surfacecenteringview"

# Connecting

"surfaceconnecting"

# FullSize

"surfacefullsize"

# Idle

"surfaceidle"

# MinimapPanning

"surfaceminimappanning"

# Overlay

"surfaceoverlay"

# Panning

"surfacepanning"

# Pinching

"surfacepinching"

# Selecting

"surfaceselecting"

# Wheeling

"surfacewheeling"

}, "surfaceselecting" | "surfaceidle" | "surfaceoverlay" | "surfacecenteringitem" | "surfacecenteringview" | "surfaceconnecting" | "surfacefullsize" | "surfaceminimappanning" | "surfacepanning" | "surfacepinching" | "surfacewheeling"> & EventMethods<SurfaceElement, {
# surfacecenteringitemcancel

CustomEvent<any>

# surfacecenteringitemend

CustomEvent<any>

# surfacecenteringitempause

CustomEvent<any>

# surfacecenteringitemresume

CustomEvent<any>

# surfacecenteringitemstart

CustomEvent<any>

# surfacecenteringviewcancel

CustomEvent<any>

# surfacecenteringviewend

CustomEvent<any>

# surfacecenteringviewpause

CustomEvent<any>

# surfacecenteringviewresume

CustomEvent<any>

# surfacecenteringviewstart

CustomEvent<any>

# surfaceconnectingcancel

CustomEvent<any>

# surfaceconnectingend

CustomEvent<any>

# surfaceconnectingpause

CustomEvent<any>

# surfaceconnectingresume

CustomEvent<any>

# surfaceconnectingstart

CustomEvent<any>

# surfacefullsizecancel

CustomEvent<any>

# surfacefullsizeend

CustomEvent<any>

# surfacefullsizepause

CustomEvent<any>

# surfacefullsizeresume

CustomEvent<any>

# surfacefullsizestart

CustomEvent<any>

# surfaceidlecancel

CustomEvent<any>

# surfaceidleend

CustomEvent<any>

# surfaceidlepause

CustomEvent<any>

# surfaceidleresume

CustomEvent<any>

# surfaceidlestart

CustomEvent<any>

# surfaceminimappanningcancel

CustomEvent<any>

# surfaceminimappanningend

CustomEvent<any>

# surfaceminimappanningpause

CustomEvent<any>

# surfaceminimappanningresume

CustomEvent<any>

# surfaceminimappanningstart

CustomEvent<any>

# surfaceoverlaycancel

CustomEvent<any>

# surfaceoverlayend

CustomEvent<any>

# surfaceoverlaypause

CustomEvent<any>

# surfaceoverlayresume

CustomEvent<any>

# surfaceoverlaystart

CustomEvent<any>

# surfacepanningcancel

CustomEvent<any>

# surfacepanningend

CustomEvent<any>

# surfacepanningpause

CustomEvent<any>

# surfacepanningresume

CustomEvent<any>

# surfacepanningstart

CustomEvent<any>

# surfacepinchingcancel

CustomEvent<any>

# surfacepinchingend

CustomEvent<any>

# surfacepinchingpause

CustomEvent<any>

# surfacepinchingresume

CustomEvent<any>

# surfacepinchingstart

CustomEvent<any>

# surfaceselectingcancel

CustomEvent<any>

# surfaceselectingend

CustomEvent<any>

# surfaceselectingpause

CustomEvent<any>

# surfaceselectingresume

CustomEvent<any>

# surfaceselectingstart

CustomEvent<any>

# surfacewheelingcancel

CustomEvent<any>

# surfacewheelingend

CustomEvent<any>

# surfacewheelingpause

CustomEvent<any>

# surfacewheelingresume

CustomEvent<any>

# surfacewheelingstart

CustomEvent<any>

}> & InlineEventMap<SurfaceElement, {
# surfacecenteringitemcancel

CustomEvent<any>

# surfacecenteringitemend

CustomEvent<any>

# surfacecenteringitempause

CustomEvent<any>

# surfacecenteringitemresume

CustomEvent<any>

# surfacecenteringitemstart

CustomEvent<any>

# surfacecenteringviewcancel

CustomEvent<any>

# surfacecenteringviewend

CustomEvent<any>

# surfacecenteringviewpause

CustomEvent<any>

# surfacecenteringviewresume

CustomEvent<any>

# surfacecenteringviewstart

CustomEvent<any>

# surfaceconnectingcancel

CustomEvent<any>

# surfaceconnectingend

CustomEvent<any>

# surfaceconnectingpause

CustomEvent<any>

# surfaceconnectingresume

CustomEvent<any>

# surfaceconnectingstart

CustomEvent<any>

# surfacefullsizecancel

CustomEvent<any>

# surfacefullsizeend

CustomEvent<any>

# surfacefullsizepause

CustomEvent<any>

# surfacefullsizeresume

CustomEvent<any>

# surfacefullsizestart

CustomEvent<any>

# surfaceidlecancel

CustomEvent<any>

# surfaceidleend

CustomEvent<any>

# surfaceidlepause

CustomEvent<any>

# surfaceidleresume

CustomEvent<any>

# surfaceidlestart

CustomEvent<any>

# surfaceminimappanningcancel

CustomEvent<any>

# surfaceminimappanningend

CustomEvent<any>

# surfaceminimappanningpause

CustomEvent<any>

# surfaceminimappanningresume

CustomEvent<any>

# surfaceminimappanningstart

CustomEvent<any>

# surfaceoverlaycancel

CustomEvent<any>

# surfaceoverlayend

CustomEvent<any>

# surfaceoverlaypause

CustomEvent<any>

# surfaceoverlayresume

CustomEvent<any>

# surfaceoverlaystart

CustomEvent<any>

# surfacepanningcancel

CustomEvent<any>

# surfacepanningend

CustomEvent<any>

# surfacepanningpause

CustomEvent<any>

# surfacepanningresume

CustomEvent<any>

# surfacepanningstart

CustomEvent<any>

# surfacepinchingcancel

CustomEvent<any>

# surfacepinchingend

CustomEvent<any>

# surfacepinchingpause

CustomEvent<any>

# surfacepinchingresume

CustomEvent<any>

# surfacepinchingstart

CustomEvent<any>

# surfaceselectingcancel

CustomEvent<any>

# surfaceselectingend

CustomEvent<any>

# surfaceselectingpause

CustomEvent<any>

# surfaceselectingresume

CustomEvent<any>

# surfaceselectingstart

CustomEvent<any>

# surfacewheelingcancel

CustomEvent<any>

# surfacewheelingend

CustomEvent<any>

# surfacewheelingpause

CustomEvent<any>

# surfacewheelingresume

CustomEvent<any>

# surfacewheelingstart

CustomEvent<any>

}>

# transition

Transition<States, "surfaceselecting" | "surfaceidle" | "surfaceoverlay" | "surfacecenteringitem" | "surfacecenteringview" | "surfaceconnecting" | "surfacefullsize" | "surfaceminimappanning" | "surfacepanning" | "surfacepinching" | "surfacewheeling">

# view

HTMLSlotElement

# viewFrame

HTMLDivElement

# viewFrameNormalRect

Rect

# viewFrameRect

Rect

# viewMatrix

DOMMatrix

# viewMatrixString

string

# viewRect

Rect

# viewStyleTransform

string

# xPattern

string

# yPattern

string

# zIndex

number

# matrix
# __#2@#updateOffsets()

__#2@#updateOffsets()  =>

void

# created(ctx)

# ctx

Context<SurfaceElement & JsxContext<SurfaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<SurfaceElement & JsxContext<SurfaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SurfaceElement, LifecycleEvents & {
# connectend

CustomEvent<any>

# connectstart

CustomEvent<any>

# statechange

CustomEvent<any>

# surfaceselecting

CustomEvent<{

# event

PointerEvent

# items

ChildOf<SurfaceItemElement> []

# rect

Rect

}>

} & SurfaceMoveEvents & SurfaceResizeEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SurfaceElement, keyof SurfaceElement>

# SurfaceGridElement

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new SurfaceGridElement()

SurfaceGridElement

# $

Context<SurfaceGridElement & JsxContext<SurfaceGridElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# anim

StepAnimation<{

# offset

Point

# zoom

number

}>

# animValues

{

# offset

Point

# zoom

number

}

# canvas

HTMLCanvasElement

# cellSize

number

# context

ContextClass<SurfaceGridElement & JsxContext<SurfaceGridElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# ctx

CanvasRenderingContext2D

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

SurfaceGridElement

# matrix

DOMMatrix

# offsetX

number

# offsetY

number

# onmounted

EventHandler<SurfaceGridElement, CustomEvent<any>>

# onunmounted

EventHandler<SurfaceGridElement, CustomEvent<any>>

# pixelRatio

number

# pointers

Map<number, Point>

# rect

Rect

# root

ShadowRoot

# slotted

HTMLElement []

# transition

Transition<States, unknown>

# xPattern

string

# yPattern

string

# zoom

number

# created(ctx)

# ctx

Context<SurfaceGridElement & JsxContext<SurfaceGridElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<SurfaceGridElement & JsxContext<SurfaceGridElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SurfaceGridElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SurfaceGridElement, keyof SurfaceGridElement>

# SurfaceItemElement

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new SurfaceItemElement()

SurfaceItemElement

# $

Context<SurfaceItemElement & JsxContext<SurfaceItemElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# context

ContextClass<SurfaceItemElement & JsxContext<SurfaceItemElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

SurfaceItemElement

# onmounted

EventHandler<SurfaceItemElement, CustomEvent<any>>

# onunmounted

EventHandler<SurfaceItemElement, CustomEvent<any>>

# points

Point []

# pos

Point

# rect

Rect

# size

Point

# surface

SurfaceElement

# created(ctx)

# ctx

Context<SurfaceItemElement & JsxContext<SurfaceItemElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<SurfaceItemElement & JsxContext<SurfaceItemElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SurfaceItemElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SurfaceItemElement, keyof SurfaceItemElement>

# SurfaceMinimapElement

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new SurfaceMinimapElement()

SurfaceMinimapElement

# $

Context<SurfaceMinimapElement & JsxContext<SurfaceMinimapElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# allVisible

boolean

# canvas

HTMLCanvasElement

# context

ContextClass<SurfaceMinimapElement & JsxContext<SurfaceMinimapElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# ctx

CanvasRenderingContext2D

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

SurfaceMinimapElement

# isOverMinimap

boolean

# items

ChildOf<SurfaceItemElement> []

# matrix

DOMMatrix

# onmounted

EventHandler<SurfaceMinimapElement, CustomEvent<any>>

# onunmounted

EventHandler<SurfaceMinimapElement, CustomEvent<any>>

# pixelRatio

number

# ratio

number

# rect

Rect

# root

ShadowRoot

# scale

number

# created(ctx)

# ctx

Context<SurfaceMinimapElement & JsxContext<SurfaceMinimapElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<SurfaceMinimapElement & JsxContext<SurfaceMinimapElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SurfaceMinimapElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SurfaceMinimapElement, keyof SurfaceMinimapElement>

# SurfaceMoveElement

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new SurfaceMoveElement()

SurfaceMoveElement

# $

Context<SurfaceMoveElement & JsxContext<SurfaceMoveElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# context

ContextClass<SurfaceMoveElement & JsxContext<SurfaceMoveElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dest

ChildOf<SurfaceItemElement>

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# grabPos

null | Point

# host

SurfaceMoveElement

# onmounted

EventHandler<SurfaceMoveElement, CustomEvent<any>>

# onsurfacemoveitemmove

EventHandler<SurfaceMoveElement, CustomEvent<SurfaceMoveDetail>>

# onsurfacemoveitemmoveend

EventHandler<SurfaceMoveElement, CustomEvent<SurfaceMoveDetail>>

# onsurfacemoveitemmovestart

EventHandler<SurfaceMoveElement, CustomEvent<SurfaceMoveDetail>>

# onunmounted

EventHandler<SurfaceMoveElement, CustomEvent<any>>

# pointerId

number

# root

ShadowRoot

# state

State<SurfaceMoveElement, {

# Idle

"surfacemoveidle"

# ItemMove

"surfacemoveitemmove"

}, "surfacemoveitemmove" | "surfacemoveidle"> & EventMethods<SurfaceMoveElement, {
# surfacemoveidlecancel

CustomEvent<any>

# surfacemoveidleend

CustomEvent<any>

# surfacemoveidlepause

CustomEvent<any>

# surfacemoveidleresume

CustomEvent<any>

# surfacemoveidlestart

CustomEvent<any>

# surfacemoveitemmovecancel

CustomEvent<any>

# surfacemoveitemmoveend

CustomEvent<any>

# surfacemoveitemmovepause

CustomEvent<any>

# surfacemoveitemmoveresume

CustomEvent<any>

# surfacemoveitemmovestart

CustomEvent<any>

}> & InlineEventMap<SurfaceMoveElement, {
# surfacemoveidlecancel

CustomEvent<any>

# surfacemoveidleend

CustomEvent<any>

# surfacemoveidlepause

CustomEvent<any>

# surfacemoveidleresume

CustomEvent<any>

# surfacemoveidlestart

CustomEvent<any>

# surfacemoveitemmovecancel

CustomEvent<any>

# surfacemoveitemmoveend

CustomEvent<any>

# surfacemoveitemmovepause

CustomEvent<any>

# surfacemoveitemmoveresume

CustomEvent<any>

# surfacemoveitemmovestart

CustomEvent<any>

}>

# surface

SurfaceElement

# created(ctx)

# ctx

Context<SurfaceMoveElement & JsxContext<SurfaceMoveElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<SurfaceMoveElement & JsxContext<SurfaceMoveElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SurfaceMoveElement, LifecycleEvents & SurfaceMoveEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SurfaceMoveElement, keyof SurfaceMoveElement>

# SurfaceResizeElement

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new SurfaceResizeElement()

SurfaceResizeElement

# $

Context<SurfaceResizeElement & JsxContext<SurfaceResizeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# context

ContextClass<SurfaceResizeElement & JsxContext<SurfaceResizeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dest

ChildOf<SurfaceItemElement>

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# grabPos

null | Point

# host

SurfaceResizeElement

# onmounted

EventHandler<SurfaceResizeElement, CustomEvent<any>>

# onsurfaceresizeitemresize

EventHandler<SurfaceResizeElement, CustomEvent<SurfaceResizeDetail>>

# onsurfaceresizeitemresizeend

EventHandler<SurfaceResizeElement, CustomEvent<SurfaceResizeDetail>>

# onsurfaceresizeitemresizestart

EventHandler<SurfaceResizeElement, CustomEvent<SurfaceResizeDetail>>

# onunmounted

EventHandler<SurfaceResizeElement, CustomEvent<any>>

# orig

null | Rect

# pointerId

number

# root

ShadowRoot

# state

State<SurfaceResizeElement, {

# Idle

"surfaceresizeidle"

# ItemResize

"surfaceresizeitemresize"

}, "surfaceresizeitemresize" | "surfaceresizeidle"> & EventMethods<SurfaceResizeElement, {
# surfaceresizeidlecancel

CustomEvent<any>

# surfaceresizeidleend

CustomEvent<any>

# surfaceresizeidlepause

CustomEvent<any>

# surfaceresizeidleresume

CustomEvent<any>

# surfaceresizeidlestart

CustomEvent<any>

# surfaceresizeitemresizecancel

CustomEvent<any>

# surfaceresizeitemresizeend

CustomEvent<any>

# surfaceresizeitemresizepause

CustomEvent<any>

# surfaceresizeitemresizeresume

CustomEvent<any>

# surfaceresizeitemresizestart

CustomEvent<any>

}> & InlineEventMap<SurfaceResizeElement, {
# surfaceresizeidlecancel

CustomEvent<any>

# surfaceresizeidleend

CustomEvent<any>

# surfaceresizeidlepause

CustomEvent<any>

# surfaceresizeidleresume

CustomEvent<any>

# surfaceresizeidlestart

CustomEvent<any>

# surfaceresizeitemresizecancel

CustomEvent<any>

# surfaceresizeitemresizeend

CustomEvent<any>

# surfaceresizeitemresizepause

CustomEvent<any>

# surfaceresizeitemresizeresume

CustomEvent<any>

# surfaceresizeitemresizestart

CustomEvent<any>

}>

# surface

SurfaceElement

# created(ctx)

# ctx

Context<SurfaceResizeElement & JsxContext<SurfaceResizeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

# $

Context<SurfaceResizeElement & JsxContext<SurfaceResizeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<SurfaceResizeElement, LifecycleEvents & SurfaceResizeEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<SurfaceResizeElement, keyof SurfaceResizeElement>

# WorkspaceElement

src/x-workspace.tsx#L35

# constructor()

node_modules/typescript/lib/lib.dom.d.ts#L6370

# new WorkspaceElement()

WorkspaceElement

# $

Context<WorkspaceElement & JsxContext<WorkspaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# ContextMenu

src/x-workspace.tsx#L60

# ()

()  =>

VKid

# Knob  =  ...

src/x-workspace.tsx#L41

Component<KnobElement, HTMLElement>

# Popup  =  ...

src/x-workspace.tsx#L40

Component<PopupElement, HTMLElement>

# Surface  =  ...

src/x-workspace.tsx#L39

Component<SurfaceElement, HTMLElement>

# context

ContextClass<WorkspaceElement & JsxContext<WorkspaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# contextMenusPart

src/x-workspace.tsx#L64

HTMLElement

# contextMenusScene  =  ...

src/x-workspace.tsx#L59

PopupScene

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

WorkspaceElement

# labelsScene  =  ...

src/x-workspace.tsx#L57

PopupScene

# onContextMenu

src/x-workspace.tsx#L61

# (Options)

# Options({ event })

# props

{

# event

src/x-workspace.tsx#L62

MouseEvent

}

Options({ event })  =>

VKid

(Options)  =>

EventHandler<any, MouseEvent>

# onmounted

EventHandler<WorkspaceElement, CustomEvent<any>>

# onunmounted

EventHandler<WorkspaceElement, CustomEvent<any>>

# root  =  ...

src/x-workspace.tsx#L43

ShadowRoot

# state  =  SurfaceState.Idle

src/x-workspace.tsx#L45

ValuesOf<{

# CenteringItem

"surfacecenteringitem"

# CenteringView

"surfacecenteringview"

# Connecting

"surfaceconnecting"

# FullSize

"surfacefullsize"

# Idle

"surfaceidle"

# MinimapPanning

"surfaceminimappanning"

# Overlay

"surfaceoverlay"

# Panning

"surfacepanning"

# Pinching

"surfacepinching"

# Selecting

"surfaceselecting"

# Wheeling

"surfacewheeling"

}>

# surface

src/x-workspace.tsx#L47

null | SurfaceElement

# windows  =  ...

src/x-workspace.tsx#L48

ChildOf<WorkspaceWindowElement> []

# created(ctx)

# ctx

Context<WorkspaceElement & JsxContext<WorkspaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-workspace.tsx#L66

# $

Context<WorkspaceElement & JsxContext<WorkspaceElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<WorkspaceElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<WorkspaceElement, keyof WorkspaceElement>

# WorkspaceWindowElement

src/x-workspace-window.tsx#L11

# constructor(args)

# new WorkspaceWindowElement()

WorkspaceWindowElement

# args

any []

# $

Context<WorkspaceWindowElement & JsxContext<WorkspaceWindowElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# ContextMenu

src/x-workspace-window.tsx#L32

# ()

()  =>

VKid

# Controls

src/x-workspace-window.tsx#L31

# ()

()  =>

VKid

# ExtraLabel  =  ...

src/x-workspace-window.tsx#L28

# ()

()  =>

VKid

# Item

src/x-workspace-window.tsx#L30

# ()

()  =>

VKid

# Label

src/x-workspace-window.tsx#L29

# ()

()  =>

VKid

# Popup  =  ...

src/x-workspace-window.tsx#L20

Component<PopupElement, HTMLElement>

# SurfaceMove  =  ...

src/x-workspace-window.tsx#L21

Component<SurfaceMoveElement, HTMLElement>

# SurfaceResize  =  ...

src/x-workspace-window.tsx#L22

Component<SurfaceResizeElement, HTMLElement>

# context

ContextClass<WorkspaceWindowElement & JsxContext<WorkspaceWindowElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# doRenameLabel  =  ...

src/x-workspace-window.tsx#L37

# ()

()  =>

void

# fullSize  =  false

src/x-workspace-window.tsx#L18

boolean

# host

WorkspaceWindowElement

# id  =  ...

src/x-workspace-window.tsx#L15

string

# label  =  $.String

src/x-workspace-window.tsx#L16

undefined | string

# labelPopup

src/x-workspace-window.tsx#L26

PopupElement

# onContextMenu

src/x-workspace-window.tsx#L33

# (Options)

# Options({ event })

# props

{

# event

src/x-workspace-window.tsx#L34

MouseEvent

}

Options({ event })  =>

VKid

(Options)  =>

EventHandler<any, MouseEvent>

# onmounted

EventHandler<WorkspaceWindowElement, CustomEvent<any>>

# onunmounted

EventHandler<WorkspaceWindowElement, CustomEvent<any>>

# points

Point []

# pos

Point

# rect

Rect

# size

Point

# surface

SurfaceElement

# vertical  =  $.Boolean

src/x-workspace-window.tsx#L17

undefined | boolean

# workspace

src/x-workspace-window.tsx#L25

WorkspaceElement

# created(ctx)

# ctx

Context<WorkspaceWindowElement & JsxContext<WorkspaceWindowElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/x-workspace-window.tsx#L80

# $

Context<WorkspaceWindowElement & JsxContext<WorkspaceWindowElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<WorkspaceWindowElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<WorkspaceWindowElement, keyof WorkspaceWindowElement>

# ContextMenuProps

# Options

# ({ event })

# props

{

# event

MouseEvent

}

({ event })  =>

VKid

# anchorDestination

HTMLElement

# popupDestination

HTMLElement

# scene

PopupScene

# sticky

boolean

# surface

SurfaceElement

# SurfaceEvents

{

# connectend

CustomEvent

# connectstart

CustomEvent

# statechange

CustomEvent

# surfaceselecting

CustomEvent<{

# event

PointerEvent

# items

$.ChildOf<SurfaceItemElement> []

# rect

$.Rect

}>

} & SurfaceMoveEvents & SurfaceResizeEvents

# SurfaceMoveDetail

{

# dest

$.ChildOf<SurfaceItemElement>

# rect

Rect

}

# SurfaceMoveEvents

{

# surfacemoveitemmove

CustomEvent<SurfaceMoveDetail>

# surfacemoveitemmoveend

CustomEvent<SurfaceMoveDetail>

# surfacemoveitemmovestart

CustomEvent<SurfaceMoveDetail>

}

# SurfaceResizeDetail

{

# dest

$.ChildOf<SurfaceItemElement>

# rect

Rect

}

# SurfaceResizeEvents

{

# surfaceresizeitemresize

CustomEvent<SurfaceResizeDetail>

# surfaceresizeitemresizeend

CustomEvent<SurfaceResizeDetail>

# surfaceresizeitemresizestart

CustomEvent<SurfaceResizeDetail>

}

# SurfaceAnimSettings

{

# surfacecenteringitem

AnimSettings

# surfacecenteringview

AnimSettings

# surfacefullsize

AnimSettings

# surfaceidle

AnimSettings

# surfaceminimappanning

AnimSettings

# surfaceoverlay

AnimSettings

# surfacepanning

AnimSettings

# surfacepinching

AnimSettings

# surfaceselecting

AnimSettings

# surfacewheeling

AnimSettings

}

# SurfaceCursorState

{

# Copy

"copy"

# EWResize

"ew-resize"

# Grabbing

"grabbing"

# Idle

"default"

# NSResize

"ns-resize"

# NWSEResize

"nwse-resize"

}

# SurfaceMoveState

{

# Idle

"surfacemoveidle"

# ItemMove

"surfacemoveitemmove"

}

# SurfaceResizeState

{

# Idle

"surfaceresizeidle"

# ItemResize

"surfaceresizeitemresize"

}

# SurfaceState

{

# CenteringItem

"surfacecenteringitem"

# CenteringView

"surfacecenteringview"

# Connecting

"surfaceconnecting"

# FullSize

"surfacefullsize"

# Idle

"surfaceidle"

# MinimapPanning

"surfaceminimappanning"

# Overlay

"surfaceoverlay"

# Panning

"surfacepanning"

# Pinching

"surfacepinching"

# Selecting

"surfaceselecting"

# Wheeling

"surfacewheeling"

}

# ContextMenuOption({ action, children, disabled, keyboard })

{

# action

# (e)

# e

MouseEvent

(e)  =>

void

# children

VKid

# disabled

boolean

# keyboard

string []

}

ContextMenuOption({ action, children, disabled, keyboard })  =>

VKid

# WorkspaceWindowControl({ action, children, title })

src/x-workspace.tsx#L20

{

# action

src/x-workspace.tsx#L21

# ()

()  =>

void

# children

src/x-workspace.tsx#L23

VKid

# title

src/x-workspace.tsx#L22

string

}

WorkspaceWindowControl({ action, children, title })  =>

VKid

# onContextMenu(ContextMenuProps)

ContextMenuProps

onContextMenu(ContextMenuProps)  =>

Fn<[ named-tuple-member ], any>

Credits

• everyday-types by stagas – Everyday utility types
• everyday-utils by stagas – Everyday utilities
• icon-svg by stagas – Memoized fetch SVG icons from many popular icon sets with editor autocomplete and a Web Component ready to use
• immutable-map-set by stagas – Immutable Map and Set objects
• sigl by stagas – Web framework
• x-context-menu by stagas – Context menu for x-popup.
• x-knob by stagas – Web Component Knobs
• x-popup by stagas – Popup Web Component used for tooltips and context menus
• x-surface by stagas – Infinitely pannable and zoomable HTML surface as a Web Component.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas