sunrize 1.11.0 → 1.11.2

package/src/Editors/OutlineView.js

@@ -14,8 +14,7 @@ const
 
 const
    _expanded     = Symbol (),
-   _fullExpanded = Symbol (),
-   _changing     = Symbol ();
+   _fullExpanded = Symbol ();
 
 module .exports = class OutlineView extends Interface
 {
@@ -281,9 +280,13 @@ module .exports = class OutlineView extends Interface
                .attr ("draggable", "true")
                .on ("dragstart", this .onDragStartNode .bind (this));
          }
+
+         child .find (".imported-node > .item")
+            .attr ("draggable", "true")
+            .on ("dragstart", this .onDragStartImportedNode .bind (this));
       }
 
-      child .find (".externproto .name, .externproto .icon, .proto .name, .proto .icon, .node .name, .node .icon")
+      child .find (":is(.externproto, .proto, .node, .imported-node, .exported-node) :where(.name, .icon)")
          .on ("click", this .selectNode .bind (this))
          .on ("mouseenter", this .updateNodeTitle .bind (this));
 
@@ -501,7 +504,7 @@ module .exports = class OutlineView extends Interface
       let index = 0;
 
       for (const rootNode of scene .rootNodes)
-         ul .append (this .createNodeElement ("node", parent, rootNode ? rootNode .getValue () : null, index ++));
+         ul .append (this .createNodeElement ("node", parent, rootNode ?.getValue (), index ++));
 
       // Added to prevent bug, that last route is not drawn right.
       $("<li></li>")
