react-screenshots 0.5.21 → 0.6.0

package/lib/Screenshots/ScreenshotsOption/index.js

@@ -0,0 +1,94 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, memo, useContext, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ScreenshotsOperationsCtx } from "../ScreenshotsOperations/index.js";
+import "./index.css";
+var ScreenshotsOption_Placement = /*#__PURE__*/ function(Placement) {
+    Placement["Bottom"] = "bottom";
+    Placement["Top"] = "top";
+    return Placement;
+}({});
+const Screenshots_ScreenshotsOption = /*#__PURE__*/ memo(function({ open, content, children }) {
+    const childrenRef = useRef(null);
+    const popoverRef = useRef(null);
+    const contentRef = useRef(null);
+    const operationsRect = useContext(ScreenshotsOperationsCtx);
+    const [placement, setPlacement] = useState("bottom");
+    const [position, setPosition] = useState(null);
+    const [offsetX, setOffsetX] = useState(0);
+    const getPopoverEl = ()=>{
+        if (!popoverRef.current) popoverRef.current = document.createElement('div');
+        return popoverRef.current;
+    };
+    useEffect(()=>{
+        const $el = getPopoverEl();
+        if (open) document.body.appendChild($el);
+        return ()=>{
+            $el.remove();
+        };
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        if (!open || !operationsRect || !childrenRef.current || !contentRef.current) return;
+        const childrenRect = childrenRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        let currentPlacement = placement;
+        let x = childrenRect.left + childrenRect.width / 2;
+        let y = childrenRect.top + childrenRect.height;
+        let currentOffsetX = offsetX;
+        if (x + contentRect.width / 2 > operationsRect.x + operationsRect.width) {
+            const ox = x;
+            x = operationsRect.x + operationsRect.width - contentRect.width / 2;
+            currentOffsetX = ox - x;
+        }
+        if (x < operationsRect.x + contentRect.width / 2) {
+            const ox = x;
+            x = operationsRect.x + contentRect.width / 2;
+            currentOffsetX = ox - x;
+        }
+        if (y > window.innerHeight - contentRect.height) {
+            if ("bottom" === currentPlacement) currentPlacement = "top";
+            y = childrenRect.top - contentRect.height;
+        }
+        if (y < 0) {
+            if ("top" === currentPlacement) currentPlacement = "bottom";
+            y = childrenRect.top + childrenRect.height;
+        }
+        if (currentPlacement !== placement) setPlacement(currentPlacement);
+        if (position?.x !== x || position.y !== y) setPosition({
+            x,
+            y
+        });
+        if (currentOffsetX !== offsetX) setOffsetX(currentOffsetX);
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ cloneElement(children, {
+                ref: childrenRef
+            }),
+            open && content && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs("div", {
+                ref: contentRef,
+                className: "screenshots-option",
+                style: {
+                    visibility: position ? 'visible' : 'hidden',
+                    transform: `translate(${position?.x ?? 0}px, ${position?.y ?? 0}px)`
+                },
+                "data-placement": placement,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "screenshots-option-container",
+                        children: content
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "screenshots-option-arrow",
+                        style: {
+                            marginLeft: offsetX
+                        }
+                    })
+                ]
+            }), getPopoverEl())
+        ]
+    });
+});
+export { ScreenshotsOption_Placement as Placement, Screenshots_ScreenshotsOption as default };

package/lib/{types → Screenshots}/ScreenshotsSize/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import './index.less';
 export interface SizeProps {
     value: number;
     onChange: (value: number) => void;
 }
-declare const _default: React.NamedExoticComponent<SizeProps>;
+declare const _default: import("react").NamedExoticComponent<SizeProps>;
 export default _default;

package/lib/Screenshots/ScreenshotsSize/index.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import "./index.css";
+const Screenshots_ScreenshotsSize = /*#__PURE__*/ memo(function({ value, onChange }) {
+    const sizes = [
+        3,
+        6,
+        9
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        className: "screenshots-size",
+        children: sizes.map((size)=>{
+            const classNames = [
+                'screenshots-size-item'
+            ];
+            if (size === value) classNames.push('screenshots-size-active');
+            return /*#__PURE__*/ jsx("div", {
+                className: classNames.join(' '),
+                onClick: ()=>onChange && onChange(size),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "screenshots-size-pointer",
+                    style: {
+                        width: 1.8 * size,
+                        height: 1.8 * size
+                    }
+                })
+            }, size);
+        })
+    });
+});
+export { Screenshots_ScreenshotsSize as default };

