window-plug

Workspace Window plug

npm i window-plug

pnpm add window-plug

yarn add window-plug

Examples

# web

# view source

example/web.tsx

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

import { deserialize, serialize } from 'serialize-whatever'
import { ContextMenuOption, WorkspaceElement, WorkspaceWindowElement } from 'x-workspace'
import { Cable, Plug, WindowPlugElement, WindowPlugSceneElement } from 'window-plug'

const IO = {
  Midi: 'midi',
  Audio: 'audio',
} as const

interface WindowItemElement extends $.Element<WindowItemElement> {}

@$.element()
class WindowItemElement extends $(WorkspaceWindowElement) {
  WindowPlug = $.element(WindowPlugElement)

  plugScene?: WindowPlugSceneElement

  @$.out() inputs = new $.RefSet<WindowPlugElement>([
    { plug: new Plug(Plug.Input, IO.Midi) },
    { plug: new Plug(Plug.Input, IO.Audio) },
  ])

  @$.out() outputs = new $.RefSet<WindowPlugElement>([
    { plug: new Plug(Plug.Output, IO.Midi) },
    { plug: new Plug(Plug.Output, IO.Audio) },
  ])

  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>
      </>
    ))

    const Plugs = $.part(({ host, WindowPlug, plugScene, inputs, outputs, onContextMenu }) => (
      <div part="plugs">
        {[
          ['inputs', inputs] as const,
          ['outputs', outputs] as const,
        ].map(([part, plugs]) => (
          <div part={part}>
            {plugs.map(plug => (
              <WindowPlug
                {window-plug.plug}
                part="plug"
                dest={host}
                scene={plugScene}
                oncontextmenu={onContextMenu(() => (
                  <>
                    <ContextMenuOption keyboard={['Alt', 'M']} disabled={!plug.ref.current?.plug?.cables.size}>
                      Mute All
                    </ContextMenuOption>
                    <ContextMenuOption keyboard={['Alt', 'D']} disabled={!plug.ref.current?.plug?.cables.size}>
                      Disconnect All
                    </ContextMenuOption>
                  </>
                ))}
              />
            ))}
          </div>
        ))}
      </div>
    ))

    $.Item = $.part(({ WindowPlug }) => (
      <>
        <style>
          {/*css*/ `
          :host {
            --audio: #09f;
            --midi: #a80;
            --plug-width: 28px;
            display: flex;
            width: 100%;
            height: 100%;
            position: relative;
          }
          [part=plugs] {
            position: absolute;
            height: 100%;
            width: 100%;
          }
          [part=plugs] > * {
            width: var(--plug-width);
            height: 100%;
            pointer-events: none;

            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;

            position: absolute;
            gap: 20px;
          }
          [part=inputs] {
            left: calc(-1 * var(--plug-width));
            top: 0;
          }
          [part=outputs] {
            right: calc(-1 * var(--plug-width));
            top: 0;
          }
          [part=plug] {
            display: inline-flex;
            width: var(--plug-width);
            pointer-events: all;
            cursor: copy;
          }
          [part=inputs] [part=plug] {
          }
          [part=outputs] [part=plug] {
          }
          [data-cable-kind=audio][data-plug-kind=input]::part(plug) {
            background: var(--audio);
          }
          [data-cable-kind=audio][data-plug-kind=output]::part(plug) {
            background: var(--audio);
          }
          [data-cable-kind=midi][data-plug-kind=input]::part(plug) {
            background: var(--midi);
          }
          [data-cable-kind=midi][data-plug-kind=output]::part(plug) {
            background: var(--midi);
          }
          ${WindowPlug}::part(plug) {
            /* opacity: 0.55; */
            /* transition: opacity 78ms cubic-bezier(0, 0.35, .15, 1); */
            z-index: 1;
          }
          ${WindowPlug}::part(back) {
            background: #000;
            z-index: 0;
          }
          ${WindowPlug}:hover::part(plug) {
            /* opacity: 0.75; */
          }
          ${WindowPlug}.disabled::part(plug) {
            opacity: 0.2;
          }
          ${WindowPlug}.enabled::part(plug) {
            opacity: 0.85;
          }
          ${WindowPlug}.active::part(plug) {
            /* opacity: 1; */
          }
        `}
        </style>

        <Plugs />

        <div>hello this is a window</div>
      </>
    ))
  }
}

