sunrize 1.7.36 → 1.7.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.7.36",
+  "version": "1.7.38",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -108,8 +108,8 @@
     "spectrum-colorpicker2": "^2.0.10",
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
-    "update-electron-app": "^3.0.0",
-    "x_ite": "^11.0.0",
-    "x3d-traverse": "^1.0.6"
+    "update-electron-app": "^3.1.0",
+    "x_ite": "^11.0.2",
+    "x3d-traverse": "^1.0.7"
   }
 }

package/src/Application/Document.js

@@ -22,10 +22,15 @@ const
 
 module .exports = class Document extends Interface
 {
+   #replaceWorld;
+
    constructor ()
    {
       super ("Sunrize.Document.");
 
+      // Add X3D to window to provide access in Script nodes.
+      window .X3D = X3D;
+
       // Globals
 
       this .config .global .setDefaultValues ({
@@ -126,6 +131,13 @@ module .exports = class Document extends Interface
 
       UndoManager .shared .addInterest (this, () => this .undoManager ());
 
+      // Override replaceWorld and loadURL.
+
+      this .#replaceWorld = X3D .X3DBrowser .prototype .replaceWorld;
+
+      X3D .X3DBrowser .prototype .loadURL      = () => Promise .resolve ();
+      X3D .X3DBrowser .prototype .replaceWorld = () => Promise .resolve ();
+
       // Connect browser options.
 
       const browserOptions = [
@@ -376,10 +388,11 @@ Viewpoint {
    {
       try
       {
-         if (fileURL)
-            await this .browser .loadURL (new X3D .MFString (fileURL));
-         else
-            await this .browser .replaceWorld (null);
+         const scene = fileURL
+            ? await this .browser .createX3DFromURL (new X3D .MFString (fileURL))
+            : null;
+
+         await this .#replaceWorld .call (this .browser, scene);
 
          this .browser .currentScene .setSpecificationVersion (X3D .LATEST_VERSION);
       }

package/src/Editors/Console.js

@@ -98,9 +98,10 @@ module .exports = class Console extends Interface
       this .scriptNode .setup ();
    }
 
+   // Add strings to exclude here:
    excludes = new Set ([
       "The vm module of Node.js is deprecated in the renderer process and will be removed.",
-      "Invalid asm.js: Invalid member of stdlib",
+      // "Invalid asm.js: Invalid member of stdlib",
    ]);
 
    addMessage (event, level, sourceId, line, message)

package/src/Editors/OutlineEditor.js

@@ -1884,7 +1884,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
 
       const
          target    = $(event .target),
-         element   = target .closest (".node", this .sceneGraph),
+         element   = target .closest (".node, .exported-node", this .sceneGraph),
          layerNode = this .getNode (element),
          layerSet  = this .browser .getWorld () .getLayerSet (),
          index     = layerSet ._layers .findIndex (node => node ?.getValue () .valueOf () === layerNode);
@@ -1898,6 +1898,57 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
          Editor .setFieldValue (this .browser .currentScene, layerSet, layerSet ._activeLayer, index + 1);
    }
 
+   playNode (event)
+   {
+      const
+         target  = $(event .target),
+         element = target .closest (".node, .exported-node", this .sceneGraph),
+         node    = this .getNode (element);
+
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
+      if (node ._isActive .getValue ())
+      {
+         if (node ._isPaused .getValue ())
+            Editor .setFieldValue (this .browser .currentScene, node, node ._resumeTime, Date .now () / 1000);
+         else
+            Editor .setFieldValue (this .browser .currentScene, node, node ._pauseTime, Date .now () / 1000);
+      }
+      else
+      {
+         node ._isEvenLive = true;
+
+         Editor .setFieldValue (this .browser .currentScene, node, node ._startTime, Date .now () / 1000);
+      }
+   }
+
+   stopNode (event)
+   {
+      const
+         target  = $(event .target),
+         element = target .closest (".node, .exported-node", this .sceneGraph),
+         node    = this .getNode (element);
+
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
+      Editor .setFieldValue (this .browser .currentScene, node, node ._stopTime, Date .now () / 1000);
+   }
+
+   loopNode (event)
+   {
+      const
+         target  = $(event .target),
+         element = target .closest (".node, .exported-node", this .sceneGraph),
+         node    = this .getNode (element);
+
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
+      Editor .setFieldValue (this .browser .currentScene, node, node ._loop, !node ._loop .getValue ());
+   }
+
    addBooleanField (button)
    {
       const

package/src/Editors/OutlineView.js

@@ -248,6 +248,22 @@ module .exports = class OutlineView extends Interface
          .wrapInner ("<div class=\"item no-select\"/>")
          .find (".item") .append ("<div class=\"route-curves-wrapper\"><canvas class=\"route-curves\"></canvas></div>");
 
+      // Connect actions.
+
+      this .connectNodeActions (parent, child);
+
+      // Expand children.
+
+      const
+         specialElements = child .find (".externproto, .proto, .imported-node, .exported-node"),
+         elements        = child .find (".node");
+
+      child .show ();
+      this .expandSceneSubtreeComplete (specialElements, elements);
+   }
+
+   connectNodeActions (parent, child)
+   {
       if (this .isEditable (parent))
       {
          child .find (".externproto > .item")
@@ -281,20 +297,39 @@ module .exports = class OutlineView extends Interface
       child .find (".bind-node")
          .on ("click", this .bindNode .bind (this));
 
+      child .find (".play-node")
+         .on ("click", this .playNode .bind (this));
+
+      child .find (".stop-node")
+         .on ("click", this .stopNode .bind (this));
+
+      child .find (".loop-node")
+         .on ("click", this .loopNode .bind (this));
+
       child .find (".reload-node")
          .on ("click", this .reloadNode .bind (this));
 
       child .find (".show-preview")
          .on ("click", this .showPreview .bind (this));
+   }
 
-      // Expand children.
+   connectFieldActions (child)
+   {
+      child .find ("area.input-selector")
+         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "input"))
+         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "input"))
+         .on ("click", this .selectSingleConnector .bind (this, "input"));
 
-      const
-         specialElements = child .find (".externproto, .proto, .imported-node, .exported-node"),
-         elements        = child .find (".node");
+      child .find ("area.output-selector")
+         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "output"))
+         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "output"))
+         .on ("click", this .selectSingleConnector .bind (this, "output"));
 
