sunrize/src/Controls/EditUserDefinedFieldPopover.js

A Multi-Platform X3D Editor

"use strict";

const
   $           = require ("jquery"),
   electron    = require ("electron"),
   DataStorage = require ("../Application/DataStorage"),
   X3D         = require ("../X3D"),
   Editor      = require ("../Undo/Editor"),
   UndoManager = require ("../Undo/UndoManager"),
   _           = require ("../Application/GetText");

require ("./Popover");
require ("../Bits/Validate");

const config = new DataStorage (localStorage, "Sunrize.UserDefinedFieldPopover.");

config .setDefaultValues ({
   typeName:"",
   accessType: X3D .X3DConstants .initializeOnly,
});

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 = -1)
{
   // 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 instanceof X3D .X3DField)
   {
      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 ());
   }
   else
   {
      typeNameMenu
         .find ("option")
         .filter ((i, e) => $(e) .text () === config .typeName)
         .prop ("selected", true);

      accessTypeMenu
         .find ("option")
         .filter ((i, e) => $(e) .text () === accessTypes .get (config .accessType))
         .prop ("selected", true);
   }

   // Create tooltip.

   const tooltip = this .popover ({
      content: content,
      events: {
         show (event, api)
         {
            nameInput .off () .validate (Editor .Id, () =>
            {
               electron .shell .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 ();

      config .typeName   = typeName;
      config .accessType = accessType;

      if (field instanceof X3D .X3DField)
      {
         if (node .getUserDefinedFields () .has (name) && node .getUserDefinedFields () .get (name) !== field)
         {
            // Error: field name exists.
            electron .shell .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 X3D [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 .getUserDefinedFields () .has (name))
         {
            // Error: field name exists.
            electron .shell .beep ();
            nameInput .highlight ();
            event .preventDefault ();
         }
         else
         {
            tooltip .qtip ("api") .toggle (false);
            event .preventDefault ();

            if (!name .length)
               return;

            // Add field.

            const newField = new X3D [typeName] ();

            newField .setAccessType (accessType);
            newField .setName (name);

            Editor .addUserDefinedField (executionContext, node, newField, field);
         }
      }
   }

   return this;
}