sunrize 1.7.42 → 1.7.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.7.42",
+  "version": "1.7.44",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {

package/src/Application/Application.js

@@ -58,16 +58,17 @@ module .exports = class Application
       };
 
       this .config .setDefaultValues ({
-         position: [undefined, undefined],
-         size: [1100, 680],
-         maximized: false,
-         fullscreen: false,
          autoSave: true,
+         browserUpdate: false,
          expandExternProtoDeclarations: true,
-         expandPrototypeInstances: true,
          expandInlineNodes: true,
+         expandPrototypeInstances: true,
+         fullscreen: false,
+         maximized: false,
+         position: [undefined, undefined],
          recentDocuments: [ ],
          recentLocations: [ ],
+         size: [1100, 680],
       });
 
       Template .create (path .join (__dirname, "../assets/html/application-template.html"));
@@ -286,6 +287,17 @@ module .exports = class Application
                      click: () => this .mainWindow .webContents .send ("reload"),
                   },
                   { type: "separator" },
+                  {
+                     label: _("Default Play Button State"),
+                     type: "checkbox",
+                     checked: this .config .browserUpdate,
+                     click: () =>
+                     {
+                        this .config .browserUpdate = !this .config .browserUpdate;
+                        this .mainWindow .webContents .send ("browser-update", this .config .browserUpdate);
+                     },
+                  },
+                  { type: "separator" },
                   {
                      label: _("Save"),
                      accelerator: "CmdOrCtrl+S",

package/src/Application/Dashboard.js

@@ -2,6 +2,7 @@
 
 const
    $         = require ("jquery"),
+   electron  = require ("electron"),
    Interface = require ("./Interface"),
    Editor    = require("../Undo/Editor"),
    _         = require ("./GetText");
@@ -65,18 +66,20 @@ module .exports = class Dashboard extends Interface
          .text ("edit_note")
          .appendTo (this .toolbar)
          .on ("click", () => this .togglePanel (!this .config .file .panel));
+
+      electron .ipcRenderer .on ("browser-update", (event, value) => this .config .global .play = value);
    }
 
    configure ()
    {
       this .config .file .setDefaultValues ({
          pointer: "arrow",
-         play: false,
+         play: this .config .global .play,
          panel: false,
       });
 
       this [this .config .file .pointer] ();
-      this .play (this .config .file .play && !this .isInitialScene);
+      this .play ((this .config .file .play) && !this .isInitialScene);
       this .straighten (this .browser .getBrowserOption ("StraightenHorizon"));
 
       if (this .config .file .panel)

package/src/Application/Tabs.js

@@ -62,7 +62,8 @@ module .exports = new class Tabs
       $(window) .on ("beforeunload", () => this .close ());
 
       // Forward Actions
-
+      
+      this .forwardToAllTabs ("browser-update");
       this .forwardToAllTabs ("auto-save");
       this .forwardToActiveTab ("export-as");
 

package/src/Controls/AddPrototypePopover.js

@@ -46,7 +46,7 @@ $.fn.addPrototypePopover = function (executionContext, type)
       events: {
          show (event, api)
          {
-            nameInput .validate (Editor .Id, () =>
+            nameInput .off () .validate (Editor .Id, () =>
             {
                electron .shell .beep ();
                nameInput .highlight ();

package/src/Controls/EditUserDefinedFieldPopover.js

@@ -135,7 +135,7 @@ $.fn.editUserDefinedFieldPopover = function (executionContext, node, field = -1)
       events: {
          show (event, api)
          {
-            nameInput .validate (Editor .Id, () =>
+            nameInput .off () .validate (Editor .Id, () =>
             {
                electron .shell .beep ();
                nameInput .highlight ();

package/src/Controls/ExportNodePopover.js

@@ -26,7 +26,7 @@ $.fn.exportNodePopover = function (node, oldExportedName)
       events: {
          show: (event, api) =>
          {
-            nameInput .validate (Editor .Id, () =>
+            nameInput .off () .validate (Editor .Id, () =>
             {
                electron .shell .beep ();
                nameInput .highlight ();

package/src/Controls/ImportNodePopover.js

@@ -26,7 +26,7 @@ $.fn.importNodePopover = function (inlineNode, exportedName, oldImportedName)
       events: {
          show: (event, api) =>
          {
-            nameInput .validate (Editor .Id, () =>
+            nameInput .off () .validate (Editor .Id, () =>
             {
                electron .shell .beep ();
                nameInput .highlight ();

package/src/Controls/RenameNodePopover.js

@@ -1,11 +1,11 @@
-"use strict"
+"use strict";
 
 const
    $ = require ("jquery"),
-   _ = require ("../Application/GetText")
+   _ = require ("../Application/GetText");
 
-require ("./Popover")
-require ("./RenameNodeInput")
+require ("./Popover");
+require ("./RenameNodeInput");
 
 $.fn.renameNodePopover = function (node)
 {
@@ -13,7 +13,7 @@ $.fn.renameNodePopover = function (node)
 
    const nameInput = $("<input></input>")
       .attr ("placeholder", _("Enter name"))
-      .renameNodeInput (node)
+      .renameNodeInput (node);
 
    // Create tooltip.
 
@@ -22,19 +22,19 @@ $.fn.renameNodePopover = function (node)
       events: {
          show: (event, api) =>
          {
-            nameInput .on ("keydown.renameNodePopover", (event) =>
+            nameInput .off (".renameNodePopover") .on ("keydown.renameNodePopover", (event) =>
             {
                if (event .key !== "Enter")
-                  return
+                  return;
 
-               api .toggle (false)
+               api .toggle (false);
             })
 
-            setTimeout (() => nameInput .trigger ("select"), 1)
+            setTimeout (() => nameInput .trigger ("select"), 1);
          },
       },
-   })
+   });
 
-   return this
-}
+   return this;
+};
 

package/src/Editors/Library.js

@@ -97,7 +97,9 @@ module .exports = new class Library extends Dialog
 
       this .button ($(button ?? this .buttons .children () [0]));
 
+      this .input .val ("");
       this .input .trigger ("focus");
+      this .filter ();
    }
 
    button (button)

package/src/Editors/LibraryPane.js

@@ -1,6 +1,6 @@
 "use strict";
 
-module .exports = class LibraryPanel
+module .exports = class LibraryPane
 {
    #library;
 
@@ -9,6 +9,11 @@ module .exports = class LibraryPanel
       this .#library = library;
    }
 
+   get config ()
+   {
+      return this .#library .config;
+   }
+
    get browser ()
    {
       return this .#library .browser;

package/src/Editors/NodesLibrary.js

@@ -17,6 +17,14 @@ module .exports = class NodesLibrary extends LibraryPane
 
    open ()
    {
+      // Set default config values.
+
+      this .config .global .setDefaultValues ({
+         recentNodes: [ ],
+      });
+
+      // Clear output.
+
       this .#list ?.remove ();
       this .#list = undefined;
    }
@@ -48,7 +56,32 @@ module .exports = class NodesLibrary extends LibraryPane
          .sort ((a, b) => a .typeName .localeCompare (b .typeName))
          .sort ((a, b) => a .componentInfo .name .localeCompare (b .componentInfo .name));
 
-      // Create list for proto elements
+      // Get recently used elements.
+
+      const recentNodes = this .config .global .recentNodes .map (typeName => this .browser .getConcreteNode (typeName));
+
+      // Create list for recently used elements.
+
+      if (recentNodes .length)
+      {
+         $("<li></li>")
+            .addClass ("component")
+            .attr ("name", "recent")
+            .text ("Recently Used Nodes")
+            .appendTo (this .#list);
+
+         for (const node of recentNodes)
+         {
+            $("<li></li>")
+               .addClass ("node")
+               .text (node .typeName)
+               .attr ("componentName", node .componentInfo .name)
+               .appendTo (this .#list)
+               .on ("dblclick", () => this .createNode (node .typeName, node .componentInfo .name));
+         }
+      }
+
+      // Create list for proto elements.
 
       if (protos .length)
       {
@@ -129,6 +162,13 @@ module .exports = class NodesLibrary extends LibraryPane
 
    async createNode (typeName, componentName)
    {
+      const recentNodes = this .config .global .recentNodes .filter (name => name !== typeName);
+
+      recentNodes .unshift (typeName);
+      recentNodes .splice (10);
+
+      this .config .global .recentNodes = recentNodes;
+
       UndoManager .shared .beginUndo (_("Create Node %s"), typeName);
 
       await Editor .addComponent (this .executionContext, componentName);

package/src/Editors/OutlineEditor.js

@@ -1909,7 +1909,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
 
       const
          target    = $(event .target),
-         element   = target .closest (".node, .exported-node", this .sceneGraph),
+         element   = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          layerNode = this .getNode (element),
          layerSet  = this .browser .getWorld () .getLayerSet (),
          index     = layerSet ._layers .findIndex (node => node ?.getValue () .valueOf () === layerNode);
@@ -1927,7 +1927,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .getNode (element);
 
       event .preventDefault ();
@@ -1952,7 +1952,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .getNode (element);
 
       event .preventDefault ();
@@ -1965,7 +1965,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .getNode (element);
 
       event .preventDefault ();

package/src/Editors/OutlineView.js

@@ -1092,6 +1092,9 @@ module .exports = class OutlineView extends Interface
          {
             case X3D .X3DConstants .X3DLayerNode:
             {
+               if (node .getExecutionContext () !== this .executionContext)
+                  continue;
+
                buttons .push ($("<span></span>")
                   .attr ("order", "2")
                   .attr ("title", _("Activate layer."))
@@ -1247,7 +1250,9 @@ module .exports = class OutlineView extends Interface
       if (!this .browser .getActiveLayer ())
          return;
 
-      this .sceneGraph .find (`.node[node-id=${this .browser .getActiveLayer () .getId ()}], .exported-node[node-id=${this .browser .getActiveLayer () .getId ()}]`)
+      this .sceneGraph .find (`.node[node-id=${this .browser .getActiveLayer () .getId ()}],
+         .imported-node[node-id=${this .browser .getActiveLayer () .getId ()}],
+         .exported-node[node-id=${this .browser .getActiveLayer () .getId ()}]`)
          .find ("> .item .activate-layer")
          .removeClass ("off")
          .addClass ("green");
@@ -1256,7 +1261,9 @@ module .exports = class OutlineView extends Interface
    updateNodeBound (node)
    {
       this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         .find (`.node[node-id=${node .getId ()}],
+         .imported-node[node-id=${node .getId ()}],
+         .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item .bind-node")
          .removeClass (["on", "off"])
          .addClass (node ._isBound .getValue () ? "on" : "off")
@@ -1268,7 +1275,10 @@ module .exports = class OutlineView extends Interface
       const [className] = this .getLoadState (node .checkLoadState (), node .getTypeName ());
 
       this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}], .externproto[node-id=${node .getId ()}]`)
+         .find (`.node[node-id=${node .getId ()}],
+         .imported-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);
@@ -1279,7 +1289,9 @@ module .exports = class OutlineView extends Interface
       const buttons = [ ];
 
       buttons .push (this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         .find (`.node[node-id=${node .getId ()}],
+         .imported-node[node-id=${node .getId ()}],
+         .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item .play-node")
          .removeClass (["on", "off"])
          .addClass (node ._isPaused .getValue () ? "on" : "off")
@@ -1287,13 +1299,17 @@ module .exports = class OutlineView extends Interface
          .text (node ._isActive .getValue () ? "pause" : "play_arrow"));
 
       buttons .push (this .sceneGraph
-         .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         .find (`.node[node-id=${node .getId ()}],
+         .imported-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 (`.node[node-id=${node .getId ()}],
+         .imported-node[node-id=${node .getId ()}],
+         .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item .loop-node")
          .removeClass (["on", "off"])
          .addClass (node ._loop .getValue () ? "on" : "off"));
@@ -1309,7 +1325,7 @@ module .exports = class OutlineView extends Interface
 
    isInParents (parent, node)
    {
-      return parent .closest (".node[node-id=" + node .getId () + "]", this .sceneGraph) .length;
+      return parent .closest (`.node[node-id=${node .getId ()}]`, this .sceneGraph) .length;
    }
 
    #importedNodeSymbol = Symbol ();
@@ -2710,7 +2726,9 @@ module .exports = class OutlineView extends Interface
 
    nodeCloseClones (element)
    {
-      const opened = this .sceneGraph .find (`.node[node-id=${element .attr ("node-id")}], .imported-node[node-id=${element .attr ("node-id")}], .exported-node[node-id=${element .attr ("node-id")}]`);
+      const opened = this .sceneGraph .find (`.node[node-id=${element .attr ("node-id")}],
+         .imported-node[node-id=${element .attr ("node-id")}],
+         .exported-node[node-id=${element .attr ("node-id")}]`);
 
       opened .each (function (key, value)
       {
@@ -2852,8 +2870,8 @@ module .exports = class OutlineView extends Interface
       element .find (".scene") .addBack (".scene") .each ((i, e) =>
       {
          const
-            element = $(e),
-            scene   = this .getNode (element);
+            child = $(e),
+            scene = this .getNode (child);
 
          scene .externprotos  .removeInterest ("updateSceneSubtree", this);
          scene .protos        .removeInterest ("updateSceneSubtree", this);
@@ -2874,8 +2892,8 @@ module .exports = class OutlineView extends Interface
       element .find (".externproto") .addBack (".externproto") .each ((i, e) =>
       {
          const
-            element = $(e),
-            node    = this .getNode (element);
+            child = $(e),
+            node = this .getNode (child);
 
          node .getLoadState () .removeFieldCallback (this .#updateNodeSymbol);
       });
@@ -2885,12 +2903,12 @@ module .exports = class OutlineView extends Interface
       element .find (".node:not([node-id=NULL]), .exported-node")
          .addBack (".node:not([node-id=NULL]), .exported-node") .each ((i, e) =>
       {
-         const element = $(e);
+         const child = $(e);
 
-         if (!element .jstree ("is_open", element))
+         if (!child .jstree ("is_open", child))
             return;
 
-         const node = this .getNode (element);
+         const node = this .getNode (child);
 
          node .getPredefinedFields ()  .removeInterest ("updateNode", this);
          node .getUserDefinedFields () .removeInterest ("updateNode", this);
@@ -2911,8 +2929,17 @@ module .exports = class OutlineView extends Interface
       element .find (".node:not([node-id=NULL])") .each ((i, e) =>
       {
          const
-            element = $(e),
-            node    = this .getNode (element);
+            child = $(e),
+            node  = this .getNode (child);
+
+         // 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 ()}"]`))
+            .some (s => !$(s) .closest (element) .length))
+         {
+            return;
+         }
 
          node .typeName_changed .removeFieldCallback (this .#nodeSymbol);
          node .name_changed     .removeFieldCallback (this .#nodeSymbol);
@@ -2947,8 +2974,8 @@ module .exports = class OutlineView extends Interface
       element .find (".exported-node") .each ((i, e) =>
       {
          const
-            element = $(e),
-            node    = this .getNode (element);
+            child = $(e),
+            node = this .getNode (child);
 
          node .typeName_changed .removeFieldCallback (this .#exportedNodeSymbol);
          node .name_changed     .removeFieldCallback (this .#exportedNodeSymbol);
@@ -2957,8 +2984,8 @@ module .exports = class OutlineView extends Interface
       element .find (".field, .special") .each ((i, e) =>
       {
          const
-            element = $(e),
-            field   = this .getField (element);
+            child = $(e),
+            field   = this .getField (child);
 
          field .removeReferencesCallback (this .#fieldSymbol);
          field .removeRouteCallback (this .#fieldSymbol);
@@ -2974,8 +3001,8 @@ module .exports = class OutlineView extends Interface
          element .each ((i, e) =>
          {
             const
-               element = $(e),
-               field   = this .getField (element);
+               child = $(e),
+               field = this .getField (child);
 
             field .removeRouteCallback (this .#routesFullSymbol);
             field .removeFieldCallback (this .#fieldValueSymbol);
@@ -3013,7 +3040,7 @@ module .exports = class OutlineView extends Interface
       const
          icon    = $(event .currentTarget) ,
          item    = icon .closest (".item", this .sceneGraph),
-         element = icon .closest (".node, .exported-node", this .sceneGraph),
+         element = icon .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .objects .get (parseInt (element .attr ("node-id"))),
          on      = !!item .attr ("data-hasqtip");
 
@@ -3084,7 +3111,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .getNode (element),
          hidden  = !node .isHidden ();
 
@@ -3093,7 +3120,9 @@ module .exports = class OutlineView extends Interface
 
       node .setHidden (hidden);
 
-      this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+      this .sceneGraph .find (`.node[node-id=${node .getId ()}],
+         .imported-node[node-id=${node .getId ()}],
+         .exported-node[node-id=${node .getId ()}]`)
          .find ("> .item .toggle-visibility")
          .removeClass (["on", "off"])
          .addClass (hidden ? "off" : "on")
@@ -3104,7 +3133,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .getNode (element),
          tool    = node .getTool ();
 
@@ -3123,7 +3152,9 @@ module .exports = class OutlineView extends Interface
 
       node .setUserData (_changing, true);
 
-      this .sceneGraph .find (`.node[node-id=${node .getId ()}] > .item .toggle-tool, .exported-node[node-id=${node .getId ()}] > .item .toggle-tool`)
+      this .sceneGraph .find (`.node[node-id=${node .getId ()}] > .item .toggle-tool,
+         .imported-node[node-id=${node .getId ()}] > .item .toggle-tool,
+         .exported-node[node-id=${node .getId ()}] > .item .toggle-tool`)
          .removeClass (["on", "off"])
          .addClass (tool ? "off" : "on");
    }
@@ -3134,7 +3165,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node", this .sceneGraph),
          node    = this .getNode (element);
 
       event .preventDefault ();
@@ -3153,7 +3184,7 @@ module .exports = class OutlineView extends Interface
    {
       const
          target  = $(event .target),
-         element = target .closest (".node, .exported-node, .externproto", this .sceneGraph),
+         element = target .closest (".node, .imported-node, .exported-node, .externproto", this .sceneGraph),
          item    = target .closest (".item"),
          node    = this .getNode (element);
 
@@ -3188,7 +3219,9 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (node .getType () .includes (X3D .X3DConstants .X3DShapeNode));
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}],
+            .imported-node[node-id=${node .getId ()}],
+            .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass (["on", "off"])
             .addClass (node .isHidden () ? "off" : "on")
@@ -3214,7 +3247,9 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (false);
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}],
+            .imported-node[node-id=${node .getId ()}],
+            .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
             .addClass ("on")
@@ -3238,7 +3273,9 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (false);
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}],
+            .imported-node[node-id=${node .getId ()}],
+            .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
             .addClass ("on")
@@ -3260,7 +3297,9 @@ module .exports = class OutlineView extends Interface
 
          node .setHidden (false);
 
-         this .sceneGraph .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
+         this .sceneGraph .find (`.node[node-id=${node .getId ()}],
+            .imported-node[node-id=${node .getId ()}],
+            .exported-node[node-id=${node .getId ()}]`)
             .find ("> .item .toggle-visibility")
             .removeClass ("off")
             .addClass ("on")

package/src/Editors/PrimitivesLibrary.js

@@ -11,6 +11,20 @@ module .exports = class PrimitivesLibrary extends LibraryPane
 
    #list;
 
+   open ()
+   {
+      // Set default config values.
+
+      this .config .global .setDefaultValues ({
+         recentPrimitives: [ ],
+      });
+
+      // Clear output.
+
+      this .#list ?.remove ();
+      this .#list = undefined;
+   }
+
    update ()
    {
       // Fill output.
@@ -33,6 +47,30 @@ module .exports = class PrimitivesLibrary extends LibraryPane
          .sort ((a, b) => a .typeName .localeCompare (b .typeName))
          .sort ((a, b) => a .componentInfo .name .localeCompare (b .componentInfo .name));
 
+      // Get recently used primitives.
+
+      const recentPrimitives = this .config .global .recentPrimitives;
+
+      // Create list for recently used elements.
+
+      if (recentPrimitives .length)
+      {
+         $("<li></li>")
+            .addClass ("component")
+            .attr ("name", "recent")
+            .text ("Recently Used Primitives")
+            .appendTo (this .#list);
+
+         for (const typeName of recentPrimitives)
+         {
+            $("<li></li>")
+               .addClass ("node")
+               .text (typeName)
+               .appendTo (this .#list)
+               .on ("dblclick", () => this .createRecentNode (nodes, typeName));
+         }
+      }
+
       // Create list elements.
 
       let componentName = "";
@@ -52,9 +90,27 @@ module .exports = class PrimitivesLibrary extends LibraryPane
          $("<li></li>")
             .addClass ("node")
             .text (node .typeName)
-            .attr ("x3dSyntax", node .x3dSyntax)
             .appendTo (this .#list)
-            .on ("dblclick", () => this .importX3D (node .typeName, node .x3dSyntax));
+            .on ("dblclick", () => this .createNode (node));
       }
    }
+
+   createRecentNode (nodes, typeName)
+   {
+      const node = nodes .find (node => node .typeName === typeName);
+
+      this .createNode (node);
+   }
+
+   createNode ({ typeName, x3dSyntax})
+   {
+      const recentPrimitives = this .config .global .recentPrimitives .filter (name => name !== typeName);
+
+      recentPrimitives .unshift (typeName);
+      recentPrimitives .splice (10);
+
+      this .config .global .recentPrimitives = recentPrimitives;
+
+      this .importX3D (typeName, x3dSyntax);
+   }
 };

package/src/Undo/Editor.js

@@ -680,7 +680,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
 
                // Remove imported nodes if node is an Inline node.
 
-               for (const importedNode of executionContext .getImportedNodes ())
+               for (const importedNode of Array .from (executionContext .getImportedNodes ()))
                {
                   if (importedNode .getInlineNode () .valueOf () === node)
                      this .removeImportedNode (executionContext, importedNode .getImportedName (), undoManager);
@@ -690,7 +690,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
 
                if (executionContext instanceof X3D .X3DScene)
                {
-                  for (const exportedNode of executionContext .getExportedNodes ())
+                  for (const exportedNode of Array .from (executionContext .getExportedNodes ()))
                   {
                      if (exportedNode .getLocalNode () .valueOf () === node)
                         this .removeExportedNode (executionContext, exportedNode .getExportedName (), undoManager);
@@ -2996,12 +2996,12 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       const
          instance  = node .getType () .includes (X3D .X3DConstants .X3DPrototypeInstance),
          name      = field .getName (),
-         auxillary = field .create ();
+         auxiliary = field .create ();
 
-      auxillary .setUnit (field .getUnit ());
-      auxillary .fromString (string, executionContext);
+      auxiliary .setUnit (field .getUnit ());
+      auxiliary .fromString (string, executionContext);
 
-      if (auxillary .equals (field))
+      if (auxiliary .equals (field))
       {
          field .addEvent ();
          return;
@@ -3014,7 +3014,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       else
          undoManager .beginUndo (_("Change Field »%s« of Node %s"), field .getName (), node .getTypeName ());
 
-      field .assign (auxillary);
+      field .assign (auxiliary);
 
       if (node .isDefaultValue (field))
          field .setModificationTime (0);
@@ -3045,11 +3045,11 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       const
          instance  = node .getType () .includes (X3D .X3DConstants .X3DPrototypeInstance),
          name      = field .getName (),
-         auxillary = field .create ();
+         auxiliary = field .create ();
 
-      auxillary .setValue (value);
+      auxiliary .setValue (value);
 
-      if (auxillary .equals (field))
+      if (auxiliary .equals (field))
       {
          field .addEvent ();
          return;
@@ -3062,7 +3062,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       else
          undoManager .beginUndo (_("Change Field »%s« of Node %s"), field .getName (), node .getTypeName ());
 
-      field .assign (auxillary);
+      field .assign (auxiliary);
 
       if (node .isDefaultValue (field))
          field .setModificationTime (0);