x-surface

Infinitely pannable and zoomable HTML surface as a Web Component.

npm i x-surface

pnpm add x-surface

yarn add x-surface

Examples

# web

# view source

example/web.tsx

/** @jsxImportSource sigl */
import { Rect } from 'sigl'
import $ from 'sigl'
import { SurfaceElement, SurfaceItemElement, SurfaceMoveElement, SurfaceResizeElement } from 'x-surface'

interface ItemElement extends $.Element<ItemElement> {}

@$.element()
class ItemElement extends $(SurfaceItemElement) {
  SurfaceMove = $.element(SurfaceMoveElement)
  SurfaceResize = $.element(SurfaceResizeElement)
  mounted($: ItemElement['$']) {
    $.render(({ host, surface, SurfaceMove, SurfaceResize }) => (
      <>
        <style>
          {/*css*/ `
          :host {
            box-sizing: border-box;
            border: 2px solid pink;
            display: block;
            position: absolute;
          }

          ${SurfaceMove} {
            background: #067;
            width: 100%;
            height: 20px;
            position: absolute;
          }

          ${SurfaceResize} {
            background: #ba2;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: 20px;
          }
          `}
        </style>
        <SurfaceMove surface={surface} dest={host} />
        <SurfaceResize surface={surface} dest={host} />
      </>
    ))
  }
}

interface SceneElement extends $.Element<SceneElement> {}

@$.element()
class SceneElement extends HTMLElement {
  Surface = $.element(SurfaceElement)
  Item = $.element(ItemElement)

  surface?: SurfaceElement

  items = new $.RefSet<ItemElement>([
    { rect: new Rect(0, 0, 500, 500) },
    { rect: new Rect(600, 0, 500, 500) },
  ])

  mounted($: this['$']) {
    $.render(({ Surface, Item, items }) => (
      <Surface ref={$.ref.surface}>
        {items.map(item => <Item {x-surface.item} />)}
      </Surface>
    ))

    // $.effect(({ surface }) => {
    setTimeout(() => {
      const ev = new WheelEvent('wheel', {
        deltaY: -800,
      })
      Object.defineProperty(ev, 'pageX', { value: 250 })
      Object.defineProperty(ev, 'pageY', { value: 150 })
      window.dispatchEvent(ev)
    }, 500)
    // })
  }
}

const Scene = $.element(SceneElement)

$.render(
  <>
    <style>
      {/*css*/ `
      ${Scene} {
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
      }
    `}
    </style>
    <Scene />
  </>,
  document.body
)

API

# SurfaceElement

src/surface.tsx#L273

# 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  =  ...

src/surface.tsx#L281

Component<SurfaceGridElement, HTMLElement>

# Minimap  =  ...

src/surface.tsx#L280

Component<SurfaceMinimapElement, HTMLElement>

# __#2@#offsetHeight

number

# __#2@#offsetLeft

number

# __#2@#offsetTop

number

# __#2@#offsetWidth

number

# centerItem

src/surface.tsx#L322

# (item)
# item

ChildOf<SurfaceItemElement>

(item)  =>

void

# centerOtherItem

src/surface.tsx#L324

# (diff)
# diff

number

(diff)  =>

void

# centerRect

src/surface.tsx#L320

# (rect)
# rect

Rect

(rect)  =>

void

# centerView

src/surface.tsx#L326

# (state, paddingPct)

# state
ValuesOf<{

# CenteringItem  =  'surfacecenteringitem'

src/surface.tsx#L34

"surfacecenteringitem"

# CenteringView  =  'surfacecenteringview'

src/surface.tsx#L35

"surfacecenteringview"

# Connecting  =  'surfaceconnecting'

src/surface.tsx#L36

"surfaceconnecting"

# FullSize  =  'surfacefullsize'

src/surface.tsx#L37

"surfacefullsize"

# Idle  =  'surfaceidle'

src/surface.tsx#L30

"surfaceidle"

# MinimapPanning  =  'surfaceminimappanning'

src/surface.tsx#L38

"surfaceminimappanning"

# Overlay  =  'surfaceoverlay'

src/surface.tsx#L32

"surfaceoverlay"

# Panning  =  'surfacepanning'

src/surface.tsx#L39

"surfacepanning"

# Pinching  =  'surfacepinching'

src/surface.tsx#L40

"surfacepinching"

# Selecting  =  'surfaceselecting'

src/surface.tsx#L41

"surfaceselecting"

# Wheeling  =  'surfacewheeling'

src/surface.tsx#L42

"surfacewheeling"

}>

