'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var d3Selection = require('d3-selection');
var d3Transition = require('d3-transition');
var d3Interpolate = require('d3-interpolate');
var d3Zoom = require('d3-zoom');
var Kapsule = _interopDefault(require('kapsule'));

function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

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
          : d3Selection.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
          : d3Selection.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 _objectSpread({}, 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, d3Zoom.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, d3Zoom.zoomIdentity.scale(k).translate(x, y));
      }

      return this;
    }
  },
  stateInit: function stateInit() {
    return {
      zoom: d3Zoom.zoom().filter(function () {
        return !d3Selection.event.button && !d3Selection.event.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 = d3Selection.select(isD3Selection ? el.node() : el);
    state.el.call(state.zoom.on('zoom', function () {
      var tr = _objectSpread({}, d3Selection.event.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 ? d3Transition.transition().duration(duration).tween("animate-ctx-".concat(idx), function () {
          var xIpol = d3Interpolate.interpolateNumber(prevTr.x, tr.x);
          var yIpol = d3Interpolate.interpolateNumber(prevTr.y, tr.y);
          var scXIpol = state.enableX ? d3Interpolate.interpolateNumber(prevTr.k, tr.k) : function () {
            return 1;
          };
          var scYIpol = state.enableY ? d3Interpolate.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(_objectSpread({
          scX: scX,
          scY: scY
        }, tr));
      });
      state.onChange && state.onChange(tr, prevTr, duration);
    }));
    state.el.on('dblclick.zoom', null); // Disable double-click zoom
  }
});

module.exports = zoomable;