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<