interface SceneElement extends $.Element<SceneElement> {}

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

  workspace?: WorkspaceElement
  plugScene?: WindowPlugSceneElement

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

  mounted($: SceneElement['$']) {
    const PlugScene = $.part(({ WindowPlugScene, workspace }) => (
      <WindowPlugScene ref={$.ref.plugScene} workspace={workspace} />
    ))

    const PlugArrows = $.part(({ plugScene: { PlugArrows } }) => <PlugArrows />)

    const Items = $.part(({ WindowItem, items, plugScene }) =>
      items.map(item => <WindowItem {window-plug.item} plugScene={plugScene} />)
    )

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

          ${WindowItem} {
            box-sizing: border-box;
            background: #000;
            z-index: 1;
            /* border: 5px solid pink; */
          }
          ${WindowItem}.connect-hover {
            /* border: 5px solid purple; */
          }
        `}
        </style>
        <Workspace ref={$.ref.workspace}>
          <Items />
          <PlugArrows />
        </Workspace>
        <PlugScene />
      </>
    ))
  }
}

const Scene = $.element(SceneElement)

const Classes = [
  $.Rect,
  $.RefSet,
  Cable,
  Plug,
  SceneElement,
]

const sceneRef = new $.Ref()
const historyItems = new Set<string>()
const History = () => {
  return [window-plug.historyItems].map((x, i) => (
    <button
      onclick={() => {
        sceneRef.current = deserialize(x, Classes)
        render()
      }}
    >
      {i}
    </button>
  ))
}

if (localStorage.lastScene) {
  sceneRef.current = deserialize(localStorage.lastScene, Classes)
}

const render = () => {
  $.render(
    <>
      <div style="z-index: 999999; position: fixed;">
        <History />
      </div>
      <Scene
        ref={sceneRef}
        onchange={$.event.debounce(200)(() => {
          console.time('serialize')
          const serialized = serialize(sceneRef.current)
          historyItems.add(serialized)
          localStorage.lastScene = serialized
          console.log('size:', serialized.length)
          console.timeEnd('serialize')
          render()
        })}
      />
    </>,
    document.body
  )
}

render()

API

# PlugKind

# Input

"input"

# Output

"output"

# WindowPlugArrowDragType

src/window-plug-arrow.tsx#L39

# Head

src/window-plug-arrow.tsx#L40

0

# Tail

src/window-plug-arrow.tsx#L41

1

# Cable

# constructor(cable)

# new Cable()

Cable

# cable

Cable

# new Cable()

Cable

# outputCh

number

# inputCh

number

# id

string

# inputCh

number

# outputCh

number

# Plug

# constructor(plug)

# new Plug()

Plug<P, C>

# plug

Plug<P, C>

# new Plug()

Plug<P, C>

# plugKind

Plug<P, C> | P

# cableKind

C

# cableKind

C

# cables

Map<Cable, Plug<P extends Output ? Input : Output, C>>

# onconnect
EventHandler<Plug<any, any>, CustomEvent<{

# cable

Cable

# plug

Plug<any, any>

}>>

# ondisconnect

EventHandler<Plug<any, any>, CustomEvent<{

# cable

Cable

# plug

Plug<any, any>

}>>

# plugKind

P

# Input

Input

# Output

Output

# connect(this, other, cable)

# this

Plug<any, any>

# other

Plug<any, any>

# cable

Cable

connect(this, other, cable)  =>

Cable

# disconnect(this, cable)

# this

Plug<any, any>

# cable

Cable

disconnect(this, cable)  =>

Cable

# PlugArrow

src/plug-arrow.ts#L6

# constructor(cable, dests, options)

src/plug-arrow.ts#L13

# new PlugArrow()

PlugArrow

# cable

Cable

# dests

Point | WindowPlugElement []

# options

WindowPlugSolveOptions

# cable

src/plug-arrow.ts#L14

Cable

# dests

src/plug-arrow.ts#L15

Point | WindowPlugElement []

# holding  =  false

src/plug-arrow.ts#L11

boolean

# options

src/plug-arrow.ts#L16

WindowPlugSolveOptions

# plugPoints

src/plug-arrow.ts#L9

[ Point, Point, Point, Point ]

# polygon

src/plug-arrow.ts#L10

Polygon

# map  =  ...

src/plug-arrow.ts#L7

WeakMap<Cable, PlugArrow>

# id
src/plug-arrow.ts#L26
# plugs
src/plug-arrow.ts#L36
# scene
src/plug-arrow.ts#L30
# solve()
src/plug-arrow.ts#L81
solve()  =>

Promise<void>

# updatePoints()

src/plug-arrow.ts#L41

updatePoints()  =>

void

# WindowPlugArrowElement

src/window-plug-arrow.tsx#L48

# constructor()

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

# new WindowPlugArrowElement()

WindowPlugArrowElement

# $
Context<WindowPlugArrowElement & JsxContext<WindowPlugArrowElement> & 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/window-plug-arrow.tsx#L75

ManualAnimation<WindowPlugArrowAnimation>

# animValues

src/window-plug-arrow.tsx#L76

WindowPlugArrowAnimation

# cableWidth  =  7.5

src/window-plug-arrow.tsx#L53

number

# color  =  '#66a'

src/window-plug-arrow.tsx#L57

string

# context

ContextClass<WindowPlugArrowElement & JsxContext<WindowPlugArrowElement> & 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

>

# dragType  =  WindowPlugArrowDragType.Head

src/window-plug-arrow.tsx#L66

WindowPlugArrowDragType

# holding  =  false

src/window-plug-arrow.tsx#L63

false | {

# cable

src/window-plug-arrow.tsx#L63

Cable

# dest

src/window-plug-arrow.tsx#L63

Point

# plug

src/window-plug-arrow.tsx#L63

WindowPlugElement

}

# host

WindowPlugArrowElement

# onContextMenu

src/window-plug-arrow.tsx#L70

# (Options)

# Options()
Options()  =>

VKid

(Options)  =>

EventHandler<any, MouseEvent>

# onarrowhoverstart

EventHandler<WindowPlugArrowElement, CustomEvent<{

# arrow

src/window-plug-arrow.tsx#L45

WindowPlugArrowElement

}>>

# onmounted

EventHandler<WindowPlugArrowElement, CustomEvent<any>>

# onunmounted

EventHandler<WindowPlugArrowElement, CustomEvent<any>>

# path

src/window-plug-arrow.tsx#L61

string

# plugArrow

src/window-plug-arrow.tsx#L58

PlugArrow

# points

src/window-plug-arrow.tsx#L73

Point []

# reconnectInput

src/window-plug-arrow.tsx#L80

EventHandler<SVGCircleElement, PointerEvent | TouchEvent>

# reconnectOutput

src/window-plug-arrow.tsx#L79

EventHandler<SVGCircleElement, PointerEvent | TouchEvent>

# reconnectStart

src/window-plug-arrow.tsx#L78

# (kind)
# kind

PlugKind

(kind)  =>

EventHandler<SVGCircleElement, PointerEvent | TouchEvent>

# rect

src/window-plug-arrow.tsx#L72

Rect

# state  =  ...

src/window-plug-arrow.tsx#L52

State<WindowPlugArrowElement, {

# Drag  =  'arrowdrag'

src/window-plug-arrow.tsx#L34

"arrowdrag"

# Hold  =  'arrowhold'

src/window-plug-arrow.tsx#L35

"arrowhold"

# Hover  =  'arrowhover'

src/window-plug-arrow.tsx#L36

"arrowhover"

# Idle  =  'arrowidle'

src/window-plug-arrow.tsx#L33

"arrowidle"

}, "arrowidle" | "arrowdrag" | "arrowhold" | "arrowhover"> & EventMethods<WindowPlugArrowElement, {
# arrowdragcancel

CustomEvent<any>

# arrowdragend

CustomEvent<any>

# arrowdragpause

CustomEvent<any>

# arrowdragresume

CustomEvent<any>

# arrowdragstart

CustomEvent<any>

# arrowholdcancel

CustomEvent<any>

# arrowholdend

CustomEvent<any>

# arrowholdpause

CustomEvent<any>

# arrowholdresume

CustomEvent<any>

# arrowholdstart

CustomEvent<any>

# arrowhovercancel

CustomEvent<any>

# arrowhoverend

CustomEvent<any>

# arrowhoverpause

CustomEvent<any>

# arrowhoverresume

CustomEvent<any>

# arrowhoverstart

CustomEvent<any>

# arrowidlecancel

CustomEvent<any>

# arrowidleend

CustomEvent<any>

# arrowidlepause

CustomEvent<any>

# arrowidleresume

CustomEvent<any>

# arrowidlestart

CustomEvent<any>

}> & InlineEventMap<WindowPlugArrowElement, {
# arrowdragcancel

CustomEvent<any>

# arrowdragend

CustomEvent<any>

# arrowdragpause

CustomEvent<any>

# arrowdragresume

CustomEvent<any>

# arrowdragstart

CustomEvent<any>

# arrowholdcancel

CustomEvent<any>

# arrowholdend

CustomEvent<any>

# arrowholdpause

CustomEvent<any>

# arrowholdresume

CustomEvent<any>

# arrowholdstart

CustomEvent<any>

# arrowhovercancel

CustomEvent<any>

# arrowhoverend

CustomEvent<any>

# arrowhoverpause

CustomEvent<any>

# arrowhoverresume

CustomEvent<any>

# arrowhoverstart

CustomEvent<any>

# arrowidlecancel

CustomEvent<any>

# arrowidleend

CustomEvent<any>

# arrowidlepause

CustomEvent<any>

# arrowidleresume

CustomEvent<any>

# arrowidlestart

CustomEvent<any>

}>

# targetState  =  WindowPlugArrowState.Idle

src/window-plug-arrow.tsx#L55

ValuesOf<{

# Drag  =  'arrowdrag'

src/window-plug-arrow.tsx#L34

"arrowdrag"

# Hold  =  'arrowhold'

src/window-plug-arrow.tsx#L35

"arrowhold"

# Hover  =  'arrowhover'

src/window-plug-arrow.tsx#L36

"arrowhover"

# Idle  =  'arrowidle'

src/window-plug-arrow.tsx#L33

"arrowidle"

}>

# viewFrameNormalRect

src/window-plug-arrow.tsx#L68

Rect

# workspace

src/window-plug-arrow.tsx#L59

WorkspaceElement

# zIndex  =  0

src/window-plug-arrow.tsx#L64

number

# created(ctx)

# ctx
Context<WindowPlugArrowElement & JsxContext<WindowPlugArrowElement> & 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/window-plug-arrow.tsx#L82

# $
Context<WindowPlugArrowElement & JsxContext<WindowPlugArrowElement> & 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<WindowPlugArrowElement, LifecycleEvents & WindowPlugArrowEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<WindowPlugArrowElement, keyof WindowPlugArrowElement>

# WindowPlugElement

src/window-plug.tsx#L23

# constructor(args)

# new WindowPlugElement()

WindowPlugElement

# args

any []

# $
Context<WindowPlugElement & JsxContext<WindowPlugElement> & 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">>

# __#2@#offsetHeight

number

# __#2@#offsetLeft

number

# __#2@#offsetTop

number

# __#2@#offsetWidth

number

# connectStart

src/window-plug.tsx#L35

# (cable)
# cable

Cable

(cable)  =>

EventHandler<WindowPlugElement, PointerEvent>

# context

ContextClass<WindowPlugElement & JsxContext<WindowPlugElement> & 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">>

# count  =  1

src/window-plug.tsx#L33

number

# dest

src/window-plug.tsx#L30

ChildOf<WorkspaceWindowElement>

# dispatch

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# host

WindowPlugElement

# onconnectingend

EventHandler<WindowPlugElement, CustomEvent<any>>

# onconnectingmove

EventHandler<WindowPlugElement, CustomEvent<any>>

# onconnectingstart

EventHandler<WindowPlugElement, CustomEvent<any>>

# onmounted

EventHandler<WindowPlugElement, CustomEvent<any>>

# onstatechange

EventHandler<WindowPlugElement, CustomEvent<any>>

# onunmounted

EventHandler<WindowPlugElement, CustomEvent<any>>

# ownRect

Rect

# plug

src/window-plug.tsx#L28

Plug<any, any>

# pos

Point

# rect

Rect

# resize

src/window-plug.tsx#L34

# ()
()  =>

void

# scene

src/window-plug.tsx#L31

WindowPlugSceneElement

# size

Point

# state  =  ...

src/window-plug.tsx#L27

State<WindowPlugElement, {

# Connecting  =  'connecting'

src/window-plug.tsx#L20

string

# Idle  =  'idle'

src/window-plug.tsx#L19

string

}, string> & EventMethods<WindowPlugElement, {}> & InlineEventMap<WindowPlugElement, {}>

# __#2@#updateOffsets()

__#2@#updateOffsets()  =>

void

# created(ctx)

# ctx
Context<WindowPlugElement & JsxContext<WindowPlugElement> & 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/window-plug.tsx#L37

# $
Context<WindowPlugElement & JsxContext<WindowPlugElement> & 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<WindowPlugElement, LifecycleEvents & WindowPlugEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<WindowPlugElement, keyof WindowPlugElement>

# WindowPlugSceneElement

src/window-plug-scene.tsx#L26

# constructor()

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

# new WindowPlugSceneElement()

WindowPlugSceneElement

# $
Context<WindowPlugSceneElement & JsxContext<WindowPlugSceneElement> & 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">>

# PlugArrows  =  ...

src/window-plug-scene.tsx#L33

# ()
()  =>

VKid

# WindowPlugArrow  =  ...

src/window-plug-scene.tsx#L32

Component<WindowPlugArrowElement, HTMLElement>

# addPlug

src/window-plug-scene.tsx#L49

# (plugElement)
# plugElement

WindowPlugElement

(plugElement)  =>

void

# arrows  =  ...

src/window-plug-scene.tsx#L44

ImmMap<Cable, PlugArrow>

# context

ContextClass<WindowPlugSceneElement & JsxContext<WindowPlugSceneElement> & 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">>

# destRects

src/window-plug-scene.tsx#L42

Rect []

# dispatch

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

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

any

>

# draggingWindow  =  false

src/window-plug-scene.tsx#L37

false | WorkspaceWindowElement

# enabled  =  []

src/window-plug-scene.tsx#L55

WindowPlugElement []

# endConnecting

src/window-plug-scene.tsx#L53

# (plugElement)
# plugElement

WindowPlugElement

(plugElement)  =>

void

# endPointerMove

src/window-plug-scene.tsx#L54

# ()
()  =>

void

# holding  =  false

src/window-plug-scene.tsx#L57

false | {

# cable

src/window-plug-scene.tsx#L57

Cable

# dest

src/window-plug-scene.tsx#L57

Point

# plug

src/window-plug-scene.tsx#L57

WindowPlugElement

}

# host

WindowPlugSceneElement

# hovering  =  null

src/window-plug-scene.tsx#L56

null | WindowPlugElement

# onhover

EventHandler<WindowPlugSceneElement, CustomEvent<any>>

# onmounted

EventHandler<WindowPlugSceneElement, CustomEvent<any>>

# onunmounted

EventHandler<WindowPlugSceneElement, CustomEvent<any>>

# options  =  ...

src/window-plug-scene.tsx#L40

WindowPlugSolveOptions

# plugs  =  ...

src/window-plug-scene.tsx#L45

ImmSet<WindowPlugElement>

# plugsMap  =  ...

src/window-plug-scene.tsx#L46

ImmMap<Plug<any, any>, WindowPlugElement>

# removePlug

src/window-plug-scene.tsx#L50

# (plugElement)
# plugElement

WindowPlugElement

(plugElement)  =>

void

# root  =  ...

src/window-plug-scene.tsx#L30

WindowPlugSceneElement

# solve

src/window-plug-scene.tsx#L48

# ()
()  =>

Promise<void>

# startConnecting

src/window-plug-scene.tsx#L52

# (plugElement)
# plugElement

WindowPlugElement

(plugElement)  =>

void

# surface

src/window-plug-scene.tsx#L36

SurfaceElement

# viewRect

src/window-plug-scene.tsx#L41

Rect

# worker  =  ...

src/window-plug-scene.tsx#L39

Agent<WindowPlugWorker, WindowPlugCore>

# workspace

src/window-plug-scene.tsx#L35

WorkspaceElement

# created(ctx)

# ctx
Context<WindowPlugSceneElement & JsxContext<WindowPlugSceneElement> & 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/window-plug-scene.tsx#L59

# $
Context<WindowPlugSceneElement & JsxContext<WindowPlugSceneElement> & 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<WindowPlugSceneElement, LifecycleEvents & WindowPlugSceneEvents [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<WindowPlugSceneElement, keyof WindowPlugSceneElement>

# WindowPlugSolveData

src/types.ts#L10

# destRects

src/types.ts#L12

Rect []

# viewRect

src/types.ts#L11

Rect

# WindowPlugSolveOptions

src/types.ts#L3

# distance

src/types.ts#L6

number

# heuristic

src/types.ts#L7

number

# separation

src/types.ts#L5

number

# step

src/types.ts#L4

number

# WindowPlugArrowEvents

src/window-plug-arrow.tsx#L44

{

# arrowhoverstart
src/window-plug-arrow.tsx#L45
CustomEvent<{

# arrow

src/window-plug-arrow.tsx#L45

WindowPlugArrowElement

}>

}

# WindowPlugEvents

src/window-plug.tsx#L11

{

# connectingend

src/window-plug.tsx#L15

CustomEvent

# connectingmove

src/window-plug.tsx#L14

CustomEvent

# connectingstart

src/window-plug.tsx#L13

CustomEvent

# statechange

src/window-plug.tsx#L12

CustomEvent

}

# WindowPlugSceneEvents

src/window-plug-scene.tsx#L22

{

# hover

src/window-plug-scene.tsx#L23

CustomEvent

}

# WindowPlugArrowState  =  ...

src/window-plug-arrow.tsx#L32

{

# Drag  =  'arrowdrag'

src/window-plug-arrow.tsx#L34

"arrowdrag"

# Hold  =  'arrowhold'

src/window-plug-arrow.tsx#L35

"arrowhold"

# Hover  =  'arrowhover'

src/window-plug-arrow.tsx#L36

"arrowhover"

# Idle  =  'arrowidle'

src/window-plug-arrow.tsx#L33

"arrowidle"

}

# WindowPlugState  =  ...

src/window-plug.tsx#L18

{

# Connecting  =  'connecting'

src/window-plug.tsx#L20

string

# Idle  =  'idle'

src/window-plug.tsx#L19

string

}

Credits

• alice-bob by stagas – transport agnostic strongly typed duplex rpc interfaces
• animatrix by stagas – Create DOM Animations.
• everyday-utils by stagas – Everyday utilities
• find-shortest-path by stagas – Find shortest path between two nodes using A-star search.
• geometrik by stagas – Geometry classes and utils.
• immutable-map-set by stagas – Immutable Map and Set objects
• plugs-and-cables by stagas – Plugs and cables.
• serialize-whatever by stagas – Serialize and deserialize whatever.
• sigl by stagas – Web framework
• x-workspace by stagas – Workspace Web Component.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas