x_ite 8.3.0 → 8.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +5 -2
  2. package/build/bin/tests.pl +2 -0
  3. package/dist/assets/components/Annotation.js +13 -13
  4. package/dist/assets/components/Annotation.min.js +1 -1
  5. package/dist/assets/components/CADGeometry.js +13 -13
  6. package/dist/assets/components/CADGeometry.min.js +1 -1
  7. package/dist/assets/components/CubeMapTexturing.js +25 -25
  8. package/dist/assets/components/CubeMapTexturing.min.js +1 -1
  9. package/dist/assets/components/DIS.js +13 -13
  10. package/dist/assets/components/DIS.min.js +1 -1
  11. package/dist/assets/components/EventUtilities.js +9 -9
  12. package/dist/assets/components/EventUtilities.min.js +1 -1
  13. package/dist/assets/components/Geometry2D.js +19 -19
  14. package/dist/assets/components/Geometry2D.min.js +1 -1
  15. package/dist/assets/components/Geospatial.js +33 -33
  16. package/dist/assets/components/Geospatial.min.js +1 -1
  17. package/dist/assets/components/HAnim.js +18 -18
  18. package/dist/assets/components/HAnim.min.js +1 -1
  19. package/dist/assets/components/KeyDeviceSensor.js +8 -8
  20. package/dist/assets/components/KeyDeviceSensor.min.js +1 -1
  21. package/dist/assets/components/Layout.js +27 -27
  22. package/dist/assets/components/Layout.min.js +1 -1
  23. package/dist/assets/components/NURBS.js +24 -24
  24. package/dist/assets/components/NURBS.min.js +1 -1
  25. package/dist/assets/components/ParticleSystems.js +23 -23
  26. package/dist/assets/components/ParticleSystems.min.js +1 -1
  27. package/dist/assets/components/Picking.js +19 -19
  28. package/dist/assets/components/Picking.min.js +1 -1
  29. package/dist/assets/components/ProjectiveTextureMapping.js +14 -14
  30. package/dist/assets/components/ProjectiveTextureMapping.min.js +1 -1
  31. package/dist/assets/components/RigidBodyPhysics.js +17 -17
  32. package/dist/assets/components/RigidBodyPhysics.min.js +1 -1
  33. package/dist/assets/components/Scripting.js +28 -28
  34. package/dist/assets/components/Scripting.min.js +1 -1
  35. package/dist/assets/components/Text.js +24 -24
  36. package/dist/assets/components/Text.min.js +1 -1
  37. package/dist/assets/components/Texturing3D.js +46 -46
  38. package/dist/assets/components/Texturing3D.min.js +1 -1
  39. package/dist/assets/components/VolumeRendering.js +19 -19
  40. package/dist/assets/components/VolumeRendering.min.js +1 -1
  41. package/dist/assets/components/X_ITE.js +9 -9
  42. package/dist/assets/components/X_ITE.min.js +1 -1
  43. package/dist/x_ite.css +1 -1
  44. package/dist/x_ite.js +445 -294
  45. package/dist/x_ite.min.js +1 -1
  46. package/dist/x_ite.zip +0 -0
  47. package/docs/_config.yml +2 -1
  48. package/docs/_posts/custom-shaders.md +1 -1
  49. package/docs/_posts/dom-integration.md +52 -25
  50. package/docs/_posts/getting-started.md +6 -3
  51. package/docs/_posts/reference/field-services-and-objects.md +2 -34
  52. package/docs/_posts/tutorials/basic-nodes.md +2 -2
  53. package/docs/_posts/tutorials/building-a-x3d-world.md +20 -4
  54. package/docs/_posts/tutorials/building-primitive-shapes.md +4 -4
  55. package/docs/_posts/tutorials/creating-new-node-types.md +22 -0
  56. package/docs/_posts/tutorials/hello-world.md +6 -6
  57. package/docs/_posts/tutorials/improving-performance.md +2 -2
  58. package/docs/_posts/tutorials/writing-program-scripts-with-ecmascript.md +2 -2
  59. package/docs/_tabs/playground.html +74 -17
  60. package/docs/assets/css/style.scss +7 -1
  61. package/package.json +2 -2
  62. package/src/x_ite/Base/X3DArrayField.js +3 -0
  63. package/src/x_ite/Base/X3DBaseNode.js +4 -0
  64. package/src/x_ite/Base/X3DInfoArray.js +7 -3
  65. package/src/x_ite/Browser/Core/ContextMenu.js +5 -7
  66. package/src/x_ite/Browser/DOMIntegration.js +62 -55
  67. package/src/x_ite/Browser/VERSION.js +1 -1
  68. package/src/x_ite/Browser/X3DBrowser.js +1 -1
  69. package/src/x_ite/Browser/X3DBrowserContext.js +3 -0
  70. package/src/x_ite/Components/Core/X3DPrototypeInstance.js +1 -1
  71. package/src/x_ite/Components/Networking/Inline.js +21 -2
  72. package/src/x_ite/Configuration/SupportedNodes.js +1 -5
  73. package/src/x_ite/Execution/X3DScene.js +74 -58
  74. package/src/x_ite/Parser/JSONParser.js +1 -1
  75. package/src/x_ite/Parser/XMLParser.js +151 -49
  76. package/src/x_ite.html +2 -2
  77. package/webpack.config.js +2 -2
