x_ite 8.6.2 → 8.6.3

package/docs/_config.yml

@@ -20,7 +20,7 @@ timezone:
 # ↓ --------------------------
 
 title: X_ITE X3D Browser               # the main title
-version: 8.6.2                         # x_ite latest version
+version: 8.6.3                         # x_ite latest version
 size: 287                              # size in kb
 x3d_latest_version: 4.0                # x3d latest version
 

package/docs/_posts/getting-started.md

@@ -645,7 +645,7 @@ X_ITE can load several file formats, either directly as the source of the \<x3d-
 >**Tip:** All files can be compressed using GZip compression. This saves bandwidth and speeds up download time.
 {: .prompt-tip }
 
-For more information see [How to Configure Your Web Server](how-to-configure-your-web-server).
+If you have an own web-server see [How to Configure Your Web Server](how-to-configure-your-web-server). If you are looking for an online file format converter [see here](laboratory/x3d-file-converter).
 
 ### Fallback Content
 

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

@@ -37,13 +37,12 @@ x_ite: true
 #drop-zone select {
   color: unset;
   position: relative;
-  top: -8px;
+  top: -6px;
 }
 </style>
 
-<script defer="" src="https://create3000.github.io/media/laboratory/l-system/FileSaver.js-2.0.0/dist/FileSaver.min.js"></script>
-
-<script defer="">
+<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 =>
@@ -118,7 +117,7 @@ $(() =>
 
             await Browser .loadURL (new X3D .MFString (url));
 
-            link (mimeType, file .name + extension, Browser .currentScene [toString] ());
+            link (mimeType, file .name .replace (/\.[^.]+$/, "") + extension, Browser .currentScene [toString] ());
          }
          catch (error)
          {
@@ -151,7 +150,9 @@ $(() =>
 });
 </script>
 
-<p>Convert X3D, VRML, glTF, GLB, OBJ, STL, and SVG to a X3D format.</p>
+## Upload and Convert
+
+Convert **X3D, VRML, glTF (GLB), OBJ, STL,** and **SVG** to a X3D format of your choice.
 
 <div id="drop-zone">
    <p id="open-files" class="center">
@@ -171,8 +172,12 @@ $(() =>
    </p>
 </div>
 
-## Converted Files
+### Converted Files
 
 Your converted files will appear here.
 
 <ul id="download-links"></ul>
+
+## Command Line Tool
+
+If you are looking for a command line tool to convert files, have a look at [x3d-tidy](https://www.npmjs.com/package/x3d-tidy){:target="_blank"}. It is a Node program and it can be run via `npx x3d-tidy`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.6.2",
+	"version": "8.6.3",
 	"description": "X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.",
 	"homepage": "https://create3000.github.io/x_ite/",
 	"author": "Holger Seelig <holger.seelig@gmail.com>",

package/src/x_ite/Browser/VERSION.js

@@ -45,4 +45,4 @@
  *
  ******************************************************************************/
 
-export default "8.6.2";
+export default "8.6.3";

package/src/x_ite/Parser/SVGParser.js

@@ -260,9 +260,12 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Get attributes of svg element.
 
       const
-         viewBox = this .viewBoxAttribute (xmlElement .getAttribute ("viewBox"), new Vector4 (0, 0, 100, 100)),
-         width   = this .lengthAttribute (xmlElement .getAttribute ("width", viewBox [2])),
-         height  = this .lengthAttribute (xmlElement .getAttribute ("height", viewBox [3]));
+         defaultWidth   = this .lengthAttribute (xmlElement .getAttribute ("width", 100)),
+         defaultHeight  = this .lengthAttribute (xmlElement .getAttribute ("height", 100)),
+         defaultViewBox = new Vector4 (0, 0, defaultWidth, defaultHeight),
+         viewBox        = this .viewBoxAttribute (xmlElement .getAttribute ("viewBox"), defaultViewBox),
+         width          = this .lengthAttribute (xmlElement .getAttribute ("width", viewBox [2])),
+         height         = this .lengthAttribute (xmlElement .getAttribute ("height", viewBox [3]));
 
       // Create viewpoint.
 
@@ -855,7 +858,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       for (const [o, c, a] of g .stops)
          gradient .addColorStop (o, `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`);
 
-      return this .drawGradient (gradient, g .transform, bbox);
+      return this .drawGradient (gradient, g .transform, bbox, g .units);
    },
    linearGradientElement: function (xmlElement, gradient)
    {
@@ -873,9 +876,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       gradient .x1        = this .lengthAttribute (xmlElement .getAttribute ("x1"), gradient .x1 || 0);
       gradient .y1        = this .lengthAttribute (xmlElement .getAttribute ("y1"), gradient .y1 || 0);
-      gradient .x2        = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 0);
+      gradient .x2        = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 1);
       gradient .y2        = this .lengthAttribute (xmlElement .getAttribute ("y2"), gradient .y2 || 0);
