seat-editor 1.6.21 → 1.6.23
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.
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
4
|
import SeatEditor from "../../features/package";
|
|
5
|
-
import {
|
|
5
|
+
import { data3 } from "../constant";
|
|
6
6
|
export default function NewBoard() {
|
|
7
7
|
const [initialValue, setInitialValue] = useState([]);
|
|
8
8
|
const [extraComponents, setExtraComponents] = useState([]);
|
|
9
9
|
const [backgroundColor, setBackgroundColor] = useState("#ffffff");
|
|
10
10
|
const [viewOnly, setViewOnly] = useState(true);
|
|
11
11
|
useEffect(() => {
|
|
12
|
-
setInitialValue(
|
|
12
|
+
setInitialValue(data3);
|
|
13
13
|
setExtraComponents([
|
|
14
14
|
{}
|
|
15
15
|
]);
|
|
@@ -53,7 +53,7 @@ const LayerView = (props) => {
|
|
|
53
53
|
setSelectedTable(find);
|
|
54
54
|
};
|
|
55
55
|
const boundingBox = useMemo(() => {
|
|
56
|
-
var _a, _b, _c, _d, _e, _f;
|
|
56
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
57
57
|
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
58
58
|
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
59
59
|
}
|
|
@@ -103,19 +103,21 @@ const LayerView = (props) => {
|
|
|
103
103
|
maxY = Math.max(maxY, values.y + values.height);
|
|
104
104
|
}
|
|
105
105
|
});
|
|
106
|
+
let backgroundHasOne = false;
|
|
106
107
|
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 && ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
|
|
108
|
+
backgroundHasOne = true;
|
|
107
109
|
minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
|
|
108
110
|
minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
|
|
109
111
|
maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
|
|
110
112
|
maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
|
|
111
113
|
}
|
|
112
|
-
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1) {
|
|
114
|
+
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 && ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
|
|
113
115
|
minX = minX - minX * 0.5;
|
|
114
116
|
minY = minY - minY * 0.5;
|
|
115
117
|
}
|
|
116
118
|
return {
|
|
117
|
-
minX,
|
|
118
|
-
minY,
|
|
119
|
+
minX: backgroundHasOne ? minX : minX - minX * 0.5,
|
|
120
|
+
minY: backgroundHasOne ? minY : minY - minY * 0.5,
|
|
119
121
|
width: maxX,
|
|
120
122
|
height: maxY,
|
|
121
123
|
};
|
package/package.json
CHANGED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import SeatEditor from "../../features/package";
|
|
4
|
-
import { data2 } from "../constant";
|
|
5
|
-
export default function NewBoard() {
|
|
6
|
-
const [initialValue, setInitialValue] = useState([]);
|
|
7
|
-
const [extraComponents, setExtraComponents] = useState([]);
|
|
8
|
-
const [backgroundColor, setBackgroundColor] = useState("#ffffff");
|
|
9
|
-
const [viewOnly, setViewOnly] = useState(true);
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
setInitialValue(data2);
|
|
12
|
-
setExtraComponents([
|
|
13
|
-
{}
|
|
14
|
-
]);
|
|
15
|
-
}, []);
|
|
16
|
-
return (<>
|
|
17
|
-
<div className="w-full h-screen flex flex-col relative justify-center">
|
|
18
|
-
{/* <div className="w-full h-[1000px] bg-white border-r border-gray-200"> */}
|
|
19
|
-
{/* <LayerView
|
|
20
|
-
componentProps={initialValue}
|
|
21
|
-
mappingKey="properties"
|
|
22
|
-
extraComponentProps={[]}
|
|
23
|
-
defaultBackground="#ffffff"
|
|
24
|
-
// dragOnly={true}
|
|
25
|
-
statusKey="status"
|
|
26
|
-
|
|
27
|
-
/> */}
|
|
28
|
-
{/* </div> */}
|
|
29
|
-
<button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
|
|
30
|
-
{viewOnly ? "Edit Mode" : "View Mode"}
|
|
31
|
-
</button>
|
|
32
|
-
<div className="flex-1 h-full">
|
|
33
|
-
<SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly deleteAutorized={{
|
|
34
|
-
component: true,
|
|
35
|
-
extraComponent: true,
|
|
36
|
-
}} mappingKey="properties" onCurrentStateChange={(setState) => {
|
|
37
|
-
var _a, _b, _c, _d;
|
|
38
|
-
if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
39
|
-
setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
|
|
40
|
-
}
|
|
41
|
-
if (setState === null || setState === void 0 ? void 0 : setState.backgroundColor) {
|
|
42
|
-
setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
|
|
43
|
-
}
|
|
44
|
-
if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
|
|
45
|
-
setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
|
|
46
|
-
}
|
|
47
|
-
}} extraComponentProps={extraComponents} defaultBackground={backgroundColor}
|
|
48
|
-
// dragOnly={true}
|
|
49
|
-
statusKey="status"/>
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
</div>
|
|
53
|
-
</>);
|
|
54
|
-
}
|
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use client";
|
|
3
|
-
import { useEffect, useMemo, useRef, useState } from "react";
|
|
4
|
-
import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
|
|
5
|
-
import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
|
|
6
|
-
import Layers from "../../components/layer";
|
|
7
|
-
import { isEqual } from "lodash";
|
|
8
|
-
const LayerView = (props) => {
|
|
9
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
|
|
10
|
-
const transformRef = useRef(null);
|
|
11
|
-
const containerRef = useRef(null);
|
|
12
|
-
const svgRef = useRef(null);
|
|
13
|
-
const [scale, setScale] = useState(1);
|
|
14
|
-
const [selectedTable, setSelectedTable] = useState(null);
|
|
15
|
-
const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
|
|
16
|
-
const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
|
|
17
|
-
const dispatch = useAppDispatch();
|
|
18
|
-
const convertComponentProps = () => {
|
|
19
|
-
let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
|
|
20
|
-
if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
|
|
21
|
-
return Object.assign({}, item === null || item === void 0 ? void 0 : item[mappingKey]);
|
|
22
|
-
}
|
|
23
|
-
return item;
|
|
24
|
-
});
|
|
25
|
-
return mappingData;
|
|
26
|
-
};
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
if (componentProps) {
|
|
29
|
-
if (!isEqual(componentsEditor, convertComponentProps())) {
|
|
30
|
-
let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
|
|
31
|
-
if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
|
|
32
|
-
return Object.assign({}, item[props.mappingKey]);
|
|
33
|
-
}
|
|
34
|
-
return item;
|
|
35
|
-
});
|
|
36
|
-
dispatch({
|
|
37
|
-
type: "board/setNewComponents",
|
|
38
|
-
payload: mappingData,
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
if (extraComponentsEditor) {
|
|
43
|
-
if (!isEqual(extraComponentsEditor, extraComponentProps)) {
|
|
44
|
-
dispatch({
|
|
45
|
-
type: "board/setNewExtraComponents",
|
|
46
|
-
payload: extraComponentProps,
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
if (defaultBackground) {
|
|
51
|
-
dispatch({
|
|
52
|
-
type: "board/setBackgroundColor",
|
|
53
|
-
payload: defaultBackground,
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
}, [componentProps, extraComponentProps, defaultBackground]);
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
onCurrentStateChange &&
|
|
59
|
-
onCurrentStateChange({
|
|
60
|
-
components: componentsEditor,
|
|
61
|
-
extraComponents: extraComponentsEditor,
|
|
62
|
-
});
|
|
63
|
-
}, [componentsEditor, extraComponentsEditor]);
|
|
64
|
-
const handleSelectComponent = (items) => {
|
|
65
|
-
const find = componentsEditor.find((item) => {
|
|
66
|
-
if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
|
|
67
|
-
return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
|
|
68
|
-
}
|
|
69
|
-
return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
|
|
70
|
-
});
|
|
71
|
-
onSelectComponent && onSelectComponent(find);
|
|
72
|
-
setSelectedTable(find);
|
|
73
|
-
};
|
|
74
|
-
const boundingBox = useMemo(() => {
|
|
75
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
76
|
-
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
77
|
-
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
78
|
-
}
|
|
79
|
-
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
80
|
-
componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
|
|
81
|
-
var _a, _b, _c, _d;
|
|
82
|
-
const hasMappingKey = mappingKey && _[mappingKey];
|
|
83
|
-
let values = hasMappingKey ? _[mappingKey] : _;
|
|
84
|
-
if (!values)
|
|
85
|
-
return;
|
|
86
|
-
if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
|
|
87
|
-
minX = Math.min(minX, values.x);
|
|
88
|
-
minY = Math.min(minY, values.y);
|
|
89
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
90
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
91
|
-
}
|
|
92
|
-
if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
|
|
93
|
-
minX = Math.min(minX, values.x);
|
|
94
|
-
minY = Math.min(minY, values.y);
|
|
95
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
96
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
97
|
-
}
|
|
98
|
-
if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
|
|
99
|
-
minX = Math.min(minX, values.x);
|
|
100
|
-
minY = Math.min(minY, values.y);
|
|
101
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
102
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
103
|
-
}
|
|
104
|
-
if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
|
|
105
|
-
minX = Math.min(minX, values.x);
|
|
106
|
-
minY = Math.min(minY, values.y);
|
|
107
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
108
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
|
|
112
|
-
var _a, _b;
|
|
113
|
-
if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
|
|
114
|
-
minX = Math.min(minX, values.x);
|
|
115
|
-
minY = Math.min(minY, values.y);
|
|
116
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
117
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
118
|
-
}
|
|
119
|
-
if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
|
|
120
|
-
minX = Math.min(minX, values.x);
|
|
121
|
-
minY = Math.min(minY, values.y);
|
|
122
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
123
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
let backgroundHasOne = false;
|
|
127
|
-
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 &&
|
|
128
|
-
((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
|
|
129
|
-
backgroundHasOne = true;
|
|
130
|
-
minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
|
|
131
|
-
minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
|
|
132
|
-
maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
|
|
133
|
-
maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
|
|
134
|
-
}
|
|
135
|
-
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 && ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
|
|
136
|
-
minX = minX - minX * 0.5;
|
|
137
|
-
minY = minY - minY * 0.5;
|
|
138
|
-
}
|
|
139
|
-
return {
|
|
140
|
-
minX: backgroundHasOne ? minX : minX - minX * 0.5,
|
|
141
|
-
minY: backgroundHasOne ? minY : minY - minY * 0.5,
|
|
142
|
-
width: maxX,
|
|
143
|
-
height: maxY,
|
|
144
|
-
};
|
|
145
|
-
}, [componentsEditor, extraComponentsEditor]);
|
|
146
|
-
const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
|
|
147
|
-
return elementEditor === null || elementEditor === void 0 ? void 0 : elementEditor.map((editorItem, i) => {
|
|
148
|
-
var _a, _b, _c, _d;
|
|
149
|
-
const isUsingMapping = mappingKey &&
|
|
150
|
-
typeof editorItem[mappingKey] === "object" &&
|
|
151
|
-
editorItem[mappingKey] !== null;
|
|
152
|
-
const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
|
|
153
|
-
if (colorMatchKey) {
|
|
154
|
-
if (isUsingMapping) {
|
|
155
|
-
return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
return finalProps;
|
|
162
|
-
});
|
|
163
|
-
};
|
|
164
|
-
const [fingerCount, setFingerCount] = useState(0);
|
|
165
|
-
useEffect(() => {
|
|
166
|
-
const container = document.getElementById("workspace");
|
|
167
|
-
const handleTouchStart = (e) => {
|
|
168
|
-
const count = e.touches.length;
|
|
169
|
-
setFingerCount(count);
|
|
170
|
-
};
|
|
171
|
-
const handleTouchEnd = () => {
|
|
172
|
-
setFingerCount(0);
|
|
173
|
-
};
|
|
174
|
-
if (container) {
|
|
175
|
-
container.addEventListener("touchstart", handleTouchStart);
|
|
176
|
-
container.addEventListener("touchend", handleTouchEnd);
|
|
177
|
-
}
|
|
178
|
-
return () => {
|
|
179
|
-
if (container) {
|
|
180
|
-
container.removeEventListener("touchstart", handleTouchStart);
|
|
181
|
-
container.removeEventListener("touchend", handleTouchEnd);
|
|
182
|
-
}
|
|
183
|
-
};
|
|
184
|
-
}, []);
|
|
185
|
-
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
|
|
186
|
-
height: "100vh",
|
|
187
|
-
overflow: "auto",
|
|
188
|
-
WebkitOverflowScrolling: "touch",
|
|
189
|
-
touchAction: "pan-y",
|
|
190
|
-
}} {...props.containerProps}>
|
|
191
|
-
<TransformWrapper ref={transformRef} {...props.transformProps} disabled={fingerCount === 1 && scale === 1} disablePadding={true}
|
|
192
|
-
// panning={{
|
|
193
|
-
// disabled: false,
|
|
194
|
-
// velocityDisabled: true,
|
|
195
|
-
// }}
|
|
196
|
-
// limitToBounds={false}
|
|
197
|
-
// doubleClick={{ disabled: true }}
|
|
198
|
-
// pinch={{ disabled: false }}
|
|
199
|
-
// wheel={{ disabled: true }}
|
|
200
|
-
// disabled={true}
|
|
201
|
-
// disablePadding={true}
|
|
202
|
-
centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1}
|
|
203
|
-
// pinch={{ step: 1 }}
|
|
204
|
-
smooth={true}>
|
|
205
|
-
<TransformComponent wrapperStyle={{
|
|
206
|
-
width: "100%",
|
|
207
|
-
height: "100%",
|
|
208
|
-
overflow: "visible",
|
|
209
|
-
}} contentStyle={{
|
|
210
|
-
width: "100%",
|
|
211
|
-
height: "100%",
|
|
212
|
-
}}>
|
|
213
|
-
<svg {...props.svgProps} id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className="h-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
|
|
214
|
-
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
215
|
-
display: "block",
|
|
216
|
-
pointerEvents: "auto",
|
|
217
|
-
// touchAction: "pan-y",
|
|
218
|
-
}}>
|
|
219
|
-
<Layers mode="view" components={[
|
|
220
|
-
...((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) > 0 ? extraComponentsEditor : []),
|
|
221
|
-
...renderElements(componentsEditor, mappingKey, colorMatchKey),
|
|
222
|
-
]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
|
|
223
|
-
</svg>
|
|
224
|
-
</TransformComponent>
|
|
225
|
-
</TransformWrapper>
|
|
226
|
-
</div>);
|
|
227
|
-
};
|
|
228
|
-
export default LayerView;
|