sunrize 1.0.11

package/src/sunrize/Bits/Validate.js

@@ -0,0 +1,59 @@
+"use strict"
+
+const $ = require ("jquery")
+
+/**
+ *
+ * @param {RegExp} regex
+ * @param {Function} error
+ * @returns {JQuery<HTMLElement>}
+ */
+$.fn.validate = function (regex, error)
+{
+   this
+      .off ("keydown.validate")
+      .off ("keyup.validate")
+      .off ("change.validate")
+
+   let lastValue = this .val ()
+
+   this .on ("keydown.validate", (event) =>
+   {
+      if (event .key .length > 1)
+         return
+
+      const
+         start = this .prop ("selectionStart"),
+         end   = this .prop ("selectionEnd"),
+         value = this .val () .substr (0, start) + event .key + this .val () .substr (end)
+
+      if (value .match (regex))
+         return
+
+      event .preventDefault ()
+
+      if (typeof error === "function")
+         error .call (this, event)
+   })
+   .on ("keyup.validate", (event) =>
+   {
+      // https://stackoverflow.com/questions/44962941/html-text-input-element-disable-mac-double-space-to-insert-period
+
+      if (this .val () .match (regex))
+         return
+
+      const
+         start = this .prop ("selectionStart"),
+         end   = this .prop ("selectionEnd")
+
+      this .val (lastValue)
+      this .prop ("selectionStart", start)
+      this .prop ("selectionEnd",   end)
+   })
+   .on ("change.validate", (event) =>
+   {
+      lastValue = this .val ()
+   })
+
+   return this
+}

package/src/sunrize/Controls/AddPrototypePopover.js

@@ -0,0 +1,111 @@
+"use strict"
+
+const
+   $           = require ("jquery"),
+   DataStorage = require ("../Application/DataStorage"),
+   Editor      = require ("../Undo/Editor"),
+   UndoManager = require ("../Undo/UndoManager"),
+   _           = require ("../Application/GetText")
+
+require ("./Popover")
+require ("../Bits/Validate")
+
+const types = {
+   externproto: 0,
+   proto: 1,
+}
+
+$.fn.addPrototypePopover = function (executionContext, type)
+{
+   // Create config.
+
+   const config = new DataStorage (localStorage, "Sunrize.")
+
+   config .addDefaultValues ({ selectedIndex: 1 })
+
+   // Create content.
+
+   const content = $("<div></div>")
+
+   const protoMenu = $("<select></select>")
+      .append ($("<option></option>") .text ("EXTERNPROTO"))
+      .append ($("<option></option>") .text ("PROTO"))
+      .prop ("selectedIndex", config .selectedIndex = type ? types [type] : config .selectedIndex)
+      .on ("change", () => config .selectedIndex = protoMenu .prop ("selectedIndex"))
+      .appendTo (content)
+
+   const nameInput = $("<input></input>")
+      .attr ("placeholder", _ ("Enter name"))
+      .appendTo (content)
+
+   // Create tooltip.
+
+   const tooltip = this .popover ({
+      content: content,
+      events: {
+         show: (event, api) =>
+         {
+            nameInput .validate (Editor .Id, () =>
+            {
+               $ .beep ()
+               nameInput .highlight ()
+            })
+            .on ("keydown.addPrototypePopover", (event) =>
+            {
+               if (event .key !== "Enter")
+                  return
+
+               api .toggle (false)
+               event .preventDefault ()
+
+               if (!nameInput .val () .length)
+                  return
+
+               switch (protoMenu .prop ("selectedIndex"))
+               {
+                  case 0:
+                  {
+                     const name = executionContext .getUniqueExternProtoName (nameInput .val ())
+
+                     UndoManager .shared .beginUndo (_ ("Add Extern Proto Declaration »%s«"), name)
+
+                     const externproto = Editor .addExternProtoDeclaration (executionContext, name)
+
+                     if (!executionContext .protos .get (name))
+                     {
+                        const available = Editor .getNextAvailableProtoNode (executionContext, externproto)
+
+                        if (available)
+                           Editor .replaceProtoNodes (executionContext, available, externproto)
+                     }
+
+                     UndoManager .shared .endUndo ()
+                     break
+                  }
+                  case 1:
+                  {
+                     const name = executionContext .getUniqueProtoName (nameInput .val ())
+
+                     UndoManager .shared .beginUndo (_ ("Add Proto Declaration »%s«"), name)
+
+                     const
+                        proto     = Editor .addProtoDeclaration (executionContext, name),
+                        available = Editor .getNextAvailableProtoNode (executionContext, proto)
+
+                     if (available)
+                        Editor .replaceProtoNodes (executionContext, available, proto)
+
+                     UndoManager .shared .endUndo ()
+                     break
+                  }
+               }
+            })
+
+            setTimeout (() => nameInput .trigger ("select"), 1)
+         },
+      },
+   })
+
+   return this
+}
+

