image-beautifier 1.0.1 → 1.0.2

package/src/components/sideBar/BackgroundSelect.jsx

@@ -1,49 +0,0 @@
-import { Radio } from 'antd';
-import backgroundConfig from '@utils/backgroundConfig';
-import { cn } from '@utils/utils';
-
-const isImg = ['cosmic', 'desktop'];
-
-export const BackgroundSelect = ({ type, options, onChange, value }) => {
-    let lists = [];
-    if (options && options.length) {
-        lists = options;
-    } else {
-        const arr = [];
-        Object.keys(backgroundConfig).map((key) => {
-            if (key.includes(type)) {
-                arr.push({
-                    key,
-                    value: backgroundConfig[key],
-                });
-            }
-        });
-        lists = arr;
-    }
-    return (
-        <Radio.Group
-            onChange={(e) => onChange(e.target.value)}
-            value={value}
-            rootClassName={cn(
-                'grid [&_span]:ps-0',
-                isImg.includes(type) ? 'grid-cols-5 gap-y-1.5' : 'grid-cols-7 gap-y-3'
-            )}
-        >
-            {lists.map((item, index) => (
-                <Radio
-                    key={index}
-                    className='[&_.ant-radio]:hidden [&_span]:p-0 mr-0'
-                    value={item.key}
-                >
-                    {isImg.includes(type) ? (
-                        <div className={cn('w-12 h-8 rounded-md overflow-hidden')}>
-                            <img src={`${item.value.class}&w=48`} className='w-full h-full object-cover object-center' />
-                        </div>
-                    ) : (
-                        <div className={cn('w-8 h-8 rounded-full overflow-hidden', item.value.class)}></div>
-                    )}
-                </Radio>
-            ))}
-        </Radio.Group>
-    );
-};

package/src/components/sideBar/CropperImage.jsx

@@ -1,73 +0,0 @@
-import { useState, useRef } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Button, Tooltip, Modal } from 'antd';
-import stores from '@stores';
-import Cropper from "react-cropper";
-import "cropperjs/dist/cropper.css";
-
-export default observer(() => {
-    const cropperRef = useRef(null);
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const handleCrop = () => {
-        setIsModalOpen(true);
-    };
-    const handleOk = () => {
-        if (typeof cropperRef.current?.cropper !== "undefined") {
-            const canvas = cropperRef.current?.cropper.getCroppedCanvas();
-            if (canvas) {
-                const { width, height } = canvas;
-                const imgUrl = canvas.toDataURL();
-                stores.editor.setImg(Object.assign({}, stores.editor.img, {
-                    src: imgUrl,
-                    width,
-                    height,
-                }));
-                if (stores.option.size.type === 'auto') {
-                    const margin = Math.round(width * 0.2);
-                    stores.option.setFrameSize(width + margin, height + margin);
-                }
-            }
-        }
-        setIsModalOpen(false);
-    };
-    const handleCancel = () => {
-        setIsModalOpen(false);
-    };
-    return (
-        <>
-            <Tooltip title='Crop Image'>
-                <Button
-                    type='text'
-                    shape='circle'
-                    icon={<Icon.Crop size={18} />}
-                    onClick={handleCrop}
-                ></Button>
-            </Tooltip>
-            <Modal
-                title='Cropper'
-                open={isModalOpen}
-                onOk={handleOk}
-                onCancel={handleCancel}
-                destroyOnClose={true}
-            >
-                <Cropper
-                    ref={cropperRef}
-                    style={{ height: 400, width: "100%" }}
-                    zoomTo={0.5}
-                    initialAspectRatio={stores.editor.img.width / stores.editor.img.height}
-                    src={stores.editor.img.src}
-                    dragMode="move"
-                    viewMode={1}
-                    minCropBoxHeight={10}
-                    minCropBoxWidth={10}
-                    background={false}
-                    responsive={true}
-                    autoCropArea={1}
-                    checkOrientation={false}
-                    guides={true}
-                />
-            </Modal>
-        </>
-    );
-});

package/src/components/sideBar/CustomSize.jsx