-      child .show ();
-      this .expandSceneSubtreeComplete (specialElements, elements);
+      child .find ("area.input-routes-selector")
+         .on ("click", this .selectSingleRoute .bind (this, "input"));
+
+      child .find ("area.output-routes-selector")
+         .on ("click", this .selectSingleRoute .bind (this, "output"));
    }
 
    expandSceneSubtreeComplete (specialElements, elements)
@@ -903,6 +938,7 @@ module .exports = class OutlineView extends Interface
    #nodeSymbol                = Symbol ();
    #updateNodeBoundSymbol     = Symbol ();
    #updateNodeLoadStateSymbol = Symbol ();
+   #updateNodePlaySymbol      = Symbol ();
 
    createNodeElement (type, parent, node, index)
    {
@@ -1001,17 +1037,41 @@ module .exports = class OutlineView extends Interface
             .text (cloneCount > 1 ? `[${cloneCount}]` : "")
             .appendTo (name);
 
-         // Buttons
+         // Add buttons to name.
 
-         const buttons = [ ];
+         this .addNodeButtons (node, name);
 
-         if (node .setHidden && !(node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration))
+         // Append empty tree to enable expander.
+
+         if (!this .isInParents (parent, node))
+            $("<ul><li></li></ul>") .appendTo (child);
+      }
+      else
+      {
+         $("<div></div>")
+            .addClass ("name")
+            .append ($("<span></span>") .addClass ("node-type-name") .text ("NULL"))
+            .appendTo (child);
+      }
+
+      return child;
+   }
+
+   addNodeButtons (node, name)
+   {
+      // Add buttons to name.
+
+      const buttons = [ ];
+
+      if (!(node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration))
+      {
+         if (node .setHidden)
          {
             buttons .push ($("<span></span>")
                .attr ("order", "0")
+               .attr ("title", "Toggle visibility.")
                .addClass (["toggle-visibility", "button", "material-symbols-outlined"])
                .addClass (node .isHidden () ? "off" : "on")
-               .attr ("title", "Toggle visibility.")
                .text (node .isHidden () ? "visibility_off" : "visibility"));
          }
 
@@ -1019,99 +1079,124 @@ module .exports = class OutlineView extends Interface
          {
             buttons .push ($("<span></span>")
                .attr ("order", "1")
+               .attr ("title", _("Toggle display tool."))
                .addClass (["toggle-tool", "button", "material-symbols-outlined"])
                .addClass (node .valueOf () === node ? "off" : "on")
-               .attr ("title", _("Toggle display tool."))
                .text ("build_circle"));
          }
+      }
 
-         for (const type of node .getType ())
+      for (const type of node .getType ())
+      {
+         switch (type)
          {
-            switch (type)
+            case X3D .X3DConstants .X3DLayerNode:
             {
-               case X3D .X3DConstants .X3DLayerNode:
-               {
-                  buttons .push ($("<span></span>")
-                     .attr ("order", "2")
-                     .addClass (["activate-layer", "button", "material-symbols-outlined"])
-                     .addClass (this .browser .getActiveLayer () === node ? "green" : "off")
-                     .attr ("title", _("Activate layer."))
-                     .text ("check_circle"));
+               buttons .push ($("<span></span>")
+                  .attr ("order", "2")
+                  .attr ("title", _("Activate layer."))
+                  .addClass (["activate-layer", "button", "material-symbols-outlined"])
+                  .addClass (this .browser .getActiveLayer () === node ? "green" : "off")
+                  .text ("check_circle"));
 
+               continue;
+            }
+            case X3D .X3DConstants .X3DBindableNode:
+            {
+               if (node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration)
                   continue;
-               }
-               case X3D .X3DConstants .X3DBindableNode:
-               {
-                  node ._isBound .addFieldCallback (this .#updateNodeBoundSymbol, this .updateNodeBound .bind (this, node));
 
-                  buttons .push ($("<span></span>")
-                     .attr ("order", "3")
-                     .addClass (["bind-node", "button", "material-symbols-outlined"])
-                     .addClass (node ._isBound .getValue () ? "on" : "off")
-                     .attr ("title", _("Bind node."))
-                     .text (node ._isBound .getValue () ? "radio_button_checked" : "radio_button_unchecked"));
+               node ._isBound .addFieldCallback (this .#updateNodeBoundSymbol, this .updateNodeBound .bind (this, node));
 
+               buttons .push ($("<span></span>")
+                  .attr ("order", "3")
+                  .attr ("title", _("Bind node."))
+                  .addClass (["bind-node", "button", "material-symbols-outlined"])
+                  .addClass (node ._isBound .getValue () ? "on" : "off")
+                  .text (node ._isBound .getValue () ? "radio_button_checked" : "radio_button_unchecked"));
+
+               continue;
+            }
+            case X3D .X3DConstants .X3DTimeDependentNode:
+            {
+               if (node .getExecutionContext () !== this .executionContext)
                   continue;
-               }
-               case X3D .X3DConstants .X3DUrlObject:
-               {
-                  if (node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration)
-                  {
-                     if (!node .getType () .includes (X3D .X3DConstants .Inline))
-                        continue;
-                  }
 
-                  const [className] = this .getLoadState (node .checkLoadState (), node .getTypeName ());
+               node ._enabled  .addFieldCallback (this .#updateNodePlaySymbol, this .updateNodePlay .bind (this, node));
+               node ._isActive .addFieldCallback (this .#updateNodePlaySymbol, this .updateNodePlay .bind (this, node));
+               node ._isPaused .addFieldCallback (this .#updateNodePlaySymbol, this .updateNodePlay .bind (this, node));
+               node ._loop     .addFieldCallback (this .#updateNodePlaySymbol, this .updateNodePlay .bind (this, node));
+
+               buttons .push ($("<span></span>")
+                  .attr ("order", "4")
+                  .attr ("title", node ._isActive .getValue () && !node ._isPaused .getValue () ? _("Pause timer.") : _("Start timer."))
+                  .addClass (["play-node", "button", "material-icons"])
+                  .addClass (node ._isPaused .getValue () ? "on" : "off")
+                  .text (node ._isActive .getValue () ? "pause" : "play_arrow"));
+
+               buttons .push ($("<span></span>")
+                  .attr ("order", "5")
+                  .attr ("title", _("Stop timer."))
+                  .addClass (["stop-node", "button", "material-icons"])
+                  .addClass (node ._isActive .getValue () ? "on" : "off")
+                  .text ("stop"));
+
+               buttons .push ($("<span></span>")
+                  .attr ("order", "6")
+                  .attr ("title", _("Toggle loop."))
+                  .addClass (["loop-node", "button", "material-icons"])
+                  .addClass (node ._loop .getValue () ? "on" : "off")
+                  .text ("repeat"));
+
+               if (!node ._enabled .getValue ())
+                  buttons .slice (-3) .forEach (button => button .hide ());
 
-                  node .getLoadState () .addFieldCallback (this .#updateNodeLoadStateSymbol, this .updateNodeLoadState .bind (this, node));
+               continue;
+            }
+            case X3D .X3DConstants .X3DUrlObject:
+            {
+               if (node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration)
+               {
+                  if (!node .getType () .includes (X3D .X3DConstants .Inline))
+                     continue;
+               }
 
-                  buttons .push ($("<span></span>")
-                     .attr ("order", "4")
-                     .addClass (["reload-node", "button", "material-symbols-outlined", className])
-                     .attr ("title", "Load now.")
-                     .text ("autorenew"));
+               const [className] = this .getLoadState (node .checkLoadState (), node .getTypeName ());
 
-                  continue;
-               }
-               case X3D .X3DConstants .AudioClip:
-               case X3D .X3DConstants .BufferAudioSource:
-               case X3D .X3DConstants .X3DMaterialNode:
-               case X3D .X3DConstants .X3DSingleTextureNode:
-               {
-                  buttons .push ($("<span></span>")
-                     .attr ("order", "5")
-                     .addClass (["show-preview", "button", "material-symbols-outlined", "off"])
-                     .css ("top", "2px")
-                     .attr ("title", _("Show preview."))
-                     .text ("preview"));
+               node .getLoadState () .addFieldCallback (this .#updateNodeLoadStateSymbol, this .updateNodeLoadState .bind (this, node));
 
-                  continue;
-               }
-            }
-         }
+               buttons .push ($("<span></span>")
+                  .attr ("order", "7")
+                  .attr ("title", "Load now.")
+                  .addClass (["reload-node", "button", "material-symbols-outlined", className])
+                  .text ("autorenew"));
 
-         buttons .sort ((a, b) => a .attr ("order") - b .attr ("order"))
+               continue;
+            }
+            case X3D .X3DConstants .AudioClip:
+            case X3D .X3DConstants .BufferAudioSource:
+            case X3D .X3DConstants .X3DMaterialNode:
+            case X3D .X3DConstants .X3DSingleTextureNode:
+            {
+               buttons .push ($("<span></span>")
+                  .attr ("order", "8")
+                  .attr ("title", _("Show preview."))
+                  .addClass (["show-preview", "button", "material-symbols-outlined", "off"])
+                  .css ("top", "2px")
+                  .text ("preview"));
 
-         for (const button of buttons)
-         {
-            name .append (document .createTextNode (" "));
-            name .append (button);
+               continue;
+            }
          }
+      }
 
-         // Append empty tree to enable expander.
+      buttons .sort ((a, b) => a .attr ("order") - b .attr ("order"))
 
-         if (!this .isInParents (parent, node))
-            $("<ul><li></li></ul>") .appendTo (child);
-      }
-      else
+      for (const button of buttons)
       {
-         $("<div></div>")
-            .addClass ("name")
-            .append ($("<span></span>") .addClass ("node-type-name") .text ("NULL"))
-            .appendTo (child);
+         name .append (document .createTextNode (" "));
+         name .append (button);
       }
-
-      return child;
    }
 
    updateNodeTypeName (node)
@@ -1162,7 +1247,7 @@ module .exports = class OutlineView extends Interface
       if (!this .browser .getActiveLayer ())
          return;
 
-      this .sceneGraph .find (`.node[node-id=${this .browser .getActiveLayer () .getId ()}]`)
+      this .sceneGraph .find (`.node[node-id=${this .browser .getActiveLayer () .getId ()}], .exported-node[node-id=${this .browser .getActiveLayer () .getId ()}]`)
          .find ("> .item .activate-layer")
          .removeClass ("off")
          .addClass ("green");
@@ -1171,7 +1256,7 @@ module .exports = class OutlineView extends Interface
    updateNodeBound (node)
    {
       this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}]`)
+         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item .bind-node")
          .removeClass (["on", "off"])
          .addClass (node ._isBound .getValue () ? "on" : "off")
@@ -1183,12 +1268,45 @@ module .exports = class OutlineView extends Interface
       const [className] = this .getLoadState (node .checkLoadState (), node .getTypeName ());
 
       this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}],.externproto[node-id=${node .getId ()}]`)
+         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}], .externproto[node-id=${node .getId ()}]`)
          .find ("> .item .reload-node")
          .removeClass (["not-started-state", "in-progress-state", "complete-state", "failed-state"])
          .addClass (className);
    }
 
+   updateNodePlay (node)
+   {
+      const buttons = [ ];
+
+      buttons .push (this .sceneGraph
+         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         .find ("> .item .play-node")
+         .removeClass (["on", "off"])
+         .addClass (node ._isPaused .getValue () ? "on" : "off")
+         .attr ("title", node ._isActive .getValue () && !node ._isPaused .getValue () ? _("Pause timer.") : _("Start timer."))
+         .text (node ._isActive .getValue () ? "pause" : "play_arrow"));
+
+      buttons .push (this .sceneGraph
+         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         .find ("> .item .stop-node")
+         .removeClass (["on", "off"])
+         .addClass (node ._isActive .getValue () ? "on" : "off"));
+
+      buttons .push (this .sceneGraph
+         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         .find ("> .item .loop-node")
+         .removeClass (["on", "off"])
+         .addClass (node ._loop .getValue () ? "on" : "off"));
+
+      if (node ._enabled .getValue ())
+         buttons .slice (-3) .forEach (button => button .show ());
+      else
+         buttons .slice (-3) .forEach (button => button .hide ());
+
+      if (!node ._isActive .getValue ())
+         node ._isEvenLive = false;
+   }
+
    isInParents (parent, node)
    {
       return parent .closest (".node[node-id=" + node .getId () + "]", this .sceneGraph) .length;
@@ -1246,6 +1364,10 @@ module .exports = class OutlineView extends Interface
                .append ($("<span></span>") .addClass ("as-name") .text (importedNode .getImportedName ()));
          }
 
+         // Add buttons to name.
+
+         this .addNodeButtons (importedNode .getExportedNode (), name);
+
          // Append empty tree to enable expander.
 
          $("<ul><li></li></ul>") .appendTo (child);
@@ -1346,6 +1468,10 @@ module .exports = class OutlineView extends Interface
       if (exportedNode .getExportedName () === node .getName ())
          name .find (".node-name") .nextAll () .hide ();
 
+      // Add buttons to name.
+
+      this .addNodeButtons (node, name);
+
       // Append empty tree to enable expander.
 
       $("<ul><li></li></ul>") .appendTo (child);
@@ -1404,58 +1530,62 @@ module .exports = class OutlineView extends Interface
 
       // Color
 
-      switch (field .getType ())
+      if (field .isInitializable ())
       {
-         case X3D .X3DConstants .SFBool:
+         switch (field .getType ())
          {
-            $("<img></img>")
-               .addClass (["boolean-button", "field-button"])
-               .attr ("src", `../images/OutlineEditor/Values/${field .getValue () ? "TRUE" : "FALSE"}.svg`)
-               .attr ("title", _("Toggle value."))
-               .appendTo (child);
-
-            field .addFieldCallback (this .#fieldButtonSymbol, this .updateBoolean .bind (this, parent, node, field));
-            break;
-         }
-         case X3D .X3DConstants .SFColor:
-         case X3D .X3DConstants .SFColorRGBA:
-         {
-            $("<div></div>")
-               .addClass (["color-button", "field-button"])
-               .attr ("title", _("Open color picker."))
-               .css ("background-color", this .getColorFromField (node, field))
-               .appendTo (child);
+            case X3D .X3DConstants .SFBool:
+            {
+               $("<img></img>")
+                  .addClass (["boolean-button", "field-button", "button",])
+                  .attr ("src", `../images/OutlineEditor/Values/${field .getValue () ? "TRUE" : "FALSE"}.svg`)
+                  .attr ("title", _("Toggle value."))
+                  .appendTo (child);
 
-            field .addFieldCallback (this .#fieldButtonSymbol, this .updateColor .bind (this, parent, node, field));
-            break;
-         }
-         case X3D .X3DConstants .SFTime:
-         {
-            $("<img></img>")
-               .addClass (["time-button", "field-button"])
-               .attr ("src", `../images/OutlineEditor/Values/Bell.svg`)
-               .attr ("title", _("Set current time."))
-               .appendTo (child);
+               field .addFieldCallback (this .#fieldButtonSymbol, this .updateBoolean .bind (this, parent, node, field));
+               break;
+            }
+            case X3D .X3DConstants .SFColor:
+            case X3D .X3DConstants .SFColorRGBA:
+            {
+               $("<div></div>")
+                  .addClass (["color-button", "field-button", "button",])
+                  .attr ("title", _("Open color picker."))
+                  .css ("background-color", this .getColorFromField (node, field))
+                  .appendTo (child);
 
-            break;
-         }
-         case X3D .X3DConstants .MFString:
-         {
-            if (OutlineView .urlFields .has (field .getName ()) && field .isInitializable ())
+               field .addFieldCallback (this .#fieldButtonSymbol, this .updateColor .bind (this, parent, node, field));
+               break;
+            }
+            case X3D .X3DConstants .SFTime:
             {
-               $("<span></span>")
-                  .addClass (["url-button", "field-button", "material-symbols-outlined"])
-                  .attr ("title", _("Add URLs."))
-                  .text ("add_circle")
+               $("<img></img>")
+                  .addClass (["time-button", "field-button", "button",])
+                  .attr ("src", `../images/OutlineEditor/Values/Bell.svg`)
+                  .attr ("title", _("Set current time."))
                   .appendTo (child);
+
+               break;
             }
+            case X3D .X3DConstants .MFString:
+            {
+               if (OutlineView .urlFields .has (field .getName ()) && field .isInitializable ())
+               {
+                  $("<span></span>")
+                     .addClass (["url-button", "field-button", "button", "material-symbols-outlined"])
+                     .attr ("title", _("Add URLs."))
+                     .text ("add_circle")
+                     .appendTo (child);
+               }
 
-            break;
+               break;
+            }
+            default:
+               break;
          }
-         default:
-            break;
       }
 
+
       // Access type
 
       const accessType = $("<div></div>")
@@ -1985,52 +2115,10 @@ module .exports = class OutlineView extends Interface
          .wrapInner ("<div class=\"item no-select\"/>")
          .find (".item") .append ("<div class=\"route-curves-wrapper\"><canvas class=\"route-curves\"></canvas></div>");
 
-      if (this .isEditable (parent))
-      {
-         child .find (".node:not([node-id=NULL]) > .item")
-            .attr ("draggable", "true")
-            .on ("dragstart", this .onDragStartNode .bind (this));
-      }
-
-      child .find (".node .name, .node .icon")
-         .on ("click", this .selectNode .bind (this));
+      // Connect actions.
 
-      child .find (".node .name")
-         .on ("mouseenter", this .updateNodeTitle .bind (this));
-
-      child .find (".toggle-visibility")
-         .on ("click", this .toggleVisibility .bind (this));
-
-      child .find (".toggle-tool")
-         .on ("click", this .toggleTool .bind (this));
-
-      child .find (".activate-layer")
-         .on ("click", this .activateLayer .bind (this));
-
-      child .find (".bind-node")
-         .on ("click", this .bindNode .bind (this));
-
-      child .find (".reload-node")
-         .on ("click", this .reloadNode .bind (this));
-
-      child .find (".show-preview")
-         .on ("click", this .showPreview .bind (this));
-
-      child .find ("area.input-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "input"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "input"))
-         .on ("click", this .selectSingleConnector .bind (this, "input"));
-
-      child .find ("area.output-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "output"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "output"))
-         .on ("click", this .selectSingleConnector .bind (this, "output"));
-
-      child .find ("area.input-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "input"));
-
-      child .find ("area.output-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "output"));
+      this .connectNodeActions (parent, child);
+      this .connectFieldActions (child);
 
       // Expand children.
 
@@ -2108,52 +2196,10 @@ module .exports = class OutlineView extends Interface
          .wrapInner ("<div class=\"item no-select\"/>")
          .find (".item") .append ("<div class=\"route-curves-wrapper\"><canvas class=\"route-curves\"></canvas></div>");
 
-      if (this .isEditable (parent))
-      {
-         child .find (".node:not([node-id=NULL]) > .item")
-            .attr ("draggable", "true")
-            .on ("dragstart", this .onDragStartNode .bind (this));
-      }
-
-      child .find (".node .name, .node .icon")
-         .on ("click", this .selectNode .bind (this));
+      // Connect actions.
 
-      child .find (".node .name")
-         .on ("mouseenter", this .updateNodeTitle .bind (this));
-
-      child .find (".toggle-visibility")
-         .on ("click", this .toggleVisibility .bind (this));
-
-      child .find (".toggle-tool")
-         .on ("click", this .toggleTool .bind (this));
-
-      child .find (".activate-layer")
-         .on ("click", this .activateLayer .bind (this));
-
-      child .find (".bind-node")
-         .on ("click", this .bindNode .bind (this))
-
-      child .find (".reload-node")
-         .on ("click", this .reloadNode .bind (this));
-
-      child .find (".show-preview")
-         .on ("click", this .showPreview .bind (this));
-
-      child .find ("area.input-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "input"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "input"))
-         .on ("click", this .selectSingleConnector .bind (this, "input"));
-
-      child .find ("area.output-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "output"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "output"))
-         .on ("click", this .selectSingleConnector .bind (this, "output"));
-
-      child .find ("area.input-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "input"));
-
-      child .find ("area.output-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "output"));
+      this .connectNodeActions (parent, child);
+      this .connectFieldActions (child);
 
       // Expand children.
 
@@ -2246,21 +2292,7 @@ module .exports = class OutlineView extends Interface
          .wrapInner ("<div class=\"item no-select\"/>")
          .find (".item") .append ("<div class=\"route-curves-wrapper\"><canvas class=\"route-curves\"></canvas></div>");
 
-      child .find ("area.input-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "input"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "input"))
-         .on ("click", this .selectSingleConnector .bind (this, "input"));
-
-      child .find ("area.output-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "output"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "output"))
-         .on ("click", this .selectSingleConnector .bind (this, "output"));
-
-      child .find ("area.input-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "input"));
-
-      child .find ("area.output-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "output"));
+      this .connectFieldActions (child);
 
       // Input
 
@@ -2368,21 +2400,7 @@ module .exports = class OutlineView extends Interface
          .wrapInner ("<div class=\"item no-select\"/>")
          .find (".item") .append ("<div class=\"route-curves-wrapper\"><canvas class=\"route-curves\"></canvas></div>")
 
-      child .find ("area.input-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "input"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "input"))
-         .on ("click", this .selectSingleConnector .bind (this, "input"))
-
-      child .find ("area.output-selector")
-         .on ("mouseenter", this .hoverInSingleConnector .bind (this, "output"))
-         .on ("mouseleave", this .hoverOutSingleConnector .bind (this, "output"))
-         .on ("click", this .selectSingleConnector .bind (this, "output"))
-
-      child .find ("area.input-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "input"))
-
-      child .find ("area.output-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "output"))
+      this .connectFieldActions (child);
 
       // Textarea
 
@@ -2904,6 +2922,14 @@ module .exports = class OutlineView extends Interface
          {
             switch (type)
             {
+               case X3D .X3DConstants .X3DTimeDependentNode:
+               {
+                  node ._enabled  .removeFieldCallback (this .#updateNodePlaySymbol);
+                  node ._isActive .removeFieldCallback (this .#updateNodePlaySymbol);
+                  node ._isPaused .removeFieldCallback (this .#updateNodePlaySymbol);
+                  node ._loop     .removeFieldCallback (this .#updateNodePlaySymbol);
+                  continue;
+               }
                case X3D .X3DConstants .X3DBindableNode:
                {
                   node ._isBound .removeFieldCallback (this .#updateNodeBoundSymbol);
@@ -2987,7 +3013,7 @@ module .exports = class OutlineView extends Interface
       const
          icon    = $(event .currentTarget) ,
          item    = icon .closest (".item", this .sceneGraph),
-         element = icon .closest (".node", this .sceneGraph),
+         element = icon .closest (".node, .exported-node", this .sceneGraph),
          node    = this .objects .get (parseInt (element .attr ("node-id"))),
          on      = !!item .attr ("data-hasqtip");
 
@@ -3058,7 +3084,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node", this .sceneGraph),
+         element = target .closest (".node, .exported-node", this .sceneGraph),
          node    = this .getNode (element),
          hidden  = !node .isHidden ();
 
@@ -3067,7 +3093,7 @@ module .exports = class OutlineView extends Interface
 
       node .setHidden (hidden);
 
-      this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
+      this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item .toggle-visibility")
          .removeClass (["on", "off"])
          .addClass (hidden ? "off" : "on")
@@ -3078,7 +3104,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node", this .sceneGraph),
+         element = target .closest (".node, .exported-node", this .sceneGraph),
          node    = this .getNode (element),
          tool    = node .getTool ();
 
@@ -3097,7 +3123,7 @@ module .exports = class OutlineView extends Interface
 
       node .setUserData (_changing, true);
 
-      this .sceneGraph .find (`.node[node-id=${node .getId ()}] > .item .toggle-tool`)
+      this .sceneGraph .find (`.node[node-id=${node .getId ()}] > .item .toggle-tool, .exported-node[node-id=${node .getId ()}] > .item .toggle-tool`)
          .removeClass (["on", "off"])
          .addClass (tool ? "off" : "on");
    }
@@ -3108,7 +3134,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node", this .sceneGraph),
+         element = target .closest (".node, .exported-node", this .sceneGraph),
          node    = this .getNode (element);
 
       event .preventDefault ();
@@ -3117,11 +3143,17 @@ module .exports = class OutlineView extends Interface
       node ._set_bind = true;
    }
 
+   playNode (event) { }
+
+   stopNode (event) { }
+
+   loopNode (event) { }
+
    reloadNode (event)
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .externproto", this .sceneGraph),
+         element = target .closest (".node, .exported-node, .externproto", this .sceneGraph),
          item    = target .closest (".item"),
          node    = this .getNode (element);
 
@@ -3156,7 +3188,7 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (node .getType () .includes (X3D .X3DConstants .X3DShapeNode));
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass (["on", "off"])
             .addClass (node .isHidden () ? "off" : "on")
@@ -3182,7 +3214,7 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (false);
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
             .addClass ("on")
@@ -3206,7 +3238,7 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (false);
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
             .addClass ("on")
@@ -3228,7 +3260,7 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (false);
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
             .addClass ("on")

package/src/Undo/Editor.js

@@ -787,9 +787,6 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
 
          const node = object .getValue ();
 
-         if (node .getScene () !== scene)
-            continue;
-
          components .add (node .getComponentInfo () .name);
       }
 

package/src/assets/X3DUOM.xml

@@ -2,7 +2,7 @@
 <!-- X3D Unified Object Model (X3DUOM) X3dUnifiedObjectModel-4.0.xml -->
 <!-- Online at https://www.web3d.org/specifications/X3dUnifiedObjectModel-4.0.xml -->
 <!-- This file contains a listing of all abstract and concrete nodes in version 4.0 of X3D -->
-<!-- Generated 2024-04-28-07:00 13:15:28.386754-07:00 -->
+<!-- Generated 2024-12-10-08:00 12:33:23.8336395-08:00 -->
 <X3dUnifiedObjectModel xmlns:xsd="http://www.w3.org/2001/XMLSchema-instance"
                        version="4.0"
                        xsd:noNamespaceSchemaLocation="X3dUnifiedObjectModel.xsd">
@@ -9301,6 +9301,10 @@
                    accessType="inputOutput"
                    default="NULL"
                    acceptableNodeTypes="X3DTexture2DNode"/>
+            <field name="upVector"
+                   type="SFVec3f"
+                   accessType="inputOutput"
+                   default="0 1 0"/>
             <field name="DEF"
                    type="SFString"
                    accessType="inputOutput"
@@ -10434,7 +10438,8 @@
                    type="SFNode"
                    accessType="inputOutput"
                    default="NULL"
-                   acceptableNodeTypes="X3DMaterialNode"/>
+                   acceptableNodeTypes="X3DMaterialNode"
+                   description="Single contained Material, PhysicalMaterial or UnlitMaterial node that can specify visual attributes for lighting response (color types, transparency, etc."/>
             <field name="fillProperties"
                    type="SFNode"
                    accessType="inputOutput"
@@ -10462,7 +10467,7 @@
                    accessType="inputOutput"
                    default="NULL"
                    acceptableNodeTypes="X3DMaterialNode"
-                   description="Single contained Material node that can specify visual attributes for lighting response (color types, transparency, etc."/>
+                   description="Single contained Material, PhysicalMaterial, TwoSidedMaterial (deprecated), or UnlitMaterial node that can specify visual attributes for lighting response (color types, transparency, etc."/>
             <field name="metadata"
                    type="SFNode"
                    accessType="inputOutput"
@@ -24795,7 +24800,7 @@
                    type="MFInt32"
                    accessType="initializeOnly"
                    minInclusive="-1"
-                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices)."/>
+                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices), interspersed by -1 if colorlPerVertex=true."/>
             <field name="colorPerVertex"
                    type="SFBool"
                    accessType="initializeOnly"
@@ -24860,7 +24865,7 @@
                    type="MFInt32"
                    accessType="initializeOnly"
                    minInclusive="-1"
-                   description="normalIndex values define the order in which normal vectors are applied to polygons (or vertices).">
+                   description="normalIndex values define the order in which normal vectors are applied to polygons (or vertices), interspersed by -1 if normalPerVertex=true.">
                <componentInfo name="Geometry3D" level="4"/>
             </field>
             <field name="normalPerVertex"
@@ -24873,7 +24878,7 @@
                    type="MFInt32"
                    accessType="inputOnly"
                    minInclusive="-1"
-                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices).">
+                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices), interspersed by -1 if colorlPerVertex=true.">
                <componentInfo name="Geometry3D" level="4"/>
             </field>
             <field name="set_coordIndex"
@@ -24885,7 +24890,7 @@
                    type="MFInt32"
                    accessType="inputOnly"
                    minInclusive="-1"
-                   description="normalIndex values define the order in which normal vectors are applied to polygons (or vertices).">
+                   description="normalIndex values define the order in which normal vectors are applied to polygons (or vertices), interspersed by -1 if normalPerVertex=true.">
                <componentInfo name="Geometry3D" level="4"/>
             </field>
             <field name="set_texCoordIndex"
@@ -24969,7 +24974,7 @@
                    type="MFInt32"
                    accessType="initializeOnly"
                    minInclusive="-1"
-                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices)."/>
+                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices), interspersed by -1 if colorlPerVertex=true."/>
             <field name="colorPerVertex"
                    type="SFBool"
                    accessType="initializeOnly"
@@ -25015,7 +25020,7 @@
                    type="MFInt32"
                    accessType="inputOnly"
                    minInclusive="-1"
-                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices).">
+                   description="colorIndex values define the order in which Color|ColorRGBA values are applied to polygons (or vertices), interspersed by -1 if colorlPerVertex=true.">
                <componentInfo name="Rendering" level="3"/>
             </field>
             <field name="set_coordIndex"
@@ -38524,7 +38529,8 @@
             <field name="upVector"
                    type="SFVec3f"
                    accessType="inputOutput"
-                   default="0 0 1"
+                   default="0 1 0"
+                   inheritedFrom="X3DTextureProjectorNode"
                    description="upVector describes the roll of the camera by saying which direction is up for the camera's orientation."/>
             <field name="DEF"
                    type="SFString"
@@ -38683,6 +38689,12 @@
                    acceptableNodeTypes="X3DTexture2DNode"
                    inheritedFrom="X3DTextureProjectorNode"
                    description="Single contained texture node (ImageTexture, MovieTexture, PixelTexture, MultiTexture) that maps image(s) to surface geometry."/>
+            <field name="upVector"
+                   type="SFVec3f"
+                   accessType="inputOutput"
+                   default="0 1 0"
+                   inheritedFrom="X3DTextureProjectorNode"
+                   description="upVector describes the roll of the camera by saying which direction is up for the camera's orientation."/>
             <field name="DEF"
                    type="SFString"
                    accessType="inputOutput"

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

@@ -1035,17 +1035,6 @@ body.dark .ui-widget .library-list .component {
   width: min-content;
 }
 
-.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 {
   display: none;
 }
@@ -1343,6 +1332,18 @@ body.dark .ui-widget .library-list .component {
 
 .scene-graph .button {
   cursor: pointer;
+  font-size: var(--font-size);
+  position: relative;
+  top: 2.5px;
+  color: var(--system-blue);
+}
+
+.scene-graph .button:hover {
+  color: var(--system-gray0);
+}
+
+.scene-graph .button.on:hover {
+  color: var(--system-cyan);
 }
 
 .scene-graph .button.off {
@@ -1353,6 +1354,10 @@ body.dark .ui-widget .library-list .component {
   color: var(--system-gray0);
 }
 
+.scene-graph .field-button {
+  top: 4px;
+}
+
 /* Spectrum Color Picker */
 
 .sp-container {

package/src/assets/themes/default.css

@@ -1035,17 +1035,6 @@ body.dark .ui-widget .library-list .component {
   width: min-content;
 }
 
-.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 {
   display: none;
 }
@@ -1343,6 +1332,18 @@ body.dark .ui-widget .library-list .component {
 
 .scene-graph .button {
   cursor: pointer;
+  font-size: var(--font-size);
+  position: relative;
+  top: 2.5px;
+  color: var(--system-blue);
+}
+
+.scene-graph .button:hover {
+  color: var(--system-gray0);
+}
+
+.scene-graph .button.on:hover {
+  color: var(--system-cyan);
 }
 
 .scene-graph .button.off {
@@ -1353,6 +1354,10 @@ body.dark .ui-widget .library-list .component {
   color: var(--system-gray0);
 }
 
+.scene-graph .field-button {
+  top: 4px;
+}
+
 /* Spectrum Color Picker */
 
 .sp-container {