@v-c/image 1.0.9 → 1.0.10

package/dist/Image.js

@@ -1,14 +1,15 @@
-import { useMergedState } from "./util/dist/hooks/useMergedState.js";
-import { pickAttrs } from "./util/dist/pickAttrs.js";
-import { getAttrStyleAndClass, getStylePxValue } from "./util/dist/props-util/index.js";
 import { COMMON_PROPS } from "./common.js";
 import { usePreviewGroupContext } from "./context.js";
 import useRegisterImage from "./hooks/useRegisterImage.js";
 import useStatus from "./hooks/useStatus.js";
-import Preview_default from "./Preview/index.js";
+import Preview from "./Preview/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
-var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+import useMergedState from "@v-c/util/dist/hooks/useMergedState";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+import { getAttrStyleAndClass, getStylePxValue } from "@v-c/util/dist/props-util";
+//#region src/Image.tsx
+var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const groupContext = usePreviewGroupContext();
 	const prefixCls = computed(() => props.prefixCls ?? "vc-image");
 	const previewPrefixCls = computed(() => props.previewPrefixCls ?? `${prefixCls.value}-preview`);
@@ -71,7 +72,7 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 	};
 	const onPreviewKeyDown = (event) => {
 		props.onKeydown?.(event);
-		if (!canPreview) return;
+		if (!canPreview.value) return;
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
 			const rect = event.target.getBoundingClientRect();
@@ -114,9 +115,9 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 		return createVNode(Fragment, null, [createVNode("div", mergeProps(pickAttrs(restAttrs, false), {
 			"class": rootCls,
 			"onClick": canPreview.value ? onPreview : onInternalClick,
-			"role": canPreview ? "button" : restAttrs.role,
-			"tabindex": canPreview && restAttrs.tabIndex == null ? 0 : restAttrs.tabIndex,
-			"aria-label": canPreview ? restAttrs["aria-label"] ?? restAttrs.alt : restAttrs["aria-label"],
+			"role": canPreview.value ? "button" : restAttrs.role,
+			"tabindex": canPreview.value && restAttrs.tabIndex == null ? 0 : restAttrs.tabIndex,
+			"aria-label": canPreview.value ? restAttrs["aria-label"] ?? restAttrs.alt : restAttrs["aria-label"],
 			"onKeydown": onPreviewKeyDown,
 			"style": rootStyle
 		}), [
@@ -138,7 +139,7 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 				"class": clsx(`${prefixCls.value}-cover`, props.classNames?.cover, `${prefixCls.value}-cover-${coverPlacement}`),
 				"style": props.styles?.cover
 			}, [coverNode])
-		]), !groupContext && canPreview.value && createVNode(Preview_default, mergeProps({
+		]), !groupContext && canPreview.value && createVNode(Preview, mergeProps({
 			"aria-hidden": !isShowPreview.value,
 			"open": isShowPreview.value,
 			"prefixCls": previewPrefixCls.value,
@@ -253,4 +254,5 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 	name: "Image",
 	inheritAttrs: false
 });
-export { Image_default as default };
+//#endregion
+export { Image as default };

package/dist/Preview/CloseBtn.d.ts

@@ -1,8 +1,11 @@
 import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
 export interface CloseBtnProps {
     prefixCls: string;
     icon?: VueNode;
     onClick: (e: MouseEvent) => void;
+    className?: string;
+    style?: CSSProperties;
 }
 declare const CloseBtn: import('vue').DefineSetupFnComponent<CloseBtnProps, {}, {}, CloseBtnProps & {}, import('vue').PublicProps>;
 export default CloseBtn;

package/dist/Preview/CloseBtn.js

@@ -1,9 +1,12 @@
 import { createVNode, defineComponent } from "vue";
-var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
+import { clsx } from "@v-c/util";
+//#region src/Preview/CloseBtn.tsx
+var CloseBtn = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
-		const { prefixCls, icon, onClick } = props;
+		const { prefixCls, icon, onClick, className, style } = props;
 		return createVNode("button", {
-			"class": `${prefixCls}-close`,
+			"class": clsx(`${prefixCls}-close`, className),
+			"style": style,
 			"type": "button",
 			"onClick": onClick
 		}, [icon]);
@@ -12,8 +15,7 @@ var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		icon: {
 			type: [
@@ -30,10 +32,20 @@ var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
 		},
 		onClick: {
 			type: Function,
-			required: true,
+			required: true
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
 			default: void 0
 		}
 	},
 	name: "ImagePreviewCloseBtn"
 });
-export { CloseBtn_default as default };
+//#endregion
+export { CloseBtn as default };

package/dist/Preview/Footer.js

@@ -1,6 +1,7 @@
 import { createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var Footer_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/Preview/Footer.tsx
+var Footer = /* @__PURE__ */ defineComponent((props) => {
 	const renderOperation = ({ type, disabled, onClick, icon }) => {
 		const actionCls = `${props.prefixCls}-actions-action`;
 		return createVNode("button", {
@@ -108,13 +109,11 @@ var Footer_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		showProgress: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		countRender: {
 			type: Function,
@@ -128,104 +127,83 @@ var Footer_default = /* @__PURE__ */ defineComponent((props) => {
 		},
 		current: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		count: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		showSwitch: {
 			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		icons: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		icons: { required: true },
 		scale: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		minScale: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		maxScale: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		image: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		transform: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		classNames: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		styles: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onActive: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFlipY: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFlipX: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onRotateLeft: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onRotateRight: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onZoomOut: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onZoomIn: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onClose: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onReset: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "ImagePreviewFooter"
 });
-export { Footer_default as default };
+//#endregion
+export { Footer as default };

package/dist/Preview/PrevNext.js

@@ -1,6 +1,7 @@
 import { Fragment, createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var PrevNext_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/Preview/PrevNext.tsx
+var PrevNext = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
 		const { prefixCls, onActive, current, count, icons } = props;
 		const switchCls = `${prefixCls}-switch`;
@@ -26,30 +27,26 @@ var PrevNext_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onActive: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		current: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		count: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		icons: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "ImagePreviewPrevNext"
 });
-export { PrevNext_default as default };
+//#endregion
+export { PrevNext as default };

package/dist/Preview/index.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties } from 'vue';
 import { TransformAction, TransformType } from '../hooks/useImageTransform';
 import { ImgInfo } from '../Image';
 import { FooterSemanticName } from './Footer';
-export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
+export type PreviewSemanticName = 'root' | 'mask' | 'body' | 'close' | FooterSemanticName;
 export interface OperationIcons {
     rotateLeft?: VueNode;
     rotateRight?: VueNode;
@@ -60,7 +60,9 @@ export interface InternalPreviewConfig {
     open?: boolean;
     getContainer?: PortalProps['getContainer'];
     zIndex?: number;
+    maskClosable?: boolean;
     afterOpenChange?: (open: boolean) => void;
+    focusTrap?: boolean;
     movable?: boolean;
     icons?: OperationIcons;
     closeIcon?: VueNode | boolean | null;

package/dist/Preview/index.js

@@ -1,22 +1,24 @@
 import { usePreviewGroupContext } from "../context.js";
 import useStatus from "../hooks/useStatus.js";
-import { canUseDom } from "../util/dist/Dom/canUseDom.js";
-import { useLockFocus } from "../util/dist/Dom/focus.js";
-import { KeyCodeStr } from "../util/dist/KeyCode.js";
-import { getTransitionProps } from "../util/dist/utils/transition.js";
 import useImageTransform from "../hooks/useImageTransform.js";
-import { BASE_SCALE_RATIO } from "../previewConfig.js";
+import "../previewConfig.js";
 import useMouseEvent from "../hooks/useMouseEvent.js";
 import useTouchEvent from "../hooks/useTouchEvent.js";
-import CloseBtn_default from "./CloseBtn.js";
-import Footer_default from "./Footer.js";
-import PrevNext_default from "./PrevNext.js";
+import CloseBtn from "./CloseBtn.js";
+import Footer from "./Footer.js";
+import PrevNext from "./PrevNext.js";
 import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch, watchEffect } from "vue";
 import { clsx } from "@v-c/util";
 import Portal from "@v-c/portal";
-var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+import { useLockFocus } from "@v-c/util/dist/Dom/focus";
+import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+//#region src/Preview/index.tsx
+var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const imgEl = shallowRef();
 	const wrapperRef = shallowRef(null);
+	const triggerRef = shallowRef(null);
 	const groupContext = usePreviewGroupContext();
 	const showLeftOrRightSwitches = computed(() => !!groupContext && (props.count ?? 1) > 1);
 	const showOperationsProgress = computed(() => !!groupContext && (props.count ?? 1) >= 1);
@@ -33,6 +35,9 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	watch(() => props.open, (open) => {
 		if (!open) resetTransform("close");
 	});
+	watch(() => props.open, (open) => {
+		if (open && canUseDom()) triggerRef.value = document.activeElement;
+	});
 	const onDoubleClick = (event) => {
 		if (!props.open) return;
 		if (transform.value.scale !== 1) updateTransform({
@@ -76,10 +81,6 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	const onKeyDown = (event) => {
 		if (!props.open) return;
 		const { key } = event;
-		if (key === KeyCodeStr.Escape) {
-			props.onClose?.();
-			return;
-		}
 		if (showLeftOrRightSwitches.value) {
 			if (key === KeyCodeStr.ArrowLeft) onActive(-1);
 			else if (key === KeyCodeStr.ArrowRight) onActive(1);
@@ -104,6 +105,8 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		if (!nextVisible) {
 			animatedVisible.value = false;
 			portalRender.value = false;
+			triggerRef.value?.focus?.();
+			triggerRef.value = null;
 		}
 		props.afterOpenChange?.(nextVisible);
 	};
@@ -114,9 +117,10 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		src: computed(() => props.src),
 		fallback: computed(() => props.fallback)
 	});
-	useLockFocus(portalRender, () => wrapperRef.value);
+	const focusTrap = computed(() => props.focusTrap ?? true);
+	useLockFocus(computed(() => !!(focusTrap.value && props.open && portalRender.value)), () => wrapperRef.value);
 	return () => {
-		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {}, movable = true } = props;
+		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {}, movable = true, maskClosable = true } = props;
 		const bodyStyle = { ...styles.body ?? {} };
 		if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
 		const image = {
@@ -160,7 +164,10 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		return createVNode(Portal, {
 			"open": open || animatedVisible.value || portalRender.value,
 			"getContainer": getContainer,
-			"autoLock": open || animatedVisible.value
+			"autoLock": open || animatedVisible.value,
+			"onEsc": ({ top }) => {
+				if (top) props.onClose?.();
+			}
 		}, { default: () => [createVNode(Transition, mergeProps(transitionProps, {
 			"onAfterEnter": () => onVisibleChanged(true),
 			"onAfterLeave": () => onVisibleChanged(false)
@@ -178,7 +185,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 				createVNode("div", {
 					"class": clsx(`${prefixCls}-mask`, classNames.mask),
 					"style": styles.mask,
-					"onClick": () => props.onClose?.()
+					"onClick": maskClosable ? () => props.onClose?.() : void 0
 				}, null),
 				createVNode("div", {
 					"class": clsx(`${prefixCls}-body`, classNames.body),
@@ -188,19 +195,21 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 					image,
 					...groupContext ? { current } : {}
 				}) : imgNode]),
-				closeIcon !== false && closeIcon !== null && createVNode(CloseBtn_default, {
+				closeIcon !== false && closeIcon !== null && createVNode(CloseBtn, {
 					"prefixCls": prefixCls,
 					"icon": closeIcon === true ? icons.close : closeIcon || icons.close,
-					"onClick": () => props.onClose?.()
+					"onClick": () => props.onClose?.(),
+					"className": classNames.close,
+					"style": styles.close
 				}, null),
-				showLeftOrRightSwitches.value && createVNode(PrevNext_default, {
+				showLeftOrRightSwitches.value && createVNode(PrevNext, {
 					"prefixCls": prefixCls,
 					"current": current,
 					"count": count,
 					"icons": icons,
 					"onActive": onActive
 				}, null),
-				createVNode(Footer_default, {
+				createVNode(Footer, {
 					"prefixCls": prefixCls,
 					"showProgress": showOperationsProgress.value,
 					"current": current,
@@ -233,8 +242,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	props: /* @__PURE__ */ mergeDefaults({
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		classNames: {
 			type: Object,
@@ -293,8 +301,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		},
 		mousePosition: {
 			type: [null, Object],
-			required: true,
-			default: void 0
+			required: true
 		},
 		rootClassName: {
 			type: String,
@@ -345,11 +352,21 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 			required: false,
 			default: void 0
 		},
+		maskClosable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		afterOpenChange: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		movable: {
 			type: Boolean,
 			required: false,
@@ -406,4 +423,5 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	name: "ImagePreview",
 	inheritAttrs: false
 });
-export { Preview_default as default };
+//#endregion
+export { Preview as default };

package/dist/PreviewGroup.js

@@ -1,9 +1,10 @@
-import { useMergedState } from "./util/dist/hooks/useMergedState.js";
 import { usePreviewGroupProvider } from "./context.js";
-import Preview_default from "./Preview/index.js";
+import Preview from "./Preview/index.js";
 import usePreviewItems from "./hooks/usePreviewItems.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, toRef, watch } from "vue";
-var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+import useMergedState from "@v-c/util/dist/hooks/useMergedState";
+//#region src/PreviewGroup.tsx
+var PreviewGroup = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
 	const mergedPreviewConfig = computed(() => {
 		if (props.preview && typeof props.preview === "object") return props.preview;
 		return {};
@@ -54,7 +55,7 @@ var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit
 		const { src, ...imgCommonProps } = itemsList[current.value]?.data || {};
 		const countRender = slots.countRender ? (currentNum, total) => slots.countRender?.(currentNum, total) : mergedPreviewConfig.value.countRender;
 		const { open: _open, current: _current, onOpenChange: _onOpenChange, onChange: _onChange, ...restPreviewConfig } = mergedPreviewConfig.value;
-		return createVNode(Fragment, null, [slots.default?.(), createVNode(Preview_default, mergeProps({
+		return createVNode(Fragment, null, [slots.default?.(), createVNode(Preview, mergeProps({
 			"aria-hidden": !isShowPreview.value,
 			"open": isShowPreview.value,
 			"prefixCls": props.previewPrefixCls,
@@ -130,4 +131,5 @@ var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit
 	inheritAttrs: false,
 	emits: ["change"]
 });
-export { PreviewGroup_default as default };
+//#endregion
+export { PreviewGroup as default };

package/dist/common.js

@@ -1,4 +1,5 @@
-const COMMON_PROPS = [
+//#region src/common.ts
+var COMMON_PROPS = [
 	"crossOrigin",
 	"decoding",
 	"draggable",
@@ -10,4 +11,5 @@ const COMMON_PROPS = [
 	"alt",
 	"fetchPriority"
 ];
+//#endregion
 export { COMMON_PROPS };

package/dist/context.js

@@ -1,4 +1,5 @@
 import { inject, provide } from "vue";
+//#region src/context.ts
 var PreviewGroupContextKey = Symbol("PreviewGroupContext");
 function usePreviewGroupContext() {
 	return inject(PreviewGroupContextKey, null);
@@ -6,4 +7,5 @@ function usePreviewGroupContext() {
 function usePreviewGroupProvider(value) {
 	provide(PreviewGroupContextKey, value);
 }
+//#endregion
 export { usePreviewGroupContext, usePreviewGroupProvider };

package/dist/getFixScaleEleTransPosition.js

@@ -1,4 +1,5 @@
 import { getClientSize } from "./util.js";
+//#region src/getFixScaleEleTransPosition.ts
 function fixPoint(key, start, width, clientWidth) {
 	const startAddWidth = start + width;
 	const offsetStart = (width - clientWidth) / 2;
@@ -8,6 +9,18 @@ function fixPoint(key, start, width, clientWidth) {
 	} 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 } = getClientSize();
 	let fixPos = null;
@@ -21,4 +34,5 @@ function getFixScaleEleTransPosition(width, height, left, top) {
 	};
 	return fixPos;
 }
+//#endregion
 export { getFixScaleEleTransPosition as default };

package/dist/hooks/useImageTransform.js

@@ -1,7 +1,8 @@
 import { getClientSize } from "../util.js";
-import { isEqual_default } from "../util/dist/isEqual.js";
-import { raf_default } from "../util/dist/raf.js";
 import { ref, shallowRef } from "vue";
+import isEqual from "@v-c/util/dist/isEqual";
+import raf from "@v-c/util/dist/raf";
+//#region src/hooks/useImageTransform.ts
 var initialTransform = {
 	x: 0,
 	y: 0,
@@ -17,15 +18,16 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 	const resetTransform = (action) => {
 		const oldTransform = transform.value;
 		transform.value = initialTransform;
-		if (!isEqual_default(initialTransform, oldTransform)) onTransform?.({
+		if (!isEqual(initialTransform, oldTransform)) onTransform?.({
 			transform: initialTransform,
 			action
 		});
 	};
+	/** Direct update transform */
 	const updateTransform = (newTransform, action) => {
 		if (frame.value === null) {
 			queue.value = [];
-			frame.value = raf_default(() => {
+			frame.value = raf(() => {
 				let memoState = transform.value;
 				queue.value.forEach((queueState) => {
 					memoState = {
@@ -46,6 +48,7 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 			...newTransform
 		});
 	};
+	/** Scale according to the position of centerX and centerY */
 	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
 		if (!imgRef.value) return;
 		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.value;
@@ -61,15 +64,23 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 			newScale = isTouch ? newScale : _minScale;
 			newRatio = newScale / _transform.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.x - offsetLeft);
 		const diffOffsetTop = diffRatio * (mergedCenterY - _transform.y - offsetTop);
+		/** Final positioning */
 		let newX = _transform.x - (diffOffsetLeft - diffImgX);
 		let newY = _transform.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;
@@ -92,4 +103,5 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 		dispatchZoomChange
 	};
 }
+//#endregion
 export { useImageTransform as default };