package/src/sunrize/Controls/Dialog.js

@@ -0,0 +1,74 @@
+"use strict"
+
+const
+   $         = require ("jquery"),
+   Interface = require ("../Application/Interface")
+
+module .exports = class Dialog extends Interface
+{
+   initialize ()
+   {
+      // Create window and handle resize and move.
+
+      this .element = $("<div></div>") .dialog ({
+         classes: {
+            "ui-dialog": "dialog",
+         },
+         modal: true,
+         autoOpen: false,
+         show: true,
+         draggable: false,
+         minHeight : 100,
+         open: () =>
+         {
+            this .element .dialog ("widget")
+               .nextAll (".ui-widget-overlay")
+               .on ("click", () => this .close ())
+
+            this .onopen ()
+         },
+         close: () =>
+         {
+            this .onclose ()
+         },
+      })
+
+      this .element .dialog ("widget")
+         .draggable ({
+            drag: (event, ui) => this .config .file .position = { my: `left+${ui .position .left} top+${ui .position .top}`, at: "left top" },
+          })
+         .resizable({
+            resize: (event, ui) => this .config .file .size = [ui .size .width, ui .size .height],
+          })
+         .find (".ui-dialog-titlebar") .remove ()
+   }
+
+   configure (defaults = { })
+   {
+      // Set default config values.
+
+      this .config .file .addDefaultValues (Object .assign ({
+         position: undefined,
+         size: [400, 250],
+      },
+      defaults))
+   }
+
+   open ()
+   {
+      this .element .dialog ({
+         position: { ...this .config .file .position, of: $("body") },
+         width: this .config .file .size [0],
+         height: this .config .file .size [1],
+      })
+      .dialog ("open")
+   }
+
+   close ()
+   {
+      this .element .dialog ("close")
+   }
+
+   onopen () { }
+   onclose () { }
+}

package/src/sunrize/Controls/EditUserDefinedFieldPopover.js

