sunrize 1.6.15 → 1.7.1

package/src/Editors/OutlineView.js

@@ -178,8 +178,9 @@ module .exports = class OutlineView extends Interface
 
    expandScene (parent, scene)
    {
-      parent .data ("expanded",      true);
-      parent .data ("full-expanded", false);
+      parent
+         .data ("expanded",      true)
+         .data ("full-expanded", false);
 
       if (scene instanceof X3D .X3DScene)
          scene .units .addInterest ("updateScene", this, parent, scene);
@@ -223,7 +224,6 @@ module .exports = class OutlineView extends Interface
          .off ("keypress.jstree dblclick.jstree")
          .on ("before_open.jstree", this .nodeBeforeOpen .bind (this))
          .on ("close_node.jstree",  this .nodeCloseNode .bind (this))
-         .on ("select_node.jstree", this .selectNode .bind (this))
          .appendTo (parent)
          .hide ();
 
@@ -231,7 +231,8 @@ module .exports = class OutlineView extends Interface
          .removeAttr ("tabindex")
          .find (".jstree-anchor")
             .removeAttr ("href")
-            .removeAttr ("tabindex");
+            .removeAttr ("tabindex")
+            .on ("click", this .selectNone .bind (this));
 
       child .find (".externproto, .proto, .node, .imported-node, .exported-node")
          .on ("dblclick", this .activateNode .bind (this));
@@ -261,6 +262,9 @@ module .exports = class OutlineView extends Interface
             .on ("dragstart", this .onDragStartNode .bind (this));
       }
 
+      child .find (".externproto .name, .externproto .icon, .proto .name, .proto .icon, .node .name, .node .icon")
+         .on ("click", this .selectNode .bind (this));
+
       child .find (".node .name")
          .on ("mouseenter", this .updateNodeTitle .bind (this));
 
@@ -279,6 +283,9 @@ module .exports = class OutlineView extends Interface
       child .find (".reload-node")
          .on ("click", this .reloadNode .bind (this));
 
+      child .find (".show-preview")
+         .on ("click", this .showPreview .bind (this));
+
       // Expand children.
 
       const
@@ -590,8 +597,9 @@ module .exports = class OutlineView extends Interface
 
    expandNode (parent, node, full)
    {
-      parent .data ("expanded",      true);
-      parent .data ("full-expanded", full);
+      parent
+         .data ("expanded",      true)
+         .data ("full-expanded", full);
 
       // Generate tree.
 
@@ -708,7 +716,6 @@ module .exports = class OutlineView extends Interface
          .off ("keypress.jstree dblclick.jstree")
          .on ("before_open.jstree", this .fieldBeforeOpen .bind (this))
          .on ("close_node.jstree",  this .fieldCloseNode .bind (this))
-         .on ("select_node.jstree", this .selectField .bind (this))
          .appendTo (parent)
          .hide ();
 
@@ -716,7 +723,8 @@ module .exports = class OutlineView extends Interface
          .removeAttr ("tabindex")
          .find (".jstree-anchor")
             .removeAttr ("href")
-            .removeAttr ("tabindex");
+            .removeAttr ("tabindex")
+            .on ("click", this .selectNone .bind (this));
 
       child .find ("li")
          .on ("dblclick", this .activateField .bind (this));
@@ -731,6 +739,9 @@ 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 (".field .name, .field .icon, .special .name, .special .icon")
+         .on ("click", this .selectField .bind (this))
+
       child .find (".field .name, .special .name")
          .on ("mouseenter", this .updateFieldTitle .bind (this));
 
@@ -955,7 +966,7 @@ module .exports = class OutlineView extends Interface
 
       const icon = $("<img></img>")
          .addClass ("icon")
-         .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons [type]}.svg`)
+         .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type)}.svg`)
          .appendTo (child);
 
       if (node)
@@ -968,7 +979,7 @@ module .exports = class OutlineView extends Interface
 
          $("<span></span>")
             .addClass ("node-type-name")
-            .text (this .typeNames [node .getTypeName ()] || node .getTypeName ())
+            .text (this .typeNames .get (node .getTypeName ()) ?? node .getTypeName ())
             .appendTo (name);
 
          name .append (document .createTextNode (" "));
