x_ite 8.6.0 → 8.6.2

package/docs/_config.yml

@@ -20,7 +20,7 @@ timezone:
 # ↓ --------------------------
 
 title: X_ITE X3D Browser               # the main title
-version: 8.6.0                         # x_ite latest version
+version: 8.6.2                         # x_ite latest version
 size: 287                              # size in kb
 x3d_latest_version: 4.0                # x3d latest version
 
@@ -180,7 +180,7 @@ compress_html:
   profile: false
   blanklines: false
   ignore:
-    envs: [x-development]
+    envs: [development]
 
 exclude:
   - "*.gem"

package/docs/_includes/scripts.html

@@ -1,4 +1,4 @@
 {% if content contains '<x3d-canvas' or page.x_ite %}
-<script src="https://create3000.github.io/code/x_ite/alpha/x_ite.min.js"></script>
-<script src="/x_ite/assets/js/autoupdate.js"></script>
+<script defer src="https://create3000.github.io/code/x_ite/alpha/x_ite.min.js"></script>
+<script defer src="/x_ite/assets/js/autoupdate.js"></script>
 {% endif %}

package/docs/_posts/components/CADGeometry/IndexedQuadSet.md

@@ -58,7 +58,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/CADGeometry/QuadSet.md

@@ -50,7 +50,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Geometry3D/ElevationGrid.md

@@ -81,7 +81,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFFloat [ ] **creaseAngle** 0 <small>[0,∞)</small>
 

package/docs/_posts/components/Geometry3D/Extrusion.md

@@ -101,7 +101,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **convex** TRUE
 

package/docs/_posts/components/Geometry3D/IndexedFaceSet.md

@@ -89,7 +89,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **convex** TRUE
 

package/docs/_posts/components/Geospatial/GeoElevationGrid.md

@@ -107,7 +107,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFDouble [ ] **creaseAngle** <small>[0,∞)</small>
 

package/docs/_posts/components/NURBS/NurbsSweptSurface.md

@@ -50,7 +50,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFNode [in, out] **crossSectionCurve** NULL <small>[X3DNurbsControlCurveNode]</small>
 

package/docs/_posts/components/NURBS/NurbsSwungSurface.md

@@ -50,7 +50,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFNode [in, out] **profileCurve** NULL <small>[X3DNurbsControlCurveNode]</small>
 

package/docs/_posts/components/Rendering/IndexedTriangleFanSet.md

@@ -58,7 +58,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Rendering/IndexedTriangleSet.md

@@ -58,7 +58,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Rendering/IndexedTriangleStripSet.md

@@ -54,7 +54,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Rendering/TriangleFanSet.md

@@ -50,7 +50,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Rendering/TriangleSet.md

@@ -50,7 +50,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Rendering/TriangleStripSet.md

@@ -50,7 +50,7 @@ Setting solid true means draw only one side of polygons (backface culling on), s
 
 #### Hint
 
-- Ccw false can reverse solid (backface culling) and normal-vector orientation.
+- *ccw* false can reverse solid (backface culling) and normal-vector orientation.
 
 ### SFBool [ ] **colorPerVertex** TRUE
 

package/docs/_posts/components/Shape/Material.md

@@ -129,7 +129,7 @@ Lower shininess values provide soft specular glows, while higher values result i
 
 The mapping label identifies which texture coordinates and transformations are used to compute texture effects from corresponding geometry on a given material.
 
-### SFNode [in, out] *shininessTexture** NULL <small>[X3DSingleTextureNode]</small>
+### SFNode [in, out] **shininessTexture** NULL <small>[X3DSingleTextureNode]</small>
 
 When applying shininess for this material node, the contained texture provides Physically Based Rendering (PBR) modulation for each pixel.
 

package/docs/_posts/getting-started.md

@@ -588,7 +588,7 @@ You can always replace »latest« by the version number you prefer.
 
 #### For Production
 
