virtualx-engine/misc/dist/html/editor.html

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, user-scalable=no' />
	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
	<title>Godot Engine Web Editor ($GODOT_VERSION)</title>
	<style>
		*:focus {
			/* More visible outline for better keyboard navigation. */
			outline: 0.125rem solid hsl(220, 100%, 62.5%);
			/* Make the outline always appear above other elements. */
			/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
			position: relative;
		}

		body {
			touch-action: none;
			font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			margin: 0;
			border: 0 none;
			padding: 0;
			text-align: center;
			background-color: #333b4f;
			overflow: hidden;
		}

		a {
			color: hsl(205, 100%, 75%);
			text-decoration-color: hsla(205, 100%, 75%, 0.3);
			text-decoration-thickness: 0.125rem;
		}

		a:hover {
			filter: brightness(117.5%);
		}

		a:active {
			filter: brightness(82.5%);
		}

		#tabs-buttons {
			/* Match the default background color of the editor window for a seamless appearance. */
			background-color: #202531;
		}

		#tab-game {
			/* Use a pure black background to better distinguish the running project */
			/* from the editor window, and to use a more neutral background color (no tint). */
			background-color: black;
			/* Make the background span the entire page height. */
			min-height: 100vh;
		}

		#canvas, #gameCanvas {
			display: block;
			margin: 0;
			color: white;
		}

		/* Don't show distracting focus outlines for the main tabs' contents. */
		#tab-editor canvas:focus,
		#tab-game canvas:focus,
		#canvas:focus,
		#gameCanvas:focus {
			outline: none;
		}

		.godot {
			color: #e0e0e0;
			background-color: #3b3943;
			background-image: linear-gradient(to bottom, #403e48, #35333c);
			border: 1px solid #45434e;
			box-shadow: 0 0 1px 1px #2f2d35;
		}

		.btn {
			appearance: none;
			color: #e0e0e0;
			background-color: #262c3b;
			border: 1px solid #202531;
			padding: 0.5rem 1rem;
			margin: 0 0.5rem;
		}

		.btn:not(:disabled):hover {
			color: #e0e1e5;
			border-color: #666c7b;
		}

		.btn:active {
			border-color: #699ce8;
			color: #699ce8;
		}

		.btn:disabled {
			color: #aaa;
			border-color: #242937;
		}

		.btn.tab-btn {
			padding: 0.3rem 1rem;
		}

		.btn.close-btn {
			padding: 0.3rem 1rem;
			margin-left: -0.75rem;
			font-weight: 700;
		}


		/* Status display
		 * ============== */

		#status {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			/* don't consume click events - make children visible explicitly */
			visibility: hidden;
		}

		#status-progress {
			width: 366px;
			height: 7px;
			background-color: #38363A;
			border: 1px solid #444246;
			padding: 1px;
			box-shadow: 0 0 2px 1px #1B1C22;
			border-radius: 2px;
			visibility: visible;
		}

		@media only screen and (orientation:portrait) {
			#status-progress {
				width: 61.8%;
			}
		}

		#status-progress-inner {
			height: 100%;
			width: 0;
			box-sizing: border-box;
			transition: width 0.5s linear;
			background-color: #202020;
			border: 1px solid #222223;
			box-shadow: 0 0 1px 1px #27282E;
			border-radius: 3px;
		}

		#status-indeterminate {
			visibility: visible;
			position: relative;
		}

		#status-indeterminate > div {
			width: 4.5px;
			height: 0;
			border-style: solid;
			border-width: 9px 3px 0 3px;
			border-color: #2b2b2b transparent transparent transparent;
			transform-origin: center 21px;
			position: absolute;
		}

		#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
		#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
		#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
		#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
		#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
		#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
		#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
		#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }

		#status-notice {
			margin: 0 100px;
			line-height: 1.3;
			visibility: visible;
			padding: 4px 6px;
			visibility: visible;
		}
	</style>
