npm - sunrize - Versions diffs - 1.0.43 → 1.0.45 - Mend

sunrize 1.0.43 → 1.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/build/fields.pl +30 -0
package/package.json +9 -9
package/src/html/application.html +12 -3
package/src/html/document.html +1 -1
package/src/sunrize/Application/Application.js +1 -1
package/src/sunrize/Application/CSS.js +20 -0
package/src/sunrize/Application/Document.js +4 -1
package/src/sunrize/Application/Interface.js +10 -0
package/src/sunrize/Application/Tabs.js +13 -6
package/src/sunrize/Application/Traverse.js +0 -3
package/src/sunrize/Controls/Popover.js +1 -0
package/src/sunrize/Controls/Splitter.js +24 -0
package/src/sunrize/Editors/Console.js +20 -5
package/src/sunrize/Editors/Library.js +1 -1
package/src/sunrize/Editors/NodeList.js +6 -4
package/src/sunrize/Editors/OutlineEditor.js +1 -1
package/src/sunrize/Editors/OutlineRouteGraph.js +0 -2
package/src/sunrize/Editors/OutlineView.js +42 -19
package/src/sunrize/Editors/ScriptEditor.js +41 -15
package/src/sunrize/Undo/Editor.js +4 -0
package/src/themes/{dark.css → default.css} +186 -49

package/build/fields.pl ADDED Viewed

@@ -0,0 +1,30 @@
+#!/usr/bin/perl
+use v5.10.0;
+use utf8;
+use open qw/:std :utf8/;
+sub node {
+   $filename = shift;
+   chomp $filename;
+   $filename =~ m|([^/]+)/([^/]+)\.js$|;
+   $componentName = $1;
+   $typeName      = $2;
+   return if $componentName =~ /^Annotation$/;
+   return if $typeName =~ /^X3D/;
+   return unless $typeName =~ /^Transform$/;
+   say "$componentName $typeName";
+   $file = `cat ../x_ite/docs/_posts/components/$componentName/$typeName.md`;
+   @fields = $file =~ m|###\s*[SM]F\w+.*|go;
+   say $_ foreach @fields;
+   #exit;
+}
+node $_ foreach sort `find ../x_ite/src/x_ite/Components -type f -mindepth 2`;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "A Multi Platform X3D Editor",
   "homepage": "https://create3000.github.io/sunrize/",
   "author": "Holger Seelig",
@@ -35,12 +35,12 @@
     }
   ],
   "devDependencies": {
-    "@electron-forge/cli": "^6.1.1",
-    "@electron-forge/maker-deb": "^6.1.1",
-    "@electron-forge/maker-rpm": "^6.1.1",
-    "@electron-forge/maker-squirrel": "^6.1.1",
-    "@electron-forge/maker-zip": "^6.1.1",
-    "electron": "^25.1.0"
+    "@electron-forge/cli": "^6.2.1",
+    "@electron-forge/maker-deb": "^6.2.1",
+    "@electron-forge/maker-rpm": "^6.2.1",
+    "@electron-forge/maker-squirrel": "^6.2.1",
+    "@electron-forge/maker-zip": "^6.2.1",
+    "electron": "^25.1.1"
   },
   "dependencies": {
     "capitalize": "^2.0.4",
@@ -52,14 +52,14 @@
     "jquery-ui-dist": "^1.13.2",
     "jstree": "^3.3.15",
     "material-icons": "^1.13.8",
-    "material-symbols": "^0.6.0",
+    "material-symbols": "^0.8.0",
     "md5": "^2.3.0",
     "monaco-editor": "^0.39.0",
     "node-localstorage": "^2.2.1",
     "qtip2": "^3.0.3",
     "spectrum-colorpicker2": "^2.0.10",
     "string-similarity": "^4.0.4",
-    "x_ite": "^8.8.3"
+    "x_ite": "^8.8.5"
   },
   "main": "src/main.js",
   "bin": {

package/src/html/application.html CHANGED Viewed

@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8"/>
     <!-- Theme -->
-    <link rel="stylesheet" type="text/css" href="../themes/dark.css"/>
+    <link rel="stylesheet" type="text/css" href="../themes/default.css"/>
   </head>
   <body>
     <tab-group sortable="true">
@@ -24,12 +24,21 @@
 }
 .etabs .tab.active {
-  z-index: 1000;
-  padding-bottom: 5px;
+  z-index: 1100;
   background: var(--background-color);
   color: var(--window-tabs-highlight-color);
 }
+.etabs::before {
+  z-index: 1000;
+  content: "";
+  position: relative;
+  display: block;
+  height: 1px;
+  width: 100%;
+  box-shadow: var(--tabs-shadow);
+}
 .etabs .buttons {
   border-color: var(--border-color);
 }

package/src/html/document.html CHANGED Viewed

@@ -3,7 +3,7 @@
     <meta charset="utf-8"/>
     <link rel="stylesheet" type="text/css" href="../../node_modules/jquery-ui-dist/jquery-ui.min.css"/>
     <link rel="stylesheet" type="text/css" href="../../node_modules/qtip2/dist/jquery.qtip.min.css"/>
