x_ite 4.7.6 → 4.7.10

package/docs/Accessing-the-External-Browser.md

@@ -8,10 +8,10 @@ If you want combine DOM access with X3D access in your JavaScript functions then
 
 ## Introduction
 
-There is the X3D object which is always available, it expects at least one function handler that is called when the browsers (<X3DCanvas> elements) are ready, or the second function handler is called if an error occurred.
+There is the X3D object which is always available, it expects one function handler that is called when the browsers (<X3DCanvas> elements) are ready, and a second function handler, that is called if an error occurred. These two arguments are optional. The return value of the X3D function is a Promise, which can be used instead of the arguments.
 
 ```js
-X3D (callback[, errorCallback]);
+Promise X3D ([callback[, errorCallback]]);
 ```
 
 The callback function is called when the browser is available. The callback function takes no arguments. The error callback is called if an error occurred, it has one argument *error.*
@@ -65,6 +65,21 @@ function (error)
 </script>
 ```
 
+### Async use of X3D object
+
+```js
+async function foo (url)
+{
+  await X3D ();
+
+  const Browser = X3D .getBrowser ();
+
+  await Browser .loadURL (new MFString (url));
+
+  console .log (`Done loading scene '${Browser .currentScene .worldURL}'.`);
+}
+```
+
 ## X3D Object
 
 ### Functions
@@ -165,7 +180,7 @@ function foo (node)
 
 #### **X3DFields**
 
-All X3DFields (SFColor, ..., MFBool, MFColor, and so on). The fields can be created using the object as construtor. **Note:** Scalar objects like SFBool, SFDouble, SFFloat, SFInt32, SFString, and SFTime have no constructor, just use the built-in JavaScript types Boolean, Number, and String.
+All X3DFields (SFColor, ..., MFBool, MFColor, and so on). The fields can be created using the object as constructor. **Note:** Scalar objects like SFBool, SFDouble, SFFloat, SFInt32, SFString, and SFTime have no constructor, just use the built-in JavaScript types Boolean, Number, and String.
 
 ```js
 // Create a new translation vector and
@@ -265,7 +280,7 @@ function spin ()
 ### The HTML
 
 ```html
-<X3DCanvas src="external-browser.x3d" onload="init ()"/>
+<X3DCanvas src="external-browser.x3d" onload="init ()"></X3DCanvas>
 
 <div class="buttons">
   <button id="center" class="button" onclick="center ()">Center</button>

package/docs/What's-New.md

@@ -1,5 +1,28 @@
 # What's New
 
+## X\_ITE v4.7.7 Released
+
+*Leipzig, 30th January 2022*: This release is primarily a bug fix release, but there are also new features.
+
+{% capture notice-text %}
+#### New Features
+
+- Output XML or VRML encoding when viewpoint is copied.
+- Added browser option "Timings", but removed attribute.
+- Return promise from X3D function.
+
+{% endcapture %}
+<div class="notice--success">{{ notice-text | markdownify }}</div>
+
+{% capture notice-text %}
+#### Bug Fixes
+
+- Prevent accidental navigation when context menu is closed.
+- Fixed copy to clipboard of viewpoint when in fullscreen mode.
+
+{% endcapture %}
+<div class="notice--success">{{ notice-text | markdownify }}</div>
+
 ## X\_ITE v4.7.6 Released
 
 *Leipzig, 23th January 2022*: This release implements the new X3Dv4 UnlitMaterial. This also means that the custom shader interface has changed:

package/docs/_config.yml

@@ -20,7 +20,7 @@ github: [metadata]
 author:
   name: *title
   avatar: "assets/images/logo.png"
-  bio: "Version 4.7.6"
+  bio: "Version 4.7.10"
   links:
     - label: "GitHub"
       icon: "fab fa-2x fa-fw fa-github"

package/docs/index.md

@@ -804,6 +804,18 @@ There is a ZIP archive available to locally install X\_ITE on your server. Compr
 
 [Download X\_ITE ZIP archive](https://create3000.github.io/code/x_ite/latest/dist/x_ite.zip)
 
+### You also can get it on NPM
+
+```sh
+$ npm install x_ite
+```
+
+It can be used in [Electron](https://www.electronjs.org) apps in the **renderer process** like this:
+
+```js
+const X3D = require ("x_ite")
+```
+
 ### Using X\_ITE with a CDN
 
 CDNs can offer a performance benefit by hosting X\_ITE on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of X\_ITE from the same CDN, it won't have to be re-downloaded. To use the X\_ITE CDN, just reference the CSS and JavaScript file in the script tag directly from the GitHub CDN or jsDelivr CDN domain.
@@ -812,22 +824,22 @@ CDNs can offer a performance benefit by hosting X\_ITE on servers spread across
 
 GitCDN serves raw files directly from GitHub with proper Content-Type headers and a super fast CDN!
 
-#### Snipped
+#### Latest Stable Version
 
-If you are on production and everything works fine, then use a numbered version.
+If you are a developer or you always wanna be up to date:
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/4.7.6/dist/x_ite.css"/>
-<script type="text/javascript" src="https://create3000.github.io/code/x_ite/4.7.6/dist/x_ite.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/latest/dist/x_ite.css"/>
+<script type="text/javascript" src="https://create3000.github.io/code/x_ite/latest/dist/x_ite.min.js"></script>
 ```
 
