seat-editor 3.3.39 → 3.3.40

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.
Files changed (4) hide show
  1. package/dist/components/layer-v4/index.jsx +7 -7
  2. package/dist/features/view-only-2/index.jsx +19 -10
  3. package/dist/features/view-only-3/index.jsx +22 -13
  4. package/package.json +1 -1
package/dist/components/layer-v4/index.jsx CHANGED
@@ -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>
package/dist/features/view-only-2/index.jsx CHANGED
@@ -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 - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
213
- minY: minY - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
214
- width: maxX + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
215
- height: maxY + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
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={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
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",
package/dist/features/view-only-3/index.jsx CHANGED
@@ -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 - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
214
- minY: minY - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
215
- width: maxX + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
216
- height: maxY + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
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
- })) && (!disabled);
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={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
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" clip-path="url(#contentCrop)">
599
+ <g id="main-layer" clipPath="url(#contentCrop)">
591
600
  <Layers components={[
592
601
  ...extraComponentsEditor,
593
602
  ...renderElements(componentsEditor, mappingKey, tableMatchKey),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.3.39",
3
+ "version": "3.3.40",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",