package/lib/{types → Screenshots}/ScreenshotsSizeColor/index.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
-import './index.less';
+import "./index.less";
 export interface SizeColorProps {
     size: number;
     color: string;
     onSizeChange: (value: number) => void;
     onColorChange: (value: string) => void;
 }
-declare const _default: React.NamedExoticComponent<SizeColorProps>;
+declare const _default: import("react").NamedExoticComponent<SizeColorProps>;
 export default _default;

package/lib/Screenshots/ScreenshotsSizeColor/index.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import ScreenshotsSize from "../ScreenshotsSize/index.js";
+import ScreenshotsColor from "../ScreenshotsColor/index.js";
+import "./index.css";
+const Screenshots_ScreenshotsSizeColor = /*#__PURE__*/ memo(function({ size, color, onSizeChange, onColorChange }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "screenshots-sizecolor",
+        children: [
+            /*#__PURE__*/ jsx(ScreenshotsSize, {
+                value: size,
+                onChange: onSizeChange
+            }),
+            /*#__PURE__*/ jsx(ScreenshotsColor, {
+                value: color,
+                onChange: onColorChange
+            })
+        ]
+    });
+});
+export { Screenshots_ScreenshotsSizeColor as default };

package/lib/Screenshots/ScreenshotsTextarea/calculateNodeSize.js

@@ -0,0 +1,69 @@
+const hiddenTextareaStyle = `
+min-width: 0 !important;
+width: 0 !important;
+min-height: 0 !important;
+height:0 !important;
+visibility: hidden !important;
+overflow: hidden !important;
+position: absolute !important;
+z-index: -1000 !important;
+top:0 !important;
+right:0 !important;
+`;
+const sizeStyle = [
+    'letter-spacing',
+    'line-height',
+    'padding-top',
+    'padding-bottom',
+    'font-family',
+    'font-weight',
+    'font-size',
+    'font-variant',
+    'text-rendering',
+    'text-transform',
+    'text-indent',
+    'padding-left',
+    'padding-right',
+    'border-width',
+    'box-sizing',
+    'white-space',
+    'word-break'
+];
+let hiddenTextarea;
+function getComputedSizeInfo(node) {
+    const style = window.getComputedStyle(node);
+    const boxSizing = style.getPropertyValue('box-sizing') || style.getPropertyValue('-moz-box-sizing') || style.getPropertyValue('-webkit-box-sizing');
+    const paddingSize = parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top'));
+    const borderSize = parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width'));
+    const sizingStyle = sizeStyle.map((name)=>`${name}:${style.getPropertyValue(name)}`).join(';');
+    return {
+        sizingStyle,
+        paddingSize,
+        borderSize,
+        boxSizing
+    };
+}
+function calculateNodeSize(textarea, value, maxWidth, maxHeight) {
+    if (!hiddenTextarea) {
+        hiddenTextarea = document.createElement('textarea');
+        hiddenTextarea.setAttribute('tab-index', '-1');
+        document.body.appendChild(hiddenTextarea);
+    }
+    const { paddingSize, borderSize, boxSizing, sizingStyle } = getComputedSizeInfo(textarea);
+    hiddenTextarea.setAttribute('style', `${sizingStyle};${hiddenTextareaStyle};max-width:${maxWidth}px;max-height:${maxHeight}px`);
+    hiddenTextarea.value = value || ' ';
+    let width = hiddenTextarea.scrollWidth;
+    let height = hiddenTextarea.scrollHeight;
+    if ('border-box' === boxSizing) {
+        width += borderSize;
+        height += borderSize;
+    } else if ('content-box' === boxSizing) {
+        width -= paddingSize;
+        height -= paddingSize;
+    }
+    return {
+        width: Math.min(width, maxWidth),
+        height: Math.min(height, maxHeight)
+    };
+}
+export { calculateNodeSize as default, getComputedSizeInfo };

