@gx-design-vue/image 0.1.1 → 0.2.0-alpha.0

package/dist/ImagePreview/index.js

@@ -0,0 +1,303 @@
+import useImageTransform from "./hooks/useImageTransform.js";
+import addEventListenerWrap from "./utils/addEventListener.js";
+import { BASE_SCALE_RATIO } from "./utils/util.js";
+import useMouseEvent from "./hooks/useMouseEvent.js";
+import useTouchEvent from "./hooks/useTouchEvent.js";
+import props_default from "./props.js";
+import Operations_default from "./Operations.js";
+import { useStyle as useStyle$1 } from "./style.js";
+import KeyCode_default from "./utils/KeyCode.js";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive, ref, toRef, vShow, watch, withDirectives } from "vue";
+import { RotateLeftOutlined, RotateRightOutlined, SwapOutlined, ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons-vue";
+import { getTransitionProps } from "@gx-design-vue/pro-provider";
+import { getPrefixCls, getSlot, getSlotVNode, getSlotsProps, isArray, isNumber } from "@gx-design-vue/pro-utils";
+import { omit } from "es-toolkit";
+import { useEffect, useMergedState, useState } from "@gx-design-vue/pro-hooks";
+
+//#region src/ImagePreview/index.tsx
+const defaultIcons = {
+	rotateLeft: createVNode(RotateLeftOutlined, null, null),
+	rotateRight: createVNode(RotateRightOutlined, null, null),
+	zoomIn: createVNode(ZoomInOutlined, null, null),
+	zoomOut: createVNode(ZoomOutOutlined, null, null),
+	flipX: createVNode(SwapOutlined, null, null),
+	flipY: createVNode(SwapOutlined, { "rotate": 90 }, null)
+};
+const GImagePreview = /* @__PURE__ */ defineComponent({
+	name: "GImagePreview",
+	props: props_default,
+	inheritAttrs: false,
+	slots: Object,
+	emits: {
+		close: () => true,
+		transform: (_info) => true,
+		"update:open": (_val) => true
+	},
+	setup: (props, { emit, expose, slots }) => {
+		const baseClassName = getPrefixCls({ suffixCls: "image-view" });
+		const { wrapSSR, hashId } = useStyle$1(baseClassName);
+		const [_, setOpen, innerOpen] = useMergedState(props.open, {
+			value: toRef(props, "open"),
+			onChange: (val) => {
+				props.onOpenChange?.(val);
+				emit("update:open", val);
+			}
+		});
+		const [animate, setAnimate] = useState(false);
+		const [enableTransition, setEnableTransition] = useState(true);
+		const imgRef = ref();
+		const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(imgRef, toRef(props, "minScale"), toRef(props, "maxScale"), props.onTransform);
+		const { isMoving, onMouseDown, onWheel } = useMouseEvent(imgRef, toRef(props, "movable"), innerOpen, toRef(props, "scaleStep"), transform, updateTransform, dispatchZoomChange);
+		const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(imgRef, toRef(props, "movable"), innerOpen, toRef(props, "minScale"), transform, updateTransform, dispatchZoomChange);
+		useEffect(() => {
+			if (!enableTransition.value) setEnableTransition(true);
+		}, [enableTransition]);
+		const wrapper = ref(null);
+		const current = ref(props.current);
+		const urls = reactive(/* @__PURE__ */ new Map());
+		const canPreviewUrls = computed(() => new Map(Array.from(urls).map(([id, { url }]) => [id, url])));
+		const currentSrc = computed(() => canPreviewUrls.value.get(current.value));
+		const previewGroupCount = computed(() => canPreviewUrls.value.size);
+		const urlsKeys = computed(() => Array.from(canPreviewUrls.value.keys()));
+		const currentPreviewIndex = computed(() => urlsKeys.value.indexOf(current.value));
+		const showLeftOrRightSwitches = computed(() => previewGroupCount.value > 1);
+		const showOperationsProgress = computed(() => previewGroupCount.value >= 1);
+		watch(innerOpen, (val) => {
+			if (val) animate.value = true;
+		});
+		const setCurrent = (val) => {
+			current.value = val;
+		};
+		watch(() => props.current, (val) => {
+			if (isNumber(val)) setCurrent(val);
+		});
+		function registerImage(id, url) {
+			urls.set(id, {
+				url,
+				loading: true,
+				canPreview: false
+			});
+		}
+		const onClose = () => {
+			setAnimate(false);
+		};
+		const onAnimateChange = () => {
+			resetTransform("close");
+			emit("close");
+		};
+		const hideMask = (e) => {
+			if (isMoving.value) return;
+			if (wrapper.value === e?.target) onClose();
+		};
+		const handleImgLoad = () => {
+			const currentImage = urls.get(current.value);
+			if (currentImage) {
+				currentImage.loading = false;
+				currentImage.canPreview = true;
+			}
+		};
+		const handleImgError = (e) => {
+			const currentImage = urls.get(current.value);
+			if (currentImage) {
+				currentImage.loading = false;
+				currentImage.canPreview = false;
+			}
+			e.target.alt = "加载失败";
+		};
+		const onSwitchLeft = () => {
+			if (currentPreviewIndex.value > 0 || props.infinite) {
+				const prevIndex = currentPreviewIndex.value - 1 < 0 ? props.urls.length - 1 : currentPreviewIndex.value - 1;
+				setCurrent(urlsKeys.value[prevIndex]);
+				resetTransform("prev");
+			}
+		};
+		const onSwitchRight = () => {
+			if (currentPreviewIndex.value < previewGroupCount.value - 1 || props.infinite) {
+				const nextIndex = currentPreviewIndex.value + 1 > props.urls.length - 1 ? 0 : currentPreviewIndex.value + 1;
+				setCurrent(urlsKeys.value[nextIndex]);
+				resetTransform("next");
+			}
+		};
+		const onZoomIn = () => {
+			dispatchZoomChange(BASE_SCALE_RATIO + props.scaleStep, "zoomIn");
+		};
+		const onZoomOut = () => {
+			dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + props.scaleStep), "zoomOut");
+		};
+		const onRotateRight = () => {
+			updateTransform({ rotate: transform.value.rotate + 90 }, "rotateRight");
+		};
+		const onRotateLeft = () => {
+			updateTransform({ rotate: transform.value.rotate - 90 }, "rotateLeft");
+		};
+		const onFlipX = () => {
+			updateTransform({ flipX: !transform.value.flipX }, "flipX");
+		};
+		const onFlipY = () => {
+			updateTransform({ flipY: !transform.value.flipY }, "flipY");
+		};
+		const toolsFn = () => {
+			const slotsProps = getSlotsProps({
+				slots,
+				props: props.icons,
+				keys: [
+					"flipY",
+					"flipX",
+					"rotateLeft",
+					"rotateRight",
+					"zoomOut",
+					"zoomIn"
+				],
+				render: true,
+				defaultVNodes: [
+					defaultIcons.flipY,
+					defaultIcons.flipX,
+					defaultIcons.rotateLeft,
+					defaultIcons.rotateRight,
+					defaultIcons.zoomOut,
+					defaultIcons.zoomIn
+				]
+			});
+			return [
+				{
+					icon: slotsProps.flipY,
+					onClick: onFlipY,
+					type: "flipY"
+				},
+				{
+					icon: slotsProps.flipX,
+					onClick: onFlipX,
+					type: "flipX"
+				},
+				{
+					icon: slotsProps.rotateLeft,
+					onClick: onRotateLeft,
+					type: "rotateLeft"
+				},
+				{
+					icon: slotsProps.rotateRight,
+					onClick: onRotateRight,
+					type: "rotateRight"
+				},
+				{
+					icon: slotsProps.zoomOut,
+					onClick: () => onZoomOut(),
+					type: "zoomOut",
+					disabled: computed(() => transform.value.scale <= props.minScale)
+				},
+				{
+					icon: slotsProps.zoomIn,
+					onClick: () => onZoomIn(),
+					type: "zoomIn",
+					disabled: computed(() => transform.value.scale === props.maxScale)
+				}
+			];
+		};
+		const onDoubleClick = (event) => {
+			if (innerOpen.value) if (transform.value.scale !== 1) updateTransform({
+				x: 0,
+				y: 0,
+				scale: 1
+			}, "doubleClick");
+			else dispatchZoomChange(BASE_SCALE_RATIO + props.scaleStep, "doubleClick", event.clientX, event.clientY);
+		};
+		const onKeyDown = (event) => {
+			if (event.keyCode === KeyCode_default.ESC) onClose();
+			if (!innerOpen.value || !showLeftOrRightSwitches.value) return;
+			if (event.keyCode === KeyCode_default.LEFT) onSwitchLeft();
+			else if (event.keyCode === KeyCode_default.RIGHT) onSwitchRight();
+		};
+		let removeListeners = () => {};
+		onMounted(() => {
+			watch(() => props.urls, (val) => {
+				if (isArray(val)) val.forEach((src, currentId) => {
+					registerImage(currentId, src);
+				});
+			}, {
+				flush: "post",
+				immediate: true
+			});
+			watch([() => innerOpen.value, () => isMoving.value], () => {
+				removeListeners();
+				const onKeyDownListener = addEventListenerWrap(window, "keydown", onKeyDown, false);
+				removeListeners = () => {
+					onKeyDownListener.remove();
+				};
+			}, {
+				flush: "post",
+				immediate: true
+			});
+		});
+		onUnmounted(() => {
+			removeListeners();
+		});
+		expose({ setOpen: (val) => {
+			setOpen(val);
+			current.value = props.current;
+		} });
+		return () => {
+			const transitionProps = getTransitionProps(`${baseClassName}-mask-zoom`);
+			const zoomTransitionProps = getTransitionProps(`${baseClassName}-zoom`);
+			const icons = {};
+			for (const key in props.icons) icons[key] = getSlotVNode({
+				slots,
+				props: props.icons,
+				key
+			});
+			return wrapSSR(createVNode(Fragment, null, [createVNode(Teleport, { "to": props.getContainer || "body" }, { default: () => [innerOpen.value && createVNode(Fragment, null, [createVNode("div", { "class": `${baseClassName}-root ${hashId.value}` }, [createVNode(Transition, transitionProps, { default: () => [withDirectives(createVNode("div", { "class": `${baseClassName}-mask ${hashId.value}` }, null), [[vShow, innerOpen.value && animate.value]])] }), createVNode("div", {
+				"ref": wrapper,
+				"tabindex": -1,
+				"class": [
+					`${baseClassName}-wrap`,
+					`${hashId.value}`,
+					isMoving.value && `${baseClassName}-moving`
+				],
+				"onClick": (e) => props.onHideOnClickModal && hideMask(e)
+			}, [createVNode(Transition, mergeProps(zoomTransitionProps, { "onAfterLeave": () => onAnimateChange() }), { default: () => [withDirectives(createVNode("div", {
+				"role": "dialog",
+				"class": `${baseClassName} ${hashId.value}`
+			}, [createVNode("div", { "class": `${baseClassName}-content ${hashId.value}` }, [createVNode("div", { "class": `${baseClassName}-body ${hashId.value}` }, [createVNode("div", { "class": `${baseClassName}-img-wrapper ${hashId.value}` }, [createVNode("img", {
+				"ref": imgRef,
+				"class": `${baseClassName}-img ${hashId.value}`,
+				"src": currentSrc.value,
+				"onLoad": () => handleImgLoad(),
+				"onError": (e) => handleImgError(e),
+				"style": {
+					transform: `translate3d(${transform.value.x}px, ${transform.value.y}px, 0) scale3d(${transform.value.flipX ? "-" : ""}${transform.value.scale}, ${transform.value.flipY ? "-" : ""}${transform.value.scale}, 1) rotate(${transform.value.rotate}deg)`,
+					transitionDuration: !enableTransition.value || isTouching.value ? "0s" : void 0
+				},
+				"onWheel": onWheel,
+				"onMousedown": onMouseDown,
+				"onDblclick": onDoubleClick,
+				"onTouchstart": onTouchStart,
+				"onTouchmove": onTouchMove,
+				"onTouchend": onTouchEnd,
+				"onTouchcancel": onTouchEnd
+			}, null)])])])]), [[vShow, innerOpen.value && animate.value]])] })])])])] }), innerOpen.value && animate.value && createVNode(Operations_default, {
+				"open": innerOpen.value && animate.value,
+				"hashId": hashId.value,
+				"count": props.urls.length,
+				"current": current.value,
+				"zIndex": props.zIndex + 1,
+				"getContainer": props.getContainer,
+				"prefixCls": baseClassName,
+				"icons": omit(icons, toolsFn().map(({ type }) => type)),
+				"tools": toolsFn(),
+				"infinite": props.infinite,
+				"countRender": getSlot({
+					slots,
+					props,
+					key: "countRender"
+				}),
+				"showSwitch": showLeftOrRightSwitches.value,
+				"showProgress": showOperationsProgress.value,
+				"onClose": onClose,
+				"onActive": (effect) => effect > 0 ? onSwitchRight() : onSwitchLeft()
+			}, null)]));
+		};
+	}
+});
+var ImagePreview_default = GImagePreview;
+
+//#endregion
+export { ImagePreview_default as default };

