redhotmagma-visualization 1.28.4 → 1.29.0

package/CommonUtils/pointerEvent.js

@@ -0,0 +1,415 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createZoomHandler = exports.createPinchZoomListener = exports.createMouseWheelEventListener = exports.createPointerMoveEventListener = exports.createPointerEventListener = exports.createPointerHitListener = exports.createPositionChangeChecker = exports.getPointFromPointerEvent = void 0;
+
+/**
+ * @param {MouseEvent|TouchEvent} evt
+ * @param {HTMLElement} relativeTo
+ * @returns {{x: number, y: number}}
+ */
+var getPointFromPointerEvent = function getPointFromPointerEvent(evt, relativeTo) {
+  var x, y;
+  var touches = evt.changedTouches && evt.changedTouches.length > 0 && evt.changedTouches || evt.touches;
+
+  if (touches && touches.length > 0) {
+    x = touches[0].clientX;
+    y = touches[0].clientY;
+  } else {
+    x = evt.clientX;
+    y = evt.clientY;
+  }
+
+  if (relativeTo) {
+    var _relativeTo$getBoundi = relativeTo.getBoundingClientRect(),
+        top = _relativeTo$getBoundi.top,
+        left = _relativeTo$getBoundi.left;
+
+    x -= left;
+    y -= top;
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+};
+/**
+ * Creates and stores the print of the event position for later comparison.
+ * It can be used to create a position change checker function, in order to solve the problem
+ * of Chrome's automatically triggered mousemove event when clicking without moving the mouse.
+ * @param evt
+ * @returns {function(*=): boolean}
+ */
+
+
+exports.getPointFromPointerEvent = getPointFromPointerEvent;
+
+var createPositionChangeChecker = function createPositionChangeChecker(evt) {
+  var getPositionPrint = function getPositionPrint(evt) {
+    return "" + evt.pageX + "-" + evt.pageY;
+  };
+
+  var initialPrint = getPositionPrint(evt);
+  return function (evt) {
+    return initialPrint !== getPositionPrint(evt);
+  };
+};
+/**
+ * Creates a "hit" event listener.
+ * It detects a single tap (or click) - if the pointer was released without moving.
+ * @param element
+ * @param {function} fn The event handler function
+ * @returns {function()} A function to be called to remove the event listeners
+ */
+
+
+exports.createPositionChangeChecker = createPositionChangeChecker;
+
+var createPointerHitListener = function createPointerHitListener(element, fn) {
+  var moved = false;
+  var checkPositionChange = false; // preventing the emulated mouse events after touchend
+  // see https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+
+  var preventEmulatedEvents = function preventEmulatedEvents(cb) {
+    return function (evt) {
+      if (!moved && evt.type === "touchend") {
+        evt.preventDefault();
+      }
+
+      cb(evt);
+    };
+  };
+
+  var startHandler = function startHandler(evt) {
+    moved = false;
+    var isTouch = (evt.changedTouches || evt.touches || []).length > 0;
+
+    if (isTouch) {
+      // in case of touch events we can skip the check, the events are fired correctly
+      checkPositionChange = false;
+      element.addEventListener("touchmove", moveHandler, true);
+      element.addEventListener("touchend", endHandler);
+    } else {
+      checkPositionChange = createPositionChangeChecker(evt);
+      element.addEventListener("mousemove", moveHandler);
+      element.addEventListener("mouseup", endHandler);
+    }
+  };
+
+  var moveHandler = function moveHandler(evt) {
+    if (checkPositionChange) {
+      moved = checkPositionChange(evt);
+    } else {
+      moved = true;
+    }
+  };
+
+  var endHandler = preventEmulatedEvents(function () {
+    !moved && fn.apply(void 0, arguments);
+    element.removeEventListener("touchmove", moveHandler, true);
+    element.removeEventListener("mousemove", moveHandler);
+    element.removeEventListener("touchend", endHandler);
+    element.removeEventListener("mouseup", endHandler);
+  });
+  element.addEventListener("mousedown", startHandler);
+  element.addEventListener("touchstart", startHandler);
+  return function () {
+    element.removeEventListener("mousedown", startHandler);
+    element.removeEventListener("touchstart", startHandler);
+  };
+};
+/**
+ * Creates a general pointer event listener (for mouse and touch events)
+ * @param element
+ * @param {string} name The name of the event phase ('start'|'move'|'end')
+ * @param {function} fn The event handler function
+ * @returns {function()} A function to be called to remove the event listeners
+ */
+
+
+exports.createPointerHitListener = createPointerHitListener;
+
+var createPointerEventListener = function createPointerEventListener(element, name, fn) {
+  var touchName, mouseName;
+
+  switch (name) {
+    case "start":
+      {
+        touchName = "touchstart";
+        mouseName = "mousedown";
+        break;
+      }
+
+    case "move":
+      {
+        touchName = "touchmove";
+        mouseName = "mousemove";
+        break;
+      }
+
+    case "end":
+      {
+        touchName = "touchend";
+        mouseName = "mouseup";
+        break;
+      }
+  }
+
+  var tolerance = 1; // ms
+
+  var timeStamp = 0;
+
+  var touchHandler = function touchHandler(evt) {
+    timeStamp = evt.timeStamp;
+
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    fn.apply(void 0, [evt].concat(args));
+  };
+
+  var mouseHandler = function mouseHandler(evt) {
+    if (evt.timeStamp - timeStamp < tolerance) {
+      // eslint-disable-next-line no-console
+      console.log("Skipped double event handling.");
+      return;
+    } // for 'start' we call the function only if the element is is the target (or contained by the target)
+    // for others it has to be called in every case
+
+
+    if (name !== "start" || evt.target === element || evt.target.contains(element)) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      fn.apply(void 0, [evt].concat(args));
+    }
+  };
+
+  element.addEventListener(touchName, touchHandler);
+  window.addEventListener(mouseName, mouseHandler);
+  return function () {
+    element.removeEventListener(touchName, touchHandler);
+    window.removeEventListener(mouseName, mouseHandler);
+  };
+};
+/**
+ * Helper function to get the distance of two points
+ * @param {number} x1
+ * @param {number} x2
+ * @param {number} y1
+ * @param {number} y2
+ * @return {number}
+ */
+
+
+exports.createPointerEventListener = createPointerEventListener;
+
+var getTwoPointsDistance = function getTwoPointsDistance(x1, x2, y1, y2) {
+  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
+};
+/**
+ * Returns the distance between the first two touch points
+ * @param {array} touches The touches list from the touch event
+ * @return {null|number} The distance
+ */
+
+
+var getTouchDistance = function getTouchDistance(_ref) {
+  var touches = _ref.touches;
+
+  if (!touches || touches.length < 2) {
+    return null;
+  }
+
+  return getTwoPointsDistance(touches[0].clientX, touches[1].clientX, touches[0].clientY, touches[1].clientY);
+};
+/**
+ * Creates a pointer move event listener (for mouse and touch events)
+ * @param element
+ * @param {function} fn The event handler function
+ * @returns {function()} A function to be called to remove the event listeners
+ */
+
+
+var createPointerMoveEventListener = function createPointerMoveEventListener(element, fn) {
+  var moveListener = null;
+
+  var removeMoveListener = function removeMoveListener() {
+    if (moveListener) {
+      moveListener();
+      moveListener = null;
+    }
+  };
+
+  var getPointFromMultipleTouchEvent = function getPointFromMultipleTouchEvent(evt, prevPosition) {
+    if (!prevPosition || !evt.touches || evt.touches.length < 2) {
+      return getPointFromPointerEvent(evt);
+    }
+
+    var x = null;
+    var y = null;
+    var distance = null;
+
+    for (var i = 0; i < evt.touches.length; i++) {
+      var newDistance = getTwoPointsDistance(evt.touches[i].clientX, prevPosition.x, evt.touches[i].clientY, prevPosition.y); // Get the closest touch event to the previous one
+
+      if (distance === null || newDistance < distance) {
+        distance = newDistance;
+        x = evt.touches[i].clientX;
+        y = evt.touches[i].clientY;
+      }
+    }
+
+    return {
+      x: x,
+      y: y
+    };
+  };
+
+  var startListener = createPointerEventListener(element, "start", function (evt) {
+    var prevPosition = getPointFromMultipleTouchEvent(evt);
+    var prevZoomDistance = getTouchDistance(evt);
+    removeMoveListener();
+    moveListener = createPointerEventListener(element, "move", function (evt) {
+      var currentPosition = getPointFromMultipleTouchEvent(evt, prevPosition);
+      var currentZoomDistance = getTouchDistance(evt);
+      var change = {
+        x: currentPosition.x - prevPosition.x,
+        y: currentPosition.y - prevPosition.y,
+        zoom: prevZoomDistance !== null && currentZoomDistance !== null ? currentZoomDistance / prevZoomDistance : null
+      };
+      prevPosition = currentPosition;
+      prevZoomDistance = currentZoomDistance;
+
+      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+        args[_key3 - 1] = arguments[_key3];
+      }
+
+      fn.apply(void 0, [evt, change].concat(args));
+    });
+  });
+  var endListener = createPointerEventListener(element, "end", function () {
+    removeMoveListener();
+  });
+  return function () {
+    startListener();
+    endListener();
+    removeMoveListener();
+  };
+};
+/**
+ * Creates a mouse wheel event listener
+ * @param {HTMLElement} element
+ * @param {function} fn The event handler function
+ * @returns {function} A function to be called to remove the event listener
+ */
+
+
+exports.createPointerMoveEventListener = createPointerMoveEventListener;
+
+var createMouseWheelEventListener = function createMouseWheelEventListener(element, fn) {
+  var handler = function handler(evt) {
+    for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+      args[_key4 - 1] = arguments[_key4];
+    }
+
+    fn.apply(void 0, [evt].concat(args));
+  };
+
+  element.addEventListener("wheel", handler);
+  return function () {
+    element.removeEventListener("wheel", handler);
+  };
+};
+/**
+ * Creates a "pinch zoom" listener using touch events
+ * @param {HTMLElement} element
+ * @param {function} fn The event handler function
+ * @param {number} sensitivity The min distance to call the wrapped event handler
+ * @return {function} A function to be called to remove the event listener
+ */
+
+
+exports.createMouseWheelEventListener = createMouseWheelEventListener;
+
+var createPinchZoomListener = function createPinchZoomListener(element, fn) {
+  var sensitivity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
+  var prevDistance;
+
+  var startHandler = function startHandler(evt) {
+    if (evt.touches.length < 2) {
+      return;
+    }
+
+    element.addEventListener("touchmove", moveHandler);
+    element.addEventListener("touchend", endHandler);
+    prevDistance = getTouchDistance(evt);
+  };
+
+  var moveHandler = function moveHandler(evt) {
+    if (evt.touches.length < 2) {
+      cleanUpListeners();
+      return;
+    }
+
+    var distance = getTouchDistance(evt);
+
+    if (Math.abs(distance - prevDistance) > sensitivity) {
+      fn(evt, {
+        prevDistance: prevDistance,
+        distance: distance
+      });
+      prevDistance = distance;
+    }
+  };
+
+  var endHandler = function endHandler() {
+    return element.removeEventListener("touchmove", moveHandler);
+  };
+
+  element.addEventListener("touchstart", startHandler);
+
+  var cleanUpListeners = function cleanUpListeners() {
+    element.removeEventListener("touchstart", startHandler);
+  };
+
+  return cleanUpListeners;
+};
+/**
+ * Creates a general zoom handler that includes mouse wheel and the two finger pinch as well
+ * @param {HTMLElement} element
+ * @param {function} fn The event handler function
+ * @return {function} A function to be called to remove the event listeners
+ */
+
+
+exports.createPinchZoomListener = createPinchZoomListener;
+
+var createZoomHandler = function createZoomHandler(element, fn) {
+  var cleanUpMouseWheelListener = createMouseWheelEventListener(element, function (evt) {
+    var eventDelta = evt.deltaY || evt.detail;
+    var direction = eventDelta > 0 ? "out" : "in";
+    fn(evt, {
+      direction: direction
+    });
+  });
+  var cleanUpPinchZoomListener = createPinchZoomListener(element, function (evt, data) {
+    var distance = data.distance,
+        prevDistance = data.prevDistance;
+    var direction = distance / prevDistance < 1 ? "out" : "in";
+    fn(evt, {
+      direction: direction
+    });
+  });
+  return function () {
+    cleanUpMouseWheelListener();
+    cleanUpPinchZoomListener();
+  };
+};
+
+exports.createZoomHandler = createZoomHandler;

package/Constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Numeric = exports.EventTypes = void 0;
+var EventTypes = {
+  Intersection: "Visualization/Intersection",
+  ClickAway: "Visualization/ClickAway",
+  ModelLoaded: "Visualization/ModelLoaded",
+  MaterialUpdated: "Visualization/MaterialUpdated",
+  Error: "Visualization/Error",
+  Initialized: "Visualization/Initialized",
+  LoadStart: "Visualization/LoadStart",
+  LoadFinished: "Visualization/LoadFinished",
+  LoadError: "Visualization/LoadError",
+  Zoomed: "Visualization/Zoomed"
+};
+exports.EventTypes = EventTypes;
+var Numeric = {
+  TwoPI: 2 * Math.PI
+};
+exports.Numeric = Numeric;