package/lib/{types → Screenshots}/ScreenshotsTextarea/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
 import './index.less';
 export interface TextInputProps {
     x: number;
@@ -11,5 +11,5 @@ export interface TextInputProps {
     onChange: (value: string) => unknown;
     onBlur: (e: FocusEvent<HTMLTextAreaElement>) => unknown;
 }
-declare const _default: React.NamedExoticComponent<TextInputProps>;
+declare const _default: import("react").NamedExoticComponent<TextInputProps>;
 export default _default;

package/lib/Screenshots/ScreenshotsTextarea/index.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import calculateNodeSize from "./calculateNodeSize.js";
+import "./index.css";
+const Screenshots_ScreenshotsTextarea = /*#__PURE__*/ memo(function({ x, y, maxWidth, maxHeight, size, color, value, onChange, onBlur }) {
+    const popoverRef = useRef(null);
+    const textareaRef = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    const getPopoverEl = ()=>{
+        if (!popoverRef.current) popoverRef.current = document.createElement('div');
+        return popoverRef.current;
+    };
+    useLayoutEffect(()=>{
+        if (popoverRef.current) {
+            document.body.appendChild(popoverRef.current);
+            requestAnimationFrame(()=>{
+                textareaRef.current?.focus();
+            });
+        }
+        return ()=>{
+            popoverRef.current?.remove();
+        };
+    }, []);
+    useLayoutEffect(()=>{
+        if (!textareaRef.current) return;
+        const { width, height } = calculateNodeSize(textareaRef.current, value, maxWidth, maxHeight);
+        setWidth(width);
+        setHeight(height);
+    }, [
+        value,
+        maxWidth,
+        maxHeight
+    ]);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("textarea", {
+        ref: textareaRef,
+        className: "screenshots-textarea",
+        style: {
+            color,
+            width,
+            height,
+            maxWidth,
+            maxHeight,
+            fontSize: size,
+            lineHeight: `${size}px`,
+            transform: `translate(${x}px, ${y}px)`
+        },
+        value: value,
+        onChange: (e)=>onChange && onChange(e.target.value),
+        onBlur: (e)=>onBlur && onBlur(e)
+    }), getPopoverEl());
+});
+export { Screenshots_ScreenshotsTextarea as default };

package/lib/{types → Screenshots}/composeImage.d.ts

