sunrize 1.11.0 → 1.11.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -78,19 +78,20 @@
     "url": "https://patreon.com/X_ITE"
   },
   "devDependencies": {
-    "@electron-forge/cli": "^7.9.0",
-    "@electron-forge/maker-deb": "^7.9.0",
-    "@electron-forge/maker-dmg": "^7.9.0",
-    "@electron-forge/maker-rpm": "^7.9.0",
-    "@electron-forge/maker-squirrel": "^7.9.0",
-    "@electron-forge/maker-zip": "^7.9.0",
-    "@electron-forge/publisher-github": "^7.9.0",
+    "@electron-forge/cli": "^7.10.2",
+    "@electron-forge/maker-deb": "^7.10.2",
+    "@electron-forge/maker-dmg": "^7.10.2",
+    "@electron-forge/maker-rpm": "^7.10.2",
+    "@electron-forge/maker-squirrel": "^7.10.2",
+    "@electron-forge/maker-zip": "^7.10.2",
+    "@electron-forge/publisher-github": "^7.10.2",
     "shell-tools": "^1.1.9"
   },
   "dependencies": {
+    "@vscode/codicons": "^0.0.41",
     "capitalize": "^2.0.4",
     "console": "^0.7.2",
-    "electron": "^38.1.2",
+    "electron": "^38.3.0",
     "electron-prompt": "^1.7.0",
     "electron-squirrel-startup": "^1.0.1",
     "electron-tabs": "^1.0.4",
@@ -99,17 +100,17 @@
     "jquery-ui-dist": "^1.13.3",
     "jstree": "^3.3.17",
     "material-icons": "^1.13.14",
-    "material-symbols": "^0.36.1",
+    "material-symbols": "^0.37.0",
     "md5": "^2.3.0",
     "mime-types": "^3.0.1",
-    "monaco-editor": "^0.53.0",
+    "monaco-editor": "^0.54.0",
     "node-localstorage": "^3.0.5",
     "qtip2": "^3.0.3",
     "spectrum-colorpicker2": "^2.0.10",
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
     "update-electron-app": "^3.1.1",
-    "x_ite": "^12.1.0",
-    "x3d-traverse": "^1.0.13"
+    "x_ite": "^12.1.2",
+    "x3d-traverse": "^1.0.22"
   }
 }

package/src/Application/Application.js