</head>
<body>
	<div id="tabs-buttons">
		<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
		<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
		<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
		<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
		<button id="btn-close-game" class="btn close-btn"  disabled="disabled" onclick="closeGame()">×</button>
	</div>
	<div id='tabs'>
		<div id='tab-loader'>
			<div style="color: #e0e0e0;" id="persistence">
				<label for="videoMode" style="display: none;">Select video driver:</label><br />
				<select id="videoMode" style="display: none;">
					<option value="GLES2" selected="selected">WebGL</option>
					<option value="GLES3">WebGL 2</option>
				</select>
				<br />
				<img src="logo.svg" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
				<br />
				$GODOT_VERSION
				<br />
				<a href="releases/">Need an old version?</a>
				<br />
				<br />
				<br />
				<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" id="files" name="files" style="margin-bottom: 1rem"/>
				<br />
<a href="demo.zip">(Try this for example)</a>
				<br />
				<br />
				<button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
				<br />
				<button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
				<br />
				<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
			</div>
		</div>
		<div id='tab-editor' style="display: none;">
			<canvas id='editor-canvas' tabindex="1">
				HTML5 canvas appears to be unsupported in the current browser.<br />
				Please try updating or use a different browser.
			</canvas>
		</div>
		<div id='tab-game' style="display: none;">
			<canvas id='game-canvas' tabindex="2">
				HTML5 canvas appears to be unsupported in the current browser.<br />
				Please try updating or use a different browser.
			</canvas>
		</div>
		<div id='tab-status' style="display: none;">
			<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
			<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div id='status-notice' class='godot' style='display: none;'></div>
		</div>
	</div>

	<script src='godot.tools.js'></script>
	<script>//<![CDATA[

		var editor = null;
		var game = null;
		var setStatusMode;
		var setStatusNotice;
		var video_driver = "GLES2";

		function clearPersistence() {
			function deleteDB(path) {
				return new Promise(function(resolve, reject) {
					var req = indexedDB.deleteDatabase(path);
					req.onsuccess = function() {
						resolve();
					};
					req.onerror = function(err) {
						reject(err);
					};
					req.onblocked = function(err) {
						reject(err);
					}

				});
			}
			if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) {
				return;
			}
			Promise.all([
				deleteDB("/home/web_user"),
			]).then(function(results) {
				alert("Done.");
			}).catch(function (err) {
				alert("Error deleting local files. Please retry after reloading the page.");
			});
		}

		function selectVideoMode() {
			var select = document.getElementById('videoMode');
			video_driver = select.selectedOptions[0].value;
		}

		var tabs = [
			document.getElementById('tab-loader'),
			document.getElementById('tab-editor'),
			document.getElementById('tab-game')
		]
		function showTab(name) {
			tabs.forEach(function (elem) {
				if (elem.id == 'tab-' + name) {
					elem.style.display = 'block';
					if (name == 'editor' || name == 'game') {
						const canvas = document.getElementById(name + '-canvas');
						canvas.focus();
					}
				} else {
					elem.style.display = 'none';
				}
			});
		}

		function setButtonEnabled(id, enabled) {
			if (enabled) {
				document.getElementById(id).disabled = "";
			} else {
				document.getElementById(id).disabled = "disabled";
			}
		}

		function setLoaderEnabled(enabled) {
			setButtonEnabled('btn-tab-loader', enabled);
			setButtonEnabled('btn-tab-editor', !enabled);
			setButtonEnabled('btn-close-editor', !enabled);
		}

		function setGameTabEnabled(enabled) {
			setButtonEnabled('btn-tab-game', enabled);
			setButtonEnabled('btn-close-game', enabled);
		}

		function closeGame() {
			if (game) {
				game.requestQuit();
			}
		}

		function closeEditor() {
			closeGame();
			if (editor) {
				editor.requestQuit();
			}
		}

		function startEditor(zip) {
			const INDETERMINATE_STATUS_STEP_MS = 100;
			const persistentPaths = ['/home/web_user'];

			var editorCanvas = document.getElementById('editor-canvas');
			var gameCanvas = document.getElementById('game-canvas');
			var statusProgress = document.getElementById('status-progress');
			var statusProgressInner = document.getElementById('status-progress-inner');
			var statusIndeterminate = document.getElementById('status-indeterminate');
			var statusNotice = document.getElementById('status-notice');
			var headerDiv = document.getElementById('tabs-buttons');

			var initializing = true;
			var statusMode = 'hidden';

			showTab('status');

			var animationCallbacks = [];
			function animate(time) {
				animationCallbacks.forEach(callback => callback(time));
				requestAnimationFrame(animate);
			}
			requestAnimationFrame(animate);

			var lastScale = 0;
			var lastWidth = 0;
			var lastHeight = 0;
			function adjustCanvasDimensions() {
				var scale = window.devicePixelRatio || 1;
				var headerHeight = headerDiv.offsetHeight + 1;
				var width = window.innerWidth;
				var height = window.innerHeight - headerHeight;
				if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
					editorCanvas.width = width * scale;
					editorCanvas.height = height * scale;
					editorCanvas.style.width = width + "px";
					editorCanvas.style.height = height + "px";
					lastScale = scale;
					lastWidth = width;
					lastHeight = height;
				}
			}
			animationCallbacks.push(adjustCanvasDimensions);
			adjustCanvasDimensions();

			setStatusMode = function setStatusMode(mode) {
				if (statusMode === mode || !initializing)
					return;
				[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
					elem.style.display = 'none';
				});
				animationCallbacks = animationCallbacks.filter(function(value) {
					return (value != animateStatusIndeterminate);
				});
				switch (mode) {
					case 'progress':
						statusProgress.style.display = 'block';
						break;
					case 'indeterminate':
						statusIndeterminate.style.display = 'block';
						animationCallbacks.push(animateStatusIndeterminate);
						break;
					case 'notice':
						statusNotice.style.display = 'block';
						break;
					case 'hidden':
						break;
					default:
						throw new Error('Invalid status mode');
				}
				statusMode = mode;
			};

			function animateStatusIndeterminate(ms) {
				var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
				if (statusIndeterminate.children[i].style.borderTopColor == '') {
					Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
						child.style.borderTopColor = '';
					});
					statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
				}
			}

			setStatusNotice = function setStatusNotice(text) {
				while (statusNotice.lastChild) {
					statusNotice.removeChild(statusNotice.lastChild);
				}
				var lines = text.split('\n');
				lines.forEach((line) => {
					statusNotice.appendChild(document.createTextNode(line));
					statusNotice.appendChild(document.createElement('br'));
				});
			};

			const gameConfig = {
				'persistentPaths': persistentPaths,
				'unloadAfterInit': false,
				'canvas': gameCanvas,
				'canvasResizePolicy': 1,
				'onExit': function () {
					setGameTabEnabled(false);
					showTab('editor');
					game = null;
				},
			};

			var OnEditorExit = function () {
				showTab('loader');
				setLoaderEnabled(true);
			};
			function Execute(args) {
				const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
				const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
				const is_game = !is_editor && !is_project_manager;
				if (is_project_manager) {
					args.push('--video-driver', video_driver);
				}
				if (is_game) {
					if (game) {
						console.error("A game is already running. Close it first");
						return;
					}
					setGameTabEnabled(true);
					game = new Engine(gameConfig);
					showTab('game');
					game.init().then(function() {
						requestAnimationFrame(function() {
							game.start({'args': args}).then(function() {
								gameCanvas.focus();
							});
						});
					});
				} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
					OnEditorExit = function(code) {
						setLoaderEnabled(true);
						setTimeout(function() {
							editor.init().then(function() {
								setLoaderEnabled(false);
								OnEditorExit = function() {
									showTab('loader');
									setLoaderEnabled(true);
								};
								editor.start({'args': args});
							});
						}, 0);
						OnEditorExit = null;
					};
				}
			}

			const editorConfig = {
				'unloadAfterInit': false,
				'onProgress': function progressFunction (current, total) {
					if (total > 0) {
						statusProgressInner.style.width = current/total * 100 + '%';
						setStatusMode('progress');
						if (current === total) {
							// wait for progress bar animation
							setTimeout(() => {
								setStatusMode('indeterminate');
							}, 100);
						}
					} else {
						setStatusMode('indeterminate');
					}
				},
				'canvas': editorCanvas,
				'canvasResizePolicy': 0,
				'onExit': function() {
					if (OnEditorExit) {
						OnEditorExit();
					}
				},
				'onExecute': Execute,
				'persistentPaths': persistentPaths,
			};
			editor = new Engine(editorConfig);

			function displayFailureNotice(err) {
				var msg = err.message || err;
				console.error(msg);
				setStatusNotice(msg);
				setStatusMode('notice');
				initializing = false;
			};

			if (!Engine.isWebGLAvailable()) {
				displayFailureNotice('WebGL not available');
			} else {
				setStatusMode('indeterminate');
				editor.init('godot.tools').then(function() {
					if (zip) {
						editor.copyToFS("/tmp/preload.zip", zip);
					}
					try {
						// Avoid user creating project in the persistent root folder.
						editor.copyToFS("/home/web_user/keep", new Uint8Array());
					} catch(e) {
						// File exists
					}
					//selectVideoMode();
					showTab('editor');
					setLoaderEnabled(false);
					editor.start({'args': ['--video-driver', video_driver]}).then(function() {
						setStatusMode('hidden');
						initializing = false;
					});
				}).catch(displayFailureNotice);
			}
		};
		document.getElementById("startButton").onclick = function() {
			preloadZip(document.getElementById('zip-file')).then(function(zip) {
				startEditor(zip);
			});
		}

		function preloadZip(target) {
			return new Promise(function(resolve, reject) {
				if (target.files.length > 0) {
					target.files[0].arrayBuffer().then(function(data) {
						resolve(data);
					});
				} else {
					resolve();
				}
			});
		}
	//]]></script>
