image-beautifier 1.0.1 → 1.0.2

package/src/components/sideBar/SizeBar.jsx

@@ -1,114 +0,0 @@
-import { useState, useRef } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Popover, Button } from 'antd';
-import stores from '@stores';
-import { cn } from '@utils/utils';
-import sizeConfig from '@utils/sizeConfig';
-import CustomSize from './CustomSize';
-
-
-export default observer(() => {
-    const box = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [height, setHeight] = useState(500);
-    const hide = () => {
-        setOpen(false);
-    };
-    const handleOpenChange = (newOpen) => {
-        setOpen(newOpen);
-        if (newOpen && box.current) {
-            const { height, y } = box.current.getBoundingClientRect();
-            const h = document.body.clientHeight - height - y - 80;
-            setHeight(h);
-        }
-    };
-    const checkSelected = (key, item) => {
-        if (key !== stores.option.size.type) return false;
-        if (item.height !== stores.option.frameConf.height) return false;
-        if (item.width !== stores.option.frameConf.width) return false;
-        return true;
-    }
-    const onSet = (value) => {
-        hide();
-        if (value.type === 'auto' && stores.editor.img.width) {
-            const margin = Math.round(stores.editor.img.width * 0.2);
-            stores.option.setSize({...value, width: stores.editor.img.width + margin, height: stores.editor.img.height + margin});
-            return;
-        }
-        stores.option.setSize(value);
-    };
-    const toSelected = (key, title, item) => {
-        hide();
-        stores.option.setSize({
-            type: key,
-            title: `${ title }${ item.title ? ` ${item.title} `:' ' }${ item.w } : ${ item.h }`,
-            width: item.width,
-            height: item.height
-        });
-    }
-    const isShowSize = stores.editor.img?.src || stores.option.size.type !== 'auto';
-    const title = <CustomSize type={stores.option.size.type} frameWidth={stores.option.frameConf.width} frameHeight={stores.option.frameConf.height} onSet={onSet} />;
-    const content = (
-        <div className="border-t border-gray-200 py-2 divide-y">
-            {sizeConfig.map(item => (
-                <div key={item.key}>
-                    {item.key !== 'default' && <div className="font-semibold pt-2">{item.title}</div>}
-                    <section className="flex flex-wrap items-end pb-2">
-                        {item.lists.map((child, index) => (
-                            <Button
-                                key={index}
-                                type="text"
-                                className="flex-[33%] p-3 h-auto flex-col gap-0 disabled:bg-blue-500/5 disabled:border-blue-500 disabled:cursor-default disabled:text-black"
-                                disabled={checkSelected(item.key, child)}
-                                onClick={() => toSelected(item.key, item.title, child)}>
-                                <div className="py-2 px-3 w-full">
-                                    <div
-                                        className='border border-black/50 bg-black/10 w-full flex items-center justify-center rounded-md opacity-75'
-                                        style={{ aspectRatio: child.w / child.h }}
-                                    ><span>{child.w} : {child.h}</span></div>
-                                </div>
-                                {child.title && <div className="text-xs">{child.title}</div>}
-                                <div className="text-xs overflow-hidden text-gray-500">{child.width} x {child.height}</div>
-                            </Button>
-                        ))}
-                    </section>
-                </div>
-            ))}
-        </div>
-    );
-    return (
-        <Popover
-            content={content}
-            title={title}
-            trigger='click'
-            arrow={false}
-            placement="bottomRight"
-            open={open}
-            overlayClassName="[&_.ant-popover-inner]:h-full [&_.ant-popover-inner]:overflow-x-hidden [&_.ant-popover-inner]:overflow-y-auto [&_.ant-popover-content]:h-full"
-            overlayStyle={{
-                width: '400px',
-                height: `${height}px`
-            }}
-            onOpenChange={handleOpenChange}
-        >
-            <div className={cn('px-3 py-1.5 border shrink-0 border-gray-200 gap-3 shadow-sm overflow-hidden max-h-12 rounded-md hover:border-blue-500 [&_svg]:hover:text-blue-500 cursor-pointer flex items-center', open && 'shadow-md')} ref={box}>
-                <div
-                    className='border border-black/50 bg-black/10 w-4 rounded-sm'
-                    style={{ aspectRatio: stores.option.frameConf.width / stores.option.frameConf.height }}
-                />
-                <div className='text-xs'>
-                    <div className='font-semibold leading-3 mb-0.5'>{stores.option.size.title}</div>
-                    {!isShowSize ? 
-                        <div className='text-gray-500 leading-3'>Adaptive screenshot size</div> :
-                        <div className='text-gray-500 leading-3'>
-                            {stores.option.frameConf.width} x {stores.option.frameConf.height} px
-                        </div>
-                    }
-                </div>
-                <div className='flex-1'></div>
-                {open ? <Icon.ChevronUp size={16} /> : <Icon.ChevronDown size={16} />}
-            </div>
-        </Popover>
-    );
-});