@@ -0,0 +1,223 @@
+"use strict"
+
+const
+   $           = require ("jquery"),
+   X3D         = require ("../X3D"),
+   Editor      = require ("../Undo/Editor"),
+   UndoManager = require ("../Undo/UndoManager"),
+   _           = require ("../Application/GetText")
+
+require ("./Popover")
+require ("../Bits/Validate")
+
+const accessTypes = new Map ([
+   [X3D .X3DConstants .initializeOnly, "initializeOnly"],
+   [X3D .X3DConstants .inputOnly,      "inputOnly"],
+   [X3D .X3DConstants .outputOnly,     "outputOnly"],
+   [X3D .X3DConstants .inputOutput,    "inputOutput"],
+])
+
+$.fn.editUserDefinedFieldPopover = function (executionContext, node, field)
+{
+   const Fields = X3D .require ("x_ite/Fields")
+
+   // Create content.
+
+   const content = $("<div></div>")
+
+   const typeNameMenu = $("<select></select>")
+      .appendTo (content)
+
+   const singleFields = $("<optgroup></optgroup>")
+      .attr ("label", "Single Fields")
+      .append ($("<option></option>") .text ("SFBool"))
+      .append ($("<option></option>") .text ("SFColor"))
+      .append ($("<option></option>") .text ("SFColorRGBA"))
+      .append ($("<option></option>") .text ("SFDouble"))
+      .append ($("<option></option>") .text ("SFFloat"))
+      .append ($("<option></option>") .text ("SFImage"))
+      .append ($("<option></option>") .text ("SFInt32"))
+      .append ($("<option></option>") .text ("SFMatrix3d"))
+      .append ($("<option></option>") .text ("SFMatrix3f"))
+      .append ($("<option></option>") .text ("SFMatrix4d"))
+      .append ($("<option></option>") .text ("SFMatrix4f"))
+      .append ($("<option></option>") .text ("SFNode"))
+      .append ($("<option></option>") .text ("SFRotation"))
+      .append ($("<option></option>") .text ("SFString"))
+      .append ($("<option></option>") .text ("SFTime"))
+      .append ($("<option></option>") .text ("SFVec2d"))
+      .append ($("<option></option>") .text ("SFVec2f"))
+      .append ($("<option></option>") .text ("SFVec3d"))
+      .append ($("<option></option>") .text ("SFVec3f"))
+      .append ($("<option></option>") .text ("SFVec4d"))
+      .append ($("<option></option>") .text ("SFVec4f"))
+      .appendTo (typeNameMenu)
+
+   const multiFields = $("<optgroup></optgroup>")
+      .attr ("label", "Multi Fields")
+      .append ($("<option></option>") .text ("MFBool"))
+      .append ($("<option></option>") .text ("MFColor"))
+      .append ($("<option></option>") .text ("MFColorRGBA"))
+      .append ($("<option></option>") .text ("MFDouble"))
+      .append ($("<option></option>") .text ("MFFloat"))
+      .append ($("<option></option>") .text ("MFImage"))
+      .append ($("<option></option>") .text ("MFInt32"))
+      .append ($("<option></option>") .text ("MFMatrix3d"))
+      .append ($("<option></option>") .text ("MFMatrix3f"))
+      .append ($("<option></option>") .text ("MFMatrix4d"))
+      .append ($("<option></option>") .text ("MFMatrix4f"))
+      .append ($("<option></option>") .text ("MFNode"))
+      .append ($("<option></option>") .text ("MFRotation"))
+      .append ($("<option></option>") .text ("MFString"))
+      .append ($("<option></option>") .text ("MFTime"))
+      .append ($("<option></option>") .text ("MFVec2d"))
+      .append ($("<option></option>") .text ("MFVec2f"))
+      .append ($("<option></option>") .text ("MFVec3d"))
+      .append ($("<option></option>") .text ("MFVec3f"))
+      .append ($("<option></option>") .text ("MFVec4d"))
+      .append ($("<option></option>") .text ("MFVec4f"))
+      .appendTo (typeNameMenu)
+
+   const accessTypeMenu = $("<select></select>")
+      .append ($("<option></option>") .text ("initializeOnly"))
+      .append ($("<option></option>") .text ("inputOnly"))
+      .append ($("<option></option>") .text ("outputOnly"))
+      .append ($("<option></option>") .text ("inputOutput"))
+      .appendTo (content)
+
+   const nameInput = $("<input></input>")
+      .attr ("placeholder", _ ("Enter name"))
+      .appendTo (content)
+
+   const okButton = $("<button></button>")
+      .text (_ ("Apply"))
+      .on ("click", confirm)
+      .appendTo (content)
+
+   if (field)
+   {
+      typeNameMenu
+         .find ("option")
+         .filter ((i, e) => $(e) .text () === field .getTypeName ())
+         .prop ("selected", true);
+
+      accessTypeMenu
+         .find ("option")
+         .filter ((i, e) => $(e) .text () === accessTypes .get (field .getAccessType ()))
+         .prop ("selected", true);
+
+      nameInput .val (field .getName ())
+   }
+
+   // Create tooltip.
+
+   const tooltip = this .popover ({
+      content: content,
+      events: {
+         show: (event, api) =>
+         {
+            nameInput .validate (Editor .Id, () =>
+            {
+               $ .beep ()
+               nameInput .highlight ()
+            })
+            .on ("keydown", (event) =>
+            {
+               if (event .key !== "Enter")
+                  return
+
+               confirm (event)
+            })
+
+            setTimeout (() => nameInput .trigger ("select"), 1)
+         },
+      },
+   })
+
+   function confirm (event)
+   {
+      const
+         typeName   = typeNameMenu .find ("option:selected") .text (),
+         type       = X3D .X3DConstants [typeName],
+         accessType = X3D .X3DConstants [accessTypeMenu .find ("option:selected") .text ()],
+         name       = nameInput .val ()
+
+      if (field)
+      {
+         if (node .getFields () .has (name) && node .getFields () .get (name) !== field)
+         {
+            // Error: field name exists.
+            $ .beep ()
+            nameInput .highlight ()
+            event .preventDefault ()
+         }
+         else
+         {
+            tooltip .qtip ("api") .toggle (false)
+            event .preventDefault ()
+
+            if (!name .length)
+               return
+
+            if (type === field .getType () && accessType == field .getAccessType () && name === field .getName ())
+               return
+
+            // Change field.
+
+            const fields = Array .from (node .getUserDefinedFields ())
+
+            if (type === field .getType ())
+            {
+               UndoManager .shared .beginUndo (_ ("Edit Field »%s«"), field .getName ())
+               Editor .updateUserDefinedField (executionContext, node, field, accessType, name)
+               UndoManager .shared .endUndo ()
+            }
+            else
+            {
+               const
+                  index    = fields .indexOf (field),
+                  newField = new Fields [typeName] ()
+
+               UndoManager .shared .beginUndo (_ ("Change Type of Field »%s«"), field .getName ())
+
+               newField .setAccessType (accessType)
+               newField .setName (name)
+               fields .splice (index, 1, newField)
+
+               Editor .setUserDefinedFields (executionContext, node, fields)
+               UndoManager .shared .endUndo ()
+            }
+         }
+      }
+      else
+      {
+         if (node .getFields () .has (name))
+         {
+            // Error: field name exists.
+            $ .beep ()
+            nameInput .highlight ()
+            event .preventDefault ()
+         }
+         else
+         {
+            tooltip .qtip ("api") .toggle (false)
+            event .preventDefault ()
+
+            if (!name .length)
+               return
+
+            // Add field.
+
+            const field = new Fields [typeName] ()
+
+            field .setAccessType (accessType)
+            field .setName (name)
+
+            Editor .addUserDefinedField (executionContext, node, field)
+         }
+      }
+   }
+
+   return this
+}
+