@@ -515,18 +518,8 @@ module .exports = class OutlineView extends Interface
 
    updateSceneRootNodes (parent, scene, type, func)
    {
-      for (const node of scene .rootNodes)
-      {
-         if (!node ?.getNodeUserData (_changing))
-            continue;
-
-         const nodes = Array .from (scene .rootNodes);
-
-         this .browser .nextFrame ()
-            .then (() => nodes .forEach (node => node ?.setNodeUserData (_changing, false)));
-
+      if (this .#changing)
          return;
-      }
 
       this .updateSceneSubtree (parent, scene, type, func);
    }
@@ -554,8 +547,8 @@ module .exports = class OutlineView extends Interface
          .text ("Imported Nodes")
          .appendTo (ul);
 
-      for (const importedNode of importedNodes)
-         ul .append (this .createImportedNodeElement ("imported-node", parent, scene, importedNode));
+      for (const [index, importedNode] of importedNodes .entries ())
+         ul .append (this .createImportedNodeElement (["imported-node"], parent, scene, importedNode .getExportedNode (), index));
 
       // Added to prevent bug, that last route is not drawn right.
       $("<li></li>")
@@ -972,6 +965,9 @@ module .exports = class OutlineView extends Interface
 
    createNodeElement (type, parent, node, index)
    {
+      if (node instanceof X3D .X3DImportedNodeProxy)
+         return this .createImportedNodeElement (["imported-node", "proxy"], parent, node .getExecutionContext (), node, index);
+
       if (node)
       {
          if (!node .isInitialized ())
@@ -996,8 +992,6 @@ module .exports = class OutlineView extends Interface
 
          this .objects .set (node .getId (), node .valueOf ());
 
-         node .setUserData (_changing, false);
-
          // These fields are observed and must never be disconnected, because clones would also lose connection.
 
          node .typeName_changed .addFieldCallback (this .#nodeSymbol, this .updateNodeTypeName .bind (this, node));
@@ -1306,12 +1300,12 @@ module .exports = class OutlineView extends Interface
 
    updateCloneCount (node)
    {
-      const cloneCount = node .getCloneCount ?.() ?? 0
+      const cloneCount = node .getCloneCount ?.() ?? 0;
 
       this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}]`)
+         .find (`:is(.node, .imported-node)[node-id="${node .getId ()}"]`)
          .find ("> .item .clone-count")
-         .text (cloneCount > 1 ? `[${cloneCount}]` : "")
+         .text (cloneCount > 1 ? `[${cloneCount}]` : "");
    }
 
    updateActiveLayer ()
@@ -1404,105 +1398,113 @@ module .exports = class OutlineView extends Interface
 
    #importedNodeSymbol = Symbol ();
 
-   createImportedNodeElement (type, parent, scene, importedNode)
+   createImportedNodeElement (type, parent, scene, node, index)
    {
-      importedNode .getInlineNode () .getLoadState () .addFieldCallback (this .#importedNodeSymbol, this .updateScene .bind (this, parent, scene));
+      const importedNode = node .getImportedNode ();
 
-      try
-      {
-         this .objects .set (importedNode .getId (), importedNode);
-         this .objects .set (importedNode .getExportedNode () .getId (), importedNode .getExportedNode ());
+      if (!importedNode)
+         return this .createNodeElement ("node", parent, null, index);
 
-         // Node
+      // These fields are observed and must never be disconnected, because clones would also lose connection.
 
-         const child = $("<li></li>")
-            .addClass (type)
-            .attr ("imported-node-id", importedNode .getId ())
-            .attr ("node-id", importedNode .getExportedNode () .getId ());
+      node .name_changed    .addFieldCallback (this .#importedNodeSymbol, this .updateImportedNodeName .bind (this, importedNode));
+      node .parents_changed .addFieldCallback (this .#nodeSymbol, this .updateCloneCount .bind (this, node));
 
-         // Icon
+      importedNode .getInlineNode () .getLoadState () .addFieldCallback (this .#importedNodeSymbol, this .updateScene .bind (this, parent .closest (".scene"), scene));
 
-         const icon = $("<img></img>")
-            .addClass ("icon")
-            .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type)}.svg`)
-            .appendTo (child);
+      this .objects .set (node .getId (),         node);
+      this .objects .set (importedNode .getId (), importedNode);
 
-         // Name
+      // Node
 
-         const name = $("<div></div>")
-            .addClass ("name")
-            .appendTo (child);
+      const classes = type;
 
-         $("<span></span>")
-            .addClass ("node-type-name")
-            .text (importedNode .getExportedNode () .getTypeName ())
-            .appendTo (name);
+      if (importedNode .getExportedNode () .getSharedNode ())
+      {
+         const selection = require ("../Application/Selection");
 
-         name .append (document .createTextNode (" "));
+         if (selection .has (node))
+            classes .push ("selected");
+      }
+      else
+      {
+         classes .push ("no-expand");
+      }
 
-         $("<span></span>")
-            .addClass ("node-name")
-            .text (importedNode .getExportedName ())
-            .appendTo (name);
+      const child = $("<li></li>")
+         .addClass (classes)
+         .attr ("node-id", node .getId ())
+         .attr ("imported-node-id", importedNode .getId ())
+         .attr ("index", index);
 
-         if (importedNode .getExportedName () !== importedNode .getImportedName ())
-         {
-            name
-               .append (document .createTextNode (" "))
-               .append ($("<span></span>") .addClass ("as") .text ("AS"))
-               .append (document .createTextNode (" "))
-               .append ($("<span></span>") .addClass ("as-name") .text (importedNode .getImportedName ()));
-         }
+      // Icon
 
-         // Add buttons to name.
+      const icon = $("<img></img>")
+         .addClass ("icon")
+         .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type [0])}.svg`)
+         .appendTo (child);
 
-         this .addNodeButtons (this .getNode (parent), importedNode .getExportedNode (), name);
+      // Name
 
-         // Append empty tree to enable expander.
+      const name = $("<div></div>")
+         .addClass ("name")
+         .appendTo (child);
 
-         $("<ul><li></li></ul>") .appendTo (child);
+      $("<span></span>")
+         .addClass ("node-type-name")
+         .text (node .getTypeName ())
+         .appendTo (name);
 
-         return child;
-      }
-      catch
-      {
-         this .objects .set (importedNode .getId (), importedNode);
+      name .append (document .createTextNode (" "));
 
-         // Node
+      $("<span></span>")
+         .addClass ("node-name")
+         .text (importedNode .getExportedName ())
+         .appendTo (name);
 
-         const child = $("<li></li>")
-            .addClass ([type, "no-expand"])
-            .attr ("imported-node-id", importedNode .getId ());
+      const nodeAsName = $("<span></span>")
+         .addClass ("node-as-name")
+         .append (document .createTextNode (" "))
+         .append ($("<span></span>") .addClass ("as") .text ("AS"))
+         .append (document .createTextNode (" "))
+         .append ($("<span></span>") .addClass ("as-name") .text (importedNode .getImportedName ()))
+         .appendTo (name);
 
-         // Icon
+      if (importedNode .getExportedName () === importedNode .getImportedName ())
+         nodeAsName .hide ();
 
-         const icon = $("<img></img>")
-            .addClass ("icon")
-            .attr ("src", `../images/OutlineEditor/Node/${this .nodeIcons .get (type)}.svg`)
-            .appendTo (child);
+      name .append (document .createTextNode (" "));
 
-         // Name
+      const cloneCount = node .getCloneCount ?.() ?? 0
 
-         const name = $("<div></div>")
-            .addClass ("name")
-            .appendTo (child);
+      $("<span></span>")
+         .addClass ("clone-count")
+         .text (cloneCount > 1 ? `[${cloneCount}]` : "")
+         .appendTo (name);
 
-         $("<span></span>")
-            .addClass ("node-name")
-            .text (importedNode .getExportedName ())
-            .appendTo (name);
+      // Add buttons to name.
 
-         if (importedNode .getExportedName () !== importedNode .getImportedName ())
-         {
-            name
-               .append (document .createTextNode (" "))
-               .append ($("<span></span>") .addClass ("as") .text ("AS"))
-               .append (document .createTextNode (" "))
-               .append ($("<span></span>") .addClass ("as-name") .text (importedNode .getImportedName ()));
-         }
+      this .addNodeButtons (this .getNode (parent), node, name);
 
-         return child;
-      }
+      // Append empty tree to enable expander.
+
+      $("<ul><li></li></ul>") .appendTo (child);
+
+      return child;
+   }
+
+   updateImportedNodeName (importedNode)
+   {
+      const nodeAsName = this .sceneGraph
+         .find (`.imported-node[imported-node-id="${importedNode .getId ()}"]`)
+         .find ("> .item .node-as-name");
+
+      nodeAsName .find (".as-name") .text (importedNode .getImportedName ());
+
+      if (importedNode .getExportedName () === importedNode .getImportedName ())
+         nodeAsName .hide ();
+      else
+         nodeAsName .show ();
    }
 
    #exportedNodeSymbol = Symbol ();
@@ -1514,6 +1516,8 @@ module .exports = class OutlineView extends Interface
       this .objects .set (exportedNode .getId (), exportedNode);
       this .objects .set (node .getId (), node .valueOf ());
 
+      // These fields are observed and must never be disconnected, because clones would also lose connection.
+
       node .typeName_changed .addFieldCallback (this .#exportedNodeSymbol, this .updateNodeTypeName     .bind (this, node));
       node .name_changed     .addFieldCallback (this .#exportedNodeSymbol, this .updateExportedNodeName .bind (this, exportedNode));
 
@@ -2034,36 +2038,8 @@ module .exports = class OutlineView extends Interface
       if (!parent .prop ("isConnected"))
          return;
 
-      switch (field .getType ())
-      {
-         case X3D .X3DConstants .SFNode:
-         {
-            if (!field .getValue () || !field .getNodeUserData (_changing))
-               break;
-
-            this .browser .nextFrame ()
-               .then (() => field .setNodeUserData (_changing, false));
-
-            return;
-         }
-         case X3D .X3DConstants .MFNode:
-         {
-            for (const node of field)
-            {
-               if (!node ?.getNodeUserData (_changing))
-                  continue;
-
-               const nodes = Array .from (field);
-
-               this .browser .nextFrame ()
-                  .then (() => nodes .forEach (node => node ?.setNodeUserData (_changing, false)));
-
-               return;
-            }
-
-            break;
-         }
-      }
+      if (this .#changing)
+         return;
 
       this .saveScrollPositions ();
 
@@ -2176,7 +2152,7 @@ module .exports = class OutlineView extends Interface
       let index = 0;
 
       for (const node of field)
-         ul .append (this .createNodeElement ("node", parent, node ?.getValue (), index ++));
+         ul .append (this .createNodeElement ("node", parent, node .getValue (), index ++));
 
       // Make jsTree.
 
@@ -3014,18 +2990,12 @@ module .exports = class OutlineView extends Interface
             return;
 
          // If node is somewhere else, don't disconnect.
-         if (Array .from (this .sceneGraph .find (`.node[node-id="${node .getId ()}"],
-            .imported-node[node-id="${node .getId ()}"],
-            .exported-node[node-id="${node .getId ()}"]`))
+         if (Array .from (this .sceneGraph .find (`:is(.node, .imported-node, .exported-node)[node-id="${node .getId ()}"]`))
             .some (s => !$(s) .closest (element) .length))
          {
             return;
          }
 
-         node .typeName_changed .removeFieldCallback (this .#nodeSymbol);
-         node .name_changed     .removeFieldCallback (this .#nodeSymbol);
-         node .parents_changed  .removeFieldCallback (this .#nodeSymbol);
-
          for (const type of node .getType ())
          {
             switch (type)
@@ -3052,16 +3022,6 @@ module .exports = class OutlineView extends Interface
          }
       });
 
-      element .find (".exported-node") .each ((i, e) =>
-      {
-         const
-            child = $(e),
-            node  = this .getNode (child);
-
-         node .typeName_changed .removeFieldCallback (this .#exportedNodeSymbol);
-         node .name_changed     .removeFieldCallback (this .#exportedNodeSymbol);
-      });
-
       element .find (".field, .special") .each ((i, e) =>
       {
          const
@@ -3109,7 +3069,7 @@ module .exports = class OutlineView extends Interface
          this .selectNodeElement ($(element), { add: true });
    }
 
-   deselectAll ()
+   deselectAll ({ target = true } = { })
    {
       const
          selection = require ("../Application/Selection"),
@@ -3119,7 +3079,15 @@ module .exports = class OutlineView extends Interface
       nodes .removeClass (["primary", "manually", "selected"]);
 
       selection .clear ();
-      hierarchy .clear ();
+
+      if (target)
+         hierarchy .clear ();
+
+      // Prevent update tree view.
+
+      this .#changing = true;
+
+      this .browser .nextFrame () .then (() => this .#changing = false);
    }
 
    showPreview (event)
@@ -3135,7 +3103,7 @@ module .exports = class OutlineView extends Interface
       event .stopImmediatePropagation ();
 
       $("[data-hasqtip]") .qtip ?.("hide") .qtip ("destroy", true);
-      $(".show-preview.on") .removeClass ("on") .addClass ("off");
+      $("[action=show-preview].on") .removeClass ("on") .addClass ("off");
 
       if (on)
          return;
@@ -3233,14 +3201,18 @@ module .exports = class OutlineView extends Interface
          node .getTool () .setSelected (element .hasClass ("selected"));
       }
 
-      node .setUserData (_changing, true);
-
       this .sceneGraph .find (`.node[node-id=${node .getId ()}],
          .imported-node[node-id=${node .getId ()}],
          .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item [action=toggle-tool]")
          .removeClass (["on", "off"])
          .addClass (tool ? "off" : "on");
