react-screenshots 0.6.0 → 0.6.1

package/lib/Screenshots/ScreenshotsOption/index.js

@@ -17,7 +17,7 @@ const Screenshots_ScreenshotsOption = /*#__PURE__*/ memo(function({ open, conten
     const [position, setPosition] = useState(null);
     const [offsetX, setOffsetX] = useState(0);
     const getPopoverEl = ()=>{
-        if (!popoverRef.current) popoverRef.current = document.createElement('div');
+        if (!popoverRef.current) popoverRef.current = document.createElement("div");
         return popoverRef.current;
     };
     useEffect(()=>{
@@ -71,7 +71,7 @@ const Screenshots_ScreenshotsOption = /*#__PURE__*/ memo(function({ open, conten
                 ref: contentRef,
                 className: "screenshots-option",
                 style: {
-                    visibility: position ? 'visible' : 'hidden',
+                    visibility: position ? "visible" : "hidden",
                     transform: `translate(${position?.x ?? 0}px, ${position?.y ?? 0}px)`
                 },
                 "data-placement": placement,

package/lib/Screenshots/ScreenshotsSize/index.js

@@ -16,7 +16,7 @@ const Screenshots_ScreenshotsSize = /*#__PURE__*/ memo(function({ value, onChang
             if (size === value) classNames.push('screenshots-size-active');
             return /*#__PURE__*/ jsx("div", {
                 className: classNames.join(' '),
-                onClick: ()=>onChange && onChange(size),
+                onClick: ()=>onChange?.(size),
                 children: /*#__PURE__*/ jsx("div", {
                     className: "screenshots-size-pointer",
                     style: {

package/lib/Screenshots/ScreenshotsSizeColor/index.d.ts

@@ -1,4 +1,4 @@
-import "./index.less";
+import './index.less';
 export interface SizeColorProps {
     size: number;
     color: string;

package/lib/Screenshots/ScreenshotsSizeColor/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
-import ScreenshotsSize from "../ScreenshotsSize/index.js";
 import ScreenshotsColor from "../ScreenshotsColor/index.js";
+import ScreenshotsSize from "../ScreenshotsSize/index.js";
 import "./index.css";
 const Screenshots_ScreenshotsSizeColor = /*#__PURE__*/ memo(function({ size, color, onSizeChange, onColorChange }) {
     return /*#__PURE__*/ jsxs("div", {

package/lib/Screenshots/ScreenshotsTextarea/index.js

@@ -47,8 +47,8 @@ const Screenshots_ScreenshotsTextarea = /*#__PURE__*/ memo(function({ x, y, maxW
             transform: `translate(${x}px, ${y}px)`
         },
         value: value,
-        onChange: (e)=>onChange && onChange(e.target.value),
-        onBlur: (e)=>onBlur && onBlur(e)
+        onChange: (e)=>onChange?.(e.target.value),
+        onBlur: (e)=>onBlur?.(e)
     }), getPopoverEl());
 });
 export { Screenshots_ScreenshotsTextarea as default };

package/lib/Screenshots/composeImage.d.ts

@@ -6,5 +6,5 @@ interface ComposeImageOpts {
     history: History;
     bounds: Bounds;
 }
-export default function composeImage({ image, width, height, history, bounds }: ComposeImageOpts): Promise<Blob>;
+export default function composeImage({ image, width, height, history, bounds, }: ComposeImageOpts): Promise<Blob>;
 export {};

package/lib/Screenshots/exports.d.ts

@@ -1,4 +1,4 @@
+export type { ScreenshotsProps } from './';
+export { default } from './';
 export type { Bounds } from './types';
 export type { Lang } from './zh_CN';
-export { default } from './';
-export type { ScreenshotsProps } from './';

package/lib/Screenshots/hooks/useCanvasPointerDown.d.ts

@@ -0,0 +1 @@
+export default function useCanvasPointerDown(onPointerDown: (e: PointerEvent) => unknown): void;

package/lib/Screenshots/hooks/useCanvasPointerDown.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useEmitter from "./useEmitter.js";
+function useCanvasPointerDown(onPointerDown) {
+    const emitter = useEmitter();
+    useEffect(()=>{
+        emitter.on('pointerdown', onPointerDown);
+        return ()=>{
+            emitter.off('pointerdown', onPointerDown);
+        };
+    }, [
+        onPointerDown,
+        emitter
+    ]);
+}
+export { useCanvasPointerDown as default };

package/lib/Screenshots/hooks/useCanvasPointerMove.d.ts

@@ -0,0 +1 @@
+export default function useCanvasPointerMove(onPointerMove: (e: PointerEvent) => unknown): void;

package/lib/Screenshots/hooks/useCanvasPointerMove.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useEmitter from "./useEmitter.js";
+function useCanvasPointerMove(onPointerMove) {
+    const emitter = useEmitter();
+    useEffect(()=>{
+        emitter.on('pointermove', onPointerMove);
+        return ()=>{
+            emitter.off('pointermove', onPointerMove);
+        };
+    }, [
+        onPointerMove,
+        emitter
+    ]);
+}
+export { useCanvasPointerMove as default };

package/lib/Screenshots/hooks/useCanvasPointerUp.d.ts

@@ -0,0 +1 @@
+export default function useCanvasPointerUp(onPointerUp: (e: PointerEvent) => unknown): void;

package/lib/Screenshots/hooks/useCanvasPointerUp.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useEmitter from "./useEmitter.js";
+function useCanvasPointerUp(onPointerUp) {
+    const emitter = useEmitter();
+    useEffect(()=>{
+        emitter.on("pointerup", onPointerUp);
+        return ()=>{
+            emitter.off("pointerup", onPointerUp);
+        };
+    }, [
+        onPointerUp,
+        emitter
+    ]);
+}
+export { useCanvasPointerUp as default };

package/lib/Screenshots/hooks/useDrawSelect.d.ts

@@ -1,2 +1,2 @@
 import type { HistoryItemSource } from '../types';
-export default function useDrawSelect(onDrawSelect: (action: HistoryItemSource<unknown, unknown>, e: MouseEvent) => unknown): void;
+export default function useDrawSelect(onDrawSelect: (action: HistoryItemSource<unknown, unknown>, e: PointerEvent) => unknown): void;

package/lib/Screenshots/hooks/useDrawSelect.js

@@ -1,15 +1,15 @@
 import { useEffect } from "react";
-import useEmiter from "./useEmiter.js";
+import useEmitter from "./useEmitter.js";
 function useDrawSelect(onDrawSelect) {
-    const emiter = useEmiter();
+    const emitter = useEmitter();
     useEffect(()=>{
-        emiter.on('drawselect', onDrawSelect);
+        emitter.on('drawselect', onDrawSelect);
         return ()=>{
-            emiter.off('drawselect', onDrawSelect);
+            emitter.off('drawselect', onDrawSelect);
         };
     }, [
         onDrawSelect,
-        emiter
+        emitter
     ]);
 }
 export { useDrawSelect as default };

package/lib/Screenshots/hooks/useEmitter.d.ts

@@ -0,0 +1,8 @@
+import type { EmitterListener } from '../types';
+export interface EmitterDispatcher {
+    on: (event: string, listener: EmitterListener) => void;
+    off: (event: string, listener: EmitterListener) => void;
+    emit: (event: string, ...args: unknown[]) => void;
+    reset: () => void;
+}
+export default function useEmitter(): EmitterDispatcher;

package/lib/Screenshots/hooks/useEmitter.js

@@ -0,0 +1,43 @@
+import { useCallback } from "react";
+import useStore from "./useStore.js";
+function useEmitter() {
+    const { emitterRef } = useStore();
+    const on = useCallback((event, listener)=>{
+        const emitter = emitterRef.current;
+        if (Array.isArray(emitter[event])) emitter[event].push(listener);
+        else emitter[event] = [
+            listener
+        ];
+    }, [
+        emitterRef
+    ]);
+    const off = useCallback((event, listener)=>{
+        const emitter = emitterRef.current;
+        if (Array.isArray(emitter[event])) {
+            const index = emitter[event].indexOf(listener);
+            if (-1 !== index) emitter[event].splice(index, 1);
+        }
+    }, [
+        emitterRef
+    ]);
+    const emit = useCallback((event, ...args)=>{
+        const emitter = emitterRef.current;
+        if (Array.isArray(emitter[event])) emitter[event].forEach((listener)=>{
+            listener(...args);
+        });
+    }, [
+        emitterRef
+    ]);
+    const reset = useCallback(()=>{
+        emitterRef.current = {};
+    }, [
+        emitterRef
+    ]);
+    return {
+        on,
+        off,
+        emit,
+        reset
+    };
+}
+export { useEmitter as default };

package/lib/Screenshots/hooks/useReset.js

@@ -1,23 +1,23 @@
 import { useCallback } from "react";
 import useBounds from "./useBounds.js";
 import useCursor from "./useCursor.js";
-import useEmiter from "./useEmiter.js";
+import useEmitter from "./useEmitter.js";
 import useHistory from "./useHistory.js";
 import useOperation from "./useOperation.js";
 function useReset() {
-    const emiter = useEmiter();
+    const emitter = useEmitter();
     const [, boundsDispatcher] = useBounds();
     const [, cursorDispatcher] = useCursor();
     const [, historyDispatcher] = useHistory();
     const [, operatioDispatcher] = useOperation();
     const reset = useCallback(()=>{
-        emiter.reset();
+        emitter.reset();
         historyDispatcher.reset();
         boundsDispatcher.reset();
         cursorDispatcher.reset();
         operatioDispatcher.reset();
     }, [
-        emiter,
+        emitter,
         historyDispatcher,
         boundsDispatcher,
         cursorDispatcher,

package/lib/Screenshots/index.js

@@ -10,9 +10,11 @@ import ScreenshotsOperations from "./ScreenshotsOperations/index.js";
 import useGetLoadedImage from "./useGetLoadedImage.js";
 import zh_CN from "./zh_CN.js";
 function Screenshots({ url, width, height, lang, className, ...props }) {
+    const propsRef = useRef(props);
+    propsRef.current = props;
     const image = useGetLoadedImage(url);
     const canvasContextRef = useRef(null);
-    const emiterRef = useRef({});
+    const emitterRef = useRef({});
     const [history, setHistory] = useState({
         index: -1,
         stack: []
@@ -29,7 +31,7 @@ function Screenshots({ url, width, height, lang, className, ...props }) {
             ...zh_CN,
             ...lang
         },
-        emiterRef,
+        emitterRef,
         canvasContextRef,
         history,
         bounds,
@@ -37,11 +39,9 @@ function Screenshots({ url, width, height, lang, className, ...props }) {
         operation
     };
     const call = useCallback((funcName, ...args)=>{
-        const func = props[funcName];
+        const func = propsRef.current[funcName];
         if ('function' == typeof func) func(...args);
-    }, [
-        props
-    ]);
+    }, []);
     const dispatcher = {
         call,
         setHistory,
@@ -53,8 +53,8 @@ function Screenshots({ url, width, height, lang, className, ...props }) {
         'screenshots'
     ];
     if (className) classNames.push(className);
-    const reset = ()=>{
-        emiterRef.current = {};
+    const reset = useCallback(()=>{
+        emitterRef.current = {};
         setHistory({
             index: -1,
             stack: []
@@ -62,7 +62,7 @@ function Screenshots({ url, width, height, lang, className, ...props }) {
         setBounds(null);
         setCursor('move');
         setOperation(void 0);
-    };
+    }, []);
     const onDoubleClick = useCallback(async (e)=>{
         if (0 !== e.button || !image) return;
         if (bounds && canvasContextRef.current) composeImage({
@@ -99,7 +99,8 @@ function Screenshots({ url, width, height, lang, className, ...props }) {
         bounds,
         width,
         height,
-        call
+        call,
+        reset
     ]);
     const onContextMenu = useCallback((e)=>{
         if (2 !== e.button) return;
@@ -107,7 +108,8 @@ function Screenshots({ url, width, height, lang, className, ...props }) {
         call('onCancel');
         reset();
     }, [
-        call
+        call,
+        reset
     ]);
     useLayoutEffect(()=>{
         reset();

package/lib/Screenshots/operations/Arrow/draw.d.ts

@@ -1,5 +1,5 @@
-import type { ArrowData, ArrowEditData } from '.';
 import type { HistoryItemSource } from '../../types';
+import type { ArrowData, ArrowEditData } from '.';
 export declare function getEditedArrowData(action: HistoryItemSource<ArrowData, ArrowEditData>): {
     x1: number;
     x2: number;

package/lib/Screenshots/operations/Arrow/draw.js

@@ -1,5 +1,5 @@
-import { ArrowEditType } from "./index.js";
 import { drawDragCircle } from "../utils.js";
+import { ArrowEditType } from "./index.js";
 function getEditedArrowData(action) {
     let { x1, y1, x2, y2 } = action.data;
     action.editHistory.forEach(({ data })=>{

package/lib/Screenshots/operations/Arrow/index.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useCanvasPointerDown from "../../hooks/useCanvasPointerDown.js";
+import useCanvasPointerMove from "../../hooks/useCanvasPointerMove.js";
+import useCanvasPointerUp from "../../hooks/useCanvasPointerUp.js";
+import useCursor from "../../hooks/useCursor.js";
+import useDrawSelect from "../../hooks/useDrawSelect.js";
+import useHistory from "../../hooks/useHistory.js";
+import useLang from "../../hooks/useLang.js";
+import useOperation from "../../hooks/useOperation.js";
 import ScreenshotsButton from "../../ScreenshotsButton/index.js";
 import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/index.js";
-import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
-import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
-import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
 import { HistoryItemType } from "../../types.js";
-import useCursor from "../../hooks/useCursor.js";
-import useOperation from "../../hooks/useOperation.js";
-import useHistory from "../../hooks/useHistory.js";
-import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
 import { isHit, isHitCircle } from "../utils.js";
-import useDrawSelect from "../../hooks/useDrawSelect.js";
 import draw, { getEditedArrowData } from "./draw.js";
-import useLang from "../../hooks/useLang.js";
 var Arrow_ArrowEditType = /*#__PURE__*/ function(ArrowEditType) {
     ArrowEditType[ArrowEditType["Move"] = 0] = "Move";
     ArrowEditType[ArrowEditType["MoveStart"] = 1] = "MoveStart";
@@ -78,7 +78,7 @@ function Arrow() {
         selectArrow,
         historyDispatcher
     ]);
-    const onMousedown = useCallback((e)=>{
+    const onPointerDown = useCallback((e)=>{
         if (!checked || arrowRef.current || !canvasContextRef.current) return;
         const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
         arrowRef.current = {
@@ -102,7 +102,7 @@ function Arrow() {
         size,
         canvasContextRef
     ]);
-    const onMousemove = useCallback((e)=>{
+    const onPointerMove = useCallback((e)=>{
         if (!checked || !canvasContextRef.current) return;
         if (arrowEditRef.current) {
             arrowEditRef.current.data.x2 = e.clientX;
@@ -124,7 +124,7 @@ function Arrow() {
         canvasContextRef,
         historyDispatcher
     ]);
-    const onMouseup = useCallback(()=>{
+    const onPointerUp = useCallback(()=>{
         if (!checked) return;
         if (arrowRef.current) historyDispatcher.clearSelect();
         arrowRef.current = null;
@@ -134,9 +134,9 @@ function Arrow() {
         historyDispatcher
     ]);
     useDrawSelect(onDrawSelect);
-    useCanvasMousedown(onMousedown);
-    useCanvasMousemove(onMousemove);
-    useCanvasMouseup(onMouseup);
+    useCanvasPointerDown(onPointerDown);
+    useCanvasPointerMove(onPointerMove);
+    useCanvasPointerUp(onPointerUp);
     return /*#__PURE__*/ jsx(ScreenshotsButton, {
         title: lang.operation_arrow_title,
         icon: "icon-arrow",

package/lib/Screenshots/operations/Brush/draw.d.ts

@@ -1,3 +1,3 @@
-import type { BrushData, BrushEditData } from '.';
 import type { HistoryItemSource } from '../../types';
+import type { BrushData, BrushEditData } from '.';
 export default function draw(ctx: CanvasRenderingContext2D, action: HistoryItemSource<BrushData, BrushEditData>): void;

package/lib/Screenshots/operations/Brush/index.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
-import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
-import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
-import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
-import ScreenshotsButton from "../../ScreenshotsButton/index.js";
-import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/index.js";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useCanvasPointerDown from "../../hooks/useCanvasPointerDown.js";
+import useCanvasPointerMove from "../../hooks/useCanvasPointerMove.js";
+import useCanvasPointerUp from "../../hooks/useCanvasPointerUp.js";
 import useCursor from "../../hooks/useCursor.js";
-import useOperation from "../../hooks/useOperation.js";
+import useDrawSelect from "../../hooks/useDrawSelect.js";
 import useHistory from "../../hooks/useHistory.js";
-import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useLang from "../../hooks/useLang.js";
+import useOperation from "../../hooks/useOperation.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/index.js";
 import { HistoryItemType } from "../../types.js";
-import useDrawSelect from "../../hooks/useDrawSelect.js";
 import { isHit } from "../utils.js";
 import draw from "./draw.js";
-import useLang from "../../hooks/useLang.js";
 function Brush() {
     const lang = useLang();
     const [, cursorDispatcher] = useCursor();
@@ -59,7 +59,7 @@ function Brush() {
         selectBrush,
         historyDispatcher
     ]);
-    const onMousedown = useCallback((e)=>{
+    const onPointerDown = useCallback((e)=>{
         if (!checked || brushRef.current || !canvasContextRef.current) return;
         const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
         brushRef.current = {
@@ -85,7 +85,7 @@ function Brush() {
         size,
         color
     ]);
-    const onMousemove = useCallback((e)=>{
+    const onPointerMove = useCallback((e)=>{
         if (!checked || !canvasContextRef.current) return;
         if (brushEditRef.current) {
             brushEditRef.current.data.x2 = e.clientX;
@@ -109,7 +109,7 @@ function Brush() {
         canvasContextRef,
         historyDispatcher
     ]);
-    const onMouseup = useCallback(()=>{
+    const onPointerUp = useCallback(()=>{
         if (!checked) return;
         if (brushRef.current) historyDispatcher.clearSelect();
         brushRef.current = null;
@@ -119,9 +119,9 @@ function Brush() {
         historyDispatcher
     ]);
     useDrawSelect(onDrawSelect);
-    useCanvasMousedown(onMousedown);
-    useCanvasMousemove(onMousemove);
-    useCanvasMouseup(onMouseup);
+    useCanvasPointerDown(onPointerDown);
+    useCanvasPointerMove(onPointerMove);
+    useCanvasPointerUp(onPointerUp);
     return /*#__PURE__*/ jsx(ScreenshotsButton, {
         title: lang.operation_brush_title,
         icon: "icon-brush",

package/lib/Screenshots/operations/Ellipse/draw.d.ts

@@ -1,5 +1,5 @@
-import type { EllipseData, EllipseEditData } from '.';
 import type { HistoryItemSource } from '../../types';
+import type { EllipseData, EllipseEditData } from '.';
 export declare function getEditedEllipseData(action: HistoryItemSource<EllipseData, EllipseEditData>): {
     x1: number;
     x2: number;

package/lib/Screenshots/operations/Ellipse/draw.js

@@ -1,5 +1,5 @@
-import { EllipseEditType } from "./index.js";
 import { drawDragCircle } from "../utils.js";
+import { EllipseEditType } from "./index.js";
 function getEditedEllipseData(action) {
     let { x1, y1, x2, y2 } = action.data;
     action.editHistory.forEach(({ data })=>{

package/lib/Screenshots/operations/Ellipse/index.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
-import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
-import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
-import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
+import useCanvasPointerDown from "../../hooks/useCanvasPointerDown.js";
+import useCanvasPointerMove from "../../hooks/useCanvasPointerMove.js";
+import useCanvasPointerUp from "../../hooks/useCanvasPointerUp.js";
 import useCursor from "../../hooks/useCursor.js";
 import useDrawSelect from "../../hooks/useDrawSelect.js";
 import useHistory from "../../hooks/useHistory.js";
@@ -108,7 +108,7 @@ function Ellipse() {
         selectEllipse,
         historyDispatcher
     ]);
-    const onMousedown = useCallback((e)=>{
+    const onPointerDown = useCallback((e)=>{
         if (!checked || !canvasContextRef.current || ellipseRef.current) return;
         const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
         const x = e.clientX - left;
@@ -134,7 +134,7 @@ function Ellipse() {
         color,
         canvasContextRef
     ]);
-    const onMousemove = useCallback((e)=>{
+    const onPointerMove = useCallback((e)=>{
         if (!checked || !canvasContextRef.current) return;
         if (ellipseEditRef.current) {
             ellipseEditRef.current.data.x2 = e.clientX;
@@ -156,7 +156,7 @@ function Ellipse() {
         history,
         historyDispatcher
     ]);
-    const onMouseup = useCallback(()=>{
+    const onPointerUp = useCallback(()=>{
         if (!checked) return;
         if (ellipseRef.current) historyDispatcher.clearSelect();
         ellipseRef.current = null;
@@ -166,9 +166,9 @@ function Ellipse() {
         historyDispatcher
     ]);
     useDrawSelect(onDrawSelect);
-    useCanvasMousedown(onMousedown);
-    useCanvasMousemove(onMousemove);
-    useCanvasMouseup(onMouseup);
+    useCanvasPointerDown(onPointerDown);
+    useCanvasPointerMove(onPointerMove);
+    useCanvasPointerUp(onPointerUp);
     return /*#__PURE__*/ jsx(ScreenshotsButton, {
         title: lang.operation_ellipse_title,
         icon: "icon-ellipse",

package/lib/Screenshots/operations/Mosaic/index.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import ScreenshotsButton from "../../ScreenshotsButton/index.js";
-import ScreenshotsSize from "../../ScreenshotsSize/index.js";
-import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
-import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
-import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
-import { HistoryItemType } from "../../types.js";
-import useOperation from "../../hooks/useOperation.js";
-import useCursor from "../../hooks/useCursor.js";
-import useStore from "../../hooks/useStore.js";
 import useBounds from "../../hooks/useBounds.js";
-import useHistory from "../../hooks/useHistory.js";
 import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useCanvasPointerDown from "../../hooks/useCanvasPointerDown.js";
+import useCanvasPointerMove from "../../hooks/useCanvasPointerMove.js";
+import useCanvasPointerUp from "../../hooks/useCanvasPointerUp.js";
+import useCursor from "../../hooks/useCursor.js";
+import useHistory from "../../hooks/useHistory.js";
 import useLang from "../../hooks/useLang.js";
+import useOperation from "../../hooks/useOperation.js";
+import useStore from "../../hooks/useStore.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSize from "../../ScreenshotsSize/index.js";
+import { HistoryItemType } from "../../types.js";
 function getColor(x, y, imageData) {
     if (!imageData) return [
         0,
@@ -63,7 +63,7 @@ function Mosaic() {
         selectMosaic,
         historyDispatcher
     ]);
-    const onMousedown = useCallback((e)=>{
+    const onPointerDown = useCallback((e)=>{
         if (!checked || mosaicRef.current || !imageDataRef.current || !canvasContextRef.current) return;
         const rect = canvasContextRef.current.canvas.getBoundingClientRect();
         const x = e.clientX - rect.x;
@@ -90,7 +90,7 @@ function Mosaic() {
         size,
         canvasContextRef
     ]);
-    const onMousemove = useCallback((e)=>{
+    const onPointerMove = useCallback((e)=>{
         if (!checked || !mosaicRef.current || !canvasContextRef.current || !imageDataRef.current) return;
         const rect = canvasContextRef.current.canvas.getBoundingClientRect();
         const x = e.clientX - rect.x;
@@ -133,15 +133,15 @@ function Mosaic() {
         history,
         historyDispatcher
     ]);
-    const onMouseup = useCallback(()=>{
+    const onPointerUp = useCallback(()=>{
         if (!checked) return;
         mosaicRef.current = null;
     }, [
         checked
     ]);
-    useCanvasMousedown(onMousedown);
-    useCanvasMousemove(onMousemove);
-    useCanvasMouseup(onMouseup);
+    useCanvasPointerDown(onPointerDown);
+    useCanvasPointerMove(onPointerMove);
+    useCanvasPointerUp(onPointerUp);
     useEffect(()=>{
         if (!bounds || !image || !checked) return;
         const $canvas = document.createElement('canvas');

package/lib/Screenshots/operations/Ok/index.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import useStore from "../../hooks/useStore.js";
+import composeImage from "../../composeImage.js";
 import useCall from "../../hooks/useCall.js";
 import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
 import useHistory from "../../hooks/useHistory.js";
 import useReset from "../../hooks/useReset.js";
+import useStore from "../../hooks/useStore.js";
 import ScreenshotsButton from "../../ScreenshotsButton/index.js";
-import composeImage from "../../composeImage.js";
 function Ok() {
     const { image, width, height, history, bounds, lang } = useStore();
     const canvasContextRef = useCanvasContextRef();

package/lib/Screenshots/operations/Rectangle/draw.d.ts

@@ -1,5 +1,5 @@
-import type { RectangleData, RectangleEditData } from '.';
 import type { HistoryItemSource } from '../../types';
+import type { RectangleData, RectangleEditData } from '.';
 export declare function getEditedRectangleData(action: HistoryItemSource<RectangleData, RectangleEditData>): {
     x1: number;
     x2: number;

package/lib/Screenshots/operations/Rectangle/draw.js

@@ -1,5 +1,5 @@
-import { RectangleEditType } from "./index.js";
 import { drawDragCircle } from "../utils.js";
+import { RectangleEditType } from "./index.js";
 function getEditedRectangleData(action) {
     let { x1, y1, x2, y2 } = action.data;
     action.editHistory.forEach(({ data })=>{