@@ -987,28 +998,28 @@ module .exports = class OutlineView extends Interface
             .text (cloneCount > 1 ? `[${cloneCount}]` : "")
             .appendTo (name);
 
+         // Buttons
+
+         const buttons = [ ];
+
          if (node .setHidden && !(node .getExecutionContext () .getOuterNode () instanceof X3D .X3DProtoDeclaration))
          {
-            name .append (document .createTextNode (" "));
-
-            $("<span></span>")
+            buttons .push ($("<span></span>")
+               .attr ("order", "0")
                .addClass (["toggle-visibility", "button", "material-symbols-outlined"])
                .addClass (node .isHidden () ? "off" : "on")
                .attr ("title", "Toggle visibility.")
-               .text (node .isHidden () ? "visibility_off" : "visibility")
-               .appendTo (name);
+               .text (node .isHidden () ? "visibility_off" : "visibility"));
          }
 
          if (node .getType () .some (type => this .onDemandToolNodes .has (type)))
          {
-            name .append (document .createTextNode (" "));
-
-            $("<span></span>")
+            buttons .push ($("<span></span>")
+               .attr ("order", "1")
                .addClass (["toggle-tool", "button", "material-symbols-outlined"])
                .addClass (node .valueOf () === node ? "off" : "on")
                .attr ("title", _("Toggle display tool."))
-               .text ("build_circle")
-               .appendTo (name);
+               .text ("build_circle"));
          }
 
          for (const type of node .getType ())
@@ -1017,14 +1028,12 @@ module .exports = class OutlineView extends Interface
             {
                case X3D .X3DConstants .X3DLayerNode:
                {
-                  name .append (document .createTextNode (" "));
-
-                  $("<span></span>")
+                  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")
-                     .appendTo (name);
+                     .text ("check_circle"));
 
                   continue;
                }
@@ -1032,14 +1041,12 @@ module .exports = class OutlineView extends Interface
                {
                   node ._isBound .addFieldCallback (this .#updateNodeBoundSymbol, this .updateNodeBound .bind (this, node));
 
-                  name .append (document .createTextNode (" "));
-
-                  $("<span></span>")
+                  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")
-                     .appendTo (name);
+                     .text (node ._isBound .getValue () ? "radio_button_checked" : "radio_button_unchecked"));
 
                   continue;
                }
@@ -1055,19 +1062,39 @@ module .exports = class OutlineView extends Interface
 
                   node .getLoadState () .addFieldCallback (this .#updateNodeLoadStateSymbol, this .updateNodeLoadState .bind (this, node));
 
-                  name .append (document .createTextNode (" "));
-
-                  $("<span></span>")
+                  buttons .push ($("<span></span>")
+                     .attr ("order", "4")
                      .addClass (["reload-node", "button", "material-symbols-outlined", className])
                      .attr ("title", "Load now.")
-                     .text ("autorenew")
-                     .appendTo (name);
+                     .text ("autorenew"));
+
+                  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"));
 
                   continue;
                }
             }
          }
 
+         buttons .sort ((a, b) => a .attr ("order") - b .attr ("order"))
+
+         for (const button of buttons)
+         {
+            name .append (document .createTextNode (" "));
+            name .append (button);
+         }
+
          // Append empty tree to enable expander.
 
          if (!this .isInParents (parent, node))
@@ -1186,7 +1213,7 @@ module .exports = class OutlineView extends Interface
 
          const icon = $("<img></img>")
             .addClass ("icon")
-            .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons [type]}.svg`)
+            .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type)}.svg`)
             .appendTo (child);
 
          // Name
@@ -1236,7 +1263,7 @@ module .exports = class OutlineView extends Interface
 
          const icon = $("<img></img>")
             .addClass ("icon")
-            .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons [type]}.svg`)
+            .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type)}.svg`)
             .appendTo (child);
 
          // Name
@@ -1286,7 +1313,7 @@ module .exports = class OutlineView extends Interface
 
       const icon = $("<img></img>")
          .addClass ("icon")
-         .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons [type]}.svg`)
+         .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type)}.svg`)
          .appendTo (child);
 
       // Name
