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

UI components by orca-team

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); }
import { useEffect } from 'react';
import { EventManager } from 'mjolnir.js';
import { useEventListener, useMemoizedFn } from 'ahooks';
import { useThis } from '@orca-fe/hooks';
import { clamp } from '@orca-fe/tools';
var ef = () => {};
export 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 = useThis({
    startViewport: null
  });
  var handlePointerDown = useMemoizedFn(e => {
    if (e.leftButton) {
      var res = onPointerDown(e);
      if (res === false) return;
      _this.startViewport = viewport;
    }
  });
  var handlePointerMove = useMemoizedFn(e => {});
  var handlePointerUp = useMemoizedFn(e => {
    _this.startViewport = null;
  });
  var handlePan = useMemoizedFn(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;
    }
  });
  useEventListener('dragstart', e => {
    e.preventDefault();
  }, {
    target: ref
  });
  useEventListener('wheel', 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 = clamp(zoom + 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,
        center: _newCenter
      });
    }
  }, {
    target: ref,
    passive: false
  });
  var handlePinchStart = useMemoizedFn(e => {});
  var handlePinchMove = useMemoizedFn(e => {});
  var handlePinchEnd = useMemoizedFn(e => {});
  useEffect(() => {
    if (ref.current) {
      var eventManager = new EventManager(ref.current, {});
      eventManager.on({
        pointerdown: handlePointerDown,
        pointermove: handlePointerMove,
        pointerup: handlePointerUp,
        pinchstart: handlePinchStart,
        pinchmove: handlePinchMove,
        pinchend: handlePinchEnd,
        pan: handlePan
      });
      return () => {
        eventManager.off({
          pointerdown: handlePointerDown,
          pointermove: handlePointerMove,
          pointerup: handlePointerUp,
          pinchstart: handlePinchStart,
          pinchmove: handlePinchMove,
          pinchend: handlePinchEnd,
          pan: handlePan
        });
      };
    }
    return undefined;
  }, []);
}
export default useViewport;