# paddingPct

number

(state, paddingPct)  =>

void

# centeredItem

src/surface.tsx#L318

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

src/surface.tsx#L288

State<SurfaceElement, {

# Copy  =  'copy'

src/surface.tsx#L48

"copy"

# EWResize  =  'ew-resize'

src/surface.tsx#L51

"ew-resize"

# Grabbing  =  'grabbing'

src/surface.tsx#L49

"grabbing"

# Idle  =  'default'

src/surface.tsx#L46

"default"

# NSResize  =  'ns-resize'

src/surface.tsx#L52

"ns-resize"

# NWSEResize  =  'nwse-resize'

src/surface.tsx#L53

"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'

src/surface.tsx#L330

"item" | "view"

# dispatch

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# exitFullSize

src/surface.tsx#L353

null |

# ()
()  =>

void

# fullSize

src/surface.tsx#L352

HTMLElement

# getCenterMatrix

src/surface.tsx#L328

# (rect, paddingPct)
# rect

Rect

# paddingPct

number

(rect, paddingPct)  =>

DOMMatrix

# getPointerPos

src/surface.tsx#L344

# (event)
# event

PointerEvent | WheelEvent

(event)  =>

Point

# gridCellSize  =  80

src/surface.tsx#L291

number

# host

SurfaceElement

# hoveringItem

src/surface.tsx#L337

null | ChildOf<SurfaceItemElement>

# items  =  ...

src/surface.tsx#L333

ChildOf<SurfaceItemElement> []

# makeFullSize  =  ...

src/surface.tsx#L354

# (item)

# item
ChildOf<SurfaceItemElement> & {

# fullSize

src/surface.tsx#L355

boolean

}

(item)  =>

void

# maxZoom  =  1.25

src/surface.tsx#L294

number

# minZoom  =  0.05

src/surface.tsx#L293

number

# minimap

src/surface.tsx#L305

SurfaceMinimapElement

# minimapRatio  =  ...

src/surface.tsx#L298

number

# minimapScale  =  0.2

src/surface.tsx#L297

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

src/surface.tsx#L23

PointerEvent

# items

src/surface.tsx#L23

ChildOf<SurfaceItemElement> []

# rect

src/surface.tsx#L23

Rect

}>>

# onunmounted

EventHandler<SurfaceElement, CustomEvent<any>>

# ownRect

Rect

# pinchStartDistance  =  1

src/surface.tsx#L343

number

# pinchStartMatrix

src/surface.tsx#L342

null | DOMMatrix

# pixelRatio  =  window.devicePixelRatio

src/surface.tsx#L290

number

# pointer

src/surface.tsx#L340

{

# id

src/surface.tsx#L340

number

# pos

src/surface.tsx#L340

Point

}

# pointers  =  ...

src/surface.tsx#L341

Map<number, Point>

# pos

Point

# rect

Rect

# root  =  ...

src/surface.tsx#L284

ShadowRoot

# selectingRect

src/surface.tsx#L348

null | Rect

# selectingStartPos

src/surface.tsx#L349

null | Point

# selection

src/surface.tsx#L347

HTMLDivElement

# setViewStyleTransform

src/surface.tsx#L389

# (matrixString)
# matrixString

string

(matrixString)  =>

void

# size

Point

# snapThreshold  =  0.15

src/surface.tsx#L292

number

# state  =  ...

src/surface.tsx#L287