-      gradient .units     = xmlElement .getAttribute ("gradientUnits");
+      gradient .units     = xmlElement .getAttribute ("gradientUnits") || "objectBoundingBox";
       gradient .transform = this .transformAttribute (xmlElement .getAttribute ("gradientTransform"));
 
       // Stops
@@ -889,12 +892,12 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       const
          g        = this .radialGradientElement (xmlElement, { stops: [ ] }),
-         gradient = this .context .createRadialGradient (g .fx, g .fy, 0, g .cx, g .cy, g .r);
+         gradient = this .context .createRadialGradient (g .fx, g .fy, g. fr, g .cx, g .cy, g .r);
 
       for (const [o, c, a] of g .stops)
          gradient .addColorStop (o, `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`);
 
-      return this .drawGradient (gradient, g .transform, bbox);
+      return this .drawGradient (gradient, g .transform, bbox, g .units);
    },
    radialGradientElement: function (xmlElement, gradient)
    {
@@ -907,14 +910,13 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Attributes
 
-      gradient .cx           = this .lengthAttribute (xmlElement .getAttribute ("cx"), gradient .cx || 0),
-      gradient .cy           = this .lengthAttribute (xmlElement .getAttribute ("cy"), gradient .cy || 0),
-      gradient .x2           = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 0),
-      gradient .y2           = this .lengthAttribute (xmlElement .getAttribute ("y2"), gradient .y2 || 0),
-      gradient .r            = this .lengthAttribute (xmlElement .getAttribute ("r"),  gradient .cx),
-      gradient .fx           = this .lengthAttribute (xmlElement .getAttribute ("fx"), gradient .cx),
-      gradient .fy           = this .lengthAttribute (xmlElement .getAttribute ("fy"), gradient .cy),
-      gradient .units        = xmlElement .getAttribute ("gradientUnits");
+      gradient .cx           = this .lengthAttribute (xmlElement .getAttribute ("cx"), gradient .cx || 0.5),
+      gradient .cy           = this .lengthAttribute (xmlElement .getAttribute ("cy"), gradient .cy || 0.5),
+      gradient .r            = this .lengthAttribute (xmlElement .getAttribute ("r"),  gradient .r  || 0.5),
+      gradient .fx           = this .lengthAttribute (xmlElement .getAttribute ("fx"), gradient .fx || gradient .cx),
+      gradient .fy           = this .lengthAttribute (xmlElement .getAttribute ("fy"), gradient .fy || gradient .cy),
+      gradient .fr           = this .lengthAttribute (xmlElement .getAttribute ("fr"), gradient .fr || 0),
+      gradient .units        = xmlElement .getAttribute ("gradientUnits") || "objectBoundingBox";
       gradient .spreadMethod = xmlElement .getAttribute ("spreadMethod");
       gradient .transform    = this .transformAttribute (xmlElement .getAttribute ("gradientTransform"));
 
@@ -956,14 +958,19 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .styles .pop ();
    },
-   drawGradient: function (gradient, transform, bbox)
+   drawGradient: function (gradient, transform, bbox, units)
    {
       const m = new Matrix3 ();
 
       m .scale (new Vector2 (GRADIENT_SIZE / 2, GRADIENT_SIZE / 2));
       m .translate (Vector2 .One);
       m .scale (new Vector2 (1, -1));
-      m .multLeft (Matrix3 .inverse (bbox .matrix));
+
+      if (units === "userSpaceOnUse")
+         m .multLeft (Matrix3 .inverse (bbox .matrix));
+      else
+         m .multLeft (new Matrix3 (2, 0, 0, 0, 2, 0, -1, -1, 1));
+
       m .multLeft (transform);
 
       // Paint.
@@ -1028,7 +1035,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       if (!attribute)
          return;
-         
+
       const
          scene = this .getExecutionContext (),
          hash  = new URL (attribute, scene .getWorldURL ()) .hash .slice (1);
@@ -1535,14 +1542,14 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                                  case 'S':
                                  case 's':
                                  {
-                                    x1 = ax + (ax - px);
-                                    y1 = ay + (ay - py);
+                                    var x1 = ax + (ax - px);
+                                    var y1 = ay + (ay - py);
                                     break;
                                  }
                                  default:
                                  {
-                                    x1 = ax;
-                                    y1 = ay;
+                                    var x1 = ax;
+                                    var y1 = ay;
                                     break;
                                  }
                               }

package/src/x_ite/Parser/X3DParser.js

@@ -142,11 +142,12 @@ X3DParser .prototype = {
    convertColor: function (value)
    {
       const
-         div    = $("<div></div>") .hide () .css ("color", value) .appendTo ($("body")),
+         wrap   = $("<div></div>") .hide () .css ("color", "black") .appendTo ($("body")),
+         div    = $("<div></div>").css ("color", value) .appendTo (wrap),
          rgb    = window .getComputedStyle (div [0]) .color,
          values = rgb .replace (/^rgba?\(|\)$/g, "") .split (/[\s,]+/) .map (s => parseFloat (s));
 
-      div .remove ();
+      wrap .remove ();
 
       values [0] /= 255;
       values [1] /= 255;