sunrize 1.0.17 → 1.0.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A Multi Platform X3D Editor",
   "homepage": "https://create3000.github.io/sunrize/",
   "author": "Holger Seelig",
@@ -39,7 +39,7 @@
     "@electron-forge/maker-rpm": "^6.1.1",
     "@electron-forge/maker-squirrel": "^6.1.1",
     "@electron-forge/maker-zip": "^6.1.1",
-    "electron": "^24.1.0"
+    "electron": "^24.1.2"
   },
   "dependencies": {
     "capitalize": "^2.0.4",
@@ -58,7 +58,7 @@
     "qtip2": "^3.0.3",
     "spectrum-colorpicker2": "^2.0.10",
     "string-similarity": "^4.0.4",
-    "x_ite": "^8.6.17"
+    "x_ite": "^8.6.18"
   },
   "main": "src/main.js",
   "bin": {

package/src/sunrize/Application/Dashboard.js

@@ -35,7 +35,7 @@ module .exports = class Dashboard extends Interface
          .on ("click", () => this .arrow ())
 
       this .playButton = $("<span></span>")
-         .addClass (["material-icons", "active"])
+         .addClass (["material-icons"])
          .attr ("title", _ ("Toggle browser update."))
          .css ({ position: "relative", left: "-1px", "font-weight": "bold" })
          .text ("play_arrow")
@@ -63,7 +63,7 @@ module .exports = class Dashboard extends Interface
    {
       this .config .file .addDefaultValues ({
          pointer: "hand",
-         play: true,
+         play: false,
       })
 
       this [this .config .file .pointer] ()

package/src/sunrize/Application/Document.js

@@ -98,29 +98,14 @@ module .exports = new class Document extends Interface
 
    onfocus ()
    {
-      if (this .activeElement)
-         this .activeElement .off ("keyup.Document, change.Document")
+      this .activeElement ?.off ("keyup.Document, change.Document")
 
       this .activeElement = document .activeElement ? $(document .activeElement) : null
 
-      if (this .activeElementIsInputOrOutput (false))
-      {
-         this .activeElement .on ("keyup.Document, change.Document", () => this .onchange ())
-
-         this .onchange ()
-      }
-      else
-      {
-         this .autosave ()
-      }
-   }
+      if (this .activeElementIsInputOrOutput ())
+         this .activeElement .on ("keyup.Document, change.Document", () => this .undoManager ())
 
-   onchange ()
-   {
-      electron .ipcRenderer .send ("change-menu", {
-         undoLabel: document .queryCommandEnabled ("undo") ? _ ("Undo ") : _ ("Undo"),
-         redoLabel: document .queryCommandEnabled ("redo") ? _ ("Redo ") : _ ("Redo"),
-      })
+      this .undoManager ()
    }
 
    async restoreFile ()
@@ -174,8 +159,7 @@ module .exports = new class Document extends Interface
     */
    saveFile (force = false)
    {
-      if (this .footer .scriptEditor)
-         this .footer .scriptEditor .apply ()
+      this .footer .scriptEditor ?.apply ()
 
       if (!UndoManager .shared .saveNeeded && !force)
          return
@@ -289,7 +273,7 @@ module .exports = new class Document extends Interface
 
    undo ()
    {
-      if (this .activeElementIsInputOrOutput (false))
+      if (this .activeElementIsInputOrOutput ())
       {
          if (this .activeElement .closest (".script-editor-monaco") .length)
             this .scriptEditor .monaco .getModel () .undo ()
@@ -297,12 +281,14 @@ module .exports = new class Document extends Interface
             document .execCommand ("undo")
       }
       else
+      {
          UndoManager .shared .undo ()
+      }
    }
 
    redo ()
    {
-      if (this .activeElementIsInputOrOutput (false))
+      if (this .activeElementIsInputOrOutput ())
       {
          if (this .activeElement .closest (".script-editor-monaco") .length)
             this .scriptEditor .monaco .getModel () .redo ()
@@ -310,21 +296,33 @@ module .exports = new class Document extends Interface
             document .execCommand ("redo")
       }
       else
+      {
          UndoManager .shared .redo ()
+      }
    }
 
    undoManager ()
    {
-      electron .ipcRenderer .send ("change-menu",
+      if (this .activeElementIsInputOrOutput ())
       {
-         undoLabel: UndoManager .shared .undoLabel,
-         redoLabel: UndoManager .shared .redoLabel,
-      })
+         electron .ipcRenderer .send ("change-menu", {
+            undoLabel: document .queryCommandEnabled ("undo") ? _ ("Undo ") : _ ("Undo"),
+            redoLabel: document .queryCommandEnabled ("redo") ? _ ("Redo ") : _ ("Redo"),
+         })
+      }
+      else
+      {
+         electron .ipcRenderer .send ("change-menu",
+         {
+            undoLabel: UndoManager .shared .undoLabel,
+            redoLabel: UndoManager .shared .redoLabel,
+         })
 
-      electron .ipcRenderer .sendToHost ("saved", !UndoManager .shared .saveNeeded)
+         electron .ipcRenderer .sendToHost ("saved", !UndoManager .shared .saveNeeded)
 
-      if (UndoManager .shared .saveNeeded)
-         this .autosave ()
+         if (UndoManager .shared .saveNeeded)
+            this .autosave ()
+      }
    }
 
    cut ()

package/src/sunrize/Application/Traverse.js

@@ -317,7 +317,7 @@ module .exports = class Traverse
 
          for (let t = type .length - 1; t >= 0; -- t)
          {
-            switch (type)
+            switch (type [t])
             {
                case X3D .X3DConstants .X3DExternProtoDeclaration:
                {

package/src/sunrize/Editors/Console.js

@@ -81,22 +81,25 @@ module .exports = class Console extends Interface
 
    async setBrowserEvent (event)
    {
-      try
-      {
-         super .setBrowserEvent (event)
+      super .setBrowserEvent (event)
 
-         if (event !== X3D .X3DConstants .INITIALIZED_EVENT)
-            return
+      if (event !== X3D .X3DConstants .INITIALIZED_EVENT)
+         return
 
-         this .scriptNode      = this .browser .currentScene .createNode ("Script", { warn: false })
-         this .scriptNode .url = new X3D .MFString ("ecmascript:")
-      }
-      catch (error)
-      { }
-    }
+      const Script = this .browser .getSupportedNode ("Script")
+
+      if (!Script)
+         return
+
+      this .scriptNode       = new Script (this .browser .currentScene)
+      this .scriptNode ._url = new X3D .MFString ("ecmascript:")
+
+      this .scriptNode .setup ()
+   }
 
    excludes = new Set ([
       "The vm module of Node.js is deprecated in the renderer process and will be removed.",
+      "Invalid asm.js: Invalid member of stdlib",
    ])
 
    addMessage (event, level, sourceId, line, message)
@@ -227,7 +230,7 @@ module .exports = class Console extends Interface
 
       try
       {
-         console .debug ("" + this .scriptNode .getValue () .evaluate (text))
+         console .debug ("" + this .scriptNode .evaluate (text))
       }
       catch (error)
       {

package/src/sunrize/Editors/Library.js

@@ -110,7 +110,9 @@ module .exports = new class Library extends Dialog
       if (event .key !== "Enter")
          return
 
-      const first = this .list .find (".node") .first ()
+      const
+         first     = this .list .find (".node") .first (),
+         component = this .list .find (".component") .first ()
 
       if (!first .length)
          return
@@ -122,9 +124,9 @@ module .exports = new class Library extends Dialog
          Type           = SupportedNodes .getType (HTMLSupport .getNodeTypeName (input))
 
       if (Type)
-         this .createNode (Type .prototype .getTypeName ())
+         this .createNode (Type .prototype .getTypeName (), Type .prototype .getComponentName ())
       else
-         this .createNode (first .text ())
+         this .createNode (first .text (), component .attr ("name"))
    }
 
    update ()
@@ -177,6 +179,7 @@ module .exports = new class Library extends Dialog
 
             $("<li></li>")
                .addClass ("component")
+               .attr ("name", node .component)
                .text (this .browser .getSupportedComponents () .get (node .component) .title)
                .appendTo (this .list)
          }
@@ -185,16 +188,18 @@ module .exports = new class Library extends Dialog
             .addClass ("node")
             .text (node .typeName)
             .appendTo (this .list)
-            .on ("dblclick", () => this .createNode (node .typeName))
+            .on ("dblclick", () => this .createNode (node .typeName, node .component))
       }
    }
 
-   createNode (typeName)
+   createNode (typeName, component)
    {
-      const node = this .executionContext .createNode (typeName, { warn: false })
-
       UndoManager .shared .beginUndo (_ ("Create Node %s"), typeName)
 
+      Editor .addComponent (this .executionContext, component)
+
+      const node = this .executionContext .createNode (typeName)
+
       Editor .insertValueIntoArray (this .executionContext, this .executionContext, this .executionContext .rootNodes, this .executionContext .rootNodes .length, node)
 
       UndoManager .shared .endUndo ()

package/src/sunrize/Editors/OutlineEditor.js

@@ -200,103 +200,103 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
                submenu: [
                   {
                      label: "Transform",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Transform", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Grouping", "Transform", "children"],
                   },
                   {
                      label: "Group",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Group", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Grouping", "Group", "children"],
                   },
                   {
                      label: "StaticGroup",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "StaticGroup", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Grouping", "StaticGroup", "children"],
                   },
                   {
                      label: "Switch",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Switch", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Grouping", "Switch", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "Billboard",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Billboard", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Navigation", "Billboard", "children"],
                   },
                   {
                      label: "Collision",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Collision", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Navigation", "Collision", "children"],
                   },
                   {
                      label: "LOD",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "LOD", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Navigation", "LOD", "children"],
                   },
                   {
                      label: "ViewpointGroup",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "ViewpointGroup", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Navigation", "ViewpointGroup", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "Anchor",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Anchor", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Navigation", "Anchor", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "LayoutLayer",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "LayoutLayer", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Layout", "LayoutLayer", "children"],
                   },
                   {
                      label: "ScreenGroup",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "ScreenGroup", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Layout", "ScreenGroup", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "GeoTransform",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "GeoTransform", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Geospatial", "GeoTransform", "children"],
                   },
                   {
                      label: "GeoLocation",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "GeoLocation", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Geospatial", "GeoLocation", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "CADAssembly",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADAssembly", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADGeometry", "CADAssembly", "children"],
                   },
                   {
                      label: "CADFace",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADFace", "shape"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADGeometry", "CADFace", "shape"],
                   },
                   {
                      label: "CADLayer",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADLayer", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADGeometry", "CADLayer", "children"],
                   },
                   {
                      label: "CADPart",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADPart", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CADGeometry", "CADPart", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "LayerSet",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "LayerSet", "layers"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Layering", "LayerSet", "layers"],
                   },
                   {
                      label: "Layer",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Layer", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Layering", "Layer", "children"],
                   },
                   {
                      label: "Viewport",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Viewport", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Layering", "Viewport", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "PickableGroup",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "PickableGroup", "children"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "Picking", "PickableGroup", "children"],
                   },
                   { type: "separator" },
                   {
                      label: "CollidableShape",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CollidableShape", "shape"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "RigidBodyPhysics", "CollidableShape", "shape"],
                   },
                   {
                      label: "CollidableOffset",
-                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "CollidableOffset", "collidable"],
+                     args:[ "addParentGroup", element .attr ("id"), executionContext .getId (), node .getId (), "RigidBodyPhysics", "CollidableOffset", "collidable"],
                   },
                ],
             },
