seat-editor 3.3.39 → 3.3.41
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/components/layer-v4/index.jsx +7 -7
- package/dist/features/board-v3/index.d.ts +2 -1
- package/dist/features/board-v3/index.jsx +2 -2
- package/dist/features/package/index.d.ts +1 -0
- package/dist/features/package/index.jsx +1 -1
- package/dist/features/view-only-2/index.jsx +20 -11
- package/dist/features/view-only-3/index.jsx +22 -13
- package/package.json +1 -1
|
@@ -285,7 +285,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
285
285
|
unhighlightGroup(group);
|
|
286
286
|
}}>
|
|
287
287
|
<g transform={`rotate(${rotation}, 0,0)`}>
|
|
288
|
-
<rect key={`${id}-rect`} width={width} height={height} fill={fill} rx={radius} {...omit(item, ["x", "y", "label", "points", "tags"])} {...commonProps}/>
|
|
288
|
+
<rect key={`${id}-rect`} width={width} height={height} fill={fill} rx={radius} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])} {...commonProps}/>
|
|
289
289
|
{renderTags(tags)}
|
|
290
290
|
{showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
|
|
291
291
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
@@ -351,7 +351,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
351
351
|
}}>
|
|
352
352
|
{" "}
|
|
353
353
|
<g transform={`rotate(${-rotation}, 0, 0)`}>
|
|
354
|
-
<circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
|
|
354
|
+
<circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])}/>
|
|
355
355
|
{renderTags(tags)}
|
|
356
356
|
{showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
357
357
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
@@ -428,7 +428,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
428
428
|
unhighlightGroup(group);
|
|
429
429
|
}}>
|
|
430
430
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
431
|
-
<circle cx={centerX} cy={centerY} r={tableRadius} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...omit(item, ["x", "y", "label", "points", "tags"])} {...commonProps}/>
|
|
431
|
+
<circle cx={centerX} cy={centerY} r={tableRadius} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])} {...commonProps}/>
|
|
432
432
|
<g data-seat={`${id}-seats`}>
|
|
433
433
|
{seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
434
434
|
</g>
|
|
@@ -568,7 +568,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
568
568
|
}}>
|
|
569
569
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
570
570
|
{/* Seats */}
|
|
571
|
-
<circle cx={width / 2} cy={height / 2} r={tableRadius} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags"])} {...commonProps}/>
|
|
571
|
+
<circle cx={width / 2} cy={height / 2} r={tableRadius} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])} {...commonProps}/>
|
|
572
572
|
<g key={`${id}-seats`} data-seat={`${id}-seats`}>
|
|
573
573
|
{seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
574
574
|
</g>
|
|
@@ -684,7 +684,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
684
684
|
}}>
|
|
685
685
|
<g transform={`rotate(${rotate}, 0, 0)`}>
|
|
686
686
|
{/* Square Table */}
|
|
687
|
-
<rect width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
|
|
687
|
+
<rect width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])}/>
|
|
688
688
|
{renderTags(tags)}
|
|
689
689
|
|
|
690
690
|
{/* Seats */}
|
|
@@ -806,7 +806,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
806
806
|
}}>
|
|
807
807
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
808
808
|
{/* Seats */}
|
|
809
|
-
<rect width={width} height={height} rx={radius} {...commonProps} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
|
|
809
|
+
<rect width={width} height={height} rx={radius} {...commonProps} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])}/>
|
|
810
810
|
<g key={`${id}-seats`} data-seat={`${id}-seats`}>
|
|
811
811
|
{seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
812
812
|
</g>
|
|
@@ -950,7 +950,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
950
950
|
}}>
|
|
951
951
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
952
952
|
{/* Seats */}
|
|
953
|
-
<rect width={width} height={height} rx={radius} {...commonProps} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
|
|
953
|
+
<rect width={width} height={height} rx={radius} {...commonProps} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags", "seatCount"])}/>
|
|
954
954
|
<g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
|
|
955
955
|
{seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill}/>))}
|
|
956
956
|
</g>
|
|
@@ -11,6 +11,7 @@ interface BoardTemplateProps {
|
|
|
11
11
|
state: boolean;
|
|
12
12
|
element: React.JSX.Element;
|
|
13
13
|
};
|
|
14
|
+
disabled?: boolean;
|
|
14
15
|
}
|
|
15
|
-
declare const BoardTemplate: ({ refs, loadingRender }: BoardTemplateProps) => React.JSX.Element;
|
|
16
|
+
declare const BoardTemplate: ({ refs, loadingRender, disabled }: BoardTemplateProps) => React.JSX.Element;
|
|
16
17
|
export default BoardTemplate;
|
|
@@ -14,7 +14,7 @@ import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlo
|
|
|
14
14
|
const toolElement = ["square", "circle", "table-seat-circle"];
|
|
15
15
|
const idSelectionBoxGhost = "selection-box-ghost";
|
|
16
16
|
const nameShapeSelectionBoxGhost = "selection-box";
|
|
17
|
-
const BoardTemplate = ({ refs, loadingRender }) => {
|
|
17
|
+
const BoardTemplate = ({ refs, loadingRender, disabled = false }) => {
|
|
18
18
|
const dispatch = useAppDispatch();
|
|
19
19
|
const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
|
|
20
20
|
const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
|
|
@@ -1548,7 +1548,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
|
|
|
1548
1548
|
};
|
|
1549
1549
|
return (<>
|
|
1550
1550
|
<ModalPreview>
|
|
1551
|
-
<LayerView statusKey="status" loadingRender={loadingRender}/>
|
|
1551
|
+
<LayerView statusKey="status" loadingRender={loadingRender} disabled={disabled}/>
|
|
1552
1552
|
<div className="flex gap-2 mt-2">
|
|
1553
1553
|
<Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
|
|
1554
1554
|
<Radio value="default">Default</Radio>
|
|
@@ -42,6 +42,7 @@ export interface TableEditorProps<TMeta = undefined> {
|
|
|
42
42
|
state: boolean;
|
|
43
43
|
element: React.JSX.Element;
|
|
44
44
|
};
|
|
45
|
+
disabledView?: boolean;
|
|
45
46
|
}
|
|
46
47
|
declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react").JSX.Element;
|
|
47
48
|
export default TableEditor;
|
|
@@ -169,7 +169,7 @@ const TableEditor = (props) => {
|
|
|
169
169
|
{(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
|
|
170
170
|
</div>)}
|
|
171
171
|
<SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
|
|
172
|
-
<Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender}/>
|
|
172
|
+
<Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} disabled={props === null || props === void 0 ? void 0 : props.disabledView}/>
|
|
173
173
|
<ControlPanels action={props.action} transform={(_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef}/>
|
|
174
174
|
</div>)}
|
|
175
175
|
</div>
|
|
@@ -5,7 +5,7 @@ import Layers from "../../components/layer-v4";
|
|
|
5
5
|
import { getTranslate } from "../board-v3/utils";
|
|
6
6
|
import { Spin } from "antd";
|
|
7
7
|
const LayerView = (props) => {
|
|
8
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled, loadingRender, } = props;
|
|
8
|
+
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled = true, loadingRender, } = 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);
|
|
@@ -137,7 +137,7 @@ const LayerView = (props) => {
|
|
|
137
137
|
setSelectedTable(seletedTable);
|
|
138
138
|
};
|
|
139
139
|
const boundingBox = useMemo(() => {
|
|
140
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
140
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
141
141
|
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
142
142
|
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
143
143
|
}
|
|
@@ -195,10 +195,10 @@ const LayerView = (props) => {
|
|
|
195
195
|
if (hasBoundingBox) {
|
|
196
196
|
hasBoundingBoxRef.current = true;
|
|
197
197
|
return {
|
|
198
|
-
minX: boundingBoxProps.x,
|
|
199
|
-
minY: boundingBoxProps.y,
|
|
200
|
-
width: boundingBoxProps.width,
|
|
201
|
-
height: boundingBoxProps.height,
|
|
198
|
+
minX: boundingBoxProps.x - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
|
|
199
|
+
minY: boundingBoxProps.y - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
|
|
200
|
+
width: boundingBoxProps.width + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
|
|
201
|
+
height: boundingBoxProps.height + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
|
|
202
202
|
};
|
|
203
203
|
}
|
|
204
204
|
// return {
|
|
@@ -209,10 +209,10 @@ const LayerView = (props) => {
|
|
|
209
209
|
// };
|
|
210
210
|
// console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
|
|
211
211
|
return {
|
|
212
|
-
minX: minX - (((
|
|
213
|
-
minY: minY - (((
|
|
214
|
-
width: maxX + (((
|
|
215
|
-
height: maxY + (((
|
|
212
|
+
minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
|
|
213
|
+
minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
|
|
214
|
+
width: maxX + (((_o = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _o === void 0 ? void 0 : _o.paddingRight) || 0),
|
|
215
|
+
height: maxY + (((_p = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _p === void 0 ? void 0 : _p.paddingBottom) || 0),
|
|
216
216
|
};
|
|
217
217
|
}, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
|
|
218
218
|
const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
|
|
@@ -538,6 +538,15 @@ const LayerView = (props) => {
|
|
|
538
538
|
}
|
|
539
539
|
};
|
|
540
540
|
const hasBoundingBox = hasBoundingBoxRef.current;
|
|
541
|
+
const isValidBoundingBox = Number.isFinite(boundingBox.minX) &&
|
|
542
|
+
Number.isFinite(boundingBox.minY) &&
|
|
543
|
+
Number.isFinite(boundingBox.width) &&
|
|
544
|
+
Number.isFinite(boundingBox.height) &&
|
|
545
|
+
boundingBox.width > 0 &&
|
|
546
|
+
boundingBox.height > 0;
|
|
547
|
+
const viewBox = isValidBoundingBox
|
|
548
|
+
? `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`
|
|
549
|
+
: "0 0 1000 1000";
|
|
541
550
|
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
|
|
542
551
|
overflow: "auto",
|
|
543
552
|
WebkitOverflowScrolling: "touch",
|
|
@@ -548,7 +557,7 @@ const LayerView = (props) => {
|
|
|
548
557
|
|
|
549
558
|
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
550
559
|
// scale={5}
|
|
551
|
-
overflow="hidden" viewBox={
|
|
560
|
+
overflow="hidden" viewBox={viewBox} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
|
|
552
561
|
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
553
562
|
display: "block",
|
|
554
563
|
pointerEvents: disabled ? "none" : "all",
|
|
@@ -92,7 +92,7 @@ const LayerView = (props) => {
|
|
|
92
92
|
defaultBackground,
|
|
93
93
|
loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
|
|
94
94
|
props === null || props === void 0 ? void 0 : props.viewOnly,
|
|
95
|
-
defaultBoundingBox
|
|
95
|
+
defaultBoundingBox,
|
|
96
96
|
]);
|
|
97
97
|
useEffect(() => {
|
|
98
98
|
setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
|
|
@@ -138,7 +138,7 @@ const LayerView = (props) => {
|
|
|
138
138
|
setSelectedTable(seletedTable);
|
|
139
139
|
};
|
|
140
140
|
const boundingBox = useMemo(() => {
|
|
141
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
141
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
142
142
|
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
143
143
|
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
144
144
|
}
|
|
@@ -196,10 +196,10 @@ const LayerView = (props) => {
|
|
|
196
196
|
if (hasBoundingBox) {
|
|
197
197
|
hasBoundingBoxRef.current = true;
|
|
198
198
|
return {
|
|
199
|
-
minX: boundingBoxProps.x,
|
|
200
|
-
minY: boundingBoxProps.y,
|
|
201
|
-
width: boundingBoxProps.width,
|
|
202
|
-
height: boundingBoxProps.height,
|
|
199
|
+
minX: boundingBoxProps.x - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
|
|
200
|
+
minY: boundingBoxProps.y - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
|
|
201
|
+
width: boundingBoxProps.width + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
|
|
202
|
+
height: boundingBoxProps.height + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
|
|
203
203
|
};
|
|
204
204
|
}
|
|
205
205
|
// return {
|
|
@@ -210,10 +210,10 @@ const LayerView = (props) => {
|
|
|
210
210
|
// };
|
|
211
211
|
// console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
|
|
212
212
|
return {
|
|
213
|
-
minX: minX - (((
|
|
214
|
-
minY: minY - (((
|
|
215
|
-
width: maxX + (((
|
|
216
|
-
height: maxY + (((
|
|
213
|
+
minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
|
|
214
|
+
minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
|
|
215
|
+
width: maxX + (((_o = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _o === void 0 ? void 0 : _o.paddingRight) || 0),
|
|
216
|
+
height: maxY + (((_p = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _p === void 0 ? void 0 : _p.paddingBottom) || 0),
|
|
217
217
|
};
|
|
218
218
|
}, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
|
|
219
219
|
const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
|
|
@@ -319,7 +319,7 @@ const LayerView = (props) => {
|
|
|
319
319
|
: (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
|
|
320
320
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
321
321
|
return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
|
|
322
|
-
})) &&
|
|
322
|
+
})) && !disabled;
|
|
323
323
|
if (ghostAttributes) {
|
|
324
324
|
Object.keys(ghostAttributes).forEach((key) => {
|
|
325
325
|
ghost.setAttribute(key, ghostAttributes[key]);
|
|
@@ -539,6 +539,15 @@ const LayerView = (props) => {
|
|
|
539
539
|
}
|
|
540
540
|
};
|
|
541
541
|
const hasBoundingBox = hasBoundingBoxRef.current;
|
|
542
|
+
const isValidBoundingBox = Number.isFinite(boundingBox.minX) &&
|
|
543
|
+
Number.isFinite(boundingBox.minY) &&
|
|
544
|
+
Number.isFinite(boundingBox.width) &&
|
|
545
|
+
Number.isFinite(boundingBox.height) &&
|
|
546
|
+
boundingBox.width > 0 &&
|
|
547
|
+
boundingBox.height > 0;
|
|
548
|
+
const viewBox = isValidBoundingBox
|
|
549
|
+
? `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`
|
|
550
|
+
: "0 0 1000 1000";
|
|
542
551
|
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
|
|
543
552
|
overflow: "auto",
|
|
544
553
|
WebkitOverflowScrolling: "touch",
|
|
@@ -575,7 +584,7 @@ const LayerView = (props) => {
|
|
|
575
584
|
}}>
|
|
576
585
|
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
577
586
|
// scale={5}
|
|
578
|
-
overflow="hidden" viewBox={
|
|
587
|
+
overflow="hidden" viewBox={viewBox} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
|
|
579
588
|
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
580
589
|
display: "block",
|
|
581
590
|
pointerEvents: disabled ? "none" : "all",
|
|
@@ -587,7 +596,7 @@ const LayerView = (props) => {
|
|
|
587
596
|
<rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
|
|
588
597
|
</clipPath>
|
|
589
598
|
</defs>)}
|
|
590
|
-
<g id="main-layer"
|
|
599
|
+
<g id="main-layer" clipPath="url(#contentCrop)">
|
|
591
600
|
<Layers components={[
|
|
592
601
|
...extraComponentsEditor,
|
|
593
602
|
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|