+
+      // Prevent update tree view.
+
+      this .#changing = true;
+
+      this .browser .nextFrame () .then (() => this .#changing = false);
    }
 
    proxyDisplay (event)
@@ -3461,19 +3433,21 @@ module .exports = class OutlineView extends Interface
       this .clearConnectors ();
 
       const
-         element = $(event .currentTarget) .closest (".node, .externproto, .proto"),
+         element = $(event .currentTarget) .closest (".node, .externproto, .proto, .imported-node, .exported-node"),
          add     = event .shiftKey || event .metaKey;
 
-      if (element .hasClass ("node"))
+      if (element .is (".node"))
          this .selectNodeElement (element, { add, target: true });
 
-      else if (element .is (".externproto, .proto"))
-         this .selectPrimaryElement (element, add);
+      else if (element .is (".externproto, .proto, .imported-node, .exported-node"))
+         this .selectPrimaryElement (element, { add, target: true });
    }
 
+   #changing = false;
+
    selectNodeElement (element, { add = false, target = false } = { })
    {
-      if (!element .hasClass ("node"))
+      if (!element .is (".node"))
          return;
 
       if (!this .isEditable (element))
@@ -3485,11 +3459,7 @@ module .exports = class OutlineView extends Interface
          selected         = element .hasClass ("manually"),
          selectedElements = this .sceneGraph .find (".primary, .selected"),
          node             = this .getNode (element),
-         elements         = $(`.node[node-id=${node ?.getId ()}]`),
-         changed          = new Map (selection .nodes .map (node => [node, node .getTool ()]));
-
-      if (node)
-         changed .set (node .valueOf (), node .getTool ());
+         elements         = $(`.node[node-id='${node ?.getId ()}']`);
 
       selectedElements .removeClass ("primary");
 
@@ -3541,24 +3511,33 @@ module .exports = class OutlineView extends Interface
          hierarchy .set (node);
       }
 
