@orca-fe/pocket/lib/viewport-sensor/useViewport.js

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.useViewport = useViewport;
var _react = require("react");
var _mjolnir = require("mjolnir.js");
var _ahooks = require("ahooks");
var _hooks = require("@orca-fe/hooks");
var _tools = require("@orca-fe/tools");
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var ef = function ef() {};
function useViewport(options) {
  var ref = options.ref,
    viewport = options.viewport,
    _options$onViewportCh = options.onViewportChange,
    onViewportChange = _options$onViewportCh === void 0 ? ef : _options$onViewportCh,
    _options$zoomStep = options.zoomStep,
    zoomStep = _options$zoomStep === void 0 ? 0.02 : _options$zoomStep,
    _options$maxZoomStep = options.maxZoomStep,
    maxZoomStep = _options$maxZoomStep === void 0 ? 0.3 : _options$maxZoomStep,
    _options$maxZoom = options.maxZoom,
    maxZoom = _options$maxZoom === void 0 ? 10 : _options$maxZoom,
    _options$minZoom = options.minZoom,
    minZoom = _options$minZoom === void 0 ? -10 : _options$minZoom,
    _options$onPointerDow = options.onPointerDown,
    onPointerDown = _options$onPointerDow === void 0 ? ef : _options$onPointerDow,
    _options$wheelMode = options.wheelMode,
    wheelMode = _options$wheelMode === void 0 ? 'zoom' : _options$wheelMode;
  var _this = (0, _hooks.useThis)({
    startViewport: null
  });
  var handlePointerDown = (0, _ahooks.useMemoizedFn)(function (e) {
    if (e.leftButton) {
      var res = onPointerDown(e);
      if (res === false) return;
      _this.startViewport = viewport;
    }
  });
  var handlePointerMove = (0, _ahooks.useMemoizedFn)(function (e) {});
  var handlePointerUp = (0, _ahooks.useMemoizedFn)(function (e) {
    _this.startViewport = null;
  });
  var handlePan = (0, _ahooks.useMemoizedFn)(function (e) {
    if (_this.startViewport) {
      var center = _this.startViewport.center;
      onViewportChange(_objectSpread(_objectSpread({}, _this.startViewport), {}, {
        center: [center[0] - e.deltaX, center[1] - e.deltaY]
      }));
    }
    if (e.isFinal) {
      _this.startViewport = null;
    }
  });
  (0, _ahooks.useEventListener)('dragstart', function (e) {
    e.preventDefault();
  }, {
    target: ref
  });
  (0, _ahooks.useEventListener)('wheel', function (e) {
    e.preventDefault();
    var bounds = {
      top: 0,
      left: 0
    };
    if (e.currentTarget instanceof Element) {
      bounds = e.currentTarget.getBoundingClientRect();
    }
    var offsetCenter = {
      x: e.clientX - bounds.left,
      y: e.clientY - bounds.top
    };
    var zoom = viewport.zoom,
      center = viewport.center;
    if (wheelMode === 'zoom' || e.ctrlKey || e.metaKey) {
      var newZoom = (0, _tools.clamp)(zoom + (0, _tools.clamp)(-e.deltaY * zoomStep, -maxZoomStep, maxZoomStep), minZoom, maxZoom);
      var delta = {
        x: offsetCenter.x + center[0],
        y: offsetCenter.y + center[1]
      };
      var newCenter = [-offsetCenter.x + delta.x * Math.pow(2, newZoom - zoom), -offsetCenter.y + delta.y * Math.pow(2, newZoom - zoom)];
      onViewportChange({
        zoom: newZoom,
        center: newCenter
      });
    } else {
      // 移动模式
      var _newCenter = [center[0] + e.deltaX, center[1] + e.deltaY];
      onViewportChange({
        zoom: zoom,
        center: _newCenter
      });
    }
  }, {
    target: ref,
    passive: false
  });
  var handlePinchStart = (0, _ahooks.useMemoizedFn)(function (e) {});
  var handlePinchMove = (0, _ahooks.useMemoizedFn)(function (e) {});
  var handlePinchEnd = (0, _ahooks.useMemoizedFn)(function (e) {});
  (0, _react.useEffect)(function () {
    if (ref.current) {
      var eventManager = new _mjolnir.EventManager(ref.current, {});
      eventManager.on({
        pointerdown: handlePointerDown,
        pointermove: handlePointerMove,
        pointerup: handlePointerUp,
        pinchstart: handlePinchStart,
        pinchmove: handlePinchMove,
        pinchend: handlePinchEnd,
        pan: handlePan
      });
      return function () {
        eventManager.off({
          pointerdown: handlePointerDown,
          pointermove: handlePointerMove,
          pointerup: handlePointerUp,
          pinchstart: handlePinchStart,
          pinchmove: handlePinchMove,
          pinchend: handlePinchEnd,
          pan: handlePan
        });
      };
    }
    return undefined;
  }, []);
}
var _default = exports.default = useViewport;