package/src/sunrize/Controls/Popover.js

@@ -0,0 +1,32 @@
+"use strict"
+
+const $ = require ("jquery")
+
+require ("qtip2")
+
+$.fn.popover = function (options)
+{
+   return this .qtip ($.extend (true,
+   {
+      position: {
+         my: "top right",
+         at: "bottom left",
+      },
+      style: {
+         classes: "qtip-tipsy",
+      },
+      show: {
+         ready: true,
+         modal: true,
+         solo: true,
+         delay: 200,
+      },
+      events: {
+         hide: function (event, api)
+         {
+            api .destroy (true)
+         },
+      },
+   },
+   options))
+}

package/src/sunrize/Controls/RenameNodeInput.js

@@ -0,0 +1,94 @@
+"use strict"
+
+const
+   $           = require ("jquery"),
+   X3D         = require ("../X3D"),
+   Editor      = require ("../Undo/Editor"),
+   UndoManager = require ("../Undo/UndoManager"),
+   _           = require ("../Application/GetText")
+
+require ("../Bits/Validate")
+
+$.fn.renameNodeInput = function (node)
+{
+   this .off ("keydown.renameNodeInput")
+
+   this .val (node ? node .getName () : "")
+
+   this .validate (Editor .Id, () =>
+   {
+      $ .beep ()
+      this .highlight ()
+   })
+   .on ("keydown.renameNodeInput", (event) =>
+   {
+      if (!node)
+         return
+
+      if (event .key !== "Enter")
+         return
+
+      event .preventDefault ()
+
+      let name = this .val ()
+
+      if (name === node .getName ())
+         return
+
+      const executionContext = node .getExecutionContext ();
+
+      if (node instanceof X3D .X3DProtoDeclarationNode)
+      {
+         if (!name)
+            return
+
+         if (node .isExternProto)
+         {
+            name = executionContext .getUniqueExternProtoName (name)
+
+            const externproto = node
+
+            UndoManager .shared .beginUndo (_ ("Update Extern Proto Declaration »%s«"), name)
+
+            Editor .updateExternProtoDeclaration (executionContext, name, externproto)
+
+            if (!executionContext .protos .get (name))
+            {
+               const available = Editor .getNextAvailableProtoNode (executionContext, externproto)
+
+               if (available)
+                  Editor .replaceProtoNodes (executionContext, available, externproto)
+            }
+
+            UndoManager .shared .endUndo ()
+         }
+         else
+         {
+            name = executionContext .getUniqueProtoName (name)
+
+            const proto = node
+
+            UndoManager .shared .beginUndo (_ ("Update Proto Declaration »%s«"), name)
+
+            Editor .updateProtoDeclaration (executionContext, name, proto)
+
+            const available = Editor .getNextAvailableProtoNode (executionContext, proto)
+
+            if (available)
+               Editor .replaceProtoNodes (executionContext, available, proto)
+
+            UndoManager .shared .endUndo ()
+         }
+      }
+      else
+      {
+         if (name)
+            Editor .updateNamedNode (executionContext, executionContext .getUniqueName (name), node)
+         else
+            Editor .removeNamedNode (executionContext, node)
+      }
+   })
+
+   return this
+}
+

package/src/sunrize/Controls/RenameNodePopover.js

@@ -0,0 +1,40 @@
+"use strict"
+
+const
+   $ = require ("jquery"),
+   _ = require ("../Application/GetText")
+
+require ("./Popover")
+require ("./RenameNodeInput")
+
+$.fn.renameNodePopover = function (node)
+{
+   // Create content.
+
+   const nameInput = $("<input></input>")
+      .attr ("placeholder", _ ("Enter name"))
+      .renameNodeInput (node)
+
+   // Create tooltip.
+
+   const tooltip = this .popover ({
+      content: nameInput,
+      events: {
+         show: (event, api) =>
+         {
+            nameInput .on ("keydown.renameNodePopover", (event) =>
+            {
+               if (event .key !== "Enter")
+                  return
+
+               api .toggle (false)
+            })
+
+            setTimeout (() => nameInput .trigger ("select"), 1)
+         },
+      },
+   })
+
+   return this
+}
+