API for `rete-area-plugin` package

BaseArea

A union of all possible signals that can be emitted by any area plugin

type BaseArea<Schemes extends BaseSchemes> =
  | { data: Object; type: "nodepicked" }
  | { data: Schemes["Node"]; type: "nodedragged" }
  | { data: Object & NodeTranslateEventParams; type: "nodetranslate" }
  | { data: Object & NodeTranslateEventParams; type: "nodetranslated" }
  | { data: Object; type: "contextmenu" }
  | { data: Object; type: "pointerdown" }
  | { data: Object; type: "pointermove" }
  | { data: Object; type: "pointerup" }
  | { data: Object & NodeResizeEventParams; type: "noderesize" }
  | { data: Object & NodeResizeEventParams; type: "noderesized" }
  | RenderSignal<"node", { payload: Schemes["Node"] }>
  | RenderSignal<
      "connection",
      { end: Position; payload: Schemes["Connection"]; start: Position }
    >
  | { data: Object; type: "unmount" }
  | { data: Object; type: "reordered" };

Parameter	Extends	Description
Schemes	`BaseSchemes`

Area2D

src/index.ts

A union of all possible signals that can be emitted by the area

type Area2D<Schemes extends BaseSchemes> =
  | BaseArea<Schemes>
  | { data: TranslateEventParams; type: "translate" }
  | { data: TranslateEventParams; type: "translated" }
  | { data: ZoomEventParams; type: "zoom" }
  | { data: ZoomEventParams; type: "zoomed" }
  | { data: Object; type: "resized" };

Parameter	Extends	Description
Schemes	`BaseSchemes`

AreaPlugin

src/index.ts

A plugin that provides a 2D area for nodes and connections

class AreaPlugin<Schemes extends BaseSchemes, ExtraSignals extends unknown>

Parameter	Extends	Description
Schemes	`BaseSchemes`
ExtraSignals	`unknown`

Extends BaseAreaPlugin<Schemes, Area2D | ExtraSignals>

Emits render rendered unmount

Listens nodecreated noderemoved connectioncreated connectionremoved

destroy

src/index.ts

Destroy all views and remove all event listeners

destroy(): void

Returns void

resize

src/index.ts

Resize node

resize(id: string, width: number, height: number): Promise<undefined | boolean>

Parameter	Type	Description
id	`string`	Node id
width	`number`	Desired width
height	`number`	Desired height

Returns Promise<undefined | boolean>

translate

src/index.ts

Translate node to position

translate(id: string, position: Position): Promise<undefined | boolean>

Parameter	Type	Description
id	`string`	Node id
position	`Position`	Position

Returns Promise<undefined | boolean>

update

src/index.ts

Force update rendered element by id (node, connection, etc.)

update(type: "node" | "connection" | GetRenderTypes<ExtraSignals>, id: string): Promise<void>

Emits render

