sunrize 1.7.63 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.7.63",
+  "version": "1.8.0",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -90,7 +90,7 @@
   "dependencies": {
     "capitalize": "^2.0.4",
     "console": "^0.7.2",
-    "electron": "^35.1.2",
+    "electron": "^35.1.4",
     "electron-prompt": "^1.7.0",
     "electron-squirrel-startup": "^1.0.1",
     "electron-tabs": "^1.0.4",
@@ -99,7 +99,7 @@
     "jquery-ui-dist": "^1.13.3",
     "jstree": "^3.3.17",
     "material-icons": "^1.13.14",
-    "material-symbols": "^0.29.2",
+    "material-symbols": "^0.29.3",
     "md5": "^2.3.0",
     "mime-types": "^3.0.1",
     "monaco-editor": "^0.50.0",
@@ -109,7 +109,7 @@
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
     "update-electron-app": "^3.1.1",
-    "x_ite": "^11.5.0",
+    "x_ite": "^11.5.1",
     "x3d-traverse": "^1.0.11"
   }
 }

package/src/Application/ActionKeys.js

@@ -58,7 +58,7 @@ module .exports = new class ActionKeys
       if (this .value === value)
          return;
 
-      this .processInterests ();
+      this .#processInterests ();
    }
 
    onkeyup (event)
@@ -94,7 +94,7 @@ module .exports = new class ActionKeys
       if (this .value === value)
          return;
 
-      this .processInterests ();
+      this .#processInterests ();
    }
 
    #interests = new Map ();
@@ -109,7 +109,7 @@ module .exports = new class ActionKeys
       this .#interests .delete (key);
    }
 
