d3-zoomable/dist/d3-zoomable.mjs

Easy way to apply d3-zoom functionality to DOM elements

import { select } from 'd3-selection';
import { transition } from 'd3-transition';
import { interpolateNumber } from 'd3-interpolate';
import { zoomIdentity, zoom } from 'd3-zoom';
import Kapsule from 'kapsule';

function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}
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 _objectSpread2(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 _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);
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
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);
}

var zoomable = Kapsule({
  props: {
    htmlEl: {
      onChange: function onChange(el, state) {
        state.htmlEls = (!el ? [] : el instanceof Array ? el : [el]).map(function (el) {
          return _typeof(el) === 'object' && !!el.node && typeof el.node === 'function' ? el // already a D3 selection
          : select(el);
        });
      },
      triggerUpdate: false
    },
    svgEl: {
      onChange: function onChange(el, state) {
        state.svgEls = (!el ? [] : el instanceof Array ? el : [el]).map(function (el) {
          return _typeof(el) === 'object' && !!el.node && typeof el.node === 'function' ? el // already a D3 selection
          : select(el);
        });
      },
      triggerUpdate: false
    },
    canvasEl: {
      onChange: function onChange(el, state) {
        state.canvasCtxs = (!el ? [] : el instanceof Array ? el : [el]).map(function (el) {
          return _typeof(el) === 'object' && !!el.node && typeof el.node === 'function' ? el.node().getContext('2d') // D3 selection
          : el.getContext('2d');
        });
      },
      triggerUpdate: false
    },
    enableX: {
      "default": true,
      triggerUpdate: false
    },
    enableY: {
      "default": true,
      triggerUpdate: false
    },
    scaleExtent: {
      "default": [1, Infinity],
      onChange: function onChange(extent, state) {
        extent && state.zoom.scaleExtent(extent);
      },
      triggerUpdate: false
    },
    translateExtent: {
      onChange: function onChange(extent, state) {
        extent && state.zoom.translateExtent(extent);
      },
      triggerUpdate: false
    },
    onChange: {
      triggerUpdate: false
    }
  },
  methods: {
    current: function current(state) {
      return _objectSpread2({}, state.zoomTransform);
    },
    zoomBy: function zoomBy(state, k) {
      var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
      if (state.initialised) {
        state.transitionDuration = duration;
        state.el.call(state.zoom.scaleBy, k);
      }
      return this;
    },
    zoomReset: function zoomReset(state) {
      var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      if (state.initialised) {
        state.transitionDuration = duration;
        state.el.call(state.zoom.transform, zoomIdentity);
      }
      return this;
    },
    zoomTo: function zoomTo(state, _ref) {
      var _ref$x = _ref.x,
        x = _ref$x === void 0 ? 0 : _ref$x,
        _ref$y = _ref.y,
        y = _ref$y === void 0 ? 0 : _ref$y,
        _ref$k = _ref.k,
        k = _ref$k === void 0 ? 1 : _ref$k;
      var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
      if (state.initialised) {
        state.transitionDuration = duration;
        state.el.call(state.zoom.transform, zoomIdentity.scale(k).translate(x, y));
      }
      return this;
    }
  },
  stateInit: function stateInit() {
    return {
      zoom: zoom().filter(function (ev) {
        return !ev.button && !ev.dblclick;
      }),
      zoomTransform: {
        x: 0,
        y: 0,
        k: 1
      }
    };
  },
  init: function init(el, state) {
    var isD3Selection = !!el && _typeof(el) === 'object' && !!el.node && typeof el.node === 'function';
    state.el = select(isD3Selection ? el.node() : el);
    state.el.call(state.zoom.on('zoom', function (ev) {
      var tr = _objectSpread2({}, ev.transform);
      !state.enableX && (tr.x = 0);
      !state.enableY && (tr.y = 0);
      var prevTr = state.zoomTransform;
      state.zoomTransform = tr;
      var duration = state.transitionDuration || 0;
      state.transitionDuration = 0; // reset it

      var scX = state.enableX ? tr.k : 1;
      var scY = state.enableY ? tr.k : 1;
      state.htmlEls.forEach(function (el) {
        (duration ? el.transition().duration(duration) : el).style('transform', "translate(".concat(tr.x, "px, ").concat(tr.y, "px) scale(").concat(scX, ", ").concat(scY, ")"));
      });
      state.svgEls.forEach(function (el) {
        (duration ? el.transition().duration(duration) : el).attr('transform', "translate(".concat(tr.x, ", ").concat(tr.y, ") scale(").concat(scX, ", ").concat(scY, ")"));
      });
      state.canvasCtxs.forEach(function (ctx, idx) {
        var applyTr = function applyTr(_ref2) {
          var x = _ref2.x,
            y = _ref2.y,
            scX = _ref2.scX,
            scY = _ref2.scY;
          ctx.setTransform(scX, 0, 0, scY, x, y);
        };
        duration ? transition().duration(duration).tween("animate-ctx-".concat(idx), function () {
          var xIpol = interpolateNumber(prevTr.x, tr.x);
          var yIpol = interpolateNumber(prevTr.y, tr.y);
          var scXIpol = state.enableX ? interpolateNumber(prevTr.k, tr.k) : function () {
            return 1;
          };
          var scYIpol = state.enableY ? interpolateNumber(prevTr.k, tr.k) : function () {
            return 1;
          };
          return function (t) {
            return applyTr({
              x: xIpol(t),
              y: yIpol(t),
              scX: scXIpol(t),
              scY: scYIpol(t)
            });
          };
        }) : applyTr(_objectSpread2({
          scX: scX,
          scY: scY
        }, tr));
      });
      state.onChange && state.onChange(tr, prevTr, duration);
    }));
    state.el.on('dblclick.zoom', null); // Disable double-click zoom
  }
});

export { zoomable as default };