@@ -629,7 +629,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
       UndoManager .shared .endUndo ()
    }
 
-   addParentGroup (id, executionContextId, nodeId, typeName, fieldName)
+   addParentGroup (id, executionContextId, nodeId, component, typeName, fieldName)
    {
       const
          element            = $(`#${id}`),
@@ -639,12 +639,16 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
          parentFieldElement = element .closest (".field, .scene", this .sceneGraph),
          parentNodeElement  = parentFieldElement .closest (".node, .proto, .scene", this .sceneGraph),
          parentNode         = this .getNode (parentNodeElement),
-         parentField        = parentFieldElement .hasClass ("scene") ? parentNode .rootNodes : this .getField (parentFieldElement),
-         node               = executionContext .createNode (typeName, { warn: false }) .getValue (),
-         field              = node .getField (fieldName)
+         parentField        = parentFieldElement .hasClass ("scene") ? parentNode .rootNodes : this .getField (parentFieldElement)
 
       UndoManager .shared .beginUndo (_ ("Add Parent Group %s to Node %s"), typeName, childNode .getTypeName ())
 
+      Editor .addComponent (executionContext, component)
+
+      const
+         node  = executionContext .createNode (typeName) .getValue (),
+         field = node .getField (fieldName)
+
       if (field instanceof X3D .X3DArrayField)
          Editor .insertValueIntoArray (executionContext, node, field, 0, childNode)
       else
@@ -772,7 +776,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const externproto = this .objects .get (protoNodeId)
 
-      externproto .loadNow ()
+      externproto .loadNow () .catch (Function .prototype)
    }
 
    async turnIntoExternPrototype (id, executionContextId, protoNodeId)