@@ -1,60 +0,0 @@
-import { useState, useEffect } from 'react';
-import Icon from '@components/Icon';
-import { InputNumber, Button, Tooltip } from 'antd';
-
-export default ({ frameWidth, frameHeight, type, onSet }) => {
-    const [width, setWidth] = useState('');
-    const [height, setHeight] = useState('');
-    const setAuto = () => {
-        onSet({ type: 'auto', title: 'Auto' });
-    };
-    const setCustom = () => {
-        onSet({ type: 'custom', title: 'Custom', width, height });
-    };
-    useEffect(() => {
-        if (type === 'custom') {
-            setWidth(frameWidth);
-            setHeight(frameHeight);
-        } else {
-            setWidth('');
-            setHeight('');
-        }
-    }, [type]);
-    return (
-        <div className='flex gap-2 items-center py-2 font-normal'>
-            <InputNumber
-                min={1}
-                value={width}
-                onChange={setWidth}
-                placeholder={frameWidth}
-                prefix={<span className='opacity-60 mx-1'>W</span>}
-                className='flex-1'
-            />
-            <span className='text-xs opacity-50'>x</span>
-            <InputNumber
-                min={1}
-                value={height}
-                onChange={setHeight}
-                placeholder={frameHeight}
-                prefix={<span className='opacity-60 mx-1'>H</span>}
-                className='flex-1'
-            />
-            <Button
-                type='primary'
-                shape='circle'
-                icon={<Icon.Check size={18} />}
-                disabled={!width || !height}
-                onClick={setCustom}
-            ></Button>
-            <Tooltip title="Auto size">
-                <Button
-                    type='primary'
-                    shape='circle'
-                    icon={<Icon.Maximize size={18} />}
-                    disabled={type === 'auto'}
-                    onClick={setAuto}
-                ></Button>
-            </Tooltip>
-        </div>
-    );
-};

package/src/components/sideBar/DownloadBar.jsx

@@ -1,179 +0,0 @@
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Button, Tooltip, Popover, Segmented, ConfigProvider, Popconfirm } from 'antd';
-import stores from '@stores';
-import { toDownloadFile, nanoid, modKey } from '@utils/utils';
-import useKeyboardShortcuts from '@hooks/useKeyboardShortcuts';
-
-export default observer(() => {
-    const [loading, setLoading] = useState(false);
-    const [open, setOpen] = useState(false);
-    const [format, setFormat] = useState('png');
-    const [ratio, setRatio] = useState(1);
-    const handleOpenChange = (newOpen) => {
-        setOpen(newOpen);
-    };
-    const toDownload = async () => {
-        if (!stores.editor.isEditing) return;
-        if (loading) return;
-        const option = {
-            pixelRatio: ratio
-        };
-        if (['jpg', 'webp'].includes(format)) {
-            option.quality = 0.9;
-            option.fill = '#ffffff';
-        }
-        const key = nanoid();
-        setLoading(true);
-        stores.editor.message.open({
-            key,
-            type: 'loading',
-            content: 'Downloading...',
-        });
-        await stores.editor.app.tree.export(format, option).then(result => {
-            let name = `ShotEasy`;
-            if (ratio > 1) name += `@${ ratio }`;
-            toDownloadFile(result.data, `${ name }.${ format }`);
-            stores.editor.message.open({
-                key,
-                type: 'success',
-                content: 'Download Success!',
-            });
-        }).catch(() => {
-            stores.editor.message.open({
-                key,
-                type: 'error',
-                content: 'Download failed!',
-            });
-        })
-        setLoading(false);
-    };
-    const toCopy = async () => {
-        if (!stores.editor.isEditing) return;
-        if (loading) return;
-        const key = nanoid();
-        setLoading(true);
-        stores.editor.message.open({
-            key,
-            type: 'loading',
-            content: 'Copying...',
-        });
-        await stores.editor.app.tree.export('png', { blob: true, pixelRatio: ratio }).then(async result => {
-            const { data } = result;
-            await navigator.clipboard.write([
-                new ClipboardItem({
-                    [data.type]: data,
-                }),
-            ]);
-            stores.editor.message.open({
-                key,
-                type: 'success',
-                content: 'Copy Success!',
-            });
-        }).catch(() => {
-            stores.editor.message.open({
-                key,
-                type: 'error',
-                content: 'Copy failed!',
-            });
-        });
-        setLoading(false);
-    }
-    const confirm = () => {
-        stores.editor.clearImg();
-    }
-    useKeyboardShortcuts(() => toDownload(), () => toCopy(), [toDownload, toCopy]);
-    const content = (<div>
-        <div className="p-2 [&_.ant-segmented]:w-full [&_.ant-segmented-item]:w-[33%]">
-            <div className="text-xs text-gray-400 mb-2">Format</div>
-            <Segmented
-                options={['png', 'jpg' , 'webp']}
-                size="middle"
-                onChange={setFormat}
-            />
-            <div className="text-xs text-gray-400 mt-2 mb-2">Pixel Ratio</div>
-            <Segmented
-                options={[{value: 1, icon: '1x'},{value: 2, icon: '2x'},{value: 3, icon: '3x'}]}
-                size="middle"
-                onChange={setRatio}
-            />
-            {stores.option.frameConf.width &&
-                <div className="text-xs p-3 mt-4 flex justify-between bg-black/5 rounded-md">
-                    <span className="text-gray-400">Download Size</span>
-                    <span className="text-gray-700">{stores.option.frameConf.width * ratio} x {stores.option.frameConf.height * ratio}</span>
-                </div>
-            }
-        </div>
-    </div>)
-    return (
-        <div className='shrink-0 py-4 px-6 flex gap-2 justify-center items-center'>
-            <ConfigProvider
-                theme={{
-                    components: {
-                        Button: {
-                            colorPrimary: '#000',
-                            algorithm: true, // 启用算法
-                        },
-                    },
-                }}
-            >
-                <div className='ant-space-compact flex flex-1'>
-                    <Tooltip placement='top' title={<span>Download {modKey} + S</span>}>
-                        <Button
-                            type='primary'
-                            size='large'
-                            loading={loading}
-                            icon={<Icon.ImageDown size={18} />}
-                            className='rounded-se-none flex-1 rounded-ee-none me-[-1px] hover:z-[1] border-r-white/30'
-                            onClick={toDownload}
-                        >
-                            <div className='leading-4 px-2'>
-                                <div className='text-sm leading-4 font-semibold'>
-                                    Download
-                                </div>
-                                <div className='text-xs'>{ratio}x as {format.toLocaleUpperCase()}</div>
-                            </div>
-                        </Button>
-                    </Tooltip>
-                    <Tooltip placement='top' title={<span>Copy {modKey} + C</span>}>
-                        <Button
-                            type='primary'
-                            size='large'
-                            icon={<Icon.Copy size={18} />}
-                            loading={loading}
-                            className='rounded-ss-none rounded-es-none border-l-white/30'
-                            onClick={toCopy}
-                        />
-                    </Tooltip>
-                </div>
-            </ConfigProvider>
-            <div className="flex items-center gap-1">
-                <Popover
-                    content={content}
-                    trigger='click'
-                    arrow={false}
-                    placement="topRight"
-                    open={open}
-                    overlayStyle={{
-                        width: '320px',
-                    }}
-                    onOpenChange={handleOpenChange}
-                >
-                    <Button size='large' icon={<Icon.Settings2 size={18} />} />
-                </Popover>
-                {stores.editor.img?.src && 
-                    <Popconfirm
-                        title="Delete the screenshot"
-                        description="Are you sure to delete this screenshot?"
-                        onConfirm={confirm}
-                        okText="Yes"
-                        cancelText="No"
-                    >
-                        <Button size='large' icon={<Icon.Trash2 size={18} />} />
-                    </Popconfirm>
-                }
-            </div>
-        </div>
-    );
-});

package/src/components/sideBar/DrawerBar.jsx