-If you are on production and everything works fine, then use a numbered version.
+If you are in production and everything is working fine, then use a numbered version.
 
 ```html
 <script src="https://cdn.jsdelivr.net/gh/create3000/x_ite@{{ site.version }}/dist/x_ite.min.js"></script>

package/docs/_posts/laboratory/x3d-file-converter.md

@@ -0,0 +1,178 @@
+---
+title: Free Online X3D File Format Converter
+date: 2023-02-21
+categories: [Laboratory]
+tags: [X3D, File, Format, Converter]
+x_ite: true
+---
+<style>
+#drop-zone {
+  box-sizing: border-box;
+  border: 8px dashed lightskyblue;
+}
+
+#drop-zone .center {
+  padding: 3rem;
+  text-align: center;
+  font-size: 200%;
+  font-weight: bold;
+  margin: 0;
+  background: aliceblue;
+}
+
+#convert-files,
+#converting-files {
+   display: none;
+}
+
+#drop-zone x3d-canvas,
+#drop-zone input[type=file] {
+  display: none;
+}
+
+#drop-zone a {
+  border: none;
+}
+
+#drop-zone select {
+  color: unset;
+  position: relative;
+  top: -8px;
+}
+</style>
+
+<script defer="" src="https://create3000.github.io/media/laboratory/l-system/FileSaver.js-2.0.0/dist/FileSaver.min.js"></script>
+
+<script defer="">
+$(() =>
+{
+   $("#drop-zone") .on ("dragover", event =>
+   {
+      event .stopPropagation ();
+      event .preventDefault ();
+
+      event .originalEvent .dataTransfer .dropEffect = "copy";
+   });
+
+   $("#drop-zone") .on ("drop", event =>
+   {
+      event .stopPropagation ();
+      event .preventDefault ();
+
+      read (event .originalEvent .dataTransfer .files);
+   });
+
+   $("#open-files a") .on ("click", event =>
+   {
+      const input = $("<input></input>")
+         .attr ("type", "file")
+         .appendTo ($("#open-files"));
+
+      input .on ("change", event =>
+      {
+         read (event .target .files);
+         input .remove ();
+      });
+
+      input .trigger ("click");
+      return false;
+   });
+
+   function read (files)
+   {
+      read .files = [... files];
+
+      $("#open-files") .hide ();
+      $("#convert-files") .show ();
+   }
+
+   $("#convert-files a") .on ("click", event =>
+   {
+      $("#convert-files") .hide ();
+      $("#converting-files") .show ();
+
+      convert ($("#drop-zone select") .val (), read .files);
+
+      return false;
+   });
+
+   const formats = {
+      "XML":  ["model/x3d+xml",  ".x3d",  "toXMLString"],
+      "VRML": ["model/x3d+vrml", ".x3dv", "toVRMLString"],
+      "JSON": ["model/x3d+json", ".x3dj", "toJSONString"],
+   };
+
+   async function convert (encoding, files)
+   {
+      const [mimeType, extension, toString] = formats [encoding];
+
+      for (const file of files)
+      {
+         try
+         {
+            const
+               Browser = X3D .createBrowser () .browser,
+               url     = URL .createObjectURL (file);
+
+            Browser .endUpdate ();
+
+            await Browser .loadURL (new X3D .MFString (url));
+
+            link (mimeType, file .name + extension, Browser .currentScene [toString] ());
+         }
+         catch (error)
+         {
+            console .error (error);
+         }
+      }
+
+      $("#converting-files") .hide ();
+      $("#open-files") .show ();
+   }
+
+   function link (mimeType, name, x3dSyntax)
+   {
+      const a = $("<a></a>")
+         .text (name)
+         .attr ("href", "#")
+         .on ("click", download .bind (null, mimeType, name, x3dSyntax));
+
+      $("<li></li>") .append (a) .appendTo ($("#download-links"));
+   }
+
+   function download (mimeType, name, x3dSyntax)
+   {
+      const blob = new Blob ([x3dSyntax], { type: `${mimeType};charset=utf-8` });
+
+      saveAs (blob, name);
+
+      return false;
+   }
+});
+</script>
+
+<p>Convert X3D, VRML, glTF, GLB, OBJ, STL, and SVG to a X3D format.</p>
+
+<div id="drop-zone">
+   <p id="open-files" class="center">
+      <a href="#">Choose a file</a> or drag it here.
+      <input type="file" />
+   </p>
+   <p id="convert-files" class="center">
+      <a href="#">Convert file to ...</a>
+      <select>
+         <option value="XML" selected>X3D XML Encoding</option>
+         <option value="VRML">X3D VRML Encoding</option>
+         <option value="JSON">X3D JSON Encoding</option>
+      </select>
+   </p>
+   <p id="converting-files" class="center">
+      Converting files ...
+   </p>
+</div>
+
+## Converted Files
+
+Your converted files will appear here.
+
+<ul id="download-links"></ul>

package/docs/_tabs/playground.html

@@ -16,23 +16,22 @@ icon: fas fa-rocket
 /* Table */
 
 .viewer-row {
-  display: flex;
-  height: calc(100vh - 180px);
+   display: flex;
+   height: calc(100vh - 180px);
 }
 
 .viewer-column {
-  flex: 50%;
-  width: 50%;
-  height: 100%;
+   flex: 50%;
+   width: 50%;
+   height: 100%;
 }
 
 /* Editor */
 
 #editor, .console {
    outline: none;
-   border: none;
-   padding: 0.5rem;
    background: var(--playground-editor-background);
+   border: none;
    width: 100%;
    height: 100%;
    resize: none;
@@ -42,85 +41,25 @@ icon: fas fa-rocket
    white-space: pre;
 }
 
+.monaco-editor,
+.monaco-editor .margin,
+.monaco-editor-background,
+canvas.minimap-decorations-layer {
+   background-color: var(--playground-editor-background);
+}
+
 .console {
+   padding: 0.5rem;
    height: 50%;
 }
 
-.post x3d-canvas {
+.post x3d-canvas, x3d-canvas {
    display: block;
    width: 100%;
    height: 50%;
    aspect-ratio: unset;
 }
 
-.ace_gutter {
-   background: var(--playground-editor-gutter) !important;
-}
-
-.ace_gutter-active-line,
-.ace_active-line {
-   background: var(--playground-editor-active-line) !important;
-}
-
-.ace_selected-word,
-.ace_selection {
-   border: none !important;
-   background: var(--playground-editor-selected-word) !important;
-}
-
-/* XML */
-
-.ace_tag-open, .ace_tag-close, .ace_end-tag-open {
-   color: var(--playground-xml-tag) !important;
-}
-
-.ace_tag-name {
-   color: var(--playground-xml-tag-name) !important;
-}
-
-.ace_attribute-name {
-   color: var(--playground-xml-attribute-name) !important;
-}
-
-.ace_attribute-equals {
-   color: var(--playground-xml-attribute-equals) !important;
-}
-
-.ace_attribute-value {
-   color: var(--playground-xml-attribute-value) !important;
-}
-
-/* JSON */
-
-.ace_paren {
-   color: var(--playground-json-parenthesis) !important;
-}
-
-.ace_identifier {
-   color: var(--playground-json-identifier) !important;
-}
-
-.ace_variable {
-   color: var(--playground-json-variable) !important;
-}
-
-.ace_numeric,
-.ace_keyword.ace_operator {
-   color: var(--playground-json-numeric) !important;
-}
-
-.ace_string {
-   color: var(--playground-json-string) !important;
-}
-
-.ace_boolean {
-   color: var(--playground-json-boolean) !important;
-}
-
-.ace_punctuation.ace_operator {
-   color: var(--playground-json-punctuation) !important;
-}
-
 /* Console */
 
 .console {
@@ -142,57 +81,10 @@ span.error {
 
 <pre style="display:none">
 Online X3D and VRML viewer.
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.13.1/ace.min.js"></script>
-<script>
+<script defer src="https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/loader.js"></script>
+<script defer>
 $(function ()
 {
-   ace .config .set ("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.13.1/");
-
-   const editor = ace .edit ("editor");
-
-   editor .setTheme ("ace/theme/monokai");
-   editor .session .setOptions ({ tabSize: 2, useSoftTabs: true });
-
-   editor .getSession () .on ("change", async function ()
-   {
-      const
-         Browser = X3D .getBrowser (),
-         text    = editor .getSession () .getValue (),
-         url     = "data:," + text;
-
-      if (text .match (/<\w+/))
-      {
-         editor .session .setMode ("ace/mode/xml");
-         editor .getSession () .setUseWorker (true);
-      }
-      else if (text .match (/\w+\s*\{/))
-      {
-         editor .session .setMode ("ace/mode/javascript");
-         editor .getSession () .setUseWorker (false);
-      }
-      else if (text .match (/"\w+"\s*:\s*\{/))
-      {
-         editor .session .setMode ("ace/mode/json");
-         editor .getSession () .setUseWorker (true);
-      }
-
-      if (Browser .getActiveViewpoint ())
-      {
-         const
-            positionOffset    = Browser .getActiveViewpoint () ._positionOffset    .copy (),
-            orientationOffset = Browser .getActiveViewpoint () ._orientationOffset .copy ();
-
-         await Browser .loadURL (new X3D .MFString (url)) .catch (Function .prototype);
-
-         Browser .getActiveViewpoint () ._positionOffset    = positionOffset;
-         Browser .getActiveViewpoint () ._orientationOffset = orientationOffset;
-      }
-      else
-      {
-         await Browser .loadURL (new X3D .MFString (url)) .catch (Function .prototype);
-      }
-   });
-
    const box = `<X3D profile='Full' version='4.0'>
    <Scene>
       <Shape>
