sunrize 1.10.3 → 1.11.0

package/src/Editors/NodeList.js

@@ -9,20 +9,18 @@ const
 
 module .exports = class NodeList extends Interface
 {
-   constructor (element, filter = () => true, callback = Function .prototype)
+   constructor (element, { filter = () => true, callback = Function .prototype })
    {
       super ("Sunrize.NodeList.");
 
       this .nodeList         = element;
+      this .list             = $("<ul></ul>") .appendTo (this .nodeList);
       this .filter           = filter;
       this .callback         = callback;
       this .executionContext = null;
       this .node             = null;
       this .nodes            = [ ];
 
-      this .list = $("<ul></ul>")
-         .appendTo (this .nodeList);
-
       this .setup ();
    }
 
@@ -61,16 +59,23 @@ module .exports = class NodeList extends Interface
 
       for (const node of this .nodes)
       {
-         const listItem = $("<li></li>")
+         const
+            typeNameElement = $("<span></span>") .addClass ("type-name") .text (node .getTypeName ()),
+            nameElement     = $("<span></span>") .addClass ("name") .text (this .getName (node));
+
+         const listItem = $("<li></li>") .appendTo (this .list);
+
+         $("<div></div>")
+            .addClass ("item")
             .append ($("<img></img>") .addClass ("icon") .attr ("src", "../images/OutlineEditor/Node/X3DBaseNode.svg"))
-            .append ($("<span></span>") .addClass ("type-name") .text (node .getTypeName ()))
+            .append (typeNameElement)
             .append (document .createTextNode (" "))
-            .append ($("<span></span>") .addClass ("name") .text (this .getName (node)))
+            .append (nameElement)
             .on ("click", () => this .setNode (node))
-            .appendTo (this .list);
+            .appendTo (listItem);
 
-         node .typeName_changed .addInterest ("set_typeName", this, listItem, node);
-         node .name_changed     .addInterest ("set_name",     this, listItem, node);
+         node .typeName_changed .addInterest ("set_typeName", this, typeNameElement, node);
+         node .name_changed     .addInterest ("set_name",     this, nameElement,     node);
       }
 
       this .nodeList .scrollTop (scrollTop);
@@ -92,7 +97,7 @@ module .exports = class NodeList extends Interface
 
    getNodes ()
    {
-      return Array .from (this .executionContext .traverse (Traverse .PROTO_DECLARATIONS | Traverse .PROTO_DECLARATION_BODY | Traverse .ROOT_NODES), node => node instanceof X3D .SFNode ? node .getValue () : node);
+      return Array .from (this .executionContext .traverse (Traverse .PROTO_DECLARATIONS | Traverse .PROTO_DECLARATION_BODY | Traverse .ROOT_NODES), node => node instanceof X3D .SFNode ? node .getValue () .valueOf () : node .valueOf ());
    }
 
    getName (node)
@@ -110,13 +115,13 @@ module .exports = class NodeList extends Interface
       return name;
    }
 
-   set_typeName (listItem, node)
+   set_typeName (element, node)
    {
-      listItem .find (".type-name") .text (node .getTypeName ());
+      element .text (node .getTypeName ());
    }
 
-   set_name (listItem, node)
+   set_name (element, node)
    {
-      listItem .find (".name") .text (node .getName ());
+      element .text (this .getName (node));
    }
 };

package/src/Editors/OutlineEditor.js

@@ -21,7 +21,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
 
       element .on ("contextmenu", (event) => this .showContextMenu (event));
 
-      electron .ipcRenderer .on ("outline-editor", (event, key, ...args) => this [key] (...args));
+      electron .ipcRenderer .on ("outline-editor", (event, key, ... args) => this [key] (... args));
 
       electron .ipcRenderer .on ("transform-to-zero",   () => this .transformToZero ());
       electron .ipcRenderer .on ("remove-empty-groups", () => this .removeEmptyGroups ());
@@ -1605,7 +1605,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
    {
       const node = this .objects .get (nodeId);
 
-      UndoManager .shared .beginUndo (_("Determine Bounding Box From Scratch"));
+      UndoManager .shared .beginUndo (_("Determine Bounding Box from Scratch"));
 
       Editor .setFieldValue (node .getExecutionContext (), node, node ._bboxSize,   new X3D .Vector3 (-1, -1, -1));
       Editor .setFieldValue (node .getExecutionContext (), node, node ._bboxCenter, new X3D .Vector3 ());
@@ -2116,7 +2116,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
       {
          Editor .setFieldValue (this .browser .currentScene, node, node ._startTime, Date .now () / 1000);
 
-         node ._isEvenLive = true;
+         node ._evenLive = true;
       }
    }
 
