sunrize 1.1.5 → 1.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -60,12 +60,12 @@
     "@electron-forge/maker-deb": "^6.4.2",
     "@electron-forge/maker-rpm": "^6.4.2",
     "@electron-forge/maker-squirrel": "^6.4.2",
-    "@electron-forge/maker-zip": "^6.4.2"
+    "@electron-forge/maker-zip": "^6.4.2",
+    "electron": "^27.0.2"
   },
   "dependencies": {
     "capitalize": "^2.0.4",
     "console": "^0.7.2",
-    "electron": "^26.2.4",
     "electron-prompt": "^1.7.0",
     "electron-squirrel-startup": "^1.0.0",
     "electron-tabs": "^1.0.2",
@@ -74,20 +74,20 @@
     "jquery-ui-dist": "^1.13.2",
     "jstree": "^3.3.16",
     "material-icons": "^1.13.12",
-    "material-symbols": "^0.13.0",
+    "material-symbols": "^0.13.1",
     "md5": "^2.3.0",
-    "monaco-editor": "^0.43.0",
+    "monaco-editor": "^0.44.0",
     "node-clipboardy": "^1.0.3",
     "node-localstorage": "^3.0.5",
     "qtip2": "^3.0.3",
     "spectrum-colorpicker2": "^2.0.10",
     "string-similarity": "^4.0.4",
-    "x_ite": "^8.12.5"
+    "x_ite": "^9.0.1"
   },
   "config": {
     "forge": {
       "packagerConfig": {
-        "icon": "./src/images/icon.png"
+        "icon": "./src/assets/images/icon.png"
       },
       "makers": [
         {
@@ -104,9 +104,7 @@
         },
         {
           "name": "@electron-forge/maker-deb",
-          "config": {
-            "icon": "./src/images/icon256.png"
-          }
+          "config": {}
         },
         {
           "name": "@electron-forge/maker-rpm",

package/src/Application/Selection.js

@@ -2,36 +2,36 @@ module .exports = new class Selection
 {
    constructor ()
    {
-      this .nodes = new Map ()
+      this .nodes = new Map ();
    }
 
    clear ()
    {
       for (const node of this .nodes .values ())
       {
-         node .getTool () ?.setSelected (false)
-         node .removeTool ()
+         node .getTool () ?.setSelected (false);
+         node .removeTool ();
       }
 
-      this .nodes .clear ()
+      this .nodes .clear ();
    }
 
    set (node)
    {
-      this .clear ()
-      this .add (node)
+      this .clear ();
+      this .add (node);
    }
 
    add (node)
    {
-      this .nodes .set (node .valueOf (), node .addTool ("createOnSelection"))
-      node .getTool () ?.setSelected (true)
+      this .nodes .set (node .valueOf (), node .addTool ("createOnSelection"));
+      node .getTool () ?.setSelected (true);
    }
 
    remove (node)
    {
-      node .getTool () ?.setSelected (false)
-      node .removeTool ()
-      this .nodes .delete (node .valueOf ())
+      node .getTool () ?.setSelected (false);
+      node .removeTool ();
+      this .nodes .delete (node .valueOf ());
    }
 }

package/src/Application/Tabs.js

@@ -34,7 +34,7 @@ module .exports = new class Tabs
    {
       this .tabs .on ("tab-active", tab =>
       {
-         electron .ipcRenderer .send ("title", tab .title)
+         electron .ipcRenderer .send ("title", tab .getTitle ())
 
          if (tab .url .startsWith ("file:"))
             electron .ipcRenderer .send ("current-file", url .fileURLToPath (tab .url))
@@ -241,6 +241,8 @@ module .exports = new class Tabs
 
       $(tab .element) .find (".tab-title") .attr ("title", fileURL .startsWith ("id:") ? _ ("Currently still unsaved.") : decodeURI (fileURL))
 
+      electron .ipcRenderer .send ("title", tab .getTitle ())
+
       this .saveTabs ()
    }
 

package/src/Editors/OutlineEditor.js

@@ -497,7 +497,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const
          primary     = $(".node.primary, .proto.primary, .externproto.primary"),
-         selected    = this .sceneGraph .find (".node.selected"),
+         selected    = this .sceneGraph .find (".node.manual.selected"),
          selection   = selected .filter (primary) .length ? selected : primary,
          ids         = selection .map (function () { return this .id }) .get (),
          elements    = ids .map (id => $(`#${id}`)),
@@ -552,7 +552,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const
          primary   = $(".node.primary"),
-         selected  = this .sceneGraph .find (".node.selected"),
+         selected  = this .sceneGraph .find (".node.manual.selected"),
          selection = selected .filter (primary) .length ? selected : primary,
          ids       = selection .map (function () { return this .id }) .get ()
 
@@ -607,26 +607,29 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
          parentField        = parentFieldElement .hasClass ("scene") ? parentNode .rootNodes : this .getField (parentFieldElement),
          node               = this .objects .get (nodeId),
          copy               = X3D .X3DBaseNode .prototype .copy .call (node, executionContext),
-         index              = parseInt (element .attr ("index"))
+         index              = parseInt (element .attr ("index"));
 
-      UndoManager .shared .beginUndo (_ ("Unlink Clone"))
+      UndoManager .shared .beginUndo (_ ("Unlink Clone"));
+
+      if (node .getName ())
+         Editor .updateNamedNode (executionContext, executionContext .getUniqueName (node .getName ()), copy);
 
       switch (parentField .getType ())
       {
          case X3D .X3DConstants .SFNode:
          {
-            Editor .setFieldValue (executionContext, parentNode, parentField, copy)
-            break
+            Editor .setFieldValue (executionContext, parentNode, parentField, copy);
+            break;
          }
          case X3D .X3DConstants .MFNode:
          {
-            Editor .removeValueFromArray (executionContext, parentNode, parentField, index)
-            Editor .insertValueIntoArray (executionContext, parentNode, parentField, index, copy)
-            break
+            Editor .removeValueFromArray (executionContext, parentNode, parentField, index);
+            Editor .insertValueIntoArray (executionContext, parentNode, parentField, index, copy);
+            break;
          }
       }
 
-      UndoManager .shared .endUndo ()
+      UndoManager .shared .endUndo ();
    }
 
    addParentGroup (id, executionContextId, nodeId, component, typeName, fieldName)
@@ -1284,7 +1287,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const
          element   = $(event .target) .closest (".node", this .sceneGraph),
-         selected  = this .sceneGraph .find (".node.selected"),
+         selected  = this .sceneGraph .find (".node.manual.selected"),
          selection = selected .filter (element) .length ? selected : element,
          ids       = selection .map (function () { return this .id }) .get ()
 
@@ -1717,12 +1720,12 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
             destinationParentField = destinationParentFieldElement .hasClass ("scene") ? destinationParentNode .rootNodes : this .getField (destinationParentFieldElement),
             destinationIndex       = parseInt (destinationElement .attr ("index"))
 
-         if (destinationElement .hasClass ("node") && destinationElement .data ("drag-type") ==="drag-after")
+         if (destinationElement .hasClass ("node") && destinationElement .data ("drag-type") === "drag-after")
             ++ destinationIndex
 
          if (destinationElement .attr ("node-id") !== "NULL")
          {
-            if (destinationElement .hasClass ("node") && destinationElement .data ("drag-type") ==="drag-into")
+            if (destinationElement .hasClass ("node") && destinationElement .data ("drag-type") === "drag-into")
             {
                destinationParentNode = this .getNode (destinationElement)
             }
@@ -1789,7 +1792,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
 
             if (destinationElement .attr ("node-id") !== "NULL")
             {
-               if (destinationElement .hasClass ("node") && destinationElement .data ("drag-type") ==="drag-into")
+               if (destinationElement .hasClass ("node") && destinationElement .data ("drag-type") === "drag-into")
                {
                   try
                   {
@@ -1867,7 +1870,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
 
             // Adjust matrix.
 
-            if (destinationElement .data ("dropEffect") .match (/copy|move/))
+            if (destinationElement .data ("dropEffect") ?.match (/copy|move/))
             {
                if (sourceNode .getType () .includes (X3D .X3DConstants .X3DTransformNode))
                {
@@ -1896,13 +1899,6 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
                }
             }
 
-            // Update node name and clone count.
-
-            if (destinationElement .data ("dropEffect") === "link")
-            {
-               this .registerUpdateSceneGraph ()
-            }
-
             // End.
 
             ++ destinationIndex
@@ -2002,23 +1998,10 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
       return modelMatrix
    }
 
-   // Call update.
-
-   registerUpdateSceneGraph (undoManager = UndoManager .shared)
-   {
-      this .updateSceneGraph ()
-
-      undoManager .registerUndo (() =>
-      {
-         this .registerUpdateSceneGraph (undoManager)
-      },
-      true)
-   }
-
    removeEmptyGroups ()
    {
       const
-         selection = this .sceneGraph .find (".node.primary, .node.selected"),
+         selection = this .sceneGraph .find (".node.primary, .node.manual.selected"),
          ids       = selection .map (function () { return this .id }) .get (),
          nodes     = ids .length ? ids .map (id => this .getNode ($(`#${id}`))) : this .executionContext .rootNodes
 

package/src/Editors/OutlineView.js

@@ -15,7 +15,6 @@ const
 const
    _expanded     = Symbol (),
    _fullExpanded = Symbol (),
-   _primary      = Symbol (),
    _selected     = Symbol (),
    _changing     = Symbol .for ("Sunrize.changing")
 
@@ -147,9 +146,11 @@ module .exports = class OutlineView extends Interface
    updateComponents ()
    {
       this .onDemandToolNodes = new Set ([
+         X3D .X3DConstants .DirectionalLight,
+         X3D .X3DConstants .PointLight,
+         X3D .X3DConstants .SpotLight,
          X3D .X3DConstants .Sound,
          X3D .X3DConstants .X3DEnvironmentalSensorNode,
-         X3D .X3DConstants .X3DLightNode,
          X3D .X3DConstants .X3DTextureProjectorNode,
          X3D .X3DConstants .X3DViewpointNode,
       ])
@@ -898,9 +899,6 @@ module .exports = class OutlineView extends Interface
 
       if (node)
       {
-         if (node .getUserData (_primary))
-            classes .push ("primary")
-
          if (node .getUserData (_selected))
             classes .push ("selected")
 
@@ -1209,9 +1207,6 @@ module .exports = class OutlineView extends Interface
 
       const classes = [type]
 
-      if (field .getUserData (_primary))
-         classes .push ("primary")
-
       if (field .hasReferences ())
          classes .push ("references")
 
@@ -2622,10 +2617,7 @@ module .exports = class OutlineView extends Interface
          selection = require ("../Application/Selection"),
          nodes     = this .sceneGraph .find (".primary, .selected")
 
-      nodes .removeClass (["primary", "selected"])
-
-      for (const element of nodes)
-         this .getNode ($(element)) .setUserData (_primary, false)
+      nodes .removeClass (["primary", "manual", "selected"])
 
       for (const element of nodes)
          this .getNode ($(element)) .setUserData (_selected, false)
@@ -2772,55 +2764,63 @@ module .exports = class OutlineView extends Interface
    selectNodeElement (element, add = false)
    {
       if (!element .hasClass ("node"))
-         return
+         return;
 
       if (!this .isEditable (element))
-         return
+         return;
 
       const
          selection        = require ("../Application/Selection"),
-         selected         = element .hasClass ("selected"),
+         selected         = element .hasClass ("manual"),
          selectedElements = this .sceneGraph .find (".primary, .selected"),
          node             = this .getNode (element),
-         elements         = $(`.node[node-id=${node .getId ()}]`)
-
-      for (const element of selectedElements)
-         this .getNode ($(element)) .setUserData (_primary, false)
+         elements         = $(`.node[node-id=${node .getId ()}]`);
 
-      selectedElements .removeClass ("primary")
+      selectedElements .removeClass ("primary");
 
       if (add)
       {
-         node .setUserData (_primary,  true)
-         node .setUserData (_selected, !selected)
-
          if (selected)
          {
-            element .removeClass ("selected") .addClass ("primary")
+            if (elements .length === 1)
+            {
+               element .removeClass (["manual", "selected"]);
+            }
+            else
+            {
+               if (elements .filter (".manual") .length === 1)
+                  elements .removeClass (["manual", "selected"]);
+               else
+                  element .removeClass ("manual");
+            }
          }
          else
          {
-            element .addClass ("primary")
-            elements .addClass ("selected")
+            element .addClass (["primary", "manual", "selected"]);
          }
 
-         if (selected)
-            selection .remove (node)
+         if (elements .filter (".manual") .length)
+         {
+            node .setUserData (_selected, true);
+            selection .add (node);
+         }
          else
-            selection .add (node)
+         {
+            node .setUserData (_selected, false);
+            selection .remove (node);
+         }
       }
       else
       {
          for (const element of selectedElements)
-            this .getNode ($(element)) .setUserData (_selected, false)
+            this .getNode ($(element)) .setUserData (_selected, false);
 
-         node .setUserData (_primary,  true)
-         node .setUserData (_selected, true)
+         node .setUserData (_selected, true);
 
-         selectedElements .removeClass ("selected")
-         element .addClass ("primary")
-         elements .addClass ("selected")
-         selection .set (node)
+         selectedElements .removeClass (["manual", "selected"]);
+         element .addClass (["primary", "manual"]);
+         elements .addClass ("selected");
+         selection .set (node);
       }
    }
 

package/src/Tools/EnvironmentalSensor/X3DEnvironmentalSensorNodeTool.js

@@ -12,8 +12,8 @@ class X3DEnvironmentalSensorNodeTool extends X3DChildNodeTool
    {
       await super .initialize (__dirname, "X3DEnvironmentalSensorNodeTool.x3d")
 
-      this .toolNode ._size   .addFieldInterest (this .tool .size)
-      this .toolNode ._center .addFieldInterest (this .tool .center)
+      this .toolNode ._size   .addFieldInterest (this .tool .getField ("size"))
+      this .toolNode ._center .addFieldInterest (this .tool .getField ("center"))
 
       this .tool .boxColor = this .toolBoxColor
       this .tool .size     = this .toolNode ._size

package/src/Tools/Lighting/DirectionalLightTool.js

@@ -8,7 +8,7 @@ class DirectionalLightTool extends X3DLightNodeTool
    {
       await super .initialize ()
 
-      this .toolNode ._direction .addFieldInterest (this .tool .direction)
+      this .toolNode ._direction .addFieldInterest (this .tool .getField ("direction"))
 
       this .tool .direction   = this .toolNode ._direction
       this .tool .whichChoice = 0

package/src/Tools/Lighting/PointLightTool.js

@@ -8,7 +8,7 @@ class PointLightTool extends X3DLightNodeTool
    {
       await super .initialize ()
 
-      this .toolNode ._location .addFieldInterest (this .tool .location)
+      this .toolNode ._location .addFieldInterest (this .tool .getField ("location"))
 
       this .tool .location    = this .toolNode ._location
       this .tool .whichChoice = 1

package/src/Tools/Lighting/SpotLightTool.js

@@ -8,8 +8,8 @@ class SpotLightTool extends X3DLightNodeTool
    {
       await super .initialize ()
 
-      this .toolNode ._location    .addFieldInterest (this .tool .location)
-      this .toolNode ._direction   .addFieldInterest (this .tool .direction)
+      this .toolNode ._location    .addFieldInterest (this .tool .getField ("location"))
+      this .toolNode ._direction   .addFieldInterest (this .tool .getField ("direction"))
       this .toolNode ._beamWidth   .addFieldInterest (this .tool .getField ("beamWidth"))
       this .toolNode ._cutOffAngle .addFieldInterest (this .tool .getField ("cutOffAngle"))
 

package/src/Tools/Lighting/X3DLightNodeTool.js

@@ -13,8 +13,8 @@ class X3DLightNodeTool extends X3DChildNodeTool
       await super .initialize (__dirname, "X3DLightNodeTool.x3d")
 
       this .toolNode ._on        .addFieldInterest (this .tool .getField ("on"))
-      this .toolNode ._color     .addFieldInterest (this .tool .color)
-      this .toolNode ._intensity .addFieldInterest (this .tool .intensity)
+      this .toolNode ._color     .addFieldInterest (this .tool .getField ("color"))
+      this .toolNode ._intensity .addFieldInterest (this .tool .getField ("intensity"))
 
       this .tool .on        = this .toolNode ._on
       this .tool .color     = this .toolNode ._color

package/src/Tools/Navigation/BillboardTool.js

@@ -12,7 +12,7 @@ class BillboardTool extends X3DBoundedObjectTool
    {
       await super .initialize ()
 
-      this .toolNode ._axisOfRotation .addFieldInterest (this .tool .axisOfRotation)
+      this .toolNode ._axisOfRotation .addFieldInterest (this .tool .getField ("axisOfRotation"))
 
       this .tool .centerDisplay  = true
       this .tool .axisOfRotation = this .toolNode ._axisOfRotation

package/src/Tools/Navigation/LODTool.js

@@ -12,7 +12,7 @@ class LODTool extends X3DBoundedObjectTool
    {
       await super .initialize ()
 
-      this .toolNode ._center .addFieldInterest (this .tool .center)
+      this .toolNode ._center .addFieldInterest (this .tool .getField ("center"))
 
       this .tool .centerDisplay = true
       this .tool .center        = this .toolNode ._center

package/src/Tools/Navigation/OrthoViewpointTool.js

@@ -10,7 +10,7 @@ class OrthoViewpointTool extends X3DViewpointNodeTool
    {
       await super .initialize ()
 
-      this .toolNode ._position .addFieldInterest (this .tool .position)
+      this .toolNode ._position .addFieldInterest (this .tool .getField ("position"))
 
       this .tool .position = this .toolNode ._position
    }

package/src/Tools/Navigation/ViewpointTool.js

@@ -8,7 +8,7 @@ class ViewpointTool extends X3DViewpointNodeTool
    {
       await super .initialize ()
 
-      this .toolNode ._position .addFieldInterest (this .tool .position)
+      this .toolNode ._position .addFieldInterest (this .tool .getField ("position"))
 
       this .tool .position = this .toolNode ._position
    }

package/src/Tools/Navigation/X3DViewpointNodeTool.js

@@ -14,7 +14,7 @@ class X3DViewpointNodeTool extends X3DChildNodeTool
    {
       await super .initialize (__dirname, "X3DViewpointNodeTool.x3d")
 
-      this .toolNode ._orientation .addFieldInterest (this .tool .orientation)
+      this .toolNode ._orientation .addFieldInterest (this .tool .getField ("orientation"))
       this .toolNode ._isBound     .addFieldInterest (this .tool .getField ("bound"))
 
       this .tool .whichChoice = this .toolWhichChoice

package/src/Tools/Sound/SoundTool.js

@@ -14,8 +14,8 @@ class SoundTool extends X3DChildNodeTool
    {
       await super .initialize (__dirname, "SoundTool.x3d")
 
-      this .toolNode ._location  .addFieldInterest (this .tool .location)
-      this .toolNode ._direction .addFieldInterest (this .tool .direction)
+      this .toolNode ._location  .addFieldInterest (this .tool .getField ("location"))
+      this .toolNode ._direction .addFieldInterest (this .tool .getField ("direction"))
       this .toolNode ._minBack   .addFieldInterest (this .tool .getField ("minBack"))
       this .toolNode ._minFront  .addFieldInterest (this .tool .getField ("minFront"))
       this .toolNode ._maxBack   .addFieldInterest (this .tool .getField ("maxBack"))

package/src/Tools/{TextureProjector → TextureProjection}/TextureProjectorParallelTool.js

@@ -8,7 +8,7 @@ class TextureProjectorParallelTool extends X3DTextureProjectorNodeTool
    {
       await super .initialize ()
 
-      this .toolNode ._fieldOfView  .addFieldInterest (this .tool .parallelFieldOfView)
+      this .toolNode ._fieldOfView  .addFieldInterest (this .tool .getField ("parallelFieldOfView"))
       this .toolNode ._nearDistance .addFieldInterest (this .tool .getField ("parallelNearDistance"))
       this .toolNode ._farDistance  .addFieldInterest (this .tool .getField ("parallelFarDistance"))
       this .toolNode ._aspectRatio  .addFieldInterest (this .tool .getField ("parallelAspectRatio"))

package/src/Tools/{TextureProjector → TextureProjection}/X3DTextureProjectorNodeTool.js

@@ -15,9 +15,9 @@ class X3DTextureProjectorNodeTool extends X3DChildNodeTool
       await super .initialize (__dirname, "X3DTextureProjectorNodeTool.x3d")
 
       this .toolNode ._on        .addFieldInterest (this .tool .getField ("on"))
-      this .toolNode ._location  .addFieldInterest (this .tool .location)
-      this .toolNode ._direction .addFieldInterest (this .tool .direction)
-      this .toolNode ._upVector  .addFieldInterest (this .tool .upVector)
+      this .toolNode ._location  .addFieldInterest (this .tool .getField ("location"))
+      this .toolNode ._direction .addFieldInterest (this .tool .getField ("direction"))
+      this .toolNode ._upVector  .addFieldInterest (this .tool .getField ("upVector"))
       this .toolNode ._texture   .addFieldInterest (this .tool .getField ("texture"))
 
       this .tool .on        = this .toolNode ._on

package/src/Tools.js

@@ -1,34 +1,34 @@
-"use strict"
+"use strict";
 
 const
    fs   = require ("fs"),
    path = require ("path"),
-   X3D  = require ("./X3D")
+   X3D  = require ("./X3D");
 
-const _tool = Symbol .for ("Sunrize.tool")
+const _tool = Symbol .for ("Sunrize.tool");
 
 Object .assign (X3D .X3DNode .prototype,
 {
    getTool ()
    {
-      return this .getUserData (_tool)
+      return this .getUserData (_tool);
    },
    addTool (action = "createOnDemand")
    {
-      const module = path .resolve (__dirname, "Tools", this .constructor .componentName, this .constructor .typeName + "Tool.js")
+      const module = path .resolve (__dirname, "Tools", this .constructor .componentName, this .constructor .typeName + "Tool.js");
 
       if (!fs .existsSync (module))
-         return this
+         return this;
 
-      const Tool = require (module)
+      const Tool = require (module);
 
       if (!Tool [action])
-         return this
+         return this;
 
-      return this .getUserData (_tool) ?? new Tool (this)
+      return this .getUserData (_tool) ?? new Tool (this);
    },
    removeTool ()
    {
-      return this
+      return this .getTool () ?.removeTool () ?? this;
    },
 })

package/src/assets/html/window-template.html

@@ -15,6 +15,7 @@
               <div id="browser-frame">
                 <x3d-canvas
                     id="browser"
+                    cache="false"
                     preserveDrawingBuffer="true"
                     splashScreen="false"
                     contextMenu="false"

package/src/assets/html/window.html

@@ -15,6 +15,7 @@
               <div id="browser-frame">
                 <x3d-canvas
                     id="browser"
+                    cache="false"
                     preserveDrawingBuffer="true"
                     splashScreen="false"
                     contextMenu="false"

package/src/assets/themes/default-template.css

@@ -964,8 +964,21 @@ body.dark .ui-widget .library-list .component {
   background-color: var(--tint-color1);
 }
 
-.tree-view .jstree-node.primary {
-  outline: 1px solid var(--system-gray8);
+.tree-view .jstree-node.manual.node {
+  outline: 1px dashed var(--system-blue);
+}
+
+.tree-view .jstree-node.primary.externproto,
+.tree-view .jstree-node.primary.proto {
+    outline: 1px solid var(--system-indigo);
+}
+
+.tree-view .jstree-node.primary.node {
+  outline: 1px solid var(--system-blue);
+}
+
+.tree-view .jstree-node.primary.field {
+  outline: 1px solid var(--system-orange);
 }
 
 .tree-view .no-select {

package/src/assets/themes/default.css

@@ -964,8 +964,21 @@ body.dark .ui-widget .library-list .component {
   background-color: var(--tint-color1);
 }
 
-.tree-view .jstree-node.primary {
-  outline: 1px solid var(--system-gray8);
+.tree-view .jstree-node.manual.node {
+  outline: 1px dashed var(--system-blue);
+}
+
+.tree-view .jstree-node.primary.externproto,
+.tree-view .jstree-node.primary.proto {
+    outline: 1px solid var(--system-indigo);
+}
+
+.tree-view .jstree-node.primary.node {
+  outline: 1px solid var(--system-blue);
+}
+
+.tree-view .jstree-node.primary.field {
+  outline: 1px solid var(--system-orange);
 }
 
 .tree-view .no-select {