x_ite 4.2.17 → 4.7.7

package/src/x_ite.css

@@ -13,6 +13,7 @@ X3DCanvas {
 	margin: 0px;
 	padding: 0px;
 	border: 0px;
+	border-radius: 0px;
 	width: 300px;
 	height: 150px;
 }
@@ -35,19 +36,21 @@ X3DCanvas .x_ite-private-browser {
 	z-index: 0;
 	display: block;
 	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	top: 0px;
+	right: 0px;
+	bottom: 0px;
+	left: 0px;
 	margin: 0px;
 	padding: 0px;
 	border: 0px;
+	border-radius: 0px;
 }
 
 X3DCanvas .x_ite-private-surface {
 	margin: 0px;
 	padding: 0px;
 	border: 0px;
+	border-radius: 0px;
 	height: 100%;
 	margin-right: 0px;
 }
@@ -58,6 +61,7 @@ X3DCanvas canvas.x_ite-private-canvas {
 	margin: 0px;
 	padding: 0px;
 	border: 0px;
+	border-radius: 0px;
 	width: 100%;
 	height: 100%;
 }
@@ -68,6 +72,8 @@ X3DCanvas .x_ite-private-notification {
 	position: absolute;
 	top: 20px;
 	right: -4px;
+	-webkit-backdrop-filter: blur(8px);
+	backdrop-filter: blur(8px);
 	background: rgba(0,0,0,0.61803);
 	background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
 	background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
@@ -79,13 +85,15 @@ X3DCanvas .x_ite-private-notification {
 	color: white;
 	font-family: PT Sans, sans-serif;
 	font-size: 10pt;
+	letter-spacing: unset;
+	line-height: 1;
 	white-space: pre;
 	pointer-events: none;
 }
 
 X3DCanvas .x_ite-private-notification span {
 	padding: 0px 24px 0px 20px;
-	background: url(images/icon.bw.png) no-repeat 0px center;
+	background: url(assets/images/icon.bw.png) no-repeat 0px 3px;
 }
 
 X3DCanvas .x_ite-private-browser-timings {
@@ -94,6 +102,8 @@ X3DCanvas .x_ite-private-browser-timings {
 	bottom: -4px;
 	left: -4px;
 	padding: 10px 15px 14px 14px;
+	-webkit-backdrop-filter: blur(8px);
+	backdrop-filter: blur(8px);
 	background: rgba(0,0,0,0.61803);
 	background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
 	background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
@@ -106,7 +116,6 @@ X3DCanvas .x_ite-private-browser-timings {
 	color: white;
 	font-family: PT Sans, sans-serif;
 	font-size: 9pt;
-	line-height: 1.1;
 	white-space: pre;
 	pointer-events: none;
 }
@@ -118,34 +127,35 @@ X3DCanvas .x_ite-private-browser-timings tfoot,
 X3DCanvas .x_ite-private-browser-timings tr,
 X3DCanvas .x_ite-private-browser-timings th,
 X3DCanvas .x_ite-private-browser-timings td {
-	outline: 0;
-	margin: 0;
-	border: 0;
+	box-sizing: border-box;
+	outline: 0px;
+	margin: 0px;
+	border: 0px;
+	border-radius: 0px;
 	padding: 0;
 	background: none;
 	color: white;
+	font-size: inherit;
 	font-weight: normal;
 	font-style: normal;
+	letter-spacing: unset;
 	line-height: 1;
 	text-align: left;
 }
 
 X3DCanvas .x_ite-private-browser-timings table {
-	background: url(images/Time.png) no-repeat;
-}
-
-X3DCanvas .x_ite-private-browser-timings tr,
-X3DCanvas .x_ite-private-browser-timings th,
-X3DCanvas .x_ite-private-browser-timings td {
+	overflow: hidden;
+	background: url(assets/images/Time.png) no-repeat;
+	width: 100%;
+	max-width: 100%;
 	border-collapse: separate;
+	border-spacing: 2px;
+	empty-cells: show;
 }
 
 X3DCanvas .x_ite-private-browser-timings thead th {
 	padding-left: 20px;
 	padding-bottom: 5px;
-}
-
-X3DCanvas .x_ite-private-browser-timings thead th {
 	font-weight: bold;
 }
 
@@ -161,25 +171,98 @@ X3DCanvas .x_ite-private-browser-timings td {
 	padding-bottom: 2px;
 }
 
+X3DCanvas .x_ite-private-browser-timings tfoot td:first-child {
+	padding-right: 0px;
+}
+
 X3DCanvas .x_ite-private-browser-timings tfoot td {
 	padding-top: 4px;
 }
 
 X3DCanvas .x_ite-private-browser-timings button {
-	border: 0;
-	padding: 2px;
+	box-sizing: border-box;
+	border: 0px;
+	border-radius: 10px;
+	padding: 2px 2px 4px 2px;
+	width: 100%;
 	background: rgba(0,0,0,0.38196601);
 	color: white;
+	font-family: PT Sans, sans-serif;
+	font-style: italic;
 	font-size: 9pt;
+	letter-spacing: unset;
 	line-height: 1.1;
+	text-align: center;
+	pointer-events: all;
+	cursor: pointer;
+}
+
+X3DCanvas .x_ite-private-world-info-overlay {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+X3DCanvas .x_ite-private-world-info {
+	overflow-y: auto;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	-webkit-backdrop-filter: blur(8px);
+	backdrop-filter: blur(8px);
+	background: rgba(0,0,0,0.61803);
+	margin: 21pt;
+	border: 4px solid rgba(60,60,60,0.61803);
+	border-radius: 15px;
+	padding: 21pt;
+}
+
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-top,
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-title,
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info,
+X3DCanvas .x_ite-private-world-info p {
+	box-sizing: border-box;
+	outline: 0px;
+	margin: 0px;
+	border: 0px;
+	border-radius: 0px;
+	padding: 0;
+	background: none;
+	color: white;
 	font-family: PT Sans, sans-serif;
+	font-size: inherit;
+	font-weight: inherit;
+	font-style: normal;
+	letter-spacing: unset;
+	line-height: 1.2;
+	text-align: left;
+}
+
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-top {
+	font-weight: bold;
 	font-style: italic;
-	pointer-events: all;
-	cursor: default;
+	font-size: 9pt;
 }
 
-X3DCanvas .x_ite-private-browser-timings button:hover {
-	cursor: pointer;
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-title {
+	margin: 0.3em 0px 1em 0px;
+	font-weight: bold;
+	font-size: 21pt;
+}
+
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info,
+X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info p {
+	margin: 1em 0px 1em 0px;
+	font-size: 14pt;
+}
+
+X3DCanvas .x_ite-private-world-info a {
+	text-decoration: underline;
+	color: #fd9f2e;
 }
 
 /*!
@@ -198,6 +281,11 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
  * Date: 2015-09-20T18:47:54.927Z
  */
 
+/* fullscreen support */
+X3DCanvas #context-menu-layer {
+	z-index: 0 !important;
+}
+
 /* menu title */
 .x_ite-private-menu.x_ite-private-menu-title:before {
     content: "X_ITE Browser";
@@ -218,6 +306,7 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 	min-width: 120px;
 	padding: 0;
 	margin: 0;
+	margin-left: 1px;
 	white-space: pre;
 	font-family: PT Sans, sans-serif;
 	font-size: 10pt;
@@ -233,13 +322,17 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 .x_ite-private-menu .context-menu-item {
 	position: relative;
 	background-color: #222;
+	margin: 0px;
 	border-top: 1px solid #222;
 	border-bottom: 1px solid #222;
 	padding: 3px 24px 3px 24px;
 	-webkit-user-select: none;
 	   -moz-user-select: none;
 	    -ms-user-select: none;
-	        user-select: none;
+			  user-select: none;
+	font-size: 10pt;
+	line-height: 1;
+	letter-spacing: unset;
 }
 
 .x_ite-private-menu .context-menu-separator {
@@ -249,12 +342,23 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 
 .x_ite-private-menu .context-menu-item > label > input,
 .x_ite-private-menu .context-menu-item > label > textarea {
+	all: revert;
 	-webkit-user-select: text;
 	   -moz-user-select: text;
 	    -ms-user-select: text;
  	       user-select: text;
 }
 
+.x_ite-private-menu .context-menu-input > label > input[type="checkbox"] {
+	-webkit-appearance: checkbox;
+	-moz-appearance: checkbox;
+}
+
+.x_ite-private-menu .context-menu-input > label > input[type="radio"] {
+	-webkit-appearance: radio;
+	-moz-appearance: radio;
+}
+
 .x_ite-private-menu .context-menu-hover {
 	cursor: pointer;
 	background-color: #444;
@@ -289,7 +393,7 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 /* icons
    #protip:
    In case you want to use sprites for icons (which I would suggest you do) have a look at
-   http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
+   http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
    .context-menu-item.icon:before {}
  */
 
@@ -301,9 +405,13 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 /* vertically align inside labels */
 .x_ite-private-menu .context-menu-input > label > * {
 	vertical-align: top;
+	font-size: 10pt;
+	font-weight: normal;
+	letter-spacing: unset;
+	line-height: 1;
 }
 
-/* position checkboxes and radios as icons */
+/* position checkboxes and radios like icons */
 .x_ite-private-menu .context-menu-input > label > input[type="checkbox"],
 .x_ite-private-menu .context-menu-input > label > input[type="radio"] {
 	display: inline;
@@ -314,7 +422,7 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 }
 
 .x_ite-private-menu .context-menu-input > label > span {
-	margin-left: 4px;
+	margin-left: 2px;
 }
 
 .x_ite-private-menu .context-menu-input > label,
@@ -322,10 +430,13 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 .x_ite-private-menu .context-menu-input > label > textarea,
 .x_ite-private-menu .context-menu-input > label > select {
 	display: block;
+	box-sizing: border-box;
+	margin: 0px;
+	padding: 0px;
 	width: 100%;
-	-webkit-box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
+	font-size: 10pt;
+	letter-spacing: unset;
+	line-height: 1;
 }
 
 .x_ite-private-menu .context-menu-input > label > textarea {
@@ -339,6 +450,11 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 	display: none;
 }
 
+/* display submenus on left side if there is no space on right side */
+.x_ite-private-menu.x_ite-private-menu-submenus-left .context-menu-item > .context-menu-list {
+	left: unset !important;
+}
+
 .x_ite-private-menu .context-menu-item:hover > .context-menu-list {
 	display: block;
 }
@@ -350,57 +466,61 @@ X3DCanvas .x_ite-private-browser-timings button:hover {
 /* Icons */
 
 .x_ite-private-icon-viewpoint {
-	background: url("images/Viewpoint.png");
+	background: url("assets/images/Viewpoint.png");
 }
 
 .x_ite-private-icon-examine-viewer {
-	background: url("images/ExamineViewer.png");
+	background: url("assets/images/ExamineViewer.png");
 }
 
 .x_ite-private-icon-walk-viewer {
-	background: url("images/WalkViewer.png");
+	background: url("assets/images/WalkViewer.png");
 }
 
 .x_ite-private-icon-fly-viewer {
-	background: url("images/FlyViewer.png");
+	background: url("assets/images/FlyViewer.png");
 }
 
 .x_ite-private-icon-lookat-viewer {
-	background: url("images/gtk-zoom-in.png");
+	background: url("assets/images/gtk-zoom-in.png");
 }
 
 .x_ite-private-icon-plane-viewer {
-	background: url("images/PlaneViewer.png");
+	background: url("assets/images/PlaneViewer.png");
 }
 
 .x_ite-private-icon-none-viewer {
-	background: url("images/NoneViewer.png");
+	background: url("assets/images/NoneViewer.png");
 }
 
 .x_ite-private-icon-zoom-fit {
-	background: url("images/gtk-zoom-fit.png");
+	background: url("assets/images/gtk-zoom-fit.png");
 }
 
 .x_ite-private-icon-zoom-in {
-	background: url("images/gtk-zoom-in.png");
+	background: url("assets/images/gtk-zoom-in.png");
 }
 
 .x_ite-private-icon-primitive-quality {
-	background: url("images/PrimitiveQuality.png");
+	background: url("assets/images/PrimitiveQuality.png");
 }
 
 .x_ite-private-icon-texture-quality {
-	background: url("images/TextureQuality.png");
+	background: url("assets/images/TextureQuality.png");
 }
 
 .x_ite-private-icon-fullscreen {
-	background: url("images/gtk-fullscreen.png");
+	background: url("assets/images/gtk-fullscreen.png");
 }
 
 .x_ite-private-icon-leave-fullscreen {
-	background: url("images/gtk-leave-fullscreen.png");
+	background: url("assets/images/gtk-leave-fullscreen.png");
+}
+
+.x_ite-private-icon-world-info {
+	background: url("assets/images/go-next.png");
 }
 
 .x_ite-private-icon-help-about {
-	background: url("images/help-about.png");
+	background: url("assets/images/help-about.png");
 }

package/src/x_ite.html

@@ -17,13 +17,6 @@
 	<link rel="stylesheet" type="text/css" href="x_ite.css"/>
 	<script type="text/javascript" src="../node_modules/requirejs/require.js"></script>
 	<script type="text/javascript" src="x_ite.config.js"></script>
-	<script type="text/javascript" src="components/cad-geometry.config.js"></script>
-	<script type="text/javascript" src="components/geospatial.config.js"></script>
-	<script type="text/javascript" src="components/h-anim.config.js"></script>
-	<script type="text/javascript" src="components/nurbs.config.js"></script>
-	<script type="text/javascript" src="components/particle-systems.config.js"></script>
-	<script type="text/javascript" src="components/rigid-body-physics.config.js"></script>
-	<script type="text/javascript" src="components/texturing-3d.config.js"></script>
 	<script type="text/javascript" src="x_ite.js"></script>
 	<!-- X_ITE END -->
 
@@ -82,17 +75,26 @@ main.color-management .browser {
 	font-size: 52px;
 }
 
+.file {
+	margin: 10px 40px 10px 20px;
+}
+
+.file a {
+	margin-left: 10px;
+	padding-left: 10px;
+	border-left: 1px solid white;
+}
+
 .browser {
 	display: block;
 	margin: 10px 0px;
-	width: auto;
 	width: 100%;
 	height: 563px;
 	box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.75);
 }
 
 .browser:focus {
-	outline: 1px solid black;
+	outline: 2px solid black;
 }
 
 .fallback {
@@ -248,10 +250,10 @@ main.color-management .browser {
 	<script type="text/javascript">
 X3D (function ()
 {
+	const Browser = X3D .getBrowser ();
+
 	function loadURL ()
 	{
-		var Browser = X3D .getBrowser ("#browser");
-	
 		bookmarks .loadURL ($(".location-entry") .val ());
 	}
 
@@ -260,17 +262,32 @@ X3D (function ()
 		console .log (X3D .getBrowser ("#browser") .currentScene .toXMLString ());
 	}
 
-	var
-		Browser   = X3D .getBrowser ("#browser"),
-		bookmarks = new Bookmarks (Browser, $(".examples-box"));
+	function toVRMLString ()
+	{
+		console .log (X3D .getBrowser ("#browser") .currentScene .toVRMLString ());
+	}
+
+	const bookmarks = new Bookmarks (Browser, $(".examples-box"));
 
 	bookmarks .setup ([X_ITE_EXAMPLES, X_ITE_TESTS]);
-	bookmarks .restore ("https://rawgit.com/create3000/Library/master/Tests/Components/Layout/info.x3d");
+	bookmarks .restore ("https://rawgit.com/create3000/Library/main/Tests/Components/Layout/info.x3d");
 
 	$(".version") .text (Browser .name + " v" + Browser .version);
 	$(".location-entry") .keydown (function (event) { if (event .key == "Enter") loadURL (); });
 	$(".location-go") .click (loadURL);
-	$(".print-button") .click (toXMLString);
+	$(".print-xml") .click (toXMLString);
+	$(".print-vrml") .click (toVRMLString);
+
+	// Restore location entry.
+
+	const defaultLocaton = "http://www.web3d.org/x3d/content/examples/Basic/ChemicalMarkupLanguage/ButanedioicAcid.x3d";
+
+	$(".location-entry") .val (Browser .getLocalStorage () ["Bookmarks.location"] || defaultLocaton)
+
+	$(window) .on ("unload", function ()
+	{
+		Browser .getLocalStorage () ["Bookmarks.location"] = $(".location-entry") .val ();
+	});
 },
 function (error)
 {
@@ -283,29 +300,32 @@ function (error)
 		<header>
 			<div>
 				<h1 class="version"></h1>
+				<p class="file"></p>
 			</div>
 		</header>
 		<main>
 			<div>
-				<X3DCanvas id="browser" class="browser" splashScreen="true" cache="false" debug="true">
-					<p class="fallback">
-						Sorry,<br/>
-						it wasn't me!<br/>
-						<br/>
-						Your browser may not support all features required by X_ITE! You can use Firefox, Chrome,
-						or Microsoft Edge, because this is currently the choice of the choice. We will continuously
-						keep you informed on technical developments and as soon as X_ITE is running in other browser too.
-					</p>
-				</X3DCanvas>
+				<form action="javascript:alert('form submited')">
+					<X3DCanvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false">
+						<p class="fallback">
+							Sorry,<br/>
+							it wasn't me!<br/>
+							<br/>
+							Your browser may not support all features required by X_ITE! You can use Firefox, Chrome,
+							or Microsoft Edge, because this is currently the choice of the choice. We will continuously
+							keep you informed on technical developments and as soon as X_ITE is running in other browser too.
+						</p>
+					</X3DCanvas>
+				</form>
 				<div class="location-bar">
 					<input class="location-entry" value="http://www.web3d.org/x3d/content/examples/Basic/ChemicalMarkupLanguage/ButanedioicAcid.x3d"/>
-					<button class="location-go">Load URL</button>
+					<button class="location-go" type="button">Load URL</button>
 				</div>
 				<div class="buttons">
-					<a class="print-button" href="#">print</a>
+					<a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a>
 				</div>
 				<div class="links">
-					<a href="../x_ite.min.html">x_ite.min.html</a><a href="http://rawgit.com/create3000/x_ite/master/x_ite.min.html">github</a>
+					<a href="../x_ite.min.html">x_ite.min.html</a><a href="http://rawgit.com/create3000/x_ite/main/x_ite.min.html">github</a>
 				</div>
 				<div class="examples-box">
 				</div>