Merge branch 'perf/model-editor-save-tooltop' into 'main_dev'

perf: 新增3d模型编辑器tooltip

See merge request yunteng/thingskit-view!312

@@ -7,10 +7,10 @@ import { Strings } from './Strings.js';
 import { Storage as _Storage } from './Storage.js';
 import { Selector } from './Selector.js';
 
-var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
+var _DEFAULT_CAMERA = new THREE.PerspectiveCamera(50, 1, 0.01, 1000);
 _DEFAULT_CAMERA.name = 'Camera';
-_DEFAULT_CAMERA.position.set( 0, 5, 10 );
-_DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
+_DEFAULT_CAMERA.position.set(0, 5, 10);
+_DEFAULT_CAMERA.lookAt(new THREE.Vector3());
 
 function Editor() {
 
@@ -97,12 +97,12 @@ function Editor() {
 	};
 
 	this.config = new Config();
-	this.history = new _History( this );
-	this.selector = new Selector( this );
+	this.history = new _History(this);
+	this.selector = new Selector(this);
 	this.storage = new _Storage();
-	this.strings = new Strings( this.config );
+	this.strings = new Strings(this.config);
 
-	this.loader = new Loader( this );
+	this.loader = new Loader(this);
 
 	this.camera = _DEFAULT_CAMERA.clone();
 
@@ -110,7 +110,7 @@ function Editor() {
 	this.scene.name = 'Scene';
 
 	this.sceneHelpers = new THREE.Scene();
-	this.sceneHelpers.add( new THREE.HemisphereLight( 0xffffff, 0x888888, 2 ) );
+	this.sceneHelpers.add(new THREE.HemisphereLight(0xffffff, 0x888888, 2));
 
 	this.object = {};
 	this.geometries = {};
@@ -120,7 +120,7 @@ function Editor() {
 
 	this.materialsRefCounter = new Map(); // tracks how often is a material used by a 3D object
 
-	this.mixer = new THREE.AnimationMixer( this.scene );
+	this.mixer = new THREE.AnimationMixer(this.scene);
 
 	this.selected = null;
 	this.helpers = {};
@@ -130,13 +130,13 @@ function Editor() {
 	this.viewportCamera = this.camera;
 	this.viewportShading = 'default';
 
-	this.addCamera( this.camera );
+	this.addCamera(this.camera);
 
 }
 
 Editor.prototype = {
 
-	setScene: function ( scene ) {
+	setScene: function (scene) {
 
 		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
@@ -147,15 +147,15 @@ Editor.prototype = {
 		this.scene.backgroundBlurriness = scene.backgroundBlurriness;
 		this.scene.backgroundIntensity = scene.backgroundIntensity;
 
-		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
+		this.scene.userData = JSON.parse(JSON.stringify(scene.userData));
 
 		// avoid render per object
 
 		this.signals.sceneGraphChanged.active = false;
 
-		while ( scene.children.length > 0 ) {
+		while (scene.children.length > 0) {
 
-			this.addObject( scene.children[ 0 ] );
+			this.addObject(scene.children[0]);
 
 		}
 
@@ -166,91 +166,91 @@ Editor.prototype = {
 
 	//
 
-	addObject: function ( object, parent, index ) {
+	addObject: function (object, parent, index) {
 
 		var scope = this;
 
-		object.traverse( function ( child ) {
+		object.traverse(function (child) {
 
-			if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
-			if ( child.material !== undefined ) scope.addMaterial( child.material );
+			if (child.geometry !== undefined) scope.addGeometry(child.geometry);
+			if (child.material !== undefined) scope.addMaterial(child.material);
 
-			scope.addCamera( child );
-			scope.addHelper( child );
+			scope.addCamera(child);
+			scope.addHelper(child);
 
-		} );
+		});
 
-		if ( parent === undefined ) {
+		if (parent === undefined) {
 
-			this.scene.add( object );
+			this.scene.add(object);
 
 		} else {
 
-			parent.children.splice( index, 0, object );
+			parent.children.splice(index, 0, object);
 			object.parent = parent;
 
 		}
 
-		this.signals.objectAdded.dispatch( object );
+		this.signals.objectAdded.dispatch(object);
 		this.signals.sceneGraphChanged.dispatch();
 
 	},
 
-	nameObject: function ( object, name ) {
+	nameObject: function (object, name) {
 
 		object.name = name;
 		this.signals.sceneGraphChanged.dispatch();
 
 	},
 
-	removeObject: function ( object ) {
+	removeObject: function (object) {
 
-		if ( object.parent === null ) return; // avoid deleting the camera or scene
+		if (object.parent === null) return; // avoid deleting the camera or scene
 
 		var scope = this;
 
-		object.traverse( function ( child ) {
+		object.traverse(function (child) {
 
-			scope.removeCamera( child );
-			scope.removeHelper( child );
+			scope.removeCamera(child);
+			scope.removeHelper(child);
 
-			if ( child.material !== undefined ) scope.removeMaterial( child.material );
+			if (child.material !== undefined) scope.removeMaterial(child.material);
 
-		} );
+		});
 
-		object.parent.remove( object );
+		object.parent.remove(object);
 
-		this.signals.objectRemoved.dispatch( object );
+		this.signals.objectRemoved.dispatch(object);
 		this.signals.sceneGraphChanged.dispatch();
 
 	},
 
-	addGeometry: function ( geometry ) {
+	addGeometry: function (geometry) {
 
-		this.geometries[ geometry.uuid ] = geometry;
+		this.geometries[geometry.uuid] = geometry;
 
 	},
 
-	setGeometryName: function ( geometry, name ) {
+	setGeometryName: function (geometry, name) {
 
 		geometry.name = name;
 		this.signals.sceneGraphChanged.dispatch();
 
 	},
 
-	addMaterial: function ( material ) {
+	addMaterial: function (material) {
 
-		if ( Array.isArray( material ) ) {
+		if (Array.isArray(material)) {
 
-			for ( var i = 0, l = material.length; i < l; i ++ ) {
+			for (var i = 0, l = material.length; i < l; i++) {
 
-				this.addMaterialToRefCounter( material[ i ] );
+				this.addMaterialToRefCounter(material[i]);
 
 			}
 
 		} else {
 
-			this.addMaterialToRefCounter( material );
+			this.addMaterialToRefCounter(material);
 
 		}
 
@@ -258,39 +258,39 @@ Editor.prototype = {
 
 	},
 
-	addMaterialToRefCounter: function ( material ) {
+	addMaterialToRefCounter: function (material) {
 
 		var materialsRefCounter = this.materialsRefCounter;
 
-		var count = materialsRefCounter.get( material );
+		var count = materialsRefCounter.get(material);
 
-		if ( count === undefined ) {
+		if (count === undefined) {
 
-			materialsRefCounter.set( material, 1 );
-			this.materials[ material.uuid ] = material;
+			materialsRefCounter.set(material, 1);
+			this.materials[material.uuid] = material;
 
 		} else {
 
-			count ++;
-			materialsRefCounter.set( material, count );
+			count++;
+			materialsRefCounter.set(material, count);
 
 		}
 
 	},
 
-	removeMaterial: function ( material ) {
+	removeMaterial: function (material) {
 
-		if ( Array.isArray( material ) ) {
+		if (Array.isArray(material)) {
 
-			for ( var i = 0, l = material.length; i < l; i ++ ) {
+			for (var i = 0, l = material.length; i < l; i++) {
 
-				this.removeMaterialFromRefCounter( material[ i ] );
+				this.removeMaterialFromRefCounter(material[i]);
 
 			}
 
 		} else {
 
-			this.removeMaterialFromRefCounter( material );
+			this.removeMaterialFromRefCounter(material);
 
 		}
 
@@ -298,36 +298,36 @@ Editor.prototype = {
 
 	},
 
-	removeMaterialFromRefCounter: function ( material ) {
+	removeMaterialFromRefCounter: function (material) {
 
 		var materialsRefCounter = this.materialsRefCounter;
 
-		var count = materialsRefCounter.get( material );
-		count --;
+		var count = materialsRefCounter.get(material);
+		count--;
 
-		if ( count === 0 ) {
+		if (count === 0) {
 
-			materialsRefCounter.delete( material );
-			delete this.materials[ material.uuid ];
+			materialsRefCounter.delete(material);
+			delete this.materials[material.uuid];
 
 		} else {
 
-			materialsRefCounter.set( material, count );
+			materialsRefCounter.set(material, count);
 
 		}
 
 	},
 
-	getMaterialById: function ( id ) {
+	getMaterialById: function (id) {
 
 		var material;
-		var materials = Object.values( this.materials );
+		var materials = Object.values(this.materials);
 
-		for ( var i = 0; i < materials.length; i ++ ) {
+		for (var i = 0; i < materials.length; i++) {
 
-			if ( materials[ i ].id === id ) {
+			if (materials[i].id === id) {
 
-				material = materials[ i ];
+				material = materials[i];
 				break;
 
 			}
@@ -338,40 +338,40 @@ Editor.prototype = {
 
 	},
 
-	setMaterialName: function ( material, name ) {
+	setMaterialName: function (material, name) {
 
 		material.name = name;
 		this.signals.sceneGraphChanged.dispatch();
 
 	},
 
-	addTexture: function ( texture ) {
+	addTexture: function (texture) {
 
-		this.textures[ texture.uuid ] = texture;
+		this.textures[texture.uuid] = texture;
 
 	},
 
 	//
 
-	addCamera: function ( camera ) {
+	addCamera: function (camera) {
 
-		if ( camera.isCamera ) {
+		if (camera.isCamera) {
 
-			this.cameras[ camera.uuid ] = camera;
+			this.cameras[camera.uuid] = camera;
 
-			this.signals.cameraAdded.dispatch( camera );
+			this.signals.cameraAdded.dispatch(camera);
 
 		}
 
 	},
 
-	removeCamera: function ( camera ) {
+	removeCamera: function (camera) {
 
-		if ( this.cameras[ camera.uuid ] !== undefined ) {
+		if (this.cameras[camera.uuid] !== undefined) {
 
-			delete this.cameras[ camera.uuid ];
+			delete this.cameras[camera.uuid];
 
-			this.signals.cameraRemoved.dispatch( camera );
+			this.signals.cameraRemoved.dispatch(camera);
 
 		}
 
@@ -381,40 +381,40 @@ Editor.prototype = {
 
 	addHelper: function () {
 
-		var geometry = new THREE.SphereGeometry( 2, 4, 2 );
-		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
+		var geometry = new THREE.SphereGeometry(2, 4, 2);
+		var material = new THREE.MeshBasicMaterial({ color: 0xff0000, visible: false });
 
-		return function ( object, helper ) {
+		return function (object, helper) {
 
-			if ( helper === undefined ) {
+			if (helper === undefined) {
 
-				if ( object.isCamera ) {
+				if (object.isCamera) {
 
-					helper = new THREE.CameraHelper( object );
+					helper = new THREE.CameraHelper(object);
 
-				} else if ( object.isPointLight ) {
+				} else if (object.isPointLight) {
 
-					helper = new THREE.PointLightHelper( object, 1 );
+					helper = new THREE.PointLightHelper(object, 1);
 
-				} else if ( object.isDirectionalLight ) {
+				} else if (object.isDirectionalLight) {
 
-					helper = new THREE.DirectionalLightHelper( object, 1 );
+					helper = new THREE.DirectionalLightHelper(object, 1);
 
-				} else if ( object.isSpotLight ) {
+				} else if (object.isSpotLight) {
 
-					helper = new THREE.SpotLightHelper( object );
+					helper = new THREE.SpotLightHelper(object);
 
-				} else if ( object.isHemisphereLight ) {
+				} else if (object.isHemisphereLight) {
 
-					helper = new THREE.HemisphereLightHelper( object, 1 );
+					helper = new THREE.HemisphereLightHelper(object, 1);
 
-				} else if ( object.isSkinnedMesh ) {
+				} else if (object.isSkinnedMesh) {
 
-					helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
+					helper = new THREE.SkeletonHelper(object.skeleton.bones[0]);
 
-				} else if ( object.isBone === true && object.parent && object.parent.isBone !== true ) {
+				} else if (object.isBone === true && object.parent && object.parent.isBone !== true) {
 
-					helper = new THREE.SkeletonHelper( object );
+					helper = new THREE.SkeletonHelper(object);
 
 				} else {
 
@@ -423,33 +423,33 @@ Editor.prototype = {
 
 				}
 
-				const picker = new THREE.Mesh( geometry, material );
+				const picker = new THREE.Mesh(geometry, material);
 				picker.name = 'picker';
 				picker.userData.object = object;
-				helper.add( picker );
+				helper.add(picker);
 
 			}
 
-			this.sceneHelpers.add( helper );
-			this.helpers[ object.id ] = helper;
+			this.sceneHelpers.add(helper);
+			this.helpers[object.id] = helper;
 
-			this.signals.helperAdded.dispatch( helper );
+			this.signals.helperAdded.dispatch(helper);
 
 		};
 
 	}(),
 
-	removeHelper: function ( object ) {
+	removeHelper: function (object) {
 
-		if ( this.helpers[ object.id ] !== undefined ) {
+		if (this.helpers[object.id] !== undefined) {
 
-			var helper = this.helpers[ object.id ];
-			helper.parent.remove( helper );
+			var helper = this.helpers[object.id];
+			helper.parent.remove(helper);
 			helper.dispose();
 
-			delete this.helpers[ object.id ];
+			delete this.helpers[object.id];
 
-			this.signals.helperRemoved.dispatch( helper );
+			this.signals.helperRemoved.dispatch(helper);
 
 		}
 
@@ -457,43 +457,43 @@ Editor.prototype = {
 
 	//
 
-	addScript: function ( object, script ) {
+	addScript: function (object, script) {
 
-		if ( this.scripts[ object.uuid ] === undefined ) {
+		if (this.scripts[object.uuid] === undefined) {
 
-			this.scripts[ object.uuid ] = [];
+			this.scripts[object.uuid] = [];
 
 		}
 
-		this.scripts[ object.uuid ].push( script );
+		this.scripts[object.uuid].push(script);
 
-		this.signals.scriptAdded.dispatch( script );
+		this.signals.scriptAdded.dispatch(script);
 
 	},
 
-	removeScript: function ( object, script ) {
+	removeScript: function (object, script) {
 
-		if ( this.scripts[ object.uuid ] === undefined ) return;
+		if (this.scripts[object.uuid] === undefined) return;
 
-		var index = this.scripts[ object.uuid ].indexOf( script );
+		var index = this.scripts[object.uuid].indexOf(script);
 
-		if ( index !== - 1 ) {
+		if (index !== - 1) {
 
-			this.scripts[ object.uuid ].splice( index, 1 );
+			this.scripts[object.uuid].splice(index, 1);
 
 		}
 
-		this.signals.scriptRemoved.dispatch( script );
+		this.signals.scriptRemoved.dispatch(script);
 
 	},
 
-	getObjectMaterial: function ( object, slot ) {
+	getObjectMaterial: function (object, slot) {
 
 		var material = object.material;
 
-		if ( Array.isArray( material ) && slot !== undefined ) {
+		if (Array.isArray(material) && slot !== undefined) {
 
-			material = material[ slot ];
+			material = material[slot];
 
 		}
 
@@ -501,11 +501,11 @@ Editor.prototype = {
 
 	},
 
-	setObjectMaterial: function ( object, slot, newMaterial ) {
+	setObjectMaterial: function (object, slot, newMaterial) {
 
-		if ( Array.isArray( object.material ) && slot !== undefined ) {
+		if (Array.isArray(object.material) && slot !== undefined) {
 
-			object.material[ slot ] = newMaterial;
+			object.material[slot] = newMaterial;
 
 		} else {
 
@@ -515,14 +515,14 @@ Editor.prototype = {
 
 	},
 
-	setViewportCamera: function ( uuid ) {
+	setViewportCamera: function (uuid) {
 
-		this.viewportCamera = this.cameras[ uuid ];
+		this.viewportCamera = this.cameras[uuid];
 		this.signals.viewportCameraChanged.dispatch();
 
 	},
 
-	setViewportShading: function ( value ) {
+	setViewportShading: function (value) {
 
 		this.viewportShading = value;
 		this.signals.viewportShadingChanged.dispatch();
@@ -531,38 +531,38 @@ Editor.prototype = {
 
 	//
 
-	select: function ( object ) {
+	select: function (object) {
 
-		this.selector.select( object );
+		this.selector.select(object);
 
 	},
 
-	selectById: function ( id ) {
+	selectById: function (id) {
 
-		if ( id === this.camera.id ) {
+		if (id === this.camera.id) {
 
-			this.select( this.camera );
+			this.select(this.camera);
 			return;
 
 		}
 
-		this.select( this.scene.getObjectById( id ) );
+		this.select(this.scene.getObjectById(id));
 
 	},
 
-	selectByUuid: function ( uuid ) {
+	selectByUuid: function (uuid) {
 
 		var scope = this;
 
-		this.scene.traverse( function ( child ) {
+		this.scene.traverse(function (child) {
 
-			if ( child.uuid === uuid ) {
+			if (child.uuid === uuid) {
 
-				scope.select( child );
+				scope.select(child);
 
 			}
 
-		} );
+		});
 
 	},
 
@@ -572,19 +572,19 @@ Editor.prototype = {
 
 	},
 
-	focus: function ( object ) {
+	focus: function (object) {
 
-		if ( object !== undefined ) {
+		if (object !== undefined) {
 
-			this.signals.objectFocused.dispatch( object );
+			this.signals.objectFocused.dispatch(object);
 
 		}
 
 	},
 
-	focusById: function ( id ) {
+	focusById: function (id) {
 
-		this.focus( this.scene.getObjectById( id ) );
+		this.focus(this.scene.getObjectById(id));
 
 	},
 
@@ -593,7 +593,7 @@ Editor.prototype = {
 		this.history.clear();
 		this.storage.clear();
 
-		this.camera.copy( _DEFAULT_CAMERA );
+		this.camera.copy(_DEFAULT_CAMERA);
 		this.signals.cameraResetted.dispatch();
 
 		this.scene.name = 'Scene';
@@ -606,9 +606,9 @@ Editor.prototype = {
 
 		this.signals.sceneGraphChanged.active = false;
 
-		while ( objects.length > 0 ) {
+		while (objects.length > 0) {
 
-			this.removeObject( objects[ 0 ] );
+			this.removeObject(objects[0]);
 
 		}
 
@@ -632,31 +632,31 @@ Editor.prototype = {
 
 	//
 
-	fromJSON: async function ( json ) {
+	fromJSON: async function (json) {
 
 		var loader = new THREE.ObjectLoader();
-		var camera = await loader.parseAsync( json.camera );
+		var camera = await loader.parseAsync(json.camera);
 
 		const existingUuid = this.camera.uuid;
 		const incomingUuid = camera.uuid;
 
 		// copy all properties, including uuid
-		this.camera.copy( camera );
+		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]
+		delete this.cameras[existingUuid]; // remove old entry [existingUuid, this.camera]
+		this.cameras[incomingUuid] = this.camera; // add new entry [incomingUuid, this.camera]
 
 		this.signals.cameraResetted.dispatch();
 
-		this.history.fromJSON( json.history );
+		this.history.fromJSON(json.history);
 		this.scripts = json.scripts;
 
-		this.setScene( await loader.parseAsync( json.scene ) );
+		this.setScene(await loader.parseAsync(json.scene));
 
-		if ( json.environment === 'ModelViewer' ) {
+		if (json.environment === 'ModelViewer') {
 
-			this.signals.sceneEnvironmentChanged.dispatch( json.environment );
+			this.signals.sceneEnvironmentChanged.dispatch(json.environment);
 			this.signals.refreshSidebarEnvironment.dispatch();
 
 		}
@@ -670,13 +670,13 @@ Editor.prototype = {
 		var scene = this.scene;
 		var scripts = this.scripts;
 
-		for ( var key in scripts ) {
+		for (var key in scripts) {
 
-			var script = scripts[ key ];
+			var script = scripts[key];
 
-			if ( script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined ) {
+			if (script.length === 0 || scene.getObjectByProperty('uuid', key) === undefined) {
 
-				delete scripts[ key ];
+				delete scripts[key];
 
 			}
 
@@ -686,7 +686,7 @@ Editor.prototype = {
 
 		let environment = null;
 
-		if ( this.scene.environment !== null && this.scene.environment.isRenderTargetTexture === true ) {
+		if (this.scene.environment !== null && this.scene.environment.isRenderTargetTexture === true) {
 
 			environment = 'ModelViewer';
 
@@ -698,10 +698,10 @@ Editor.prototype = {
 
 			metadata: {},
 			project: {
-				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' )
+				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(),
 			scene: this.scene.toJSON(),
@@ -713,16 +713,16 @@ Editor.prototype = {
 
 	},
 
-	objectByUuid: function ( uuid ) {
+	objectByUuid: function (uuid) {
 
-		return this.scene.getObjectByProperty( 'uuid', uuid, true );
+		return this.scene.getObjectByProperty('uuid', uuid, true);
 
 	},
 
-	execute: function ( cmd, optionalName ) {
-
-		this.history.execute( cmd, optionalName );
-
+	execute: function (cmd, optionalName) {
+		this.history.execute(cmd, optionalName);
+		console.log(this)
+		this.saveTooltip?.show?.()
 	},
 
 	undo: function () {
@@ -748,37 +748,37 @@ Editor.prototype = {
 
 };
 
-const link = document.createElement( 'a' );
+const link = document.createElement('a');
 
-function save( blob, filename ) {
+function save(blob, filename) {
 
-	if ( link.href ) {
+	if (link.href) {
 
-		URL.revokeObjectURL( link.href );
+		URL.revokeObjectURL(link.href);
 
 	}
 
-	link.href = URL.createObjectURL( blob );
+	link.href = URL.createObjectURL(blob);
 	link.download = filename || 'data.json';
-	link.dispatchEvent( new MouseEvent( 'click' ) );
+	link.dispatchEvent(new MouseEvent('click'));
 
 }
 
-function saveArrayBuffer( buffer, filename ) {
+function saveArrayBuffer(buffer, filename) {
 
-	save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );
+	save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
 
 }
 
-function saveString( text, filename ) {
+function saveString(text, filename) {
 
-	save( new Blob( [ text ], { type: 'text/plain' } ), filename );
+	save(new Blob([text], { type: 'text/plain' }), filename);
 
 }
 
-function formatNumber( number ) {
+function formatNumber(number) {
 
-	return new Intl.NumberFormat( 'en-us', { useGrouping: true } ).format( number );
+	return new Intl.NumberFormat('en-us', { useGrouping: true }).format(number);
 
 }
 

+import { UIPanel, UIButton } from './libs/ui.js';
+import { useSave } from './libs/hook/useSave.js';
+
+function MenubarSaveTooltip(editor) {
+  const strings = editor.strings
+
+  const container = new UIPanel();
+  container.setClass('menu');
+  container.setStyle('height', ['100%'])
+  container.setStyle('display', ['flex'])
+  container.setStyle('justify-content', ['center'])
+  container.setStyle('align-items', ['center'])
+
+  const saveButton = new UIButton(strings.getKey('menubar/status/saveTooltip'))
+  saveButton.setStyle('height', ['24px'])
+  saveButton.setStyle('color', ['#b62623'])
+  saveButton.setStyle('padding', ['0 8px'])
+  saveButton.setStyle('dispaly', ['flex'])
+  saveButton.setStyle('visibility', ['hidden'])
+  saveButton.setStyle('border', ['1px solid #dca4ad'])
+  saveButton.setStyle('border-radius', ['4px'])
+  saveButton.setStyle('font-size', ['12px'])
+  saveButton.setStyle('justify-content', ['center'])
+  saveButton.setStyle('align-items', ['center'])
+  saveButton.setStyle('background-color', ['#eacccc'])
+
+  container.add(saveButton)
+
+  const { save } = useSave(editor)
+  container.onClick(async function () {
+    save()
+    saveButton.dom.style.setProperty('visibility', ['hidden'])
+  })
+
+  function show() {
+    saveButton.dom.style.setProperty('visibility', ['visible'])
+  }
+
+  return {
+    container,
+    show
+  };
+}
+
+export { MenubarSaveTooltip };

@@ -7,6 +7,7 @@ import { MenubarView } from './Menubar.View.js';
 import { MenubarHelp } from './Menubar.Help.js';
 // import { MenubarStatus } from './Menubar.Status.js';
 import { MenubarSave } from './Menubar.Save.js'
+import { MenubarSaveTooltip } from './Menubar.Save.Tooltip.js'
 
 function Menubar(editor) {
 
@@ -21,7 +22,10 @@ function Menubar(editor) {
 
 	// container.add( new MenubarStatus( editor ) );
 	container.add(new MenubarSave(editor))
+	const { container: showTooltipContainer, show } = new MenubarSaveTooltip(editor)
+	container.add(showTooltipContainer)
 
+	editor.saveTooltip = { show }
 	return container;
 
 }

@@ -93,6 +93,7 @@ function Strings( config ) {
 			'menubar/add/camera/orthographic': 'Orthographic',
 
 			'menubar/status/autosave': 'autosave',
+			'menubar/status/saveTooltip': 'The changes are not saved. Click here to save.',
 
 			'menubar/view': 'View',
 			'menubar/view/fullscreen': 'Fullscreen',
@@ -495,6 +496,7 @@ function Strings( config ) {
 			'menubar/add/camera/orthographic': 'Orthographique',
 
 			'menubar/status/autosave': 'enregistrement automatique',
+			'menubar/status/autosave': 'Modification non enregistrée. Cliquez ici pour enregistrer.',
 
 			'menubar/view': 'View',
 			'menubar/view/fullscreen': 'Fullscreen',
@@ -897,6 +899,7 @@ function Strings( config ) {
 			'menubar/add/camera/orthographic': '正交相机',
 
 			'menubar/status/autosave': '自动保存',
+			'menubar/status/saveTooltip': '修改未保存。点击此处保存。',
 
 			'menubar/view': '视图',
 			'menubar/view/fullscreen': '全屏',
@@ -1299,6 +1302,7 @@ function Strings( config ) {
 			'menubar/add/camera/orthographic': '平行投影',
 
 			'menubar/status/autosave': '自動保存',
+			'menubar/status/saveTooltip': '修改未保存。點擊此處保存。',
 
 			'menubar/view': '表示',
 			'menubar/view/fullscreen': 'フルスクリーン',
@@ -1700,6 +1704,7 @@ function Strings( config ) {
 			'menubar/add/camera/orthographic': '정사영',
 	
 			'menubar/status/autosave': '자동 저장',
+			'menubar/status/saveTooltip': '변경 사항이 저장되지 않았습니다.저장하려면 여기를 누르십시오.',
 	
 			'menubar/view': '보기',
 			'menubar/view/fullscreen': '전체 화면',