super-three 0.133.3 → 0.136.0

package/examples/jsm/node-editor/examples/oscillator-color.json

@@ -0,0 +1 @@
+{"objects":{"131":{"x":1602,"y":-3,"width":"300px","elements":[132,134,135,136,137],"id":131,"type":"StandardMaterialEditor"},"132":{"style":"blue","title":"Standard Material","id":132,"type":"TitleElement"},"134":{"inputLength":3,"links":[170],"label":"Color","id":134,"type":"LabelElement"},"135":{"inputLength":1,"label":"Opacity","id":135,"type":"LabelElement"},"136":{"inputLength":1,"label":"Metalness","id":136,"type":"LabelElement"},"137":{"inputLength":1,"label":"Roughness","id":137,"type":"LabelElement"},"143":{"x":123,"y":207,"width":"250px","elements":[144,150,151,148],"id":143,"type":"TimerEditor"},"144":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":144,"type":"TitleElement"},"146":{"value":7.286,"id":146,"type":"NumberInput"},"147":{"value":0.37,"id":147,"type":"NumberInput"},"148":{"inputs":[149],"id":148,"type":"Element"},"149":{"value":"Reset","id":149,"type":"ButtonInput"},"150":{"inputs":[146],"label":"Value","id":150,"type":"LabelElement"},"151":{"inputs":[147],"label":"Scale","id":151,"type":"LabelElement"},"159":{"x":485,"y":94,"width":"250px","elements":[160,164,163],"id":159,"type":"OscillatorEditor"},"160":{"outputLength":1,"title":"Oscillator","id":160,"type":"TitleElement"},"162":{"options":[{"name":"Sine","value":"sine"},{"name":"Square","value":"square"},{"name":"Triangle","value":"triangle"},{"name":"Sawtooth","value":"sawtooth"}],"value":"sine","id":162,"type":"SelectInput"},"163":{"inputLength":1,"links":[144],"label":"Time","id":163,"type":"LabelElement"},"164":{"inputs":[162],"label":"Method","id":164,"type":"LabelElement"},"169":{"x":1208,"y":66,"width":"","elements":[170,172,173,174],"id":169,"type":"BlendEditor"},"170":{"outputLength":3,"title":"Blend","id":170,"type":"TitleElement"},"172":{"inputLength":3,"links":[180],"label":"Base","id":172,"type":"LabelElement"},"173":{"inputLength":3,"links":[200],"label":"Blend","id":173,"type":"LabelElement"},"174":{"inputLength":1,"links":[160],"label":"Opacity","id":174,"type":"LabelElement"},"179":{"x":797,"y":-55,"width":"","elements":[180,187,188,189],"id":179,"type":"ColorEditor"},"180":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":180,"type":"TitleElement"},"182":{"value":16580865,"id":182,"type":"ColorInput"},"183":{"value":"#FD0101","id":183,"type":"StringInput"},"184":{"min":0,"max":1,"step":0.01,"value":0.996,"id":184,"type":"NumberInput"},"185":{"min":0,"max":1,"step":0.01,"value":0.004,"id":185,"type":"NumberInput"},"186":{"min":0,"max":1,"step":0.01,"value":0.004,"id":186,"type":"NumberInput"},"187":{"inputs":[182],"label":"Value","id":187,"type":"LabelElement"},"188":{"inputs":[183],"label":"Hex","id":188,"type":"LabelElement"},"189":{"inputs":[184,185,186],"label":"RGB","id":189,"type":"LabelElement"},"199":{"x":810,"y":220,"width":"","elements":[200,207,208,209],"id":199,"type":"ColorEditor"},"200":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":200,"type":"TitleElement"},"202":{"value":19455,"id":202,"type":"ColorInput"},"203":{"value":"#4BFF00","id":203,"type":"StringInput"},"204":{"min":0,"max":1,"step":0.01,"value":0,"id":204,"type":"NumberInput"},"205":{"min":0,"max":1,"step":0.01,"value":0.298,"id":205,"type":"NumberInput"},"206":{"min":0,"max":1,"step":0.01,"value":1,"id":206,"type":"NumberInput"},"207":{"inputs":[202],"label":"Value","id":207,"type":"LabelElement"},"208":{"inputs":[203],"label":"Hex","id":208,"type":"LabelElement"},"209":{"inputs":[204,205,206],"label":"RGB","id":209,"type":"LabelElement"}},"nodes":[131,143,159,169,179,199],"id":0,"type":"Canvas"}

package/examples/jsm/node-editor/examples/rim.json

@@ -0,0 +1 @@
+{"objects":{"52":{"x":1873,"y":248,"width":"300px","elements":[53,55,56,57,58],"id":52,"type":"StandardMaterialEditor"},"53":{"style":"blue","title":"Standard Material","id":53,"type":"TitleElement"},"55":{"inputLength":3,"links":[103],"label":"Color","id":55,"type":"LabelElement"},"56":{"inputLength":1,"label":"Opacity","id":56,"type":"LabelElement"},"57":{"inputLength":1,"label":"Metalness","id":57,"type":"LabelElement"},"58":{"inputLength":1,"links":[177],"label":"Roughness","id":58,"type":"LabelElement"},"64":{"x":506,"y":328,"width":"200px","elements":[65,67,68],"id":64,"type":"DotEditor"},"65":{"outputLength":1,"title":"Dot Product","id":65,"type":"TitleElement"},"67":{"inputLength":3,"links":[85],"label":"A","id":67,"type":"LabelElement"},"68":{"inputLength":3,"links":[73],"label":"B","id":68,"type":"LabelElement"},"72":{"x":33,"y":453,"width":"300px","elements":[73,78],"id":72,"type":"Vector3Editor"},"73":{"outputLength":3,"title":"Vector 3","icon":"ti ti-box-multiple-3","id":73,"type":"TitleElement"},"75":{"value":0,"id":75,"type":"NumberInput"},"76":{"value":0,"id":76,"type":"NumberInput"},"77":{"value":1.0,"id":77,"type":"NumberInput"},"78":{"inputs":[75,76,77],"label":"Values","id":78,"type":"LabelElement"},"84":{"x":75,"y":278,"width":"250px","elements":[85,88],"id":84,"type":"NormalEditor"},"85":{"outputLength":3,"style":"red","title":"Normal","id":85,"type":"TitleElement"},"87":{"options":[{"name":"Local","value":"local"},{"name":"World","value":"world"},{"name":"View","value":"view"}],"value":"view","id":87,"type":"SelectInput"},"88":{"inputs":[87],"label":"Scope","id":88,"type":"LabelElement"},"92":{"x":846,"y":353,"width":"300px","elements":[93,97,96],"id":92,"type":"InvertEditor"},"93":{"outputLength":1,"title":"Invert / Negate","id":93,"type":"TitleElement"},"95":{"options":[{"name":"Invert ( 1 - Source )","value":"invert"},{"name":"Negate ( - Source )","value":"negate"}],"value":"invert","id":95,"type":"SelectInput"},"96":{"inputLength":1,"links":[65],"label":"Source","id":96,"type":"LabelElement"},"97":{"inputs":[95],"label":"Method","id":97,"type":"LabelElement"},"102":{"x":1459,"y":146,"width":"300px","elements":[103,105,106,107],"id":102,"type":"BlendEditor"},"103":{"outputLength":3,"title":"Blend","id":103,"type":"TitleElement"},"105":{"inputLength":3,"links":[113],"label":"Base","id":105,"type":"LabelElement"},"106":{"inputLength":3,"links":[133],"label":"Blend","id":106,"type":"LabelElement"},"107":{"inputLength":1,"links":[161],"label":"Opacity","id":107,"type":"LabelElement"},"112":{"x":846,"y":17,"width":"300px","elements":[113,120,121,122],"id":112,"type":"ColorEditor"},"113":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":113,"type":"TitleElement"},"115":{"value":5058,"id":115,"type":"ColorInput"},"116":{"value":"#13C200","id":116,"type":"StringInput"},"117":{"min":0,"max":1,"step":0.01,"value":0,"id":117,"type":"NumberInput"},"118":{"min":0,"max":1,"step":0.01,"value":0.075,"id":118,"type":"NumberInput"},"119":{"min":0,"max":1,"step":0.01,"value":0.761,"id":119,"type":"NumberInput"},"120":{"inputs":[115],"label":"Value","id":120,"type":"LabelElement"},"121":{"inputs":[116],"label":"Hex","id":121,"type":"LabelElement"},"122":{"inputs":[117,118,119],"label":"RGB","id":122,"type":"LabelElement"},"132":{"x":844,"y":189,"width":"300px","elements":[133,140,141,142],"id":132,"type":"ColorEditor"},"133":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":133,"type":"TitleElement"},"135":{"value":16711680,"id":135,"type":"ColorInput"},"136":{"value":"#FF0000","id":136,"type":"StringInput"},"137":{"min":0,"max":1,"step":0.01,"value":1,"id":137,"type":"NumberInput"},"138":{"min":0,"max":1,"step":0.01,"value":0,"id":138,"type":"NumberInput"},"139":{"min":0,"max":1,"step":0.01,"value":0,"id":139,"type":"NumberInput"},"140":{"inputs":[135],"label":"Value","id":140,"type":"LabelElement"},"141":{"inputs":[136],"label":"Hex","id":141,"type":"LabelElement"},"142":{"inputs":[137,138,139],"label":"RGB","id":142,"type":"LabelElement"},"160":{"x":1241,"y":361,"width":"200px","elements":[161,163,164],"id":160,"type":"PowerEditor"},"161":{"outputLength":1,"title":"Power","id":161,"type":"TitleElement"},"163":{"inputLength":1,"links":[93],"label":"A","id":163,"type":"LabelElement"},"164":{"inputLength":1,"links":[169],"label":"B","id":164,"type":"LabelElement"},"168":{"x":852,"y":503,"width":"250px","elements":[169,172],"id":168,"type":"FloatEditor"},"169":{"outputLength":1,"title":"Float","icon":"ti ti-box-multiple-1","id":169,"type":"TitleElement"},"171":{"value":1.32,"id":171,"type":"NumberInput"},"172":{"inputs":[171],"label":"Value","id":172,"type":"LabelElement"},"176":{"x":1482,"y":449,"width":"300px","elements":[177,187,183,184,185],"id":176,"type":"SliderEditor"},"177":{"outputLength":1,"title":"Slider","icon":"ti ti-adjustments-horizontal","id":177,"type":"TitleElement"},"179":{"min":0,"max":1,"value":1,"id":179,"type":"SliderInput"},"181":{"value":0,"id":181,"type":"NumberInput"},"182":{"value":1,"id":182,"type":"NumberInput"},"183":{"inputs":[181],"label":"Min.","id":183,"type":"LabelElement"},"184":{"inputs":[182],"label":"Max.","id":184,"type":"LabelElement"},"185":{"inputs":[186],"id":185,"type":"Element"},"186":{"value":"More","id":186,"type":"ButtonInput"},"187":{"inputs":[179],"label":"Value","id":187,"type":"LabelElement"}},"nodes":[52,64,72,84,92,102,112,132,160,168,176],"id":0,"type":"Canvas"}

package/examples/jsm/node-editor/inputs/ColorEditor.js

@@ -0,0 +1,91 @@
+import { ObjectNode, ColorInput, StringInput, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { ColorNode } from '../../renderers/nodes/Nodes.js';
+
+export class ColorEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new ColorNode();
+
+		super( 'Color', 1, node );
+
+		this.title.setIcon( 'ti ti-palette' );
+
+		const updateFields = ( editing ) => {
+
+			const value = node.value;
+			const hexValue = value.getHex();
+
+			if ( editing !== 'color' ) {
+
+				field.setValue( hexValue, false );
+
+			}
+
+			if ( editing !== 'hex' ) {
+
+				hexField.setValue( '#' + hexValue.toString( 16 ).toUpperCase().padEnd( 6, '0' ), false );
+
+			}
+
+			if ( editing !== 'rgb' ) {
+
+				fieldR.setValue( value.r.toFixed( 3 ), false );
+				fieldG.setValue( value.g.toFixed( 3 ), false );
+				fieldB.setValue( value.b.toFixed( 3 ), false );
+
+			}
+
+		};
+
+		const field = new ColorInput( 0xFFFFFF ).onChange( () => {
+
+			node.value.setHex( field.getValue() );
+
+			updateFields( 'picker' );
+
+		} );
+
+		const hexField = new StringInput().onChange( () => {
+
+			const value = hexField.getValue();
+
+			if ( value.indexOf( '#' ) === 0 ) {
+
+				const hexStr = value.substr( 1 ).padEnd( 6, '0' );
+
+				node.value.setHex( parseInt( hexStr, 16 ) );
+
+				updateFields( 'hex' );
+
+			}
+
+		} );
+
+		hexField.addEventListener( 'blur', () => {
+
+			updateFields();
+
+		} );
+
+		const onChangeRGB = () => {
+
+			node.value.setRGB( fieldR.getValue(), fieldG.getValue(), fieldB.getValue() );
+
+			updateFields( 'rgb' );
+
+		};
+
+		const fieldR = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
+		const fieldG = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
+		const fieldB = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
+
+		this.add( new LabelElement( 'Value' ).add( field ).setSerializable( false ) )
+			.add( new LabelElement( 'Hex' ).add( hexField ).setSerializable( false ) )
+			.add( new LabelElement( 'RGB' ).add( fieldR ).add( fieldG ).add( fieldB ) );
+
+		updateFields();
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/FloatEditor.js

@@ -0,0 +1,24 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { FloatNode } from '../../renderers/nodes/Nodes.js';
+
+export class FloatEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new FloatNode();
+
+		super( 'Float', 1, node, 250 );
+
+		this.title.setIcon( 'ti ti-box-multiple-1' );
+
+		const field = new NumberInput().onChange( () => {
+
+			node.value = field.getValue();
+
+		} );
+
+		this.add( new LabelElement( 'Value' ).add( field ) );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/SliderEditor.js

@@ -0,0 +1,68 @@
+import { ObjectNode, ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { FloatNode } from '../../renderers/nodes/Nodes.js';
+
+export class SliderEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new FloatNode();
+
+		super( 'Slider', 1, node );
+
+		this.title.setIcon( 'ti ti-adjustments-horizontal' );
+
+		this.collapse = true;
+
+		const field = new SliderInput( 0, 0, 1 ).onChange( () => {
+
+			node.value = field.getValue();
+
+		} );
+
+		const updateRange = () => {
+
+			const min = minInput.getValue();
+			const max = maxInput.getValue();
+
+			if ( min <= max ) {
+
+				field.setRange( min, max );
+
+			} else {
+
+				maxInput.setValue( min );
+
+			}
+
+		};
+
+		const minInput = new NumberInput().onChange( updateRange );
+		const maxInput = new NumberInput( 1 ).onChange( updateRange );
+
+		const minElement = new LabelElement( 'Min.' ).add( minInput ).setVisible( false );
+		const maxElement = new LabelElement( 'Max.' ).add( maxInput ).setVisible( false );
+
+		const moreElement = new Element().add( new ButtonInput( 'More' ).onClick( () => {
+
+			minElement.setVisible( true );
+			maxElement.setVisible( true );
+			moreElement.setVisible( false );
+
+		} ) ).setSerializable( false );
+
+		this.add( new LabelElement( 'Value' ).add( field ) )
+			.add( minElement )
+			.add( maxElement )
+			.add( moreElement );
+
+		this.onBlur( () => {
+
+			minElement.setVisible( false );
+			maxElement.setVisible( false );
+			moreElement.setVisible( true );
+
+		} );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/Vector2Editor.js

@@ -0,0 +1,28 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { Vector2Node } from '../../renderers/nodes/Nodes.js';
+
+export class Vector2Editor extends ObjectNode {
+
+	constructor() {
+
+		const node = new Vector2Node();
+
+		super( 'Vector 2', 2, node );
+
+		this.title.setIcon( 'ti ti-box-multiple-2' );
+
+		const onUpdate = () => {
+
+			node.value.x = fieldX.getValue();
+			node.value.y = fieldY.getValue();
+
+		};
+
+		const fieldX = new NumberInput().onChange( onUpdate );
+		const fieldY = new NumberInput().onChange( onUpdate );
+
+		this.add( new LabelElement( 'Values' ).add( fieldX ).add( fieldY ) );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/Vector3Editor.js

@@ -0,0 +1,30 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { Vector3Node } from '../../renderers/nodes/Nodes.js';
+
+export class Vector3Editor extends ObjectNode {
+
+	constructor() {
+
+		const node = new Vector3Node();
+
+		super( 'Vector 3', 3, node );
+
+		this.title.setIcon( 'ti ti-box-multiple-3' );
+
+		const onUpdate = () => {
+
+			node.value.x = fieldX.getValue();
+			node.value.y = fieldY.getValue();
+			node.value.z = fieldZ.getValue();
+
+		};
+
+		const fieldX = new NumberInput().onChange( onUpdate );
+		const fieldY = new NumberInput().onChange( onUpdate );
+		const fieldZ = new NumberInput().onChange( onUpdate );
+
+		this.add( new LabelElement( 'Values' ).add( fieldX ).add( fieldY ).add( fieldZ ) );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/Vector4Editor.js

@@ -0,0 +1,37 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { Vector4Node } from '../../renderers/nodes/Nodes.js';
+
+export class Vector4Editor extends ObjectNode {
+
+	constructor() {
+
+		const node = new Vector4Node();
+
+		super( 'Vector 4', 4, node );
+
+		this.title.setIcon( 'ti ti-box-multiple-4' );
+
+		const onUpdate = () => {
+
+			node.value.x = fieldX.getValue();
+			node.value.y = fieldY.getValue();
+			node.value.z = fieldZ.getValue();
+			node.value.w = fieldW.getValue();
+
+		};
+
+		const fieldX = new NumberInput().onChange( onUpdate );
+		const fieldY = new NumberInput().onChange( onUpdate );
+		const fieldZ = new NumberInput().onChange( onUpdate );
+		const fieldW = new NumberInput().onChange( onUpdate );
+
+		this.add( new LabelElement( 'Values' )
+			.add( fieldX )
+			.add( fieldY )
+			.add( fieldZ )
+			.add( fieldW )
+		);
+
+	}
+
+}

package/examples/jsm/node-editor/materials/StandardMaterialEditor.js

@@ -0,0 +1,108 @@
+import { ObjectNode, ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { MeshStandardNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import * as THREE from 'three';
+
+export class StandardMaterialEditor extends ObjectNode {
+
+	constructor() {
+
+		const material = new MeshStandardNodeMaterial();
+
+		super( 'Standard Material', 0, material );
+
+		this.title.setStyle( 'blue' );
+
+		this.setWidth( 300 );
+
+		const color = new LabelElement( 'color' ).setInput( 3 );
+		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
+		const metalness = new LabelElement( 'metalness' ).setInput( 1 );
+		const roughness = new LabelElement( 'roughness' ).setInput( 1 );
+
+		color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
+
+			material.color.setHex( input.getValue() );
+
+		} ) );
+
+		opacity.add( new SliderInput( material.opacity, 0, 1 ).onChange( ( input ) => {
+
+			material.opacity = input.getValue();
+
+			this.updateTransparent();
+
+		} ) );
+
+		metalness.add( new SliderInput( material.metalness, 0, 1 ).onChange( ( input ) => {
+
+			material.metalness = input.getValue();
+
+		} ) );
+
+		roughness.add( new SliderInput( material.roughness, 0, 1 ).onChange( ( input ) => {
+
+			material.roughness = input.getValue();
+
+		} ) );
+
+		color.onConnect( () => this.update(), true );
+		opacity.onConnect( () => this.update(), true );
+		metalness.onConnect( () => this.update(), true );
+		roughness.onConnect( () => this.update(), true );
+
+		this.add( color )
+			.add( opacity )
+			.add( metalness )
+			.add( roughness );
+
+		this.color = color;
+		this.opacity = opacity;
+		this.metalness = metalness;
+		this.roughness = roughness;
+
+		this.material = material;
+
+		this.update();
+
+	}
+
+	update() {
+
+		const { material, color, opacity, roughness, metalness } = this;
+
+		color.setEnabledInputs( ! color.linkedExtra );
+		opacity.setEnabledInputs( ! opacity.linkedExtra );
+		roughness.setEnabledInputs( ! roughness.linkedExtra );
+		metalness.setEnabledInputs( ! metalness.linkedExtra );
+
+		material.colorNode = color.linkedExtra;
+
+		material.opacityNode = opacity.linkedExtra || null;
+
+		material.metalnessNode = metalness.linkedExtra;
+		material.roughnessNode = roughness.linkedExtra;
+
+		material.dispose();
+
+		this.updateTransparent();
+
+		// TODO: Fix on NodeMaterial System
+		material.customProgramCacheKey = () => {
+
+			return THREE.MathUtils.generateUUID();
+
+		};
+
+	}
+
+	updateTransparent() {
+
+		const { material, opacity } = this;
+
+		material.transparent = opacity.linkedExtra || material.opacity < 1 ? true : false;
+
+		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
+
+	}
+
+}

package/examples/jsm/node-editor/math/DotEditor.js

@@ -0,0 +1,36 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class DotEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.DOT, NULL_VALUE, NULL_VALUE );
+
+		super( 'Dot Product', 1, node );
+
+		this.setWidth( 200 );
+
+		const aElement = new LabelElement( 'A' ).setInput( 3 );
+		const bElement = new LabelElement( 'B' ).setInput( 3 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/InvertEditor.js

@@ -0,0 +1,38 @@
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_VALUE = new FloatNode();
+
+export class InvertEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.INVERT, DEFAULT_VALUE );
+
+		super( 'Invert / Negate', 1, node );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Invert ( 1 - Source )', value: MathNode.INVERT },
+			{ name: 'Negate ( - Source )', value: MathNode.NEGATE }
+		] ).onChange( () => {
+
+			node.method = optionsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const input = new LabelElement( 'Source' ).setInput( 1 );
+
+		input.onConnect( () => {
+
+			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+
+		} );
+
+		this.add( new LabelElement( 'Method' ).add( optionsField ) )
+			.add( input );
+
+	}
+
+}

package/examples/jsm/node-editor/math/LimiterEditor.js

@@ -0,0 +1,48 @@
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class LimiterEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.MAX, NULL_VALUE, NULL_VALUE );
+
+		super( 'Limiter', 1, node, 250 );
+
+		const methodInput = new SelectInput( [
+			{ name: 'Max', value: MathNode.MAX },
+			{ name: 'Min', value: MathNode.MIN }
+		] );
+
+		methodInput.onChange( ( data ) => {
+
+			node.method = data.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const aElement = new LabelElement( 'A' ).setInput( 1 );
+		const bElement = new LabelElement( 'B' ).setInput( 1 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( new LabelElement( 'Method' ).add( methodInput ) )
+			.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/NormalizeEditor.js

@@ -0,0 +1,26 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_VALUE = new Vector3Node();
+
+export class NormalizeEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.NORMALIZE, DEFAULT_VALUE );
+
+		super( 'Normalize', 3, node, 200 );
+
+		const input = new LabelElement( 'Source' ).setInput( 3 );
+
+		input.onConnect( () => {
+
+			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+
+		} );
+
+		this.add( input );
+
+	}
+
+}

package/examples/jsm/node-editor/math/OperatorEditor.js

@@ -0,0 +1,50 @@
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { OperatorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class OperatorEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new OperatorNode( '+', NULL_VALUE, NULL_VALUE );
+
+		super( 'Operator', 1, node, 250 );
+
+		const opInput = new SelectInput( [
+			{ name: '+ Addition', value: '+' },
+			{ name: '- Subtraction', value: '-' },
+			{ name: '* Multiplication', value: '*' },
+			{ name: '/ Division', value: '/' }
+		] );
+
+		opInput.onChange( ( data ) => {
+
+			node.op = data.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const aElement = new LabelElement( 'A' ).setInput( 3 );
+		const bElement = new LabelElement( 'B' ).setInput( 3 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( new LabelElement( 'Operator' ).add( opInput ) )
+			.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/PowerEditor.js

@@ -0,0 +1,34 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class PowerEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.POW, NULL_VALUE, NULL_VALUE );
+
+		super( 'Power', 1, node, 200 );
+
+		const aElement = new LabelElement( 'A' ).setInput( 1 );
+		const bElement = new LabelElement( 'B' ).setInput( 1 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( aElement )
+			.add( bElement );
+
+	}
+
+}