x_ite 5.0.3 → 6.1.0

package/src/x_ite/Browser/Core/ContextMenu.js

@@ -50,22 +50,25 @@
 define ([
    "jquery",
    "x_ite/Base/X3DBaseNode",
+   "x_ite/Components/Geospatial/GeoViewpoint",
    "locale/gettext",
-   "contextMenu",
    "lib/jquery.fullscreen-min",
+   "jquery-mousewheel",
 ],
 function ($,
           X3DBaseNode,
+          GeoViewpoint,
           _)
 {
 "use strict";
 
+   const _userMenu = Symbol ();
+
    function ContextMenu (executionContext)
    {
       X3DBaseNode .call (this, executionContext);
 
-      this .userMenu = null;
-      this .active   = false;
+      this [_userMenu] = null;
    }
 
    ContextMenu .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
@@ -89,146 +92,61 @@ function ($,
 
          const browser = this .getBrowser ();
 
-         if (! browser .getBrowserOptions () .getContextMenu ())
-            return;
-
-         $.contextMenu ({
-            selector: ".x_ite-private-browser-" + browser .getNumber (),
+         this .init ({
+            element: browser .getElement (),
+            appendTo: browser .getShadow (),
             build: this .build .bind (this),
             animation: {duration: 500, show: "fadeIn", hide: "fadeOut"},
-            hideOnSecondTrigger: true,
-            events:
-            {
-               show: function (options)
-               {
-                  this .active = true;
-
-                  if (browser .getElement () .fullScreen ())
-                  {
-                     browser .getElement () .append (options .$menu);
-
-                     setTimeout (function ()
-                     {
-                        browser .getElement () .append (options .$layer .css ({
-                           position: "absolute",
-                           width: "100%",
-                           height: "100%",
-                        }));
-                     },
-                     1);
-                  }
-               },
-               activated: function (options)
-               {
-                  // Display submenus on left side if there is no space on right side.
-
-                  if (options .$menu .hasClass ("x_ite-private-menu-submenus-left"))
-                  {
-                     options .$menu .find (".context-menu-list") .each (function (i, e)
-                     {
-                        $(e) .css ("right", $(e) .parent () .parent () .css ("width"));
-                     });
-                  }
-                  else
-                  {
-                     options .$menu .find (".context-menu-list") .each (function (i, e)
-                     {
-                        $(e) .css ("left", (parseInt ($(e) .parent () .parent () .css ("width")) - 2) + "px");
-                     });
-                  }
-
-                  // If the submenu is higher than vh, add scrollbars.
-                  options .$menu .find (".context-menu-list") .each (function (i, e)
-                  {
-                     if ($(e) .height () > $(window) .height ())
-                     {
-                        $(e) .css ({
-                           "overflow-y": "scroll",
-                           "max-height": "100vh",
-                        });
-                     }
-                  });
-
-                  // If the submenu is higher than vh, reposition it.
-                  options .$menu .find (".context-menu-item") .on ("mouseenter", function (event)
-                  {
-                     event .stopImmediatePropagation ();
-
-                     const
-                        t = $(event .target),
-                        e = t .children (".context-menu-list");
-
-                     if (!e .length)
-                        return;
-
-                     e .css ("top", "");
-
-                     const bottom = e .offset () .top + e .height () - $(window) .scrollTop () - $(window) .height ();
-
-                     if (bottom > 0)
-                        e .offset ({ "top": e .offset () .top - bottom });
-                  });
-               }
-               .bind (this),
-               hide: function (options)
-               {
-                  this .active = false;
-               }
-               .bind (this),
-            },
          });
       },
       getUserMenu: function ()
       {
-         return this .userMenu;
+         return this [_userMenu];
       },
       setUserMenu: function (userMenu)
       {
-         this .userMenu = userMenu;
+         this [_userMenu] = userMenu;
       },
-      getActive: function ()
+      createUserMenu: function ()
       {
-         return this .active;
+         const userMenu = { };
+
+         if (typeof this [_userMenu] === "function")
+         {
+            const menu = this [_userMenu] ();
+
+            if ($.isPlainObject (menu))
+            {
+               for (const key in menu)
+                  userMenu ["user-" + key] = menu [key];
+            }
+         }
+
+         return userMenu;
       },
-      build: function (trigger, event)
+      build: function (event)
       {
          const
             browser          = this .getBrowser (),
             activeLayer      = browser .getActiveLayer (),
             currentViewpoint = activeLayer ? activeLayer .getViewpoint () : null,
-            currentViewer    = browser ._viewer .getValue (),
-            fullscreen       = browser .getElement () .fullScreen (),
-            leftSubMenus     = $(document) .width () - event .pageX < 370;
+            fullscreen       = browser .getElement () .fullScreen ();
+
+         if (! browser .getBrowserOptions () .getContextMenu ())
+            return;
 
          const menu = {
-            className: "x_ite-private-menu x_ite-private-menu-title",
+            className: "x_ite-private-menu",
             items: {
+               "title": {
+                  name: browser .getName () + " Browser v" + browser .getVersion (),
+                  className: "context-menu-title context-menu-not-selectable",
+               },
                "separator0": "--------",
                "viewpoints": {
                   name: _("Viewpoints"),
                   className: "context-menu-icon x_ite-private-icon-viewpoint",
                   items: this .getViewpoints (),
-                  callback: function (viewpoint)
-                  {
-                     if (! viewpoint)
-                        return;
-
-                     browser .bindViewpoint (browser .getActiveLayer (), viewpoint);
-                     browser .getSurface () .focus ();
-                  }
-                  .bind (this, currentViewpoint),
-               },
-               "separator1": "--------",
-               "viewer": {
-                  name: _(this .getViewerName (currentViewer)),
-                  className: "context-menu-icon x_ite-private-icon-" + currentViewer .toLowerCase () + "-viewer",
-                  callback: function (viewer)
-                  {
-                     browser ._viewer = viewer;
-                     browser .getNotification () ._string = _(this .getViewerName (viewer));
-                     browser .getSurface () .focus ();
-                  }
-                  .bind (this, currentViewer),
                },
                "available-viewers": {
                   name: _("Available Viewers"),
@@ -262,7 +180,26 @@ function ($,
                      .bind (this),
                   },
                },
-               "separator2": "--------",
+               "display-rubberband": {
+                  name: _("Display Rubberband"),
+                  type: "checkbox",
+                  selected: browser .getBrowserOption ("Rubberband"),
+                  events: {
+                     click: function (event)
+                     {
+                        const rubberband = $(event .target) .is (":checked");
+
+                        browser .setBrowserOption ("Rubberband", rubberband);
+
+                        if (rubberband)
+                           browser .getNotification () ._string = _("Rubberband") + ": " + _("on");
+                        else
+                           browser .getNotification () ._string = _("Rubberband") + ": " + _("off");
+                     }
+                     .bind (this),
+                  },
+               },
+               "separator1": "--------",
                "primitive-quality": {
                   name: _("Primitive Quality"),
                   className: "context-menu-icon x_ite-private-icon-primitive-quality",
@@ -359,25 +296,83 @@ function ($,
                      },
                   },
                },
-               "display-rubberband": {
-                  name: _("Display Rubberband"),
-                  type: "checkbox",
-                  selected: browser .getBrowserOption ("Rubberband"),
-                  events: {
-                     click: function (event)
-                     {
-                        const rubberband = $(event .target) .is (":checked");
-
-                        browser .setBrowserOption ("Rubberband", rubberband);
-
-                        if (rubberband)
-                           browser .getNotification () ._string = _("Rubberband") + ": " + _("on");
-                        else
-                           browser .getNotification () ._string = _("Rubberband") + ": " + _("off");
-                     }
-                     .bind (this),
+               "shading": {
+                  name: _("Shading"),
+                  className: "context-menu-icon x_ite-private-icon-shading",
+                  items: {
+                     "point": {
+                        name: _("Point"),
+                        type: "radio",
+                        radio: "shading",
+                        selected: browser .getBrowserOption ("Shading") === "POINT",
+                        events: {
+                           click: function ()
+                           {
+                              browser .setBrowserOption ("Shading", "POINT");
+                              browser .getNotification () ._string = _("Shading") + ": " + _("Point");
+                           }
+                           .bind (this),
+                        },
+                     },
+                     "wireframe": {
+                        name: _("Wireframe"),
+                        type: "radio",
+                        radio: "shading",
+                        selected: browser .getBrowserOption ("Shading") === "WIREFRAME",
+                        events: {
+                           click: function ()
+                           {
+                              browser .setBrowserOption ("Shading", "WIREFRAME");
+                              browser .getNotification () ._string = _("Shading") + ": " + _("Wireframe");
+                           }
+                           .bind (this),
+                        },
+                     },
+                     "flat": {
+                        name: _("Flat"),
+                        type: "radio",
+                        radio: "shading",
+                        selected: browser .getBrowserOption ("Shading") === "FLAT",
+                        events: {
+                           click: function ()
+                           {
+                              browser .setBrowserOption ("Shading", "FLAT");
+                              browser .getNotification () ._string = _("Shading") + ": " + _("Flat");
+                           }
+                           .bind (this),
+                        },
+                     },
+                     "gouraud": {
+                        name: _("Gouraud"),
+                        type: "radio",
+                        radio: "shading",
+                        selected: browser .getBrowserOption ("Shading") === "GOURAUD",
+                        events: {
+                           click: function ()
+                           {
+                              browser .setBrowserOption ("Shading", "GOURAUD");
+                              browser .getNotification () ._string = _("Shading") + ": " + _("Gouraud");
+                           }
+                           .bind (this),
+                        },
+                     },
+                     "phong": {
+                        name: _("Phong"),
+                        type: "radio",
+                        radio: "shading",
+                        selected: browser .getBrowserOption ("Shading") === "PHONG",
+                        events: {
+                           click: function ()
+                           {
+                              browser .setBrowserOption ("Shading", "PHONG");
+                              browser .getNotification () ._string = _("Shading") + ": " + _("Phong");
+                           }
+                           .bind (this),
+                        },
+                     },
                   },
                },
+               "separator2": "--------",
                "browser-timings": {
                   name: _("Browser Timings"),
                   type: "checkbox",
@@ -393,7 +388,9 @@ function ($,
                },
                "fullscreen": {
                   name: fullscreen ? _("Leave Fullscreen") : _("Fullscreen"),
-                  className: "context-menu-icon " + (fullscreen ? "x_ite-private-icon-leave-fullscreen" : "x_ite-private-icon-fullscreen"),
+                  className: "context-menu-icon " + (fullscreen
+                     ? "x_ite-private-icon-leave-fullscreen"
+                     : "x_ite-private-icon-enter-fullscreen"),
                   callback: function ()
                   {
                      browser .getElement () .toggleFullScreen ();
@@ -401,108 +398,100 @@ function ($,
                   .bind (this),
                },
                "separator3": "--------",
-               "world-info": {
-                  name: _("Show World Info"),
-                  className: "context-menu-icon x_ite-private-icon-world-info",
-                  callback: function ()
-                  {
-                     define .show ();
-
-                     require (["https://cdn.jsdelivr.net/gh/showdownjs/showdown@1.9.1/dist/showdown.min.js"], function (showdown)
-                     {
-                        define .hide ();
+            },
+         };
 
-                        browser .getElement () .find (".x_ite-private-world-info") .remove ();
+         Object .assign (menu .items, this .createUserMenu ());
 
-                        const
-                           converter = new showdown .Converter (),
-                           priv      = browser .getElement () .find (".x_ite-private-browser"),
-                           overlay   = $("<div></div>") .addClass ("x_ite-private-world-info-overlay") .appendTo (priv),
-                           div       = $("<div></div>") .addClass ("x_ite-private-world-info") .appendTo (overlay),
-                           worldInfo = browser .getExecutionContext () .getWorldInfos () [0],
-                           title     = worldInfo .title,
-                           info      = worldInfo .info;
+         Object .assign (menu .items, {
+            "separator4": "--------",
+            "world-info": {
+               name: _("Show World Info"),
+               className: "context-menu-icon x_ite-private-icon-world-info",
+               callback: function ()
+               {
+                  define .show ();
 
-                        converter .setOption ("omitExtraWLInCodeBlocks",            true);
-                        converter .setOption ("simplifiedAutoLink",                 true);
-                        converter .setOption ("excludeTrailingPunctuationFromURLs", true);
-                        converter .setOption ("literalMidWordUnderscores",          true);
-                        converter .setOption ("strikethrough",                      true);
-                        converter .setOption ("openLinksInNewWindow",               false);
+                  require (["https://cdn.jsdelivr.net/gh/showdownjs/showdown@1.9.1/dist/showdown.min.js"], function (showdown)
+                  {
+                     define .hide ();
 
-                        $("<div></div>") .addClass ("x_ite-private-world-info-top") .text ("World Info") .appendTo (div);
+                     browser .getShadow () .find (".x_ite-private-world-info") .remove ();
 
-                        if (title .length)
-                        {
-                           $("<div></div>") .addClass ("x_ite-private-world-info-title") .text (title) .appendTo (div);
-                        }
+                     const
+                        converter = new showdown .Converter (),
+                        priv      = browser .getShadow () .find (".x_ite-private-browser"),
+                        overlay   = $("<div></div>") .addClass ("x_ite-private-world-info-overlay") .appendTo (priv),
+                        div       = $("<div></div>") .addClass ("x_ite-private-world-info") .appendTo (overlay),
+                        worldInfo = browser .getExecutionContext () .getWorldInfos () [0],
+                        title     = worldInfo .title,
+                        info      = worldInfo .info;
+
+                     converter .setOption ("omitExtraWLInCodeBlocks",            true);
+                     converter .setOption ("simplifiedAutoLink",                 true);
+                     converter .setOption ("excludeTrailingPunctuationFromURLs", true);
+                     converter .setOption ("literalMidWordUnderscores",          true);
+                     converter .setOption ("strikethrough",                      true);
+                     converter .setOption ("openLinksInNewWindow",               false);
+
+                     $("<div></div>") .addClass ("x_ite-private-world-info-top") .text ("World Info") .appendTo (div);
+
+                     if (title .length)
+                     {
+                        $("<div></div>") .addClass ("x_ite-private-world-info-title") .text (title) .appendTo (div);
+                     }
 
-                        for (const line of info)
-                        {
-                           $("<div></div>") .addClass ("x_ite-private-world-info-info") .html (converter .makeHtml (line)) .appendTo (div);
-                        }
+                     for (const line of info)
+                     {
+                        $("<div></div>") .addClass ("x_ite-private-world-info-info") .html (converter .makeHtml (line)) .appendTo (div);
+                     }
 
-                        div .find ("a") .on ("click", function (event) { event .stopPropagation (); });
+                     div .find ("a") .on ("click", function (event) { event .stopPropagation (); });
 
-                        // Open external link in new tab.
-                        div .find ("a[href^=http]") .each (function ()
-                        {
-                           if (this .href .indexOf (location .hostname) !== -1)
-                              return;
+                     // Open external link in new tab.
+                     div .find ("a[href^=http]") .each (function ()
+                     {
+                        if (this .href .indexOf (location .hostname) !== -1)
+                           return;
 
-                           $(this) .attr ("target", "_blank");
-                        });
+                        $(this) .attr ("target", "_blank");
+                     });
 
-                        overlay .on ("click", function () { overlay .remove (); });
-                     })
-                  },
+                     overlay .on ("click", function () { overlay .remove (); });
+                  })
                },
-               "about": {
-                  name: _("About X_ITE"),
-                  className: "context-menu-icon x_ite-private-icon-help-about",
-                  callback: function ()
-                  {
-                     window .open (browser .getProviderUrl ());
-                  },
+            },
+            "about": {
+               name: _("About X_ITE"),
+               className: "context-menu-icon x_ite-private-icon-help-about",
+               callback: function ()
+               {
+                  window .open (browser .getProviderUrl ());
                },
             },
-         };
-
-         if (typeof this .userMenu === "function")
-         {
-            const userMenu = this .userMenu ();
-
-            if ($.isPlainObject (userMenu))
-            {
-               Object .assign (menu .items, { "separator4": "--------" });
-
-               for (const key in userMenu)
-                  menu .items ["user-" + key] = userMenu [key];
-            }
-         }
-
-         if (leftSubMenus)
-            menu .className += " x_ite-private-menu-submenus-left";
+         });
 
          if ($.isEmptyObject (menu .items .viewpoints .items))
-         {
-            delete menu .items ["separator0"];
             delete menu .items ["viewpoints"];
-         }
 
          if (Object .keys (menu .items ["available-viewers"] .items) .length < 2)
          {
             delete menu .items ["available-viewers"];
          }
 
-         if (!browser .getCurrentViewer () .match (/^(?:EXAMINE|FLY)$/) || (currentViewpoint && currentViewpoint .getTypeName () === "GeoViewpoint"))
+         if (! browser .getCurrentViewer () .match (/^(?:EXAMINE|FLY)$/) || (currentViewpoint instanceof GeoViewpoint))
          {
             delete menu .items ["straighten-horizon"];
          }
 
+         if (! browser .getDebug ())
+         {
+            delete menu .items ["shading"];
+         }
+
          const worldInfo = browser .getExecutionContext () .getWorldInfos () [0];
 
-         if (!worldInfo || (worldInfo .title .length === 0 && worldInfo .info .length === 0))
+         if (! worldInfo || (worldInfo .title .length === 0 && worldInfo .info .length === 0))
          {
             delete menu .items ["world-info"];
          }
@@ -599,6 +588,204 @@ function ($,
                return _("None Viewer");
          }
       },
+      init: function (options)
+      {
+         this .show = this .createRoot .bind (this, options);
+
+         options .element .on ("contextmenu", this .show);
+      },
+      show: function (event)
+      { },
+      hide: function (event)
+      { },
+      createRoot: function (options, event)
+      {
+         const
+            menu  = options .build (event),
+            level = 1;
+
+         if (! menu) return;
+
+         // Layer
+
+         const layer = $("<div></div>")
+            .addClass ("context-menu-layer")
+            .addClass (menu .className)
+            .appendTo (options .appendTo);
+
+         const hide = this .hide = function ()
+         {
+            delete this .hide;
+
+            layer .remove ();
+
+            ul [options .animation .hide] (options .animation .duration, function ()
+            {
+               ul .remove ();
+
+               if (options .events && typeof options .events .hide === "function")
+                  options .events .hide ();
+            });
+
+            return false;
+         }
+         .bind (this);
+
+         // Menu
+
+         const
+            x = event .pageX - $(document) .scrollLeft (),
+            y = event .pageY - $(document) .scrollTop ();
+
+         const ul = $("<ul></ul>")
+            .hide ()
+            .addClass ("context-menu-list")
+            .addClass (menu .className)
+            .addClass ("context-menu-root")
+            .css ({ "left": x, "top": y })
+            .appendTo (options .appendTo);
+
+         for (const k in menu .items)
+            ul .append (this .createItem (menu .items [k], "context-menu-root", k, level + 1, hide));
+
+         ul [options .animation .show] (options .animation .duration);
+
+         // Reposition menu if to right or to low.
+
+         if (ul .offset () .left - $(document) .scrollLeft () + ul .outerWidth () > $(window) .width ())
+            ul .offset ({ "left":  $(document) .scrollLeft () + Math .max (0, $(window) .width () - ul .outerWidth ()) });
+
+         if (ul .offset () .top - $(document) .scrollTop () + ul .outerHeight () > $(window) .height ())
+            ul .offset ({ "top": $(document) .scrollTop () + Math .max (0, $(window) .height () - ul .outerHeight ()) });
+
+         // Display submenus on the left or right side.
+         // If the submenu is higher than vh, add scrollbars.
+
+         ul .find ("ul") .each (function (i, e)
+         {
+            e = $(e);
+
+            const
+               width    = e .outerWidth () + ul .outerWidth (),
+               position = ul .offset () .left - $(document) .scrollLeft () + width > $(window) .width () ? "right" : "left";
+
+            e .css ("width", e .outerWidth ());
+            e .css (position, e .parent () .closest ("ul") .width ());
+
+            if (e .outerHeight () >= $(window) .height ())
+               e .css ({ "max-height": "100vh", "overflow-y": "scroll" });
+         });
+
+         // If the submenu is higher than vh, reposition it.
+
+         ul .find ("li") .on ("mouseenter touchstart", function (event)
+         {
+            event .stopImmediatePropagation ();
+
+            const
+               t = $(event .target) .closest ("li"),
+               e = t .children ("ul");
+
+            if (! e .length)
+               return;
+
+            e .css ("top", "");
+
+            const bottom = e .offset () .top + e .outerHeight () - $(window) .scrollTop () - $(window) .height ();
+
+            if (bottom > 0)
+               e .offset ({ "top": e .offset () .top - bottom });
+         });
+
+         // Layer
+
+         layer .on ("click contextmenu", hide);
+         ul .on ("contextmenu", hide);
+
+         // Show
+
+         if (options .events && typeof options .events .show === "function")
+            options .events .show (ul);
+
+         return false;
+      },
+      createItem: function (item, parent, key, level, hide)
+      {
+         const li = $("<li></li>") .addClass ("context-menu-item");
+
+         switch (typeof item)
+         {
+            case "string":
+            {
+               if (item .match (/^-+$/))
+                  li .addClass (["context-menu-separator", "context-menu-not-selectable"]);
+
+               break;
+            }
+            case "object":
+            {
+               if (item .className)
+                  li .addClass (item .className);
+
+               switch (item .type)
+               {
+                  case "radio":
+                  case "checkbox":
+                  {
+                     const
+                        label = $("<label></label>") .appendTo (li),
+                        input = $("<input></input>") .appendTo (label);
+
+                     input
+                        .attr ("type", item .type)
+                        .attr ("name", "context-menu-input-" + (item .radio || parent));
+
+                     $("<span></span>") .text (item .name) .appendTo (label);
+
+                     if (item .selected)
+                        input .attr ("checked", "checked");
+
+                     for (const k in item .events)
+                     {
+                        if (typeof item .events [k] === "function")
+                           input .on (k, item .events [k]);
+                     }
+
+                     li .addClass ("context-menu-input");
+
+                     break;
+                  }
+                  default:
+                  {
+                     if (item .name)
+                        $("<span></span>") .text (item .name) .appendTo (li);
+
+                     if (typeof item .callback === "function")
+                        li .on ("click", item .callback) .on ("click", hide);
+
+                     break;
+                  }
+               }
+
+               break;
+            }
+         }
+
+         if (typeof item .items === "object" && level < 3)
+         {
+            const ul = $("<ul></ul>")
+               .addClass ("context-menu-list")
+               .css ({ "z-index": level })
+               .appendTo (li);
+
+            for (const k in item .items)
+               ul .append (this .createItem (item .items [k], key, k, level + 1, hide));
+
+            li .addClass ("context-menu-submenu");
+         }
+
+         return li;
+      },
    });
 
    return ContextMenu;