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

package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.js

@@ -0,0 +1,40 @@
+import { useWindowSize } from "@vueuse/core";
+
+//#region src/ImagePreview/hooks/getFixScaleEleTransPosition.ts
+function fixPoint(key, start, width, clientWidth) {
+	const startAddWidth = start + width;
+	const offsetStart = (width - clientWidth) / 2;
+	if (width > clientWidth) {
+		if (start > 0) return { [key]: offsetStart };
+		if (start < 0 && startAddWidth < clientWidth) return { [key]: -offsetStart };
+	} else if (start < 0 || startAddWidth > clientWidth) return { [key]: start < 0 ? offsetStart : -offsetStart };
+	return {};
+}
+/**
+* Fix positon x,y point when
+*
+* Ele width && height < client
+* - Back origin
+*
+* - Ele width | height > clientWidth | clientHeight
+* - left | top > 0 -> Back 0
+* - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
+*
+* Regardless of other
+*/
+function getFixScaleEleTransPosition(width, height, left, top) {
+	const { width: clientWidth, height: clientHeight } = useWindowSize();
+	let fixPos = null;
+	if (width <= clientWidth.value && height <= clientHeight.value) fixPos = {
+		x: 0,
+		y: 0
+	};
+	else if (width > clientWidth.value || height > clientHeight.value) fixPos = {
+		...fixPoint("x", left, width, clientWidth.value),
+		...fixPoint("y", top, height, clientHeight.value)
+	};
+	return fixPos;
+}
+
+//#endregion
+export { getFixScaleEleTransPosition as default };

package/dist/ImagePreview/hooks/useImageTransform.d.ts

@@ -0,0 +1,39 @@
+import { Ref } from "vue";
+
+//#region src/ImagePreview/hooks/useImageTransform.d.ts
+interface TransformType {
+  x: number;
+  y: number;
+  rotate: number;
+  scale: number;
+  flipX: boolean;
+  flipY: boolean;
+}
+type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
+type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
+type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
+declare function useImageTransform(imgRef: Ref<HTMLImageElement>, minScale: Ref<number>, maxScale: Ref<number>, onTransform?: (info: {
+  transform: TransformType;
+  action: TransformAction;
+}) => void): {
+  transform: Ref<{
+    x: number;
+    y: number;
+    rotate: number;
+    scale: number;
+    flipX: boolean;
+    flipY: boolean;
+  }, {
+    x: number;
+    y: number;
+    rotate: number;
+    scale: number;
+    flipX: boolean;
+    flipY: boolean;
+  }>;
+  resetTransform: (action: TransformAction) => void;
+  updateTransform: UpdateTransformFunc;
+  dispatchZoomChange: DispatchZoomChangeFunc;
+};
+//#endregion
+export { DispatchZoomChangeFunc, TransformAction, TransformType, UpdateTransformFunc, useImageTransform as default };

package/dist/ImagePreview/hooks/useImageTransform.js

