@thanhthbm/scene-editor 0.1.0

package/src/events.js

@@ -0,0 +1,273 @@
+import * as THREE from 'three';
+
+const DEFAULT_STATUS_COLORS = {
+	run: 0x2f9e6b,
+	idle: 0xe0a800,
+	err: 0xc0392b,
+	stop: 0xe0a800,
+	error: 0xc0392b,
+	off: 0x64748b
+};
+
+function applyUserData( object, payload ) {
+
+	const ud = object.userData || ( object.userData = {} );
+	for ( const key in payload ) {
+
+		if ( key === 'uuid' || key === 'topic' ) continue;
+		ud[ key ] = payload[ key ];
+
+	}
+
+}
+
+function applyBeacon( object, status, statusColors ) {
+
+	const hex = statusColors && statusColors[ status ];
+	if ( hex === undefined ) return;
+	const color = new THREE.Color( hex );
+	object.traverse( ( child ) => {
+
+		if ( child.userData && child.userData.role === 'beacon' && child.material ) {
+
+			child.material.color.copy( color );
+			child.material.emissive.copy( color );
+			child.material.emissiveIntensity = 0.85;
+			child.material.needsUpdate = true;
+
+		}
+
+	} );
+
+}
+
+function defaultHandler( editor ) {
+
+	return function ( object, payload ) {
+
+		applyUserData( object, payload );
+		if ( payload && payload.status !== undefined ) {
+
+			applyBeacon( object, payload.status, DEFAULT_STATUS_COLORS );
+
+		}
+		editor.signals.objectChanged.dispatch( object );
+		editor.signals.sceneGraphChanged.dispatch();
+
+	};
+
+}
+
+function EventBridge( editor ) {
+
+	this.editor = editor;
+	this._bindings = new Map(); // uuid -> binding
+	this._ws = null;
+	this._wsUrl = null;
+	this._onWsMessage = null;
+	this._onWsClose = null;
+	this._reconnectMs = 0;
+	this._reconnectTimer = null;
+	this._closedByUser = false;
+
+}
+
+EventBridge.prototype = {
+
+	constructor: EventBridge,
+
+	bind: function ( object, options = {} ) {
+
+		if ( ! object || ! object.uuid ) return this;
+		this._bindings.set( object.uuid, {
+			object,
+			topic: options.topic || object.userData.topic || null,
+			match: options.match || null,
+			handler: options.handler || defaultHandler( this.editor ),
+			statusColors: options.statusColors || DEFAULT_STATUS_COLORS
+		} );
+		return this;
+
+	},
+
+	bindByUuid: function ( uuid, options ) {
+
+		const object = this.editor.objectByUuid( uuid );
+		if ( object ) this.bind( object, options );
+		return object;
+
+	},
+
+	detach: function ( object ) {
+
+		if ( object && object.uuid ) this._bindings.delete( object.uuid );
+		return this;
+
+	},
+
+	clear: function () {
+
+		this._bindings.clear();
+		return this;
+
+	},
+
+	dispatch: function ( uuid, payload ) {
+
+		const binding = this._bindings.get( uuid );
+		if ( binding ) binding.handler( binding.object, payload || {}, this.editor );
+		return !! binding;
+
+	},
+
+	dispatchMatch: function ( predicate, payload ) {
+
+		let n = 0;
+		this._bindings.forEach( ( binding ) => {
+
+			if ( predicate( binding.object, binding.topic ) ) {
+
+				binding.handler( binding.object, payload || {}, this.editor );
+				n ++;
+
+			}
+
+		} );
+		return n;
+
+	},
+
+	dispatchTopic: function ( topic, payload ) {
+
+		return this.dispatchMatch( ( _object, t ) => t === topic, payload );
+
+	},
+
+	getBindings: function () {
+
+		return Array.from( this._bindings.values() );
+
+	},
+
+	applyOnObject: function ( object, payload, statusColors ) {
+
+		applyUserData( object, payload || {} );
+		if ( payload && payload.status !== undefined ) {
+
+			applyBeacon( object, payload.status, statusColors || DEFAULT_STATUS_COLORS );
+
+		}
+		this.editor.signals.objectChanged.dispatch( object );
+		this.editor.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	connectWS: function ( url, options = {} ) {
+
+		const self = this;
+		this._wsUrl = url;
+		this._closedByUser = false;
+		this._reconnectMs = options.reconnectMs || 0;
+		this._closeWs();
+
+		try {
+
+			this._ws = new WebSocket( url );
+
+		} catch ( e ) {
+
+			console.warn( 'EventBridge.connectWS failed:', e.message );
+			return this;
+
+		}
+
+		this._onWsMessage = function ( event ) {
+
+			let payload;
+			try { payload = JSON.parse( event.data ); } catch ( e ) { payload = {}; }
+			const uuid = payload.uuid;
+			const topic = payload.topic;
+			if ( uuid ) {
+
+				self.dispatch( uuid, payload );
+				return;
+
+			}
+			if ( topic ) {
+
+				self.dispatchTopic( topic, payload );
+				return;
+
+			}
+			self._dispatchBroadcast( payload );
+
+		};
+
+		this._onWsClose = function () {
+
+			if ( self._closedByUser ) return;
+			if ( self._reconnectMs > 0 ) {
+
+				clearTimeout( self._reconnectTimer );
+				self._reconnectTimer = setTimeout( () => self.connectWS( self._wsUrl, self._reconnectMs ? { reconnectMs: self._reconnectMs } : {} ), self._reconnectMs );
+
+			}
+
+		};
+
+		this._ws.addEventListener( 'message', this._onWsMessage );
+		this._ws.addEventListener( 'close', this._onWsClose );
+		return this;
+
+	},
+
+	sendWS: function ( data ) {
+
+		if ( this._ws && this._ws.readyState === WebSocket.OPEN ) {
+
+			this._ws.send( typeof data === 'string' ? data : JSON.stringify( data ) );
+			return true;
+
+		}
+		return false;
+
+	},
+
+	disconnectWS: function () {
+
+		this._closedByUser = true;
+		this._closeWs();
+		return this;
+
+	},
+
+	_closeWs: function () {
+
+		if ( this._ws ) {
+
+			this._ws.removeEventListener( 'message', this._onWsMessage );
+			this._ws.removeEventListener( 'close', this._onWsClose );
+			try { this._ws.close(); } catch ( e ) {}
+			this._ws = null;
+
+		}
+		clearTimeout( this._reconnectTimer );
+
+	},
+
+	_dispatchBroadcast: function ( payload ) {
+
+		this._bindings.forEach( ( binding ) => binding.handler( binding.object, payload || {}, this.editor ) );
+
+	},
+
+	destroy: function () {
+
+		this._closeWs();
+		this._bindings.clear();
+
+	}
+
+};
+
+export { EventBridge, DEFAULT_STATUS_COLORS };

package/src/index.js

@@ -0,0 +1,284 @@
+import * as THREE from 'three';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
+
+import { Editor } from './editor/js/Editor.js';
+import { Viewport } from './editor/js/Viewport.js';
+import { Toolbar } from './editor/js/Toolbar.js';
+import { Sidebar } from './editor/js/Sidebar.js';
+import { Menubar } from './editor/js/Menubar.js';
+import { Resizer } from './editor/js/Resizer.js';
+
+import { AddObjectCommand } from './editor/js/commands/AddObjectCommand.js';
+
+import './editor/css/main.css';
+
+import { EventBridge } from './events.js';
+import { registerBuiltinPresets, registerPreset, createPreset, PRESETS } from './presets/machines.js';
+
+THREE.ObjectLoader.registerGeometry( 'TextGeometry', TextGeometry );
+
+const ROOT_STYLE = [
+	'position:relative',
+	'width:100%',
+	'height:100%',
+	'min-height:240px',
+	'overflow:hidden',
+	'display:block'
+].join( ';' );
+
+const DEFAULT_EXPORT_NAME = 'scene.glb';
+
+function downloadBlob( blob, filename ) {
+
+	const url = URL.createObjectURL( blob );
+	const a = document.createElement( 'a' );
+	a.href = url;
+	a.download = filename || DEFAULT_EXPORT_NAME;
+	a.dispatchEvent( new MouseEvent( 'click' ) );
+	setTimeout( () => URL.revokeObjectURL( url ), 1000 );
+
+}
+
+class SceneEditor {
+
+	constructor( options = {} ) {
+
+		this.options = options;
+		this._commands = options.commands !== undefined ? options.commands : true;
+		this._destroyed = false;
+		this._onWindowResize = this._onWindowResize.bind( this );
+
+		this.editor = new Editor();
+		this.signals = this.editor.signals;
+
+		this.root = document.createElement( 'div' );
+		this.root.className = 'scene-editor-root';
+		this.root.setAttribute( 'style', ROOT_STYLE );
+
+		const editor = this.editor;
+		const root = this.root;
+		const viewport = new Viewport( editor );
+		const toolbar = new Toolbar( editor );
+		const sidebar = new Sidebar( editor );
+		const menubar = new Menubar( editor );
+		const resizer = new Resizer( editor );
+
+		this._doms = { viewport, toolbar, sidebar, menubar };
+		root.appendChild( menubar.dom );
+		root.appendChild( viewport.dom );
+		root.appendChild( toolbar.dom );
+		root.appendChild( sidebar.dom );
+		root.appendChild( resizer.dom );
+
+		this._ro = new ResizeObserver( () => this._onWindowResize() );
+		this._ro.observe( root );
+
+		this.events = new EventBridge( this.editor );
+
+		editor.signals.windowResize.dispatch();
+
+	}
+
+	mount( container ) {
+
+		if ( ! container ) throw new Error( 'SceneEditor.mount: container element required' );
+		const parent = typeof container === 'string'
+			? document.querySelector( container )
+			: container;
+		if ( ! parent ) throw new Error( 'SceneEditor.mount: container not found' );
+		parent.appendChild( this.root );
+		this.editor.signals.windowResize.dispatch();
+		return this;
+
+	}
+
+	getScene() { return this.editor.scene; }
+
+	getViewport() { return this.editor.viewportCamera; }
+
+	getEditor() { return this.editor; }
+
+
+	getSceneJSON() {
+
+		return this.editor.toJSON();
+
+	}
+
+	async setSceneJSON( json ) {
+
+		const data = typeof json === 'string' ? JSON.parse( json ) : json;
+		this.editor.clear();
+		await this.editor.fromJSON( data );
+		this.editor.signals.windowResize.dispatch();
+		return this;
+
+	}
+
+
+	getObjectByUuid( uuid ) {
+
+		return this.editor.objectByUuid( uuid );
+
+	}
+
+	selectByUuid( uuid ) {
+
+		this.editor.selectByUuid( uuid );
+		return this;
+
+	}
+
+	getSelected() {
+
+		return this.editor.selected;
+
+	}
+
+
+	getSelection() {
+
+		return this.editor.getSelection ? this.editor.getSelection() : [ this.editor.selected ];
+
+	}
+
+	selectMultiple( objects ) {
+
+		if ( this.editor.selectMultiple ) this.editor.selectMultiple( objects );
+		else if ( objects && objects.length ) this.editor.select( objects[ 0 ] );
+		return this;
+
+	}
+
+	addToSelection( object ) {
+
+		if ( this.editor.addToSelection ) this.editor.addToSelection( object );
+		else this.editor.select( object );
+		return this;
+
+	}
+
+	mergeSelectionIntoGroup( name ) {
+
+		if ( this.editor.mergeSelectionIntoGroup ) return this.editor.mergeSelectionIntoGroup( name );
+		return null;
+
+	}
+
+	ungroupBySelection() {
+
+		if ( this.editor.ungroupBySelection ) return this.editor.ungroupBySelection();
+		return [];
+
+	}
+
+
+	addObject( object ) {
+
+		this.editor.execute( new AddObjectCommand( this.editor, object ) );
+		return object;
+
+	}
+
+	addPreset( name, x = 0, z = 0, params ) {
+
+		const object = createPreset( name, x, z, params );
+		if ( object ) this.addObject( object );
+		return object || null;
+
+	}
+
+	registerPreset( name, factory ) {
+
+		return registerPreset( name, factory );
+
+	}
+
+	presets() {
+
+		return Object.keys( PRESETS );
+
+	}
+
+
+	async exportGLB( rootObject ) {
+
+		const obj = rootObject || this.editor.scene;
+		const exporter = new GLTFExporter();
+		return new Promise( ( resolve, reject ) => {
+
+			exporter.parse( obj, ( result ) => resolve( result ), ( error ) => reject( error ), { binary: true } );
+
+		} );
+
+	}
+
+	async exportGLBFile( rootObject, filename ) {
+
+		const buffer = await this.exportGLB( rootObject );
+		const blob = new Blob( [ buffer ], { type: 'model/gltf-binary' } );
+		downloadBlob( blob, filename );
+		return blob;
+
+	}
+
+
+	async exportGLTF( rootObject ) {
+
+		const obj = rootObject || this.editor.scene;
+		const exporter = new GLTFExporter();
+		return new Promise( ( resolve, reject ) => {
+
+			exporter.parse( obj, ( result ) => resolve( JSON.stringify( result, null, 2 ) ),
+				( error ) => reject( error ), { binary: false } );
+
+		} );
+
+	}
+
+
+	on( signalName, handler ) {
+
+		const sig = this.signals[ signalName ];
+		if ( ! sig ) throw new Error( 'SceneEditor.on: unknown signal "' + signalName + '"' );
+		sig.add( handler );
+		return () => sig.remove( handler );
+
+	}
+
+	off( signalName, handler ) {
+
+		const sig = this.signals[ signalName ];
+		if ( sig ) sig.remove( handler );
+
+	}
+
+	_onWindowResize() {
+
+		if ( this._destroyed ) return;
+		this.signals.windowResize.dispatch();
+
+	}
+
+	destroy() {
+
+		if ( this._destroyed ) return;
+		this._destroyed = true;
+		this._ro.disconnect();
+		this.signals.editorCleared.dispatch();
+		if ( this.root.parentNode ) this.root.parentNode.removeChild( this.root );
+		this.events.destroy();
+
+	}
+
+}
+
+export {
+	SceneEditor,
+	EventBridge,
+	registerBuiltinPresets,
+	registerPreset,
+	createPreset,
+	PRESETS
+};