@@ -1775,7 +1802,7 @@ module .exports = class OutlineView extends Interface
             if (!field .getValue () || !field .getNodeUserData (_changing))
                break;
 
-               requestAnimationFrame (() => field .setNodeUserData (_changing, false));
+            requestAnimationFrame (() => field .setNodeUserData (_changing, false));
             return;
          }
          case X3D .X3DConstants .MFNode:
@@ -1807,29 +1834,30 @@ module .exports = class OutlineView extends Interface
 
    expandField (parent, node, field, type, full)
    {
-      parent .data ("expanded",      true)
-      parent .data ("full-expanded", full)
+      parent
+         .data ("expanded",      true)
+         .data ("full-expanded", full);
 
       if (full)
-         parent .find (".access-type") .addClass ("hidden")
+         parent .find (".access-type") .addClass ("hidden");
       else
-         parent .find (".access-type") .removeClass ("hidden")
+         parent .find (".access-type") .removeClass ("hidden");
 
       switch (field .getType ())
       {
          case X3D .X3DConstants .SFNode:
          {
-            field .addFieldCallback (this .#fieldSymbol, this .updateField .bind (this, parent, node, field, type, full))
+            field .addFieldCallback (this .#fieldSymbol, this .updateField .bind (this, parent, node, field, type, full));
 
-            this .expandSFNode (parent, node, field, type, full)
-            break
+            this .expandSFNode (parent, node, field, type, full);
+            break;
          }
          case X3D .X3DConstants .MFNode:
          {
-            field .addFieldCallback (this .#fieldSymbol, this .updateField .bind (this, parent, node, field, type, full))
+            field .addFieldCallback (this .#fieldSymbol, this .updateField .bind (this, parent, node, field, type, full));
 
-            this .expandMFNode (parent, node, field, type, full)
-            break
+            this .expandMFNode (parent, node, field, type, full);
+            break;
          }
          case X3D .X3DConstants .SFBool:
          case X3D .X3DConstants .SFColor:
@@ -1852,8 +1880,8 @@ module .exports = class OutlineView extends Interface
          case X3D .X3DConstants .SFVec4d:
          case X3D .X3DConstants .SFVec4f:
          {
-            this .expandSingleField (parent, node, field, type, full)
-            break
+            this .expandSingleField (parent, node, field, type, full);
+            break;
          }
          case X3D .X3DConstants .MFBool:
          case X3D .X3DConstants .MFColor:
@@ -1876,17 +1904,17 @@ module .exports = class OutlineView extends Interface
          case X3D .X3DConstants .MFVec4d:
          case X3D .X3DConstants .MFVec4f:
          {
-            this .expandArrayField (parent, node, field, type, full)
-            break
+            this .expandArrayField (parent, node, field, type, full);
+            break;
          }
          default:
          {
-            break
+            break;
          }
       }
 
       if (full)
-         field .addRouteCallback (this .#routesFullSymbol, this .updateField .bind (this, parent, node, field, type, full))
+         field .addRouteCallback (this .#routesFullSymbol, this .updateField .bind (this, parent, node, field, type, full));
    }
 
    expandMFNode (parent, node, field, type, full)
@@ -1894,18 +1922,18 @@ module .exports = class OutlineView extends Interface
       // Generate tree.
 
       const child = $("<div></div>")
-         .addClass ("subtree")
+         .addClass ("subtree");
 
       const ul = $("<ul></ul>")
-         .appendTo (child)
+         .appendTo (child);
 
       if (full)
-         ul .append (this .createRouteElements (node, field))
+         ul .append (this .createRouteElements (node, field));
 
-      let index = 0
+      let index = 0;
 
       for (const node of field)
-         ul .append (this .createNodeElement ("node", parent, node ? node .getValue () : null, index ++))
+         ul .append (this .createNodeElement ("node", parent, node ?.getValue (), index ++));
 
       // Make jsTree.
 
@@ -1914,76 +1942,82 @@ module .exports = class OutlineView extends Interface
          .off ("keypress.jstree dblclick.jstree")
          .on ("before_open.jstree", this .nodeBeforeOpen .bind (this))
          .on ("close_node.jstree",  this .nodeCloseNode .bind (this))
-         .on ("select_node.jstree", this .selectNode .bind (this))
          .appendTo (parent)
-         .hide ()
+         .hide ();
 
       child
          .removeAttr ("tabindex")
          .find (".jstree-anchor")
             .removeAttr ("href")
             .removeAttr ("tabindex")
+            .on ("click", this .selectNone .bind (this));
 
       child .find (".node")
-         .on ("dblclick", this .activateNode .bind (this))
+         .on ("dblclick", this .activateNode .bind (this));
 
       child .find (".jstree-ocl")
          .addClass ("material-icons")
          .text ("arrow_right")
          .on ("click", this .selectExpander .bind (this))
-         .on ("dblclick", this .activateExpander .bind (this))
+         .on ("dblclick", this .activateExpander .bind (this));
 
       child .find (".jstree-node")
          .wrapInner ("<div class=\"item no-select\"/>")
-         .find (".item") .append ("<div class=\"route-curves-wrapper\"><canvas class=\"route-curves\"></canvas></div>")
+         .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))
+            .on ("dragstart", this .onDragStartNode .bind (this));
       }
 
+      child .find (".node .name, .node .icon")
+         .on ("click", this .selectNode .bind (this));
+
       child .find (".node .name")
          .on ("mouseenter", this .updateNodeTitle .bind (this));
 
       child .find (".toggle-visibility")
-         .on ("click", this .toggleVisibility .bind (this))
+         .on ("click", this .toggleVisibility .bind (this));
 
       child .find (".toggle-tool")
-         .on ("click", this .toggleTool .bind (this))
+         .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))
+         .on ("click", this .bindNode .bind (this));
 
       child .find (".reload-node")
-         .on ("click", this .reloadNode .bind (this))
+         .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"))
+         .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"))
+         .on ("click", this .selectSingleConnector .bind (this, "output"));
 
       child .find ("area.input-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "input"))
+         .on ("click", this .selectSingleRoute .bind (this, "input"));
 
       child .find ("area.output-routes-selector")
-         .on ("click", this .selectSingleRoute .bind (this, "output"))
+         .on ("click", this .selectSingleRoute .bind (this, "output"));
 
       // Expand children.
 
-      const elements = child .find (".node")
+      const elements = child .find (".node");
 
-      child .show ()
-      this .expandMFNodeComplete (elements, field)
+      child .show ();
+      this .expandMFNodeComplete (elements, field);
    }
 
    expandMFNodeComplete (elements, field)
@@ -2031,7 +2065,6 @@ module .exports = class OutlineView extends Interface
          .off ("keypress.jstree dblclick.jstree")
          .on ("before_open.jstree", this .nodeBeforeOpen .bind (this))
          .on ("close_node.jstree",  this .nodeCloseNode .bind (this))
-         .on ("select_node.jstree", this .selectNode .bind (this))
          .appendTo (parent)
          .hide ();
 
@@ -2039,7 +2072,8 @@ module .exports = class OutlineView extends Interface
          .removeAttr ("tabindex")
          .find (".jstree-anchor")
             .removeAttr ("href")
-            .removeAttr ("tabindex");
+            .removeAttr ("tabindex")
+            .on ("click", this .selectNone .bind (this));
 
       child .find (".node")
          .on ("dblclick", this .activateNode .bind (this));
@@ -2061,6 +2095,9 @@ module .exports = class OutlineView extends Interface
             .on ("dragstart", this .onDragStartNode .bind (this));
       }
 
