sunrize 1.6.13 → 1.6.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.6.13",
+  "version": "1.6.14",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -81,16 +81,16 @@
   "dependencies": {
     "capitalize": "^2.0.4",
     "console": "^0.7.2",
-    "electron": "^30.0.3",
+    "electron": "^30.0.6",
     "electron-prompt": "^1.7.0",
-    "electron-squirrel-startup": "^1.0.0",
+    "electron-squirrel-startup": "^1.0.1",
     "electron-tabs": "^1.0.4",
     "fullname": "^5.0.0",
     "jquery": "^3.7.1",
     "jquery-ui-dist": "^1.13.2",
     "jstree": "^3.3.16",
     "material-icons": "^1.13.12",
-    "material-symbols": "^0.17.4",
+    "material-symbols": "^0.18.0",
     "md5": "^2.3.0",
     "mime-types": "^2.1.35",
     "monaco-editor": "^0.48.0",
@@ -100,7 +100,7 @@
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
     "update-electron-app": "^3.0.0",
-    "x_ite": "^9.6.1"
+    "x_ite": "^9.6.2"
   },
   "config": {
     "forge": {

package/src/Application/Application.js

@@ -886,6 +886,29 @@ module .exports = class Application
 
    async showOpenDialog ({ defaultPath, filters, properties = ["multiSelections"] })
    {
+      const defaultFilters = [
+         {
+            name: _("X3D"),
+            extensions: ["x3d", "x3dz", "x3dv", "x3dvz", "x3dj", "x3djz", "wrl", "wrz", "wrl.gz", "vrml"],
+         },
+         {
+            name: _("3D"),
+            extensions: ["gltf", "glb", "obj", "stl", "ply", "svg"],
+         },
+         {
+            name: _("Audio"),
+            extensions: ["mp3", "wav", "oga", "ogg"],
+         },
+         {
+            name: _("Images"),
+            extensions: ["png", "jpg", "jpeg", "gif", "webp", "ktx2"],
+         },
+         {
+            name: _("Video"),
+            extensions: ["mp4", "webm", "ogv"],
+         },
+      ];
+
       this .pushMenu (this .createDialogMenu ());
 
       const response = await electron .dialog .showOpenDialog ({
@@ -893,9 +916,10 @@ module .exports = class Application
          properties: ["openFile", ... properties],
          filters: filters ?? [
             {
-               name: _("X3D Document"),
-               extensions: ["x3d", "x3dz", "x3dv", "x3dvz", "x3dj", "x3djz", "wrl", "wrz", "wrl.gz", "vrml", "gltf", "glb", "obj", "stl", "ply", "svg"],
+               name: _("All Documents"),
+               extensions: defaultFilters .reduce ((p, c) => p .concat (c .extensions), [ ]),
             },
+            ... defaultFilters,
          ],
       });
 

package/src/Application/Document.js

@@ -15,6 +15,9 @@ const
    ActionKeys         = require ("./ActionKeys"),
    Editor             = require ("../Undo/Editor"),
    UndoManager        = require ("../Undo/UndoManager"),
+   ImageParser        = require ("../Parser/ImageParser"),
+   VideoParser        = require ("../Parser/VideoParser"),
+   AudioParser        = require ("../Parser/AudioParser"),
    _                  = require ("./GetText");
 
 module .exports = class Document extends Interface
@@ -36,6 +39,10 @@ module .exports = class Document extends Interface
       this .secondaryToolbar   = new Dashboard ($("#secondary-toolbar"));
       this .footer             = new Footer ($("#footer"));
       this .sidebar            = new Sidebar ($("#sidebar"));
+
+      // Additional Parsers
+
+      X3D .GoldenGate .addParsers (ImageParser, VideoParser, AudioParser);
    }
 
    /**
@@ -378,7 +385,7 @@ Viewpoint {
 
       if (this .filePath)
       {
-         if (path .extname (this .filePath) .match (/\.(?:wrl|wrz|wrl\.gz|vrml|gltf|glb|obj|stl|ply|svg)$/i))
+         if (!path .extname (this .filePath) .match (/\.(?:x3dz?|x3dvz?|x3djz?|html)$/i))
          {
             if (!this .fileSaveFileTypeWarning)
                console .warn (`Couldn't save '${this .filePath}'. File type is not supported.`);

package/src/Editors/OutlineView.js

@@ -993,7 +993,7 @@ module .exports = class OutlineView extends Interface
 
             $("<span></span>")
                .addClass (["toggle-visibility", "button", "material-symbols-outlined"])
-               .addClass (node .isHidden () ? "off" : "")
+               .addClass (node .isHidden () ? "off" : "on")
                .attr ("title", "Toggle visibility.")
                .text (node .isHidden () ? "visibility_off" : "visibility")
                .appendTo (name);
@@ -1005,7 +1005,7 @@ module .exports = class OutlineView extends Interface
 
             $("<span></span>")
                .addClass (["toggle-tool", "button", "material-symbols-outlined"])
-               .addClass (node .valueOf () === node ? "off" : "")
+               .addClass (node .valueOf () === node ? "off" : "on")
                .attr ("title", _("Toggle display tool."))
                .text ("build_circle")
                .appendTo (name);
@@ -1036,7 +1036,7 @@ module .exports = class OutlineView extends Interface
 
                   $("<span></span>")
                      .addClass (["bind-node", "button", "material-symbols-outlined"])
-                     .addClass (node ._isBound .getValue () ? "" : "off")
+                     .addClass (node ._isBound .getValue () ? "on" : "off")
                      .attr ("title", _("Bind node."))
                      .text (node ._isBound .getValue () ? "radio_button_checked" : "radio_button_unchecked")
                      .appendTo (name);
@@ -1143,8 +1143,8 @@ module .exports = class OutlineView extends Interface
       this .sceneGraph
          .find (`.node[node-id=${node .getId ()}]`)
          .find ("> .item .bind-node")
-         .removeClass ("off")
-         .addClass (node ._isBound .getValue () ? "" : "off")
+         .removeClass (["on", "off"])
+         .addClass (node ._isBound .getValue () ? "on" : "off")
          .text (node ._isBound .getValue () ? "radio_button_checked" : "radio_button_unchecked");
    }
 
@@ -2936,8 +2936,8 @@ module .exports = class OutlineView extends Interface
 
       this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
          .find ("> .item .toggle-visibility")
-         .removeClass ("off")
-         .addClass (hidden ? "off" : "")
+         .removeClass (["on", "off"])
+         .addClass (hidden ? "off" : "on")
          .text (hidden ? "visibility_off" : "visibility");
    }
 
@@ -2965,8 +2965,8 @@ module .exports = class OutlineView extends Interface
       node .setUserData (_changing, true);
 
       this .sceneGraph .find (`.node[node-id=${node .getId ()}] > .item .toggle-tool`)
-         .removeClass ("off")
-         .addClass (tool ? "off" : "");
+         .removeClass (["on", "off"])
+         .addClass (tool ? "off" : "on");
    }
 
    activateLayer (event) { }
@@ -3013,8 +3013,8 @@ module .exports = class OutlineView extends Interface
 
          this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
-            .removeClass ("off")
-            .addClass (node .isHidden () ? "off" : "")
+            .removeClass (["on", "off"])
+            .addClass (node .isHidden () ? "off" : "on")
             .text (node .isHidden () ? "visibility_off" : "visibility")
       })
 
@@ -3035,6 +3035,7 @@ module .exports = class OutlineView extends Interface
          this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
+            .addClass ("on")
             .text ("visibility")
       })
    }
@@ -3053,6 +3054,7 @@ module .exports = class OutlineView extends Interface
          this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
+            .addClass ("on")
             .text ("visibility")
       })
    }
@@ -3069,6 +3071,7 @@ module .exports = class OutlineView extends Interface
          this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
+            .addClass ("on")
             .text ("visibility")
       })
    }

package/src/Editors/Primitives.js

@@ -373,6 +373,7 @@ DEF Text Transform {
       }
       geometry Text {
          string "3D Text"
+         fontStyle FontStyle { }
       }
    }
 }

package/src/Parser/AudioParser.js

@@ -0,0 +1,94 @@
+"use strict";
+
+const
+   X3D  = require ("../X3D"),
+   url  = require ("url"),
+   path = require ("path");
+
+class AudioParser extends X3D .X3DParser
+{
+   constructor (scene)
+   {
+      super (scene);
+   }
+
+   getEncoding ()
+   {
+      return "ARRAY_BUFFER";
+   }
+
+   setInput (input)
+   { }
+
+   isValid ()
+   {
+      const worldURL = new URL (this .getScene () .worldURL);
+
+      if (!worldURL .pathname .match (/\.(?:mp3|wav|oga|ogg)$/i))
+         return;
+
+      return true;
+   }
+
+   parseIntoScene (resolve, reject)
+   {
+      this .audio ()
+         .then (resolve)
+         .catch (reject);
+   }
+
+   async audio ()
+   {
+      const
+         browser = this .getBrowser (),
+         scene   = this .getScene ();
+
+      scene .setEncoding ("AUDIO");
+      scene .setProfile (browser .getProfile ("Interchange"));
+      scene .addComponent (browser .getComponent ("Sound", 1));
+
+      await this .loadComponents ();
+
+      // Rectangle
+
+      const
+         soundNode     = scene .createNode ("Sound"),
+         audioClipNode = scene .createNode ("AudioClip");
+
+      audioClipNode .url  = new X3D .MFString (this .getURL (scene .worldURL));
+      audioClipNode .loop = true;
+
+      soundNode .source = audioClipNode;
+
+      scene .rootNodes .push (soundNode);
+
+      // Name
+
+      const
+         worldURL = new URL (scene .worldURL),
+         name     = worldURL .pathname .match (/([^\/]+)\.[^.]+$/);
+
+      if (name)
+      {
+         audioClipNode .description = decodeURIComponent (name [1]);
+
+         scene .addNamedNode (this .sanitizeName (decodeURIComponent (name [1])), soundNode);
+      }
+
+      return scene;
+   }
+
+   getURL (worldURL)
+   {
+      try
+      {
+         return encodeURIComponent (path .basename (url .fileURLToPath (worldURL)));
+      }
+      catch
+      {
+         return worldURL;
+      }
+   }
+}
+
+module .exports = AudioParser;

package/src/Parser/ImageParser.js

@@ -0,0 +1,108 @@
+"use strict";
+
+const
+   X3D  = require ("../X3D"),
+   url  = require ("url"),
+   path = require ("path");
+
+class ImageParser extends X3D .X3DParser
+{
+   constructor (scene)
+   {
+      super (scene);
+   }
+
+   getEncoding ()
+   {
+      return "ARRAY_BUFFER";
+   }
+
+   setInput (input)
+   { }
+
+   isValid ()
+   {
+      const worldURL = new URL (this .getScene () .worldURL);
+
+      if (!worldURL .pathname .match (/\.(?:png|jpg|jpeg|gif|webp|ktx2)$/i))
+         return;
+
+      return true;
+   }
+
+   parseIntoScene (resolve, reject)
+   {
+      this .image ()
+         .then (resolve)
+         .catch (reject);
+   }
+
+   async image ()
+   {
+      const
+         browser = this .getBrowser (),
+         scene   = this .getScene ();
+
+      scene .setEncoding ("IMAGE");
+      scene .setProfile (browser .getProfile ("Interchange"));
+      scene .addComponent (browser .getComponent ("Geometry2D", 1));
+
+      await this .loadComponents ();
+
+      // Rectangle
+
+      const
+         transformNode  = scene .createNode ("Transform"),
+         shapeNode      = scene .createNode ("Shape"),
+         appearanceNode = scene .createNode ("Appearance"),
+         textureNode    = scene .createNode ("ImageTexture"),
+         rectangleNode  = scene .createNode ("Rectangle2D");
+
+      textureNode .url     = new X3D .MFString (this .getURL (scene .worldURL));
+      textureNode .repeatS = false;
+      textureNode .repeatT = false;
+
+      await textureNode .getValue () .loading ();
+
+      appearanceNode .texture = textureNode;
+
+      rectangleNode .size .x = textureNode .getValue () .getWidth ()  / 72 * 0.0254;
+      rectangleNode .size .y = textureNode .getValue () .getHeight () / 72 * 0.0254;
+
+      shapeNode .appearance = appearanceNode;
+      shapeNode .geometry   = rectangleNode;
+
+      transformNode .children .push (shapeNode);
+
+      scene .rootNodes .push (transformNode);
+
+      // Name
+
+      const
+         worldURL = new URL (scene .worldURL),
+         name     = worldURL .pathname .match (/([^\/]+)\.[^.]+$/);
+
+      if (name)
+      {
+         textureNode .description = decodeURIComponent (name [1]);
+
+         scene .addNamedNode (this .sanitizeName (decodeURIComponent (name [1])), transformNode);
+      }
+
+      return scene;
+   }
+
+   getURL (worldURL)
+   {
+      try
+      {
+         return encodeURIComponent (path .basename (url .fileURLToPath (worldURL)));
+      }
+      catch
+      {
+         return worldURL;
+      }
+   }
+}
+
+module .exports = ImageParser;

package/src/Parser/VideoParser.js

@@ -0,0 +1,113 @@
+"use strict";
+
+const
+   X3D  = require ("../X3D"),
+   url  = require ("url"),
+   path = require ("path");
+
+class VideoParser extends X3D .X3DParser
+{
+   constructor (scene)
+   {
+      super (scene);
+   }
+
+   getEncoding ()
+   {
+      return "ARRAY_BUFFER";
+   }
+
+   setInput (input)
+   { }
+
+   isValid ()
+   {
+      const worldURL = new URL (this .getScene () .worldURL);
+
+      if (!worldURL .pathname .match (/\.(?:mp4|webm|ogv)$/i))
+         return;
+
+      return true;
+   }
+
+   parseIntoScene (resolve, reject)
+   {
+      this .video ()
+         .then (resolve)
+         .catch (reject);
+   }
+
+   async video ()
+   {
+      const
+         browser = this .getBrowser (),
+         scene   = this .getScene ();
+
+      scene .setEncoding ("VIDEO");
+      scene .setProfile (browser .getProfile ("Interchange"));
+      scene .addComponent (browser .getComponent ("Geometry2D", 1));
+      scene .addComponent (browser .getComponent ("Sound", 1));
+
+      await this .loadComponents ();
+
+      // Rectangle
+
+      const
+         transformNode  = scene .createNode ("Transform"),
+         shapeNode      = scene .createNode ("Shape"),
+         appearanceNode = scene .createNode ("Appearance"),
+         textureNode    = scene .createNode ("MovieTexture"),
+         rectangleNode  = scene .createNode ("Rectangle2D"),
+         soundNode      = scene .createNode ("Sound");
+
+      textureNode .url     = new X3D .MFString (this .getURL (scene .worldURL));
+      textureNode .loop    = true;
+      textureNode .repeatS = false;
+      textureNode .repeatT = false;
+
+      await textureNode .getValue () .loading ();
+
+      appearanceNode .texture = textureNode;
+
+      rectangleNode .size .x = textureNode .getValue () .getWidth ()  / 72 * 0.0254;
+      rectangleNode .size .y = textureNode .getValue () .getHeight () / 72 * 0.0254;
+
+      shapeNode .appearance = appearanceNode;
+      shapeNode .geometry   = rectangleNode;
+
+      soundNode .source = textureNode;
+
+      transformNode .children .push (shapeNode, soundNode);
+
+      scene .rootNodes .push (transformNode);
+
+      // Name
+
+      const
+         worldURL = new URL (scene .worldURL),
+         name     = worldURL .pathname .match (/([^\/]+)\.[^.]+$/);
+
+      if (name)
+      {
+         textureNode .description = decodeURIComponent (name [1]);
+
+         scene .addNamedNode (this .sanitizeName (decodeURIComponent (name [1])), transformNode);
+      }
+
+      return scene;
+   }
+
+   getURL (worldURL)
+   {
+      try
+      {
+         return encodeURIComponent (path .basename (url .fileURLToPath (worldURL)));
+      }
+      catch
+      {
+         return worldURL;
+      }
+   }
+}
+
+module .exports = VideoParser;

package/src/assets/themes/default-template.css

@@ -549,9 +549,6 @@ tr.disabled ~ tr > td > div {
   background-color: var(--system-gray7);
 }
 
-#secondary-toolbar {
-}
-
 /* Dialog */
 
 .dialog ::selection {
@@ -1010,13 +1007,15 @@ body.dark .ui-widget .library-list .component {
 
 /* Outline Editor */
 
-.outline-editor {
-}
-
 .scene-graph .material-symbols-outlined {
   font-size: var(--font-size);
   position: relative;
   top: 2.5px;
+  color: var(--system-blue);
+}
+
+.scene-graph .material-symbols-outlined:hover {
+  color: var(--system-gray0);
 }
 
 .scene-graph .hidden {
@@ -1162,7 +1161,6 @@ body.dark .ui-widget .library-list .component {
   position: relative;
   top: 4px;
   margin-left: 10px;
-  color: black;
   font-variation-settings: 'GRAD' 200;
 }
 
@@ -1319,7 +1317,11 @@ body.dark .ui-widget .library-list .component {
 }
 
 .scene-graph .button.off {
-  color: var(--text-color);
+  color: var(--system-gray1);
+}
+
+.scene-graph .button.off:hover {
+  color: var(--system-gray0);
 }
 
 /* Spectrum Color Picker */

package/src/assets/themes/default.css

@@ -549,9 +549,6 @@ tr.disabled ~ tr > td > div {
   background-color: var(--system-gray7);
 }
 
-#secondary-toolbar {
-}
-
 /* Dialog */
 
 .dialog ::selection {
@@ -1010,13 +1007,15 @@ body.dark .ui-widget .library-list .component {
 
 /* Outline Editor */
 
-.outline-editor {
-}
-
 .scene-graph .material-symbols-outlined {
   font-size: var(--font-size);
   position: relative;
   top: 2.5px;
+  color: var(--system-blue);
+}
+
+.scene-graph .material-symbols-outlined:hover {
+  color: var(--system-gray0);
 }
 
 .scene-graph .hidden {
@@ -1162,7 +1161,6 @@ body.dark .ui-widget .library-list .component {
   position: relative;
   top: 4px;
   margin-left: 10px;
-  color: black;
   font-variation-settings: 'GRAD' 200;
 }
 
@@ -1319,7 +1317,11 @@ body.dark .ui-widget .library-list .component {
 }
 
 .scene-graph .button.off {
-  color: var(--text-color);
+  color: var(--system-gray1);
+}
+
+.scene-graph .button.off:hover {
+  color: var(--system-gray0);
 }
 
 /* Spectrum Color Picker */