sunrize 1.0.11

package/src/sunrize/Controls/Splitter.js

@@ -0,0 +1,102 @@
+"use strict"
+
+const
+   $         = require ("jquery"),
+   Interface = require ("../Application/Interface"),
+   Algorithm = require ("../Bits/Algorithm")
+
+module .exports = class Splitter extends Interface
+{
+   constructor (element, orientation)
+   {
+      super (`Sunrize.Splitter.${element .attr ("id")}.`)
+
+      this .splitter    = element
+      this .orientation = orientation
+
+      switch (this .orientation)
+      {
+         case "horizontal":
+         {
+            const top = this .splitter .find ("> .horizontal-splitter-top")
+
+            top .resizable ({
+               minHeight: 0,
+               handles: "s",
+               resize: () =>
+               {
+                  this .position = top .outerHeight () / this .splitter .innerHeight ()
+               },
+            })
+
+            top .find ("> .ui-resizable-s") .append ($("<div></div>"))
+
+            break
+         }
+         case "vertical":
+         {
+            const left = this .splitter .find ("> .vertical-splitter-left")
+
+            left .resizable ({
+               minWidth: 0,
+               handles: "e",
+               resize: () =>
+               {
+                  this .position = left .outerWidth () / this .splitter .innerWidth ()
+               },
+            })
+
+            left .find ("> .ui-resizable-e") .append ($("<div></div>"))
+
+            break
+         }
+      }
+
+      this .setup ()
+   }
+
+   configure ()
+   {
+      if (this .config .file .position !== undefined)
+         this .position = this .config .file .position
+   }
+
+   get position ()
+   {
+      this .config .file .position
+   }
+
+   /**
+    * @param {number} position
+    */
+   set position (position)
+   {
+      position = Algorithm .clamp (position, 0, 1)
+
+      this .config .file .position = position;
+
+      switch (this .orientation)
+      {
+         case "horizontal":
+         {
+            const
+               top    = this .splitter .find ("> .horizontal-splitter-top"),
+               bottom = this .splitter .find ("> .horizontal-splitter-bottom")
+
+            top    .css ("height", (100 * position) + "%")
+            bottom .css ("height", (100 * (1 - position)) + "%")
+            break
+         }
+         case "vertical":
+         {
+            const
+               left  = this .splitter .find ("> .vertical-splitter-left"),
+               right = this .splitter .find ("> .vertical-splitter-right")
+
+            left  .css ("width", (100 * position) + "%")
+            right .css ("width", (100 * (1 - position)) + "%")
+            break
+         }
+      }
+   }
+}

package/src/sunrize/Controls/Tabs.js

@@ -0,0 +1,96 @@
+"use strict"
+
+const
+   $         = require ("jquery"),
+   Interface = require ("../Application/Interface")
+
+module .exports = class Tabs extends Interface
+{
+   constructor (element, orientation)
+   {
+      super (`Sunrize.Tabs.${element .attr ("id")}.`)
+
+      this .element     = element
+      this .orientation = orientation
+      this .tabs        = $("<ul></ul>") .appendTo (this .element)
+   }
+
+   initialize ()
+   {
+      this .addTabs ()
+
+      this .element .tabs ()
+      this .element .tabs ("option", "classes.ui-tabs", this .orientation);
+      this .element .on ("tabsactivate", () => this .tabActivated ());
+   }
+
+   addTabs () { }
+
+   configure (defaults = { })
+   {
+      this .config .file .addDefaultValues (Object .assign ({ active: 0 }, defaults))
+
+      if (this .element .tabs ("option", "active") === this .config .file .active)
+         this .tabActivated ()
+      else
+         this .element .tabs ("option", "active", this .config .file .active)
+   }
+
+   tabActivated ()
+   {
+      const
+         active = this .element .tabs ("option", "active"),
+         panel  = $(this .element .find (`.tabs-panel`) .get (active))
+
+      this .config .file .active = active
+
+      if (panel .data ("Tabs.initialized"))
+         return
+
+      panel .data ("Tabs.initialized", true)
+      this .initTab (panel)
+   }
+
+   addTextTab (id, title)
+   {
+      const tab = $("<li></li>")
+         .append ($("<a></a>")
+            .attr ("href", `#${id}-tab`)
+            .attr ("title", title)
+            .text (title))
+         .appendTo (this .tabs)
+
+      this .addPanel (id)
+   }
+
+   addIconTab (id, icon, title)
+   {
+      $("<li></li>")
+         .append ($("<a></a>")
+            .attr ("href", `#${id}-tab`)
+            .attr ("title", title)
+            .append ($("<span></span>")
+               .addClass ("material-icons")
+               .text (icon)))
+         .appendTo (this .tabs)
+
+      this .addPanel (id)
+   }
+
+   addPanel (id)
+   {
+      $("<div></div>")
+         .attr ("id", `${id}-tab`)
+         .append ($("<div></div>")
+            .attr ("id", id)
+            .addClass (["tabs-panel", id]))
+         .appendTo (this .element)
+   }
+
+   getPanel (id)
+   {
+      return this .element .find (`.tabs-panel.${id}`)
+   }
+
+   initTab (panel) { }
+}