+      child .find (".node .name, .node .icon")
+         .on ("click", this .selectNode .bind (this));
+
       child .find (".node .name")
          .on ("mouseenter", this .updateNodeTitle .bind (this));
 
@@ -2079,6 +2116,9 @@ module .exports = class OutlineView extends Interface
       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"))
@@ -2126,18 +2166,18 @@ module .exports = class OutlineView extends Interface
       this .requestUpdateRouteGraph ();
    }
 
-   nodeIcons = {
-      "proto": "Prototype",
-      "externproto": "ExternProto",
-      "node": "X3DBaseNode",
-      "imported-node": "ImportedNode",
-      "exported-node": "ExportedNode",
-   };
+   nodeIcons = new Map ([
+      ["proto",         "Prototype"],
+      ["externproto",   "ExternProto"],
+      ["node",          "X3DBaseNode"],
+      ["imported-node", "ImportedNode"],
+      ["exported-node", "ExportedNode"],
+   ]);
 
-   typeNames = {
-      "X3DExternProtoDeclaration": "EXTERNPROTO",
-      "X3DProtoDeclaration": "PROTO",
-   };
+   typeNames = new Map ([
+      ["X3DExternProtoDeclaration", "EXTERNPROTO"],
+      ["X3DProtoDeclaration",       "PROTO",]
+   ]);
 
    expandSingleField (parent, node, field, type, full)
    {
@@ -2168,7 +2208,6 @@ module .exports = class OutlineView extends Interface
       child
          .jstree ()
          .off ("keypress.jstree dblclick.jstree")
-         .on ("select_node.jstree", this .selectField .bind (this))
          .appendTo (parent)
          .hide ();
 
@@ -2291,7 +2330,6 @@ module .exports = class OutlineView extends Interface
       child
          .jstree ()
          .off ("keypress.jstree dblclick.jstree")
-         .on ("select_node.jstree", this .selectField .bind (this))
          .appendTo (parent)
          .hide ()
 
@@ -2737,15 +2775,16 @@ module .exports = class OutlineView extends Interface
 
    closeNode (element)
    {
-      element .find (".jstree-ocl") .text ("arrow_right");
-      element .data ("expanded",      false);
-      element .data ("full-expanded", false);
+      element
+         .data ("expanded",      false)
+         .data ("full-expanded", false);
+
+      element.find (".jstree-ocl") .text ("arrow_right");
 
       // Collapse children.
 
-      const child = element .find ("> .subtree");
+      element .find ("> .subtree") .hide ();
 
-      child .hide ();
       this .afterClose (element);
    }
 
@@ -2803,6 +2842,8 @@ module .exports = class OutlineView extends Interface
          node .getLoadState () .removeFieldCallback (this .#updateNodeSymbol);
       });
 