@@ -206,9 +98,66 @@ $(function ()
 </X3D>
 `;
 
-   editor .setValue (box .replace (/ {3}/g, "  "), -1);
-   editor .getSession () .setUndoManager (new ace .UndoManager ());
-});
+   require .config ({ paths: { "vs": "https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs" }});
+   require (["vs/editor/editor.main"], () =>
+   {
+      const darkMode = (window .matchMedia && window .matchMedia ("(prefers-color-scheme: dark)") .matches || $("html") .attr ("data-mode") === "dark") && ($("html") .attr ("data-mode") !== "light");
+
+      const editor = monaco .editor .create (document .getElementById ("editor"),
+      {
+         language: "xml",
+         theme: darkMode ? "vs-dark" : "vs-light",
+         contextmenu: true,
+         automaticLayout: true,
+         tabSize: 2,
+         wordWrap: "on",
+         wrappingIndent: "indent",
+         minimap: { enabled: false },
+      });
+
+      editor .getModel () .onDidChangeContent (async (event) =>
+      {
+         const
+            Browser = X3D .getBrowser (),
+            text    = editor .getValue (),
+            url     = "data:," + text;
+
+         if (text .match (/<\w+/))
+         {
+            monaco .editor .setModelLanguage (editor .getModel (), "xml");
+         }
+         else if (text .match (/"\w+"\s*:\s*\{/))
+         {
+            monaco .editor .setModelLanguage (editor .getModel (), "json");
+         }
+         else if (text .match (/\w+\s*\{/))
+         {
+            monaco .editor .setModelLanguage (editor .getModel (), "vrml");
+         }
+
+         if (Browser .getActiveViewpoint ())
+         {
+            const
+               positionOffset    = Browser .getActiveViewpoint () ._positionOffset    .copy (),
+               orientationOffset = Browser .getActiveViewpoint () ._orientationOffset .copy ();
+
+            await Browser .loadURL (new X3D .MFString (url)) .catch (Function .prototype);
+
+            if (Browser .getActiveViewpoint ())
+            {
+               Browser .getActiveViewpoint () ._positionOffset    = positionOffset;
+               Browser .getActiveViewpoint () ._orientationOffset = orientationOffset;
+            }
+         }
+         else
+         {
+            await Browser .loadURL (new X3D .MFString (url)) .catch (Function .prototype);
+         }
+      });
+
+      editor .setValue (box .replace (/ {3}/g, "  "));
+   });
+})
 </script>
 </pre>
 
@@ -217,17 +166,15 @@ $(function ()
 {
    function output (log, classes)
    {
-      return function ()
+      return function (... args)
       {
-         const args = arguments;
-
          $(function ()
          {
             const
-               text    = Array .prototype .slice .call (args) .join ("") + "\n",
+               text    = args .join ("") + "\n",
                element = $("<span></span>") .addClass (classes) .text (text);
 
-            if (text .includes ("No suitable"))
+            if (text .match (/No suitable/))
                return;
 
             log .apply (this, args);