package/dist/x_ite.zip CHANGED
Binary file
package/docs/_config.yml CHANGED
@@ -20,7 +20,8 @@ timezone:
20
20
  # ↓ --------------------------
21
21
 
22
22
  title: X_ITE X3D Browser # the main title
23
- version: 8.3.0
23
+ version: 8.3.2 # x_ite latest version
24
+ x3d_latest_version: 8.3.2 # x3d latest version
24
25
 
25
26
  tagline: Step Into The Future # it will display as the sub-title
26
27
 
@@ -26,7 +26,7 @@ WebGL uses the GLSL language to write shaders that can be run across all browser
26
26
  ### X3D
27
27
 
28
28
  ```js
29
- #X3D V4.0 utf8
29
+ #X3D V{{ site.x3d_latest_version }} utf8
30
30
 
31
31
  DEF Timer TimeSensor {
32
32
  loop TRUE
@@ -46,7 +46,7 @@ window .addEventListener ("load", function ()
46
46
  </head>
47
47
  <body>
48
48
  <x3d-canvas>
49
- <X3D profile='Interactive' version='4.0'>
49
+ <X3D profile='Interactive' version='{{ site.x3d_latest_version }}'>
50
50
  <Scene>
51
51
  <Background
52
52
  skyColor='0.2 0.2 0.2'>
@@ -101,7 +101,7 @@ material .setAttribute ("diffuseColor", "1 0 0"); // Set diffuse color to red.
101
101
 
102
102
  ## Events
103
103
 
104
- You can add an event listener to any X3D element with the name of the output field you want to listen to. If the field has changed an event will occur.
104
+ You can add an event listener to any X3D element with the name of the output field you want to listen to. If the field has changed, an event will occur.
105
105
 
106
106
  Events sent from a node are of type CustomEvent and have the following properties:
107
107
 
@@ -118,7 +118,7 @@ CustomEvent: {
118
118
 
119
119
  ## Add and Remove Nodes
120
120
 
121
- The contents of the X3D scene can be modified with DOM manipulation methods to change the scene. You can add and remove nodes to build your own scene.
121
+ The content of the X3D scene can be modified with DOM manipulation methods to change the scene. You can add and remove nodes to build your own scene.
122
122
 
123
123
  ```js
124
124
  function addBlueBox ()
@@ -150,13 +150,44 @@ function removeBlueBox ()
150
150
  }
151
151
  ```
152
152
 
153
+ ## Add and Remove Routes
154
+
155
+ As well as nodes, routes can also be added and removed using DOM manipulation methods.
156
+
157
+ ```js
158
+ function addRoute ()
159
+ {
160
+ const
161
+ scene = document .querySelector ("Scene"),
162
+ route = document .createElement ("ROUTE");
163
+
164
+ // Connect a TimeSensor node with DEF name »Timer« to a ScalarInterpolator node
165
+ // with DEF name »Interpolator«.
166
+
167
+ route .setAttribute ("id", "route1");
168
+ route .setAttribute ("fromNode", "Timer");
169
+ route .setAttribute ("fromField", "fraction_changed");
170
+ route .setAttribute ("toNode", "Interpolator");
171
+ route .setAttribute ("toField", "set_fraction");
172
+
173
+ scene .appendChild (route);
174
+ }
175
+
176
+ function removeRoute ()
177
+ {
178
+ const route = document .querySelector ("#route1");
179
+
180
+ route .remove ();
181
+ }
182
+ ```
183
+
153
184
  ## Inline Nodes
154
185
 
155
- Even the contents of Inline nodes can be accessed and modified. The internal scene of the Inline node is attached to the Inline element as child every time the Inline node is completely loaded. To check if an Inline node is loaded use a LoadSensor node.
186
+ Even the content of Inline nodes can be accessed and modified. The internal scene of the Inline node is attached to the Inline element as child every time the Inline node is completely loaded. To check if an Inline node is loaded use a LoadSensor node.
156
187
 
157
188
  ```html
158
189
  <x3d-canvas>
159
- <X3D profile='Interactive' version='4.0'>
190
+ <X3D profile='Interactive' version='{{ site.x3d_latest_version }}'>
160
191
  <Scene>
161
192
  <!-- Be aware of the double quotes inside the single quotes of the url attribute, because it is an MFString field. -->
162
193
  <Inline DEF='DeerInline'
@@ -176,35 +207,31 @@ Assuming there is a Transform node with DEF name »Deer« inside the loaded scen
176
207
  const transform = document .querySelector ("[DEF='DeerInline'] [DEF='Deer']");
177
208
  ```
178
209
 
179
- ## Add and Remove Routes
210
+ ### Events of Inline Element
180
211
 
181
- As well as nodes, routes can also be added and removed using DOM manipulation methods.
212
+ Every Inline element sends a `load` or `error` event when the content of the Inline is loaded or failed loading.
182
213
 
183
214
  ```js