@@ -0,0 +1,105 @@
+import { ref } from "vue";
+import { raf } from "@gx-design-vue/pro-utils";
+import { useWindowSize } from "@vueuse/core";
+import { cloneDeep, isEqual } from "es-toolkit";
+import { useState } from "@gx-design-vue/pro-hooks";
+
+//#region src/ImagePreview/hooks/useImageTransform.ts
+const initialTransform = {
+	x: 0,
+	y: 0,
+	rotate: 0,
+	scale: 1,
+	flipX: false,
+	flipY: false
+};
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
+	const frame = ref(null);
+	const queue = ref([]);
+	const [transform, setTransform] = useState(initialTransform);
+	const resetTransform = (action) => {
+		setTransform(initialTransform);
+		if (!isEqual(initialTransform, transform.value)) onTransform?.({
+			transform: initialTransform,
+			action
+		});
+	};
+	/** Direct update transform */
+	const updateTransform = (newTransform, action) => {
+		if (frame.value === null) {
+			queue.value = [];
+			frame.value = raf(() => {
+				let memoState = cloneDeep(transform.value);
+				queue.value.forEach((queueState) => {
+					memoState = {
+						...memoState,
+						...queueState
+					};
+				});
+				frame.value = null;
+				onTransform?.({
+					transform: memoState,
+					action
+				});
+				setTransform(memoState);
+			});
+		}
+		queue.value.push({
+			...transform.value,
+			...newTransform
+		});
+	};
+	/** Scale according to the position of centerX and centerY */
+	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
+		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.value;
+		let newRatio = ratio;
+		let newScale = transform.value.scale * ratio;
+		if (newScale > maxScale.value) {
+			newScale = maxScale.value;
+			newRatio = maxScale.value / transform.value.scale;
+		} else if (newScale < minScale.value) {
+			newScale = isTouch ? newScale : minScale.value;
+			newRatio = newScale / transform.value.scale;
+		}
+		/** Default center point scaling */
+		const mergedCenterX = centerX ?? innerWidth / 2;
+		const mergedCenterY = centerY ?? innerHeight / 2;
+		const diffRatio = newRatio - 1;
+		/** Deviation calculated from image size */
+		const diffImgX = diffRatio * width * .5;
+		const diffImgY = diffRatio * height * .5;
+		/** The difference between the click position and the edge of the document */
+		const diffOffsetLeft = diffRatio * (mergedCenterX - transform.value.x - offsetLeft);
+		const diffOffsetTop = diffRatio * (mergedCenterY - transform.value.y - offsetTop);
+		/** Final positioning */
+		let newX = transform.value.x - (diffOffsetLeft - diffImgX);
+		let newY = transform.value.y - (diffOffsetTop - diffImgY);
+		/**
+		* When zooming the image
+		* When the image size is smaller than the width and height of the window, the position is initialized
+		*/
+		if (ratio < 1 && newScale === 1) {
+			const mergedWidth = offsetWidth * newScale;
+			const mergedHeight = offsetHeight * newScale;
+			const { width: clientWidth, height: clientHeight } = useWindowSize();
+			if (mergedWidth <= clientWidth.value && mergedHeight <= clientHeight.value) {
+				newX = 0;
+				newY = 0;
+			}
+		}
+		updateTransform({
+			x: newX,
+			y: newY,
+			scale: newScale
+		}, action);
+	};
+	return {
+		transform,
+		resetTransform,
+		updateTransform,
+		dispatchZoomChange
+	};
+}
+
+//#endregion
+export { useImageTransform as default };

package/dist/ImagePreview/hooks/useMouseEvent.d.ts

@@ -0,0 +1,14 @@
+import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from "./useImageTransform.js";
+import { MouseEventHandler } from "../typings.js";
+import { Ref } from "vue";
+
+//#region src/ImagePreview/hooks/useMouseEvent.d.ts
+declare function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+  isMoving: Ref<boolean, boolean>;
+  onMouseDown: MouseEventHandler;
+  onMouseMove: MouseEventHandler;
+  onMouseUp: MouseEventHandler;
+  onWheel: (event: WheelEvent) => void;
+};
+//#endregion
+export { useMouseEvent as default };

package/dist/ImagePreview/hooks/useMouseEvent.js