-    <link rel="stylesheet" type="text/css" href="../themes/dark.css"/>
+    <link rel="stylesheet" type="text/css" href="../themes/default.css"/>
     <link rel="stylesheet" data-name="vs/editor/editor.main" href="../../node_modules/monaco-editor/min/vs/editor/editor.main.css">
   </head>
   <body>

package/src/sunrize/Application/Application.js CHANGED Viewed

@@ -564,7 +564,7 @@ module .exports = class Application
          height: Math .max (this .config .getDefaultValue ("size") [1] / 4, this .config .size [1]),
          minWidth: this .config .getDefaultValue ("size") [0] / 4,
          minHeight: this .config .getDefaultValue ("size") [1] / 4,
-         backgroundColor: "rgb(28, 28, 30)",
+         backgroundColor: electron .nativeTheme .shouldUseDarkColors ? "rgb(28, 28, 30)" : "rgb(242, 242, 247)",
          show: false,
          webPreferences: {
             preload: path .join (__dirname, `../../html/${file}.js`),

package/src/sunrize/Application/CSS.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict"
+const $ = require ("jquery")
+// CSS
+const colorScheme = window .matchMedia ("(prefers-color-scheme: dark)")
+colorScheme .addEventListener ("change", event => changeColorScheme (event));
+changeColorScheme (colorScheme)
+function changeColorScheme (event)
+{
+   $("body")
+      .removeClass (["light", "dark"])
+      .addClass (event .matches ? "dark" : "light")
+}
+module .exports = { colorScheme }

package/src/sunrize/Application/Document.js CHANGED Viewed

@@ -35,6 +35,7 @@ module .exports = new class Document extends Interface
       this .setup ()
    }
    /**
     *
     */
@@ -42,7 +43,7 @@ module .exports = new class Document extends Interface
    {
       await this .browser .loadComponents (this .browser .getComponent ("Grouping"))
-      this .browser .updateConcreteNode ("StaticGroup", require ("../Components/Grouping/StaticGroup"))
+      this .browser .updateConcreteNode (require ("../Components/Grouping/StaticGroup"))
       await this .restoreFile ()
@@ -85,6 +86,8 @@ module .exports = new class Document extends Interface
       this .browserSize  = require ("../Editors/BrowserSize")
       this .resizeSensor = new ResizeSensor ($("#browser-frame"), this .onresize .bind (this))
+      // Change undo menu items.
       this .activate ()
    }

package/src/sunrize/Application/Interface.js CHANGED Viewed

@@ -5,6 +5,7 @@ const
    url         = require ("url"),
    md5         = require ("md5"),
    X3D         = require ("../X3D"),
+   CSS         = require ("../Application/CSS"),
    DataStorage = require ("./DataStorage")
 require ("../Bits/Highlight")
@@ -23,12 +24,15 @@ module .exports = class Interface
       this .config .file = this .createFileConfig ()
       this .browser .addBrowserCallback (this, this .setBrowserEvent .bind (this))
+      CSS .colorScheme .addEventListener ("change", event => this .colorScheme (!! event .matches))
    }
    setup ()
    {
       this .initialize ()
+      // Configure
       this .setBrowserEvent (X3D .X3DConstants .INITIALIZED_EVENT)
    }
@@ -93,8 +97,14 @@ module .exports = class Interface
       this .config .file = this .createFileConfig (this .browser .getWorldURL ())
       this .configure ()
+      this .colorScheme (!! CSS .colorScheme .matches)
    }