@@ -1,4 +1,4 @@
-import { Bounds, History } from './types';
+import type { Bounds, History } from './types';
 interface ComposeImageOpts {
     image: HTMLImageElement;
     width: number;

package/lib/Screenshots/composeImage.js

@@ -0,0 +1,27 @@
+import { HistoryItemType } from "./types.js";
+function composeImage({ image, width, height, history, bounds }) {
+    return new Promise((resolve, reject)=>{
+        const $canvas = document.createElement('canvas');
+        const targetWidth = bounds.width * window.devicePixelRatio;
+        const targetHeight = bounds.height * window.devicePixelRatio;
+        $canvas.width = targetWidth;
+        $canvas.height = targetHeight;
+        const ctx = $canvas.getContext('2d');
+        if (!ctx) return reject(new Error('convert image to blob fail'));
+        const rx = image.naturalWidth / width;
+        const ry = image.naturalHeight / height;
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'low';
+        ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
+        ctx.clearRect(0, 0, bounds.width, bounds.height);
+        ctx.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
+        history.stack.slice(0, history.index + 1).forEach((item)=>{
+            if (item.type === HistoryItemType.Source) item.draw(ctx, item);
+        });
+        $canvas.toBlob((blob)=>{
+            if (!blob) return reject(new Error('canvas toBlob fail'));
+            resolve(blob);
+        }, 'image/png');
+    });
+}
+export { composeImage as default };

package/lib/Screenshots/exports.d.ts

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

package/lib/Screenshots/exports.js

@@ -0,0 +1,2 @@
+import index from "./index.js";
+export { index as default };

package/lib/{types → Screenshots}/hooks/useBounds.d.ts

@@ -1,4 +1,4 @@
-import { Bounds } from '../types';
+import type { Bounds } from '../types';
 export interface BoundsDispatcher {
     set: (bounds: Bounds) => void;
     reset: () => void;

package/lib/Screenshots/hooks/useBounds.js

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import useDispatcher from "./useDispatcher.js";
+import useStore from "./useStore.js";
+function useBounds() {
+    const { bounds } = useStore();
+    const { setBounds } = useDispatcher();
+    const set = useCallback((bounds)=>{
+        setBounds?.(bounds);
+    }, [
+        setBounds
+    ]);
+    const reset = useCallback(()=>{
+        setBounds?.(null);
+    }, [
+        setBounds
+    ]);
+    return [
+        bounds,
+        {
+            set,
+            reset
+        }
+    ];
+}
+export { useBounds as default };

package/lib/Screenshots/hooks/useCall.js

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import useDispatcher from "./useDispatcher.js";
+function useCall() {
+    const dispatcher = useDispatcher();
+    const call = useCallback((funcName, ...args)=>{
+        dispatcher.call?.(funcName, ...args);
+    }, [
+        dispatcher
+    ]);
+    return call;
+}
+export { useCall as default };

package/lib/{types → Screenshots}/hooks/useCanvasContextRef.d.ts

@@ -1,2 +1,2 @@
-import { CanvasContextRef } from '../types';
+import type { CanvasContextRef } from '../types';
 export default function useCanvasContextRef(): CanvasContextRef;

package/lib/Screenshots/hooks/useCanvasContextRef.js

@@ -0,0 +1,6 @@
+import useStore from "./useStore.js";
+function useCanvasContextRef() {
+    const { canvasContextRef } = useStore();
+    return canvasContextRef;
+}
+export { useCanvasContextRef as default };

package/lib/Screenshots/hooks/useCanvasMousedown.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useEmiter from "./useEmiter.js";
+function useCanvasMousedown(onMousedown) {
+    const emiter = useEmiter();
+    useEffect(()=>{
+        emiter.on('mousedown', onMousedown);
+        return ()=>{
+            emiter.off('mousedown', onMousedown);
+        };
+    }, [
+        onMousedown,
+        emiter
+    ]);
+}
+export { useCanvasMousedown as default };

package/lib/Screenshots/hooks/useCanvasMousemove.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useEmiter from "./useEmiter.js";
+function useCanvasMousemove(onMousemove) {
+    const emiter = useEmiter();
+    useEffect(()=>{
+        emiter.on('mousemove', onMousemove);
+        return ()=>{
+            emiter.off('mousemove', onMousemove);
+        };
+    }, [
+        onMousemove,
+        emiter
+    ]);
+}
+export { useCanvasMousemove as default };

package/lib/Screenshots/hooks/useCanvasMouseup.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useEmiter from "./useEmiter.js";
+function useCanvasMouseup(onMouseup) {
+    const emiter = useEmiter();
+    useEffect(()=>{
+        emiter.on('mouseup', onMouseup);
+        return ()=>{
+            emiter.off('mouseup', onMouseup);
+        };
+    }, [
+        onMouseup,
+        emiter
+    ]);
+}
+export { useCanvasMouseup as default };

package/lib/Screenshots/hooks/useCursor.js

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import useDispatcher from "./useDispatcher.js";
+import useStore from "./useStore.js";
+function useCursor() {
+    const { cursor } = useStore();
+    const { setCursor } = useDispatcher();
+    const set = useCallback((cursor)=>{
+        setCursor?.(cursor);
+    }, [
+        setCursor
+    ]);
+    const reset = useCallback(()=>{
+        setCursor?.('move');
+    }, [
+        setCursor
+    ]);
+    return [
+        cursor,
+        {
+            set,
+            reset
+        }
+    ];
+}
+export { useCursor as default };

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

@@ -0,0 +1,2 @@
+import type { ScreenshotsContextDispatcher } from '../ScreenshotsContext';
+export default function useDispatcher(): ScreenshotsContextDispatcher;

package/lib/Screenshots/hooks/useDispatcher.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import ScreenshotsContext from "../ScreenshotsContext.js";
+function useDispatcher() {
+    const { dispatcher } = useContext(ScreenshotsContext);
+    return dispatcher;
+}
+export { useDispatcher as default };

package/lib/{types → Screenshots}/hooks/useDrawSelect.d.ts

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

package/lib/Screenshots/hooks/useDrawSelect.js

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

package/lib/{types → Screenshots}/hooks/useEmiter.d.ts

@@ -1,4 +1,4 @@
-import { EmiterListener } from '../types';
+import type { EmiterListener } from '../types';
 export interface EmiterDispatcher {
     on: (event: string, listener: EmiterListener) => void;
     off: (event: string, listener: EmiterListener) => void;

package/lib/Screenshots/hooks/useEmiter.js

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

package/lib/{types → Screenshots}/hooks/useHistory.d.ts

@@ -1,4 +1,4 @@
-import { History, HistoryItem } from '../types';
+import type { History, HistoryItem } from '../types';
 export interface HistoryValue extends History {
     top?: HistoryItem<unknown, unknown>;
 }