+      element .find (".node [data-hasqtip]") .qtip ?.("hide") .qtip ("destroy", true);
+
       element .find (".node:not([node-id=NULL]), .exported-node")
          .addBack (".node:not([node-id=NULL]), .exported-node") .each ((i, e) =>
       {
@@ -2907,7 +2948,7 @@ module .exports = class OutlineView extends Interface
       const elements = this .sceneGraph .find ("> .root-nodes > ul > li[node-id]");
 
       for (const element of elements)
-         this .selectNodeElement ($(element), true);
+         this .selectNodeElement ($(element));
    }
 
    deselectAll ()
@@ -2921,17 +2962,89 @@ module .exports = class OutlineView extends Interface
       selection .clear ();
    }
 
-   toggleVisibility (event)
+   showPreview (event)
    {
+      const
+         icon    = $(event .currentTarget) ,
+         item    = icon .closest (".item", this .sceneGraph),
+         element = icon .closest (".node", this .sceneGraph),
+         node    = this .objects .get (parseInt (element .attr ("node-id"))),
+         on      = !!item .attr ("data-hasqtip");
+
       event .preventDefault ();
       event .stopImmediatePropagation ();
 
+      $("[data-hasqtip]") .qtip ?.("hide") .qtip ("destroy", true);
+      $(".show-preview.on") .removeClass ("on") .addClass ("off");
+
+      if (on)
+         return;
+
+      icon .removeClass ("off") .addClass ("on");
+
+      // Handle NULL node element.
+      if (!node)
+         return;
+
+      for (const type of node .getType () .toReversed ())
+      {
+         switch (type)
+         {
+            case X3D .X3DConstants .AudioClip:
+            case X3D .X3DConstants .BufferAudioSource:
+            {
+               require ("../Controls/AudioPreviewPopover");
+
+               item .audioPreviewPopover (node);
+               break;
+            }
+            case X3D .X3DConstants .GeneratedCubeMapTexture:
+            {
+               break;
+            }
+            case X3D .X3DConstants .MovieTexture:
+            {
+               if (!(node .getMediaElement () instanceof HTMLVideoElement))
+                  continue;
+
+               require ("../Controls/VideoPreviewPopover");
+
+               item .videoPreviewPopover (node);
+               break;
+            }
+            case X3D .X3DConstants .X3DMaterialNode:
+            {
+               require ("../Controls/MaterialPreviewPopover");
+
+               item .materialPreviewPopover (node);
+               break;
+            }
+            case X3D .X3DConstants .X3DSingleTextureNode:
+            {
+               require ("../Controls/TexturePreviewPopover");
+
+               item .texturePreviewPopover (node);
+               break;
+            }
+            default:
+               continue;
+         }
+
+         break;
+      }
+   }
+
+   toggleVisibility (event)
+   {
       const
          target  = $(event .target),
          element = target .closest (".node", this .sceneGraph),
          node    = this .getNode (element),
          hidden  = !node .isHidden ();
 
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
       node .setHidden (hidden);
 
       this .sceneGraph .find (`.node[node-id=${node .getId ()}]`)
@@ -2943,15 +3056,15 @@ module .exports = class OutlineView extends Interface
 
    toggleTool (event)
    {
-      event .preventDefault ();
-      event .stopImmediatePropagation ();
-
       const
          target  = $(event .target),
          element = target .closest (".node", this .sceneGraph),
          node    = this .getNode (element),
          tool    = node .getTool ();
 
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
       if (tool)
       {
          tool .removeTool ("createOnDemand");
@@ -2973,31 +3086,38 @@ module .exports = class OutlineView extends Interface
 
    bindNode (event)
    {
-      event .preventDefault ();
-      event .stopImmediatePropagation ();
-
       const
          target  = $(event .target),
          element = target .closest (".node", this .sceneGraph),
          node    = this .getNode (element);
 
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
       node ._set_bind = true;
    }
 
    reloadNode (event)
    {
-      event .preventDefault ();
-      event .stopImmediatePropagation ();
-
       const
          target  = $(event .target),
          element = target .closest (".node, .externproto", this .sceneGraph),
+         item    = target .closest (".item"),
          node    = this .getNode (element);
 
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
       if (node ._load .getValue ())
+      {
          node .loadNow () .catch (Function .prototype);
+         item .data ("preview") ?.loadNow () .catch (Function .prototype);
+      }
       else
+      {
          node .unloadNow ();
+         item .data ("preview") ?.unloadNow ();
+      }
    }
 
    hideUnselectedObjects ()
@@ -3076,16 +3196,28 @@ module .exports = class OutlineView extends Interface
       })
    }
 