+   /**
+    * @param {object} event
+    */
+   colorScheme (shouldUseDarkColors) { }
    /**
     *
     * @param {string} namespace

package/src/sunrize/Application/Tabs.js CHANGED Viewed

@@ -9,6 +9,7 @@ const
    path        = require ("path"),
    fs          = require ("fs"),
    md5         = require ("md5"),
+   CSS         = require ("./CSS"),
    _           = require ("./GetText")
 module .exports = new class Tabs
@@ -31,7 +32,7 @@ module .exports = new class Tabs
    initialize ()
    {
-      this .tabs .on ("tab-active", (tab) =>
+      this .tabs .on ("tab-active", tab =>
       {
          electron .ipcRenderer .send ("title", tab .title)
@@ -41,6 +42,8 @@ module .exports = new class Tabs
          if (tab .domReady)
             tab .webview .send ("activate")
+         tab .initialized = true
          this .saveTabs ()
       })
@@ -252,9 +255,11 @@ module .exports = new class Tabs
       if (numTabs === 1)
          return
-      const position = Math .max (tab .getPosition () - 1, 0)
+      const
+         position = Math .max (tab .getPosition () - 1, 0),
+         nextTab  = this .tabs .getTabByPosition (position)
-      this .tabs .getTabByPosition (position) .activate ()
+      nextTab .activate ()
    }
    tabClose (tab)
@@ -301,9 +306,11 @@ module .exports = new class Tabs
    {
       this .saveTabs ()
-      let numTabs = this .tabs .getTabs () .length
+      const tabs = this .tabs .getTabs () .filter (tab => tab .initialized)
-      for (const tab of this .tabs .getTabs ())
+      let numTabs = tabs .length
+      for (const tab of tabs)
       {
          tab .webview .addEventListener ("ipc-message", (event) =>
          {
@@ -317,7 +324,7 @@ module .exports = new class Tabs
          })
       }
-      for (const tab of this .tabs .getTabs ())
+      for (const tab of tabs)
          tab .webview .send ("close")
       //this .maintenance ()

package/src/sunrize/Application/Traverse.js CHANGED Viewed

@@ -192,9 +192,6 @@ module .exports = class Traverse
       if (!executionContext)
          return
-      if (executionContext .isPrivate ())
-         return
       hierarchy .push (executionContext)
       if (executionContext === object)

package/src/sunrize/Controls/Popover.js CHANGED Viewed

@@ -11,6 +11,7 @@ $.fn.popover = function (options)
       position: {
          my: "top right",
          at: "bottom left",
+         viewport: $("body"),
       },
       style: {
          classes: "qtip-tipsy",

package/src/sunrize/Controls/Splitter.js CHANGED Viewed

@@ -58,7 +58,29 @@ module .exports = class Splitter extends Interface
    configure ()
    {
       if (this .config .file .position !== undefined)
+      {
          this .position = this .config .file .position
+      }
+      else
+      {
+         switch (this .orientation)
+         {
+            case "horizontal":
+            {
+               const top = this .splitter .find ("> .horizontal-splitter-top")
+               this .position = top .outerHeight () / this .splitter .innerHeight ()
+               break
+            }
+            case "vertical":
+            {
+               const left = this .splitter .find ("> .vertical-splitter-left")
+               this .position = left .outerWidth () / this .splitter .innerWidth ()
+               break
+            }
+         }
+      }
    }
    get position ()
@@ -98,5 +120,7 @@ module .exports = class Splitter extends Interface
             break
          }
       }
+      this .splitter .trigger ("position")
    }
 }

package/src/sunrize/Editors/Console.js CHANGED Viewed

@@ -19,6 +19,8 @@ module .exports = class Console extends Interface
       "error",
    ]
+   logClasses = ["", "", "filled", "filled"]
    constructor (element)
    {
       super (`Sunrize.Console.${element .attr ("id")}.`)
@@ -63,11 +65,13 @@ module .exports = class Console extends Interface
          this .output .html ($("#console .console-output") .html ())
          this .output .scrollTop (this .output .prop ("scrollHeight"))
       }
+      else
+      {
+         this .addMessage (null, 1, "", "", this .browser .getWelcomeMessage ())
+      }
       electron .ipcRenderer .on ("console-message", this .addMessageCallback)
-      this .browser .printWelcomeMessage ()
       this .setup ()
    }
@@ -109,14 +113,25 @@ module .exports = class Console extends Interface
          return
       const
-         classes = this .logLevels [level] || "log",
-         text    = $("<p></p>") .addClass (classes) .attr ("title", `${sourceId}:${line}`) .text (message)
+         classes = [this .logLevels [level] ?? "log", this .logClasses [level]],
+         title   = sourceId ? `${sourceId}:${line}`: "",
+         text    = $("<p></p>") .addClass (classes) .attr ("title", title) .text (message)
       if (this .messageTime && performance .now () - this .messageTime > 1000)
-         text .addClass ("splitter")
+         this .output .append ($("<p></p>") .addClass ("splitter"))
       this .messageTime = performance .now ()
+      const last = this .output .children () .last ()
+      if (last .hasClass (this .logLevels [level]))
+      {
+         last .css ("margin-bottom", "0")
+         text .css ("margin-top",    "0")
+         last .css ("border-bottom", "none")
+         text .css ("border-top",    "none")
+      }
       this .output .append (text)
       this .output .scrollTop (this .output .prop ("scrollHeight"))
    }

package/src/sunrize/Editors/Library.js CHANGED Viewed

@@ -38,7 +38,7 @@ module .exports = new class Library extends Dialog
       this .input = $("<input></input>")
          .appendTo (this .element)
          .addClass ("library-input")
-         .attr ("placeholder", _ ("Node type name"))
+         .attr ("placeholder", _ ("Search a node"))
          .on ("keydown", event => this .enter (event))
          .on ("keyup", () => this .update ())

package/src/sunrize/Editors/NodeList.js CHANGED Viewed

@@ -32,7 +32,7 @@ module .exports = class NodeList extends Interface
       this .executionContext = this .browser .currentScene
       this .update ()
-      this .setNode (this .nodes [this .config .file .index] || null)
+      this .setNode (this .nodes [this .config .file .index] ?? null, false)
       this .executionContext .sceneGraph_changed .addInterest ("update", this)
    }
@@ -77,10 +77,12 @@ module .exports = class NodeList extends Interface
          this .setNode (null)
    }
-   setNode (node)
+   setNode (node, config = true)
    {
-      this .config .file .index = this .nodes .indexOf (node)
-      this .node                = node
+      if (config)
+         this .config .file .index = this .nodes .indexOf (node)
+      this .node = node
       this .callback (node)
    }

package/src/sunrize/Editors/OutlineEditor.js CHANGED Viewed

@@ -884,7 +884,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
 	removeColorField (element)
 	{
-		element .spectrum ("destroy")
+		element .spectrum ?.("destroy")
 	}
    addTimeField (time)

package/src/sunrize/Editors/OutlineRouteGraph.js CHANGED Viewed

@@ -146,7 +146,6 @@ module .exports = class OutlineRouteGraph extends OutlineView
 			canvas  = $canvas .get (0),
 			context = canvas .getContext ("2d")
-		$canvas .width  (Math .ceil (parent .width ()))
 		$canvas .height (Math .ceil (parent .height ()))
 		canvas .width  = $canvas .width ()
@@ -238,7 +237,6 @@ module .exports = class OutlineRouteGraph extends OutlineView
 			canvas  = $canvas .get (0),
 			context = canvas .getContext ("2d")
-		$canvas .width  (Math .ceil (parent .width ()))
 		$canvas .height (Math .ceil (parent .height ()))
 		canvas .width  = $canvas .width ()

package/src/sunrize/Editors/OutlineView.js CHANGED Viewed

@@ -686,6 +686,9 @@ module .exports = class OutlineView extends Interface
          .wrapInner ("<div class=\"item no-select\"/>")
          .find (".item") .append ("<div class=\"route-curves\"><canvas></canvas></div>")
+      child .find (".field .name, .special .name")
+         .on ("mouseenter", this .updateTitle .bind (this))
       child .find ("area.input-selector")
          .on ("mouseenter", this .hoverInConnector .bind (this, "input"))
          .on ("mouseleave", this .hoverOutConnector .bind (this, "input"))
@@ -843,9 +846,9 @@ module .exports = class OutlineView extends Interface
          // These fields are observed and must never be disconnected, because clones would also lose connection.
-         node .typeName_changed   .addFieldCallback (this, this .changeNodeTypeName .bind (this, node))
-         node .name_changed       .addFieldCallback (this, this .changeNodeName     .bind (this, node))
-         node .cloneCount_changed .addFieldCallback (this, this .changeCloneCount   .bind (this, node))
+         node .typeName_changed .addFieldCallback (this, this .updateNodeTypeName .bind (this, node))
+         node .name_changed     .addFieldCallback (this, this .updateNodeName     .bind (this, node))
+         node .parents_changed  .addFieldCallback (this, this .updateCloneCount   .bind (this, node))
       }
       // Classes
@@ -905,10 +908,12 @@ module .exports = class OutlineView extends Interface
          name .append (document .createTextNode (" "))
-         const cloneCount = $("<span></span>") .addClass ("clone-count") .appendTo (name)
+         const cloneCount = node .getCloneCount ?.() ?? 0
-         if (node .getCloneCount () > 1)
-            cloneCount .text (node .getCloneCount () > 1 ? `[${node .getCloneCount ()}]` : "")
+         $("<span></span>")
+            .addClass ("clone-count")
+            .text (cloneCount > 1 ? `[${cloneCount}]` : "")
+            .appendTo (name)
          // Append empty tree to enable expander.
@@ -926,7 +931,7 @@ module .exports = class OutlineView extends Interface
       return child
    }
-   changeNodeTypeName (node)
+   updateNodeTypeName (node)
    {
       this .sceneGraph
          .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
@@ -934,7 +939,7 @@ module .exports = class OutlineView extends Interface
          .text (node .getTypeName ())
    }
-   changeNodeName (node)
+   updateNodeName (node)
    {
       this .sceneGraph
          .find (`.node[node-id=${node .getId ()}], .exported-node[node-id=${node .getId ()}]`)
@@ -942,12 +947,14 @@ module .exports = class OutlineView extends Interface
          .text (node .getDisplayName ())
    }
-   changeCloneCount (node)
+   updateCloneCount (node)
    {
+      const cloneCount = node .getCloneCount ?.() ?? 0
       this .sceneGraph
          .find (`.node[node-id=${node .getId ()}]`)
          .find ("> .item .clone-count")
-         .text (node .getCloneCount () > 1 ? `[${node .getCloneCount ()}]` : "")
+         .text (cloneCount > 1 ? `[${cloneCount}]` : "")
    }
    isInParents (parent, node)
@@ -1063,8 +1070,8 @@ module .exports = class OutlineView extends Interface
       this .objects .set (exportedNode .getId (), exportedNode)
       this .objects .set (node .getId (), node)
-      node .typeName_changed .addFieldCallback (this .exportedNodeSymbol, this .changeNodeTypeName .bind (this, node))
-      node .name_changed     .addFieldCallback (this .exportedNodeSymbol, this .changeNodeName     .bind (this, node))
+      node .typeName_changed .addFieldCallback (this .exportedNodeSymbol, this .updateNodeTypeName .bind (this, node))
+      node .name_changed     .addFieldCallback (this .exportedNodeSymbol, this .updateNodeName     .bind (this, node))
       // Node
@@ -1157,9 +1164,6 @@ module .exports = class OutlineView extends Interface
          .addClass ("name")
          .appendTo (child)
-      if (field instanceof X3D .X3DArrayField)
-         name .attr ("title", field .length === 1 ? _ ("1 value") : util .format (_ ("%s values"), field .length .toLocaleString (_.locale)))
       $("<span></span>")
          .addClass ("field-name")
          .text (field .getName ())
@@ -1386,6 +1390,24 @@ module .exports = class OutlineView extends Interface
       return child
    }
+   updateTitle (event)
+   {
+      const
+         name    = $(event .currentTarget),
+         element = $(event .currentTarget) .closest (".field, .special", this .sceneGraph),
+         node    = this .objects .get (parseInt (element .attr ("node-id"))),
+         field   = this .objects .get (parseInt (element .attr ("field-id")))
+      if (field instanceof X3D .X3DArrayField)
+      {
+         name .attr ("title", util .format (field .length === 1 ? _ ("%s value") : _ ("%s values"), field .length .toLocaleString (_.locale)))
+      }
+      else
+      {
+         name .attr ("title", field .toString ({ scene: node .getExecutionContext () }))
+      }
+   }
    updateReferences (parent, node, field)
    {
       const element = parent .find (`.field[field-id=${field .getId ()}]`)
@@ -1414,9 +1436,9 @@ module .exports = class OutlineView extends Interface
          r = Math .floor (field .r * 255),
          g = Math .floor (field .g * 255),
          b = Math .floor (field .b * 255),
-         a = field .getType () === X3D .X3DConstants .SFColorRGBA ? field .a : 1
+         a = field .a ?? 1
-      return "rgba(" + r + "," + g + "," + b + "," + a + ")"
+      return `rgba(${r},${g},${b},${a})`
    }
    getAccessTypeImage (field, active)
@@ -2004,6 +2026,8 @@ module .exports = class OutlineView extends Interface
       this .setTextAreaTabs (textarea)
       this .setTextArea (textarea, node, field)
+      textarea .on ("mouseenter", this .updateTitle .bind (this))
       if ((field .isInput () || field .isInitializable ()) && this .isEditable (parent))
       {
          textarea .on ("keydown",  this .onkeydownArrayField .bind (this, textarea))
@@ -2218,8 +2242,6 @@ module .exports = class OutlineView extends Interface
    setTextArea (textarea, node, field)
    {
-      textarea .attr ("title", field .length === 1 ? _ ("1 value") : util .format (_ ("%s values"), field .length .toLocaleString (_.locale)))
       switch (field .getType ())
       {
          case X3D .X3DConstants .MFBool:
@@ -2471,6 +2493,7 @@ module .exports = class OutlineView extends Interface
             element = $(e),
             field   = this .getField (element)
+         field .removeReferencesCallback (this)
          field .removeRouteCallback (this)
          field .removeFieldCallback (this)
          field .removeFieldCallback (this .fieldButtonSymbol)

package/src/sunrize/Editors/ScriptEditor.js CHANGED Viewed

@@ -10,8 +10,13 @@ const
    Console     = require ("./Console"),
    Editor      = require ("../Undo/Editor"),
    UndoManager = require ("../Undo/UndoManager"),
+   monaco      = require ("monaco-editor/min/vs/loader.js"),
    _           = require ("../Application/GetText")
+monaco .require .config ({
+   baseUrl: "node_modules/monaco-editor/min",
+})
 require ("../Controls/RenameNodeInput")
 module .exports = class ScriptEditor extends Interface
@@ -39,13 +44,24 @@ module .exports = class ScriptEditor extends Interface
       this .vSplitter = new Splitter (this .verticalSplitter, "vertical")
+      this .verticalSplitter .on ("position", () => this .onSplitterPosition ())
       this .toolbar = $("<div></div>")
          .addClass (["toolbar", "vertical-toolbar", "script-editor-toolbar"])
          .appendTo (this .scriptEditor)
+      this .toggleSidebarButton = $("<span></span>")
+         .addClass (["material-symbols-outlined"])
+         .attr ("title", _ ("Toggle sidebar."))
+         .text ("dock_to_right")
+         .appendTo (this .toolbar)
+         .on ("click", () => this .toggleSidebar ())
+      $("<span></span>") .addClass ("separator") .appendTo (this .toolbar)
       this .createButton = $("<span></span>")
          .addClass ("material-icons")
-         .attr ("title", _ ("Create New Script or Shader."))
+         .attr ("title", _ ("Create new Script node or shader."))
          .text ("add")
          .appendTo (this .toolbar)
          .on ("click", () => this .create ())
@@ -113,9 +129,19 @@ module .exports = class ScriptEditor extends Interface
       electron .ipcRenderer .on ("script-editor-menu", (event, key, ...args) => this [key] (...args))
+      // Setup.
       this .setup ()
    }
+   colorScheme (shouldUseDarkColors)
+   {
+      monaco .require (["vs/editor/editor.main"], monaco =>
+      {
+         monaco .editor .setTheme (shouldUseDarkColors ? "vs-dark" : "vs-light")
+      })
+   }
    async setNode (node)
    {
       this .directOutputButton .hide ()
@@ -219,13 +245,7 @@ module .exports = class ScriptEditor extends Interface
          }
          else
          {
-            const monaco = require ("monaco-editor/min/vs/loader.js")
-            monaco .require .config ({
-               baseUrl: "node_modules/monaco-editor/min",
-            })
-            monaco .require (["vs/editor/editor.main"], (monaco) =>
+            monaco .require (["vs/editor/editor.main"], monaco =>
             {
                const element = $("<div></div>")
                   .addClass ("script-editor-monaco")
@@ -243,7 +263,6 @@ module .exports = class ScriptEditor extends Interface
                {
                   value: this .getScriptSource (node),
                   language: this .languages [node .getTypeName ()],
-                  theme: "vs-dark",
                   contextmenu: false,
                   automaticLayout: true,
                   wordWrap: "on",
@@ -607,17 +626,24 @@ main ()
       }
    }
-   closeLeftBar ()
+   onSplitterPosition ()
    {
-      if (this .config .file .vSplitterPosition !== undefined)
+      if (this .vSplitter .position)
+         this .toggleSidebarButton .addClass ("active")
+      else
+         this .toggleSidebarButton .removeClass ("active")
+   }
+   toggleSidebar ()
+   {
+      if (this .vSplitter .position)
       {
-         this .vSplitter .position = this .config .file .vSplitterPosition
-         this .config .file .vSplitterPosition = undefined
+         this .config .file .vSplitterPosition = this .vSplitter .position
+         this .vSplitter .position             = 0
       }
       else
       {
-         this .config .file .vSplitterPosition = this .vSplitter .position
-         this .vSplitter .position = 0
+         this .vSplitter .position = this .config .file .vSplitterPosition
       }
    }
 }

package/src/sunrize/Undo/Editor.js CHANGED Viewed

@@ -235,7 +235,11 @@ module .exports = class Editor
       const oldWorldURL = scene .getMetaData ("base")
       if (oldWorldURL)
+      {
          this .rewriteURLs (executionContext, [...newProtos, ...nodes], oldWorldURL [0], executionContext .worldURL, undoManager)
+      }
+      scene .removeMetaData ("base")
       this .requestUpdateInstances (executionContext, undoManager)

package/src/themes/{dark.css → default.css} RENAMED Viewed

@@ -5,7 +5,46 @@
 @import url(../../node_modules/spectrum-colorpicker2/dist/spectrum.css);
-:root {
+body {
+  /* Colors */
+  --system-red: rgb(255, 59, 48);
+  --system-orange: rgb(255, 149, 0);
+  --system-yellow: rgb(255, 214, 10);
+  --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-indigo: rgb(88, 86, 214);
+  --system-purple: rgb(175, 82, 222);
+  --system-pink: rgb(255, 45, 85);
+  --system-brown: rgb(162, 132, 94);
+  --system-gray0: rgb(72, 72, 77);
+  --system-gray1: rgb(122, 122, 127);
+  --system-gray2: rgb(174, 174, 178);
+  --system-gray3: rgb(199, 199, 204);
+  --system-gray4: rgb(209, 209, 214);
+  --system-gray5: rgb(229, 229, 234);
+  --system-gray6: rgb(242, 242, 247);
+  --system-gray7: rgb(249, 249, 255);
+  --system-gray8: rgb(255, 255, 255);
+  /* Filter Colors */
+  --filter-system-red: invert(31%) sepia(82%) saturate(3000%) hue-rotate(344deg) brightness(115%) contrast(105%);
+  --filter-system-gray0: invert(36%) sepia(72%) saturate(11%) hue-rotate(222deg) brightness(95%) contrast(90%);
+  --filter-system-gray1: invert(63%) sepia(4%) saturate(334%) hue-rotate(201deg) brightness(89%) contrast(86%);
+  /* 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);
+}
+body.dark {
   /* Colors */
   --system-red: rgb(255, 69, 58);
