API for rete-area-3d-plugin package

Area3D

index.ts

Signal types produced by Area3DPlugin instance

type Area3D<Schemes extends ExpectSchemes> =
  | BaseArea<Schemes>
  | { data: TransformEventParams; type: "transform" }
  | { data: TransformEventParams; type: "transformed" }
  | { data: Object; type: "resized" };

Area3DPlugin

index.ts

Plugin for embedding node editor into 3D scene.

class Area3DPlugin<Schemes extends ExpectSchemes, ExtraSignals extends unknown>

Extends BaseAreaPlugin<Schemes, Area3D | ExtraSignals>

constructor

index.ts

constructor(container: HTMLElement): Area3DPlugin<Schemes, ExtraSignals>

Returns Area3DPlugin<Schemes, ExtraSignals>

area

index.ts

Area instance, contains nodes, connections and other elements

area: Area<Area3DPlugin<Schemes, ExtraSignals>>;

destroy

index.ts

Destroy all views and remove all event listeners

destroy(): void

Returns void

resize

index.ts

Resize node

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

Returns Promise<undefined | boolean>

share

index.ts

Share the 3D scene with multiple instances of Area3DPlugin

share(): Area3DPlugin<Schemes, ExtraSignals>

Returns Area3DPlugin<Schemes, ExtraSignals> new instance of Area3DPlugin

translate

index.ts

Translate node to position

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

Returns Promise<undefined | boolean>

update

index.ts

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

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

Emits render

Returns Promise<void>

Area3DExtensions

extensions/index.ts

Area 3D extensions. These extensions are specific to the 3D area and provide additional functionality, while many of rete-area-plugin's extensions are also available for this plugin.

forms

extensions/forms/index.ts

Group of functions to replicate forms. This extension provides a functions for generating geometry that replicates the form of HTML elements embedded in the scene.

ClassicNodeOptions

extensions/forms/node/geometry.ts

Classic node geometry parameters

type ClassicNodeOptions = {
  borderRadius: number;
  inputsOffset: number;
  outputsOffset: number;
  socketMargin: number;
  socketRadius: number;
};

ConnectionForm

extensions/forms/connection/index.ts

Options for node form generator

type ConnectionForm = { customize: Function };

NodeForm

extensions/forms/node/index.ts

Options for node form generator

type NodeForm<S extends ExpectSchemes> = { customize: Function };

comment

extensions/forms/comment.ts

Form generator for embedding rete-comment-plugin into 3D scene.

comment(scope: ScopeAsParameter<Scope<K, any[]>, [Requires]>): void

Returns void

connection

extensions/forms/connection/index.ts

Form generator for embedding connections into 3D scene.

connection(scope: ScopeAsParameter<Scope<K, E[]>, [{ data: Object, type: "connectionpath" }]>, props: ConnectionForm): void

Returns void

createClassicConnectionGeometry

extensions/forms/connection/geometry.ts

Create geometry for classic connection. Can be used in customize option.

createClassicConnectionGeometry(path: string, width: number): BufferGeometry

Returns BufferGeometry Connection geometry

createClassicNodeGeometry

extensions/forms/node/geometry.ts

Create classic node geometry

createClassicNodeGeometry(size: Size, params: ClassicNodeOptions): BufferGeometry

Returns BufferGeometry Node geometry

node

extensions/forms/node/index.ts

Form generator for embedding nodes into 3D scene.

node(area: Area3DPlugin<S, K>, props: NodeForm<S>): void

Returns void

reroute

extensions/forms/reroute.ts

Form generator for embedding rete-connection-reroute-plugin into 3D scene.

reroute(scope: ScopeAsParameter<Scope<K, [Root<S>]>, [RenderSignal<"reroute-pins", { data: PinData }>]>): void

Returns void

LookAt

extensions/lookAt.ts

Parameters for zoomAt extension

type LookAt = { scale: number };

animate

extensions/animate.ts

Animate the given 3D scene, uses requestAnimationFrame

animate(area: Area3DPlugin<S, K>, tick: (time: number) => void): void

Examples

Area3DExtensions.animate(area)

Area3DExtensions.animate(area, time => console.log(time))

Returns void

lookAt

extensions/lookAt.ts

Move the camera to look at the given nodes

lookAt(area: Area3DPlugin<S, K>, nodes: S["Node"][], params: LookAt): void

Examples

Area3DExtensions.lookAt(area, [node1, node2])

Area3DExtensions.lookAt(area, [node1, node2], { scale: 0.8 })

Returns void

Area

area.ts

Area class is responsible for managing 3D scene for a current editor

class Area<Scope extends unknown>

getCanvas

area.ts

Get the canvas in form of Object3D for the current scope

getCanvas(): undefined | Object3D<Object3DEventMap>

Returns undefined | Object3D<Object3DEventMap>

resize

area.ts

Force resize the container of the 3D scene

resize(event: Event): void

Returns void

setPointerFrom

area.ts

Set the pointer position from the given mouse event into the pointer property

setPointerFrom(event: MouseEvent): void

Returns void

HybridRenderer

scene/HybridRenderer.ts

HybridRenderer is a wrapper for Three.js CSS3DRenderer and WebGLRenderer.

class HybridRenderer

css3d

scene/HybridRenderer.ts

CSS3DRenderer instance created by default

css3d: CSS3DRenderer;

webgl

scene/HybridRenderer.ts

WebGLRenderer instance created by default

webgl: WebGLRenderer;

HybridScene

scene/index.ts

HybridScene is a wrapper for Three.js Scene with some additional features such as:

• drag controls
• orbit controls
• camera
• renderer

class HybridScene<Scope extends unknown>

render

scene/index.ts

Render the frame. Can be directly used instead of animate extension.

render(): void

Returns void