rete-area-3d-plugin
packageSignal types produced by Area3DPlugin instance
type Area3D<Schemes extends ExpectSchemes> =
| BaseArea<Schemes>
| { data: TransformEventParams; type: "transform" }
| { data: TransformEventParams; type: "transformed" }
| { data: Object; type: "resized" };
Parameter | Extends | Description |
---|---|---|
Schemes | ExpectSchemes |
Plugin for embedding node editor into 3D scene.
class Area3DPlugin<Schemes extends ExpectSchemes, ExtraSignals extends unknown>
Parameter | Extends | Description |
---|---|---|
Schemes | ExpectSchemes | |
ExtraSignals | unknown |
Extends BaseAreaPlugin<Schemes, Area3D
constructor(container: HTMLElement): Area3DPlugin<Schemes, ExtraSignals>
Parameter | Type | Description |
---|---|---|
container | HTMLElement | HTML element to render area in |
Returns Area3DPlugin<Schemes, ExtraSignals>
Area instance, contains nodes, connections and other elements
area: Area<Area3DPlugin<Schemes, ExtraSignals>>;
Destroy all views and remove all event listeners
destroy(): void
Returns void
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>
Share the 3D scene with multiple instances of Area3DPlugin
share(): Area3DPlugin<Schemes, ExtraSignals>
Returns Area3DPlugin<Schemes, ExtraSignals>
new instance of Area3DPlugin
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>
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>
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.
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.
extensions/forms/node/geometry.ts
Classic node geometry parameters
type ClassicNodeOptions = {
borderRadius: number;
inputsOffset: number;
outputsOffset: number;
socketMargin: number;
socketRadius: number;
};
extensions/forms/connection/index.ts
Options for node form generator
type ConnectionForm = { customize: Function };
extensions/forms/node/index.ts
Options for node form generator
type NodeForm<S extends ExpectSchemes> = { customize: Function };
Parameter | Extends | Description |
---|---|---|
S | ExpectSchemes |
Form generator for embedding rete-comment-plugin into 3D scene.
comment(scope: ScopeAsParameter<Scope<K, any[]>, [Requires]>): void
Parameter | Type | Description |
---|---|---|
scope | ScopeAsParameter<Scope<K, any[]>, [Requires]> | Area3DPlugin instance |
Returns void
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
Parameter | Type | Description |
---|---|---|
scope | ScopeAsParameter<Scope<K, E[]>, [{ data: Object, type: "connectionpath" }]> | Area3DPlugin instance |
props | ConnectionForm | Options for connection form generator |
Returns void
extensions/forms/connection/geometry.ts
Create geometry for classic connection.
Can be used in customize
option.
createClassicConnectionGeometry(path: string, width: number): BufferGeometry<NormalBufferAttributes>
Parameter | Type | Description |
---|---|---|
path | string | SVG path |
width | number | Connection width |
Returns BufferGeometry<NormalBufferAttributes>
Connection geometry
extensions/forms/node/geometry.ts
Create classic node geometry
createClassicNodeGeometry(size: Size, params: ClassicNodeOptions): BufferGeometry<NormalBufferAttributes>
Parameter | Type | Description |
---|---|---|
size | Size | Node size |
params | ClassicNodeOptions | Geometry parameters |
Returns BufferGeometry<NormalBufferAttributes>
Node geometry
extensions/forms/node/index.ts
Form generator for embedding nodes into 3D scene.
node(area: Area3DPlugin<S, K>, props: NodeForm<S>): void
Parameter | Type | Description |
---|---|---|
area | Area3DPlugin<S, K> | Area3DPlugin instance |
props | NodeForm<S> | Options for node form generator |
Returns void
Form generator for embedding rete-connection-reroute-plugin into 3D scene.
reroute(scope: ScopeAsParameter<Scope<K, [Root<S>]>, [RenderSignal<"reroute-pins", { data: PinData }>]>): void
Parameter | Type | Description |
---|---|---|
scope | ScopeAsParameter<Scope<K, [Root<S>]>, [RenderSignal<"reroute-pins", { data: PinData }>]> | Area3DPlugin instance |
Returns void
Parameters for zoomAt
extension
type LookAt = { scale: number };
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))
Parameter | Type | Description |
---|---|---|
area | Area3DPlugin<S, K> | The 3D area plugin |
tick | (time: number) => void | Optional callback to be called on each frame |
Returns void
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 })
Parameter | Type | Description |
---|---|---|
area | Area3DPlugin<S, K> | The 3D area plugin |
nodes | S["Node"][] | The nodes to look at |
params | LookAt | The lookAt parameters |
Returns void
Area class is responsible for managing 3D scene for a current editor
class Area<Scope extends unknown>
Parameter | Extends | Description |
---|---|---|
Scope | unknown |
Get the canvas in form of Object3D for the current scope
getCanvas(): undefined | Object3D<Event>
Returns undefined | Object3D<Event>
Force resize the container of the 3D scene
resize(event: Event): void
Parameter | Type | Description |
---|---|---|
event | Event | The resize event |
Returns void
Set the pointer position from the given mouse event into the pointer
property
setPointerFrom(event: MouseEvent): void
Parameter | Type | Description |
---|---|---|
event | MouseEvent |
Returns void
HybridRenderer is a wrapper for Three.js CSS3DRenderer and WebGLRenderer.
class HybridRenderer
CSS3DRenderer instance created by default
css3d: CSS3DRenderer;
WebGLRenderer instance created by default
webgl: WebGLRenderer;
HybridScene is a wrapper for Three.js Scene with some additional features such as:
class HybridScene<Scope extends unknown>
Parameter | Extends | Description |
---|---|---|
Scope | unknown |
Render the frame. Can be directly used instead of animate
extension.
render(): void
Returns void