package/src/sunrize/Editors/OutlineView.js

@@ -166,18 +166,30 @@ module .exports = class OutlineView extends Interface
       parent .data ("full-expanded", false)
 
       if (scene .getOuterNode () instanceof X3D .X3DProtoDeclaration)
-         Traverse .traverse (scene, Traverse .ROOT_NODES, node => node .setup ())
+      {
+         Traverse .traverse (scene, Traverse .ROOT_NODES, node =>
+         {
+            if (node .isInitialized ())
+               return
+
+            if (node .getType () .includes (X3D .X3DConstants .X3DUrlObject))
+               node .requestImmediateLoad = () => Promise .resolve ()
+
+            node .setup ()
+         })
+      }
 
       if (scene .isScene ())
          scene ._units_changed .addInterest ("updateScene", this, parent, scene)
 
       // Generate subtrees.
 
-      const externprotos  = this .expandSceneExternProtoDeclarations (parent, scene)
-      const protos        = this .expandSceneProtoDeclarations       (parent, scene)
-      const rootNodes     = this .expandSceneRootNodes               (parent, scene)
-      const importedNodes = this .expandSceneImportedNodes           (parent, scene)
-      const exportedNodes = this .expandSceneExportedNodes           (parent, scene)
+      const
+         externprotos  = this .expandSceneExternProtoDeclarations (parent, scene),
+         protos        = this .expandSceneProtoDeclarations       (parent, scene),
+         rootNodes     = this .expandSceneRootNodes               (parent, scene),
+         importedNodes = this .expandSceneImportedNodes           (parent, scene),
+         exportedNodes = this .expandSceneExportedNodes           (parent, scene)
 
       if (!externprotos .is (":empty") || !protos .is (":empty") || !rootNodes .is (":empty") || !importedNodes .is (":empty") || !exportedNodes .is (":empty"))
       {
@@ -472,7 +484,7 @@ module .exports = class OutlineView extends Interface
    expandSceneExportedNodes (parent, scene)
    {
       if (!scene .isScene ())
-         return $("")
+         return $("<div></div>")
 
       const child = $("<div></div>")
          .addClass (["exported-nodes", "subtree"])
@@ -584,6 +596,8 @@ module .exports = class OutlineView extends Interface
 
       if (node .canUserDefinedFields ())
       {
+         // Move user-defined fields on top.
+
          const userDefinedFields = node .getUserDefinedFields ()
 
          fields .sort ((a, b) =>
@@ -595,6 +609,8 @@ module .exports = class OutlineView extends Interface
             return ub - ua
          })
 
+         // Move metadata field on top.
+
          fields .sort ((a, b) =>
          {
             const
@@ -604,7 +620,9 @@ module .exports = class OutlineView extends Interface
             return mb - ma
          })
 
-         // Proto fields, instance fields, user-defined fields.
+         // Proto fields, user-defined fields.
+         // Instances are updated, because they completely change.
+
          node ._fields_changed .addInterest ("updateNode", this, parent, node, full)
       }
 

package/src/sunrize/Editors/ScriptEditor.js

@@ -39,8 +39,6 @@ module .exports = class ScriptEditor extends Interface
 
       this .vSplitter = new Splitter (this .verticalSplitter, "vertical")
 
-      this .vSplitter .splitter .on ("dblclick", () => this .closeLeftBar ())
-
       this .toolbar = $("<div></div>")
          .addClass (["toolbar", "vertical-toolbar", "script-editor-toolbar"])
          .appendTo (this .scriptEditor)
@@ -143,7 +141,7 @@ module .exports = class ScriptEditor extends Interface
             }
          }
 
