@onesy/ui-react 1.0.0

package/Drawing/Drawing.js

@@ -0,0 +1,532 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialDeleteSweepW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialDeleteSweepW100"));
+const IconMaterialDownloadW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialDownloadW100"));
+const IconMaterialCropLandscapeW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCropLandscapeW100"));
+const IconMaterialPaletteW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPaletteW100"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const Type_1 = __importDefault(require("../Type"));
+const Button_1 = __importDefault(require("../Button"));
+const Line_1 = __importDefault(require("../Line"));
+const Select_1 = __importDefault(require("../Select"));
+const NumericTextField_1 = __importDefault(require("../NumericTextField"));
+const ToggleButtons_1 = __importDefault(require("../ToggleButtons"));
+const Divider_1 = __importDefault(require("../Divider"));
+const ToggleButton_1 = __importDefault(require("../ToggleButton"));
+const ColorTextField_1 = __importDefault(require("../ColorTextField"));
+const Append_1 = __importDefault(require("../Append"));
+const Fade_1 = __importDefault(require("../Fade"));
+const ClickListener_1 = __importDefault(require("../ClickListener"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative'
+    },
+    methods: {
+        position: 'absolute',
+        right: '8px',
+        bottom: '8px',
+        padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
+    },
+    svg: {
+        display: 'block',
+        margin: '12px',
+        cursor: 'none',
+        touchAction: 'none',
+        boxShadow: theme.shadows.values.default[1],
+        background: theme.palette.color.neutral[100]
+    },
+    toolbars: {
+        width: '100%'
+    },
+    toolbar: {
+        width: '100%',
+        overflowX: 'auto',
+        padding: theme.methods.space.value(1, 'px')
+    },
+    modal: {
+        padding: theme.methods.space.value(1.5, 'px'),
+        borderRadius: theme.methods.shape.radius.value(1, 'px'),
+        boxShadow: theme.shadows.values.default[2]
+    },
+    palette: {
+        padding: theme.methods.space.value(1.5, 'px'),
+        borderRadius: theme.methods.shape.radius.value(1, 'px'),
+        boxShadow: theme.shadows.values.default[2]
+    },
+    paletteItem: {
+        position: 'relative',
+        width: '17px',
+        height: '17px',
+        cursor: 'pointer',
+        borderRadius: theme.methods.shape.radius.value(40, 'px'),
+        boxShadow: theme.shadows.values.default[1],
+        transition: theme.methods.transitions.make('box-shadow'),
+        '&:hover': {
+            boxShadow: theme.shadows.values.default[2],
+        }
+    },
+    textFieldColor: {
+        flex: '1 1 auto'
+    },
+    inputColor: {
+        border: 'none',
+        borderRadius: theme.methods.shape.radius.value(40, 'px'),
+        overflow: 'hidden',
+        width: '17px',
+        height: '17px',
+        cursor: 'pointer',
+        boxShadow: theme.shadows.values.default[1],
+        '&::-webkit-color-swatch-wrapper': {
+            padding: '0px'
+        },
+        '&::-webkit-color-swatch': {
+            border: 'none'
+        }
+    },
+    divider: {
+        '&.onesy-Divider-root': {
+            margin: '0'
+        }
+    },
+    divider_middle: {
+        '&.onesy-Divider-root': {
+            opacity: theme.palette.light ? '0.07' : '0.24'
+        }
+    },
+    divider_end: {
+        '&.onesy-Divider-root': {
+            opacity: theme.palette.light ? '0.14' : '0.4'
+        }
+    },
+}), { name: 'onesy-Drawing' });
+const Drawing = react_1.default.forwardRef((props__, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyDrawing) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
+    const Select = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Select) || Select_1.default; }, [theme]);
+    const NumericTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NumericTextField) || NumericTextField_1.default; }, [theme]);
+    const ToggleButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ToggleButton) || ToggleButton_1.default; }, [theme]);
+    const ToggleButtons = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ToggleButtons) || ToggleButtons_1.default; }, [theme]);
+    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
+    const ColorTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ColorTextField) || ColorTextField_1.default; }, [theme]);
+    const Append = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Append) || Append_1.default; }, [theme]);
+    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
+    const ClickListener = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ClickListener) || ClickListener_1.default; }, [theme]);
+    const { tonal = true, color = 'default', version = 'filled', render, updates = true, actions = true, exclude, downloadName = `onesy-drawing.png`, downloadType = 'image/png', downloadQuality = 1, viewBox = '0 0 340 140', strokeColor = '#000000', strokeWidth = 1, svgRef, valueDefault, value: value_, onChange, onMouseDown: onMouseDown_, onClear: onClear_, onDownload: onDownload_, IconClear = IconMaterialDeleteSweepW100_1.default, IconDownload = IconMaterialDownloadW100_1.default, IconSize = IconMaterialCropLandscapeW100_1.default, IconStrokeColor = IconMaterialPaletteW100_1.default, IconProps: IconProps_, SizeProps, AppendProps: AppendProps_, ToolbarProps, ToolbarUpdatesProps, ToolbarActionsProps, ToggleButtonProps: ToggleButtonProps_, ToggleButtonsProps: ToggleButtonsProps_, DividerProps: DividerProps_, SelectProps: SelectProps_, ListItemProps: ListItemProps_, TooltipProps: TooltipProps_, PaletteProps, IconButtonProps, ColorTextFieldProps, Component = 'div', className } = props, other = __rest(props, ["tonal", "color", "version", "render", "updates", "actions", "exclude", "downloadName", "downloadType", "downloadQuality", "viewBox", "strokeColor", "strokeWidth", "svgRef", "valueDefault", "value", "onChange", "onMouseDown", "onClear", "onDownload", "IconClear", "IconDownload", "IconSize", "IconStrokeColor", "IconProps", "SizeProps", "AppendProps", "ToolbarProps", "ToolbarUpdatesProps", "ToolbarActionsProps", "ToggleButtonProps", "ToggleButtonsProps", "DividerProps", "SelectProps", "ListItemProps", "TooltipProps", "PaletteProps", "IconButtonProps", "ColorTextFieldProps", "Component", "className"]);
+    const { classes } = useStyle();
+    const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_) || []);
+    const [mouseDown, setMouseDown] = react_1.default.useState(false);
+    const [move, setMove] = react_1.default.useState({});
+    const [loading, setLoading] = react_1.default.useState(false);
+    const [inputValues, setInputValues] = react_1.default.useState({
+        viewBox: '0 0 340 140',
+        width: 340,
+        widthInput: 340,
+        height: 140,
+        heightInput: 140,
+        strokeWidth: 1,
+        strokeColor: '#000000'
+    });
+    const [open, setOpen] = react_1.default.useState({});
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        inputValues: react_1.default.useRef(undefined),
+        svg: react_1.default.useRef(undefined),
+        value: react_1.default.useRef(undefined),
+        mouseDown: react_1.default.useRef(undefined),
+        props: react_1.default.useRef(undefined),
+        move: react_1.default.useRef(undefined),
+        download: react_1.default.useRef(undefined),
+        open: react_1.default.useRef(undefined),
+        elements: {
+            size: react_1.default.useRef(undefined),
+            strokeColor: react_1.default.useRef(undefined)
+        }
+    };
+    refs.value.current = value;
+    refs.open.current = open;
+    refs.props.current = props;
+    refs.inputValues.current = inputValues;
+    refs.download.current = {
+        name: downloadName,
+        type: downloadType,
+        quality: downloadQuality
+    };
+    refs.mouseDown.current = mouseDown;
+    refs.move.current = move;
+    const updateValue = (valueNew) => {
+        if (!props.hasOwnProperty('value'))
+            setValue(valueNew);
+        if ((0, utils_1.is)('function', onChange))
+            onChange(valueNew);
+    };
+    const updateInputValues = (property, itemValue) => {
+        setInputValues(values => (Object.assign(Object.assign({}, values), { [property]: itemValue })));
+    };
+    const updateOpen = (property, itemValue) => {
+        setOpen(values => (Object.assign(Object.assign({}, values), { [property]: itemValue })));
+    };
+    react_1.default.useEffect(() => {
+        var _a;
+        const onMouseUp = () => {
+            if (refs.mouseDown.current)
+                setMouseDown(false);
+        };
+        const onMouseMove = (event) => {
+            var _a;
+            const x = event.clientX;
+            const y = event.clientY;
+            const rect = (_a = refs.svg.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!rect)
+                return;
+            const { x: xRoot, y: yRoot } = rect;
+            const valueMove = {
+                x: x - xRoot,
+                y: y - yRoot
+            };
+            update(valueMove);
+        };
+        const onTouchMove = (event) => {
+            var _a;
+            const x = event.touches[0].clientX;
+            const y = event.touches[0].clientY;
+            const rect = (_a = refs.svg.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!rect)
+                return;
+            const { x: xRoot, y: yRoot } = rect;
+            const valueMove = {
+                x: x - xRoot,
+                y: y - yRoot
+            };
+            update(valueMove);
+        };
+        const update = (valueNew) => {
+            var _a, _b;
+            if (refs.mouseDown.current) {
+                // Update
+                // relative value from the previous one how much x and y moved
+                const x = valueNew === null || valueNew === void 0 ? void 0 : valueNew.x;
+                const y = valueNew === null || valueNew === void 0 ? void 0 : valueNew.y;
+                const previous = (_a = refs.value.current) === null || _a === void 0 ? void 0 : _a[((_b = refs.value.current) === null || _b === void 0 ? void 0 : _b.length) - 1];
+                if (previous) {
+                    if (!(x === 0 && y === 0)) {
+                        previous.d += ` ${x},${y}`;
+                        updateValue([...refs.value.current]);
+                    }
+                }
+            }
+            setMove(valueNew);
+        };
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument.addEventListener('mouseup', onMouseUp);
+        rootDocument.addEventListener('mousemove', onMouseMove);
+        rootDocument.addEventListener('touchend', onMouseUp, { passive: true });
+        rootDocument.addEventListener('touchmove', onTouchMove);
+        return () => {
+            rootDocument.removeEventListener('mouseup', onMouseUp);
+            rootDocument.removeEventListener('touchend', onMouseUp);
+            rootDocument.removeEventListener('mousemove', onMouseMove);
+            rootDocument.removeEventListener('touchmove', onTouchMove);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        if (value_ !== refs.value.current)
+            setValue(value_);
+    }, [value_]);
+    react_1.default.useEffect(() => {
+        if (strokeColor !== undefined && strokeColor !== refs.inputValues.current.strokeColor)
+            updateInputValues('strokeColor', strokeColor);
+        if (strokeWidth !== undefined && strokeWidth !== refs.inputValues.current.strokeWidth)
+            updateInputValues('strokeWidth', strokeWidth);
+    }, [strokeColor, strokeWidth]);
+    react_1.default.useEffect(() => {
+        if (viewBox !== undefined && viewBox !== refs.inputValues.current.viewBox) {
+            updateInputValues('viewBox', viewBox);
+            updateInputValues('width', viewBox.split(' ')[2]);
+            updateInputValues('height', viewBox.split(' ')[3]);
+        }
+    }, [viewBox]);
+    const onMouseDown = react_1.default.useCallback((event) => {
+        setMouseDown(true);
+        let x = event.touches ? event.touches[0].clientX : event.clientX;
+        let y = event.touches ? event.touches[0].clientY : event.clientY;
+        const rect = refs.svg.current.getBoundingClientRect();
+        x -= rect.x;
+        y -= rect.y;
+        setMove({ x, y });
+        // Create new value path
+        updateValue([
+            ...(refs.value.current || []),
+            {
+                d: `M ${x},${y} L ${x} ${y}`,
+                stroke: refs.inputValues.current.strokeColor,
+                strokeWidth: refs.inputValues.current.strokeWidth
+            }
+        ]);
+        if ((0, utils_1.is)('function', onMouseDown_))
+            onMouseDown_(event);
+    }, []);
+    const onClear = react_1.default.useCallback(() => {
+        updateValue([]);
+        if ((0, utils_1.is)('function', onClear_))
+            onClear_();
+    }, []);
+    const onDownload = react_1.default.useCallback(async () => {
+        var _a;
+        const svg = refs.svg.current;
+        const rect = svg.getBoundingClientRect();
+        // Clean up
+        const clone = svg.cloneNode(true);
+        clone.style.margin = '0px';
+        clone.style.boxShadow = 'none';
+        if ((_a = refs.download.current.type) === null || _a === void 0 ? void 0 : _a.includes('png')) {
+            clone.style.background = 'transparent';
+        }
+        try {
+            setLoading(true);
+            await (0, utils_1.elementToCanvas)(clone, {
+                response: 'download',
+                filter: ['.onesy-Drawing-pointer'],
+                download: refs.download.current,
+                width: rect.width,
+                height: rect.height
+            });
+        }
+        catch (error) { }
+        setLoading(false);
+        if ((0, utils_1.is)('function', onDownload_))
+            onDownload_();
+    }, []);
+    const includes = (...args) => !(0, utils_1.is)('array', exclude) || args.some(item => !exclude.includes(item));
+    // updates toolbar
+    const updateOptions = ['stroke-color', 'stroke-width', 'size'];
+    const updates_ = updates && (!(0, utils_1.is)('array', exclude) || includes(...updateOptions));
+    // action toolbar
+    const actions_ = actions && (!(0, utils_1.is)('array', exclude) || includes('clear', 'download'));
+    const AppendProps = Object.assign({ padding: [14, 14] }, AppendProps_);
+    const DividerProps = Object.assign({ color: 'inherit' }, DividerProps_);
+    const TooltipProps = Object.assign({ position: 'bottom', interactive: false }, TooltipProps_);
+    const ToggleButtonsProps = Object.assign({ tonal,
+        color, version: 'text', border: false }, ToggleButtonsProps_);
+    const ToggleButtonProps = Object.assign({ size: 'small' }, ToggleButtonProps_);
+    const SelectProps = Object.assign({ tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', version: 'outlined', size: 'small', ListProps: {
+            tonal,
+            color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed'
+        }, MenuProps: {
+            portal: true
+        } }, SelectProps_);
+    const ListItemProps = Object.assign({ size: 'small', PrimaryProps: {
+            style: {
+                fontFamily: 'inherit'
+            }
+        } }, ListItemProps_);
+    const IconProps = Object.assign({ size: 'small' }, IconProps_);
+    const WrapperToggleButton = react_1.default.useCallback(react_1.default.forwardRef((props_, ref_) => {
+        const { open: open_, label, children } = props_, other_ = __rest(props_, ["open", "label", "children"]);
+        return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, label: label }, TooltipProps, { children: react_1.default.cloneElement(children, Object.assign(Object.assign({}, other_), children.props)) })));
+    }), []);
+    const WrapperAppend = react_1.default.useCallback((props_) => {
+        const { open: open_, element, anchorElement, onClose, children } = props_, other_ = __rest(props_, ["open", "element", "anchorElement", "onClose", "children"]);
+        return ((0, jsx_runtime_1.jsx)(Append, Object.assign({ open: open_, element: ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open_, add: true }, { children: react_1.default.cloneElement(element) })) })), anchorElement: anchorElement, portal: true, alignment: 'center', position: 'bottom' }, AppendProps, { children: react_1.default.cloneElement(children, Object.assign(Object.assign({}, other_), children.props)) })));
+    }, []);
+    const PaletteItem = react_1.default.useCallback((props_) => {
+        const { color: color_ } = props_, other_ = __rest(props_, ["color"]);
+        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('Drawing', theme) && [
+                    'onesy-Drawing-palette-item'
+                ],
+                classes.paletteItem
+            ]), style: {
+                background: color_
+            } }, other_)));
+    }, []);
+    const Palette = react_1.default.useCallback(react_1.default.forwardRef((props_, ref_) => {
+        const { version: version_, onUpdate, onClose } = props_, other_ = __rest(props_, ["version", "onUpdate", "onClose"]);
+        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref_, gap: 1, direction: 'column', tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('Drawing', theme) && [
+                    'onesy-Drawing-palette'
+                ],
+                classes.palette
+            ]) }, other_, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5 }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
+                                width: '100%'
+                            } }, { children: [(0, jsx_runtime_1.jsx)(PaletteItem, { color: '#000000', onClick: () => {
+                                        onUpdate('#000000');
+                                        onClose();
+                                    } }), (0, jsx_runtime_1.jsx)(PaletteItem, { color: '#ffffff', onClick: () => {
+                                        onUpdate('#ffffff');
+                                        onClose();
+                                    } })] })), Object.keys(style_react_1.colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
+                                width: '100%'
+                            } }, { children: Object.keys(style_react_1.colors[item]).map((item_, index_) => ((0, jsx_runtime_1.jsx)(PaletteItem, { color: style_react_1.colors[item][item_], onClick: () => {
+                                    onUpdate(style_react_1.colors[item][item_]);
+                                    onClose();
+                                } }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
+                        width: '100%'
+                    } }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color, label: 'Custom color', version: 'outlined', size: 'small', value: refs.inputValues.current[version_], onChange: valueNew => updateInputValues(version_, valueNew) }, ColorTextFieldProps, { className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('Drawing', theme) && [
+                                    'onesy-Drawing-text-field-color'
+                                ],
+                                ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className,
+                                classes.textFieldColor
+                            ]) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: 'inherit', version: 'text', size: 'small', onClick: () => {
+                                onUpdate(refs.inputValues.current[version_]);
+                                onClose();
+                            } }, { children: "Apply" }))] }))] })));
+    }), []);
+    const valueNew_ = ((0, utils_1.is)('array', value) ? value : [value]).filter(Boolean);
+    const valueNewActive = mouseDown && valueNew_[valueNew_.length - 1];
+    const circleStrokeWidth = +(valueNewActive ? valueNewActive.strokeWidth : refs.inputValues.current.strokeWidth);
+    const stroke_width = [
+        {
+            label: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 14,
+                            height: 1,
+                            background: theme.palette.text.default.primary
+                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "1" }))] }))),
+            value: 1
+        },
+        {
+            label: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 14,
+                            height: 2,
+                            background: theme.palette.text.default.primary
+                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "2" }))] }))),
+            value: 2
+        },
+        {
+            label: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 14,
+                            height: 4,
+                            background: theme.palette.text.default.primary
+                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "4" }))] }))),
+            value: 4
+        },
+        {
+            label: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 14,
+                            height: 8,
+                            background: theme.palette.text.default.primary
+                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: "8" }))] }))),
+            value: 8
+        }
+    ];
+    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, tonal: tonal, color: color, version: version, Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Drawing', theme) && [
+                'onesy-Drawing-root',
+                updates && `onesy-Drawing-updates`,
+                actions && `onesy-Drawing-actions`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [(updates || actions_) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ tonal: tonal, color: color, version: version, gap: 0, direction: 'column', align: 'unset', justify: 'unset', Component: Surface }, ToolbarProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Drawing', theme) && [
+                        'onesy-Drawing-toolbars'
+                    ],
+                    ToolbarProps === null || ToolbarProps === void 0 ? void 0 : ToolbarProps.className,
+                    classes.toolbars
+                ]) }, { children: [updates_ && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, ToolbarUpdatesProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Drawing', theme) && [
+                                'onesy-Drawing-toolbar'
+                            ],
+                            ToolbarUpdatesProps === null || ToolbarUpdatesProps === void 0 ? void 0 : ToolbarUpdatesProps.className,
+                            classes.toolbar,
+                            classes.toolbar_updates
+                        ]) }, { children: [includes('stroke-width') && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('stroke-width') && ((0, jsx_runtime_1.jsx)(Select, Object.assign({ label: 'Stroke Width', valueDefault: stroke_width.find(item => String(item.value).includes('1')).value, value: inputValues['strokeWidth'], onChange: (valueNew) => updateInputValues('strokeWidth', valueNew) }, SelectProps, { className: (0, style_react_1.classNames)([
+                                        (0, utils_2.staticClassName)('Drawing', theme) && [
+                                            'onesy-Drawing-select'
+                                        ],
+                                        SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.className,
+                                        classes.select
+                                    ]), style: {
+                                        minWidth: '90px'
+                                    } }, { children: stroke_width.map(item => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: item.label, value: item.value, button: true }, ListItemProps), item.value))) }))) }))), includes('stroke-color') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('stroke-color') && ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.strokeColor, anchorElement: refs.elements.strokeColor.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('strokeColor', false), include: [refs.elements.strokeColor, refs.elements.strokeColor.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, Object.assign({ onClose: () => updateOpen('strokeColor', false), onUpdate: (valueNew) => updateInputValues('strokeColor', valueNew) }, PaletteProps)) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Stroke Color', open: refs.open.current.strokeColor ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('stroke-color', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.strokeColor }, ToggleButtonProps, { selected: refs.open.current.strokeColor, onClick: () => updateOpen('strokeColor', !refs.open.current.strokeColor) }, { children: (0, jsx_runtime_1.jsx)(IconStrokeColor, Object.assign({}, IconProps)) }))) })) }))) }))), includes('size') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('size') && ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.size, anchorElement: refs.elements.size.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('size', false), include: [refs.elements.size] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
+                                                (0, utils_2.staticClassName)('Drawing', theme) && [
+                                                    'onesy-Drawing-modal'
+                                                ],
+                                                classes.modal
+                                            ]) }, SizeProps, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { label: 'Width', tonal: tonal, color: color, size: 'small', version: 'outlined', min: 1, increment: false, decrement: false, value: refs.inputValues.current.widthInput, onChange: valueNew => updateInputValues('widthInput', !valueNew ? 1 : valueNew) }), "\u00D7", (0, jsx_runtime_1.jsx)(NumericTextField, { label: 'Height', tonal: tonal, color: color, size: 'small', version: 'outlined', min: 1, increment: false, decrement: false, value: refs.inputValues.current.heightInput, onChange: valueNew => updateInputValues('heightInput', !valueNew ? 1 : valueNew) })] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-end', style: {
+                                                        width: '100%'
+                                                    } }, { children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: 'inherit', version: 'text', size: 'small', onClick: () => {
+                                                            var _a;
+                                                            const viewBox_ = (_a = refs.inputValues.current.viewBox) === null || _a === void 0 ? void 0 : _a.split(' ');
+                                                            if (viewBox_) {
+                                                                viewBox_[2] = refs.inputValues.current.widthInput;
+                                                                viewBox_[3] = refs.inputValues.current.heightInput;
+                                                            }
+                                                            updateInputValues('viewBox', viewBox_.join(' '));
+                                                            updateInputValues('width', refs.inputValues.current.widthInput);
+                                                            updateInputValues('height', refs.inputValues.current.heightInput);
+                                                            updateOpen('size', false);
+                                                        } }, { children: "Update" })) }))] })) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Size', open: refs.open.current.size ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('size', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.size }, ToggleButtonProps, { selected: refs.open.current.size, onClick: () => updateOpen('size', !refs.open.current.size) }, { children: (0, jsx_runtime_1.jsx)(IconSize, Object.assign({}, IconProps)) }))) })) }))) })))] }))), (updates_ && actions_) && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Drawing', theme) && [
+                                'onesy-Drawing-divider'
+                            ],
+                            DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
+                            classes.divider,
+                            classes.divider_middle
+                        ]) }))), actions_ && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, ToolbarActionsProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Drawing', theme) && [
+                                'onesy-Drawing-toolbar'
+                            ],
+                            ToolbarActionsProps === null || ToolbarActionsProps === void 0 ? void 0 : ToolbarActionsProps.className,
+                            classes.toolbar,
+                            classes.toolbar_actions
+                        ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', style: {
+                                width: '100%'
+                            } }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('clear') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('clear') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Clear' }, { children: (0, utils_1.is)('function', render) ? render('clear', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: onClear }, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))) }))) }))) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('download') && ((0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: includes('download') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ label: 'Download' }, { children: (0, utils_1.is)('function', render) ? render('download', ToggleButtonProps, refs.value.current) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { loading: loading, onClick: onDownload }, { children: (0, jsx_runtime_1.jsx)(IconDownload, Object.assign({}, IconProps)) }))) }))) }))) }))] })) }))), (0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Drawing', theme) && [
+                                'onesy-Drawing-divider'
+                            ],
+                            DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
+                            classes.divider,
+                            classes.divider_end
+                        ]) }))] }))), (0, jsx_runtime_1.jsxs)("svg", Object.assign({ ref: item => {
+                    if (svgRef)
+                        svgRef.current = item;
+                    refs.svg.current = item;
+                }, viewBox: refs.inputValues.current.viewBox, onMouseDown: onMouseDown, onTouchStart: onMouseDown, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Drawing', theme) && [
+                        'onesy-Drawing-svg'
+                    ],
+                    classes.svg
+                ]), style: {
+                    width: refs.inputValues.current.width,
+                    height: refs.inputValues.current.height
+                } }, { children: [valueNew_.map((item, index) => ((0, jsx_runtime_1.jsx)("path", Object.assign({ fill: 'none' }, item), index))), (0, jsx_runtime_1.jsx)("circle", { className: 'onesy-Drawing-pointer', cx: move === null || move === void 0 ? void 0 : move.x, cy: move === null || move === void 0 ? void 0 : move.y, r: circleStrokeWidth + 1, fill: refs.inputValues.current.strokeColor })] }))] })));
+});
+Drawing.displayName = 'onesy-Drawing';
+exports.default = Drawing;

package/Drawing/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Drawing';

package/Drawing/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Drawing_1 = require("./Drawing");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Drawing_1).default; } });

package/Drawing/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Drawing/index.js",
+  "types": "./index.d.ts"
+}

package/DropZone/DropZone.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IFileChoose } from '../FileChoose/FileChoose';
+import { IElement, IVersion } from '../types';
+export interface IDropZone extends IFileChoose {
+    version?: IVersion;
+    start?: IElement;
+    onFocus?: (event: React.FocusEvent<any>) => any;
+    onBlur?: (event: React.FocusEvent<any>) => any;
+    onDrop?: (event: React.DragEvent<any>) => any;
+    onDragOver?: (event: React.DragEvent<any>) => any;
+    onDragEnter?: (event: React.DragEvent<any>) => any;
+    onDragLeave?: (event: React.DragEvent<any>) => any;
+}
+declare const DropZone: React.FC<IDropZone>;
+export default DropZone;