API for rete-area-3d-plugin package - Rete.js

API for rete-area-3d-plugin package

Area3D

index.ts

Signal types produced by Area3DPlugin instance

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

Area3DPlugin

index.ts

Plugin for embedding node editor into 3D scene.

ts
class Area3DPlugin<Schemes extends ExpectSchemes, ExtraSignals extends unknown>
ParameterExtendsDescription
SchemesExpectSchemes
ExtraSignalsunknown

Extends BaseAreaPlugin<Schemes, Area3D | ExtraSignals>

constructor

index.ts

ts
constructor(container: HTMLElement): Area3DPlugin<Schemes, ExtraSignals>
ParameterTypeDescription
containerHTMLElementHTML element to render area in

Returns Area3DPlugin<Schemes, ExtraSignals>

area

index.ts

Area instance, contains nodes, connections and other elements

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

destroy

index.ts

Destroy all views and remove all event listeners

ts
destroy(): void

Returns void

resize

index.ts

Resize node

ts
resize(id: string, width: number, height: number): Promise<undefined | boolean>
ParameterTypeDescription
idstringNode id
widthnumberDesired width
heightnumberDesired height

Returns Promise<undefined | boolean>

share

index.ts

Share the 3D scene with multiple instances of Area3DPlugin

ts
share(): Area3DPlugin<Schemes, ExtraSignals>

Returns Area3DPlugin<Schemes, ExtraSignals> new instance of Area3DPlugin

translate

index.ts

Translate node to position

ts
translate(id: string, position: Position): Promise<undefined | boolean>
ParameterTypeDescription
idstringNode id
positionPositionPosition

Returns Promise<undefined | boolean>

update

index.ts

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

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

Emits render

ParameterTypeDescription
type`"node""connection"
idstringElement id

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

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

ConnectionForm

extensions/forms/connection/index.ts

Options for node form generator

ts
type ConnectionForm = { customize: Function };

NodeForm

extensions/forms/node/index.ts

Options for node form generator

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

comment

extensions/forms/comment.ts

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

ts
comment(scope: ScopeAsParameter<Scope<K, any[]>, [Requires]>): void
ParameterTypeDescription
scopeScopeAsParameter<Scope<K, any[]>, [Requires]>Area3DPlugin instance

Returns void

connection

extensions/forms/connection/index.ts

Form generator for embedding connections into 3D scene.

ts
connection(scope: ScopeAsParameter<Scope<K, E[]>, [{ data: Object, type: "connectionpath" }]>, props: ConnectionForm): void
ParameterTypeDescription
scopeScopeAsParameter<Scope<K, E[]>, [{ data: Object, type: "connectionpath" }]>Area3DPlugin instance
propsConnectionFormOptions for connection form generator

Returns void

createClassicConnectionGeometry

extensions/forms/connection/geometry.ts

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

ts
createClassicConnectionGeometry(path: string, width: number): BufferGeometry<NormalBufferAttributes>
ParameterTypeDescription
pathstringSVG path
widthnumberConnection width

Returns BufferGeometry<NormalBufferAttributes> Connection geometry

createClassicNodeGeometry

extensions/forms/node/geometry.ts

Create classic node geometry

ts
createClassicNodeGeometry(size: Size, params: ClassicNodeOptions): BufferGeometry<NormalBufferAttributes>
ParameterTypeDescription
sizeSizeNode size
paramsClassicNodeOptionsGeometry parameters

Returns BufferGeometry<NormalBufferAttributes> Node geometry

node

extensions/forms/node/index.ts

Form generator for embedding nodes into 3D scene.

ts
node(area: Area3DPlugin<S, K>, props: NodeForm<S>): void
ParameterTypeDescription
areaArea3DPlugin<S, K>Area3DPlugin instance
propsNodeForm<S>Options for node form generator

Returns void

reroute

extensions/forms/reroute.ts

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

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

Returns void

LookAt

extensions/lookAt.ts

Parameters for zoomAt extension

ts
type LookAt = { scale: number };

animate

extensions/animate.ts

Animate the given 3D scene, uses requestAnimationFrame

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

Examples

ts
Area3DExtensions.animate(area)
ts
Area3DExtensions.animate(area, time => console.log(time))
ParameterTypeDescription
areaArea3DPlugin<S, K>The 3D area plugin
tick(time: number) => voidOptional callback to be called on each frame

Returns void

lookAt

extensions/lookAt.ts

Move the camera to look at the given nodes

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

Examples

ts
Area3DExtensions.lookAt(area, [node1, node2])
ts
Area3DExtensions.lookAt(area, [node1, node2], { scale: 0.8 })
ParameterTypeDescription
areaArea3DPlugin<S, K>The 3D area plugin
nodesS["Node"][]The nodes to look at
paramsLookAtThe lookAt parameters

Returns void

Area

area.ts

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

ts
class Area<Scope extends unknown>
ParameterExtendsDescription
Scopeunknown

getCanvas

area.ts

Get the canvas in form of Object3D for the current scope

ts
getCanvas(): undefined | Object3D<Event>

Returns undefined | Object3D<Event>

resize

area.ts

Force resize the container of the 3D scene

ts
resize(event: Event): void
ParameterTypeDescription
eventEventThe resize event

Returns void

setPointerFrom

area.ts

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

ts
setPointerFrom(event: MouseEvent): void
ParameterTypeDescription
eventMouseEvent

Returns void

HybridRenderer

scene/HybridRenderer.ts

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

ts
class HybridRenderer

css3d

scene/HybridRenderer.ts

CSS3DRenderer instance created by default

ts
css3d: CSS3DRenderer;

webgl

scene/HybridRenderer.ts

WebGLRenderer instance created by default

ts
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
ts
class HybridScene<Scope extends unknown>
ParameterExtendsDescription
Scopeunknown

render

scene/index.ts

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

ts
render(): void

Returns void