Parameter	Type	Description
type	`"node"	"connection"
id	`string`	Element id

Returns Promise<void>

AreaExtensions

src/extensions/index.ts

Area extensions

Selector

src/extensions/selectable.ts

Selector class. Used to collect selected entities (nodes, connections, etc.) and synchronize them (select, unselect, translate, etc.). Can be extended to add custom functionality.

class Selector<E extends SelectorEntity>

Parameter	Extends	Description
E	`SelectorEntity`

Restrictor

src/extensions/restrictor.ts

Restrictor extension parameters

type Restrictor = {
  scaling: ScaleRange | Function | boolean;
  translation: TranslateRange | Function | boolean;
};

SnapGrid

src/extensions/snap.ts

Snap grid extension parameters

type SnapGrid = { dynamic: boolean; size: number };

ZoomAt

src/extensions/zoom-at.ts

Zoom extension parameters

type ZoomAt = { scale: number };

accumulateOnCtrl

src/extensions/selectable.ts

Selector's accumulate function, activated when the ctrl key is pressed

accumulateOnCtrl(): { active: unknown, destroy: unknown }

Returns { active: unknown, destroy: unknown }

getBoundingBox

src/extensions/bounding-box.ts

Get the bounding box of the given nodes

getBoundingBox(plugin: BaseAreaPlugin<Schemes, K>, nodes: NodeRef<Schemes>[]): { bottom: number, center: Object, height: number, left: number, right: number, top: number, width: number }

Parameter	Type	Description
plugin	`BaseAreaPlugin<Schemes, K>`	The area plugin
nodes	`NodeRef<Schemes>[]`	The nodes to get the bounding box of

Returns { bottom: number, center: Object, height: number, left: number, right: number, top: number, width: number } The bounding box

restrictor

src/extensions/restrictor.ts

Restrictor extension. Restricts the area zoom and position

restrictor(plugin: AreaPlugin<Schemes, K>, params: Restrictor): void

Listens zoom zoomed translated

Parameter	Type	Description
plugin	`AreaPlugin<Schemes, K>`	The area plugin
params	`Restrictor`	The restrictor parameters

Returns void

selectableNodes

src/extensions/selectable.ts

Selectable nodes extension. Adds the ability to select nodes in the area.

selectableNodes(base: BaseAreaPlugin<Schemes, T>, core: Selector<SelectorEntity>, options: { accumulating: Accumulating }): { select: Function, unselect: Function }

Listens nodepicked nodetranslated pointerdown pointermove pointerup

Parameter	Type	Description
base	`BaseAreaPlugin<Schemes, T>`	BaseAreaPlugin instance
core	`Selector<SelectorEntity>`	Selectable instance
options	`{ accumulating: Accumulating }`

Returns { select: Function, unselect: Function }

selector

src/extensions/selectable.ts

Selector factory, uses default Selector class

selector(): Selector<E>

Returns Selector<E> Selector instance

showInputControl

src/extensions/show-input-control.ts

Show input control extension. It will show the input's control when there is no connection and hide it when there is a connection.

showInputControl(area: BaseAreaPlugin<BaseSchemes, any>, visible: Visible<S>): void

Listens connectioncreated connectionremoved

Parameter	Type	Description
area	`BaseAreaPlugin<BaseSchemes, any>`	The base area plugin
visible	`Visible<S>`	The visible function

Returns void

simpleNodesOrder

src/extensions/order.ts

Simple nodes order extension

simpleNodesOrder(base: BaseAreaPlugin<Schemes, T>): void

Listens nodepicked connectioncreated

Parameter	Type	Description
base	`BaseAreaPlugin<Schemes, T>`	The base area plugin

Returns void

snapGrid

src/extensions/snap.ts

Snap grid extension

snapGrid(base: BaseAreaPlugin<Schemes, K>, params: SnapGrid): void

Listens nodetranslate nodedragged

Parameter	Type	Description
base	`BaseAreaPlugin<Schemes, K>`	The base area plugin
params	`SnapGrid`	The snap parameters

Returns void

zoomAt

src/extensions/zoom-at.ts

Zooms the area to fit the given nodes

zoomAt(plugin: AreaPlugin<Schemes, K>, nodes: NodeRef<Schemes>[], params: ZoomAt): Promise<void>

Parameter	Type	Description
plugin	`AreaPlugin<Schemes, K>`	The area plugin
nodes	`NodeRef<Schemes>[]`	The nodes to fit
params	`ZoomAt`	The zoom parameters

Returns Promise<void>

BaseAreaPlugin

src/base.ts

Base abstract class for area plugins that provides a common interface

class BaseAreaPlugin<Schemes extends BaseSchemes, Signals extends unknown>

Parameter	Extends	Description
Schemes	`BaseSchemes`
Signals	`unknown`

Extended by AreaPlugin

Extends Scope<Signals, Root>

Drag

src/drag.ts

Drag handler, used to handle dragging of the area and nodes. Can be extended to add custom behavior.

class Drag

Zoom

src/zoom.ts

Zoom class, used to handle zooming of the area. Can be extended to add custom behavior.

class Zoom

usePointerListener

src/utils.ts

listen to pointerdown, window's pointermove and pointerup events, where last two not active before pointerdown triggered for performance reasons

usePointerListener(element: HTMLElement, handlers: PointerListenerHandlers): PointerListener

Parameter	Type	Description
element	`HTMLElement`
handlers	`PointerListenerHandlers`

Returns PointerListener

Documentation

API for rete-area-plugin package

API for `rete-area-plugin` package