@@ -22,7 +61,7 @@
   --system-brown: rgb(172, 142, 104);
   --system-gray0: rgb(204, 204, 209);
-  --system-gray: rgb(142, 142, 147);
+  --system-gray1: rgb(142, 142, 147);
   --system-gray2: rgb(99, 99, 102);
   --system-gray3: rgb(72, 72, 74);
   --system-gray4: rgb(58, 58, 60);
@@ -34,28 +73,24 @@
   /* Filter Colors */
   --filter-system-red: invert(69%) sepia(59%) saturate(6315%) hue-rotate(336deg) brightness(99%) contrast(108%);
-  --filter-system-gray: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);
   --filter-system-gray0: invert(97%) sepia(2%) saturate(509%) hue-rotate(200deg) brightness(84%) contrast(94%);
+  --filter-system-gray1: invert(72%) sepia(0%) saturate(6315%) hue-rotate(205deg) brightness(81%) contrast(62%);
   /* Special Colors */
   --sidebar-background-color: rgb(42, 50, 63);
-  --tint-color: rgba(0, 0, 0, 0.2);
+  --tint-color1: rgba(0, 0, 0, 0.2);
   --tint-color2: rgba(0, 0, 0, 0.4);
-  --highlight-tint-color: rgba(255, 255, 255, 0.2);
 }
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
-}
-:root {
+body {
   /* Colors */
   --background-color: var(--system-gray6);
-  --text-color: var(--system-gray);
-  --highlight-color: var(--system-gray0);
-  --border-color: var(--system-gray8);
+  --text-color: var(--system-gray0);
+  --highlight-color: black;
+  --border-color: var(--system-gray3);
+  --expander-color: var(--system-gray1);
   --accent-color: var(--system-red);
   --separator-color: var(--system-gray3);
@@ -72,10 +107,14 @@
   --medium-icon-size: 18px;
   --large-icon-size: 28px;
+  /* Tabs */
+  --tabs-shadow: 0px 2px 1.5px 0px var(--border-color);
   /* Filter Colors */
-  --filter-text-color: var(--filter-system-gray);
-  --filter-highlight-color: var(--filter-system-gray0);
+  --filter-text-color: var(--filter-system-gray0);
+  --filter-highlight-color: var(--filter-system-grayZ);
   --filter-accent-color: var(--filter-system-red);
   /* Fonts */
@@ -88,21 +127,42 @@
   /* Tools */
-  --tool-backdrop-filter: blur(5px);
-  --tool-background-color: rgba(42, 50, 63, 0.7); /* --system-gray6 */
+  --tool-backdrop-filter: blur(25px);
+  --tool-background-color: rgba(208, 219, 231, 0.8); /* --sidebar-background-color */
   --tool-border-radius: 6px;
-  --tool-border: 1px solid var(--system-gray3);
-  --tool-shadow: 3px 3px 9px var(--system-gray8);
+  --tool-border: 1px solid var(--system-gray8);
+  --tool-shadow: 3px 3px 9px rgba(0, 0, 0, 0.6);
   --background-disabled: repeating-linear-gradient(
     -45deg,
-    var(--tint-color),
-    var(--tint-color) 10px,
+    var(--tint-color1),
+    var(--tint-color1) 10px,
     transparent 10px,
     transparent 20px
   )
 }
+body.dark {
+  /* Colors */
+  --text-color: var(--system-gray1);
+  --highlight-color: var(--system-gray0);
+  --border-color: var(--system-gray8);
+  --expander-color: var(--system-gray8);
+  --filter-text-color: var(--filter-system-gray1);
+  --filter-highlight-color: var(--filter-system-gray0);
+  /* Tabs */
+  --tabs-shadow: 0px 0px 1px 0px var(--border-color);
+  /* Tools */
+  --tool-background-color: rgba(42, 50, 63, 0.8); /* --sidebar-background-color */
+  --tool-border: 1px solid var(--system-gray2);
+  --tool-shadow: 3px 3px 9px var(--system-gray8);
+}
 body {
   overflow: hidden;
   margin: 0;
@@ -112,20 +172,25 @@ body {
   font-size: var(--font-size);
 }
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+}
 *:focus {
   outline: none;
 }
 ::placeholder {
-  color: var(--system-gray3);
-  font-family: var(--sans-serif);
+  color: var(--system-gray2);
 }
 ::selection {
   color: var(--system-gray0);
-  background: var(--system-gray3);
+  background: var(--system-gray4);
 }
+/* common */
 textarea, input, button, select,
 th, td,
 .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget-content {
@@ -177,7 +242,7 @@ thead tr {
 }
 tbody tr:nth-child(odd) {
-  background: var(--tint-color);
+  background: var(--tint-color1);
 }
 tbody tr:hover {
@@ -188,22 +253,22 @@ td > input:not([type]),
 td > input[type="text"],
 td > input[type="number"] {
   width: 100%;
-  border: 1px solid var(--tint-color);
+  border: 1px solid var(--tint-color1);
 }
 td > textarea {
   resize: vertical;
   width: 100%;
   height: 8em;
-  border: 1px solid var(--tint-color) !important;
+  border: 1px solid var(--tint-color1) !important;
 }
 td > select {
-  border: 1px solid var(--tint-color) !important;
+  border: 1px solid var(--tint-color1) !important;
 }
 td > div {
-  border: 1px solid var(--tint-color) !important;
+  border: 1px solid var(--tint-color1) !important;
 }
 .sticky-headers thead {
@@ -215,7 +280,7 @@ tr.disabled ~ tr input,
 tr.disabled ~ tr textarea,
 tr.disabled ~ tr select,
 tr.disabled ~ tr button {
-    pointer-events: none;
+  pointer-events: none;
 }
 tr.disabled ~ tr > td > input,
@@ -223,7 +288,7 @@ tr.disabled ~ tr > td > textarea,
 tr.disabled ~ tr > td > select,
 tr.disabled ~ tr > td > button,
 tr.disabled ~ tr > td > div {
-    background: var(--background-disabled);
+  background: var(--background-disabled);
 }
 /* Highlight animation */
@@ -249,6 +314,7 @@ tr.disabled ~ tr > td > div {
 .vertical-splitter-left,
 .vertical-splitter-right {
+  background-color: var(--background-color);
   position: absolute;
   box-sizing: border-box;
   top: 0;
@@ -310,6 +376,7 @@ tr.disabled ~ tr > td > div {
 .horizontal-splitter-top,
 .horizontal-splitter-bottom {
+  background-color: var(--background-color);
   position: absolute;
   box-sizing: border-box;
   left: 0;
@@ -381,13 +448,13 @@ tr.disabled ~ tr > td > div {
 }
 .ui-tabs.top > .ui-tabs-nav {
-  border-bottom: 1px solid var(--system-gray3);
+  border-bottom: var(--tool-border);
 }
 .ui-tabs.bottom > .ui-tabs-nav {
   position: absolute;
   bottom: 0;
-  border-top: 1px solid var(--system-gray3);
+  border-top: var(--tool-border);
 }
 .ui-tabs > .ui-tabs-nav li,
@@ -459,8 +526,9 @@ tr.disabled ~ tr > td > div {
 }
 .qtip-tipsy.qtip {
-  border: 1px solid var(--border-color);
-  background: var(--system-gray7);
+  border: var(--tool-border);
+  background: var(--tool-background-color);
+  backdrop-filter: var(--tool-backdrop-filter);
 }
 .qtip-tipsy .qtip-content {
@@ -473,9 +541,23 @@ tr.disabled ~ tr > td > div {
   display: block;
   width: 100%;
   background: var(--background-color);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--system-gray7);
+  filter: opacity(80%);
 }
+.qtip .qtip-content > div > * {
+  margin: 0.2em 0em;
+}
+.qtip .qtip-content > div:first-child {
+  margin-top: 0em;
+}
+.qtip .qtip-content > div:last-child {
+  margin-bottom: 0em;
+}
+.qtip select:hover,
 .qtip button:hover {
   background-color: var(--system-gray4);
   color: var(--system-gray0);
@@ -607,6 +689,23 @@ tr.disabled ~ tr > td > div {
 /* Dialog */
+.dialog ::selection {
+  color: var(--system-gray0);
+  background: var(--system-gray2);
+}
+.dialog ::placeholder {
+  color: var(--system-gray1);
+}
+body.dark .dialog ::placeholder {
+  color: var(--system-gray2);
+}
+.dialog .tabs-panel {
+  padding: 0.5em 1em;
+}
 .dialog.ui-dialog.ui-widget.ui-widget-content {
   cursor: move;
   backdrop-filter: var(--tool-backdrop-filter);
@@ -624,10 +723,6 @@ tr.disabled ~ tr > td > div {
 /* Library */
-.library ::placeholder {
-  color: var(--system-gray2);
-}
 .ui-widget .library-input {
   box-sizing: border-box;
   display: block;
@@ -676,8 +771,13 @@ tr.disabled ~ tr > td > div {
 .ui-widget .library-list .component {
   margin: 1em 0;
-  border-bottom: 1px solid var(--system-gray2);
   font-size: var(--small-font-size);
+  border-bottom: 1px solid var(--system-gray1);
+  color: var(--system-gray1);
+}
+body.dark .ui-widget .library-list .component {
+  border-bottom: 1px solid var(--system-gray2);
   color: var(--system-gray2);
 }
@@ -717,7 +817,7 @@ tr.disabled ~ tr > td > div {
 }
 .node-list > ul > li:nth-child(odd) {
-  background-color: var(--tint-color);
+  background-color: var(--tint-color1);
 }
 .node-list > ul > li:hover {
@@ -748,6 +848,7 @@ tr.disabled ~ tr > td > div {
 }
 .console {
+  overflow: hidden;
   box-sizing: border-box;
 }
@@ -783,7 +884,7 @@ tr.disabled ~ tr > td > div {
 .console-output p.splitter {
   margin-top: 5px;
   border-top: 1px solid var(--system-gray3);
-  padding-top: 5px;
+  margin-bottom: 5px;
 }
 .console-output p.debug {
@@ -806,6 +907,42 @@ tr.disabled ~ tr > td > div {
   color: var(--system-red);
 }
+.console-output p.filled {
+  position: relative;
+  z-index: 0;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  color: black;
+}
+.console-output p.filled:before {
+  content: "";
+  position: absolute;
+  display: block;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  filter: brightness(2) opacity(60%);
+}
+.console-output p.warn.filled {
+  border-top: 1px solid var(--system-yellow);
+  border-bottom: 1px solid var(--system-yellow);
+}
+.console-output p.warn.filled:before {
+  background-color: var(--system-yellow);
+}
+.console-output p.error.filled {
+  border-top: 1px solid var(--system-red);
+  border-bottom: 1px solid var(--system-red);
+}
+.console-output p.error.filled:before {
+  background-color: var(--system-red);
+}
 .console-input {
   position: absolute;
   box-sizing: border-box;
@@ -965,7 +1102,7 @@ tr.disabled ~ tr > td > div {
   top: 0;
   width: 22px;
   cursor: pointer;
-  color: var(--system-gray8);
+  color: var(--expander-color);
 }
 .tree-view .jstree-anchor {
@@ -976,11 +1113,11 @@ tr.disabled ~ tr > td > div {
 }
 .tree-view .jstree-node.selected {
-  background-color: var(--tint-color);
+  background-color: var(--tint-color1);
 }
 .tree-view .jstree-node.primary {
-  outline: 1px solid var(--border-color);
+  outline: 1px solid var(--system-gray8);
 }
 .tree-view .no-select {
@@ -1110,9 +1247,9 @@ tr.disabled ~ tr > td > div {
   top: 4px;
   width: 12px;
   height: 12px;
-  border: 1px solid var(--system-gray8);
+  border: 1px solid var(--border-color);
   border-radius: 50%;
-  background: var(--system-gray8);
+  background: var(--border-color);
 }
 .scene-graph .time-button {
@@ -1209,7 +1346,7 @@ tr.disabled ~ tr > td > div {
   padding: 0;
   min-width: calc(100% - 20px);
   max-width: calc(100% - 20px);
-  background: var(--tint-color);
+  background: var(--tint-color1);
   color: inherit;
   font-family: var(--sans-serif);
   font-size: inherit;