package/dist/ImagePreview/props.d.ts

@@ -0,0 +1,88 @@
+import { TransformAction, TransformType } from "./hooks/useImageTransform.js";
+import { PropType, VNode } from "vue";
+import { CustomRender, WithFalse } from "@gx-design-vue/pro-utils";
+
+//#region src/ImagePreview/props.d.ts
+interface PreviewPropsIcons {
+  close?: WithFalse<CustomRender>;
+  rotateLeft?: WithFalse<CustomRender>;
+  rotateRight?: WithFalse<CustomRender>;
+  zoomIn?: WithFalse<CustomRender>;
+  zoomOut?: WithFalse<CustomRender>;
+  left?: WithFalse<CustomRender>;
+  right?: WithFalse<CustomRender>;
+  flipX?: WithFalse<CustomRender>;
+  flipY?: WithFalse<CustomRender>;
+}
+type BaseImagePreviewProps = Partial<{
+  urls: string[];
+  mask: VNode | boolean;
+  maskClass: string;
+  disabled: boolean;
+  zIndex: number;
+  current: number;
+  infinite: boolean;
+  getContainer: string;
+  onHideOnClickModal: boolean;
+  countRender: WithFalse<(current: number, total: number) => CustomRender>;
+  icons: PreviewPropsIcons;
+}>;
+declare const _default: {
+  urls: {
+    type: PropType<string[]>;
+    default: () => any[];
+  };
+  open: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  scaleStep: {
+    type: PropType<number>;
+    default: number;
+  };
+  minScale: {
+    type: PropType<number>;
+    default: number;
+  };
+  maxScale: {
+    type: PropType<number>;
+    default: number;
+  };
+  movable: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  disabled: PropType<boolean>;
+  zIndex: {
+    type: PropType<number>;
+    default: number;
+  };
+  current: {
+    type: PropType<number>;
+    default: number;
+  };
+  infinite: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  getContainer: {
+    type: PropType<string>;
+  };
+  onHideOnClickModal: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  countRender: PropType<WithFalse<(current: number, total: number) => CustomRender>>;
+  icons: {
+    type: PropType<PreviewPropsIcons>;
+    default: () => PreviewPropsIcons;
+  };
+  onTransform: PropType<(info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => void>;
+  onOpenChange: PropType<(val: boolean) => void>;
+  'onUpdate:open': PropType<(val: boolean) => void>;
+};
+//#endregion
+export { BaseImagePreviewProps, PreviewPropsIcons, _default as default };

package/dist/ImagePreview/props.js

@@ -0,0 +1,53 @@
+import { baseProps } from "../props.js";
+
+//#region src/ImagePreview/props.ts
+var props_default = {
+	urls: {
+		type: Array,
+		default: () => []
+	},
+	open: {
+		type: Boolean,
+		default: false
+	},
+	scaleStep: {
+		type: Number,
+		default: .5
+	},
+	minScale: {
+		type: Number,
+		default: .32
+	},
+	maxScale: {
+		type: Number,
+		default: 32
+	},
+	movable: {
+		type: Boolean,
+		default: true
+	},
+	disabled: Boolean,
+	zIndex: baseProps.zIndex,
+	current: baseProps.current,
+	infinite: baseProps.infinite,
+	getContainer: baseProps.getContainer,
+	onHideOnClickModal: {
+		type: Boolean,
+		default: true
+	},
+	countRender: [
+		Function,
+		Array,
+		Object
+	],
+	icons: {
+		type: Object,
+		default: () => ({})
+	},
+	onTransform: Function,
+	onOpenChange: Function,
+	"onUpdate:open": Function
+};
+
+//#endregion
+export { props_default as default };

package/dist/ImagePreview/style.d.ts

@@ -0,0 +1,30 @@
+import * as vue0 from "vue";
+import { CSSObject, Keyframe, ProAliasToken } from "@gx-design-vue/pro-provider";
+import * as ant_design_vue_es__util_type0 from "ant-design-vue/es/_util/type";
+
+//#region src/ImagePreview/style.d.ts
+interface ImageToken extends ProAliasToken {
+  previewCls: string;
+  zIndexPopup: number;
+  previewOperationSize: number;
+  modalMaskBg: string;
+  componentCls: string;
+  iconCls: string;
+  previewOperationHoverColor: string;
+  previewOperationColor: string;
+  imagePreviewSwitchSize: number;
+  previewOperationColorDisabled: string;
+}
+declare const viewFadeIn: Keyframe;
+declare const viewFadeOut: Keyframe;
+type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
+declare function genBoxStyle(position?: PositionType): CSSObject;
+declare function resetComponent(token: ProAliasToken): CSSObject;
+declare function genPreviewOperationsStyle(token: ImageToken): CSSObject;
+declare function genPreviewSwitchStyle(token: ImageToken): CSSObject;
+declare function useStyle(componentCls: string): {
+  wrapSSR: (node: ant_design_vue_es__util_type0.VueNode) => ant_design_vue_es__util_type0.VueNode;
+  hashId: vue0.ComputedRef<string>;
+};
+//#endregion
+export { ImageToken, PositionType, genBoxStyle, genPreviewOperationsStyle, genPreviewSwitchStyle, resetComponent, useStyle, viewFadeIn, viewFadeOut };