sunrize 1.11.0 → 1.11.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunrize",
   "productName": "Sunrize X3D Editor",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "A Multi-Platform X3D Editor",
   "main": "src/main.js",
   "bin": {
@@ -90,7 +90,7 @@
   "dependencies": {
     "capitalize": "^2.0.4",
     "console": "^0.7.2",
-    "electron": "^38.1.2",
+    "electron": "^38.2.1",
     "electron-prompt": "^1.7.0",
     "electron-squirrel-startup": "^1.0.1",
     "electron-tabs": "^1.0.4",
@@ -99,7 +99,7 @@
     "jquery-ui-dist": "^1.13.3",
     "jstree": "^3.3.17",
     "material-icons": "^1.13.14",
-    "material-symbols": "^0.36.1",
+    "material-symbols": "^0.36.2",
     "md5": "^2.3.0",
     "mime-types": "^3.0.1",
     "monaco-editor": "^0.53.0",
@@ -109,7 +109,7 @@
     "string-similarity": "^4.0.4",
     "tweakpane": "^3.1.10",
     "update-electron-app": "^3.1.1",
-    "x_ite": "^12.1.0",
+    "x_ite": "^12.1.1",
     "x3d-traverse": "^1.0.13"
   }
 }

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/Document.js

@@ -55,6 +55,7 @@ module .exports = class Document extends Interface
     */
    async initialize ()
    {
+      $("html") .attr ("platform", process .platform);
       $("body") .addClass ("modal");
 
       // Actions
@@ -453,14 +454,14 @@ Viewpoint {
 
       generator .push (`${pkg .productName} V${pkg .version}, ${pkg .homepage}`);
 
-      if (!scene .getMetaData ("created"))
-         scene .setMetaData ("created", new Date () .toUTCString ());
-
       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.
 

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/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 ();
 

package/src/Editors/BrowserFrame.js

@@ -51,9 +51,10 @@ module .exports = new class BrowserFrame extends Dialog
 
       this .numerator = $("<input></input>")
          .attr ("type", "number")
+         .attr ("min", 1)
          .attr ("step", "1")
          .css ("width", "calc((100% - 20px) / 2)")
-         .on ("change", () => this .onchange ());
+         .on ("change input", () => this .onchange ());
 
       const slash = $("<span></span>")
          .css ({ "display": "inline-block", "width": "20px", "text-align": "center" })
@@ -61,9 +62,10 @@ module .exports = new class BrowserFrame extends Dialog
 
       this .denominator = $("<input></input>")
           .attr ("type", "number")
+         .attr ("min", 1)
           .attr ("step", "1")
           .css ("width", "calc((100% - 20px) / 2)")
-          .on ("change", () => this .onchange ());
+          .on ("change input", () => this .onchange ());
 
       $("<tr></tr>")
          .append ($("<th></th>")
@@ -91,7 +93,7 @@ module .exports = new class BrowserFrame extends Dialog
 
    configure ()
    {
-      super .configure ({ size: [400, 127] });
+      super .configure ({ size: [388, 147] });
 
       this .connect (Editor .getWorldInfo (this .browser .currentScene));
       this .updateInputs ();

package/src/Editors/Console.js

@@ -97,6 +97,7 @@ module .exports = class Console extends Interface
    // Add strings to exclude here:
    excludes = [
       "The vm module of Node.js is unsupported",
+      "Uncaught TypeError: Cannot read properties of null (reading 'removeChild')",
       // "Invalid asm.js: Invalid member of stdlib",
    ];
 

package/src/Editors/OutlineEditor.js

@@ -627,7 +627,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
                args: ["copyNodes"],
             },
             {
-               label: _("Copy Extern Prototype"),
+               label: _("Copy as Extern Prototype"),
                visible: !protoNode .isExternProto,
                enabled: executionContext instanceof X3D .X3DScene,
                args: ["copyExternPrototype"],
@@ -3114,7 +3114,7 @@ module .exports = class OutlineEditor extends OutlineRouteGraph
          {
             case "copy":
             {
-               UndoManager .shared .beginUndo (_("Copy Extern Proto »%s«"), sourceExternProto .getName ());
+               UndoManager .shared .beginUndo (_("Copy as Extern Proto »%s«"), sourceExternProto .getName ());
 
                await Editor .importX3D (destinationExecutionContext, await Editor .exportX3D (sourceExecutionContext, [sourceExternProto]));
 

package/src/Editors/OutlineView.js

@@ -3135,7 +3135,7 @@ module .exports = class OutlineView extends Interface
       event .stopImmediatePropagation ();
 
       $("[data-hasqtip]") .qtip ?.("hide") .qtip ("destroy", true);
-      $(".show-preview.on") .removeClass ("on") .addClass ("off");
+      $("[action=show-preview].on") .removeClass ("on") .addClass ("off");
 
       if (on)
          return;