iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
393 lines (379 loc) • 11.9 kB
JavaScript
import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
import { IepIcon } from 'rk-web-icon';
import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import isNumeric from '../_util/isNumeric';
import { getListeners } from '../_util/props-util';
import classNames from 'classnames';
import classnames from 'classnames';
import Dialog from '../vc-dialog';
import addEventListener from '../vc-util/Dom/addEventListener';
import { warning } from '../vc-util/warning';
import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
export var ImageProps = {
alt: PropTypes.string,
fallback: PropTypes.string,
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
placeholder: PropTypes.any,
preview: PropTypes.bool.def(true),
picture: PropTypes.string,
src: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onError: PropTypes.func
};
export 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;
} }
},
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 = addEventListener(window, 'mouseup', this.onMouseUp, false);
this.onMouseMoveListener = addEventListener(window, 'mousemove', this.onMouseMove, false);
this.onScrollWheelListener = addEventListener(window, 'wheel', this.onWheelMove, {
passive: false
});
try {
if (window.top !== window.self) {
this.onMouseUpListener = addEventListener(window.top, 'mouseup', this.onMouseUp, false);
this.onMouseUpListener = addEventListener(window.top, 'mousemove', this.onMouseMove, false);
}
} catch (error) {
/* istanbul ignore next */
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 = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
if (fixState) {
this.setPosition(_extends({}, 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 = classNames(prefixCls, _defineProperty({}, prefixCls + '-error', this.isError));
var imgCommonProps = {
on: getListeners(this),
alt: alt,
'class': classNames(prefixCls + '-img', _defineProperty({}, prefixCls + '-img-placeholder', placeholder === true))
};
var dialogProps = {
props: {
getContainer: getContextPopupContainer,
prefixCls: previewPrefixCls,
visible: visible
},
on: {
close: this.handleCancel
}
};
var wrapClassName = classnames(_defineProperty({}, 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: isNumeric(width) ? width + 'px' : String(width),
height: isNumeric(height) ? height + 'px' : String(height)
}
},
[$slots.placeholder ? $slots.placeholder : h('img', _mergeJSXProps([{
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(IepIcon, {
attrs: { type: 'basic_linear_common_ee4' }
}), '\u9884\u89C8']
)]
), h(
'div',
{ 'class': wrapperPrefixCls, ref: 'AntimageGroup' },
[$slots['default'], h(
Dialog,
_mergeJSXProps([{
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': classnames(toolClassName, _defineProperty({}, previewPrefixCls + '-operations-operation-disabled', item.disabled)),
on: {
'click': item.onClick
},
key: item.type
},
[h(IepIcon, { 'class': classnames(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)'
}
})]
)]
)]
)]
);
}
};