@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Editor.js

@@ -0,0 +1,1006 @@
+import * as THREE from 'three';
+
+import { Config } from './Config.js';
+import { Loader } from './Loader.js';
+import { History as _History } from './History.js';
+import { Strings } from './Strings.js';
+import { Storage as _Storage } from './Storage.js';
+import { Selector } from './Selector.js';
+import Signal from 'signals';
+
+var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.001, 1e10 );
+_DEFAULT_CAMERA.name = 'Camera';
+_DEFAULT_CAMERA.position.set( 0, 5, 10 );
+_DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
+const _ORTHOGRAPHIC_FRUSTUM_SIZE = 100;
+
+function Editor() {
+
+	this.signals = {
+
+		// script
+
+		editScript: new Signal(),
+
+		// player
+
+		startPlayer: new Signal(),
+		stopPlayer: new Signal(),
+
+		// xr
+
+		enterXR: new Signal(),
+		offerXR: new Signal(),
+		leaveXR: new Signal(),
+
+		// notifications
+
+		editorCleared: new Signal(),
+
+		savingStarted: new Signal(),
+		savingFinished: new Signal(),
+
+		transformModeChanged: new Signal(),
+		snapChanged: new Signal(),
+		spaceChanged: new Signal(),
+		rendererCreated: new Signal(),
+		rendererUpdated: new Signal(),
+		rendererDetectKTX2Support: new Signal(),
+
+		sceneBackgroundChanged: new Signal(),
+		sceneEnvironmentChanged: new Signal(),
+		sceneFogChanged: new Signal(),
+		sceneFogSettingsChanged: new Signal(),
+		sceneGraphChanged: new Signal(),
+		sceneRendered: new Signal(),
+
+		cameraChanged: new Signal(),
+		cameraResetted: new Signal(),
+
+		geometryChanged: new Signal(),
+
+		objectSelected: new Signal(),
+		objectMultiSelected: new Signal(),
+		objectFocused: new Signal(),
+
+		objectAdded: new Signal(),
+		objectChanged: new Signal(),
+		objectRemoved: new Signal(),
+
+		cameraAdded: new Signal(),
+		cameraRemoved: new Signal(),
+
+		helperAdded: new Signal(),
+		helperRemoved: new Signal(),
+
+		materialAdded: new Signal(),
+		materialChanged: new Signal(),
+		materialRemoved: new Signal(),
+
+		scriptAdded: new Signal(),
+		scriptChanged: new Signal(),
+		scriptRemoved: new Signal(),
+
+		windowResize: new Signal(),
+
+		showHelpersChanged: new Signal(),
+		refreshSidebarObject3D: new Signal(),
+		historyChanged: new Signal(),
+
+		viewportCameraChanged: new Signal(),
+		viewportShadingChanged: new Signal(),
+
+		intersectionsDetected: new Signal(),
+
+		pathTracerUpdated: new Signal(),
+
+		animationPanelChanged: new Signal(),
+		animationPanelResized: new Signal(),
+
+		morphTargetsUpdated: new Signal()
+
+	};
+
+	this.config = new Config();
+	this.history = new _History( this );
+	this.selector = new Selector( this );
+	this.storage = new _Storage();
+	this.strings = new Strings( this.config );
+
+	this.loader = new Loader( this );
+
+	this.camera = _DEFAULT_CAMERA.clone();
+
+	this.scene = new THREE.Scene();
+	this.scene.name = 'Scene';
+
+	this.sceneHelpers = new THREE.Scene();
+	this.sceneHelpers.add( new THREE.HemisphereLight( 0xffffff, 0x888888, 2 ) );
+
+	this.backgroundType = 'Default';
+	this.environmentType = 'Default';
+
+	this.object = {};
+	this.geometries = {};
+	this.materials = {};
+	this.textures = {};
+	this.scripts = {};
+
+	this.materialsRefCounter = new Map(); // tracks how often is a material used by a 3D object
+
+	this.mixer = new THREE.AnimationMixer( this.scene );
+
+	this.selected = null;
+	this.selectedObjects = []; // multi-selection (Spline-like); [0] is primary == this.selected
+	this.helpers = {};
+
+	this.cameras = {};
+
+	this.viewportCamera = this.camera;
+	this.viewportShading = 'default';
+	this.viewportColor = new THREE.Color();
+
+	this.addCamera( this.camera );
+
+}
+
+Editor.prototype = {
+
+	setScene: function ( scene ) {
+
+		this.scene.uuid = scene.uuid;
+		this.scene.name = scene.name;
+
+		this.scene.background = scene.background;
+		this.scene.environment = scene.environment;
+		this.scene.fog = scene.fog;
+		this.scene.backgroundBlurriness = scene.backgroundBlurriness;
+		this.scene.backgroundIntensity = scene.backgroundIntensity;
+
+		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
+
+		// avoid render per object
+
+		this.signals.sceneGraphChanged.active = false;
+
+		while ( scene.children.length > 0 ) {
+
+			this.addObject( scene.children[ 0 ] );
+
+		}
+
+		this.signals.sceneGraphChanged.active = true;
+		this.signals.sceneGraphChanged.dispatch();
+
+		this.signals.sceneEnvironmentChanged.dispatch( this.environmentType, scene.environment );
+
+	},
+
+	//
+
+	addObject: function ( object, parent, index ) {
+
+		var scope = this;
+
+		object.traverse( function ( child ) {
+
+			if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
+			if ( child.material !== undefined ) scope.addMaterial( child.material );
+
+			scope.addCamera( child );
+			scope.addHelper( child );
+
+		} );
+
+		if ( parent === undefined ) {
+
+			this.scene.add( object );
+
+		} else {
+
+			parent.children.splice( index, 0, object );
+			object.parent = parent;
+
+		}
+
+		this.signals.objectAdded.dispatch( object );
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	nameObject: function ( object, name ) {
+
+		object.name = name;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	removeObject: function ( object ) {
+
+		if ( object.parent === null ) return; // avoid deleting the camera or scene
+
+		var scope = this;
+
+		object.traverse( function ( child ) {
+
+			scope.removeCamera( child );
+			scope.removeHelper( child );
+
+			if ( child.material !== undefined ) scope.removeMaterial( child.material );
+
+		} );
+
+		object.parent.remove( object );
+
+		this.signals.objectRemoved.dispatch( object );
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	addGeometry: function ( geometry ) {
+
+		this.geometries[ geometry.uuid ] = geometry;
+
+	},
+
+	setGeometryName: function ( geometry, name ) {
+
+		geometry.name = name;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	addMaterial: function ( material ) {
+
+		if ( Array.isArray( material ) ) {
+
+			for ( var i = 0, l = material.length; i < l; i ++ ) {
+
+				this.addMaterialToRefCounter( material[ i ] );
+
+			}
+
+		} else {
+
+			this.addMaterialToRefCounter( material );
+
+		}
+
+		this.signals.materialAdded.dispatch();
+
+	},
+
+	addMaterialToRefCounter: function ( material ) {
+
+		var materialsRefCounter = this.materialsRefCounter;
+
+		var count = materialsRefCounter.get( material );
+
+		if ( count === undefined ) {
+
+			materialsRefCounter.set( material, 1 );
+			this.materials[ material.uuid ] = material;
+
+		} else {
+
+			count ++;
+			materialsRefCounter.set( material, count );
+
+		}
+
+	},
+
+	removeMaterial: function ( material ) {
+
+		if ( Array.isArray( material ) ) {
+
+			for ( var i = 0, l = material.length; i < l; i ++ ) {
+
+				this.removeMaterialFromRefCounter( material[ i ] );
+
+			}
+
+		} else {
+
+			this.removeMaterialFromRefCounter( material );
+
+		}
+
+		this.signals.materialRemoved.dispatch();
+
+	},
+
+	removeMaterialFromRefCounter: function ( material ) {
+
+		var materialsRefCounter = this.materialsRefCounter;
+
+		var count = materialsRefCounter.get( material );
+		count --;
+
+		if ( count === 0 ) {
+
+			materialsRefCounter.delete( material );
+			delete this.materials[ material.uuid ];
+
+		} else {
+
+			materialsRefCounter.set( material, count );
+
+		}
+
+	},
+
+	getMaterialById: function ( id ) {
+
+		var material;
+		var materials = Object.values( this.materials );
+
+		for ( var i = 0; i < materials.length; i ++ ) {
+
+			if ( materials[ i ].id === id ) {
+
+				material = materials[ i ];
+				break;
+
+			}
+
+		}
+
+		return material;
+
+	},
+
+	setMaterialName: function ( material, name ) {
+
+		material.name = name;
+		this.signals.sceneGraphChanged.dispatch();
+
+	},
+
+	addTexture: function ( texture ) {
+
+		this.textures[ texture.uuid ] = texture;
+
+	},
+
+	//
+
+	addCamera: function ( camera ) {
+
+		if ( camera.isCamera ) {
+
+			this.cameras[ camera.uuid ] = camera;
+
+			this.signals.cameraAdded.dispatch( camera );
+
+		}
+
+	},
+
+	removeCamera: function ( camera ) {
+
+		if ( this.cameras[ camera.uuid ] !== undefined ) {
+
+			delete this.cameras[ camera.uuid ];
+
+			this.signals.cameraRemoved.dispatch( camera );
+
+		}
+
+	},
+
+	//
+
+	addHelper: function () {
+
+		var geometry = new THREE.SphereGeometry( 2, 4, 2 );
+		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
+
+		return function ( object, helper ) {
+
+			if ( helper === undefined ) {
+
+				if ( object.isCamera ) {
+
+					helper = new THREE.CameraHelper( object );
+
+				} else if ( object.isPointLight ) {
+
+					helper = new THREE.PointLightHelper( object, 1 );
+
+					helper.matrix = new THREE.Matrix4();
+					helper.matrixAutoUpdate = true;
+
+					const light = object;
+					const editor = this;
+
+					helper.updateMatrixWorld = function () {
+
+						light.getWorldPosition( this.position );
+
+						const distance = editor.viewportCamera.position.distanceTo( this.position );
+						this.scale.setScalar( distance / 30 );
+
+						this.updateMatrix();
+						this.matrixWorld.copy( this.matrix );
+
+						const children = this.children;
+
+						for ( let i = 0, l = children.length; i < l; i ++ ) {
+
+							children[ i ].updateMatrixWorld();
+
+						}
+
+					};
+
+				} else if ( object.isDirectionalLight ) {
+
+					helper = new THREE.DirectionalLightHelper( object, 1 );
+
+				} else if ( object.isSpotLight ) {
+
+					helper = new THREE.SpotLightHelper( object );
+
+				} else if ( object.isHemisphereLight ) {
+
+					helper = new THREE.HemisphereLightHelper( object, 1 );
+
+				} else if ( object.isSkinnedMesh ) {
+
+					helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
+
+				} else if ( object.isBone === true && object.parent && object.parent.isBone !== true ) {
+
+					helper = new THREE.SkeletonHelper( object );
+
+				} else {
+
+					// no helper for this object type
+					return;
+
+				}
+
+				const picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				helper.add( picker );
+
+			}
+
+			this.sceneHelpers.add( helper );
+			this.helpers[ object.id ] = helper;
+
+			this.signals.helperAdded.dispatch( helper );
+
+		};
+
+	}(),
+
+	removeHelper: function ( object ) {
+
+		if ( this.helpers[ object.id ] !== undefined ) {
+
+			var helper = this.helpers[ object.id ];
+			helper.parent.remove( helper );
+			helper.dispose();
+
+			delete this.helpers[ object.id ];
+
+			this.signals.helperRemoved.dispatch( helper );
+
+		}
+
+	},
+
+	//
+
+	addScript: function ( object, script ) {
+
+		if ( this.scripts[ object.uuid ] === undefined ) {
+
+			this.scripts[ object.uuid ] = [];
+
+		}
+
+		this.scripts[ object.uuid ].push( script );
+
+		this.signals.scriptAdded.dispatch( script );
+
+	},
+
+	removeScript: function ( object, script ) {
+
+		if ( this.scripts[ object.uuid ] === undefined ) return;
+
+		var index = this.scripts[ object.uuid ].indexOf( script );
+
+		if ( index !== - 1 ) {
+
+			this.scripts[ object.uuid ].splice( index, 1 );
+
+		}
+
+		this.signals.scriptRemoved.dispatch( script );
+
+	},
+
+	getObjectMaterial: function ( object, slot ) {
+
+		var material = object.material;
+
+		if ( Array.isArray( material ) && slot !== undefined ) {
+
+			material = material[ slot ];
+
+		}
+
+		return material;
+
+	},
+
+	setObjectMaterial: function ( object, slot, newMaterial ) {
+
+		if ( Array.isArray( object.material ) && slot !== undefined ) {
+
+			object.material[ slot ] = newMaterial;
+
+		} else {
+
+			object.material = newMaterial;
+
+		}
+
+	},
+
+	setCameraType: function ( type ) {
+
+		const oldCamera = this.camera;
+
+		const isOrthographic = oldCamera.isOrthographicCamera === true;
+
+		if ( ( type === 'orthographic' && isOrthographic ) || ( type === 'perspective' && ! isOrthographic ) ) return;
+
+		// the orbit point the framing should be preserved around
+
+		const center = this.controls ? this.controls.center : new THREE.Vector3();
+		const distance = oldCamera.position.distanceTo( center );
+
+		let newCamera;
+
+		if ( type === 'orthographic' ) {
+
+			const halfSize = _ORTHOGRAPHIC_FRUSTUM_SIZE / 2;
+			newCamera = new THREE.OrthographicCamera( - halfSize, halfSize, halfSize, - halfSize, 0, 10000 );
+			newCamera.position.copy( oldCamera.position );
+			newCamera.quaternion.copy( oldCamera.quaternion );
+
+			// derive the zoom so the orthographic framing matches the perspective view at the orbit center
+
+			const halfFOV = THREE.MathUtils.DEG2RAD * oldCamera.fov / 2;
+			newCamera.zoom = ( newCamera.top - newCamera.bottom ) / ( 2 * Math.max( distance, 0.0001 ) * Math.tan( halfFOV ) );
+
+		} else {
+
+			newCamera = new THREE.PerspectiveCamera( 50, 1, 0.001, 1e10 );
+			newCamera.quaternion.copy( oldCamera.quaternion );
+
+			// reposition along the view direction so the perspective framing matches the orthographic view
+
+			const halfFOV = THREE.MathUtils.DEG2RAD * newCamera.fov / 2;
+			const targetDistance = ( oldCamera.top - oldCamera.bottom ) / ( 2 * oldCamera.zoom * Math.tan( halfFOV ) );
+
+			const offset = new THREE.Vector3().subVectors( oldCamera.position, center );
+			if ( offset.lengthSq() === 0 ) offset.set( 0, 0, 1 ).applyQuaternion( oldCamera.quaternion );
+			offset.normalize().multiplyScalar( targetDistance );
+
+			newCamera.position.copy( center ).add( offset );
+
+		}
+
+		newCamera.name = oldCamera.name;
+		newCamera.uuid = oldCamera.uuid;
+		newCamera.updateProjectionMatrix();
+
+		this.camera = newCamera;
+		this.cameras[ newCamera.uuid ] = newCamera;
+
+		if ( this.viewportCamera === oldCamera ) this.viewportCamera = newCamera;
+
+		this.signals.cameraResetted.dispatch();
+
+		// keep the selection (and thus the sidebar) in sync with the new camera instance
+
+		if ( this.selected === oldCamera ) this.select( newCamera );
+
+	},
+
+	setViewportCamera: function ( uuid ) {
+
+		this.viewportCamera = this.cameras[ uuid ] || this.camera;
+		this.signals.viewportCameraChanged.dispatch();
+
+	},
+
+	setViewportShading: function ( value ) {
+
+		this.viewportShading = value;
+		this.signals.viewportShadingChanged.dispatch();
+
+	},
+
+	//
+
+	selectMultiple: function ( objects ) {
+
+		// Replace multi-selection. objects[0] becomes the primary `this.selected`.
+		this.selectedObjects = Array.isArray( objects ) ? objects.slice() : ( objects ? [ objects ] : [] );
+		this.selected = this.selectedObjects[ 0 ] || null;
+
+		const uuid = this.selected ? this.selected.uuid : null;
+		this.config.setKey( 'selected', uuid );
+
+		this.signals.objectSelected.dispatch( this.selected );
+		this.signals.objectMultiSelected.dispatch( this.selectedObjects );
+
+	},
+
+	addToSelection: function ( object ) {
+
+		if ( object === null ) { this.selectMultiple( [] ); return; }
+		const idx = this.selectedObjects.indexOf( object );
+		if ( idx === - 1 ) this.selectedObjects.push( object );
+		// promote to primary without dropping the rest
+		this.selected = object;
+		this.config.setKey( 'selected', object.uuid );
+		this.signals.objectSelected.dispatch( object );
+		this.signals.objectMultiSelected.dispatch( this.selectedObjects );
+
+	},
+
+	toggleInSelection: function ( object ) {
+
+		if ( object === null ) { this.selectMultiple( [] ); return; }
+		const idx = this.selectedObjects.indexOf( object );
+		if ( idx === - 1 ) this.selectedObjects.push( object );
+		else this.selectedObjects.splice( idx, 1 );
+		this.selected = this.selectedObjects[ this.selectedObjects.length - 1 ] || null;
+		this.config.setKey( 'selected', this.selected ? this.selected.uuid : null );
+		this.signals.objectSelected.dispatch( this.selected );
+		this.signals.objectMultiSelected.dispatch( this.selectedObjects );
+
+	},
+
+	getSelection: function () {
+
+		return this.selectedObjects.slice();
+
+	},
+
+	mergeSelectionIntoGroup: function ( name ) {
+
+		const objs = this.getSelection();
+		if ( objs.length < 2 ) return null;
+
+		// Determine a common parent (most frequent parent among selected)
+		const counts = new Map();
+		for ( const o of objs ) {
+
+			const p = o.parent;
+			counts.set( p, ( counts.get( p ) || 0 ) + 1 );
+
+		}
+		let commonParent = objs[ 0 ].parent, max = 0;
+		for ( const [ p, n ] of counts ) if ( n > max ) { max = n; commonParent = p; }
+
+		const group = new THREE.Group();
+		group.name = name || 'Group';
+
+		let box = null;
+		objs.forEach( o => box = ( box ? box.expandByObject( o ) : new THREE.Box3().setFromObject( o ) ) );
+		if ( box ) {
+
+			const c = new THREE.Vector3();
+			box.getCenter( c );
+			group.position.copy( c );
+
+		}
+
+		commonParent.add( group );
+		group.userData = { type: 'group', merged: true };
+
+		// Reparent each selected object into the group, preserving world transform
+		objs.forEach( o => {
+
+			if ( o.parent === commonParent || o.parent !== group ) o.parent.remove( o );
+			group.attach( o ); // attach keeps world transform
+
+		} );
+
+		this.signals.objectAdded.dispatch( group );
+		this.signals.sceneGraphChanged.dispatch();
+		this.selectMultiple( [ group ] );
+		return group;
+
+	},
+
+	ungroupBySelection: function () {
+
+		const groups = this.getSelection().filter( o => o.isGroup );
+		const moved = [];
+		groups.forEach( g => {
+
+			const children = g.children.slice();
+			children.forEach( c => {
+
+				if ( c === g ) return;
+				g.parent.attach( c ); // preserve world transform
+				moved.push( c );
+
+			} );
+			if ( g.parent ) g.parent.remove( g );
+
+		} );
+		if ( moved.length ) {
+
+			this.signals.sceneGraphChanged.dispatch();
+			this.selectMultiple( moved );
+
+		}
+		return moved;
+
+	},
+
+	select: function ( object ) {
+
+		this.selector.select( object );
+
+	},
+
+	selectById: function ( id ) {
+
+		if ( id === this.camera.id ) {
+
+			this.select( this.camera );
+			return;
+
+		}
+
+		this.select( this.scene.getObjectById( id ) );
+
+	},
+
+	selectByUuid: function ( uuid ) {
+
+		var scope = this;
+
+		this.scene.traverse( function ( child ) {
+
+			if ( child.uuid === uuid ) {
+
+				scope.select( child );
+
+			}
+
+		} );
+
+	},
+
+	deselect: function () {
+
+		this.selector.deselect();
+
+	},
+
+	focus: function ( object ) {
+
+		if ( object !== undefined ) {
+
+			this.signals.objectFocused.dispatch( object );
+
+		}
+
+	},
+
+	focusById: function ( id ) {
+
+		this.focus( this.scene.getObjectById( id ) );
+
+	},
+
+	clear: function () {
+
+		this.history.clear();
+		this.storage.clear();
+
+		this.setCameraType( 'perspective' );
+		this.camera.copy( _DEFAULT_CAMERA );
+		this.signals.cameraResetted.dispatch();
+
+		this.scene.name = 'Scene';
+		this.scene.userData = {};
+		this.scene.background = null;
+		this.scene.environment = null;
+		this.scene.fog = null;
+
+		var objects = this.scene.children;
+
+		this.signals.sceneGraphChanged.active = false;
+
+		while ( objects.length > 0 ) {
+
+			this.removeObject( objects[ 0 ] );
+
+		}
+
+		this.signals.sceneGraphChanged.active = true;
+
+		this.geometries = {};
+		this.materials = {};
+		this.textures = {};
+		this.scripts = {};
+
+		this.materialsRefCounter.clear();
+
+		this.animations = {};
+		this.mixer.stopAllAction();
+
+		this.deselect();
+
+		this.backgroundType = 'Default';
+		this.environmentType = 'Default';
+
+		this.signals.editorCleared.dispatch();
+
+	},
+
+	//
+
+	fromJSON: async function ( json ) {
+
+		var loader = new THREE.ObjectLoader();
+		var camera = await loader.parseAsync( json.camera );
+
+		this.setCameraType( camera.isOrthographicCamera ? 'orthographic' : 'perspective' );
+
+		const existingUuid = this.camera.uuid;
+		const incomingUuid = camera.uuid;
+
+		// copy all properties, including uuid
+		this.camera.copy( camera );
+		this.camera.uuid = incomingUuid;
+
+		delete this.cameras[ existingUuid ]; // remove old entry [existingUuid, this.camera]
+		this.cameras[ incomingUuid ] = this.camera; // add new entry [incomingUuid, this.camera]
+
+		if ( json.controls !== undefined ) {
+
+			this.controls.fromJSON( json.controls );
+
+		}
+
+		this.signals.cameraResetted.dispatch();
+
+		this.history.fromJSON( json.history );
+		this.scripts = json.scripts;
+
+		const scene = await loader.parseAsync( json.scene );
+
+		this.backgroundType = json.backgroundType || 'Default';
+		this.environmentType = json.environmentType || 'Default';
+
+		this.setScene( scene );
+
+	},
+
+	toJSON: function () {
+
+		// scripts clean up
+
+		var scene = this.scene;
+		var scripts = this.scripts;
+
+		for ( var key in scripts ) {
+
+			var script = scripts[ key ];
+
+			if ( script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined ) {
+
+				delete scripts[ key ];
+
+			}
+
+		}
+
+		return {
+
+			metadata: {},
+			project: {
+				renderer: this.config.getKey( 'project/renderer/type' ),
+				shadows: this.config.getKey( 'project/renderer/shadows' ),
+				shadowType: this.config.getKey( 'project/renderer/shadowType' ),
+				toneMapping: this.config.getKey( 'project/renderer/toneMapping' ),
+				toneMappingExposure: this.config.getKey( 'project/renderer/toneMappingExposure' )
+			},
+			camera: this.viewportCamera.toJSON(),
+			controls: this.controls.toJSON(),
+			scene: this.scene.toJSON(),
+			scripts: this.scripts,
+			history: this.history.toJSON(),
+			backgroundType: this.backgroundType,
+			environmentType: this.environmentType
+
+		};
+
+	},
+
+	objectByUuid: function ( uuid ) {
+
+		return this.scene.getObjectByProperty( 'uuid', uuid, true );
+
+	},
+
+	execute: function ( cmd, optionalName ) {
+
+		this.history.execute( cmd, optionalName );
+
+	},
+
+	undo: function () {
+
+		this.history.undo();
+
+	},
+
+	redo: function () {
+
+		this.history.redo();
+
+	},
+
+	utils: {
+
+		save: save,
+		saveArrayBuffer: saveArrayBuffer,
+		saveString: saveString,
+		formatNumber: formatNumber
+
+	}
+
+};
+
+const link = document.createElement( 'a' );
+
+function save( blob, filename ) {
+
+	if ( link.href ) {
+
+		URL.revokeObjectURL( link.href );
+
+	}
+
+	link.href = URL.createObjectURL( blob );
+	link.download = filename || 'data.json';
+	link.dispatchEvent( new MouseEvent( 'click' ) );
+
+}
+
+function saveArrayBuffer( buffer, filename ) {
+
+	save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );
+
+}
+
+function saveString( text, filename ) {
+
+	save( new Blob( [ text ], { type: 'text/plain' } ), filename );
+
+}
+
+function formatNumber( number ) {
+
+	return new Intl.NumberFormat( 'en-us', { useGrouping: true } ).format( number );
+
+}
+
+export { Editor };