@@ -2146,7 +2146,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
       Editor .setFieldValue (this .browser .currentScene, node, node ._loop, !node ._loop .getValue ());
 
       if (node ._loop .getValue () && node ._startTime .getValue () >= node ._stopTime .getValue ())
-         node ._isEvenLive = true;
+         node ._evenLive = true;
    }
 
    addBooleanField (button)

package/src/Editors/OutlineRouteGraph.js

@@ -18,8 +18,10 @@ module .exports = class OutlineRouteGraph extends OutlineView
    {
       super .colorScheme (shouldUseDarkColors);
 
-      this .routeColor         = window .getComputedStyle ($("body") [0]) .getPropertyValue ("--system-gray1");
-      this .routeSelectedColor = window .getComputedStyle ($("body") [0]) .getPropertyValue ("--system-red");
+      const style = window .getComputedStyle ($("body") [0]);
+
+      this .routeColor         = style .getPropertyValue ("--system-gray0");
+      this .routeSelectedColor = style .getPropertyValue ("--system-red");
 
       this .requestUpdateRouteGraph ();
    }

package/src/Editors/OutlineView.js

@@ -1394,7 +1394,7 @@ module .exports = class OutlineView extends Interface
          buttons .slice (-3) .forEach (button => button .hide ());
 
       if (!node ._isActive .getValue ())
-         node ._isEvenLive = false;
+         node ._evenLive = false;
    }
 
    isInParents (parent, node)

package/src/Editors/ScriptEditor.js

@@ -16,12 +16,12 @@ const
    monacoLoader = require ("monaco-editor/min/vs/loader.js"),
    _            = require ("../Application/GetText");
 
+require ("../Controls/RenameNodeInput");
+
 monacoLoader .require .config ({
    baseUrl: url .pathToFileURL (path .resolve (path .dirname (require .resolve ("monaco-editor/package.json")), "min")) + "/",
 });
 