</body>
</html>
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+								<!DOCTYPE html>
 								<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
 								<head>
 									<meta charset='utf-8' />
 									<meta name='viewport' content='width=device-width, user-scalable=no' />
 									<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
-												[HTML5] Better editor HTML, small refactor.

Side and GDNative libraries are now added by engine.js , the dynlink pre
js had been deleted.

											
										
										
											2021-01-25 04:48:11 +01:00
+									<title>Godot Engine Web Editor ($GODOT_VERSION)</title>
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+									<style>
-												Make links on the HTML5 editor more readable

This also tweaks the focus style to apply to all elements for
better keyboard navigation.

(cherry picked from commit 663466b88261d46dc91e8a0b84b48eba8f0a5fbe)

											
										
										
											2021-01-07 18:46:26 +01:00
+										*:focus {
 											/* More visible outline for better keyboard navigation. */
 											outline: 0.125rem solid hsl(220, 100%, 62.5%);
 											/* Make the outline always appear above other elements. */
 											/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
 											position: relative;
 										}
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+										body {
 											touch-action: none;
-												[HTML5] Improve the editor HTML template.

											
										
										
											2020-10-27 20:40:33 +01:00
+											font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											margin: 0;
 											border: 0 none;
 											padding: 0;
 											text-align: center;
-												[HTML5] Improve the editor HTML template.

											
										
										
											2020-10-27 20:40:33 +01:00
+											background-color: #333b4f;
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											overflow: hidden;
 										}