-   selectNode (event, selected)
+   selectNone (event)
    {
-      // Click on node.
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
+      // Hide color editor.
+      $(document) .trigger ("click");
+   }
+
+   selectNode (event)
+   {
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
 
-      selected .instance .deselect_node (selected .node);
+      $(document) .trigger ("click");
+
+      // Click on node.
 
       this .clearConnectors ();
 
       const
-         element = $("#" + selected .node .id),
+         element = $(event .currentTarget) .closest (".node, .externproto, .proto"),
          add     = window .event .shiftKey || window .event .metaKey;
 
       if (element .hasClass ("node"))
@@ -3171,17 +3303,20 @@ module .exports = class OutlineView extends Interface
       element .addClass (["primary", "manually"]);
    }
 
-   selectField (event, selected)
+   selectField (event)
    {
-      // Click on field.
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
 
-      selected .instance .deselect_node (selected .node);
+      $(document) .trigger ("click");
+
+      // Click on field.
 
       this .clearConnectors ();
 
       // Make primary selection from user defined field.
 
-      const element = $(`#${selected .node .id}`);
+      const element = $(event .currentTarget) .closest (".field, .special");
 
       if (!element .hasClass ("field"))
          return;
@@ -3189,10 +3324,20 @@ module .exports = class OutlineView extends Interface
       this .selectPrimaryElement (element);
    }
 
-   selectExpander ()
+   selectExpander (event)
    {
       // Click on expander.
 
+      const element = $(event .currentTarget) .closest (".jstree-node");
+
+      event .preventDefault ();
+      event .stopImmediatePropagation ();
+
+      if (element .jstree ("is_closed", element))
+         element .jstree ("open_node",  element);
+      else
+         element .jstree ("close_node", element);
+
       this .treeView .trigger ("focus");
    }