-         this .monaco .viewState = this .monaco .saveViewState ()
+         this .monaco .viewState = this .monaco ?.saveViewState ()
       }
 
       this .node = node
@@ -394,6 +392,8 @@ main ()
    {
       UndoManager .shared .beginUndo (_ ("Create New Script"))
 
+      Editor .addComponent (this .browser .currentScene, "Scripting")
+
       const nodes = Editor .importX3D (this .browser .currentScene, `
 DEF NewScript Script {
    url "ecmascript:
@@ -420,8 +420,11 @@ function set_field (value, time)
    {
       UndoManager .shared .beginUndo (_ ("Create New Shader"))
 
+      Editor .addComponent (this .browser .currentScene, "Shaders")
+
       const nodes = Editor .importX3D (this .browser .currentScene, `
 DEF NewShader ComposedShader {
+   language "GLSL"
    parts [
       DEF VertexShader ShaderPart {
          type "VERTEX"

package/src/sunrize/Undo/Editor.js

@@ -503,16 +503,21 @@ module .exports = class Editor
    /**
     *
     * @param {X3DScene} scene
-    * @returns {Array<ComponentInfo}
+    * @returns {Array<ComponentInfo>}
     */
    static getUsedComponents (scene)
    {
       const components = new Set ()
 
-      Traverse .traverse (scene, Traverse .PROTO_DECLARATIONS | Traverse .PROTO_DECLARATION_BODY | Traverse .ROOT_NODES, (node) =>
+      Traverse .traverse (scene, Traverse .PROTO_DECLARATIONS | Traverse .PROTO_DECLARATION_BODY | Traverse .ROOT_NODES | Traverse .PROTOTYPE_INSTANCES, (node) =>
       {
-         if (node .getType () .includes (X3D .X3DConstants .X3DNode))
-            components .add (node .getComponentName ())
+         if (!node .getType () .includes (X3D .X3DConstants .X3DNode))
+            return
+
+         if (node .getScene () !== scene)
+            return
+
+         components .add (node .getComponentName ())
       })
 
       return components
@@ -585,8 +590,8 @@ module .exports = class Editor
 
       undoManager .beginUndo (_ ("Set Components of Scene"))
 
-      for (const component of oldComponents)
-         scene .removeComponent (component)
+      for (const { name } of oldComponents)
+         scene .removeComponent (name)
 
       for (const component of components)
          scene .addComponent (component)
@@ -599,6 +604,42 @@ module .exports = class Editor
       undoManager .endUndo ()
    }
 
+   static addComponent (executionContext, name, undoManager = UndoManager .shared)
+   {
+      if (executionContext .hasComponent (name))
+         return
+
+      const browser = executionContext .getBrowser ()
+
+      undoManager .beginUndo (_ ("Add Component %s"), name)
+
+      executionContext .addComponent (browser .getComponent (name))
+
+      undoManager .registerUndo (() =>
+      {
+         this .removeComponent (executionContext, name, undoManager)
+      })
+
+      undoManager .endUndo ()
+   }
+
+   static removeComponent (executionContext, name, undoManager = UndoManager .shared)
+   {
+      if (!executionContext .hasComponent (name))
+         return
+
+      undoManager .beginUndo (_ ("Remove Component %s"), name)
+
+      executionContext .removeComponent (name)
+
+      undoManager .registerUndo (() =>
+      {
+         this .addComponent (executionContext, name, undoManager)
+      })
+
+      undoManager .endUndo ()
+   }
+
    /**
     *
     * @param {X3DScene} scene