@@ -1,64 +0,0 @@
-import { Button, Drawer } from 'antd';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import ColorPicker from '@components/ColorPicker';
-import stores from '@stores';
-import colorSvg from '@assets/color.svg';
-import { BackgroundSelect } from './BackgroundSelect';
-
-export default observer(({ showMore, onChange }) => {
-    const onMoreClose = () => {
-        onChange(false);
-    }
-    const handleCustom = (e) => {
-        const color = e.toHexString();
-        stores.option.frameConf.background = {
-            type: 'solid',
-            color
-        }
-    }
-    const onSelectChange = (key) => {
-        stores.option.setBackground(key);
-    }
-    return (
-        <Drawer
-            title=""
-            placement="right"
-            closable={false}
-            mask={false}
-            onClose={onMoreClose}
-            open={showMore}
-            getContainer={false}
-            width="100%"
-            className="[&_.ant-drawer-body]:p-0"
-        >
-            <div className="flex flex-col gap-2 h-full overflow-hidden">
-                <div className="shrink-0 pt-4 px-4">
-                    <Button
-                        type="text"
-                        size="small"
-                        className="text-xs flex items-center opacity-80 m-0"
-                        icon={<Icon.ChevronLeft size={16} />}
-                        onClick={() => onChange(false)}
-                    >Back</Button>
-                </div>
-                <div className="h-0 flex-1 overflow-y-auto px-4 py-2">
-                    <h4 className="text-sm font-bold py-2">Custom</h4>
-                    <div className="py-1">
-                        <ColorPicker onChange={handleCustom}>
-                            <Button type="default" size="small" shape="circle" icon={<img src={colorSvg} width={18} />} />
-                        </ColorPicker>
-                    </div>
-                    <h4 className="text-sm font-bold py-2">Solid Colors</h4>
-                    <BackgroundSelect type="solid" onChange={onSelectChange} value={stores.option.background} />
-                    <h4 className="text-sm font-bold py-2">Gradients</h4>
-                    <BackgroundSelect type="gradient" onChange={onSelectChange} value={stores.option.background} />
-                    <h4 className="text-sm font-bold py-2">Cosmic Gradients</h4>
-                    <BackgroundSelect type="cosmic" onChange={onSelectChange} value={stores.option.background} />
-                    <h4 className="text-sm font-bold py-2">Desktop</h4>
-                    <BackgroundSelect type="desktop" onChange={onSelectChange} value={stores.option.background} />
-                </div>
-            </div>
-        </Drawer>
-    )
-});

package/src/components/sideBar/Position.jsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Button, Popover } from 'antd';
-import { cn } from '@utils/utils';
-import stores from '@stores';
-
-const cols = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];
-
-export default observer(() => {
-    const [open, setOpen] = useState(false);
-    const hide = () => {
-        setOpen(false);
-    };
-    const handleOpenChange = (newOpen) => {
-        setOpen(newOpen);
-    };
-    const handleSelect = (value) => {
-        stores.option.setAlign(value);
-    }
-    const content = (
-        <div className={cn("flex flex-wrap w-24 position-block", stores.option.align)}>
-            {cols.map(item => (
-                <div key={item} className="w-8 h-8 border border-gray-200 rounded-sm hover:bg-gray-100 cursor-pointer" onClick={() => handleSelect(item)}></div>
-            ))}
-        </div>
-    )
-    return (
-        <Popover
-            content={content}
-            trigger='click'
-            arrow={false}
-            placement="bottomRight"
-            open={open}
-            onOpenChange={handleOpenChange}
-        >
-            <Button
-                type='text'
-                shape='circle'
-                className={cn(open && "shadow-md")}
-                icon={<Icon.LayoutGrid size={18} />}
-            ></Button>
-        </Popover>
-    )
-})

package/src/components/sideBar/SideBar.jsx

@@ -1,131 +0,0 @@
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Button, Slider, Radio } from 'antd';
-import ColorPicker from '@components/ColorPicker';
-import stores from '@stores';
-import backgroundConfig from '@utils/backgroundConfig';
-import { cn } from '@utils/utils';
-import SizeBar from './SizeBar';
-import CropperImage from './CropperImage';
-import Position from './Position';
-import Watermark from './Watermark';
-import DownloadBar from './DownloadBar';
-import DrawerBar from './DrawerBar';
-
-
-export default observer(() => {
-    const [showMore, setShowMore] = useState(false);
-    const onBgChange = (e) => {
-        const key = e.target.value;
-        stores.option.setBackground(key);
-    }
-    return (
-        <div className="bg-white flex flex-col md:w-[340px] border-l border-l-gray-50 shadow-lg relative z-10 select-none">
-            <div className="flex-1 flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden">
-                <SizeBar />
-                <div className="[&_label]:font-semibold pt-2 [&_label]:text-sm">
-                    <label>Quick</label>
-                    <div className="flex gap-4 items-center py-2">
-                        <CropperImage />
-                        <Button
-                            type='text'
-                            shape='circle'
-                            onClick={() => stores.option.toggleFlip('x')}
-                            icon={<Icon.FlipHorizontal2 size={18} />}
-                        ></Button>
-                        <Button
-                            type='text'
-                            shape='circle'
-                            onClick={() => stores.option.toggleFlip('y')}
-                            icon={<Icon.FlipVertical2 size={18} />}
-                        ></Button>
-                        <Position />
-                        {/* Todo */}
-                        {/* <Button
-                            type='text'
-                            shape='circle'
-                            icon={<Icon.Box size={18} />}
-                        ></Button> */}
-                        {/* <Button
-                            type='text'
-                            shape='circle'
-                            icon={<Icon.Sunset size={18} />}
-                        ></Button> */}
-                    </div>
-                </div>
-                <div className="[&_label]:font-semibold [&_label]:text-sm">
-                    <label>Scale</label>
-                    <Slider
-                        min={0.1}
-                        max={2}
-                        step={0.1}
-                        onChange={(e) => stores.option.setScale(e)}
-                        value={typeof stores.option.scale === 'number' ? stores.option.scale : 1}
-                    />
-                </div>
-                <div className="[&_label]:font-semibold [&_label]:text-sm">
-                    <div className="flex justify-between">
-                        <label>Padding</label>
-                        <ColorPicker value={stores.option.paddingBg} onChange={(e) => stores.option.setPaddingBg(e.toRgbString())} size="small" />
-                    </div>
-                    <Slider
-                        min={0}
-                        max={60}
-                        onChange={(e) => stores.option.setPadding(e)}
-                        value={typeof stores.option.padding === 'number' ? stores.option.padding : 0}
-                    />
-                </div>
-                <div className="[&_label]:font-semibold [&_label]:text-sm">
-                    <label>Rounded</label>
-                    <Slider
-                        min={0}
-                        max={20}
-                        onChange={(e) => stores.option.setRound(e)}
-                        value={typeof stores.option.round === 'number' ? stores.option.round : 0}
-                    />
-                </div>
-                <div className="[&_label]:font-semibold [&_label]:text-sm">
-                    <label>Shadow</label>
-                    <Slider
-                        min={0}
-                        max={6}
-                        onChange={(e) => stores.option.setShadow(e)}
-                        value={typeof stores.option.shadow === 'number' ? stores.option.shadow : 0}
-                    />
-                </div>
-                <div className="[&_label]:font-semibold [&_label]:text-sm">
-                    <div className="flex justify-between items-center">
-                        <label>Background</label>
-                        <Button
-                            type="text"
-                            size="small"
-                            className="text-xs flex items-center opacity-80 m-0"
-                            onClick={() => setShowMore(true)}
-                        >More <Icon.ChevronRight size={16} /></Button>
-                    </div>
-                    <div className="py-3">
-                        <Radio.Group
-                            onChange={onBgChange} value={stores.option.background}
-                            rootClassName="grid grid-cols-7 [&_span]:ps-0"
-                        >
-                            <Radio className="[&_.ant-radio]:hidden [&_span]:p-0 mr-0" value='default_1'>
-                                <div className={cn("w-8 h-8 rounded-full", backgroundConfig.default_1.class)}></div>
-                            </Radio>
-                            {Object.keys(backgroundConfig).map((key) => {
-                                if (key.includes('default') && key !== 'default_1') return (
-                                    <Radio key={key} className="[&_.ant-radio]:hidden [&_span]:p-0 mr-0" value={key}>
-                                        <div className={cn("w-8 h-8 rounded-full", backgroundConfig[key].class)}></div>
-                                    </Radio>
-                                )
-                            })}
-                        </Radio.Group>
-                    </div>
-                </div>
-                <Watermark />
-            </div>
-            <DownloadBar />
-            <DrawerBar showMore={showMore} onChange={setShowMore} />
-        </div>
-    )
-});