@gx-design-vue/image 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/ImagePreview.js

@@ -0,0 +1,593 @@
+import useImageTransform from "./hooks/useImageTransform.js";
+import useMouseEvent from "./hooks/useMouseEvent.js";
+import useTouchEvent from "./hooks/useTouchEvent.js";
+import preview_default from "./style/preview.js";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, mergeDefaults, nextTick, onMounted, onUnmounted, ref, toRef, watch } from "vue";
+import { CloseOutlined, CopyOutlined, DownloadOutlined, LeftOutlined, LoadingOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, ZoomInOutlined, ZoomOutOutlined } from "@antdv-next/icons";
+import { classNames, getSlotVNode, getSlotsProps } from "@gx-design-vue/pro-utils";
+import { useWindowSize } from "@vueuse/core";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { useMergedState } from "@gx-design-vue/pro-hooks";
+import { message } from "antdv-next";
+//#region src/ImagePreview.tsx
+const BASE_SCALE_RATIO = 1;
+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),
+	copy: createVNode(CopyOutlined, null, null),
+	download: createVNode(DownloadOutlined, null, null)
+};
+const imagePreviewMessages = {
+	copySuccess: "复制成功",
+	copyFailed: "复制失败",
+	downloadSuccess: "下载成功",
+	downloadFailed: "下载失败"
+};
+function getFileNameFromUrl(url) {
+	try {
+		const matchedFileName = new URL(url, window.location.href).pathname.match(/\/([^/]+)$/)?.[1];
+		return matchedFileName ? decodeURIComponent(matchedFileName) : "image";
+	} catch {
+		const fallbackFileName = url.split("?")[0]?.split("#")[0]?.split("/").pop();
+		return fallbackFileName ? decodeURIComponent(fallbackFileName) : "image";
+	}
+}
+function getExtensionFromMimeType(mimeType) {
+	const mimeTypeMap = {
+		"image/gif": "gif",
+		"image/jpg": "jpg",
+		"image/jpeg": "jpg",
+		"image/png": "png",
+		"image/svg+xml": "svg",
+		"image/webp": "webp"
+	};
+	const normalizedType = mimeType?.toLowerCase();
+	return mimeTypeMap[normalizedType] || normalizedType?.split("/")[1]?.split("+")[0] || "png";
+}
+async function fetchImageBlob(url) {
+	const response = await fetch(url, { mode: "cors" });
+	if (!response.ok) throw new Error(`Failed to fetch image: ${response.status}`);
+	return response.blob();
+}
+/** ClipboardItem 只支持 image/png 和 image/svg+xml。非 PNG/SVG 格式需先转换为 PNG */
+async function blobToPng(blob) {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		const url = URL.createObjectURL(blob);
+		img.onload = () => {
+			URL.revokeObjectURL(url);
+			const canvas = document.createElement("canvas");
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) {
+				reject(/* @__PURE__ */ new Error("Canvas context not available"));
+				return;
+			}
+			ctx.drawImage(img, 0, 0);
+			canvas.toBlob((pngBlob) => {
+				if (pngBlob) resolve(pngBlob);
+				else reject(/* @__PURE__ */ new Error("Failed to convert to PNG"));
+			}, "image/png", 1);
+		};
+		img.onerror = () => {
+			URL.revokeObjectURL(url);
+			reject(/* @__PURE__ */ new Error("Failed to load image for PNG conversion"));
+		};
+		img.src = url;
+	});
+}
+async function getClipboardBlob(blob) {
+	const type = (blob.type || "").toLowerCase();
+	if (type === "image/png" || type === "image/svg+xml") return { [type]: blob };
+	return { "image/png": await blobToPng(blob) };
+}
+function resolveDownloadFileName(url, mimeType) {
+	const fileName = getFileNameFromUrl(url);
+	if (fileName.includes(".")) return fileName.endsWith(".svg+xml") ? fileName.replace(/\.svg\+xml$/i, ".svg") : fileName;
+	return `${fileName}.${getExtensionFromMimeType(mimeType)}`;
+}
+function triggerDownload(blob, fileName) {
+	const blobUrl = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = blobUrl;
+	link.download = fileName;
+	link.style.display = "none";
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(blobUrl);
+}
+const GImagePreview = /* @__PURE__ */ defineComponent((props, { emit, slots, expose }) => {
+	const { width: windowWidth, height: windowHeight } = useWindowSize();
+	const { prefixCls } = useBaseConfig("pro-image-preview", props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = preview_default(prefixCls, rootCls);
+	const [openState, setOpenState] = useMergedState(props.open, {
+		value: toRef(props, "open"),
+		onChange: (value) => {
+			props.onOpenChange?.(value);
+			emit("update:open", value);
+		}
+	});
+	const enableTransition = ref(true);
+	const imageRef = ref();
+	const rootRef = ref();
+	const currentIndex = ref(props.current ?? 0);
+	const copyLoading = ref(false);
+	const downloadLoading = ref(false);
+	const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform({
+		imageRef,
+		minScale: toRef(props, "minScale"),
+		maxScale: toRef(props, "maxScale"),
+		windowWidth,
+		windowHeight,
+		onTransform: props.onTransform
+	});
+	const { isMoving, onMouseDown, onWheel } = useMouseEvent({
+		imageRef,
+		movable: toRef(props, "movable"),
+		visible: openState,
+		scaleStep: toRef(props, "scaleStep"),
+		transform,
+		updateTransform,
+		dispatchZoomChange,
+		windowWidth,
+		windowHeight
+	});
+	const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent({
+		imageRef,
+		movable: toRef(props, "movable"),
+		visible: openState,
+		minScale: toRef(props, "minScale"),
+		transform,
+		updateTransform,
+		dispatchZoomChange,
+		windowWidth,
+		windowHeight
+	});
+	const currentSrc = computed(() => props.urls[currentIndex.value]);
+	const showSwitchButtons = computed(() => props.urls.length > 1);
+	const showProgress = computed(() => props.urls.length >= 1);
+	const maskConfig = computed(() => {
+		if (props.mask === false) return {
+			visible: false,
+			blur: false
+		};
+		if (props.mask && typeof props.mask === "object" && !("type" in props.mask)) return {
+			visible: true,
+			blur: props.mask.blur !== false
+		};
+		return {
+			visible: true,
+			blur: true
+		};
+	});
+	const bodyStyle = computed(() => {
+		const style = {};
+		if (props.mousePosition) style.transformOrigin = `${props.mousePosition.x}px ${props.mousePosition.y}px`;
+		return style;
+	});
+	watch(() => props.current, (value) => {
+		if (value !== void 0) currentIndex.value = value;
+	});
+	watch(() => props.current, (value) => {
+		if (value !== void 0) currentIndex.value = value;
+	});
+	const onClose = () => {
+		setOpenState(false);
+		props.onClose?.();
+		emit("close");
+	};
+	const onMaskClick = () => {
+		if (!isMoving.value) onClose();
+	};
+	const onSwitchPrevious = () => {
+		if (currentIndex.value > 0 || props.infinite) {
+			const previousIndex = currentIndex.value - 1 < 0 ? props.urls.length - 1 : currentIndex.value - 1;
+			enableTransition.value = false;
+			currentIndex.value = previousIndex;
+			resetTransform("prev");
+			nextTick(() => {
+				enableTransition.value = true;
+			});
+		}
+	};
+	const onSwitchNext = () => {
+		if (currentIndex.value < props.urls.length - 1 || props.infinite) {
+			const nextIndex = currentIndex.value + 1 > props.urls.length - 1 ? 0 : currentIndex.value + 1;
+			enableTransition.value = false;
+			currentIndex.value = nextIndex;
+			resetTransform("next");
+			nextTick(() => {
+				enableTransition.value = true;
+			});
+		}
+	};
+	const onZoomIn = () => {
+		dispatchZoomChange(BASE_SCALE_RATIO + (props.scaleStep ?? .5), "zoomIn");
+	};
+	const onZoomOut = () => {
+		dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + (props.scaleStep ?? .5)), "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 onCopy = async () => {
+		if (!currentSrc.value || copyLoading.value) return;
+		if (!navigator.clipboard || !window.ClipboardItem) {
+			message.error(imagePreviewMessages.copyFailed);
+			return;
+		}
+		copyLoading.value = true;
+		try {
+			const clipboardBlob = await getClipboardBlob(await fetchImageBlob(currentSrc.value));
+			await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);
+			message.success(imagePreviewMessages.copySuccess);
+		} catch {
+			message.error(imagePreviewMessages.copyFailed);
+		} finally {
+			copyLoading.value = false;
+		}
+	};
+	const onDownload = async () => {
+		if (!currentSrc.value || downloadLoading.value) return;
+		downloadLoading.value = true;
+		try {
+			const blob = await fetchImageBlob(currentSrc.value);
+			triggerDownload(blob, resolveDownloadFileName(currentSrc.value, blob.type));
+			message.success(imagePreviewMessages.downloadSuccess);
+		} catch {
+			message.error(imagePreviewMessages.downloadFailed);
+		} finally {
+			downloadLoading.value = false;
+		}
+	};
+	const onDoubleClick = (event) => {
+		if (!openState.value) return;
+		if (transform.value.scale !== 1) updateTransform({
+			x: 0,
+			y: 0,
+			scale: 1
+		}, "doubleClick");
+		else dispatchZoomChange(BASE_SCALE_RATIO + (props.scaleStep ?? .5), "doubleClick", event.clientX, event.clientY);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			onClose();
+			return;
+		}
+		if (!openState.value || !showSwitchButtons.value) return;
+		if (event.key === "ArrowLeft") onSwitchPrevious();
+		else if (event.key === "ArrowRight") onSwitchNext();
+	};
+	let removeKeyListener;
+	onMounted(() => {
+		const onKeyDownListener = (event) => onKeyDown(event);
+		window.addEventListener("keydown", onKeyDownListener);
+		removeKeyListener = () => window.removeEventListener("keydown", onKeyDownListener);
+	});
+	onUnmounted(() => {
+		removeKeyListener?.();
+	});
+	expose({ setOpen: (value) => {
+		setOpenState(value);
+		currentIndex.value = props.current ?? 0;
+	} });
+	const resolveSlotProps = () => {
+		return getSlotsProps({
+			slots,
+			props: { ...props.icons },
+			keys: [
+				"flipY",
+				"flipX",
+				"rotateLeft",
+				"rotateRight",
+				"zoomOut",
+				"zoomIn",
+				"copy",
+				"download"
+			],
+			render: true,
+			defaultVNodes: [
+				defaultIcons.flipY,
+				defaultIcons.flipX,
+				defaultIcons.rotateLeft,
+				defaultIcons.rotateRight,
+				defaultIcons.zoomOut,
+				defaultIcons.zoomIn,
+				defaultIcons.copy,
+				defaultIcons.download
+			]
+		});
+	};
+	const getToolbarActions = () => {
+		const slotProps = resolveSlotProps();
+		return [
+			{
+				icon: slotProps.flipY,
+				onClick: onFlipY,
+				type: "flipY"
+			},
+			{
+				icon: slotProps.flipX,
+				onClick: onFlipX,
+				type: "flipX"
+			},
+			{
+				icon: slotProps.rotateLeft,
+				onClick: onRotateLeft,
+				type: "rotateLeft"
+			},
+			{
+				icon: slotProps.rotateRight,
+				onClick: onRotateRight,
+				type: "rotateRight"
+			},
+			{
+				icon: slotProps.zoomOut,
+				onClick: onZoomOut,
+				type: "zoomOut",
+				disabled: computed(() => transform.value.scale <= (props.minScale ?? 1))
+			},
+			{
+				icon: slotProps.zoomIn,
+				onClick: onZoomIn,
+				type: "zoomIn",
+				disabled: computed(() => transform.value.scale === (props.maxScale ?? 50))
+			},
+			{
+				icon: copyLoading.value ? createVNode(LoadingOutlined, { "spin": true }, null) : slotProps.copy,
+				onClick: onCopy,
+				type: "copy",
+				disabled: computed(() => copyLoading.value)
+			},
+			{
+				icon: downloadLoading.value ? createVNode(LoadingOutlined, { "spin": true }, null) : slotProps.download,
+				onClick: onDownload,
+				type: "download",
+				disabled: computed(() => downloadLoading.value)
+			}
+		];
+	};
+	return () => {
+		const transformStyle = {
+			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
+		};
+		const closeIcon = getSlotVNode({
+			slots,
+			props: { close: props.icons?.close },
+			key: "close"
+		});
+		const leftIcon = getSlotVNode({
+			slots,
+			props: { left: props.icons?.left },
+			key: "left"
+		});
+		const rightIcon = getSlotVNode({
+			slots,
+			props: { right: props.icons?.right },
+			key: "right"
+		});
+		const actionClassName = `${prefixCls.value}-actions-action`;
+		const toolbarActions = getToolbarActions();
+		return createVNode(Teleport, { "to": props.getContainer || "body" }, { default: () => [createVNode(Transition, {
+			"name": `${prefixCls.value}-fade`,
+			"appear": true,
+			"onAfterLeave": () => resetTransform("close")
+		}, { default: () => [openState.value && createVNode("div", {
+			"ref": rootRef,
+			"class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value, {
+				[`${prefixCls.value}-movable`]: props.movable,
+				[`${prefixCls.value}-moving`]: isMoving.value
+			}),
+			"style": { zIndex: props.zIndex },
+			"role": "dialog",
+			"aria-modal": "true",
+			"aria-label": "Image",
+			"tabindex": -1
+		}, [
+			maskConfig.value.visible && createVNode("div", {
+				"class": classNames(`${prefixCls.value}-mask`, props.maskClass, { [`${prefixCls.value}-mask-blur`]: maskConfig.value.blur }),
+				"onClick": props.onHideOnClickModal ? onMaskClick : void 0
+			}, null),
+			createVNode("div", {
+				"class": `${prefixCls.value}-body`,
+				"style": bodyStyle.value
+			}, [createVNode("img", {
+				"ref": imageRef,
+				"class": `${prefixCls.value}-img`,
+				"src": currentSrc.value,
+				"alt": "Image",
+				"loading": "eager",
+				"decoding": "sync",
+				"style": transformStyle,
+				"onWheel": onWheel,
+				"onMousedown": onMouseDown,
+				"onDblclick": onDoubleClick,
+				"onTouchstart": onTouchStart,
+				"onTouchmove": onTouchMove,
+				"onTouchend": onTouchEnd,
+				"onTouchcancel": onTouchEnd
+			}, null)]),
+			createVNode("button", {
+				"type": "button",
+				"class": `${prefixCls.value}-close`,
+				"onClick": onClose
+			}, [closeIcon || createVNode(CloseOutlined, null, null)]),
+			showSwitchButtons.value && createVNode(Fragment, null, [createVNode("button", {
+				"type": "button",
+				"class": classNames(`${prefixCls.value}-switch`, `${prefixCls.value}-switch-prev`, { [`${prefixCls.value}-switch-disabled`]: !props.infinite && currentIndex.value === 0 }),
+				"onClick": (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onSwitchPrevious();
+				}
+			}, [leftIcon || createVNode(LeftOutlined, null, null)]), createVNode("button", {
+				"type": "button",
+				"class": classNames(`${prefixCls.value}-switch`, `${prefixCls.value}-switch-next`, { [`${prefixCls.value}-switch-disabled`]: !props.infinite && currentIndex.value === props.urls.length - 1 }),
+				"onClick": (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onSwitchNext();
+				}
+			}, [rightIcon || createVNode(RightOutlined, null, null)])]),
+			createVNode("div", { "class": `${prefixCls.value}-footer` }, [showProgress.value && createVNode("div", { "class": `${prefixCls.value}-progress` }, [props.countRender ? props.countRender(currentIndex.value + 1, props.urls.length) : `${currentIndex.value + 1} / ${props.urls.length}`]), createVNode("div", { "class": `${prefixCls.value}-actions` }, [toolbarActions.map(({ icon, onClick, type, disabled }) => createVNode("button", {
+				"type": "button",
+				"class": classNames(actionClassName, `${actionClassName}-${type}`, { [`${actionClassName}-disabled`]: disabled && disabled.value }),
+				"onClick": () => {
+					if (!disabled?.value) onClick();
+				},
+				"disabled": disabled ? disabled.value : false,
+				"aria-label": type,
+				"key": type
+			}, [icon]))])])
+		])] })] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		urls: {
+			type: Array,
+			required: true
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		scaleStep: {
+			type: Number,
+			required: false
+		},
+		minScale: {
+			type: Number,
+			required: false
+		},
+		maxScale: {
+			type: Number,
+			required: false
+		},
+		movable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		current: {
+			type: Number,
+			required: false
+		},
+		infinite: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getContainer: {
+			type: String,
+			required: false
+		},
+		onHideOnClickModal: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		mask: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		maskClass: {
+			type: String,
+			required: false
+		},
+		mousePosition: {
+			type: [Object, null],
+			required: false
+		},
+		countRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		icons: {
+			type: Object,
+			required: false
+		},
+		onClose: {
+			type: Function,
+			required: false
+		},
+		onTransform: {
+			type: Function,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:open": {
+			type: Function,
+			required: false
+		}
+	}, {
+		open: false,
+		scaleStep: .5,
+		minScale: 1,
+		maxScale: 50,
+		movable: true,
+		zIndex: 2e3,
+		current: 0,
+		infinite: true,
+		onHideOnClickModal: true,
+		urls: [],
+		icons: {}
+	}),
+	emits: [
+		"close",
+		"transform",
+		"update:open"
+	],
+	name: "GImagePreview",
+	inheritAttrs: false
+});
+//#endregion
+export { GImagePreview as default };