-												Make links on the HTML5 editor more readable

This also tweaks the focus style to apply to all elements for
better keyboard navigation.

(cherry picked from commit 663466b88261d46dc91e8a0b84b48eba8f0a5fbe)

											
										
										
											2021-01-07 18:46:26 +01:00
+										a {
 											color: hsl(205, 100%, 75%);
 											text-decoration-color: hsla(205, 100%, 75%, 0.3);
 											text-decoration-thickness: 0.125rem;
 										}
 										a:hover {
 											filter: brightness(117.5%);
 										}
 										a:active {
 											filter: brightness(82.5%);
 										}
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+										#tabs-buttons {
 											/* Match the default background color of the editor window for a seamless appearance. */
 											background-color: #202531;
 										}
 										#tab-game {
 											/* Use a pure black background to better distinguish the running project */
 											/* from the editor window, and to use a more neutral background color (no tint). */
 											background-color: black;
 											/* Make the background span the entire page height. */
 											min-height: 100vh;
 										}
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+										#canvas, #gameCanvas {
 											display: block;
 											margin: 0;
 											color: white;
 										}
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+										/* Don't show distracting focus outlines for the main tabs' contents. */
 										#tab-editor canvas:focus,
 										#tab-game canvas:focus,
 										#canvas:focus,
 										#gameCanvas:focus {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											outline: none;
 										}
 										.godot {
 											color: #e0e0e0;
 											background-color: #3b3943;
 											background-image: linear-gradient(to bottom, #403e48, #35333c);
 											border: 1px solid #45434e;
 											box-shadow: 0 0 1px 1px #2f2d35;
 										}
-												[HTML5] Improve the editor HTML template.

											
										
										
											2020-10-27 20:40:33 +01:00
+										.btn {
 											appearance: none;
 											color: #e0e0e0;
 											background-color: #262c3b;
 											border: 1px solid #202531;
 											padding: 0.5rem 1rem;
 											margin: 0 0.5rem;
 										}
 										.btn:not(:disabled):hover {
 											color: #e0e1e5;
 											border-color: #666c7b;
 										}
 										.btn:active {
 											border-color: #699ce8;
 											color: #699ce8;
 										}
 										.btn:disabled {
 											color: #aaa;
 											border-color: #242937;
 										}
 										.btn.tab-btn {
 											padding: 0.3rem 1rem;
 										}
 										.btn.close-btn {
 											padding: 0.3rem 1rem;
 											margin-left: -0.75rem;
 											font-weight: 700;
 										}
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
 										/* Status display
 										 * ============== */
 										#status {
 											position: absolute;
 											left: 0;
 											top: 0;
 											right: 0;
 											bottom: 0;
 											display: flex;
 											justify-content: center;
 											align-items: center;
 											/* don't consume click events - make children visible explicitly */
 											visibility: hidden;
 										}
 										#status-progress {
 											width: 366px;
 											height: 7px;
 											background-color: #38363A;
 											border: 1px solid #444246;
 											padding: 1px;
 											box-shadow: 0 0 2px 1px #1B1C22;
 											border-radius: 2px;
 											visibility: visible;
 										}
 										@media only screen and (orientation:portrait) {
 											#status-progress {
 												width: 61.8%;
 											}
 										}
 										#status-progress-inner {
 											height: 100%;
 											width: 0;
 											box-sizing: border-box;
 											transition: width 0.5s linear;
 											background-color: #202020;
 											border: 1px solid #222223;
 											box-shadow: 0 0 1px 1px #27282E;
 											border-radius: 3px;
 										}
 										#status-indeterminate {
 											visibility: visible;
 											position: relative;
 										}
 										#status-indeterminate > div {
 											width: 4.5px;
 											height: 0;
 											border-style: solid;
 											border-width: 9px 3px 0 3px;
 											border-color: #2b2b2b transparent transparent transparent;
 											transform-origin: center 21px;
 											position: absolute;
 										}
 										#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
 										#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
 										#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
 										#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
 										#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
 										#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
 										#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
 										#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
 										#status-notice {
 											margin: 0 100px;
 											line-height: 1.3;
 											visibility: visible;
 											padding: 4px 6px;
 											visibility: visible;
 										}
 									</style>
 								</head>
 								<body>
 									<div id="tabs-buttons">
