iep-ui/lib/image/Image.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageProps = undefined;

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _rkWebIcon = require('rk-web-icon');

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _isNumeric = require('../_util/isNumeric');

var _isNumeric2 = _interopRequireDefault(_isNumeric);

var _propsUtil = require('../_util/props-util');

var _classnames3 = require('classnames');

var _classnames4 = _interopRequireDefault(_classnames3);

var _vcDialog = require('../vc-dialog');

var _vcDialog2 = _interopRequireDefault(_vcDialog);

var _addEventListener = require('../vc-util/Dom/addEventListener');

var _addEventListener2 = _interopRequireDefault(_addEventListener);

var _warning = require('../vc-util/warning');

var _getFixScaleEleTransPosition = require('./getFixScaleEleTransPosition');

var _getFixScaleEleTransPosition2 = _interopRequireDefault(_getFixScaleEleTransPosition);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var ImageProps = exports.ImageProps = {
  alt: _vueTypes2['default'].string,
  fallback: _vueTypes2['default'].string,
  height: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
  placeholder: _vueTypes2['default'].any,
  preview: _vueTypes2['default'].bool.def(true),
  picture: _vueTypes2['default'].string,
  src: _vueTypes2['default'].string,
  width: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]),
  onError: _vueTypes2['default'].func
};

