seat-editor 3.1.19 → 3.1.21
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.
- package/dist/app/new-board/page.jsx +2 -1
- package/dist/app/only-view/page.d.ts +19 -0
- package/dist/app/only-view/page.jsx +96 -96
- package/dist/components/layer-v3/index.jsx +5 -5
- package/dist/features/board-v3/index.jsx +1 -0
- package/dist/features/view-only-3/index.d.ts +10 -8
- package/dist/features/view-only-3/index.jsx +19 -10
- package/package.json +1 -1
|
@@ -3,9 +3,10 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
import SeatEditor from "../../features/package";
|
|
4
4
|
import { extraComponent } from "../constant";
|
|
5
5
|
import { data4 } from "../constant";
|
|
6
|
+
import { dummyImage } from "../only-view/page";
|
|
6
7
|
export default function NewBoard() {
|
|
7
8
|
const [initialValue, setInitialValue] = useState([]);
|
|
8
|
-
const [extraComponents, setExtraComponents] = useState(
|
|
9
|
+
const [extraComponents, setExtraComponents] = useState(dummyImage);
|
|
9
10
|
const [backgroundColor, setBackgroundColor] = useState("#000000");
|
|
10
11
|
const [viewOnly, setViewOnly] = useState(true);
|
|
11
12
|
useEffect(() => {
|
|
@@ -1,2 +1,21 @@
|
|
|
1
|
+
export declare const dummyImage: {
|
|
2
|
+
id: string;
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
rotation: number;
|
|
8
|
+
shape: string;
|
|
9
|
+
src: string;
|
|
10
|
+
fill: string;
|
|
11
|
+
opacity: number;
|
|
12
|
+
labels: {
|
|
13
|
+
label: string;
|
|
14
|
+
fontColor: string;
|
|
15
|
+
x: number;
|
|
16
|
+
fontSize: number;
|
|
17
|
+
y: number;
|
|
18
|
+
}[];
|
|
19
|
+
}[];
|
|
1
20
|
declare const TouchScrollDetect: () => import("react").JSX.Element;
|
|
2
21
|
export default TouchScrollDetect;
|
|
@@ -7,7 +7,7 @@ import { UserIcon } from "./user";
|
|
|
7
7
|
import { Modal } from "antd";
|
|
8
8
|
import JsonView from "@uiw/react-json-view";
|
|
9
9
|
// import { dummyImage } from "./constant";
|
|
10
|
-
const dummyImage = [
|
|
10
|
+
export const dummyImage = [
|
|
11
11
|
{
|
|
12
12
|
id: "1747388267450",
|
|
13
13
|
x: 368,
|
|
@@ -29,101 +29,101 @@ const dummyImage = [
|
|
|
29
29
|
},
|
|
30
30
|
],
|
|
31
31
|
},
|
|
32
|
-
{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
},
|
|
32
|
+
// {
|
|
33
|
+
// x: 100,
|
|
34
|
+
// y: 520,
|
|
35
|
+
// labels: [
|
|
36
|
+
// {
|
|
37
|
+
// x: 0,
|
|
38
|
+
// y: 27,
|
|
39
|
+
// label: "New Table 5",
|
|
40
|
+
// fontSize: 12,
|
|
41
|
+
// fontColor: "#0d0c0c",
|
|
42
|
+
// },
|
|
43
|
+
// ],
|
|
44
|
+
// id: "1761194669729132000",
|
|
45
|
+
// stroke: "#347ADB", //warna border
|
|
46
|
+
// fill: "#E1F4FF", //warna latar belakang
|
|
47
|
+
// strokeWidth: 1,
|
|
48
|
+
// text: "",
|
|
49
|
+
// shape: "background",
|
|
50
|
+
// width: 100,
|
|
51
|
+
// height: 100,
|
|
52
|
+
// gapTags: 10, //gap antara tags secara vertical,
|
|
53
|
+
// tags: [
|
|
54
|
+
// {
|
|
55
|
+
// key: "table", //key untuk penamaan tag
|
|
56
|
+
// items: [
|
|
57
|
+
// {
|
|
58
|
+
// type: "text", //tipe text atau icon
|
|
59
|
+
// value: "V1", //value untuk text atau icon
|
|
60
|
+
// fontSize: 14,
|
|
61
|
+
// fontWeight: 600,
|
|
62
|
+
// fill: "#3F4254",
|
|
63
|
+
// },
|
|
64
|
+
// ],
|
|
65
|
+
// direction: "flex", // flex untuk horizontal dan column untuk vertikal
|
|
66
|
+
// gap: 2, //gap antara item
|
|
67
|
+
// offsetX: 0, //offset x antara item
|
|
68
|
+
// offsetY: 0, //offset y antara item
|
|
69
|
+
// },
|
|
70
|
+
// {
|
|
71
|
+
// key: "rsvp_time",
|
|
72
|
+
// items: [
|
|
73
|
+
// {
|
|
74
|
+
// value: "11:00",
|
|
75
|
+
// type: "text",
|
|
76
|
+
// fill: "#5E6278",
|
|
77
|
+
// fontSize: 11,
|
|
78
|
+
// fontWeight: 700,
|
|
79
|
+
// textDecoration: "underline",
|
|
80
|
+
// },
|
|
81
|
+
// {
|
|
82
|
+
// value: "20:00",
|
|
83
|
+
// type: "text",
|
|
84
|
+
// fill: "#5E6278",
|
|
85
|
+
// fontSize: 11,
|
|
86
|
+
// fontWeight: 400,
|
|
87
|
+
// },
|
|
88
|
+
// ],
|
|
89
|
+
// direction: "column",
|
|
90
|
+
// gap: 2,
|
|
91
|
+
// },
|
|
92
|
+
// {
|
|
93
|
+
// key: "rsvp_time",
|
|
94
|
+
// items: [
|
|
95
|
+
// {
|
|
96
|
+
// value: "01:00",
|
|
97
|
+
// type: "text",
|
|
98
|
+
// fill: "#5E6278",
|
|
99
|
+
// fontSize: 11,
|
|
100
|
+
// fontWeight: 400,
|
|
101
|
+
// symbol: {
|
|
102
|
+
// value: "+1",
|
|
103
|
+
// gap: 8,
|
|
104
|
+
// fontSize: 9,
|
|
105
|
+
// position: "right-top", // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
|
|
106
|
+
// },
|
|
107
|
+
// },
|
|
108
|
+
// ],
|
|
109
|
+
// direction: "flex",
|
|
110
|
+
// gap: 10,
|
|
111
|
+
// offsetX: -3,
|
|
112
|
+
// offsetY: -8,
|
|
113
|
+
// },
|
|
114
|
+
// ],
|
|
115
|
+
// opacity: 1,
|
|
116
|
+
// rotation: 90,
|
|
117
|
+
// seatCount: 10,
|
|
118
|
+
// openSpace: 0.3,
|
|
119
|
+
// seatFill: "#ed8989",
|
|
120
|
+
// seatPositions: {
|
|
121
|
+
// top: 3,
|
|
122
|
+
// bottom: 3,
|
|
123
|
+
// left: 3,
|
|
124
|
+
// right: 3,
|
|
125
|
+
// },
|
|
126
|
+
// },
|
|
127
127
|
];
|
|
128
128
|
const Card = (item) => {
|
|
129
129
|
const handleDragStart = (e) => {
|
|
@@ -519,11 +519,6 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
|
|
|
519
519
|
})}
|
|
520
520
|
</g>
|
|
521
521
|
</g>
|
|
522
|
-
</g>);
|
|
523
|
-
}
|
|
524
|
-
case "bounding-box": {
|
|
525
|
-
return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
|
|
526
|
-
<rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
|
|
527
522
|
</g>);
|
|
528
523
|
}
|
|
529
524
|
case "text":
|
|
@@ -556,6 +551,11 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
|
|
|
556
551
|
</g>
|
|
557
552
|
</g>
|
|
558
553
|
</g>);
|
|
554
|
+
case "bounding-box": {
|
|
555
|
+
return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
|
|
556
|
+
<rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
|
|
557
|
+
</g>);
|
|
558
|
+
}
|
|
559
559
|
default:
|
|
560
560
|
return <g key={id}/>;
|
|
561
561
|
}
|
|
@@ -224,6 +224,7 @@ const BoardTemplate = ({ refs }) => {
|
|
|
224
224
|
const nextExtraComponents = index !== -1
|
|
225
225
|
? extraComponentsState.map((item, i) => i === index ? component : item)
|
|
226
226
|
: [...extraComponentsState, component];
|
|
227
|
+
console.log({ nextExtraComponents });
|
|
227
228
|
setExtraComponentsState(nextExtraComponents);
|
|
228
229
|
dispatch({
|
|
229
230
|
type: "board/setNewExtraComponents",
|
|
@@ -14,8 +14,8 @@ export type TableMatchEvent = {
|
|
|
14
14
|
event: EventHandleType;
|
|
15
15
|
properties: PropertiesProps;
|
|
16
16
|
};
|
|
17
|
-
export type ComponentProps = PropertiesProps | {
|
|
18
|
-
[
|
|
17
|
+
export type ComponentProps<T = PropertiesProps> = T | {
|
|
18
|
+
[K in string]: T;
|
|
19
19
|
};
|
|
20
20
|
export type OnCurrentStateChange = ({ components, extraComponents, }: {
|
|
21
21
|
components: ComponentProps[];
|
|
@@ -57,17 +57,19 @@ export interface LayerViewProps {
|
|
|
57
57
|
minWidth?: number;
|
|
58
58
|
children: React.ReactNode;
|
|
59
59
|
};
|
|
60
|
-
dragTableBlockKey?:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
];
|
|
60
|
+
dragTableBlockKey?: {
|
|
61
|
+
key: string;
|
|
62
|
+
value: string | number;
|
|
63
|
+
}[];
|
|
66
64
|
onRightClick?: (e: MouseEvent, component: ComponentProps) => void;
|
|
67
65
|
allowTooltip?: boolean;
|
|
68
66
|
onDrop?: (e: React.MouseEvent<SVGSVGElement>, component: ComponentProps) => void;
|
|
69
67
|
onSwitch?: (e: MouseEvent, component: ComponentProps) => void;
|
|
70
68
|
refs?: React.ForwardedRef<RefLayerView>;
|
|
69
|
+
viewStyles?: {
|
|
70
|
+
paddingX?: number;
|
|
71
|
+
paddingY?: number;
|
|
72
|
+
};
|
|
71
73
|
}
|
|
72
74
|
declare const LayerView: (props: LayerViewProps) => React.JSX.Element;
|
|
73
75
|
export default LayerView;
|
|
@@ -5,13 +5,14 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
|
|
|
5
5
|
import Layers from "../../components/layer-v4";
|
|
6
6
|
import { getTranslate } from "../board-v3/utils";
|
|
7
7
|
const LayerView = (props) => {
|
|
8
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags } = props;
|
|
8
|
+
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, } = props;
|
|
9
9
|
const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
|
|
10
10
|
const tableGhost = useRef(null);
|
|
11
11
|
const hoverUnderghostId = useRef(null);
|
|
12
12
|
const transformRef = useRef(null);
|
|
13
13
|
const containerRef = useRef(null);
|
|
14
14
|
const svgRef = useRef(null);
|
|
15
|
+
const hasBoundingBoxRef = useRef(false);
|
|
15
16
|
const [tooltip, setTooltip] = useState({
|
|
16
17
|
x: 0,
|
|
17
18
|
y: 0,
|
|
@@ -97,7 +98,7 @@ const LayerView = (props) => {
|
|
|
97
98
|
setSelectedTable(seletedTable);
|
|
98
99
|
};
|
|
99
100
|
const boundingBox = useMemo(() => {
|
|
100
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
101
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
101
102
|
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
102
103
|
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
103
104
|
}
|
|
@@ -158,12 +159,15 @@ const LayerView = (props) => {
|
|
|
158
159
|
}
|
|
159
160
|
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 &&
|
|
160
161
|
["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
|
|
161
|
-
minX = minX
|
|
162
|
-
minY = minY
|
|
162
|
+
minX = minX;
|
|
163
|
+
minY = minY;
|
|
163
164
|
}
|
|
164
165
|
const hasBoundingBox = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.some((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
|
|
166
|
+
const paddingY = maxY * (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingY) || 0) + minY * (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingY) || 0);
|
|
167
|
+
const paddingX = maxX * (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingX) || 0) + minX * (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingX) || 0);
|
|
165
168
|
if (hasBoundingBox) {
|
|
166
169
|
const findBoundingBox = extraComponentsEditor.find((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
|
|
170
|
+
hasBoundingBoxRef.current = true;
|
|
167
171
|
return {
|
|
168
172
|
minX: findBoundingBox.x,
|
|
169
173
|
minY: findBoundingBox.y,
|
|
@@ -171,8 +175,6 @@ const LayerView = (props) => {
|
|
|
171
175
|
height: findBoundingBox.height,
|
|
172
176
|
};
|
|
173
177
|
}
|
|
174
|
-
const paddingY = maxY * 0.2 + minY * 0.2;
|
|
175
|
-
const paddingX = maxX * 0.2 + minX * 0.1;
|
|
176
178
|
return {
|
|
177
179
|
minX: minX - paddingX - (minX - paddingX) * 0.5,
|
|
178
180
|
minY: minY - paddingY * 2,
|
|
@@ -229,7 +231,6 @@ const LayerView = (props) => {
|
|
|
229
231
|
const tableId = JSON.parse(group.getAttribute("data-id") || "{}");
|
|
230
232
|
const dragEvent = event;
|
|
231
233
|
const dataTransfer = JSON.parse(((_a = dragEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("application/json")) || "{}");
|
|
232
|
-
console.log({ dataTransfer });
|
|
233
234
|
const data = {
|
|
234
235
|
targetTable: originalData({ id: tableId, type: "find" }),
|
|
235
236
|
sourceTable: originalData({ dataParams: dataTransfer, type: "get" }),
|
|
@@ -499,6 +500,7 @@ const LayerView = (props) => {
|
|
|
499
500
|
handlePan(0, -speedPanning);
|
|
500
501
|
}
|
|
501
502
|
};
|
|
503
|
+
const hasBoundingBox = hasBoundingBoxRef.current;
|
|
502
504
|
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
|
|
503
505
|
overflow: "auto",
|
|
504
506
|
WebkitOverflowScrolling: "touch",
|
|
@@ -520,19 +522,26 @@ const LayerView = (props) => {
|
|
|
520
522
|
<TransformComponent wrapperStyle={{
|
|
521
523
|
width: "100%",
|
|
522
524
|
height: "100%",
|
|
523
|
-
overflow: "visible",
|
|
525
|
+
// overflow: "visible",
|
|
524
526
|
}} contentStyle={{
|
|
525
527
|
width: "100%",
|
|
526
528
|
height: "100%",
|
|
527
529
|
}}>
|
|
528
|
-
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
530
|
+
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
531
|
+
// scale={5}
|
|
532
|
+
overflow="hidden" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
|
|
529
533
|
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
530
534
|
display: "block",
|
|
531
535
|
pointerEvents: "all",
|
|
532
536
|
touchAction: "none",
|
|
533
537
|
userSelect: "none",
|
|
534
538
|
}} {...props.svgProps}>
|
|
535
|
-
<
|
|
539
|
+
<defs>
|
|
540
|
+
<clipPath id="contentCrop">
|
|
541
|
+
<rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
|
|
542
|
+
</clipPath>
|
|
543
|
+
</defs>
|
|
544
|
+
<g id="main-layer" clip-path="url(#contentCrop)">
|
|
536
545
|
<Layers components={[
|
|
537
546
|
...extraComponentsEditor,
|
|
538
547
|
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|