package/src/sunrize/Editors/AnimationEditor.js

@@ -0,0 +1,18 @@
+"use strict"
+
+const
+   Interface = require ("../Application/Interface")
+
+module .exports = class AnimationEditor extends Interface
+{
+   constructor (element)
+   {
+      super (`Sunrize.AnimationEditor.${element .attr ("id")}.`)
+
+      this .animationEditor = element
+
+      this .animationEditor .text ("Animation Editor")
+
+      this .setup ()
+   }
+}

package/src/sunrize/Editors/BrowserSize.js

@@ -0,0 +1,101 @@
+"use strict"
+
+const
+   $      = require ("jquery"),
+   X3D    = require ("../X3D"),
+   Dialog = require ("../Controls/Dialog"),
+   _      = require ("../Application/GetText")
+
+module .exports = new class BrowserSize extends Dialog
+{
+   constructor ()
+   {
+      super ("Sunrize.BrowserSize.")
+
+      this .setup ()
+   }
+
+   initialize ()
+   {
+      super .initialize ()
+
+      // Add class.
+
+      this .element .addClass ("browser-size")
+
+      this .table         = $("<table></table>") .appendTo (this .element)
+      this .table .header = $("<thead></thead>") .appendTo (this .table)
+      this .table .body   = $("<tbody></tbody>") .appendTo (this .table)
+
+      $("<tr></tr>")
+         .append ($("<th></th>")
+            .attr ("colspan", "2")
+            .text (_ ("Browser Size")))
+         .appendTo (this .table .header)
+
+      this .enabled = $("<input></input>")
+         .attr ("id", "browser-size-enabled")
+         .attr ("type", "checkbox")
+         .on ("change", () => this .onchange ())
+
+      $("<tr></tr>")
+         .append ($("<th></th>"))
+         .append ($("<td></td>")
+            .append (this .enabled)
+            .append ($("<label></label>")
+               .attr ("for", "browser-size-enabled")
+               .text (_ ("Enabled"))))
+         .appendTo (this .table .body)
+
+      this .numerator = $("<input></input>")
+         .attr ("type", "number")
+         .attr ("step", "1")
+         .css ("width", "calc((100% - 20px) / 2)")
+         .on ("change", () => this .onchange ())
+
+      const slash = $("<span></span>")
+         .css ({ "display": "inline-block", "width": "20px", "text-align": "center" })
+         .text ("/")
+
+      this .denominator = $("<input></input>")
+          .attr ("type", "number")
+          .attr ("step", "1")
+          .css ("width", "calc((100% - 20px) / 2)")
+          .on ("change", () => this .onchange ())
+
+      $("<tr></tr>")
+         .append ($("<th></th>")
+            .text (_ ("Aspect Ratio")))
+         .append ($("<td></td>")
+            .append (this .numerator)
+            .append (slash)
+            .append (this .denominator))
+         .appendTo (this .table .body)
+   }
+
+   configure ()
+   {
+      super .configure ({ size: [400, 100] })
+
+      // Set default config values.
+
+      this .config .file .addDefaultValues ({
+         enabled: false,
+         numerator: 1,
+         denominator: 1,
+      })
+
+      this .enabled .prop ("checked", this .config .file .enabled)
+      this .numerator .val (this .config .file .numerator)
+      this .denominator .val (this .config .file .denominator)
+   }
+
+   onchange ()
+   {
+      this .config .file .enabled     = this .enabled .prop ("checked")
+      this .config .file .numerator   = parseFloat (this .numerator .val ())
+      this .config .file .denominator = parseFloat (this .denominator .val ())
+
+      require ("../Application/Document") .onresize ()
+   }
+}