-      for (const [node, tool] of changed)
-      {
-         if (node .getTool () !== tool)
-            node .setUserData (_changing, true);
-      }
+      // Prevent update tree view.
+
+      this .#changing = true;
+
+      this .browser .nextFrame () .then (() => this .#changing = false);
    }
 
-   selectPrimaryElement (element, add = false)
+   selectPrimaryElement (element, { add = false, target = false } = { })
    {
       if (!this .isEditable (element))
          return;
 
+      const
+         hierarchy = require ("../Application/Hierarchy"),
+         node      = this .getNode (element);
+
       if (!add)
          this .sceneGraph .find (".manually") .removeClass ("manually");
 
       this .sceneGraph .find (".primary") .removeClass ("primary");
 
       element .addClass (["primary", "manually"]);
+
+      if (target)
+         hierarchy .target (node);
+
+      hierarchy .add (node);
    }
 
    selectField (event)
@@ -3848,6 +3827,8 @@ module .exports = class OutlineView extends Interface
 
    onDragStartField (event) { }
 
+   onDragStartImportedNode (event) { }
+
    onDragEnter (event) { }
 
    onDragLeave (event) { }
@@ -3891,13 +3872,6 @@ module .exports = class OutlineView extends Interface
       }
    }
 
-   static objectClasses = {
-      "X3DExternProtoDeclaration": "externproto",
-      "X3DProtoDeclaration": "proto",
-      "X3DScene": "scene",
-      "X3DExecutionContext": "scene",
-   };
-
    expandHierarchy (hierarchy, parent, parentObject)
    {
       let object = hierarchy .shift ();
@@ -3947,9 +3921,10 @@ module .exports = class OutlineView extends Interface
          }
          default: // X3DBaseNode
          {
-            const
-               objectClass = OutlineView .objectClasses [object .getTypeName ()] || "node",
-               element     = parent .find (`.${objectClass}[node-id=${object .getId ()}]`);
+            const element = parent .find (`:is(.node, .imported-node.proxy, .externproto, .proto, .scene)[node-id="${object .getId ()}"]`);
+
+            if (!element .length)
+               break;
 
             element .jstree ("open_node", element);
 

package/src/Editors/Panel.js

@@ -316,7 +316,7 @@ module .exports = new class Panel extends Interface
 
       const
          fieldElement = concreteNode .find (`field[name="${field .getName ()}"]`),
-         options      = { };
+         options      = { format: value => this .format (field, value) };
 
       switch (field .getType ())
       {
@@ -377,12 +377,28 @@ module .exports = new class Panel extends Interface
                min      = fieldElement .attr ("minInclusive") ?? fieldElement .attr ("minExclusive"),
                max      = fieldElement .attr ("maxInclusive") ?? fieldElement .attr ("maxExclusive");
 
+            for (const key in field)
+               options [key] ??= { };
+
+            for (const key in field)
+               options [key] .format = options .format;
+
             if (min !== undefined)
+            {
                options .min = scene .toUnit (category, parseFloat (min));
 
+               for (const key in field)
+                  options [key] .min = options .min;
+            }
+
             if (max !== undefined)
+            {
                options .max = scene .toUnit (category, parseFloat (max));
 
+               for (const key in field)
+                  options [key] .max = options .max;
+            }
+
             this .refresh (parameter, node, field);
 
             const input = $.try (() => folder .addInput (parameter, field .getName (), options));
@@ -467,6 +483,44 @@ module .exports = new class Panel extends Interface
       }
    }
 