State<SurfaceElement, {

# CenteringItem  =  'surfacecenteringitem'

src/surface.tsx#L34

"surfacecenteringitem"

# CenteringView  =  'surfacecenteringview'

src/surface.tsx#L35

"surfacecenteringview"

# Connecting  =  'surfaceconnecting'

src/surface.tsx#L36

"surfaceconnecting"

# FullSize  =  'surfacefullsize'

src/surface.tsx#L37

"surfacefullsize"

# Idle  =  'surfaceidle'

src/surface.tsx#L30

"surfaceidle"

# MinimapPanning  =  'surfaceminimappanning'

src/surface.tsx#L38

"surfaceminimappanning"

# Overlay  =  'surfaceoverlay'

src/surface.tsx#L32

"surfaceoverlay"

# Panning  =  'surfacepanning'

src/surface.tsx#L39

"surfacepanning"

# Pinching  =  'surfacepinching'

src/surface.tsx#L40

"surfacepinching"

# Selecting  =  'surfaceselecting'

src/surface.tsx#L41

"surfaceselecting"

# Wheeling  =  'surfacewheeling'

src/surface.tsx#L42

"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  =  ...

src/surface.tsx#L289

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

# view

src/surface.tsx#L308

HTMLSlotElement

# viewFrame

src/surface.tsx#L309

HTMLDivElement

# viewFrameNormalRect

src/surface.tsx#L311

Rect

# viewFrameRect

src/surface.tsx#L310

Rect

# viewMatrix  =  ...

src/surface.tsx#L313

DOMMatrix

# viewMatrixString

src/surface.tsx#L314

string

# viewRect

src/surface.tsx#L312

Rect

# viewStyleTransform

src/surface.tsx#L315

string

# xPattern  =  '1'

src/surface.tsx#L301

string

# yPattern  =  '1'

src/surface.tsx#L302

string

# zIndex  =  0

src/surface.tsx#L277

number

# matrix

src/surface.tsx#L391

# __#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($)

src/surface.tsx#L395

# $
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

src/surface.tsx#L21

CustomEvent<any>

# connectstart

src/surface.tsx#L20

CustomEvent<any>

# statechange

src/surface.tsx#L19

CustomEvent<any>

# surfaceselecting
src/surface.tsx#L22
CustomEvent<{

# event

src/surface.tsx#L23

PointerEvent

# items

src/surface.tsx#L23

ChildOf<SurfaceItemElement> []

# rect

src/surface.tsx#L23

Rect

}>

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

# toJSON()

toJSON()  =>

Pick<SurfaceElement, keyof SurfaceElement>

# SurfaceGridElement

src/surface-grid.ts#L20

# 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

src/surface-grid.ts#L42

StepAnimation<{

# offset

src/surface-grid.ts#L42

Point

# zoom

src/surface-grid.ts#L42

number

}>

# animValues

src/surface-grid.ts#L43

{

# offset

src/surface-grid.ts#L43

Point

# zoom

src/surface-grid.ts#L43

number

}

# canvas

src/surface-grid.ts#L39

HTMLCanvasElement

# cellSize  =  80

src/surface-grid.ts#L27

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

src/surface-grid.ts#L40

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

src/surface-grid.ts#L32

DOMMatrix

# offsetX

src/surface-grid.ts#L46

number

# offsetY

src/surface-grid.ts#L47

number

# onmounted

EventHandler<SurfaceGridElement, CustomEvent<any>>

# onunmounted

EventHandler<SurfaceGridElement, CustomEvent<any>>

# pixelRatio  =  window.devicePixelRatio

src/surface-grid.ts#L26

number

# pointers  =  ...

src/surface-grid.ts#L34

Map<number, Point>

# rect

src/surface-grid.ts#L33

Rect

# root  =  ...

src/surface-grid.ts#L24

ShadowRoot

# slotted

src/surface-grid.ts#L35

HTMLElement []

# transition

src/surface-grid.ts#L36

Transition<States, unknown>

# xPattern  =  '1'

src/surface-grid.ts#L28

string

# yPattern  =  '1'

src/surface-grid.ts#L29

string

# zoom

src/surface-grid.ts#L45

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($)

src/surface-grid.ts#L49

# $
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

src/surface-item.ts#L6

# 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

src/surface-item.ts#L15

Point []

# pos  =  ...

src/surface-item.ts#L11

Point

# rect  =  ...

src/surface-item.ts#L10

Rect

# size  =  ...

src/surface-item.ts#L12

Point

# surface

src/surface-item.ts#L14

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($)

src/surface-item.ts#L17

# $
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

src/surface-minimap.ts#L32

# 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  =  true

src/surface-minimap.ts#L55

boolean

# canvas  =  ...

src/surface-minimap.ts#L47

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

src/surface-minimap.ts#L48

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

src/surface-minimap.ts#L49

boolean

# items

src/surface-minimap.ts#L45

ChildOf<SurfaceItemElement> []

# matrix

src/surface-minimap.ts#L43

DOMMatrix

# onmounted

EventHandler<SurfaceMinimapElement, CustomEvent<any>>

# onunmounted

EventHandler<SurfaceMinimapElement, CustomEvent<any>>

# pixelRatio  =  window.devicePixelRatio

src/surface-minimap.ts#L38

number

# ratio  =  ...

src/surface-minimap.ts#L40

number

# rect

src/surface-minimap.ts#L44

Rect

# root  =  ...

src/surface-minimap.ts#L36

ShadowRoot

# scale  =  0.2

src/surface-minimap.ts#L39

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($)

src/surface-minimap.ts#L57

# $
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

src/surface-move.ts#L24

# 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

src/surface-move.ts#L37

ChildOf<SurfaceItemElement>

# dispatch

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# grabPos

src/surface-move.ts#L40

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

src/surface-move.ts#L39

number

# root  =  ...

src/surface-move.ts#L28

ShadowRoot

# state  =  ...

src/surface-move.ts#L34

State<SurfaceMoveElement, {

# Idle  =  'surfacemoveidle'

src/surface-move.ts#L20

"surfacemoveidle"

# ItemMove  =  'surfacemoveitemmove'

src/surface-move.ts#L21

"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

src/surface-move.ts#L36

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($)

src/surface-move.ts#L42

# $
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

src/surface-resize.ts#L24

# 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

src/surface-resize.ts#L37

ChildOf<SurfaceItemElement>

# dispatch

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# grabPos

src/surface-resize.ts#L40

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

src/surface-resize.ts#L41

null | Rect

# pointerId

src/surface-resize.ts#L39

number

# root  =  ...

src/surface-resize.ts#L28

ShadowRoot

# state  =  ...

src/surface-resize.ts#L34

State<SurfaceResizeElement, {

# Idle  =  'surfaceresizeidle'

src/surface-resize.ts#L20

"surfaceresizeidle"

# ItemResize  =  'surfaceresizeitemresize'

src/surface-resize.ts#L21

"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

src/surface-resize.ts#L36

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($)

src/surface-resize.ts#L43

# $
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>

# SurfaceEvents

src/surface.tsx#L17

{

# connectend

src/surface.tsx#L21

CustomEvent

# connectstart

src/surface.tsx#L20

CustomEvent

# statechange

src/surface.tsx#L19

CustomEvent

# surfaceselecting
src/surface.tsx#L22
CustomEvent<{

# event

src/surface.tsx#L23

PointerEvent

# items

src/surface.tsx#L23

$.ChildOf<SurfaceItemElement> []

# rect

src/surface.tsx#L23

$.Rect

}>

} & SurfaceMoveEvents & SurfaceResizeEvents

# SurfaceMoveDetail

src/surface-move.ts#L8

{

# dest

src/surface-move.ts#L9

$.ChildOf<SurfaceItemElement>

# rect

src/surface-move.ts#L10

Rect

}

# SurfaceMoveEvents

src/surface-move.ts#L13

{

# surfacemoveitemmove

src/surface-move.ts#L14

CustomEvent<SurfaceMoveDetail>

# surfacemoveitemmoveend

src/surface-move.ts#L16

CustomEvent<SurfaceMoveDetail>

# surfacemoveitemmovestart

src/surface-move.ts#L15

CustomEvent<SurfaceMoveDetail>

}

# SurfaceResizeDetail

src/surface-resize.ts#L8

{

# dest

src/surface-resize.ts#L9

$.ChildOf<SurfaceItemElement>

# rect

src/surface-resize.ts#L10

Rect

}

# SurfaceResizeEvents

src/surface-resize.ts#L13

{

# surfaceresizeitemresize

src/surface-resize.ts#L14

CustomEvent<SurfaceResizeDetail>

# surfaceresizeitemresizeend

src/surface-resize.ts#L16

CustomEvent<SurfaceResizeDetail>

# surfaceresizeitemresizestart

src/surface-resize.ts#L15

CustomEvent<SurfaceResizeDetail>

}

# SurfaceAnimSettings  =  ...

src/surface.tsx#L76

{

# surfacecenteringitem  =  ...

src/surface.tsx#L123

AnimSettings

# surfacecenteringview  =  ...

src/surface.tsx#L139

AnimSettings

# surfacefullsize  =  Idle

src/surface.tsx#L82

AnimSettings

# surfaceidle  =  Idle

src/surface.tsx#L77

AnimSettings

# surfaceminimappanning  =  Panning

src/surface.tsx#L85

AnimSettings

# surfaceoverlay  =  Panning

src/surface.tsx#L79

AnimSettings

# surfacepanning  =  Panning

src/surface.tsx#L84

AnimSettings

# surfacepinching  =  ...

src/surface.tsx#L87

AnimSettings

# surfaceselecting  =  Idle

src/surface.tsx#L81

AnimSettings

# surfacewheeling  =  ...

src/surface.tsx#L97

AnimSettings

}

# SurfaceCursorState  =  ...

src/surface.tsx#L45

{

# Copy  =  'copy'

src/surface.tsx#L48

"copy"

# EWResize  =  'ew-resize'

src/surface.tsx#L51

"ew-resize"

# Grabbing  =  'grabbing'

src/surface.tsx#L49

"grabbing"

# Idle  =  'default'

src/surface.tsx#L46

"default"

# NSResize  =  'ns-resize'

src/surface.tsx#L52

"ns-resize"

# NWSEResize  =  'nwse-resize'

src/surface.tsx#L53

"nwse-resize"

}

# SurfaceMoveState  =  ...

src/surface-move.ts#L19

{

# Idle  =  'surfacemoveidle'

src/surface-move.ts#L20

"surfacemoveidle"

# ItemMove  =  'surfacemoveitemmove'

src/surface-move.ts#L21

"surfacemoveitemmove"

}

# SurfaceResizeState  =  ...

src/surface-resize.ts#L19

{

# Idle  =  'surfaceresizeidle'

src/surface-resize.ts#L20

"surfaceresizeidle"

# ItemResize  =  'surfaceresizeitemresize'

src/surface-resize.ts#L21

"surfaceresizeitemresize"

}

# SurfaceState  =  ...

src/surface.tsx#L29

{

# CenteringItem  =  'surfacecenteringitem'

src/surface.tsx#L34

"surfacecenteringitem"

# CenteringView  =  'surfacecenteringview'

src/surface.tsx#L35

"surfacecenteringview"

# Connecting  =  'surfaceconnecting'

src/surface.tsx#L36

"surfaceconnecting"

# FullSize  =  'surfacefullsize'

src/surface.tsx#L37

"surfacefullsize"

# Idle  =  'surfaceidle'

src/surface.tsx#L30

"surfaceidle"

# MinimapPanning  =  'surfaceminimappanning'

src/surface.tsx#L38

"surfaceminimappanning"

# Overlay  =  'surfaceoverlay'

src/surface.tsx#L32

"surfaceoverlay"

# Panning  =  'surfacepanning'

src/surface.tsx#L39

"surfacepanning"

# Pinching  =  'surfacepinching'

src/surface.tsx#L40

"surfacepinching"

# Selecting  =  'surfaceselecting'

src/surface.tsx#L41

"surfaceselecting"

# Wheeling  =  'surfacewheeling'

src/surface.tsx#L42

"surfacewheeling"

}

Credits

• animatrix by stagas – Create DOM Animations.
• bezier-easing by Gaëtan Renaudeau – BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.
• everyday-types by stagas – Everyday utility types
• everyday-utils by stagas – Everyday utilities
• get-element-offset by stagas – Get accurate DOM element offset.
• relative-mouse by stagas – Get mouse position relative to a DOM element.
• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas