image-beautifier 1.0.0

package/src/components/sideBar/BackgroundSelect.jsx

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,179 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,131 @@
+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>
+    )
+});