exports['default'] = {
  name: 'AImage',
  inheritAttrs: false,
  props: ImageProps,
  data: function data() {
    return {
      imagePath: '',
      status: 'loading',
      visible: false,
      isMoving: false,
      scale: 1,
      rotate: 0,
      wheelDirection: 0,
      position: {
        x: 0,
        y: 0
      },
      originPositionRef: {
        originX: 0,
        originY: 0,
        deltaX: 0,
        deltaY: 0
      }
    };
  },

  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  mounted: function mounted() {
    var _this = this;

    this.$watch('src', function (e) {
      _this.status = 'loading';
    }, {
      deep: true,
      immediate: true
    });

    this.$watch('visible', function (e) {
      if (e) {
        _this.addWindowsListeners();
      }
    }, {
      deep: true,
      immediate: true
    });
  },
  beforeDestroy: function beforeDestroy() {
    this.detachListeners();
  },

  methods: {
    reset: function reset() {
      this.visible = false;
      this.scale = 1;
      this.rotate = 0;
      this.wheelDirection = 0;
      this.detachListeners();
      this.originPositionRef = {
        originX: 0,
        originY: 0,
        deltaX: 0,
        deltaY: 0
      };
      this.position = {
        x: 0,
        y: 0
      };
      this.detachListeners();
    },
    addWindowsListeners: function addWindowsListeners() {
      this.onMouseUpListener = (0, _addEventListener2['default'])(window, 'mouseup', this.onMouseUp, false);
      this.onMouseMoveListener = (0, _addEventListener2['default'])(window, 'mousemove', this.onMouseMove, false);
      this.onScrollWheelListener = (0, _addEventListener2['default'])(window, 'wheel', this.onWheelMove, {
        passive: false
      });
      try {
        if (window.top !== window.self) {
          this.onMouseUpListener = (0, _addEventListener2['default'])(window.top, 'mouseup', this.onMouseUp, false);
          this.onMouseUpListener = (0, _addEventListener2['default'])(window.top, 'mousemove', this.onMouseMove, false);
        }
      } catch (error) {
        /* istanbul ignore next */
        (0, _warning.warning)(false, '[vc-image] ' + error);
      }
    },
    detachListeners: function detachListeners() {
      this.onMouseUpListener && this.onMouseUpListener.remove();
      this.onMouseMoveListener && this.onMouseMoveListener.remove();
      this.onScrollWheelListener && this.onScrollWheelListener.remove();
    },
    onImageLoad: function onImageLoad() {
      this.status = 'normal';
    },
    onImageError: function onImageError(e) {
      this.status = 'error';
      this.$emit('onError', e);
    },
    onZoomIn: function onZoomIn() {
      this.scale++;
      this.setPosition({
        x: 0,
        y: 0
      });
    },
    onZoomOut: function onZoomOut() {
      if (this.scale > 1) {
        this.scale--;
      }
      this.setPosition({
        x: 0,
        y: 0
      });
    },
    onRotateRight: function onRotateRight() {
      this.rotate += 90;
    },
    onRotateLeft: function onRotateLeft() {
      this.rotate -= 90;
    },
    onMouseUp: function onMouseUp(event) {
      event.preventDefault();
      event.stopPropagation();
      if (this.visible && this.isMoving) {
        var imgRef = this.$refs.imgRef;
        var width = imgRef.offsetWidth * this.scale;
        var height = imgRef.offsetHeight * this.scale;

        var _imgRef$getBoundingCl = imgRef.getBoundingClientRect(),
            left = _imgRef$getBoundingCl.left,
            top = _imgRef$getBoundingCl.top;

        var isRotate = this.rotate % 180 !== 0;
        this.isMoving = false;
        var fixState = (0, _getFixScaleEleTransPosition2['default'])(isRotate ? height : width, isRotate ? width : height, left, top);
        if (fixState) {
          this.setPosition((0, _extends3['default'])({}, fixState));
        }
      }
    },
    onMouseDown: function onMouseDown(event) {
      if (event.button !== 0) return;
      event.preventDefault();
      event.stopPropagation();
      this.originPositionRef = {
        deltaX: event.pageX - this.position.x,
        deltaY: event.pageY - this.position.y,
        originX: this.position.x,
        originY: this.position.y
      };
      this.isMoving = true;
    },
    onMouseMove: function onMouseMove(event) {
      if (!this.isMoving) return;
      event.preventDefault();
      this.setPosition({
        x: event.pageX - this.originPositionRef.deltaX,
        y: event.pageY - this.originPositionRef.deltaY
      });
    },
    onWheelMove: function onWheelMove(event) {
      if (!this.visible) return;
      event.preventDefault();
      this.wheelDirection = event.nativeEvent.deltaY;
      this.setLastWheelZoomDirection();
    },
    setLastWheelZoomDirection: function setLastWheelZoomDirection() {
      if (this.wheelDirection > 0) {
        this.onZoomOut();
      } else if (this.wheelDirection < 0) {
        this.onZoomIn();
      } else {
        this.setPosition({
          x: 0,
          y: 0
        });
      }
    },
    handleCancel: function handleCancel() {
      this.reset();
      this.$emit('close');
    },
    setPosition: function setPosition(e) {
      if (e.x || e.x === 0) {
        this.position.x = e.x;
      }
      if (e.y || e.y === 0) {
        this.position.y = e.y;
      }
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        width = this.width,
        height = this.height,
        $slots = this.$slots,
        alt = this.alt,
        fallback = this.fallback,
        src = this.src,
        picture = this.picture,
        placeholder = this.placeholder,
        preview = this.preview,
        status = this.status,
        scale = this.scale,
        visible = this.visible,
        rotate = this.rotate;
    var _configProvider = this.configProvider,
        getPrefixCls = _configProvider.getPrefixCls,
        getContextPopupContainer = _configProvider.getPopupContainer;

    var prefixCls = getPrefixCls('image', customizePrefixCls);
    var wrapperPrefixCls = getPrefixCls('image-group', customizePrefixCls);
    var previewPrefixCls = getPrefixCls('image-preview', customizePrefixCls);
    var wrappperClass = (0, _classnames4['default'])(prefixCls, (0, _defineProperty3['default'])({}, prefixCls + '-error', this.isError));
    var imgCommonProps = {
      on: (0, _propsUtil.getListeners)(this),
      alt: alt,
      'class': (0, _classnames4['default'])(prefixCls + '-img', (0, _defineProperty3['default'])({}, prefixCls + '-img-placeholder', placeholder === true))
    };
    var dialogProps = {
      props: {
        getContainer: getContextPopupContainer,
        prefixCls: previewPrefixCls,
        visible: visible
      },
      on: {
        close: this.handleCancel
      }
    };
    var wrapClassName = (0, _classnames4['default'])((0, _defineProperty3['default'])({}, previewPrefixCls + '-moving', this.isMoving));
    var toolClassName = previewPrefixCls + '-operations-operation';
    var iconClassName = previewPrefixCls + '-operations-icon';
    var tools = [{
      onClick: this.handleCancel,
      type: 'basic_linear_button_close'
    }, {
      onClick: this.onZoomIn,
      type: 'basic_linear_common_oom'
    }, {
      onClick: this.onZoomOut,
      type: 'basic_linear_common_oom2',
      disabled: this.scale === 1
    }, {
      onClick: this.onRotateRight,
      type: 'basic_linear_directive_rotate2'
    }, {
      onClick: this.onRotateLeft,
      type: 'basic_linear_directive_rotate'
    }];
    return h(
      'div',
      {
        'class': wrappperClass,
        on: {
          'click': function click() {
            if (_this2.status === 'error' || !preview) return;
            if (_this2.$parent.ANT_PREVIEW_GROUP) {
              _this2.$parent.setPreview(src);
            } else {
              _this2.visible = true;
              _this2.$emit('click', src);
            }
          }
        },

        style: {
          width: (0, _isNumeric2['default'])(width) ? width + 'px' : String(width),
          height: (0, _isNumeric2['default'])(height) ? height + 'px' : String(height)
        }
      },
      [$slots.placeholder ? $slots.placeholder : h('img', (0, _babelHelperVueJsxMergeProps2['default'])([{
        attrs: {
          src: status === 'error' && fallback ? fallback : src
        }
      }, imgCommonProps, {
        on: {
          'load': this.onImageLoad,
          'error': this.onImageError
        },

        ref: 'fiexdImage'
      }])), status === 'error' && !fallback ? h('div', {
        attrs: { 'aria-hidden': 'true' },
        'class': prefixCls + '-img-placeholder' }) : null, status === 'loading' && h(
        'div',
        {
          attrs: { 'aria-hidden': 'true' },
          'class': prefixCls + '-img-placeholder' },
        [$slots.placeholder]
      ), preview && status !== 'error' && h(
        'div',
        { 'class': 'ant-image-mask' },
        [h(
          'div',
          { 'class': 'ant-image-mask-info' },
          [h(_rkWebIcon.IepIcon, {
            attrs: { type: 'basic_linear_common_ee4' }
          }), '\u9884\u89C8']
        )]
      ), h(
        'div',
        { 'class': wrapperPrefixCls, ref: 'AntimageGroup' },
        [$slots['default'], h(
          _vcDialog2['default'],
          (0, _babelHelperVueJsxMergeProps2['default'])([{
            attrs: {
              closable: false,
              wrapClassName: wrapClassName,
              transitionName: 'zoom',
              afterClose: this.onAfterClose,
              maskClosable: false,
              maskTransitionName: 'fade',
              keyboard: true
            }
          }, dialogProps]),
          [h(
            'ul',
            { 'class': previewPrefixCls + '-operations' },
            [tools.map(function (item) {
              return h(
                'li',
                {
                  'class': (0, _classnames4['default'])(toolClassName, (0, _defineProperty3['default'])({}, previewPrefixCls + '-operations-operation-disabled', item.disabled)),
                  on: {
                    'click': item.onClick
                  },

                  key: item.type
                },
                [h(_rkWebIcon.IepIcon, { 'class': (0, _classnames4['default'])(iconClassName, ['anticon', iconClassName]), attrs: { type: item.type }
                })]
              );
            })]
          ), h(
            'div',
            {
              'class': previewPrefixCls + '-img-wrapper',
              style: {
                transform: 'translate3d(' + this.position.x + 'px, ' + this.position.y + 'px, 0)'
              }
            },
            [h('img', {
              on: {
                'mousedown': this.onMouseDown
              },

              ref: 'imgRef',
              'class': previewPrefixCls + '-img',
              attrs: { src: picture ? picture : src
              },
              style: {
                transform: 'scale3d(' + scale + ', ' + scale + ', 1) rotate(' + rotate + 'deg)'
              }
            })]
          )]
        )]
      )]
    );
  }
};