@@ -0,0 +1,100 @@
+import addEventListenerWrap from "../utils/addEventListener.js";
+import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../utils/util.js";
+import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition.js";
+import { ref } from "vue";
+import { useEffect, useState } from "@gx-design-vue/pro-hooks";
+
+//#region src/ImagePreview/hooks/useMouseEvent.ts
+function useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange) {
+	const [isMoving, setMoving] = useState(false);
+	const startPositionInfo = ref({
+		diffX: 0,
+		diffY: 0,
+		transformX: 0,
+		transformY: 0
+	});
+	const onMouseDown = (event) => {
+		if (!movable || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		startPositionInfo.value = {
+			diffX: event.pageX - transform.value.x,
+			diffY: event.pageY - transform.value.y,
+			transformX: transform.value.x,
+			transformY: transform.value.y
+		};
+		setMoving(true);
+	};
+	const onMouseMove = (event) => {
+		if (visible && isMoving.value) updateTransform({
+			x: event.pageX - startPositionInfo.value.diffX,
+			y: event.pageY - startPositionInfo.value.diffY
+		}, "move");
+	};
+	const onMouseUp = () => {
+		if (visible && isMoving.value) {
+			setMoving(false);
+			/** No need to restore the position when the picture is not moved, So as not to interfere with the click */
+			const { transformX, transformY } = startPositionInfo.value;
+			if (!(transform.value.x !== transformX && transform.value.y !== transformY)) return;
+			const width = imgRef.value.offsetWidth * transform.value.scale;
+			const height = imgRef.value.offsetHeight * transform.value.scale;
+			const { left, top } = imgRef.value.getBoundingClientRect();
+			const isRotate = transform.value.rotate % 180 !== 0;
+			const fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
+			if (fixState) updateTransform({ ...fixState }, "dragRebound");
+		}
+	};
+	const onWheel = (event) => {
+		if (!visible || event.deltaY === 0) return;
+		const scaleRatio = Math.abs(event.deltaY / 100);
+		let ratio = BASE_SCALE_RATIO + Math.min(scaleRatio, WHEEL_MAX_SCALE_RATIO) * scaleStep.value;
+		if (event.deltaY > 0) ratio = BASE_SCALE_RATIO / ratio;
+		dispatchZoomChange(ratio, "wheel", event.clientX, event.clientY);
+	};
+	useEffect(() => {
+		let onTopMouseUpListener;
+		let onTopMouseMoveListener;
+		let onMouseUpListener;
+		let onMouseMoveListener;
+		if (movable) {
+			onMouseUpListener = addEventListenerWrap(window, "mouseup", onMouseUp, false);
+			onMouseMoveListener = addEventListenerWrap(window, "mousemove", onMouseMove, false);
+			try {
+				/* istanbul ignore next */
+				if (window.top !== window.self) {
+					onTopMouseUpListener = addEventListenerWrap(window.top, "mouseup", onMouseUp, false);
+					onTopMouseMoveListener = addEventListenerWrap(window.top, "mousemove", onMouseMove, false);
+				}
+			} catch (error) {
+				/* istanbul ignore next */
+				console.warn(`[rc-image] ${error}`);
+			}
+		}
+		return () => {
+			onMouseUpListener?.remove();
+			onMouseMoveListener?.remove();
+			/* istanbul ignore next */
+			onTopMouseUpListener?.remove();
+			/* istanbul ignore next */
+			onTopMouseMoveListener?.remove();
+		};
+	}, [
+		visible,
+		isMoving,
+		() => transform.value.x,
+		() => transform.value.y,
+		() => transform.value.rotate,
+		movable
+	]);
+	return {
+		isMoving,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		onWheel
+	};
+}
+
+//#endregion
+export { useMouseEvent as default };

package/dist/ImagePreview/hooks/useTouchEvent.d.ts

@@ -0,0 +1,12 @@
+import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from "./useImageTransform.js";
+import { Ref } from "vue";
+
+//#region src/ImagePreview/hooks/useTouchEvent.d.ts
+declare function useTouchEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, minScale: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+  isTouching: Ref<boolean, boolean>;
+  onTouchStart: (event: TouchEvent) => void;
+  onTouchMove: (event: TouchEvent) => void;
+  onTouchEnd: () => void;
+};
+//#endregion
+export { useTouchEvent as default };

package/dist/ImagePreview/hooks/useTouchEvent.js

