@plastic-software/three 0.183.4 → 0.184.1

package/examples/jsm/inspector/extensions/tsl-graph/TSLGraphEditor.js

@@ -0,0 +1,916 @@
+import { Raycaster, Vector2, BoxHelper, error, warn } from 'three/webgpu';
+import { Extension } from 'three/addons/inspector/Extension.js';
+import { TSLGraphLoader } from './TSLGraphLoader.js';
+
+const HOST_SOURCE = 'tsl-graph-host';
+const EDITOR_SOURCE = 'tsl-graph-editor';
+
+const _resposeByCommand = {
+	'tsl:command:get-code': 'tsl:response:get-code',
+	'tsl:command:set-root-material': 'tsl:response:set-root-material',
+	'tsl:command:get-graph': 'tsl:response:get-graph',
+	'tsl:command:load': 'tsl:response:load',
+	'tsl:command:clear-graph': 'tsl:response:clear-graph'
+};
+
+const _refMaterials = new WeakMap();
+
+class TSLGraphEditor extends Extension {
+
+	constructor( options = {} ) {
+
+		super( 'TSL Graph', options );
+
+		const editorUrl = new URL( 'https://www.tsl-graph.xyz/editor/standalone' );
+		editorUrl.searchParams.set( 'graphs', 'material' );
+		editorUrl.searchParams.set( 'targetOrigin', '*' );
+
+		// UI Setup
+		this.content.style.display = 'flex';
+		this.content.style.flexDirection = 'column';
+		this.content.style.position = 'relative';
+
+		const headerDiv = document.createElement( 'div' );
+		headerDiv.style.padding = '4px';
+		headerDiv.style.backgroundColor = 'var(--profiler-header-bg, #2a2a33aa)';
+		headerDiv.style.borderBottom = '1px solid var(--profiler-border, #4a4a5a)';
+		headerDiv.style.display = 'flex';
+		headerDiv.style.justifyContent = 'center';
+		headerDiv.style.gap = '4px';
+		headerDiv.style.position = 'relative';
+
+		const importBtn = document.createElement( 'button' );
+		importBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>';
+		importBtn.className = 'panel-action-btn';
+		importBtn.title = 'Import';
+		importBtn.style.padding = '5px 8px';
+		importBtn.onclick = () => this._importData();
+
+		const exportBtn = document.createElement( 'button' );
+		exportBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
+		exportBtn.className = 'panel-action-btn';
+		exportBtn.title = 'Export';
+		exportBtn.style.padding = '5px 8px';
+		exportBtn.onclick = () => this._exportData();
+
+		const manageBtn = document.createElement( 'button' );
+		manageBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="3" y="3" width="7" height="7" rx="1"></rect><path d="M14 4h7"></path><path d="M14 9h7"></path><path d="M14 15h7"></path><path d="M14 20h7"></path></svg>';
+		manageBtn.className = 'panel-action-btn';
+		manageBtn.title = 'Saved Materials';
+		manageBtn.style.padding = '5px 8px';
+		manageBtn.onclick = () => this._showManagerModal();
+
+		const autoIdBtn = document.createElement( 'button' );
+		autoIdBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c.132 5.466 2.534 7.868 8 8-5.466.132-7.868 2.534-8 8-.132-5.466-2.534-7.868-8-8 5.466-.132 7.868-2.534 8-8z"></path></svg>';
+		autoIdBtn.className = 'panel-action-btn';
+		autoIdBtn.title = 'Auto-Generate Graph ID';
+		autoIdBtn.style.padding = '5px 8px';
+		autoIdBtn.style.position = 'absolute';
+		autoIdBtn.style.right = '4px';
+		autoIdBtn.style.top = '4px';
+
+		this.autoGraphId = false;
+
+		autoIdBtn.onclick = () => {
+
+			this.autoGraphId = ! this.autoGraphId;
+
+			if ( this.autoGraphId ) {
+
+				autoIdBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+				autoIdBtn.style.color = '#fff';
+
+			} else {
+
+				autoIdBtn.style.backgroundColor = '';
+				autoIdBtn.style.color = '';
+
+			}
+
+		};
+
+		headerDiv.appendChild( importBtn );
+		headerDiv.appendChild( exportBtn );
+		headerDiv.appendChild( manageBtn );
+		headerDiv.appendChild( autoIdBtn );
+
+		this.content.appendChild( headerDiv );
+
+		this.iframe = document.createElement( 'iframe' );
+		this.iframe.style.width = '100%';
+		this.iframe.style.height = '100%';
+		this.iframe.style.border = 'none';
+		this.iframe.src = editorUrl.toString();
+		this.editorOrigin = new URL( this.iframe.src ).origin;
+
+		this.content.appendChild( this.iframe );
+
+		this.material = null;
+		this.uniforms = null;
+
+		this.isReady = false;
+
+		this._codeData = null;
+		this._codeSaveTimeout = null;
+
+		this._pending = new Map();
+
+		this._resolveReady = null;
+		this._editorReady = new Promise( ( resolve ) => {
+
+			this._resolveReady = resolve;
+
+		} );
+
+		window.addEventListener( 'message', this.onMessage.bind( this ) );
+
+	}
+
+	get hasGraphs() {
+
+		return TSLGraphLoader.hasGraphs;
+
+	}
+
+	_initPicker( inspector ) {
+
+		const renderer = inspector.getRenderer();
+
+		let boundingBox = null;
+
+		const raycaster = new Raycaster();
+		const pointer = new Vector2();
+
+		const removeBoundingBox = () => {
+
+			if ( boundingBox ) {
+
+				boundingBox.removeFromParent();
+				boundingBox.dispose();
+				boundingBox = null;
+
+			}
+
+		};
+
+		this.addEventListener( 'change', ( { material } ) => {
+
+			if ( material === null ) {
+
+				removeBoundingBox();
+
+			}
+
+		} );
+
+		this.addEventListener( 'remove', ( { graphId } ) => {
+
+			const frame = inspector.getFrame();
+			const scene = frame && frame.renders.length > 0 ? frame.renders[ 0 ].scene : null;
+
+			if ( scene ) {
+
+				scene.traverse( ( object ) => {
+
+					if ( object.material && object.material.userData && object.material.userData.graphId === graphId ) {
+
+						this.restoreMaterial( object.material );
+
+					}
+
+				} );
+
+			}
+
+		} );
+
+		const pointerDownPosition = new Vector2();
+
+		renderer.domElement.addEventListener( 'pointerdown', ( e ) => {
+
+			pointerDownPosition.set( e.clientX, e.clientY );
+
+		} );
+
+		renderer.domElement.addEventListener( 'pointerup', ( e ) => {
+
+			const frame = inspector.getFrame();
+
+			for ( const render of frame.renders ) {
+
+				const scene = render.scene;
+
+				if ( scene.isScene !== true ) continue;
+
+				const camera = render.camera;
+
+				if ( pointerDownPosition.distanceTo( pointer.set( e.clientX, e.clientY ) ) > 2 ) return;
+
+				const rect = renderer.domElement.getBoundingClientRect();
+				pointer.x = ( ( e.clientX - rect.left ) / rect.width ) * 2 - 1;
+				pointer.y = - ( ( e.clientY - rect.top ) / rect.height ) * 2 + 1;
+
+				raycaster.setFromCamera( pointer, camera );
+
+				const intersects = raycaster.intersectObjects( scene.children, true );
+
+				let graphMaterial = null;
+
+				if ( intersects.length > 0 ) {
+
+					for ( const intersect of intersects ) {
+
+						const object = intersect.object;
+						const material = object.material;
+
+						if ( material && material.isNodeMaterial ) {
+
+							removeBoundingBox();
+
+							boundingBox = new BoxHelper( object, 0xffff00 );
+							scene.add( boundingBox );
+
+							graphMaterial = material;
+
+						}
+
+						if ( object.isMesh || object.isSprite ) {
+
+							break;
+
+						}
+
+					}
+
+				}
+
+				this.setMaterial( graphMaterial );
+
+			}
+
+		} );
+
+	}
+
+	apply( scene ) {
+
+		const loader = new TSLGraphLoader();
+		const applier = loader.parse( TSLGraphLoader.getCodes() );
+		applier.apply( scene );
+
+		return this;
+
+	}
+
+	restoreMaterial( material ) {
+
+		material.copy( new material.constructor() );
+		material.needsUpdate = true;
+
+	}
+
+	init( inspector ) {
+
+		this._initPicker( inspector );
+
+	}
+
+	async setMaterial( material ) {
+
+		if ( this.material === material ) return;
+
+		await this._setMaterial( material );
+
+		this.dispatchEvent( { type: 'change', material } );
+
+	}
+
+	async loadGraph( graphData ) {
+
+		await this.command( 'load', { graphData } );
+
+	}
+
+	async command( type, payload ) {
+
+		type = 'tsl:command:' + type;
+
+		await this._editorReady;
+
+		const requestId = this._makeRequestId();
+		const expectedType = _resposeByCommand[ type ];
+
+		return new Promise( ( resolve, reject ) => {
+
+			const timer = window.setTimeout( () => {
+
+				if ( ! this._pending.has( requestId ) ) return;
+				this._pending.delete( requestId );
+				reject( new Error( `Timeout for ${type}` ) );
+
+			}, 5000 );
+
+			this._pending.set( requestId, { expectedType, resolve, reject, timer } );
+
+			const message = { source: HOST_SOURCE, type, requestId };
+			if ( payload !== undefined ) message.payload = payload;
+
+			this._post( message );
+
+		} );
+
+	}
+
+	async getCode() {
+
+		return this.command( 'get-code' );
+
+	}
+
+	async getTSLFunction() {
+
+		const graphLoader = new TSLGraphLoader();
+		const applier = graphLoader.parse( await this.getCode() );
+
+		return applier.tslGraphFns[ 'tslGraph' ];
+
+	}
+
+	async getGraph() {
+
+		return ( await this.command( 'get-graph' ) ).graphData;
+
+	}
+
+	async onResponse( /*type, payload*/ ) {
+
+
+
+	}
+
+	async onEvent( type, payload ) {
+
+		if ( type === 'ready' ) {
+
+			if ( ! this.isReady ) {
+
+				this.isReady = true;
+
+				this._resolveReady();
+
+			}
+
+		} else if ( type === 'graph-changed' ) {
+
+			if ( this.material === null ) return;
+
+			await this._updateMaterial();
+
+			const graphData = await this.getGraph();
+
+			const graphId = this.material.userData.graphId;
+
+			TSLGraphLoader.setGraph( graphId, graphData );
+
+		} else if ( type === 'uniforms-changed' ) {
+
+			this._updateUniforms( payload.uniforms );
+
+		}
+
+	}
+
+	async onMessage( event ) {
+
+		if ( event.origin !== this.editorOrigin ) return;
+		if ( ! this._isEditorMessage( event.data ) ) return;
+
+		const msg = event.data;
+
+		if ( msg.requestId && msg.type.startsWith( 'tsl:response:' ) ) {
+
+			const waiter = this._pending.get( msg.requestId );
+			if ( ! waiter ) return;
+			if ( msg.type !== waiter.expectedType ) return;
+
+			this._pending.delete( msg.requestId );
+			window.clearTimeout( waiter.timer );
+
+			if ( msg.error ) waiter.reject( new Error( msg.error ) );
+			else waiter.resolve( msg.payload );
+
+			this.onResponse( msg.type.substring( 'tsl:response:'.length ), msg.payload );
+
+		} else if ( msg.type.startsWith( 'tsl:event:' ) ) {
+
+			this.onEvent( msg.type.substring( 'tsl:event:'.length ), msg.payload );
+
+		}
+
+	}
+
+	async _setMaterial( material ) {
+
+		if ( ! material ) {
+
+			this.material = null;
+			this.materialDefault = null;
+			this.uniforms = null;
+
+			await this.command( 'clear-graph' );
+
+			return;
+
+		}
+
+		if ( material.isNodeMaterial !== true ) {
+
+			error( 'TSLGraphEditor: "Material" needs be a "NodeMaterial".' );
+
+			return;
+
+		}
+
+		if ( material.userData.graphId === undefined ) {
+
+			if ( this.autoGraphId ) {
+
+				material.userData.graphId = material.name || 'id:' + material.id;
+
+			} else {
+
+				warn( 'TSLGraphEditor: "NodeMaterial" has no graphId. Set a "graphId" for the material in "material.userData.graphId".' );
+
+				return;
+
+			}
+
+		}
+
+		let materialDefault = _refMaterials.get( material );
+
+		if ( materialDefault === undefined ) {
+
+			//materialDefault = material.clone();
+			materialDefault = new material.constructor();
+			materialDefault.userData = material.userData;
+
+			_refMaterials.set( material, materialDefault );
+
+		}
+
+		this.material = material;
+		this.materialDefault = materialDefault;
+		this.uniforms = null;
+
+		const graphData = TSLGraphLoader.getGraph( this.material.userData.graphId );
+
+		if ( graphData ) {
+
+			await this.loadGraph( graphData );
+
+		} else {
+
+			await this.command( 'clear-graph' );
+
+			await this.command( 'set-root-material', { materialType: this._getGraphType( this.material ) } );
+
+		}
+
+	}
+
+	_getGraphType( material ) {
+
+		if ( material.isMeshPhysicalNodeMaterial ) return 'material/physical';
+		if ( material.isMeshStandardNodeMaterial ) return 'material/standard';
+		if ( material.isMeshPhongNodeMaterial ) return 'material/phong';
+		if ( material.isMeshBasicNodeMaterial ) return 'material/basic';
+		if ( material.isSpriteNodeMaterial ) return 'material/sprite';
+
+		return 'material/node';
+
+	}
+
+	_showManagerModal() {
+
+		const overlay = document.createElement( 'div' );
+		overlay.style.position = 'absolute';
+		overlay.style.top = '0';
+		overlay.style.left = '0';
+		overlay.style.width = '100%';
+		overlay.style.height = '100%';
+		overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+		overlay.style.zIndex = '100';
+		overlay.style.display = 'flex';
+		overlay.style.justifyContent = 'center';
+		overlay.style.alignItems = 'center';
+		overlay.onclick = ( e ) => {
+
+			if ( e.target === overlay ) {
+
+				this.content.removeChild( overlay );
+
+			}
+
+		};
+
+		const modal = document.createElement( 'div' );
+		modal.style.width = '80%';
+		modal.style.maxWidth = '500px';
+		modal.style.height = '400px';
+		modal.style.backgroundColor = 'var(--profiler-bg, #1e1e24f5)';
+		modal.style.border = '1px solid var(--profiler-border, #4a4a5a)';
+		modal.style.borderRadius = '8px';
+		modal.style.display = 'flex';
+		modal.style.flexDirection = 'column';
+
+		const header = document.createElement( 'div' );
+		header.style.padding = '15px';
+		header.style.borderBottom = '1px solid var(--profiler-border, #4a4a5a)';
+		header.style.display = 'flex';
+		header.style.justifyContent = 'space-between';
+		header.style.alignItems = 'center';
+		header.style.gap = '15px';
+
+		const filterInput = document.createElement( 'input' );
+		filterInput.type = 'text';
+		filterInput.className = 'console-filter-input';
+		filterInput.placeholder = 'Filter...';
+		filterInput.style.flex = '1';
+
+		const closeBtn = document.createElement( 'button' );
+		closeBtn.innerHTML = '&#x2715;';
+		closeBtn.style.background = 'transparent';
+		closeBtn.style.border = 'none';
+		closeBtn.style.color = 'var(--text-secondary, #9a9aab)';
+		closeBtn.style.cursor = 'pointer';
+		closeBtn.style.fontSize = '16px';
+		closeBtn.onmouseover = () => closeBtn.style.color = 'var(--text-primary, #e0e0e0)';
+		closeBtn.onmouseout = () => closeBtn.style.color = 'var(--text-secondary, #9a9aab)';
+		closeBtn.onclick = () => this.content.removeChild( overlay );
+
+		header.appendChild( filterInput );
+		header.appendChild( closeBtn );
+
+		const codes = this.getCodes();
+		const materialIds = Object.keys( codes.materials || {} );
+
+		if ( materialIds.length === 0 ) {
+
+			const listContainer = document.createElement( 'div' );
+			listContainer.style.padding = '10px';
+			listContainer.style.flex = '1';
+
+			const emptyMsg = document.createElement( 'div' );
+			emptyMsg.textContent = 'No saved materials found.';
+			emptyMsg.style.color = 'var(--text-secondary, #9a9aab)';
+			emptyMsg.style.padding = '10px';
+			emptyMsg.style.textAlign = 'center';
+			emptyMsg.style.fontFamily = 'var(--font-family, sans-serif)';
+			emptyMsg.style.fontSize = '12px';
+			listContainer.appendChild( emptyMsg );
+
+			modal.appendChild( header );
+			modal.appendChild( listContainer );
+
+		} else {
+
+			const listHeaderContainer = document.createElement( 'div' );
+			listHeaderContainer.style.display = 'grid';
+			listHeaderContainer.style.gridTemplateColumns = '1fr 80px';
+			listHeaderContainer.style.gap = '10px';
+			listHeaderContainer.style.padding = '10px 15px 8px 15px';
+			listHeaderContainer.style.borderBottom = '1px solid var(--profiler-border, #4a4a5a)';
+			listHeaderContainer.style.backgroundColor = 'var(--profiler-bg, #1e1e24f5)';
+			listHeaderContainer.style.fontFamily = 'var(--font-family, sans-serif)';
+			listHeaderContainer.style.fontSize = '11px';
+			listHeaderContainer.style.fontWeight = 'bold';
+			listHeaderContainer.style.textTransform = 'uppercase';
+			listHeaderContainer.style.letterSpacing = '0.5px';
+			listHeaderContainer.style.color = 'var(--text-secondary, #9a9aab)';
+			listHeaderContainer.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+			listHeaderContainer.style.zIndex = '1';
+
+			const col1 = document.createElement( 'div' );
+			col1.textContent = 'Material Name / ID';
+			const col2 = document.createElement( 'div' );
+			col2.textContent = 'Action';
+			col2.style.textAlign = 'right';
+
+			listHeaderContainer.appendChild( col1 );
+			listHeaderContainer.appendChild( col2 );
+
+			const scrollWrapper = document.createElement( 'div' );
+			scrollWrapper.style.flex = '1';
+			scrollWrapper.style.overflowY = 'auto';
+			scrollWrapper.style.padding = '0';
+
+			const rows = [];
+
+			for ( const id of materialIds ) {
+
+				const itemRow = document.createElement( 'div' );
+				itemRow.style.display = 'grid';
+				itemRow.style.gridTemplateColumns = '1fr 80px';
+				itemRow.style.gap = '10px';
+				itemRow.style.alignItems = 'center';
+				itemRow.style.padding = '8px 15px';
+				itemRow.style.borderBottom = '1px solid rgba(74, 74, 90, 0.4)';
+				itemRow.onmouseover = () => itemRow.style.backgroundColor = 'rgba(255, 255, 255, 0.04)';
+				itemRow.onmouseout = () => itemRow.style.backgroundColor = 'transparent';
+
+				const nameSpan = document.createElement( 'span' );
+				const materialData = codes.materials[ id ];
+				const materialName = materialData.name || id;
+				nameSpan.textContent = materialName;
+				nameSpan.style.fontFamily = 'var(--font-mono, monospace)';
+				nameSpan.style.fontSize = '12px';
+				nameSpan.style.color = 'var(--text-primary, #e0e0e0)';
+				nameSpan.style.userSelect = 'all';
+				nameSpan.style.overflow = 'hidden';
+				nameSpan.style.textOverflow = 'ellipsis';
+				nameSpan.style.whiteSpace = 'nowrap';
+
+				const actionContainer = document.createElement( 'div' );
+				actionContainer.style.textAlign = 'right';
+
+				const removeBtn = document.createElement( 'button' );
+				removeBtn.textContent = 'Remove';
+				removeBtn.style.background = 'rgba(244, 67, 54, 0.1)';
+				removeBtn.style.border = '1px solid var(--color-red, #f44336)';
+				removeBtn.style.color = 'var(--color-red, #f44336)';
+				removeBtn.style.borderRadius = '4px';
+				removeBtn.style.padding = '4px 8px';
+				removeBtn.style.cursor = 'pointer';
+				removeBtn.style.fontSize = '11px';
+				removeBtn.onmouseover = () => removeBtn.style.background = 'rgba(244, 67, 54, 0.2)';
+				removeBtn.onmouseout = () => removeBtn.style.background = 'rgba(244, 67, 54, 0.1)';
+
+				actionContainer.appendChild( removeBtn );
+
+				itemRow.appendChild( nameSpan );
+				itemRow.appendChild( actionContainer );
+
+				scrollWrapper.appendChild( itemRow );
+
+				rows.push( { element: itemRow, text: materialName.toLowerCase() } );
+
+				removeBtn.onclick = async () => {
+
+					delete codes.materials[ id ];
+					TSLGraphLoader.setCodes( codes );
+					TSLGraphLoader.deleteGraph( id );
+					scrollWrapper.removeChild( itemRow );
+
+					const index = rows.findIndex( r => r.element === itemRow );
+					if ( index > - 1 ) rows.splice( index, 1 );
+
+					if ( rows.length === 0 ) {
+
+						modal.removeChild( listHeaderContainer );
+						modal.removeChild( scrollWrapper );
+
+						const listContainer = document.createElement( 'div' );
+						listContainer.style.padding = '10px';
+						listContainer.style.flex = '1';
+
+						const emptyMsg = document.createElement( 'div' );
+						emptyMsg.textContent = 'No saved materials found.';
+						emptyMsg.style.color = 'var(--text-secondary, #9a9aab)';
+						emptyMsg.style.padding = '10px';
+						emptyMsg.style.textAlign = 'center';
+						emptyMsg.style.fontFamily = 'var(--font-family, sans-serif)';
+						emptyMsg.style.fontSize = '12px';
+
+						listContainer.appendChild( emptyMsg );
+						modal.appendChild( listContainer );
+
+					}
+
+					_refMaterials.delete( this.material );
+
+					if ( this.material && this.material.userData.graphId === id ) {
+
+						this.restoreMaterial( this.material );
+
+						await this.setMaterial( null );
+
+					}
+
+					this.dispatchEvent( { type: 'remove', graphId: id } );
+
+				};
+
+			}
+
+			filterInput.addEventListener( 'input', ( e ) => {
+
+				const term = e.target.value.toLowerCase();
+				for ( const row of rows ) {
+
+					row.element.style.display = row.text.includes( term ) ? 'grid' : 'none';
+
+				}
+
+			} );
+
+			modal.appendChild( header );
+			modal.appendChild( listHeaderContainer );
+			modal.appendChild( scrollWrapper );
+
+		}
+
+		overlay.appendChild( modal );
+
+		this.content.appendChild( overlay );
+
+	}
+
+	_exportData() {
+
+		const codes = this.getCodes();
+		const materialIds = Object.keys( codes.materials || {} );
+
+		const exportPayload = {
+			codes: codes,
+			graphs: {}
+		};
+
+		for ( const id of materialIds ) {
+
+			const graphData = TSLGraphLoader.getGraph( id );
+
+			if ( graphData ) {
+
+				exportPayload.graphs[ id ] = graphData;
+
+			}
+
+		}
+
+		const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent( JSON.stringify( exportPayload, null, '\t' ) );
+		const downloadAnchorNode = document.createElement( 'a' );
+		downloadAnchorNode.setAttribute( 'href', dataStr );
+		downloadAnchorNode.setAttribute( 'download', 'tsl-graphs.json' );
+		document.body.appendChild( downloadAnchorNode );
+		downloadAnchorNode.click();
+		downloadAnchorNode.remove();
+
+	}
+
+	_importData() {
+
+		const fileInput = document.createElement( 'input' );
+		fileInput.type = 'file';
+		fileInput.accept = '.json';
+
+		fileInput.onchange = e => {
+
+			const file = e.target.files[ 0 ];
+
+			if ( ! file ) return;
+
+			const reader = new FileReader();
+			reader.onload = async ( event ) => {
+
+				try {
+
+					const importedData = TSLGraphLoader.setGraphs( JSON.parse( event.target.result ) );
+
+					this._codeData = importedData.codes;
+
+					// Reload visual state if we have a material open
+					if ( this.material ) {
+
+						// refresh material
+						await this._setMaterial( this.material );
+
+					}
+
+				} catch ( err ) {
+
+					error( 'TSLGraphEditor: Failed to parse or load imported JSON.', err );
+
+				}
+
+			};
+
+			reader.readAsText( file );
+
+		};
+
+		fileInput.click();
+
+	}
+
+	getCodes() {
+
+		if ( this._codeData === null ) {
+
+			this._codeData = TSLGraphLoader.getCodes();
+
+		}
+
+		return this._codeData;
+
+	}
+
+	_saveCode() {
+
+		const graphId = this.material.userData.graphId;
+
+		clearTimeout( this._codeSaveTimeout );
+
+		this._codeSaveTimeout = setTimeout( async () => {
+
+			if ( this.material === null || graphId !== this.material.userData.graphId ) return;
+
+			const codes = this.getCodes();
+			const codeData = await this.getCode();
+
+			codes.materials[ graphId ] = codeData.material;
+
+			TSLGraphLoader.setCodes( codes );
+
+		}, 1000 );
+
+	}
+
+	_restoreMaterial() {
+
+		this.material.copy( this.materialDefault );
+
+	}
+
+	async _updateMaterial() {
+
+		this._restoreMaterial();
+
+		const applyNodes = await this.getTSLFunction();
+
+		const { uniforms } = applyNodes( this.material );
+
+		this.uniforms = uniforms;
+		this.material.needsUpdate = true;
+
+		this._saveCode();
+
+	}
+
+	_updateUniforms( uniforms ) {
+
+		if ( this.uniforms === null ) return;
+
+		for ( const uniform of uniforms ) {
+
+			const uniformNode = this.uniforms[ uniform.name ];
+			const uniformType = uniform.uniformType;
+
+			const value = uniform.value;
+
+			if ( uniformType.startsWith( 'vec' ) ) {
+
+				uniformNode.value.fromArray( value );
+
+			} else if ( uniformType.startsWith( 'color' ) ) {
+
+				uniformNode.value.setHex( parseInt( value.slice( 1 ), 16 ) );
+
+			} else {
+
+				uniformNode.value = value;
+
+			}
+
+		}
+
+		this._saveCode();
+
+	}
+
+	_isEditorMessage( value ) {
+
+		if ( ! value || typeof value !== 'object' ) return false;
+		return value.source === EDITOR_SOURCE && typeof value.type === 'string';
+
+	}
+
+	_makeRequestId() {
+
+		return `${Date.now()}-${Math.random().toString( 36 ).slice( 2, 10 )}`;
+
+	}
+
+	_post( message ) {
+
+		if ( this.iframe.contentWindow ) {
+
+			this.iframe.contentWindow.postMessage( message, this.editorOrigin );
+
+		}
+
+	}
+
+}
+
+export default TSLGraphEditor;