184
- function addRoute ()
185
- {
186
- const
187
- scene = document .querySelector ("Scene"),
188
- route = document .createElement ("ROUTE");
215
+ const inline = document .querySelector ("[DEF='DeerInline']");
189
216
 
190
- // Connect a TimeSensor node with DEF name »Timer« to a ScalarInterpolator node
191
- // with DEF name »Interpolator«.
217
+ inline .addEventListener ("load", () => console .log ("Deer loaded!"));
218
+ ```
192
219
 
193
- route .setAttribute ("id", "route1");
194
- route .setAttribute ("fromNode", "Timer");
195
- route .setAttribute ("fromField", "fraction_changed");
196
- route .setAttribute ("toNode", "Interpolator");
197
- route .setAttribute ("toField", "set_fraction");
220
+ ## Script Element
198
221
 
199
- scene .appendChild (route);
200
- }
222
+ If you use a HTML instead of a XHTML page then there is already a \<script\> element, as you know. To avoid collisions you must add a different type. A proper type is `model/x3d+xml`, which prevents the web browser from interpreting the content as JavaScript, and X_ITE can take over the content.
201
223
 
202
- function removeRoute ()
224
+ ```html
225
+ <Script type='model/x3d+xml' DEF='ChangeColorScript'>
226
+ <field accessType='inputOnly' type='SFBool' name='set_over'></field>
227
+ <field accessType='outputOnly' type='SFColor' name='diffuseColor_changed'></field>
228
+ <![CDATA[ecmascript:
229
+ function set_over (value, time)
203
230
  {
204
- const route = document .querySelector ("#route1");
205
-
206
- route .remove ();
231
+ diffuseColor_changed = value ? new SFColor (1, 0, 0) : new SFColor (0, 0, 1);
207
232
  }
233
+ ]]>
234
+ </Script>
208
235
  ```
209
236
 
210
237
  ## See Also
@@ -819,10 +819,13 @@ There is a ZIP archive available to locally install X_ITE on your server. Compre
819
819
  $ npm install x_ite
820
820
  ```
821
821
 
822
- It can be used in [Electron](https://www.electronjs.org){:target="_blank"} apps in the **renderer process** like this:
822
+ It can be used in [Electron](https://www.electronjs.org){:target="_blank"} apps in a preload script of the **renderer process** like this:
823
823
 
824
824
  ```js
825
- const X3D = require ("x_ite")
825
+ window .addEventListener ("DOMContentLoaded", () =>
826
+ {
827
+ const X3D = require ("x_ite")
828
+ })
826
829
  ```
827
830
 
828
831
  Make sure that contextIsolation is set to **false** when creating a BrowserWindow instance.
@@ -865,7 +868,7 @@ If you are on production and everything works fine, then use a numbered version.
865
868
 
866
869
  ## Embedding X_ITE within a Web Page
867
870
 
868
- To display your X3D scene in a HTML5 page first save your scene as X3D XML Encoded file, X3D JSON Encoded file, or as X3D Classic Encoded file, i.e. create a file with the extension .x3d, .x3dj, .x3dv, or .wrl.
871
+ To display your X3D scene in a HTML5 page, first save your scene as X3D XML Encoded file, X3D JSON Encoded file, or as X3D Classic Encoded file, i.e. create a file with the extension .x3d, .x3dj, .x3dv, or .wrl.
869
872
 
870
873
  The HTML5 page is quite easy to create, the HTML5 code below shows you the minimum requirements. The path to the X3D scene is specified in the *src* attribute of the \<x3d-canvas\> element.
871
874
 
@@ -802,41 +802,9 @@ An integer containing the number of elements in the array. Assigning an integer
802
802
 
803
803
  Returns true if the passed MF* *array* of the same type is equals to this object, otherwise false.
804
804
 
805
- #### SF* **pop** ()
805
+ #### Other Array functions
806
806
 
807
- The `pop` method removes the last element from an array and returns that value to the caller. The return value is the removed element from the array; `undefined` if the array is empty.
808
-
809
- #### Number **push** (*element1 [, ..., elementN]*)
810
-
811
- The `push` method appends values to an array. The return value is the new length of the object upon which the method was called.
812
-
813
- #### SF* **shift** ()
814
-
815
- The `shift` method removes the first element from an array and returns that value to the caller. The return value is the removed element from the array; `undefined` if the array is empty.
816
-
817
- #### Array **splice** (*start [, deleteCount, [item1, item2, ...]]*)
818
-
819
- #### start
820
-
821
- Index at which to start changing the array (with origin 0). If greater than the length of the array, actual starting index will be set to the length of the array. If negative, will begin that many elements from the end of the array (with origin 1) and will be set to 0 if absolute value is greater than the length of the array.
822
-
823
- #### deleteCount *optional*
824
-
825
- An integer indicating the number of old array elements to remove. If *deleteCount* is 0, no elements are removed. In this case, you should specify at least one new element. If *deleteCount* is greater than the number of elements left in the array starting at start, then all of the elements through the end of the array will be deleted.
826
-
827
- If *deleteCount* is omitted, or if its value is larger than array.length - start, then all of the elements beginning with start index on through the end of the array will be deleted.
828
-
829
- #### item1, item2, ... *optional*
830
-
831
- The elements to add to the array, beginning at the start index. If you don't specify any elements, `splice` will only remove elements from the array.
832
-
833
- #### Return value
834
-
835
- An MF* array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.
836
-
837
- #### Number **unshift** (*element1 [, ..., elementN]*)
838
-
839
- The `unshift` method inserts the given values to the beginning of an X3DArrayField object. The return value is the new length of the object upon which the method was called.
807
+ Common Array functions like `at`, `concat`, `entries`, `every`, `fill`, `filter`, `find`, `findIndex`, `findLast`, `findLastIndex`, `flat`, `flatMap`, `forEach`, `includes`, `indexOf`, `join`, `keys`, `lastIndexOf`, `map`, `pop`, `push`, `reduce`, `reduceRight`, `shift`, `slice`, `some`, `splice`, `unshift`, `values` are also available.
840
808
 
841
809
  ## MFBool Object
842
810
 
@@ -28,7 +28,7 @@ Here is a typical X3D Classic Encoded file with a single node:
28
28
 
29
29
  ```xml
30
30
  <?xml version="1.0" encoding="UTF-8"?>
31
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
31
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
32
32
  <Scene>
33
33
  <PlaneSensor DEF='Sensor'
34
34
  offset='0 2 0'/>
@@ -46,7 +46,7 @@ Here is a typical X3D Classic Encoded file with a single node:
46
46
  ### Classic Encoding
47
47
 
48
48
  ```js
49
- #X3D V4.0 utf8
49
+ #X3D V{{ site.x3d_latest_version }} utf8
50
50
 
51
51
  # A sample file with a simple scene
52
52
 
@@ -23,7 +23,7 @@ X3D files contain:
23
23
 
24
24
  ```xml
25
25
  <?xml version="1.0" encoding="UTF-8"?>
26
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
26
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
27
27
  <Scene>
28
28
  <!-- A Cylinder -->
29
29
  <Shape>
@@ -41,7 +41,7 @@ X3D files contain:
41
41
  ### Classic Encoding
42
42
 
43
43
  ```js
44
- #X3D V4.0 utf8
44
+ #X3D V{{ site.x3d_latest_version }} utf8
45
45
  # A Cylinder
46
46
  Shape {
47
47
  appearance Appearance {
@@ -64,10 +64,10 @@ Shape {
64
64
 
65
65
  ## Understanding the header
66
66
 
67
- **\#X3D V4.0 utf8**
67
+ **\#X3D V{{ site.x3d_latest_version }} utf8**
68
68
 
69
69
  - **\#X3D:** File contains X3D text
70
- - **V4.0 :** Text conforms to version 4.0 syntax
70
+ - **V{{ site.x3d_latest_version }} :** Text conforms to version {{ site.x3d_latest_version }} syntax
71
71
  - **utf8 :** Text uses UTF8 character set
72
72
 
73
73
  ## Understanding UTF8
@@ -150,9 +150,25 @@ Every field has:
150
150
  - Fields can be listed in any order
151
151
  - The order doesn't affect the node
152
152
 
153
+ ## Placing nodes
154
+
155
+ Every node has a »containerField« attribute with a default value, which is different for each node type. You can change the value if needed.
156
+
157
+ ```xml
158
+ <Collision>
159
+ <Shape containerField='proxy'>
160
+ <Box/>
161
+ </Shape>
162
+ <Transform>
163
+ <!-- ... -->
164
+ </Transform>
165
+ </Collision>
166
+ ```
167
+
153
168
  ## Summary
154
169
 
155
170
  - The file header gives the version and encoding
156
171
  - Nodes describe scene content
157
172
  - Fields and values specify node attributes
173
+ - containerField attribute can be changed.
158
174
  - Everything is case sensitive
@@ -100,7 +100,7 @@ Text { ... }
100
100
 
101
101
  ```xml
102
102
  <?xml version="1.0" encoding="UTF-8"?>
103
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
103
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
104
104
  <Scene>
105
105
  <Shape>
106
106
  <Appearance>
@@ -116,7 +116,7 @@ Text { ... }
116
116
  ### Classic Encoding
117
117
 
118
118
  ```js
119
- #X3D V4.0 utf8
119
+ #X3D V{{ site.x3d_latest_version }} utf8
120
120
  # A cylinder
121
121
  Shape {
122
122
  appearance Appearance {
@@ -149,7 +149,7 @@ Shape {
149
149
 
150
150
  ```xml
151
151
  <?xml version="1.0" encoding="UTF-8"?>
152
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
152
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
153
153
  <Scene>
154
154
  <Shape>
155
155
  <Appearance>
@@ -173,7 +173,7 @@ Shape {
173
173
  ### Classic Encoding
174
174
 
175
175
  ```js
176
- #X3D V4.0 utf8
176
+ #X3D V{{ site.x3d_latest_version }} utf8
177
177
 
178
178
  Shape {
179
179
  appearance Appearance {
@@ -153,10 +153,15 @@ The new node type can be used like any other type.
153
153
  ### XML Encoding
154
154
 
155
155
  ```xml
156
+ <!-- Official Syntax -->
156
157
  <ProtoInstance name='BouncingBall'>
157
158
  <fieldValue name='cycleInterval' value='2'/>
158
159
  <fieldValue name='bounceHeight' value='3'/>
159
160
  </ProtoInstance>
161
+ <!-- Short Syntax -->
162
+ <BouncingBall
163
+ cycleInterval='2'
164
+ bounceHeight='3'/>
160
165
  ```
161
166
 
162
167
  ### Classic Encoding
@@ -184,6 +189,23 @@ For example, if the first node is a geometry node:
184
189
 
185
190
  The new node type can be used wherever the first node of the prototype body can be used.
186
191
 
192
+ - In XML the default value of the »containerField« attribute of a ProtoInstance element is »children«. Change this attribute to whatever value you need.
193
+
194
+ ### XML Encoding
195
+
196
+ ```xml
197
+ <Shape>
198
+ <!-- Official Syntax -->
199
+ <ProtoInstance name='Torus' containerField='geometry'>
200
+ <!-- ... -->
201
+ </ProtoInstance>
202
+ </Shape>
203
+ <Shape>
204
+ <!-- Short Syntax -->
205
+ <Torus containerField='geometry' .../>
206
+ </Shape>
207
+ ```
208
+
187
209
  ## A sample prototype use
188
210
 
189
211
  Create a **BouncingBall** node type that:
@@ -31,7 +31,7 @@ As first a very easy example, we will create a sphere with a texture and a text
31
31
 
32
32
  ```xml
33
33
  <?xml version="1.0" encoding="UTF-8"?>
34
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
34
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
35
35
  <Scene>
36
36
  <Transform>
37
37
  <Shape>
@@ -45,7 +45,7 @@ As first a very easy example, we will create a sphere with a texture and a text
45
45
  ### Classic Encoding
46
46
 
47
47
  ```js
48
- #X3D V4.0 utf8
48
+ #X3D V{{ site.x3d_latest_version }} utf8
49
49
 
50
50
  Transform {
51
51
  children Shape {
@@ -62,7 +62,7 @@ Now we have a sphere, but we don't see if it is rotating, let's assign a texture
62
62
 
63
63
  ```xml
64
64
  <?xml version="1.0" encoding="UTF-8"?>
65
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
65
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
66
66
  <Scene>
67
67
  <Transform>
68
68
  <Shape>
@@ -80,7 +80,7 @@ Now we have a sphere, but we don't see if it is rotating, let's assign a texture
80
80
  ### Classic Encoding
81
81
 
82
82
  ```js
83
- #X3D V4.0 utf8
83
+ #X3D V{{ site.x3d_latest_version }} utf8
84
84
 
85
85
  Transform {
86
86
  children Shape {
@@ -119,7 +119,7 @@ Now the sphere looks like an earth and you are very curious how the text will be
119
119
 
120
120
  ```xml
121
121
  <?xml version="1.0" encoding="UTF-8"?>
122
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
122
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
123
123
  <Scene>
124
124
  <Viewpoint
125
125
  description='Home'
@@ -155,7 +155,7 @@ Now the sphere looks like an earth and you are very curious how the text will be
155
155
  ### Classic Encoding
156
156
 
157
157
  ```js
158
- #X3D V4.0 utf8
158
+ #X3D V{{ site.x3d_latest_version }} utf8
159
159
 
160
160
  META "title" "about:hello_world"
161
161
 
@@ -76,7 +76,7 @@ Prototyping objects that are used frequently with a few modifications is another
76
76
 
77
77
  ```xml
78
78
  <?xml version="1.0" encoding="UTF-8"?>
79
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
79
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
80
80
  <head>
81
81
  <meta name='comment' content='World of Titania'/>
82
82
  <meta name='created' content='Fri, 29 Jun 2018 13:24:34 GMT'/>
@@ -148,7 +148,7 @@ function set_whichChoice (value)
148
148
  ### Classic Encoding
149
149
 
150
150
  ```js
151
- #X3D V4.0 utf8 Titania V4.3.0
151
+ #X3D V{{ site.x3d_latest_version }} utf8
152
152
 
153
153
  PROTO BooleanSwitch [
154
154
  inputOutput SFBool whichChoice FALSE
@@ -337,7 +337,7 @@ ROUTE Bouncer.value_changed TO Ball.set_translation
337
337
 
338
338
  ```xml
339
339
  <?xml version="1.0" encoding="UTF-8"?>
340
- <X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
340
+ <X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
341
341
  <Scene>
342
342
  <Transform DEF='Ball'>
343
343
  <Shape>
@@ -390,7 +390,7 @@ function set_fraction (fraction, time)
390
390
  ### Classic Encoding
391
391
 
392
392
  ```js
393
- #X3D V4.0 utf8 Titania V4.3.0
393
+ #X3D V{{ site.x3d_latest_version }} utf8
394
394
 
395
395
  DEF Ball Transform {
396
396
  children [
@@ -28,11 +28,55 @@ table td {
28
28
 
29
29
  /* Editor */
30
30
 
31
+ html {
32
+ --editor-background: rgba(0,0,0,0.2);
33
+ --editor-gutter: rgba(255,255,255,0.05);
34
+ --editor-active-line: #202d40;
35
+ --editor-selected-word: #274f79;
36
+ --xml-tag: var(--text-color);
37
+ --xml-tag-name: #5a9cd8;
38
+ --xml-attribute-name: #9fdcfe;
39
+ --xml-attribute-equals: #d4d4d4;
40
+ --xml-attribute-value: #cd9177;
41
+ --json-parenthesis: #fdd601;
42
+ --json-identifier: #9fdcfe;
43
+ --json-variable: #9fdcfe;
44
+ --json-numeric: #b7cea5;
45
+ --json-string: #cd9177;
46
+ --json-boolean: #5a9cd8;
47
+ --json-punctuation: #d4d4d4;
48
+ --system-red: rgb(255, 69, 58);
49
+ --system-yellow: rgb(255, 214, 10);
50
+ --system-blue: rgb(10, 132, 255);
51
+ }
52
+
53
+ html[data-mode=light] {
54
+ --editor-background: rgba(0,0,0,0.01);
55
+ --editor-gutter: #f3f3f3;
56
+ --editor-active-line: #d7e5f8;
57
+ --editor-selected-word: #aed6ff;
58
+ --xml-tag: var(--text-color);
59
+ --xml-tag-name: #7e0000;
60
+ --xml-attribute-name: #e20200;
61
+ --xml-attribute-equals: #000000;
62
+ --xml-attribute-value: #1000ff;
63
+ --json-parenthesis: #369327;
64
+ --json-identifier: #1251a6;
65
+ --json-variable: #1251a6;
66
+ --json-numeric: #1e8657;
67
+ --json-string: #a01515;
68
+ --json-boolean: #1000ff;
69
+ --json-punctuation: #000000;
70
+ --system-red: rgb(255, 59, 48);
71
+ --system-yellow: rgb(255, 204, 0);
72
+ --system-blue: rgb(0, 122, 255);
73
+ }
74
+
31
75
  #editor, .console {
32
76
  outline: none;
33
77
  border: none;
34
78
  padding: 0.5rem;
35
- background: rgba(0,0,0,0.2);
79
+ background: var(--editor-background);
36
80
  width: 100%;
37
81
  height: 100%;
38
82
  resize: none;
@@ -43,63 +87,76 @@ table td {
43
87
  }
44
88
 
45
89
  .ace_gutter {
46
- background: rgba(255,255,255,0.05) !important;
90
+ background: var(--editor-gutter) !important;
91
+ }
92
+
93
+ .ace_gutter-active-line,
94
+ .ace_active-line {
95
+ background: var(--editor-active-line) !important;
96
+ }
97
+
98
+ .ace_selected-word,
99
+ .ace_selection {
100
+ border: none !important;
101
+ background: var(--editor-selected-word) !important;
47
102
  }
48
103
 
49
104
  /* XML */
50
105
 
51
106
  .ace_tag-open, .ace_tag-close, .ace_end-tag-open {
52
- color: var(--text-color) !important;
107
+ color: var(--xml-tag) !important;
53
108
  }
54
109
 
55
110
  .ace_tag-name {
56
- color: #5a9cd8 !important;
111
+ color: var(--xml-tag-name) !important;
57
112
  }
58
113
 
59
114
  .ace_attribute-name {
60
- color: #9fdcfe !important;
115
+ color: var(--xml-attribute-name) !important;
61
116
  }
62
117
 
63
118
  .ace_attribute-equals {
64
- color: #d4d4d4 !important;
119
+ color: var(--xml-attribute-equals) !important;
65
120
  }
66
121
 
67
122
  .ace_attribute-value {
68
- color: #cd9177 !important;
123
+ color: var(--xml-attribute-value) !important;
69
124
  }
70
125
 
71
126
  /* JSON */
72
127
 
73
128
  .ace_paren {
74
- color: #fdd601 !important;
129
+ color: var(--json-parenthesis) !important;
75
130
  }
76
131
 
77
132
  .ace_identifier {
78
- color: #9fdcfe !important;
133
+ color: var(--json-identifier) !important;
79
134
  }
80
135
 
81
136
  .ace_variable {
82
- color: #9fdcfe !important;
137
+ color: var(--json-variable) !important;
83
138
  }
84
139
 
85
- .ace_numeric {
86
- color: #b7cea5 !important;
140
+ .ace_numeric,
141
+ .ace_keyword.ace_operator {
142
+ color: var(--json-numeric) !important;
87
143
  }
88
144
 
89
145
  .ace_string {
90
- color: #cd9177 !important;
146
+ color: var(--json-string) !important;
91
147
  }
92
148
 
93
149
  .ace_boolean {
94
- color: #5a9cd8 !important;
150
+ color: var(--json-boolean) !important;
151
+ }
152
+
153
+ .ace_punctuation.ace_operator {
154
+ color: var(--json-punctuation) !important;
95
155
  }
96
156
 
97
157
  /* Console */
98
158
 
99
159
  .console {
100
- --system-red: rgb(255, 69, 58);
101
- --system-yellow: rgb(255, 214, 10);
102
- --system-blue: rgb(10, 132, 255);
103
160
  overflow: scroll;
104
161
  }
105
162
 
@@ -12,12 +12,14 @@ $tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
12
12
  html {
13
13
  --nav-border-color: rgba(158,158,158,0.17);
14
14
  --nav-active-page: rgb(168, 182, 206);
15
+ --h2-color: #e4e45d;
15
16
  --h4-color: rgb(175, 206, 255);
16
17
  --example-background-color: rgba(27,27,30,0.4);
17
18
  --button-background-color: black;
18
19
  }
19
20
 
20
21
  html[data-mode=light] {
22
+ --h2-color: #cbca00;
21
23
  --button-background-color: white;
22
24
  }
23
25
 
@@ -69,7 +71,7 @@ a {
69
71
  }
70
72
 
71
73
  .post h2 {
72
- color: #e4e45d;
74
+ color: var(--h2-color);
73
75
  }
74
76
 
75
77
  .post h3 {
@@ -84,6 +86,10 @@ a {
84
86
  color: var(--h4-color);
85
87
  }
86
88
 
89
+ .post h5 {
90
+ font-weight: bold;
91
+ }
92
+
87
93
  .table-wrapper > table tbody tr td,
88
94
  .table-wrapper > table thead th {
89
95
  white-space: initial;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "x_ite",
3
- "version": "8.3.0",
4
- "description": "X_ITE X3D Browser, a framework for integrating and manipulating X3D and VRML scenes in HTML.",
3
+ "version": "8.3.2",
4
+ "description": "X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.",
5
5
  "homepage": "https://create3000.github.io/x_ite/",
6
6
  "author": "Holger Seelig <holger.seelig@gmail.com>",
7
7
  "license": "GPL-3.0",