@@ -0,0 +1,123 @@
+import addEventListenerWrap from "../utils/addEventListener.js";
+import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition.js";
+import { ref } from "vue";
+import { useEffect, useState } from "@gx-design-vue/pro-hooks";
+
+//#region src/ImagePreview/hooks/useTouchEvent.ts
+function getDistance(a, b) {
+	const x = a.x - b.x;
+	const y = a.y - b.y;
+	return Math.hypot(x, y);
+}
+function getCenter(oldPoint1, oldPoint2, newPoint1, newPoint2) {
+	const distance1 = getDistance(oldPoint1, newPoint1);
+	const distance2 = getDistance(oldPoint2, newPoint2);
+	if (distance1 === 0 && distance2 === 0) return [oldPoint1.x, oldPoint1.y];
+	const ratio = distance1 / (distance1 + distance2);
+	return [oldPoint1.x + ratio * (oldPoint2.x - oldPoint1.x), oldPoint1.y + ratio * (oldPoint2.y - oldPoint1.y)];
+}
+function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange) {
+	const [isTouching, setIsTouching] = useState(false);
+	const touchPointInfo = ref({
+		point1: {
+			x: 0,
+			y: 0
+		},
+		point2: {
+			x: 0,
+			y: 0
+		},
+		eventType: "none"
+	});
+	const updateTouchPointInfo = (values) => {
+		touchPointInfo.value = {
+			...touchPointInfo.value,
+			...values
+		};
+	};
+	const onTouchStart = (event) => {
+		if (!movable.value) return;
+		event.stopPropagation();
+		setIsTouching(true);
+		const { touches = [] } = event;
+		if (touches.length > 1) updateTouchPointInfo({
+			point1: {
+				x: touches[0].clientX,
+				y: touches[0].clientY
+			},
+			point2: {
+				x: touches[1].clientX,
+				y: touches[1].clientY
+			},
+			eventType: "touchZoom"
+		});
+		else updateTouchPointInfo({
+			point1: {
+				x: touches[0].clientX - transform.value.x,
+				y: touches[0].clientY - transform.value.y
+			},
+			eventType: "move"
+		});
+	};
+	const onTouchMove = (event) => {
+		const { touches = [] } = event;
+		const { point1, point2, eventType } = touchPointInfo.value;
+		if (touches.length > 1 && eventType === "touchZoom") {
+			const newPoint1 = {
+				x: touches[0].clientX,
+				y: touches[0].clientY
+			};
+			const newPoint2 = {
+				x: touches[1].clientX,
+				y: touches[1].clientY
+			};
+			const [centerX, centerY] = getCenter(point1, point2, newPoint1, newPoint2);
+			dispatchZoomChange(getDistance(newPoint1, newPoint2) / getDistance(point1, point2), "touchZoom", centerX, centerY, true);
+			updateTouchPointInfo({
+				point1: newPoint1,
+				point2: newPoint2,
+				eventType: "touchZoom"
+			});
+		} else if (eventType === "move") {
+			updateTransform({
+				x: touches[0].clientX - point1.x,
+				y: touches[0].clientY - point1.y
+			}, "move");
+			updateTouchPointInfo({ eventType: "move" });
+		}
+	};
+	const onTouchEnd = () => {
+		if (!visible.value) return;
+		if (isTouching) setIsTouching(false);
+		updateTouchPointInfo({ eventType: "none" });
+		if (minScale.value > transform.value.scale)
+ /** When the scaling ratio is less than the minimum scaling ratio, reset the scaling ratio */
+		return updateTransform({
+			x: 0,
+			y: 0,
+			scale: minScale.value
+		}, "touchZoom");
+		const width = imgRef.value.offsetWidth * transform.value.scale;
+		const height = imgRef.value.offsetHeight * transform.value.scale;
+		const { left, top } = imgRef.value.getBoundingClientRect();
+		const isRotate = transform.value.rotate % 180 !== 0;
+		const fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
+		if (fixState) updateTransform({ ...fixState }, "dragRebound");
+	};
+	useEffect(() => {
+		let onTouchMoveListener;
+		if (visible.value && movable.value) onTouchMoveListener = addEventListenerWrap(window, "touchmove", (e) => e.preventDefault(), { passive: false });
+		return () => {
+			onTouchMoveListener?.remove();
+		};
+	}, [visible, movable]);
+	return {
+		isTouching,
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd
+	};
+}
+
+//#endregion
+export { useTouchEvent as default };