package/src/components/sideBar/Watermark.jsx

@@ -1,59 +0,0 @@
-import { useState, useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Radio, Switch, Input } from 'antd';
-import ColorPicker from '@components/ColorPicker';
-import stores from '@stores';
-import { text2Svg } from '@utils/utils';
-
-export default observer(() => {
-    const [useWater, setUseWater] = useState(false);
-    const [waterCont, setWaterCont] = useState('ShotEasy');
-    const [waterColor, setWaterColor] = useState('#00000030');
-    const [direction, setDirection] = useState(45);
-    const handleColorChange = (color) => {
-        setWaterColor(typeof color === 'string' ? color : color.toRgbString());
-    };
-    useEffect(() => {
-        if (useWater && waterCont.trim()) {
-            const svgImg = text2Svg({
-                text: waterCont,
-                color: waterColor,
-                angleDegrees: direction
-            });
-            stores.option.setWaterImg(svgImg);
-        } else {
-            stores.option.setWaterImg(null);
-        }
-    }, [useWater, waterCont, waterColor, direction]);
-    return (
-        <>
-            <div className="[&_label]:font-semibold [&_label]:text-sm flex gap-4 items-center justify-between">
-                <label>Watermark</label>
-                <Switch defaultChecked={useWater} onChange={setUseWater} size="small" className="bg-slate-200" />
-            </div>
-            {useWater &&
-                <div className="[&_label]:font-semibold [&_label]:text-xs grid gap-3 pl-2 pt-2">
-                    <Input defaultValue={waterCont} placeholder="Watermark content" onChange={(e) => setWaterCont(e.target.value)} />
-                    <div className="flex items-center justify-between">
-                        <label>Color</label>
-                        <ColorPicker value={waterColor} onChange={handleColorChange} size="small" />
-                    </div>
-                    <div className="flex items-center justify-between">
-                        <label>Direction</label>
-                        <div>
-                            <Radio.Group defaultValue={direction} onChange={(e) => setDirection(e.target.value)} size="small">
-                                <Radio.Button value={-45}><Icon.ArrowUpRight size={16} className="mt-[3px]" /></Radio.Button>
-                                <Radio.Button value={45}><Icon.ArrowDownRight size={16} className="mt-[3px]" /></Radio.Button>
-                            </Radio.Group>
-                        </div>
-                    </div>
-                    <div className="flex items-center justify-between">
-                        <label>Only Background</label>
-                        <Switch size="small" onChange={(checked) => stores.option.setWaterIndex(checked ? -1 : 1)} className="bg-slate-200" />
-                    </div>
-                </div>
-            }
-        </>
-    )
-});

package/src/hooks/useKeyboardShortcuts.js

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from "react"
-import { tinykeys } from "tinykeys"
-
-export default function useKeyboardShortcuts(toSave, toCopy, dependencies) {
-    const save = useRef(toSave);
-    const copy = useRef(toCopy);
-    
-    useEffect(() => {
-        save.current = toSave;
-        copy.current = toCopy;
-    }, [...dependencies]);
-
-    useEffect(() => {
-        const unsubscribe = tinykeys(window, {
-            "$mod+KeyS": event => {
-                event.preventDefault()
-                save.current && save.current();
-            },
-            "$mod+KeyC": event => {
-                event.preventDefault()
-                copy && copy.current();
-            }
-        })
-        return () => {
-            unsubscribe();
-        }
-    }, [window]);
-};

package/src/hooks/usePaste.js

@@ -1,21 +0,0 @@
-import { useEffect } from 'react';
-import { supportImg } from '@utils/utils';
-
-export default (toPaste, dependencies = []) => {
-    useEffect(() => {
-        const getPaste = async (e) => {
-            const data = e.clipboardData;
-            if (!data || !data.items) return;
-            const items = Array.from(data.items).filter((e) =>
-                supportImg.includes(e.type)
-            );
-            if (!items.length) return;
-            const file = items[0].getAsFile();
-            toPaste && toPaste(file);
-        };
-        document.addEventListener('paste', getPaste, false);
-        return () => {
-            document.removeEventListener('paste', getPaste);
-        };
-    }, [...dependencies]);
-}

package/src/index.js

@@ -1 +0,0 @@
-export { default as ImageBeautifier } from './App';

package/src/main.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
-);

package/src/stores/editor.js

@@ -1,106 +0,0 @@
-import { makeAutoObservable, toJS, action } from 'mobx';
-import demoPng from '@assets/demo.png'
-let timer;
-class Editor {
-    img = {};
-    invalid = false;
-    app = null;
-    scale = 100;
-    useTool = null;
-    annotateColor = '#ff0000';
-    strokeWidth = 4;
-    shapes = new Map();
-    message = null;
-    constructor () {
-        makeAutoObservable(this)
-    }
-
-    get shapesList() {
-        return Array.from(toJS(this.shapes).values());
-    }
-
-    get cursor() {
-        return this.useTool === 'Pencil' ? 'pencil' : this.useTool ? 'crosshair' : 'auto'
-    }
-
-    get isEditing() {
-        const is = !!this.app?.tree;
-        if (!is) {
-            this.message.info('Please add a image');
-            this.setInvalid();
-        }
-        return is;
-    }
-
-    setInvalid() {
-        clearTimeout(timer);
-        this.invalid = true;
-        timer = setTimeout(action(() => {
-            this.invalid = false;
-        }), 200);
-    }
-
-    setImg(value) {
-        this.img = value;
-    }
-
-    setMessage(value) {
-        this.message = value;
-    }
-
-    getShape(id) {
-        return this.shapes.get(id);
-    }
-
-    addShape(shape) {
-        this.shapes.set(shape.id, shape);
-    }
-
-    removeShape(shape) {
-        this.shapes.delete(shape.id);
-    }
-
-    setApp(app) {
-        this.app = app;
-    }
-
-    setScale(value) {
-        this.scale = parseInt(value * 100);
-    }
-
-    setUseTool(value) {
-        this.useTool = value;
-        if (value) {
-            this.setSelect(false);
-        } else {
-            this.setSelect(true);
-        }
-    }
-
-    setSelect(value) {
-        if (!this.app) return;
-        this.app.editor.app.config.move.drag = false;
-        this.app.editor.hittable = value;
-    }
-    
-
-    setAnnotateColor(color) {
-        this.annotateColor = color;
-    }
-
-    setStrokeWidth(value) {
-        this.strokeWidth = value;
-    }
-
-    clearImg() {
-        this.img = {};
-    }
-
-    destroy() {
-        this.app?.destroy();
-        this.app = null;
-    }
-}
-
-const editor = new Editor();
-export default editor;

package/src/stores/index.js