-require ("../Controls/RenameNodeInput");
-
 module .exports = class ScriptEditor extends Interface
 {
    constructor (element)
@@ -112,16 +112,21 @@ module .exports = class ScriptEditor extends Interface
       this .hSplitter = new Splitter (this .verticalSplitterLeft, "horizontal");
 
       this .nodeListElement = $("<div></div>")
-         .addClass ("node-list")
+         .addClass (["alternating", "node-list"])
          .appendTo (this .horizontalSplitterTop);
 
       this .nodeName = $("<input></input>")
          .addClass ("node-name")
+         .attr ("title", _("Rename node."))
          .attr ("placeholder", _("Enter node name."))
          .appendTo (this .horizontalSplitterTop)
-         .renameNodeInput (null, null);
+         .renameNodeInput (null);
 
-      this .nodeList = new NodeList (this .nodeListElement, node => node .getTypeName () .match (/^(?:Script|ShaderPart)$/), node => this .setNode (node));
+      this .nodeList = new NodeList (this .nodeListElement,
+      {
+         filter: node => node .getTypeName () .match (/^(?:Script|ShaderPart)$/),
+         callback: node => this .setNode (node),
+      });
 
       this .consoleElement = $("<div></div>")
          .attr ("id", "script-editor-console")
@@ -130,7 +135,7 @@ module .exports = class ScriptEditor extends Interface
 
       this .console = new Console (this .consoleElement);
 
-      electron .ipcRenderer .on ("script-editor", (event, key, ...args) => this [key] (...args));
+      electron .ipcRenderer .on ("script-editor", (event, key, ... args) => this [key] (... args));
 
       // Setup.
 
@@ -233,7 +238,7 @@ module .exports = class ScriptEditor extends Interface
       }
       else
       {
-         this .nodeName .renameNodeInput (null, null);
+         this .nodeName .renameNodeInput (null);
          this .applyButton .hide ();
          this .monaco ?.detach ();
 

package/src/Undo/Editor.js

@@ -13,6 +13,11 @@ const
 
 module .exports = class Editor
 {
+   /**
+    * Shard UndoManager
+    */
+   static get undoManager () { return UndoManager .shared; }
+
    /**
     * X3D Id
     */
@@ -1729,7 +1734,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       sourceNode      = sourceNode .valueOf ();
       destinationNode = destinationNode .valueOf ();
 
-      undoManager .beginUndo (_("Add Route From %s »%s« TO %s »%s«"), sourceNode .getTypeName (), sourceField, destinationNode .getTypeName (), destinationField);
+      undoManager .beginUndo (_("Add Route from %s »%s« to %s »%s«"), sourceNode .getTypeName (), sourceField, destinationNode .getTypeName (), destinationField);
 
       try
       {
@@ -1791,7 +1796,7 @@ ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd () }
       sourceNode      = sourceNode .valueOf ();
       destinationNode = destinationNode .valueOf ();
 
-      undoManager .beginUndo (_("Delete Route From %s »%s« TO %s »%s«"), sourceNode .getTypeName (), sourceField, destinationNode .getTypeName (), destinationField);
+      undoManager .beginUndo (_("Delete Route from %s »%s« to %s »%s«"), sourceNode .getTypeName (), sourceField, destinationNode .getTypeName (), destinationField);
 
       executionContext .deleteRoute (sourceNode .valueOf (), sourceField, destinationNode .valueOf (), destinationField);
 

package/src/Undo/UndoManager.js

@@ -112,9 +112,9 @@ module .exports = class UndoManager
     *
     * @param  {...string} args description
     */
-   beginUndo (...args)
+   beginUndo (... args)
    {
-      this .undoStack .push (util .format (...args));
+      this .undoStack .push (util .format (... args));
    }
 
    endUndo ()

package/src/X3D.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const X3D = require ("x_ite/x_ite.min.js");
+const X3D = require ("x_ite");
 
 X3D .TYPE_SCRIPT_PATH = require .resolve ("x_ite/x_ite.d.ts");
 X3D .X3DUOM_PATH      = require .resolve ("x_ite/X3DUOM.xml");

package/src/assets/themes/default.css

@@ -7,6 +7,11 @@ html {
   height: 100%;
 }
 
+body {
+  --input-height: 20px;
+  --scrollbar-width: 14px;
+}
+
 body {
   overflow: hidden;
   height: 100%;
@@ -37,8 +42,8 @@ body {
 /* Scrollbars */
 
 ::-webkit-scrollbar {
-  width: 14px;
-  height: 14px;
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
 }
 
 ::-webkit-scrollbar-track, /* Track */
@@ -96,6 +101,13 @@ th, td,
   color: var(--text-color);
 }
 
+select option {
+  font-family: var(--sans-serif);
+  font-size: var(--font-size);
+  color: var(--text-color);
+  background: var(--background-color);
+}
+
 .ui-widget label {
   position: relative;
   top: -2px;
@@ -452,6 +464,10 @@ body.light .qtip-tipsy {
   padding: 8px;
 }
 
+.qtip span {
+  display: block;
+}
+
 .qtip input,
 .qtip select,
 .qtip button {
@@ -460,23 +476,35 @@ body.light .qtip-tipsy {
   background: var(--background-color);
   border: 1px solid var(--system-gray7);
   filter: opacity(80%);
+  margin: 2px 0;
+}
+
+.qtip input[type=checkbox] {
+  display: inline-block;
+  width: auto;
+  margin: 4px 0 0 0;
 }
 
-.qtip .qtip-content > div > * {
-  margin: 0.3em 0em;
+.qtip label {
+  display: inline-block;
+  width: auto;
+  position: relative;
+  margin-left: 5px !important;
+  top: -2px;
+  margin: 4px 0 0 0;
 }
 
 .qtip .qtip-content > div:first-child {
-  margin-top: 0em;
+  margin-top: 0;
 }
 
 .qtip .qtip-content > div:last-child {
-  margin-bottom: 0em;
+  margin-bottom: 0;
 }
 
 .qtip select:hover,
 .qtip button:hover {
-  background-color: var(--system-gray4);
+  background-color: var(--system-gray8);
   color: var(--system-gray0);
 }
 
@@ -548,7 +576,8 @@ body.light .qtip-tipsy {
   font-size: var(--font-size);
 }
 
-.horizontal-toolbar .input {
+.horizontal-toolbar .input,
+.horizontal-toolbar .select {
   display: inline-block;
   position: relative;
   top: -3px;
@@ -593,6 +622,7 @@ body.light .qtip-tipsy {
 .horizontal-toolbar .material-symbols-outlined.disabled,
 .horizontal-toolbar .text.disabled,
 .horizontal-toolbar .input.disabled,
+.horizontal-toolbar .select.disabled,
 .vertical-toolbar .material-icons.disabled,
 .vertical-toolbar .material-symbols-outlined.disabled {
   pointer-events: none;
@@ -876,6 +906,16 @@ body.dark .ui-widget .library-list .component {
   color: var(--system-gray0);
 }
 
+.node-list .button.disabled {
+  pointer-events: none;
+  color: var(--system-gray3);
+}
+
+.node-list .bold {
+  font-weight: bold;
+  color: var(--system-brown);
+}
+
 /* Footer */
 
 #footer {
@@ -1025,8 +1065,6 @@ body.dark .ui-widget .library-list .component {
 /* Script Editor */
 
 .script-editor {
-  --input-height: 20px;
-
   box-sizing: border-box;
 }
 
@@ -1074,8 +1112,6 @@ body.dark .ui-widget .library-list .component {
 /* Animation Editor */
 
 .animation-editor {
-  --input-height: 20px;
-
   box-sizing: border-box;
 }
 
@@ -1103,6 +1139,17 @@ body.dark .ui-widget .library-list .component {
   border-left: 1px solid var(--border-color);
 }
 
+.animation-editor .pointer {
+  cursor: pointer;
+}
+
+.animation-editor .scrollbar {
+  position: absolute;
+  bottom: 0;
+  height: var(--scrollbar-width);
+  background: var(--scrollbar-thumb-color);
+}
+
 .animation-editor .node-list {
   bottom: var(--input-height);
   border-bottom: 1px solid var(--border-color);

package/src/assets/themes/system-colors.css

@@ -2,23 +2,25 @@
 
 @media (prefers-color-scheme: light) {
   body {
+    color-scheme: light;
+
     /* Colors */
 
-    --system-red: rgb(255, 59, 48);
-    --system-orange: rgb(255, 149, 0);
-    --system-yellow: rgb(255, 214, 10);
+    --system-red: rgb(255, 56, 60);
+    --system-orange: rgb(255, 141, 40);
+    --system-yellow: rgb(255, 204, 0);
     --system-green: rgb(52, 199, 89);
-    --system-mint: rgb(0, 199, 190);
-    --system-teal: rgb(48, 176, 199);
-    --system-cyan: rgb(50, 173, 230);
-    --system-blue: rgb(0, 122, 255);
+    --system-mint: rgb(0, 200, 179);
+    --system-teal: rgb(0, 195, 208);
+    --system-cyan: rgb(0, 192, 232);
+    --system-blue: rgb(0, 136, 255);
     --system-indigo: rgb(88, 86, 214);
-    --system-purple: rgb(175, 82, 222);
+    --system-purple: rgb(97, 85, 245);
     --system-pink: rgb(255, 45, 85);
-    --system-brown: rgb(162, 132, 94);
+    --system-brown: rgb(172, 127, 94);
 
     --system-gray0: rgb(72, 72, 77);
-    --system-gray1: rgb(122, 122, 127);
+    --system-gray1: rgb(142, 142, 147);
     --system-gray2: rgb(174, 174, 178);
     --system-gray3: rgb(199, 199, 204);
     --system-gray4: rgb(209, 209, 214);
@@ -30,6 +32,7 @@
     --selection-color: black;
     --selection-background-color: rgb(246, 196, 197);
     --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+    --selection-range: rgba(0, 0, 0, 0.05);
   }
 
   /* TweakPanel colors */
@@ -64,20 +67,22 @@
 
 @media (prefers-color-scheme: dark) {
   body {
+    color-scheme: dark;
+
     /* Colors */
 
-    --system-red: rgb(255, 69, 58);
-    --system-orange: rgb(255, 159, 10);
-    --system-yellow: rgb(255, 214, 10);
+    --system-red: rgb(255, 66, 69);
+    --system-orange: rgb(255, 146, 48);
+    --system-yellow: rgb(255, 214, 0);
     --system-green: rgb(48, 209, 88);
-    --system-mint: rgb(102, 212, 207);
-    --system-teal: rgb(64, 200, 224);
-    --system-cyan: rgb(100, 210, 255);
-    --system-blue: rgb(10, 132, 255);
-    --system-indigo: rgb(94, 92, 230);
-    --system-purple: rgb(191, 90, 242);
+    --system-mint: rgb(0, 218, 195);
+    --system-teal: rgb(0, 210, 224);
+    --system-cyan: rgb(60, 211, 254);
+    --system-blue: rgb(0, 145, 255);
+    --system-indigo: rgb(107, 93, 255);
+    --system-purple: rgb(219, 52, 242);
     --system-pink: rgb(255, 55, 95);
-    --system-brown: rgb(172, 142, 104);
+    --system-brown: rgb(183, 138, 102);
 
     --system-gray0: rgb(204, 204, 209);
     --system-gray1: rgb(142, 142, 147);
@@ -92,6 +97,7 @@
     --selection-color: white;
     --selection-background-color: rgb(167, 118, 119);
     --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
+    --selection-range: rgba(255, 255, 255, 0.05);
   }
 
   /* TweakPanel colors */
@@ -125,8 +131,8 @@ body {
   /* Special Colors */
 
   --sidebar-background-color: rgb(208, 219, 231);
-  --tint-color1: rgba(255, 255, 255, 0.3);
-  --tint-color2: rgba(255, 255, 255, 0.5);
+  --tint-color1: rgba(255, 255, 255, 0.5);
+  --tint-color2: rgba(255, 255, 255, 1);
 }
 
 @media (prefers-color-scheme: dark) {