-												[HTML5] Improve the editor HTML template.

											
										
										
											2020-10-27 20:40:33 +01:00
+										<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
 										<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
 										<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
 										<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
 										<button id="btn-close-game" class="btn close-btn"  disabled="disabled" onclick="closeGame()">×</button>
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+									</div>
 									<div id='tabs'>
 										<div id='tab-loader'>
-												[HTML5] Improve the editor HTML template.

											
										
										
											2020-10-27 20:40:33 +01:00
+											<div style="color: #e0e0e0;" id="persistence">
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												<label for="videoMode" style="display: none;">Select video driver:</label><br />
 												<select id="videoMode" style="display: none;">
 													<option value="GLES2" selected="selected">WebGL</option>
 													<option value="GLES3">WebGL 2</option>
 												</select>
 												<br />
-												Fix and decrease Godot logo size in the HTML5 editor loader

The logo can no longer overflow the viewport.

(cherry picked from commit d80224934e01f19573852a50ae50d5f12ff04799)

											
										
										
											2020-12-26 17:50:58 +01:00
+												<img src="logo.svg" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
-												[HTML5] Add logo and favicon to editor html.

											
										
										
											2020-12-05 21:02:31 +01:00
+												<br />
-												[HTML5] Better editor HTML, small refactor.

Side and GDNative libraries are now added by engine.js , the dynlink pre
js had been deleted.

											
										
										
											2021-01-25 04:48:11 +01:00