package/src/sunrize/Editors/Console.js

@@ -0,0 +1,239 @@
+
+"use strict"
+
+const
+   $         = require ("jquery"),
+   electron  = require ("electron"),
+   X3D       = require ("../X3D"),
+   Interface = require ("../Application/Interface"),
+   _         = require ("../Application/GetText")
+
+module .exports = class Console extends Interface
+{
+   HISTORY_MAX = 100
+
+   logLevels = [
+      "debug",
+      "log",
+      "warn",
+      "error",
+   ]
+
+   constructor (element)
+   {
+      super (`Sunrize.Console.${element .attr ("id")}.`)
+
+      this .suspendConsole     = false;
+      this .messageTime        = 0
+      this .historyIndex       = 0
+      this .history            = [ ]
+      this .addMessageCallback = this .addMessage .bind (this)
+
+      this .console   = element
+      this .left      = $("<div></div>") .addClass ("console-left") .appendTo (this .console)
+      this .toolbar   = $("<div></div>") .addClass (["toolbar", "vertical-toolbar", "console-toolbar"]) .appendTo (this .console)
+      this .output    = $("<div></div>") .addClass (["console-output", "output"]) .attr ("tabindex", 0) .appendTo (this .left)
+      this .input     = $("<div></div>") .addClass ("console-input") .appendTo (this .left)
+
+      this .suspendButton = $("<span></span>")
+         .addClass ("material-icons")
+         .attr ("title", _ ("Suspend console output."))
+         .text ("cancel")
+         .appendTo (this .toolbar)
+         .on ("click", () => this .setSuspendConsole (!this .suspendConsole))
+
+      this .clearButton = $("<span></span>")
+         .addClass ("material-icons")
+         .attr ("title", _ ("Clear console."))
+         .text ("delete_forever")
+         .appendTo (this .toolbar)
+         .on ("click", () => this .clearConsole ())
+
+      $("<span></span>") .addClass ("separator") .appendTo (this .toolbar)
+
+      this .textarea = $("<textarea></textarea>")
+         .attr ("placeholder", _ ("Evaluate JavaScript code here."))
+         .attr ("tabindex", 0)
+         .appendTo (this .input)
+         .on ("keydown", (event) => this .onKeyDown (event))
+         .on ("keyup", (event) => this .onKeyUp (event))
+
+      if (this .console .attr ("id") !== "console")
+      {
+         this .output .html ($("#console .console-output") .html ())
+         this .output .scrollTop (this .output .prop ("scrollHeight"))
+      }
+
+      electron .ipcRenderer .on ("console-message", this .addMessageCallback)
+
+      this .setup ()
+   }
+
+   configure ()
+   {
+      super .configure ()
+
+      this .config .file .addDefaultValues ({ history: [ ] })
+
+      this .history      = this .config .file .history .slice (-this .HISTORY_MAX)
+      this .historyIndex = this .history .length
+   }
+
+   async setBrowserEvent (event)
+   {
+      try
+      {
+         super .setBrowserEvent (event)
+
+         if (event !== X3D .X3DConstants .INITIALIZED_EVENT)
+            return
+
+         this .scriptNode      = this .browser .currentScene .createNode ("Script")
+         this .scriptNode .url = new X3D .MFString ("ecmascript:");
+      }
+      catch (error)
+      { }
+    }
+
+   excludes = new Set ([
+      "The vm module of Node.js is deprecated in the renderer process and will be removed.",
+   ])
+
+   addMessage (event, level, sourceId, line, message)
+   {
+      if (this .excludes .has (message))
+         return
+
+      const
+         classes = this .logLevels [level] || "log",
+         text    = $("<p></p>") .addClass (classes) .attr ("title", `${sourceId}:${line}`) .text (message)
+
+      if (this .messageTime && performance .now () - this .messageTime > 1000)
+         text .addClass ("splitter")
+
+      this .messageTime = performance .now ()
+
+      this .output .append (text)
+      this .output .scrollTop (this .output .prop ("scrollHeight"))
+   }
+
+   setSuspendConsole (value)
+   {
+      this .suspendConsole = value
+
+      if (value)
+      {
+         electron .ipcRenderer .off ("console-message", this .addMessageCallback)
+         this .addMessage (null, "info", __filename, 0, `Console output suspended at ${new Date () .toLocaleTimeString ()}.`)
+         this .suspendButton .addClass ("active")
+      }
+      else
+      {
+         electron .ipcRenderer .on ("console-message", this .addMessageCallback)
+         this .addMessage (null, "info", __filename, 0, `Console output enabled at ${new Date () .toLocaleTimeString ()}.`)
+         this .suspendButton .removeClass ("active")
+      }
+   }
+
+   clearConsole ()
+   {
+      this .messageTime = 0
+
+      this .output .empty ()
+      this .addMessage (null, "info", __filename, 0, `Console cleared at ${new Date () .toLocaleTimeString ()}.`)
+   }
+
+   onKeyDown (event)
+   {
+      switch (event .key)
+      {
+         case "Enter":
+         {
+            this .evaluateSourceCode (event)
+            return
+         }
+         case "ArrowUp":
+         {
+            if (this .historyIndex === this .history .length)
+            {
+               const text = this .textarea .val () .trim ()
+
+               if (text && text !== this .history .at (-1))
+                  this .history .push (text)
+            }
+
+            this .config .file .history = this .history
+
+            this .historyIndex = Math .max (this .historyIndex - 1, 0)
+
+            if (this .historyIndex < this .history .length)
+               this .textarea .val (this .history [this .historyIndex])
+
+            this .adjustTextAreaHeight ()
+            return
+         }
+         case "ArrowDown":
+         {
+            this .historyIndex = Math .min (this .historyIndex + 1, this .history .length - 1)
+
+            if (this .historyIndex < this .history .length)
+               this .textarea .val (this .history [this .historyIndex])
+
+            this .adjustTextAreaHeight ()
+            return
+         }
+      }
+   }
+
+   onKeyUp (event)
+   {
+      this .adjustTextAreaHeight ()
+   }
+
+   adjustTextAreaHeight ()
+   {
+      const div = $("<div></div>")
+         .css ({
+            "width": `${this .textarea .width ()}px`,
+            "white-space": "pre-wrap",
+            "word-wrap": "break-word",
+         })
+         .text (this .textarea .val ())
+         .appendTo ($("body"))
+
+      this .input .css ("height", `${div .height () + 5}px`)
+      this .output .css ("height", `calc(100% - ${this .input .height ()}px)`)
+
+      div .remove ()
+   }
+
+   evaluateSourceCode (event)
+   {
+      event .preventDefault ()
+
+      const text = this .textarea .val () .trim ()
+
+      if (!text)
+         return
+
+      if (text !== this .history .at (-1))
+         this .history .push (text)
+
+      this .config .file .history = this .history
+
+      this .historyIndex = this .history .length
+
+      console .info (text)
+
+      try
+      {
+         console .debug ("" + this .scriptNode .getValue () .evaluate (text))
+      }
+      catch (error)
+      {
+         console .error (`${error .name}: ${error .message}`)
+      }
+
+      this .textarea .val ("")
+   }
+}

package/src/sunrize/Editors/FileManager.js

@@ -0,0 +1,18 @@
+"use strict"
+
+const
+   Interface = require ("../Application/Interface")
+
+module .exports = class FileManager extends Interface
+{
+   constructor (element)
+   {
+      super (`Sunrize.FileManager.${element .attr ("id")}.`)
+
+      this .fileManager = element
+
+      this .fileManager .text ("File Manager")
+
+      this .setup ()
+   }
+}