sunrize 1.7.37 → 1.7.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.7.37",
+  "version": "1.7.39",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -109,7 +109,7 @@
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
     "update-electron-app": "^3.1.0",
-    "x_ite": "^11.0.1",
-    "x3d-traverse": "^1.0.7"
+    "x_ite": "^11.0.2",
+    "x3d-traverse": "^1.0.8"
   }
 }

package/src/Application/Document.js

@@ -22,6 +22,8 @@ const
 
 module .exports = class Document extends Interface
 {
+   #replaceWorld;
+
    constructor ()
    {
       super ("Sunrize.Document.");
@@ -129,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 = [
@@ -379,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/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)
@@ -309,7 +344,7 @@ module .exports = class OutlineView extends Interface
             element = $(e),
             node    = this .getNode (element);
 
-         if (node && node .getUserData (_expanded) && element .jstree ("is_closed", element))
+         if (node ?.getUserData (_expanded) && element .jstree ("is_closed", element))
          {
             element .jstree ("open_node", element);
          }
@@ -323,7 +358,7 @@ module .exports = class OutlineView extends Interface
             element = $(e),
             node    = this .getNode (element);
 
-         if (node .getUserData (_expanded) && element .jstree ("is_closed", element))
+         if (node ?.getUserData (_expanded) && element .jstree ("is_closed", element))
          {
             element .data ("auto-expand", true);
             element .jstree ("open_node", element);
@@ -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.
+
+         this .addNodeButtons (node, name);
 
-         const buttons = [ ];
+         // 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.
 
-         if (node .setHidden && !(node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration))
+      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/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 {