+												$GODOT_VERSION
 												<br />
 												<a href="releases/">Need an old version?</a>
 												<br />
 												<br />
 												<br />
-												[HTML5] Improve the editor HTML template.

											
										
										
											2020-10-27 20:40:33 +01:00
+												<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" id="files" name="files" style="margin-bottom: 1rem"/>
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												<br />
-												[HTML5] Better editor HTML, small refactor.

Side and GDNative libraries are now added by engine.js , the dynlink pre
js had been deleted.

											
										
										
											2021-01-25 04:48:11 +01:00
+								<a href="demo.zip">(Try this for example)</a>
 												<br />
 												<br />
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+												<button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
 												<br />
 												<button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												<br />
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+												<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											</div>
 										</div>
 										<div id='tab-editor' style="display: none;">
 											<canvas id='editor-canvas' tabindex="1">
 												HTML5 canvas appears to be unsupported in the current browser.<br />
 												Please try updating or use a different browser.
 											</canvas>
 										</div>
 										<div id='tab-game' style="display: none;">
 											<canvas id='game-canvas' tabindex="2">
 												HTML5 canvas appears to be unsupported in the current browser.<br />
 												Please try updating or use a different browser.
 											</canvas>
 										</div>
 										<div id='tab-status' style="display: none;">
 											<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
 											<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
 												<div></div>
 												<div></div>
 												<div></div>
 												<div></div>
 												<div></div>
 												<div></div>
 												<div></div>
 												<div></div>
 											</div>
 											<div id='status-notice' class='godot' style='display: none;'></div>
 										</div>
 									</div>
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+									<script src='godot.tools.js'></script>
 									<script>//<![CDATA[
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+										var editor = null;
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+										var game = null;
 										var setStatusMode;
 										var setStatusNotice;
 										var video_driver = "GLES2";
 										function clearPersistence() {
 											function deleteDB(path) {
 												return new Promise(function(resolve, reject) {
 													var req = indexedDB.deleteDatabase(path);
 													req.onsuccess = function() {
 														resolve();
 													};
 													req.onerror = function(err) {
 														reject(err);
 													};
 													req.onblocked = function(err) {
 														reject(err);
 													}
 												});
 											}
-												Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)

											
										
										
											2021-02-24 22:46:43 +01:00