@@ -319,7 +319,7 @@ module .exports = class Application
                      },
                   },
                   {
-                     label: _("Save A Copy..."),
+                     label: _("Save a Copy..."),
                      click: async () =>
                      {
                         const response = await this .showSaveDialog ({ defaultPath: this .currentFile });

package/src/Application/Dashboard.js

@@ -180,10 +180,19 @@ module .exports = class Dashboard extends Interface
       for (const node of nodes)
          outlineEditor .expandTo (node, { expandObject: true, expandAll: true });
 
-      const elements = nodes .map (node => outlineEditor .sceneGraph .find (`.node[node-id=${node .getId ()}]`));
+      const elements = nodes .map (node => outlineEditor .sceneGraph
+         .find (`:is(.node, .imported-node.proxy)[node-id="${node .getId ()}"]`));
 
-      for (const [i, element] of elements .entries ())
-         outlineEditor .selectNodeElement (element, { add: i > 0 });
+      outlineEditor .deselectAll ({ target: false });
+
+      for (const element of elements)
+      {
+         if (element .is (".node"))
+            outlineEditor .selectNodeElement (element, { add: true });
+
+         else if (element .is (".imported-node.proxy"))
+            outlineEditor .selectPrimaryElement (element, { add: true });
+      }
 
       // Scroll element into view.
       // Hide scrollbars during scroll to prevent overlay issue.

package/src/Application/Document.js

@@ -55,6 +55,7 @@ module .exports = class Document extends Interface
     */
    async initialize ()
    {
+      $("html") .attr ("platform", process .platform);
       $("body") .addClass ("modal");
 
       // Actions
@@ -184,6 +185,10 @@ module .exports = class Document extends Interface
 
       // Restore
 
+      const pkg = require ("../../package.json");
+
+      console .info (`Welcome to ${pkg .productName} v${pkg .version}.`);
+
       await this .restoreFile ();
 
       if (!this .isInitialScene)
@@ -319,8 +324,8 @@ module .exports = class Document extends Interface
 
       const activeElement = this .activeElement;
 
-      if (activeElement .is ("input"))
-         return activeElement .attr ("type") === undefined || activeElement .attr ("type") === "text";
+      if (activeElement .is ("input:not([type]), input[type=text]"))
+         return true;
 
       if (activeElement .is ("textarea"))
          return true;
@@ -451,16 +456,16 @@ Viewpoint {
          pkg       = require ("../../package.json"),
          generator = scene .getMetaData ("generator") ?.filter (value => !value .startsWith (pkg .productName)) ?? [ ];
 
-      generator .push (`${pkg .productName} V${pkg .version}, ${pkg .homepage}`);
-
-      if (!scene .getMetaData ("created"))
-         scene .setMetaData ("created", new Date () .toUTCString ());
+      generator .unshift (`${pkg .productName} V${pkg .version}, ${pkg .homepage}`);
 
       if (!scene .getMetaData ("creator") ?.some (value => value .includes (this .fullname)))
          scene .addMetaData ("creator", this .fullname);
 
-      scene .setMetaData ("generator", generator);
+      if (!scene .getMetaData ("created"))
+         scene .setMetaData ("created", new Date () .toUTCString ());
+
       scene .setMetaData ("modified", new Date () .toUTCString ());
+      scene .setMetaData ("generator", generator);
 
       // Save source code.
 
@@ -630,7 +635,7 @@ Viewpoint {
       if (this .activeElementIsMonacoEditor ())
          return;
 
-      this .sidebar .outlineEditor .copyNodes (true);
+      this .sidebar .outlineEditor .copyNodes ();
       return false;
    }
 

package/src/Application/Hierarchy.js

@@ -36,8 +36,8 @@ module .exports = new class Hierarchy extends Interface
    }
 
    #targetTypes = new Set ([
-      X3D .X3DConstants .X3DShapeNode,
       X3D .X3DConstants .Inline,
+      X3D .X3DConstants .X3DShapeNode,
    ]);
 
    target (node)
@@ -70,10 +70,17 @@ module .exports = new class Hierarchy extends Interface
 
             const node = object .getValue () .valueOf ();
 
-            if (!node .getType () .some (type => this .#targetTypes .has (type)))
+            if (!node .getType () .some (type => this .#targetTypes .has (type)) &&
+                !(node instanceof X3D .X3DImportedNodeProxy))
+            {
                continue;
+            }
+
+            const target = node .getType () .includes (X3D .X3DConstants .X3DShapeNode)
+               ? node .getGeometry () ?.valueOf () ?? node
+               : node;
 
-            targets .push (node .getGeometry ?.() ?.valueOf () ?? node);
+            targets .push (target);
          }
 
          for (const hierarchy of this .#find (targets))

package/src/Controls/AddPrototypePopover.js

@@ -40,7 +40,7 @@ $.fn.addPrototypePopover = function (executionContext, type)
       .appendTo (content);
 
    const nameInput = $("<input></input>")
-      .attr ("placeholder", _("Enter name"))
+      .attr ("placeholder", _("Enter a name"))
       .appendTo (content);
 
    // Create tooltip.
@@ -55,7 +55,7 @@ $.fn.addPrototypePopover = function (executionContext, type)
                electron .shell .beep ();
                nameInput .highlight ();
             })
-            .on ("keydown.addPrototypePopover", event =>
+            .on ("keydown", event =>
             {
                if (event .key !== "Enter")
                   return;

package/src/Controls/AnimationPropertiesPopover.js

@@ -12,7 +12,8 @@ $.fn.animationPropertiesPopover = function (editor)
 {
    // Create content.
 
-   const content = $("<div></div>");
+   const content = $("<div></div>")
+      .css ("width", "200px");
 
    $("<span></span>")
       .text (_("Frames"))
@@ -35,6 +36,7 @@ $.fn.animationPropertiesPopover = function (editor)
       .attr ("type", "number")
       .attr ("step", 1)
       .attr ("min", 1)
+      .attr ("max", 60)
       .attr ("placeholder", _("Enter frame rate"))
       .val (editor .getFrameRate ())
       .on ("change input", updateTime)
@@ -84,6 +86,15 @@ $.fn.animationPropertiesPopover = function (editor)
       events: {
          show: (event, api) =>
          {
+            content .children () .off () .on ("keydown", (event) =>
+            {
+               if (event .key !== "Enter")
+                  return;
+
+               applyButton .trigger ("click");
+               api .toggle (false);
+            })
+
             applyButton .on ("click", (event) =>
             {
                api .toggle (false);

package/src/Controls/Dialog.js

@@ -47,9 +47,12 @@ module .exports = class Dialog extends Interface
    {
       // Set default config values.
 
+      defaults .minSize ??= defaults .size;
+
       this .config .file .setDefaultValues (Object .assign ({
          position: undefined,
          size: [400, 250],
+         minSize: [400, 250],
       },
       defaults));
    }
@@ -58,8 +61,8 @@ module .exports = class Dialog extends Interface
    {
       this .element .dialog ({
          position: { ... this .config .file .position, of: $("body") },
-         minWidth: this .config .file .getDefaultValue ("size") [0],
-         minHeight: this .config .file .getDefaultValue ("size") [1],
+         minWidth: this .config .file .minSize [0],
+         minHeight: this .config .file .minSize [1],
          width: this .config .file .size [0],
          height: this .config .file .size [1],
       })

package/src/Controls/EditNodePopover.js

@@ -19,7 +19,7 @@ $.fn.editNodePopover = function (node)
       .appendTo (content);
 
    const nameInput = $("<input></input>")
-      .attr ("placeholder", _("Enter name"))
+      .attr ("placeholder", _("Enter a name"))
       .appendTo (content);
 
    if (node instanceof X3D .X3DProtoDeclaration)

package/src/Controls/EditUserDefinedFieldPopover.js

@@ -97,7 +97,7 @@ $.fn.editUserDefinedFieldPopover = function (executionContext, node, field = -1)
       .appendTo (content);
 
    const nameInput = $("<input></input>")
-      .attr ("placeholder", _("Enter name"))
+      .attr ("placeholder", _("Enter a name"))
       .appendTo (content);
 
    if (field instanceof X3D .X3DField)

package/src/Editors/AnimationEditor.js

@@ -139,7 +139,7 @@ module .exports = class AnimationEditor extends Interface
          .attr ("min", 0)
          .attr ("max", 0)
          .attr ("title", _("Current frame."))
-         .css ("width", "55px")
+         .css ("width", "70px")
          .appendTo (this .toolbar)
          .on ("change input", () => this .setCurrentFrame (this .getCurrentFrame ()));
 
@@ -166,7 +166,7 @@ module .exports = class AnimationEditor extends Interface
       this .timeElement = $("<span></span>")
          .addClass (["text", "right"])
          .attr ("title", _("Current frame time (hours:minutes:seconds:frames)."))
-         .css ("top", "7px")
+         .css ("top", "7.5px")
          .css ("margin-right", "6px")
          .text (this .formatFrames (0, 10))
          .appendTo (this .toolbar);
@@ -315,8 +315,10 @@ module .exports = class AnimationEditor extends Interface
          this .timeSensor ._isActive         .removeInterest ("set_active",   this);
          this .timeSensor ._fraction_changed .removeInterest ("set_fraction", this);
 
-         this .timeSensor ._evenLive = false;
-         this .timeSensor ._range    = [0, 0, 1];
+         this .timeSensor ._evenLive   = false;
+         this .timeSensor ._range      = [0, 0, 1];
+         this .timeSensor ._resumeTime = 0;
+         this .timeSensor ._pauseTime  = 0;
 
          if (this .timeSensor ._loop .getValue () && this .timeSensor ._isActive .getValue ())
          {
@@ -358,8 +360,6 @@ module .exports = class AnimationEditor extends Interface
          this .set_loop (this .timeSensor ._loop);
          this .set_active (this .timeSensor ._isActive);
 
-         this .updateRange ();
-
          // Show Member List
 
          this .animation ._children .addInterest ("updateMemberList", this);
@@ -405,8 +405,9 @@ module .exports = class AnimationEditor extends Interface
 
       this .setSelection (require ("../Application/Selection"));
       this .zoomFit ();
-      this .setCurrentFrame (0);
       this .requestDrawTimeline ();
+
+      this .browser .nextFrame () .then (() => this .setCurrentFrame (0));
    }
 
    enableIcons (enabled)
@@ -704,9 +705,12 @@ module .exports = class AnimationEditor extends Interface
 
          for (const route of interpolator ._value_changed .getOutputRoutes ())
          {
-            const
-               node  = route .getDestinationNode (),
-               field = node .getField (route .getDestinationField ());
+            const node = route .getDestinationNode ();
+
+            if (!(node instanceof X3D .X3DNode))
+               continue;
+
+            const field = node .getField (route .getDestinationField ());
 
             this .members .add (node);
             this .fields .set (field, interpolator);
@@ -1916,15 +1920,24 @@ module .exports = class AnimationEditor extends Interface
 
       if (selectionRange [0] === selectionRange [1])
       {
-         this .timeSensor ._range [1] = 0;
-         this .timeSensor ._range [2] = 1;
+         if (this .timeSensor ._range [1] !== 0 && this .timeSensor ._range [2] !== 1)
+         {
+            this .timeSensor ._range [1] = 0;
+            this .timeSensor ._range [2] = 1;
+         }
       }
       else
       {
-         const duration = this .getDuration ();
+         const
+            duration = this .getDuration (),
+            begin     = selectionRange [0] / duration,
+            end       = selectionRange [1] / duration;
 
-         this .timeSensor ._range [1] = selectionRange [0] / duration;
-         this .timeSensor ._range [2] = selectionRange [1] / duration;
+         if (this .timeSensor ._range [1] !== begin && this .timeSensor ._range [2] !== end)
+         {
+            this .timeSensor ._range [1] = begin;
+            this .timeSensor ._range [2] = end;
+         }
       }
    }
 
@@ -2319,10 +2332,7 @@ module .exports = class AnimationEditor extends Interface
 
             const pickedKeyframes = this .pickKeyframes ();
 
-            if (!pickedKeyframes .length)
-               this .setCurrentFrame (this .getFrameFromPointer (this .pointer .x));
-
-            this .startMovingFrame = this .getFrameFromPointer (this .pointer .x);
+            this .startMovingFrame = this .getFrameFromPointer ();
 
             if (event .shiftKey && pickedKeyframes .length)
             {
@@ -2330,34 +2340,49 @@ module .exports = class AnimationEditor extends Interface
             }
             else if (event .shiftKey)
             {
+               const frame = this .getFrameFromPointer ();
+
+               this .timeSensor ._pauseTime = Date .now () / 1000;
+
                this .setPickedKeyframes ([ ]);
                this .setSelectedKeyframes ([ ]);
-               this .expandSelectionRange (this .getCurrentFrame ());
+               this .expandSelectionRange (frame);
             }
             else
             {
+               this .timeSensor ._pauseTime = Date .now () / 1000;
+
                if (!pickedKeyframes .length || !pickedKeyframes .every (p => this .getSelectedKeyframes () .some (s => this .equalKeyframe (p, s))))
                {
+                  // There are not picked keyframes or an unselected keyframe is picked.
+
+                  const frame = this .getFrameFromPointer ();
+
+                  if (!pickedKeyframes .length)
+                     this .setCurrentFrame (frame);
+
                   this .setPickedKeyframes (pickedKeyframes);
                   this .setSelectedKeyframes (pickedKeyframes);
-                  this .setSelectionRange (this .getCurrentFrame (), this .getCurrentFrame ());
+                  this .setSelectionRange (frame, frame);
                }
                else
                {
+                  // A selected keyframe is picked.
+
                   this .setPickedKeyframes (this .getSelectedKeyframes ());
                }
             }
 
-            this .timeSensor ._pauseTime = Date .now () / 1000;
             break;
          }
       }
    }
 
-   on_mouseup ()
+   on_mouseup (event)
    {
       $(document) .off (".AnimationEditor");
 
+      this .updatePointer (event);
       this .removeAutoScroll ();
 
 		if (this .#movingKeyframesOffset)
@@ -2425,9 +2450,9 @@ module .exports = class AnimationEditor extends Interface
       this .requestDrawTimeline ();
    }
 
-   getFrameFromPointer (pointerX)
+   getFrameFromPointer (x = this .pointer .x)
    {
-	   const frame = Math .round ((pointerX - this .getTranslation ()) / this .getScale ());
+	   const frame = Math .round ((x - this .getTranslation ()) / this .getScale ());
 
       return X3D .Algorithm .clamp (frame, 0, this .getDuration ());
    }
@@ -2492,10 +2517,6 @@ module .exports = class AnimationEditor extends Interface
 
       this .#defaultIntegers .length = 0;
 
-      const
-         translation = this .getTranslation (),
-         scale       = this .getScale ();
-
       const
 		   key   = interpolator .getMetaData ("Interpolator/key", this .#defaultIntegers),
 		   first = X3D .Algorithm .lowerBound (key, 0, key .length, firstFrame),
@@ -2627,10 +2648,13 @@ module .exports = class AnimationEditor extends Interface
 
    setSelectionRange (start, end)
    {
+      if (start !== end || this .#selectionRange [0] !== this .#selectionRange [1])
+         this .setCurrentFrame (this .getFrameFromPointer ());
+
       this .#selectionRange = [start, end];
 
-      this .selectKeyframesInRange ();
       this .updateRange ();
+      this .selectKeyframesInRange ();
       this .requestDrawTimeline ();
    }
 
@@ -2674,20 +2698,20 @@ module .exports = class AnimationEditor extends Interface
    {
       // Move keyframes or select range.
 
+      const frame = this .getFrameFromPointer ();
+
       if (this .getPickedKeyframes () .length)
       {
-         this .#movingKeyframesOffset = this .getFrameFromPointer (this .pointer .x) - this .startMovingFrame;
+         this .#movingKeyframesOffset = frame - this .startMovingFrame;
       }
       else
       {
          // Select range.
 
-         this .setCurrentFrame (this .getFrameFromPointer (this .pointer .x));
-
          if (event ?.shiftKey)
-            this .expandSelectionRange (this .getCurrentFrame ());
+            this .expandSelectionRange (frame);
          else
-            this .setSelectionRange (this .#selectionRange [0], this .getCurrentFrame ());
+            this .setSelectionRange (this .#selectionRange [0], frame);
       }
    }
 
@@ -2952,43 +2976,25 @@ module .exports = class AnimationEditor extends Interface
          {
             case "main":
             {
-               const allSelected = Array .from (this .fields .keys ())
-                  .every (field => this .getSelectedKeyframes () .some (keyframe => field === keyframe .field));
-
-               if (allSelected)
-               {
-                  for (const field of this .fields .keys ())
-                  {
-                     this .drawSelectedKeyframes (context, field, bottom - this .TRACK_PADDING, red);
-                     break;
-                  }
-               }
+               const fields = new Set (this .fields .keys ())
 
+               this .drawSelectedKeyframes (context, fields, bottom - this .TRACK_PADDING, red);
                break;
             }
             case "node":
             {
                const
                   node   = item .data ("node"),
-                  fields = node .getFields () .filter (field => this .fields .has (field));
-
-               const allSelected = fields
-                  .every (field => this .getSelectedKeyframes () .some (keyframe => field === keyframe .field));
-
-               if (allSelected)
-               {
-                  for (const field of fields)
-                  {
-                     this .drawSelectedKeyframes (context, field, bottom - this .TRACK_PADDING, red);
-                     break;
-                  }
-               }
+                  fields = new Set (node .getFields ());
 
+               this .drawSelectedKeyframes (context, fields, bottom - this .TRACK_PADDING, red);
                break;
             }
             case "field":
             {
-               this .drawSelectedKeyframes (context, item .data ("field"), bottom - this .TRACK_PADDING, red);
+               const fields = new Set ([item .data ("field")]);
+
+               this .drawSelectedKeyframes (context, fields, bottom - this .TRACK_PADDING, red);
                break;
             }
          }
@@ -3012,6 +3018,7 @@ module .exports = class AnimationEditor extends Interface
    }
 
    #defaultIntegers = new X3D .MFInt32 ();
+   #frames = [ ];
 
    drawKeyframes (context, field, firstFrame, lastFrame, bottom, color)
    {
@@ -3022,10 +3029,7 @@ module .exports = class AnimationEditor extends Interface
 
       this .#defaultIntegers .length = 0;
 
-      const
-         left        = this .getLeft (),
-         translation = this .getTranslation (),
-         scale       = this .getScale ();
+      const left = this .getLeft ();
 
       const
 		   key   = interpolator .getMetaData ("Interpolator/key", this .#defaultIntegers),
@@ -3044,24 +3048,52 @@ module .exports = class AnimationEditor extends Interface
 		}
    }
 
-   drawSelectedKeyframes (context, currentField, bottom, selectedColor)
+   drawSelectedKeyframes (context, fields, bottom, selectedColor)
    {
+      if (!this .getSelectedKeyframes () .length)
+         return;
+
       const
-         left        = this .getLeft (),
-         translation = this .getTranslation (),
-         scale       = this .getScale ();
+         left   = this .getLeft (),
+         frames = this .#frames;
 
-      for (const { field, interpolator, index } of this .getSelectedKeyframes ())
+      frames .length = 0;
+
+      // Count keyframes to avoid overdrawing.
+
+      for (const field of fields)
       {
-         if (field !== currentField)
+         const interpolator = this .fields .get (field);
+
+         if (!interpolator)
             continue;
 
          this .#defaultIntegers .length = 0;
 
+         const key = interpolator .getMetaData ("Interpolator/key", this .#defaultIntegers);
+
+         for (const frame of key)
+            frames [frame] = (frames [frame] ?? 0) + 1;
+      }
+
+      // Draw keyframes.
+
+      for (const { field, interpolator, index } of this .getSelectedKeyframes ())
+      {
+         if (!fields .has (field))
+            continue
+
+         this .#defaultIntegers .length = 0;
+
          const key   = interpolator .getMetaData ("Interpolator/key", this .#defaultIntegers);
-         const frame = key [index] + this .#movingKeyframesOffset;
-         const x     = Math .floor (left + this .getPointerFromFrame (frame));
-         const x1    = x - (this .FRAME_SIZE / 2) + 0.5;
+         const frame = key [index];
+
+         if (-- frames [frame])
+            continue;
+
+         const moving = frame + this .#movingKeyframesOffset;
+         const x      = Math .floor (left + this .getPointerFromFrame (moving));
+         const x1     = x - (this .FRAME_SIZE / 2) + 0.5;
 
          context .fillStyle = selectedColor;
 

package/src/Editors/AnimationMemberList.js

@@ -142,7 +142,7 @@ module .exports = class AnimationMembersList extends Interface
 
    addNodes (nodes)
    {
-      nodes = nodes .filter (node => !this .#nodes .includes (node));
+      nodes = nodes .map (node => node .valueOf ()) .filter (node => !this .#nodes .includes (node .valueOf ()));
 
       let i = this .#nodes .length;
 
@@ -286,7 +286,7 @@ module .exports = class AnimationMembersList extends Interface
 
    removeNodes (nodes)
    {
-      for (const node of nodes)
+      for (const node of nodes .map (node => node .valueOf ()))
       {
          this .#list .find (`li[node-id=${node .getId ()}]`) .remove ();