@amaui/ui-react
Version:
UI for React
533 lines (532 loc) • 39.6 kB
JavaScript
"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("@amaui/utils");
const style_react_1 = require("@amaui/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: {
'&.amaui-Divider-root': {
margin: '0'
}
},
divider_middle: {
'&.amaui-Divider-root': {
opacity: theme.palette.light ? '0.07' : '0.24'
}
},
divider_end: {
'&.amaui-Divider-root': {
opacity: theme.palette.light ? '0.14' : '0.4'
}
},
}), { name: 'amaui-Drawing' });
const Drawing = react_1.default.forwardRef((props__, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
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.amauiDrawing) === 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 = `amaui-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: ['.amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-Drawing-root',
updates && `amaui-Drawing-updates`,
actions && `amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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: 'amaui-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 = 'amaui-Drawing';
exports.default = Drawing;