+   #float = new X3D .SFFloat ();
+   #double = new X3D .SFDouble ();
+
+   format (field, value)
+   {
+      switch (field .getType ())
+      {
+         case X3D .X3DConstants .SFColor:
+         case X3D .X3DConstants .SFColorRGBA:
+         case X3D .X3DConstants .SFFloat:
+         case X3D .X3DConstants .SFMatrix3f:
+         case X3D .X3DConstants .SFMatrix4f:
+         case X3D .X3DConstants .SFVec2f:
+         case X3D .X3DConstants .SFVec3f:
+         case X3D .X3DConstants .SFVec4f:
+         {
+            this .#float .setValue (value);
+
+            return this .#float .toString ();
+         }
+         case X3D .X3DConstants .SFDouble:
+         case X3D .X3DConstants .SFMatrix3d:
+         case X3D .X3DConstants .SFMatrix4d:
+         case X3D .X3DConstants .SFRotation:
+         case X3D .X3DConstants .SFTime:
+         case X3D .X3DConstants .SFVec2d:
+         case X3D .X3DConstants .SFVec3d:
+         case X3D .X3DConstants .SFVec4d:
+         {
+            this .#double .setValue (value);
+
+            return this .#double .toString ();
+         }
+         default:
+            return value;
+      }
+   }
+
    refresh (parameter, node, field)
    {
       const