-   processInterests ()
+   #processInterests ()
    {
       for (const callback of this .#interests .values ())
          callback (this .value);

package/src/Application/Application.js

@@ -288,7 +288,7 @@ module .exports = class Application
                   },
                   { type: "separator" },
                   {
-                     label: _("Default Play Button State"),
+                     label: _("Enable Browser Update on Load"),
                      type: "checkbox",
                      checked: this .config .browserUpdate,
                      click: () =>

package/src/Application/Dashboard.js

@@ -9,11 +9,12 @@ const
 
 module .exports = class Dashboard extends Interface
 {
-   constructor (element)
+   constructor (element, document)
    {
       super ("Sunrize.Dashboard.");
 
-      this .toolbar = element;
+      this .document = document;
+      this .toolbar  = element;
 
       this .setup ();
    }
@@ -44,12 +45,41 @@ module .exports = class Dashboard extends Interface
 
       $("<span></span>") .addClass ("separator") .appendTo (this .toolbar);
 
-      this .viewAllButton = $("<span></span>")
+      const hierarchy = require ("./Hierarchy");
+
+      this .upButton = $("<span></span>")
+         .addClass (["material-icons", "disabled"])
+         .attr ("title", _("Select parent node(s)."))
+         .css ({ transform: "rotate(-90deg) scaleX(0.8)", "margin-top": "-6px", "margin-bottom": "-7px" })
+         .text ("play_arrow")
+         .appendTo (this .toolbar)
+         .on ("click", () => this .selectParent ());
+
+      this .downButton = $("<span></span>")
+         .addClass (["material-icons", "disabled"])
+         .attr ("title", _("Select child node(s)."))
+         .css ({ transform: "rotate(90deg) scaleX(0.8)", "margin-top": "-7px", "margin-bottom": "-6px" })
+         .text ("play_arrow")
+         .appendTo (this .toolbar)
+         .on ("click", () => this .selectChild ());
+
+      hierarchy .addInterest (this, () => this .onHierarchy ());
+
+      $("<span></span>") .addClass ("separator") .appendTo (this .toolbar);
+
+      this .viewSelectedButton = $("<span></span>")
          .addClass (["material-symbols-outlined"])
          .attr ("title", _("Look at selected objects."))
          .text ("center_focus_strong")
          .appendTo (this .toolbar)
-         .on ("click", () => this .viewAll ());
+         .on ("click", () => this .viewAll (true));
+
+      this .viewAllButton = $("<span></span>")
+         .addClass (["material-symbols-outlined"])
+         .attr ("title", _("Look at all objects in active layer."))
+         .text ("zoom_out_map")
+         .appendTo (this .toolbar)
+         .on ("click", () => this .viewAll (false));
 
       this .straightenButton = $("<span></span>")
          .addClass (["material-symbols-outlined", "active"])
@@ -130,13 +160,64 @@ module .exports = class Dashboard extends Interface
          this .playButton .removeClass ("active");
    }
 
-   viewAll ()
+   selectParent ()
+   {
+      this .selectHierarchy ("up");
+   }
+
+   selectChild ()
+   {
+      this .selectHierarchy ("down");
+   }
+
+   selectHierarchy (direction)
+   {
+      const
+         hierarchy     = require ("./Hierarchy"),
+         outlineEditor = this .document .sidebar .outlineEditor,
+         nodes         = hierarchy [direction] ();
+
+      for (const node of nodes)
+         outlineEditor .expandTo (node, { expandObject: true, expandAll: true });
+
+      const elements = nodes .map (node => outlineEditor .sceneGraph .find (`.node[node-id=${node .getId ()}]`));
+
+      for (const [i, element] of elements .entries ())
+         outlineEditor .selectNodeElement (element, { add: i > 0 });
+
+      // Scroll element into view.
+      // Hide scrollbars during scroll to prevent overlay issue.
+
+      outlineEditor .treeView .css ("overflow", "hidden");
+
+      elements [0] ?.[0] ?.scrollIntoView ({ block: "center", inline: "start", behavior: "smooth" });
+      $(window) .scrollTop (0);
+
+      setTimeout (() => outlineEditor .treeView .css ("overflow", ""), 1000);
+   }
+
+   onHierarchy ()
+   {
+      const hierarchy = require ("./Hierarchy");
+
+      if (hierarchy .canUp ())
+         this .upButton .removeClass ("disabled");
+      else
+         this .upButton .addClass ("disabled");
+
+      if (hierarchy .canDown ())
+         this .downButton .removeClass ("disabled");
+      else
+         this .downButton .addClass ("disabled");
+   }
+
+   viewAll (selected)
    {
       const
          selection = require ("./Selection"),
          nodes     = selection .nodes;
 
-      if (nodes .length)
+      if (selected && nodes .length)
       {
          const
             executionContext = this .browser .currentScene,

package/src/Application/Document.js

@@ -28,9 +28,6 @@ module .exports = class Document extends Interface
    {
       super ("Sunrize.Document.");
 
-      // Add X3D to window to provide access in Script nodes.
-      window .X3D = X3D;
-
       // Globals
 
       this .config .global .setDefaultValues ({
@@ -41,7 +38,7 @@ module .exports = class Document extends Interface
 
       this .verticalSplitter   = new Splitter ($("#vertical-splitter"), "vertical");
       this .horizontalSplitter = new Splitter ($("#horizontal-splitter"), "horizontal");
-      this .secondaryToolbar   = new Dashboard ($("#secondary-toolbar"));
+      this .secondaryToolbar   = new Dashboard ($("#secondary-toolbar"), this);
       this .footer             = new Footer ($("#footer"));
       this .sidebar            = new Sidebar ($("#sidebar"));
 
@@ -166,9 +163,10 @@ module .exports = class Document extends Interface
 
       // Connect for Snap Target and Snap Source.
 
-      $(this .browser .element .shadowRoot) .find ("canvas")
+      $(this .browser .element)
          .on ("mousedown", event => this .onmousedown (event))
-         .on ("mouseup",   event => this .onmouseup   (event));
+         .on ("mouseup",   event => this .onsnaptool (event))
+         .on ("mouseup",   event => this .onselect (event));
 
       // Load components.
 
@@ -178,6 +176,9 @@ module .exports = class Document extends Interface
       // Modify nodes.
 
       this .browser .updateConcreteNode (require ("../Components/Grouping/StaticGroup"));
+      this .browser .updateConcreteNode (require ("../Components/Grouping/Switch"));
+      this .browser .updateConcreteNode (require ("../Components/Navigation/Collision"));
+      this .browser .updateConcreteNode (require ("../Components/Navigation/LOD"));
 
       require ("../Components");
 
@@ -939,48 +940,79 @@ Viewpoint {
       }
    }
 
+   #select     = false;
+   #pointer    = new X3D .Vector2 ();
    #snapTarget = null;
    #snapSource = null;
 
    async onmousedown (event)
    {
-      if (event .button !== 2)
+      this .#select = false;
+
+      if (!this .secondaryToolbar .arrowButton .hasClass ("active"))
          return;
 
-      switch (ActionKeys .value)
+      switch (event .button)
       {
-         case ActionKeys .None:
+         case 0:
          {
-            if (this .#snapTarget ?._visible .getValue ())
-               break;
+            if (event .shiftKey && (event .ctrlKey || event .metaKey))
+               return;
 
-            this .activateSnapTarget (true);
+            this .#pointer .assign (this .browser .getPointerFromEvent (event));
 
-            await this .#snapTarget .getToolInstance ();
+            if (this .browser .touch (... this .#pointer))
+            {
+               if (this .browser .getHit () .sensors .size)
+                  return;
+
+               this .#select = true;
+            }
+            else
+            {
+               this .#select = true;
+            }
 
-            this .#snapTarget .onmousedown (event, true);
             break;
          }
-         case ActionKeys .Option:
+         case 2:
          {
-            if (this .#snapSource ?._visible .getValue ())
-               break;
+            switch (ActionKeys .value)
+            {
+               case ActionKeys .None:
+               {
+                  if (this .#snapTarget ?._visible .getValue ())
+                     break;
+
+                  this .activateSnapTarget (true);
 
-            this .activateSnapSource (true);
+                  await this .#snapTarget .getToolInstance ();
 
-            await this .#snapSource .getToolInstance ();
+                  this .#snapTarget .onmousedown (event, true);
+                  break;
+               }
+               case ActionKeys .Option:
+               {
+                  if (this .#snapSource ?._visible .getValue ())
+                     break;
+
+                  this .activateSnapSource (true);
+
+                  await this .#snapSource .getToolInstance ();
+
+                  this .#snapSource .onmousedown (event, true);
+                  break;
+               }
+            }
 
-            this .#snapSource .onmousedown (event, true);
             break;
          }
       }
+
    }
 
-   async onmouseup (event)
+   async onsnaptool (event)
    {
-      if (ActionKeys .value & ActionKeys .Control)
-         event .button = 2;
-
       if (event .button !== 2)
          return;
 
@@ -991,6 +1023,94 @@ Viewpoint {
       this .#snapTarget ?.onmouseup (event);
    }
 
+   onselect (event)
+   {
+      if (!this .secondaryToolbar .arrowButton .hasClass ("active"))
+         return;
+
+      if (event .button !== 0)
+         return;
+
+      if (!this .#select)
+         return;
+
+      const pointer = this .browser .getPointerFromEvent (event);
+
+      if (this .#pointer .distance (pointer) > this .browser .getRenderingProperty ("ContentScale"))
+         return;
+
+      // Stop event propagation.
+
+      event .preventDefault ();
+
+      // Select or deselect.
+
+      const outlineEditor = this .sidebar .outlineEditor;
+
+      if (!this .browser .touch (... pointer))
+      {
+         outlineEditor .deselectAll ();
+         return;
+      }
+
+      // Select.
+
+      const
+         shapeNode    = this .browser .getHit () .shapeNode,
+         geometryTool = shapeNode .getGeometry () ?.getTool (),
+         tool         = geometryTool ?? shapeNode .getExecutionContext () .getOuterNode () ?.getTool (),
+         node         = tool ?? shapeNode;
+
+      outlineEditor .expandTo (node, { expandObject: true, expandAll: true });
+
+      let elements = outlineEditor .sceneGraph .find (`.node[node-id=${node .getId ()}]`);
+
+      if (!elements .length)
+         return;
+
+      if (outlineEditor .isEditable (elements))
+      {
+         if (tool)
+         {
+            elements = Array .from (elements);
+         }
+         else
+         {
+            const parentElements = Array .from (elements) .flatMap (element =>
+            {
+               const parentElements = Array .from ($(element) .parent () .closest (".node", outlineEditor .sceneGraph));
+
+               return parentElements .length ? parentElements : element;
+            });
+
+            elements = parentElements .map ((element, i) => outlineEditor .getNode ($(element)) .getType () .includes (X3D .X3DConstants .X3DGroupingNode) ? parentElements [i] : elements [i]);
+         }
+      }
+      else
+      {
+         while (!outlineEditor .isEditable (elements))
+         {
+            elements .jstree ("close_node", elements);
+            elements = elements .parent () .closest (".node, .scene", outlineEditor .sceneGraph);
+         }
+
+         elements = Array .from (elements);
+      }
+
+      for (const [i, element] of elements .entries ())
+         outlineEditor .selectNodeElement ($(element), { add: (event .shiftKey || event .metaKey) || i > 0, target: true });
+
+      // Scroll element into view.
+      // Hide scrollbars during scroll to prevent overlay issue.
+
+      outlineEditor .treeView .css ("overflow", "hidden");
+
+      elements [0] ?.scrollIntoView ({ block: "center", inline: "start", behavior: "smooth" });
+      $(window) .scrollTop (0);
+
+      setTimeout (() => outlineEditor .treeView .css ("overflow", ""), 1000);
+   }
+
    activateSnapTarget (visible)
    {
       const SnapTarget = require ("../Tools/SnapTool/SnapTarget");

package/src/Application/Hierarchy.js

@@ -0,0 +1,268 @@
+const
+   X3D       = require ("../X3D"),
+   Interface = require ("./Interface"),
+   Traverse  = require ("x3d-traverse") (X3D);
+
+module .exports = new class Hierarchy extends Interface
+{
+   #target      = null;
+   #nodes       = [ ];
+   #hierarchies = [ ];
+
+   constructor ()
+   {
+      super ("Sunrize.Hierarchy.");
+
+      this .setup ();
+   }
+
+   configure ()
+   {
+      this .executionContext ?.sceneGraph_changed .removeInterest ("update", this);
+
+      this .executionContext = this .browser .currentScene;
+
+      this .executionContext .sceneGraph_changed .addInterest ("update", this);
+   }
+
+   update ()
+   {
+      const
+         target = this .#target,
+         nodes  = this .#nodes;
+
+      this .target (target ?.isLive () ? target : null);
+      nodes .forEach (node => this .add (node));
+   }
+
+   #targetTypes = new Set ([
+      X3D .X3DConstants .X3DShapeNode,
+      X3D .X3DConstants .Inline,
+   ]);
+
+   target (node)
+   {
+      node = node ?.valueOf () ?? null;
+
+      this .#target = node;
+      this .#nodes  = [ ];
+
+      if (!node)
+      {
+         this .#hierarchies = [ ];
+      }
+      else if (!node .getType () .includes (X3D .X3DConstants .X3DShapeNode))
+      {
+         this .#hierarchies = [ ];
+
+         let flags = Traverse .NONE;
+
+         flags |= Traverse .PROTO_DECLARATIONS;
+         flags |= Traverse .PROTO_DECLARATION_BODY;
+         flags |= Traverse .ROOT_NODES;
+
+         for (const object of Traverse .traverse (node, flags))
+         {
+            if (!(object instanceof X3D .SFNode))
+               continue;
+
+            const node = object .getValue () .valueOf ();
+
+            if (!node .getType () .some (type => this .#targetTypes .has (type)))
+               continue;
+
+            const target = node .getGeometry ?.() ?.valueOf () ?? node;
+
+            for (const hierarchy of this .#find (target))
+               this .#hierarchies .push (hierarchy);
+         }
+
+         if (!this .#hierarchies .length)
+            this .#hierarchies = this .#find (node);
+      }
+      else
+      {
+         const target = node .getType () .includes (X3D .X3DConstants .X3DShapeNode)
+            ? node .getGeometry () ?.valueOf () ?? node
+            : node;
+
+         this .#hierarchies = this .#find (target);
+      }
+
+      this .#processInterests ();
+   }
+
+   set (node)
+   {
+      node = node ?.valueOf () ?? null;
+
+      if (!this .#has (node))
+         return;
+
+      this .#nodes = [node];
+
+      this .#processInterests ();
+   }
+
+   add (node)
+   {
+      node = node ?.valueOf () ?? null;
+
+      if (!this .#has (node))
+         return;
+
+      if (this .#nodes .includes (node))
+         return;
+
+      this .#nodes .push (node);
+
+      this .#processInterests ();
+   }
+
+   remove (node)
+   {
+      node = node ?.valueOf () ?? null;
+
+      this .#nodes = this .#nodes .filter (n => n !== node);
+
+      this .#processInterests ();
+   }
+
+   clear ()
+   {
+      this .#target      = null;
+      this .#nodes       = [ ];
+      this .#hierarchies = [ ];
+
+      this .#processInterests ();
+   }
+
+   #find (target)
+   {
+      if (!target)
+         return [ ];
+
+      // Find target node.
+
+      let flags = Traverse .NONE;
+
+      flags |= Traverse .PROTO_DECLARATIONS;
+      flags |= Traverse .PROTO_DECLARATION_BODY;
+      flags |= Traverse .ROOT_NODES;
+
+      return Array .from (this .executionContext .find (target, flags),
+         hierarchy => hierarchy .filter (object => object instanceof X3D .SFNode)
+            .map (node => node .getValue () .valueOf ()));
+   }
+
+   #has (node)
+   {
+      return this .#hierarchies .some (hierarchy => hierarchy .includes (node));
+   }
+
+   #indices (node)
+   {
+      return this .#hierarchies .map (hierarchy => hierarchy .indexOf (node));
+   }
+
+   up ()
+   {
+      this .#nodes = this .#nodes .flatMap (node => this .#indices (node) .map (index =>
+      {
+         return index - 1 >= 0 ? index - 1 : index;
+      })
+      .map ((index, i) => this .#hierarchies [i] [index])
+      .filter (node => node));
+
+      this .#nodes = Array .from (new Set (this .#nodes));
+
+      // Combine to most highest node.
+
+      const indices = Array .from (this .#hierarchies, hierarchy => hierarchy .length);
+
+      for (const node of this .#nodes)
+      {
+         for (const [i, index] of this .#indices (node) .entries ())
+         {
+            if (index < 0)
+               continue;
+
+            indices [i] = Math .min (indices [i], index);
+         }
+      }
+
+      this .#nodes = indices .map ((index, i) => this .#hierarchies [i] [index]) .filter (node => node);
+      this .#nodes = Array .from (new Set (this .#nodes));
+
+      // Propagate change.
+
+      this .#processInterests ();
+
+      return this .#nodes;
+   }
+
+   down ()
+   {
+      this .#nodes = this .#nodes .flatMap (node => this .#indices (node) .map ((index, i) =>
+      {
+         return index >= 0 && index + 1 < this .#hierarchies [i] .length ? index + 1 : index;
+      })
+      .map ((index, i) => this .#hierarchies [i] [index])
+      .filter (node => node));
+
+      this .#nodes = Array .from (new Set (this .#nodes));
+
+      // Combine to most lowest node.
+
+      const indices = Array .from (this .#hierarchies, () => -1);
+
+      for (const node of this .#nodes)
+      {
+         for (const [i, index] of this .#indices (node) .entries ())
+         {
+            if (index < 0)
+               continue;
+
+            indices [i] = Math .max (indices [i], index);
+         }
+      }
+
+      this .#nodes = indices .map ((index, i) => this .#hierarchies [i] [index]) .filter (node => node);
+      this .#nodes = Array .from (new Set (this .#nodes));
+
+      // Propagate change.
+
+      this .#processInterests ();
+
+      return this .#nodes;
+   }
+
+   canUp ()
+   {
+      return this .#nodes .some (node => this .#indices (node) .some (index => index > 0));
+   }
+
+   canDown ()
+   {
+      return this .#nodes .some (node => this .#indices (node)
+         .some ((index, i) => index >= 0 && index < this .#hierarchies [i] .length - 1));
+   }
+
+   #interest = new Map ();
+
+   addInterest (key, callback)
+   {
+      this .#interest .set (key, callback);
+   }
+
+   removeInterest (key)
+   {
+      this .#interest .delete (key);
+   }
+
+   #processInterests ()
+   {
+      for (const callback of this .#interest .values ())
+         callback (this .nodes);
+   }
+}