@@ -1,7 +0,0 @@
-import editor from './editor';
-import option from './option';
-
-export default {
-    editor,
-    option
-};

package/src/stores/option.js

@@ -1,96 +0,0 @@
-import { makeAutoObservable, toJS } from 'mobx';
-import backgroundConfig from '@utils/backgroundConfig';
-
-class Option {
-    scale = 1;
-    scaleX = false;
-    scaleY = false;
-    padding = 0;
-    paddingBg = 'rgba(255,255,255, 100)';
-    round = 10;
-    shadow = 3;
-    frame = 'none';
-    background = 'default_1';
-    align = 'center';
-    waterImg = null;
-    waterIndex = 1;
-    size = {
-        type: 'auto',
-        title: 'Auto'
-    };
-    frameConf = {
-        width: 800,
-        height: 600,
-        background: {
-            type: 'linear',
-            from: 'left',
-            to: 'right',
-            stops: ['#6366f1', '#a855f7', '#ec4899']
-        }
-    }
-    constructor() {
-        makeAutoObservable(this);
-    }
-
-    get waterSvg() {
-        return toJS(this.waterImg);
-    }
-
-    setScale(value) {
-        this.scale = value;
-    }
-
-    setPadding(value) {
-        this.padding = value;
-    }
-
-    setPaddingBg(value) {
-        this.paddingBg = value;
-    }
-
-    setRound(value) {
-        this.round = value;
-    }
-
-    setShadow(value) {
-        this.shadow = value;
-    }
-
-    setFrameSize(width, height) {
-        if (!width || !height) return;
-        this.frameConf.width = width;
-        this.frameConf.height = height;
-    }
-
-    setAlign(value) {
-        this.align = value;
-    }
-
-    setSize(value) {
-        this.size.type = value.type;
-        this.size.title = value.title;
-        this.setFrameSize(value.width, value.height)
-    }
-
-    setBackground(value) {
-        this.background = value;
-        this.frameConf.background = backgroundConfig[value].fill;
-    }
-    toggleFlip(type) {
-        if (type === 'x') {
-            this.scaleX = !this.scaleX;
-        }
-        if (type === 'y') {
-            this.scaleY = !this.scaleY;
-        }
-    }
-    setWaterImg(value) {
-        this.waterImg = value;
-    }
-    setWaterIndex(value) {
-        this.waterIndex = value;
-    }
-}
-
-const option = new Option();
-export default option;

package/src/style/main.css