+											if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												return;
 											}
 											Promise.all([
-												[HTML5] Fix web editor "clear persistent data".

Was broken after update to new persistent path "/home/web_user".

(cherry picked from commit 7866cd5881a0e30dcc2ef64477e79bf8bcb69200)

											
										
										
											2021-02-08 18:09:15 +01:00
+												deleteDB("/home/web_user"),
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											]).then(function(results) {
 												alert("Done.");
 											}).catch(function (err) {
 												alert("Error deleting local files. Please retry after reloading the page.");
 											});
 										}
 										function selectVideoMode() {
 											var select = document.getElementById('videoMode');
 											video_driver = select.selectedOptions[0].value;
 										}
 										var tabs = [
 											document.getElementById('tab-loader'),
 											document.getElementById('tab-editor'),
 											document.getElementById('tab-game')
 										]
 										function showTab(name) {
 											tabs.forEach(function (elem) {
 												if (elem.id == 'tab-' + name) {
 													elem.style.display = 'block';
-												[HTML5] Editor: ensure canvas focus when switching tabs.

(cherry picked from commit b148ea2a64992c2b573229a08ead2242822210c4)

											
										
										
											2021-02-11 11:41:26 +01:00
+													if (name == 'editor' || name == 'game') {
 														const canvas = document.getElementById(name + '-canvas');
 														canvas.focus();
 													}
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												} else {
 													elem.style.display = 'none';
 												}
 											});
 										}
 										function setButtonEnabled(id, enabled) {
 											if (enabled) {
 												document.getElementById(id).disabled = "";
 											} else {
 												document.getElementById(id).disabled = "disabled";
 											}
 										}
 										function setLoaderEnabled(enabled) {
 											setButtonEnabled('btn-tab-loader', enabled);
 											setButtonEnabled('btn-tab-editor', !enabled);
 											setButtonEnabled('btn-close-editor', !enabled);
 										}
 										function setGameTabEnabled(enabled) {
 											setButtonEnabled('btn-tab-game', enabled);
 											setButtonEnabled('btn-close-game', enabled);
 										}
 										function closeGame() {
 											if (game) {
 												game.requestQuit();
 											}
 										}
 										function closeEditor() {
 											closeGame();
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+											if (editor) {
 												editor.requestQuit();
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											}
 										}
 										function startEditor(zip) {
 											const INDETERMINATE_STATUS_STEP_MS = 100;
-												[HTML5] Fix web editor "clear persistent data".

Was broken after update to new persistent path "/home/web_user".

(cherry picked from commit 7866cd5881a0e30dcc2ef64477e79bf8bcb69200)

											
										
										
											2021-02-08 18:09:15 +01:00
+											const persistentPaths = ['/home/web_user'];
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
 											var editorCanvas = document.getElementById('editor-canvas');
 											var gameCanvas = document.getElementById('game-canvas');
 											var statusProgress = document.getElementById('status-progress');
 											var statusProgressInner = document.getElementById('status-progress-inner');
 											var statusIndeterminate = document.getElementById('status-indeterminate');
 											var statusNotice = document.getElementById('status-notice');
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+											var headerDiv = document.getElementById('tabs-buttons');
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
 											var initializing = true;
 											var statusMode = 'hidden';
 											showTab('status');
 											var animationCallbacks = [];
 											function animate(time) {
 												animationCallbacks.forEach(callback => callback(time));
 												requestAnimationFrame(animate);
 											}
 											requestAnimationFrame(animate);
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+											var lastScale = 0;
 											var lastWidth = 0;
 											var lastHeight = 0;
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											function adjustCanvasDimensions() {
 												var scale = window.devicePixelRatio || 1;
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+												var headerHeight = headerDiv.offsetHeight + 1;
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												var width = window.innerWidth;
 												var height = window.innerHeight - headerHeight;
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+												if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
 													editorCanvas.width = width * scale;
 													editorCanvas.height = height * scale;
 													editorCanvas.style.width = width + "px";
 													editorCanvas.style.height = height + "px";
 													lastScale = scale;
 													lastWidth = width;
 													lastHeight = height;
 												}
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+											}
 											animationCallbacks.push(adjustCanvasDimensions);
 											adjustCanvasDimensions();
 											setStatusMode = function setStatusMode(mode) {
 												if (statusMode === mode || !initializing)
 													return;
 												[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
 													elem.style.display = 'none';
 												});
 												animationCallbacks = animationCallbacks.filter(function(value) {
 													return (value != animateStatusIndeterminate);
 												});
 												switch (mode) {
 													case 'progress':
 														statusProgress.style.display = 'block';
 														break;
 													case 'indeterminate':
 														statusIndeterminate.style.display = 'block';
 														animationCallbacks.push(animateStatusIndeterminate);
 														break;
 													case 'notice':
 														statusNotice.style.display = 'block';
 														break;
 													case 'hidden':
 														break;
 													default:
 														throw new Error('Invalid status mode');
 												}
 												statusMode = mode;
-												Add missing javascript semi-colons.

(cherry picked from commit f42284ed0721ad3a5dd1d2e8bb70f2ae3733ddde)

											
										
										
											2020-11-17 19:18:46 +01:00
