seat-editor 3.5.8 → 3.5.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y, } from "../../features/board-v3/constant";
|
|
3
4
|
import { useAppSelector } from "../../hooks/use-redux";
|
|
4
5
|
import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
|
|
5
6
|
const { Option } = Select;
|
|
@@ -44,13 +45,14 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
44
45
|
const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
|
|
45
46
|
return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
|
|
46
47
|
const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
|
|
47
|
-
return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
|
|
48
|
-
`Type 5 (only for 4 ${seatKey})`
|
|
49
|
-
|
|
48
|
+
return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
|
|
49
|
+
? `Type 5 (only for 4 ${seatKey})`
|
|
50
|
+
: item.label }, item.value));
|
|
51
|
+
}) }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, name: "width", min: MIN_WIDTH, step: 1, parser: (value) => {
|
|
50
52
|
var _a;
|
|
51
53
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
52
54
|
return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
|
|
53
|
-
} }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, step: 1, name: "height", parser: (value) => {
|
|
55
|
+
} }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, step: 1, name: "height", min: MIN_HEIGHT, parser: (value) => {
|
|
54
56
|
var _a;
|
|
55
57
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
56
58
|
return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
|
|
@@ -58,7 +60,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
58
60
|
var _a;
|
|
59
61
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
60
62
|
return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
|
|
61
|
-
} }) }))] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, { name: "x", step: 1 }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, { name: "y", step: 1 }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, step: 1, max: 360, name: "rotation", parser: (value) => {
|
|
63
|
+
} }) }))] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, { name: "x", step: 1, min: MIN_X }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, { name: "y", step: 1, min: MIN_Y }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, step: 1, max: 360, name: "rotation", parser: (value) => {
|
|
62
64
|
if (!value)
|
|
63
65
|
return 0;
|
|
64
66
|
const num = Number(value.replace(/\D/g, ""));
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y, } from "../../features/board-v3/constant";
|
|
2
3
|
import { useAppSelector } from "../../hooks/use-redux";
|
|
3
4
|
import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
|
|
4
5
|
const { Option } = Select;
|
|
@@ -49,8 +50,9 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
49
50
|
{optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
|
|
50
51
|
const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
|
|
51
52
|
return (<Option key={item.value} value={item.value} disabled={disabled}>
|
|
52
|
-
{item.value === "table-seat-rect-circle"
|
|
53
|
-
`Type 5 (only for 4 ${seatKey})`
|
|
53
|
+
{item.value === "table-seat-rect-circle"
|
|
54
|
+
? `Type 5 (only for 4 ${seatKey})`
|
|
55
|
+
: item.label}
|
|
54
56
|
</Option>);
|
|
55
57
|
})}
|
|
56
58
|
</Select>
|
|
@@ -58,14 +60,14 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
58
60
|
</Flex>)}
|
|
59
61
|
<Flex gap={2} className="w-full">
|
|
60
62
|
<Form.Item label="Width" name="width" className="w-full">
|
|
61
|
-
<InputNumber suffix="px" controls name="width" step={1} parser={(value) => {
|
|
63
|
+
<InputNumber suffix="px" controls name="width" min={MIN_WIDTH} step={1} parser={(value) => {
|
|
62
64
|
var _a;
|
|
63
65
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
64
66
|
return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
|
|
65
67
|
}}/>
|
|
66
68
|
</Form.Item>
|
|
67
69
|
<Form.Item label="Height" name="height" className="w-full">
|
|
68
|
-
<InputNumber suffix="px" controls step={1} name="height" parser={(value) => {
|
|
70
|
+
<InputNumber suffix="px" controls step={1} name="height" min={MIN_HEIGHT} parser={(value) => {
|
|
69
71
|
var _a;
|
|
70
72
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
71
73
|
return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
|
|
@@ -81,10 +83,10 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
81
83
|
</Flex>
|
|
82
84
|
<Flex gap={2}>
|
|
83
85
|
<Form.Item label="Position X" name="x" className="w-full">
|
|
84
|
-
<InputNumber name="x" step={1}/>
|
|
86
|
+
<InputNumber name="x" step={1} min={MIN_X}/>
|
|
85
87
|
</Form.Item>
|
|
86
88
|
<Form.Item label="Position Y" name="y" className="w-full">
|
|
87
|
-
<InputNumber name="y" step={1}/>
|
|
89
|
+
<InputNumber name="y" step={1} min={MIN_Y}/>
|
|
88
90
|
</Form.Item>
|
|
89
91
|
<Form.Item label="Rotation" name="rotation" className="w-full">
|
|
90
92
|
<InputNumber suffix="°" min={0} step={1} max={360} name="rotation" parser={(value) => {
|
|
@@ -4,6 +4,7 @@ import { optionsShape } from "../../components/form-tools/shape";
|
|
|
4
4
|
import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
|
|
5
5
|
import { useAppSelector } from "../../hooks/use-redux";
|
|
6
6
|
import { useFormPlaceholder } from ".";
|
|
7
|
+
import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
|
|
7
8
|
const { Option } = Select;
|
|
8
9
|
const SelectedGroup = () => {
|
|
9
10
|
var _a;
|
|
@@ -38,13 +39,13 @@ const SelectedGroup = () => {
|
|
|
38
39
|
return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
|
|
39
40
|
? `Type 5 (only for 4 ${seatKey})`
|
|
40
41
|
: item.label }, item.value));
|
|
41
|
-
}) }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width",
|
|
42
|
+
}) }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width", min: MIN_WIDTH, placeholder: placeholders["width"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "height", min: MIN_HEIGHT, placeholder: placeholders["height"], style: { width: "100%" } }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "radius", suffix: "px", style: { width: "100%" }, placeholder: placeholders["radius"], parser: (value) => {
|
|
42
43
|
var _a;
|
|
43
44
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
44
45
|
return onlyNumber === ""
|
|
45
46
|
? 1
|
|
46
47
|
: Math.max(1, Number(onlyNumber));
|
|
47
|
-
} }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, vertical: true, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { placeholder: placeholders["x"], style: { width: "100%" }, suffix: "px", name: "x" }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "y", placeholder: placeholders["y"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "rotation", suffix: "\u00B0", max: 360, min: 0, style: { width: "100%" }, placeholder: placeholders["rotation"] }) })] }) })), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { vertical: true, children: [_jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "strokeWidth", suffix: "px", style: { width: "100%" }, placeholder: placeholders["strokeWidth"] }) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { style: { width: "100%" }, step: 10, max: 100, min: 0, placeholder: placeholders["opacity"], parser: (value) => {
|
|
48
|
+
} }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, vertical: true, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { placeholder: placeholders["x"], style: { width: "100%" }, min: MIN_X, suffix: "px", name: "x" }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "y", min: MIN_Y, placeholder: placeholders["y"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "rotation", suffix: "\u00B0", max: 360, min: 0, style: { width: "100%" }, placeholder: placeholders["rotation"] }) })] }) })), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { vertical: true, children: [_jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "strokeWidth", suffix: "px", style: { width: "100%" }, placeholder: placeholders["strokeWidth"] }) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { style: { width: "100%" }, step: 10, max: 100, min: 0, placeholder: placeholders["opacity"], parser: (value) => {
|
|
48
49
|
if (value === undefined || value === null || value === "")
|
|
49
50
|
return null;
|
|
50
51
|
const cleaned = value.replace(/[^0-9.]/g, "");
|
|
@@ -3,6 +3,7 @@ import { optionsShape } from "../../components/form-tools/shape";
|
|
|
3
3
|
import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
|
|
4
4
|
import { useAppSelector } from "../../hooks/use-redux";
|
|
5
5
|
import { useFormPlaceholder } from ".";
|
|
6
|
+
import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
|
|
6
7
|
const { Option } = Select;
|
|
7
8
|
const SelectedGroup = () => {
|
|
8
9
|
var _a;
|
|
@@ -72,10 +73,10 @@ const SelectedGroup = () => {
|
|
|
72
73
|
<Flex gap={2} className="w-full" vertical>
|
|
73
74
|
{!shapeAllIncludePolygon && (<>
|
|
74
75
|
<Form.Item label="Width" name="width" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
75
|
-
<InputNumber suffix="px" name="width"
|
|
76
|
+
<InputNumber suffix="px" name="width" min={MIN_WIDTH} placeholder={placeholders["width"]} style={{ width: "100%" }}/>
|
|
76
77
|
</Form.Item>
|
|
77
78
|
<Form.Item label="Height" name="height" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
78
|
-
<InputNumber suffix="px" name="height" placeholder={placeholders["height"]} style={{ width: "100%" }}/>
|
|
79
|
+
<InputNumber suffix="px" name="height" min={MIN_HEIGHT} placeholder={placeholders["height"]} style={{ width: "100%" }}/>
|
|
79
80
|
</Form.Item>
|
|
80
81
|
</>)}
|
|
81
82
|
{!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (<Form.Item label="Radius" name={"radius"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
@@ -91,10 +92,10 @@ const SelectedGroup = () => {
|
|
|
91
92
|
{!shapeAllIncludePolygon && (<>
|
|
92
93
|
<Flex gap={2} vertical>
|
|
93
94
|
<Form.Item label="Position X" name="x" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
94
|
-
<InputNumber placeholder={placeholders["x"]} style={{ width: "100%" }} suffix="px" name="x"/>
|
|
95
|
+
<InputNumber placeholder={placeholders["x"]} style={{ width: "100%" }} min={MIN_X} suffix="px" name="x"/>
|
|
95
96
|
</Form.Item>
|
|
96
97
|
<Form.Item label="Position Y" name="y" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
97
|
-
<InputNumber suffix="px" name="y" placeholder={placeholders["y"]} style={{ width: "100%" }}/>
|
|
98
|
+
<InputNumber suffix="px" name="y" min={MIN_Y} placeholder={placeholders["y"]} style={{ width: "100%" }}/>
|
|
98
99
|
</Form.Item>
|
|
99
100
|
<Form.Item label="Rotation" name="rotation" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
100
101
|
<InputNumber name="rotation" suffix="°" max={360} min={0} style={{ width: "100%" }} placeholder={placeholders["rotation"]}/>
|