@@ -1,132 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-    --accent: 136, 58, 234;
-    --accent-light: 224, 204, 250;
-    --accent-dark: 49, 10, 101;
-    --accent-gradient: linear-gradient(
-        45deg,
-        rgb(var(--accent)),
-        rgb(var(--accent-light)) 30%,
-        white 60%
-    );
-    --c-bg: #fbfbfb;
-    --c-wg: #fff;
-    --c-wb: #c2c2c2;
-    --c-bg-op: #fbfbfb00;
-    --c-fg: #444444;
-    --c-scroll: #d9d9d9;
-    --c-scroll-hover: #bbbbbb;
-    --ant-color-primary: #1677ff;
-    scrollbar-color: var(--c-scrollbar) var(--c-bg);
-    --primary-glow: conic-gradient(
-        from 180deg at 50% 50%,
-        #16abff33 0deg,
-        #0885ff33 55deg,
-        #54d6ff33 120deg,
-        #0071ff33 160deg,
-        transparent 360deg
-    );
-}
-
-@layer base {
-    ::-webkit-scrollbar {
-        @apply w-1.5;
-        @apply h-1.5;
-    }
-    ::-webkit-scrollbar-thumb {
-        @apply bg-[var(--c-scroll)];
-        @apply rounded-md;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        @apply bg-[var(--c-scroll-hover)];
-    }
-    ::-webkit-scrollbar-track {
-        @apply bg-[var(--c-bg)];
-    }
-}
-
-@layer components {
-    .polka {
-        background-image: radial-gradient(var(--c-wb) 0.7px, #fcfcfc 1px);
-        background-size: 14px 14px;
-    }
-    .ant-radio-wrapper-checked .h-8 {
-        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(25, 0, 255, 0.582);
-    }
-    .position-block {
-        @apply relative;
-        @apply after:block;
-        @apply after:transition-all;
-        @apply after:w-8;
-        @apply after:h-8;
-        @apply after:rounded-md;
-        @apply after:border;
-        @apply after:border-blue-300;
-        @apply after:bg-blue-100;
-        @apply after:absolute;
-        @apply after:z-10;
-    }
-    .position-block.top-left {
-        @apply after:top-0;
-        @apply after:left-0;
-    }
-    .position-block.top {
-        @apply after:top-0;
-        @apply after:left-8;
-    }
-    .position-block.top-right {
-        @apply after:top-0;
-        @apply after:right-0;
-    }
-    .position-block.right {
-        @apply after:top-8;
-        @apply after:right-0;
-    }
-    .position-block.bottom-right {
-        @apply after:bottom-0;
-        @apply after:right-0;
-    }
-    .position-block.bottom {
-        @apply after:bottom-0;
-        @apply after:left-8;
-    }
-    .position-block.bottom-left {
-        @apply after:bottom-0;
-        @apply after:left-0;
-    }
-    .position-block.left {
-        @apply after:top-8;
-        @apply after:left-0;
-    }
-    .position-block.center {
-        @apply after:top-8;
-        @apply after:left-8;
-    }
-    .bg-transparent {
-        background-image: 
-                linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%), 
-                linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%);
-        background-position: 0 0, 5px 5px;
-        background-size: 10px 10px;
-    }
-    @keyframes shake {
-        0% {
-            transform: translateX(0);
-        }
-        25% {
-            transform: translateX(0.5rem);
-        }
-        75% {
-            transform: translateX(-0.5rem);
-        }
-        100% {
-            transform: translateX(0);
-        }
-    }
-    .invalid {
-        animation: shake 0.2s ease-in-out 0s 2;
-    }
-}

package/src/utils/UndoRedoManager.js

@@ -1,83 +0,0 @@
-export default class UndoRedoManager {
-    constructor(options) {
-        this.options = Object.assign(
-            {
-                limit: 50,
-                onChange: () => {},
-            },
-            options || {}
-        );
-
-        // 数据堆
-        this._stacks = [];
-        // 指针位置
-        this._pointer = -1;
-    }
-
-    get current() {
-        return this._stacks[this._pointer];
-    }
-
-    get canUndo() {
-        return this._pointer > 0;
-    }
-
-    get canRedo() {
-        return this._pointer < this._stacks.length - 1;
-    }
-
-    get count() {
-        return this._stacks.length;
-    }
-
-    get stacks() {
-        return this._stacks;
-    }
-
-    destroy() {
-        this._stacks = null;
-        this.options = null;
-        this._pointer = null;
-    }
-
-    add(data) {
-        if (!this._stacks) {
-            return;
-        }
-        // 应该删除指针之后的记录
-        this._stacks.splice(
-            this._pointer + 1,
-            this._stacks.length - this._pointer - 1
-        );
-        if (this._stacks.length === this.options.limit) {
-            // 存储达到上限，删除第一个
-            this._stacks.shift();
-            this._pointer = this.options.limit - 1;
-        } else {
-            this._pointer++;
-        }
-        this._stacks.push(data);
-        this.options.onChange(this);
-        return this.current;
-    }
-
-    undo() {
-        if (!this.canUndo) {
-            console.warn('not can undo');
-            return;
-        }
-        this._pointer--;
-        this.options.onChange(this);
-        return this.current;
-    }
-
-    redo() {
-        if (!this.canRedo) {
-            console.warn('not can redo');
-            return;
-        }
-        this._pointer++;
-        this.options.onChange(this);
-        return this.current;
-    }
-}