package/dist/ImagePreview/index.d.ts

@@ -0,0 +1,162 @@
+import { TransformAction, TransformType } from "./hooks/useImageTransform.js";
+import _default, { PreviewPropsIcons } from "./props.js";
+import * as vue6 from "vue";
+import { ExtractPropTypes, SlotsType } from "vue";
+import * as _gx_design_vue_pro_utils3 from "@gx-design-vue/pro-utils";
+import * as ant_design_vue_es__util_type0 from "ant-design-vue/es/_util/type";
+
+//#region src/ImagePreview/index.d.ts
+type ImagePreviewProps = Partial<ExtractPropTypes<typeof _default>>;
+declare const GImagePreview: vue6.DefineComponent<ExtractPropTypes<{
+  urls: {
+    type: vue6.PropType<string[]>;
+    default: () => any[];
+  };
+  open: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  scaleStep: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  minScale: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  maxScale: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  movable: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  disabled: vue6.PropType<boolean>;
+  zIndex: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  current: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  infinite: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  getContainer: {
+    type: vue6.PropType<string>;
+  };
+  onHideOnClickModal: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  countRender: vue6.PropType<_gx_design_vue_pro_utils3.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils3.CustomRender>>;
+  icons: {
+    type: vue6.PropType<PreviewPropsIcons>;
+    default: () => PreviewPropsIcons;
+  };
+  onTransform: vue6.PropType<(info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => void>;
+  onOpenChange: vue6.PropType<(val: boolean) => void>;
+  'onUpdate:open': vue6.PropType<(val: boolean) => void>;
+}>, () => ant_design_vue_es__util_type0.VueNode, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {
+  close: () => true;
+  transform: (_info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => true;
+  'update:open': (_val: boolean) => true;
+}, string, vue6.PublicProps, Readonly<ExtractPropTypes<{
+  urls: {
+    type: vue6.PropType<string[]>;
+    default: () => any[];
+  };
+  open: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  scaleStep: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  minScale: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  maxScale: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  movable: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  disabled: vue6.PropType<boolean>;
+  zIndex: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  current: {
+    type: vue6.PropType<number>;
+    default: number;
+  };
+  infinite: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  getContainer: {
+    type: vue6.PropType<string>;
+  };
+  onHideOnClickModal: {
+    type: vue6.PropType<boolean>;
+    default: boolean;
+  };
+  countRender: vue6.PropType<_gx_design_vue_pro_utils3.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils3.CustomRender>>;
+  icons: {
+    type: vue6.PropType<PreviewPropsIcons>;
+    default: () => PreviewPropsIcons;
+  };
+  onTransform: vue6.PropType<(info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => void>;
+  onOpenChange: vue6.PropType<(val: boolean) => void>;
+  'onUpdate:open': vue6.PropType<(val: boolean) => void>;
+}>> & Readonly<{
+  onClose?: () => any;
+  onTransform?: (_info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => any;
+  "onUpdate:open"?: (_val: boolean) => any;
+}>, {
+  zIndex: number;
+  icons: PreviewPropsIcons;
+  infinite: boolean;
+  current: number;
+  open: boolean;
+  urls: string[];
+  scaleStep: number;
+  minScale: number;
+  maxScale: number;
+  movable: boolean;
+  onHideOnClickModal: boolean;
+}, SlotsType<{
+  close: () => void;
+  left: () => void;
+  right: () => void;
+  countRender: () => void;
+  rotateRight: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  flipX: () => void;
+  flipY: () => void;
+  rotateLeft: () => void;
+  placeholder: () => void;
+}>, {}, {}, string, vue6.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ImagePreviewProps, GImagePreview as default };