-#### Latest Stable Version
+#### Snipped
 
-If you are a developer or you always wanna be up to date:
+If you are on production and everything works fine, then use a numbered version.
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/latest/dist/x_ite.css"/>
-<script type="text/javascript" src="https://create3000.github.io/code/x_ite/latest/dist/x_ite.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/4.7.10/dist/x_ite.css"/>
+<script type="text/javascript" src="https://create3000.github.io/code/x_ite/4.7.10/dist/x_ite.min.js"></script>
 ```
 
 ### jsDelivr CDN
@@ -934,7 +946,7 @@ A Boolean value (`true` or `false`) to indicate whether files transferred over t
 
 ### contextMenu
 
-A Boolean value (`true` or `false`) to indicate whether a context menu should be displayed on right click. The default value for the contextMenu attribute is `true`.
+A Boolean value (`true` or `false`) to indicate whether a context menu should be displayed on right click. The default value for the contextMenu attribute is `true`. The context menu can also be extended, [see here](#extending-the-context-menu).
 {: .notice}
 
 ### notifications
@@ -972,11 +984,6 @@ A Boolean value (`true` or `false`) to indicate whether the splash screen should
 A String value with the URL that should be loaded on page load. If no src attribute is specified or the src attribute is empty an empty scene is displayed.
 {: .notice}
 
-### timings
-
-A Boolean value (`true` or `false`) to indicate whether the browser timings bubble should be displayed if the context menu option is enabled. The default value for the timings attribute is `true`. This attribute changes the facility whether browsers timings can be displayed, if browser timings are really displayed is in the hand of the user if he toggles the context menu option to true.
-{: .notice}
-
 ### url
 
 A MFString value with urls that should be loaded on page load. If no url attribute is specified or the attribute is empty an empty scene is displayed. If both src and url attribute are specified the src attribute takes precedence.
@@ -992,6 +999,27 @@ A MFString value with urls that should be loaded on page load. If no url attribu
 
 More options can be adjusted using the [Browser Object](/x_ite/reference/Browser-Services.html#browser-object) and [Browser Options](/x_ite/reference/Browser-Services.html#browser-options) for scene specific adjustments.
 
+## Extending the Context Menu
+
+The context menu is the jQuery Context Menu plugin, and it can be extended using the `items` syntax. The full documentation [can be found here](https://swisnl.github.io/jQuery-contextMenu/docs/items.html).
+
+### Example
+
+```js
+Browser .getContextMenu () .setUserMenu (function ()
+{
+  return {
+    "command-1": {
+      name: "Command 1",
+      callback: function (key, opt)
+      {
+        console .log ("Clicked on " + key);
+      },
+    },
+  };
+});
+```
+
 ## Accessing the External Browser
 
 X\_ITE is designed to provide access to a browser and its contained scene graph via JavaScript, either within an internal X3D Script node or an external HTML script.

package/docs/reference/Browser-Services.md

@@ -44,10 +44,6 @@ The real type of this class is dependent on whether the user code is inside a pr
 
 ### Methods
 
-#### X3DScene **createScene** (\[*ProfileInfo profile, ComponentInfo component1, ...*\])
-
-Creates a new scene with the given profile and components.
-
 #### void **replaceWorld** (*X3DScene*)
 
 Replace the current world with this new scene that has been loaded or constructed from somewhere.
@@ -62,9 +58,9 @@ Parse the passed URL into a X3D scene. When complete send the passed event to th
 
 If event and node are omitted a X3DScene object is returned.
 
-#### void **loadURL** (*MFString url, MFString parameter*)
+#### Promise **loadURL** (*MFString url \[, MFString parameter\]*)
 
-Load the passed URL, using the passed parameter string to possibly redirect it to another frame. If the destination is the frame containing the current scene, this method may never return.
+Load the passed URL, using the passed parameter string to possibly redirect it to another frame. If the destination is the frame containing the current scene, this method may never return. The return value is a Promise object, that is resolved when the new scene is loaded.
 
 #### X3DScene **importDocument** (*DOMObject dom*)
 
@@ -158,7 +154,13 @@ Returns a browser option with the corresponding name.
          <td>Dashboard</td>
          <td>Display browser navigation user interface.</td>
          <td>Boolean</td>
-         <td>Specified by bound NavigationInfo in content</td>
+         <td>true</td>
+      </tr>
+      <tr>
+         <td>Rubberband</td>
+         <td>Display a rubberband line when walk or fly.</td>
+         <td>Boolean</td>
+         <td>true</td>
       </tr>
       <tr>
          <td>EnableInlineViewpoints</td>
@@ -187,7 +189,7 @@ Returns a browser option with the corresponding name.
       <tr>
          <td>Shading</td>
          <td>Specify shading mode for all objects.</td>
-         <td>Wireframe, Flat, Gouraud, Phong</td>
+         <td>Point, Wireframe, Flat, Gouraud, Phong</td>
          <td>Gouraud</td>
       </tr>
       <tr>
@@ -220,6 +222,12 @@ Returns a browser option with the corresponding name.
          <td>Boolean</td>
          <td>false</td>
       </tr>
+      <tr>
+         <td>Timings</td>
+         <td>Whether browser timings should be displayed.</td>
+         <td>Boolean</td>
+         <td>false</td>
+      </tr>
    </tbody>
 </table>
 
@@ -245,7 +253,7 @@ Returns a rendering property with the corresponding *name*.
       <tr>
          <td>Shading</td>
          <td>String</td>
-         <td>The type of shading algorithm in use. Typical values are Flat, Gouraud, Phong, Wireframe.</td>
+         <td>The type of shading algorithm in use. Typical values are Flat, Gouraud, Phong, Wireframe, Point.</td>
       </tr>
       <tr>
          <td>MaxTextureSize</td>
@@ -322,7 +330,23 @@ Prints *object* to the browser's console without a newline character. Successive
 
 Prints *object* to the browser's console, inserting a newline character after the output. Successive calls to this function will result in each output presented on separate lines. The output is the implicit call to the object's `toString ()` function.
 
-### More Methods
+### VRML Methods
+
+#### String **getName** ()
+
+#### String **getVersion** ()
+
+#### Number **getCurrentSpeed** ()
+
+#### Number **getCurrentFrameRate** ()
+
+#### String **getWorldURL** ()
+
+#### void **replaceWorld** (*MFNode nodes*)
+
+#### MFNode **createVrmlFromString** (*String vrmlSyntax*)
+
+#### void **createVrmlFromURL** (*MFString url, SFNode node, String event*)
 
 #### void **addRoute** (*SFNode sourceNode, String sourceField, SFNode destinationNode, String destinationField*)
 
@@ -331,3 +355,7 @@ Add a route from the passed *sourceField* to the passed *destinationField*.
 #### void **deleteRoute** (*SFNode sourceNode, String sourceField, SFNode destinationNode, String destinationField*)
 
 Remove the route between the passed *sourceField* and passed *destinationField*, if one exists.
+
+#### void **loadURL** (*MFString url \[, MFString parameter\]*)
+
+#### void **setDescription** (*String description*)

package/docs/reference/Script-Node-Authoring-Interface.md

@@ -313,14 +313,22 @@ The script can access any inputOutput field, inputOnly fields or outputOnly fiel
 DEF SomeNode Transform { }
 
 Script {
-  inputOnly      SFVec3f pos
-  initializeOnly SFNode  node USE SomeNode
+  inputOnly      SFVec3f    set_pos
+  inputOutput    SFRotation rot
+  initializeOnly SFNode     node USE SomeNode
   url "ecmascript:
 ...
 
-function pos (value)
+// Callback for 'inputOnly SFVec3f set_pos'.
+function set_pos (value)
 {
-  node .set_translation = value;
+  node .translation = value;
+}
+
+// Callback for 'inputOutput SFRotation rot'.
+function set_rot (value)
+{
+  node .rotation = value;
 }
   "
   directOutput TRUE

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "x_ite",
-	"version": "4.7.6",
-	"revision": "1127",
+	"version": "4.7.10",
+	"revision": "1136",
 	"description": "X_ITE X3D Browser, a framework for integrating and manipulating X3D and VRML scenes in HTML.",
-	"main": "src/x_ite.js",
+	"main": "dist/x_ite.js",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/create3000/x_ite.git"
@@ -17,7 +17,9 @@
 		"wrl",
 		"JavaScript",
 		"JSON",
-		"xite"
+		"xite",
+		"node",
+		"electron"
 	],
 	"author": "Holger Seelig <holger.seelig@gmail.com>",
 	"license": "GPL-3.0",
@@ -64,7 +66,6 @@
 		"require": "^0.4.4",
 		"requirejs": ">=2.3.6",
 		"requirejs-text": ">=2.0.15",
-		"sprintf-js": ">=1.1.2",
 		"uglify-js-es6": ">=2.8.9"
 	},
 	"scripts": {

package/src/assets/components/picking.js

@@ -45,6 +45,7 @@
  *
  ******************************************************************************/
 
+
 define ([
 	"x_ite/Components",
 	"x_ite/Components/Picking/LinePickSensor",
@@ -54,7 +55,7 @@ define ([
 	"x_ite/Components/Picking/VolumePickSensor",
 	"x_ite/Components/Picking/X3DPickSensorNode",
 	"x_ite/Components/Picking/X3DPickableObject",
-	X3D .getComponentUrl ("rigid-body-physics"),
+	require .getComponentUrl ("rigid-body-physics"),
 ],
 function (Components,
           LinePickSensor,
@@ -84,4 +85,3 @@ function (Components,
 		},
 	});
 });
-

package/src/assets/components/volume-rendering.js

@@ -65,8 +65,8 @@ define ([
 	"x_ite/Components/VolumeRendering/X3DComposableVolumeRenderStyleNode",
 	"x_ite/Components/VolumeRendering/X3DVolumeDataNode",
 	"x_ite/Components/VolumeRendering/X3DVolumeRenderStyleNode",
-	X3D .getComponentUrl ("cad-geometry"),
-	X3D .getComponentUrl ("texturing-3d"),
+	require .getComponentUrl ("cad-geometry"),
+	require .getComponentUrl ("texturing-3d"),
 ],
 function (Components,
           X3DVolumeRenderingContext,

package/src/assets/shaders/webgl1/FallbackUnlit.fs

@@ -12,11 +12,10 @@ varying vec4 color;
 void
 main ()
 {
-	vec4 textureColor = x3d_NumTextures > 0 ? texture2D (x3d_Texture2D [0], texCoord .st) : vec4 (1.0);
-	vec4 finalColor   = vec4 (0.0);
+	vec4 finalColor = x3d_NumTextures > 0 ? texture2D (x3d_Texture2D [0], texCoord .st) : vec4 (1.0);
 
-	finalColor .rgb += x3d_Material .emissiveColor;
-	finalColor .a    = textureColor .a * color .a * (1.0 - x3d_Material .transparency);
+	finalColor .rgb *= x3d_Material .emissiveColor;
+	finalColor .a   *= color .a * (1.0 - x3d_Material .transparency);
 
 	gl_FragColor = finalColor;
 }

package/src/assets/shaders/webgl1/Gouraud.vs

@@ -11,7 +11,6 @@ uniform bool x3d_ColorMaterial; // true if a X3DColorNode is attached, otherwise
 
 uniform int x3d_NumLights;
 uniform x3d_LightSourceParameters x3d_LightSource [x3d_MaxLights];
-uniform bool x3d_SeparateBackColor;
 uniform x3d_MaterialParameters x3d_Material;
 
 attribute float x3d_FogDepth;

package/src/assets/shaders/webgl1/Phong.fs

@@ -12,7 +12,6 @@ uniform float x3d_AlphaCutoff;
 
 uniform int x3d_NumLights;
 uniform x3d_LightSourceParameters x3d_LightSource [x3d_MaxLights];
-uniform bool x3d_SeparateBackColor;
 uniform x3d_MaterialParameters x3d_Material;
 
 varying float fogDepth;    // fog depth

package/src/assets/shaders/webgl1/Unlit.fs

@@ -10,9 +10,6 @@ uniform int   x3d_GeometryType;
 uniform bool  x3d_ColorMaterial; // true if a X3DColorNode is attached, otherwise false
 uniform float x3d_AlphaCutoff;
 
-uniform int x3d_NumLights;
-uniform x3d_LightSourceParameters x3d_LightSource [x3d_MaxLights];
-uniform bool x3d_SeparateBackColor;
 uniform x3d_MaterialParameters x3d_Material;
 
 varying float fogDepth;    // fog depth

package/src/assets/shaders/webgl2/Gouraud.vs

@@ -12,7 +12,6 @@ uniform bool x3d_ColorMaterial; // true if a X3DColorNode is attached, otherwise
 
 uniform int x3d_NumLights;
 uniform x3d_LightSourceParameters x3d_LightSource [x3d_MaxLights];
-uniform bool x3d_SeparateBackColor;
 uniform x3d_MaterialParameters x3d_Material;
 
 in float x3d_FogDepth;

package/src/assets/shaders/webgl2/Phong.fs

@@ -9,7 +9,6 @@ uniform float x3d_AlphaCutoff;
 
 uniform int x3d_NumLights;
 uniform x3d_LightSourceParameters x3d_LightSource [x3d_MaxLights];
-uniform bool x3d_SeparateBackColor;
 uniform x3d_MaterialParameters x3d_Material;
 
 in float fogDepth;    // fog depth

package/src/assets/shaders/webgl2/Unlit.fs

@@ -7,9 +7,6 @@ uniform int   x3d_GeometryType;
 uniform bool  x3d_ColorMaterial; // true if a X3DColorNode is attached, otherwise false
 uniform float x3d_AlphaCutoff;
 
-uniform int x3d_NumLights;
-uniform x3d_LightSourceParameters x3d_LightSource [x3d_MaxLights];
-uniform bool x3d_SeparateBackColor;
 uniform x3d_MaterialParameters x3d_Material;
 
 in float fogDepth;    // fog depth

package/src/bookmarks.js

@@ -47,7 +47,7 @@
  ******************************************************************************/
 
 
-var Bookmarks = (function ()
+const Bookmarks = (function ()
 {
 "use strict";
 
@@ -61,16 +61,13 @@ var Bookmarks = (function ()
 	{
 		setup: function (array)
 		{
-			for (var a = 0; a < array .length; ++ a)
+			for (const bookmarks of array)
 			{
-				var
-					bookmarks = array [a],
-					server    = bookmarks .server;
+				const server = bookmarks .server;
 
-				for (var i = 0, length = bookmarks .length; i < length; ++ i)
+				for (const bookmark of bookmarks)
 				{
-					var
-						bookmark  = bookmarks [i],
+					const
 						component = bookmark .component,
 						test      = bookmark .test,
 						path      = bookmark .path;
@@ -91,8 +88,8 @@ var Bookmarks = (function ()
 						if (! path .match (/\.(?:x3d|x3dz|x3dv|x3dvz|x3dj|x3djz|wrl|wrz)$/))
 							continue;
 
-						var basename = path .match (/([^\/]+)\.\w+$/);
-						var name     = basename [1] .replace (/([A-Z]+)/g, ' $1');
+						const basename = path .match (/([^\/]+)\.\w+$/);
+						const name     = basename [1] .replace (/([A-Z]+)/g, ' $1');
 
 						var element = $('<span/>')
 							.addClass ('example-box')
@@ -126,7 +123,7 @@ var Bookmarks = (function ()
 		},
 		restore: function (first)
 		{
-			var url = this .browser .getLocalStorage () ["Bookmarks.url"];
+			const url = this .browser .getLocalStorage () ["Bookmarks.url"];
 
 			if (url)
 				this .loadURL (url);

package/src/examples.js

@@ -1,4 +1,4 @@
-var X_ITE_EXAMPLES = [
+const X_ITE_EXAMPLES = [
 	{ component: "CADGeometry", test: "QuadSet" },
 	{ component: "CubeMapTexturing", test: "ComposedCubeMapTexture" },
 	{ component: "CubeMapTexturing", test: "GeneratedCubeMapTexture" },