+											};
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
 											function animateStatusIndeterminate(ms) {
 												var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
 												if (statusIndeterminate.children[i].style.borderTopColor == '') {
 													Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
 														child.style.borderTopColor = '';
 													});
 													statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
 												}
 											}
 											setStatusNotice = function setStatusNotice(text) {
 												while (statusNotice.lastChild) {
 													statusNotice.removeChild(statusNotice.lastChild);
 												}
 												var lines = text.split('\n');
 												lines.forEach((line) => {
 													statusNotice.appendChild(document.createTextNode(line));
 													statusNotice.appendChild(document.createElement('br'));
 												});
 											};
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+											const gameConfig = {
 												'persistentPaths': persistentPaths,
 												'unloadAfterInit': false,
 												'canvas': gameCanvas,
 												'canvasResizePolicy': 1,
 												'onExit': function () {
 													setGameTabEnabled(false);
 													showTab('editor');
 													game = null;
 												},
 											};
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+											var OnEditorExit = function () {
 												showTab('loader');
 												setLoaderEnabled(true);
 											};
 											function Execute(args) {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
 												const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
 												const is_game = !is_editor && !is_project_manager;
 												if (is_project_manager) {
 													args.push('--video-driver', video_driver);
 												}
 												if (is_game) {
 													if (game) {
 														console.error("A game is already running. Close it first");
 														return;
 													}
 													setGameTabEnabled(true);
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+													game = new Engine(gameConfig);
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+													showTab('game');
 													game.init().then(function() {
 														requestAnimationFrame(function() {
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+															game.start({'args': args}).then(function() {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+																gameCanvas.focus();
 															});
 														});
 													});
 												} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+													OnEditorExit = function(code) {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+														setLoaderEnabled(true);
 														setTimeout(function() {
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+															editor.init().then(function() {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+																setLoaderEnabled(false);
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+																OnEditorExit = function() {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+																	showTab('loader');
 																	setLoaderEnabled(true);
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+																};
 																editor.start({'args': args});
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+															});
 														}, 0);
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+														OnEditorExit = null;
 													};
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+												}
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+											}
 											const editorConfig = {
 												'unloadAfterInit': false,
 												'onProgress': function progressFunction (current, total) {
 													if (total > 0) {
 														statusProgressInner.style.width = current/total * 100 + '%';
 														setStatusMode('progress');
 														if (current === total) {
 															// wait for progress bar animation
 															setTimeout(() => {
 																setStatusMode('indeterminate');
 															}, 100);
 														}
 													} else {
 														setStatusMode('indeterminate');
 													}
 												},
 												'canvas': editorCanvas,
 												'canvasResizePolicy': 0,
 												'onExit': function() {
 													if (OnEditorExit) {
 														OnEditorExit();
 													}
 												},
 												'onExecute': Execute,
 												'persistentPaths': persistentPaths,
 											};
 											editor = new Engine(editorConfig);
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
 											function displayFailureNotice(err) {
 												var msg = err.message || err;
 												console.error(msg);
 												setStatusNotice(msg);
 												setStatusMode('notice');
 												initializing = false;
 											};
 											if (!Engine.isWebGLAvailable()) {
 												displayFailureNotice('WebGL not available');
 											} else {
 												setStatusMode('indeterminate');
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+												editor.init('godot.tools').then(function() {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+													if (zip) {
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+														editor.copyToFS("/tmp/preload.zip", zip);
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+													}
 													try {
 														// Avoid user creating project in the persistent root folder.
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+														editor.copyToFS("/home/web_user/keep", new Uint8Array());
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+													} catch(e) {
 														// File exists
 													}
 													//selectVideoMode();
 													showTab('editor');
 													setLoaderEnabled(false);
-												[HTML5] Easier HTML templates, better deinit/cleanup.

											
										
										
											2021-02-07 13:45:04 +01:00
+													editor.start({'args': ['--video-driver', video_driver]}).then(function() {
-												Add JavaScript editor html file.

											
										
										
											2020-09-14 13:18:49 +02:00
+														setStatusMode('hidden');
 														initializing = false;
 													});
 												}).catch(displayFailureNotice);
 											}
 										};
 										document.getElementById("startButton").onclick = function() {
 											preloadZip(document.getElementById('zip-file')).then(function(zip) {
 												startEditor(zip);
 											});
 										}
 										function preloadZip(target) {
 											return new Promise(function(resolve, reject) {
 												if (target.files.length > 0) {
 													target.files[0].arrayBuffer().then(function(data) {
 														resolve(data);
 													});
 												} else {
 													resolve();
 												}
 											});
 										}
 									//]]></script>
 								</body>
 								</html>