iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
466 lines (452 loc) • 15.4 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 Icon from "../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 Dialog from "../vc-dialog";
import classnames from "classnames";
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),
src: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onError: PropTypes.func
};
export default {
name: "AImage",
components: {
Icon: Icon
},
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,
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 closeIcon = h(
"svg",
{
attrs: { viewBox: "64 64 896 896", focusable: "false", xmlns: "http://www.w3.org/2000/svg" }
},
[h("path", {
attrs: {
d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
}
})]
);
var rotateLeftIcon = h(
"svg",
{
attrs: { viewBox: "64 64 896 896", focusable: "false", xmlns: "http://www.w3.org/2000/svg" }
},
[h("defs", [h("style")]), h("path", {
attrs: {
d: "M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
}
}), h("path", {
attrs: {
d: "M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
}
})]
);
var rotateRightIcon = h(
"svg",
{
attrs: { viewBox: "64 64 896 896", focusable: "false", xmlns: "http://www.w3.org/2000/svg" }
},
[h("defs", [h("style")]), h("path", {
attrs: {
d: "M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
}
}), h("path", {
attrs: {
d: "M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
}
})]
);
var zoomInIcon = h(
"svg",
{
attrs: { viewBox: "64 64 896 896", focusable: "false", xmlns: "http://www.w3.org/2000/svg" }
},
[h("path", {
attrs: {
d: "M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
}
})]
);
var zoomOutIcon = h(
"svg",
{
attrs: { viewBox: "64 64 896 896", focusable: "false", xmlns: "http://www.w3.org/2000/svg" }
},
[h("path", {
attrs: {
d: "M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
}
})]
);
var tools = [{
icon: closeIcon,
onClick: this.handleCancel,
type: "close"
}, {
icon: zoomInIcon,
onClick: this.onZoomIn,
type: "zoomIn"
}, {
icon: zoomOutIcon,
onClick: this.onZoomOut,
type: "zoomOut",
disabled: this.scale === 1
}, {
icon: rotateRightIcon,
onClick: this.onRotateRight,
type: "rotateRight"
}, {
icon: rotateLeftIcon,
onClick: this.onRotateLeft,
type: "rotateLeft"
}];
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)
}
},
[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(Icon, {
attrs: { type: "eye" }
}), "\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(
"span",
{ "class": classnames(iconClassName, ["anticon", iconClassName])
},
[item.icon]
)]
);
})]
), 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: src
},
style: {
transform: "scale3d(" + scale + ", " + scale + ", 1) rotate(" + rotate + "deg)"
}
})]
)]
)]
)]
);
}
};