seat-editor 3.4.4 → 3.4.6

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 (28) hide show
  1. package/dist/app/constant.d.ts +19 -19
  2. package/dist/app/constant.js +35 -20
  3. package/dist/app/only-view/page.js +6 -4
  4. package/dist/app/only-view/page.jsx +6 -4
  5. package/dist/components/form-tools/label.js +13 -13
  6. package/dist/components/form-tools/label.jsx +18 -11
  7. package/dist/components/form-tools/shape.js +1 -1
  8. package/dist/components/form-tools/shape.jsx +1 -1
  9. package/dist/components/layer-v4/index.js +3 -2
  10. package/dist/components/layer-v4/index.jsx +3 -2
  11. package/dist/features/board-v3/board-slice.js +4 -4
  12. package/dist/features/board-v3/index.js +24 -4
  13. package/dist/features/board-v3/index.jsx +24 -4
  14. package/dist/features/board-v3/utils.d.ts +2 -1
  15. package/dist/features/board-v3/utils.js +44 -18
  16. package/dist/features/panel/index.js +28 -4
  17. package/dist/features/panel/index.jsx +28 -4
  18. package/dist/features/panel/selected-group.js +16 -4
  19. package/dist/features/panel/selected-group.jsx +26 -7
  20. package/dist/features/panel/table-seat-circle.js +4 -1
  21. package/dist/features/panel/table-seat-circle.jsx +4 -1
  22. package/dist/features/panel/table-seat-square.js +8 -2
  23. package/dist/features/panel/table-seat-square.jsx +9 -3
  24. package/dist/features/panel/utils.js +3 -10
  25. package/dist/features/view-only-3/index.d.ts +7 -5
  26. package/dist/features/view-only-3/index.js +71 -16
  27. package/dist/features/view-only-3/index.jsx +71 -16
  28. package/package.json +1 -1
package/dist/features/view-only-3/index.js CHANGED
@@ -7,13 +7,14 @@ import Layers from "../../components/layer-v4";
7
7
  import { getTranslate } from "../board-v3/utils";
8
8
  import { Spin } from "antd";
9
9
  const LayerView = (props) => {
10
- const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
10
+ const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
11
11
  select: true,
12
12
  move: true,
13
13
  switch: true,
14
14
  drop: true,
15
- rightClick: true
16
- } } = props;
15
+ rightClick: true,
16
+ double: true,
17
+ }, } = props;
17
18
  const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
18
19
  const tableGhost = useRef(null);
19
20
  const hoverUnderghostId = useRef(null);
@@ -131,6 +132,18 @@ const LayerView = (props) => {
131
132
  }
132
133
  return data;
133
134
  };
135
+ const handleDoubleClick = (items, e) => {
136
+ const find = componentsEditor.find((item) => {
137
+ var _a;
138
+ if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
139
+ return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
140
+ }
141
+ return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
142
+ });
143
+ onDoubleClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.double) && onDoubleClick(find);
144
+ const seletedTable = mappingKey ? find[mappingKey] : find;
145
+ setSelectedTable(seletedTable);
146
+ };
134
147
  const handleSelectComponent = (items, e) => {
135
148
  const find = componentsEditor.find((item) => {
136
149
  var _a;
@@ -140,9 +153,14 @@ const LayerView = (props) => {
140
153
  return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
141
154
  });
142
155
  const rightClick = e.button === 2;
143
- const click = e.button === 0;
144
- (onRightClick && rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick)) && onRightClick(e, find);
145
- (onSelectComponent && !rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select)) && onSelectComponent(find);
156
+ onRightClick &&
157
+ rightClick &&
158
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick) &&
159
+ onRightClick(e, find);
160
+ onSelectComponent &&
161
+ !rightClick &&
162
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select) &&
163
+ onSelectComponent(find);
146
164
  const seletedTable = mappingKey ? find[mappingKey] : find;
147
165
  setSelectedTable(seletedTable);
148
166
  };
@@ -164,10 +182,15 @@ const LayerView = (props) => {
164
182
  }
165
183
  if (i === componentsEditor.length - 1 &&
166
184
  (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
167
- minX = minX > 10 ? minX - 10 : minX;
168
- minY = minY > 10 ? minY - 10 : minY;
169
- maxX = maxX + 10;
170
- maxY = maxY + 10;
185
+ const centerX = (minX + maxX) / 2;
186
+ const centerY = (minY + maxY) / 2;
187
+ const padding = 20;
188
+ const width = maxX - minX + padding * 2;
189
+ const height = maxY - minY + padding * 2;
190
+ minX = centerX - width / 2;
191
+ minY = centerY - height / 2;
192
+ maxX = maxX - minX + padding * 2;
193
+ maxY = maxY - minY + padding * 2;
171
194
  }
172
195
  });
173
196
  extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
@@ -217,7 +240,7 @@ const LayerView = (props) => {
217
240
  // width: maxX + paddingX * 2,
218
241
  // height: maxY + paddingY + (maxY + paddingY) * 0.5,
219
242
  // };
220
- // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
243
+ // console.log(minX, minY, maxX, maxY, props?.viewStyles, "bounding box");
221
244
  return {
222
245
  minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
223
246
  minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
@@ -280,7 +303,7 @@ const LayerView = (props) => {
280
303
  };
281
304
  // drop from out layout editor
282
305
  if (type === "drop") {
283
- (onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop)) && onDrop(event, data);
306
+ onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop) && onDrop(event, data);
284
307
  }
285
308
  // cari elemen bentuk (rect / circle / path)
286
309
  const shape = group.querySelector("rect") ||
@@ -302,6 +325,10 @@ const LayerView = (props) => {
302
325
  const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
303
326
  return { x: transformed.x, y: transformed.y };
304
327
  };
328
+ const lastClickRef = useRef(0);
329
+ const clickTimerRef = useRef(null);
330
+ const ignoreNextRef = useRef(false);
331
+ const DOUBLE_DELAY = 250;
305
332
  const handlePointerDown = (e) => {
306
333
  var _a;
307
334
  const svg = svgRef.current;
@@ -328,7 +355,9 @@ const LayerView = (props) => {
328
355
  : !((_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
329
356
  const dataRaw = originalData({ id: ghostId, type: "find" });
330
357
  return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
331
- }))) && ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch));
358
+ }))) &&
359
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) &&
360
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch);
332
361
  if (ghostAttributes) {
333
362
  Object.keys(ghostAttributes).forEach((key) => {
334
363
  ghost.setAttribute(key, ghostAttributes[key]);
@@ -431,7 +460,27 @@ const LayerView = (props) => {
431
460
  visible: rightClick,
432
461
  });
433
462
  const findDayaById = originalData({ id: dataId, type: "find" });
434
- handleSelectComponent(findDayaById, e);
463
+ const now = Date.now();
464
+ if (ignoreNextRef.current) {
465
+ ignoreNextRef.current = false;
466
+ return;
467
+ }
468
+ const diff = now - lastClickRef.current;
469
+ if (diff < DOUBLE_DELAY) {
470
+ if (clickTimerRef.current) {
471
+ handleDoubleClick(findDayaById, e);
472
+ clearTimeout(clickTimerRef.current);
473
+ clickTimerRef.current = null;
474
+ }
475
+ ignoreNextRef.current = true;
476
+ lastClickRef.current = 0;
477
+ return;
478
+ }
479
+ lastClickRef.current = now;
480
+ clickTimerRef.current = window.setTimeout(() => {
481
+ handleSelectComponent(findDayaById, e);
482
+ clickTimerRef.current = null;
483
+ }, DOUBLE_DELAY);
435
484
  }
436
485
  if (isDragging.current && hasMoved && allowedDrag) {
437
486
  // drag between group
@@ -568,7 +617,11 @@ const LayerView = (props) => {
568
617
  wheelPanning: true,
569
618
  }, wheel: {
570
619
  disabled: false,
571
- }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: {
620
+ },
621
+ // doubleClick={{
622
+ // disabled: true,
623
+ // }}
624
+ onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: {
572
625
  width: "100%",
573
626
  height: "100%",
574
627
  // overflow: "visible",
@@ -577,7 +630,9 @@ const LayerView = (props) => {
577
630
  width: "100%",
578
631
  height: "100%",
579
632
  // pointerEvents: disabled ? "none" : "auto",
580
- }, children: [_jsxs("svg", Object.assign({ id: "workspace", onContextMenu: (e) => e.preventDefault(), onDrop: (e) => handleTableEvent(e, "drop"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, ref: svgRef, width: "100%", height: "100%",
633
+ }, children: [_jsxs("svg", Object.assign({ id: "workspace", onContextMenu: (e) => e.preventDefault(), onDrop: (e) => handleTableEvent(e, "drop"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp,
634
+ // onDoubleClick={handleDoubleClick}
635
+ ref: svgRef, width: "100%", height: "100%",
581
636
  // scale={5}
582
637
  overflow: "hidden", viewBox: viewBox, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
583
638
  background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
package/dist/features/view-only-3/index.jsx CHANGED
@@ -6,13 +6,14 @@ import Layers from "../../components/layer-v4";
6
6
  import { getTranslate } from "../board-v3/utils";
7
7
  import { Spin } from "antd";
8
8
  const LayerView = (props) => {
9
- const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
9
+ const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
10
10
  select: true,
11
11
  move: true,
12
12
  switch: true,
13
13
  drop: true,
14
- rightClick: true
15
- } } = props;
14
+ rightClick: true,
15
+ double: true,
16
+ }, } = props;
16
17
  const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
17
18
  const tableGhost = useRef(null);
18
19
  const hoverUnderghostId = useRef(null);
@@ -130,6 +131,18 @@ const LayerView = (props) => {
130
131
  }
131
132
  return data;
132
133
  };
134
+ const handleDoubleClick = (items, e) => {
135
+ const find = componentsEditor.find((item) => {
136
+ var _a;
137
+ if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
138
+ return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
139
+ }
140
+ return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
141
+ });
142
+ onDoubleClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.double) && onDoubleClick(find);
143
+ const seletedTable = mappingKey ? find[mappingKey] : find;
144
+ setSelectedTable(seletedTable);
145
+ };
133
146
  const handleSelectComponent = (items, e) => {
134
147
  const find = componentsEditor.find((item) => {
135
148
  var _a;
@@ -139,9 +152,14 @@ const LayerView = (props) => {
139
152
  return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
140
153
  });
141
154
  const rightClick = e.button === 2;
142
- const click = e.button === 0;
143
- (onRightClick && rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick)) && onRightClick(e, find);
144
- (onSelectComponent && !rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select)) && onSelectComponent(find);
155
+ onRightClick &&
156
+ rightClick &&
157
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick) &&
158
+ onRightClick(e, find);
159
+ onSelectComponent &&
160
+ !rightClick &&
161
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select) &&
162
+ onSelectComponent(find);
145
163
  const seletedTable = mappingKey ? find[mappingKey] : find;
146
164
  setSelectedTable(seletedTable);
147
165
  };
@@ -163,10 +181,15 @@ const LayerView = (props) => {
163
181
  }
164
182
  if (i === componentsEditor.length - 1 &&
165
183
  (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
166
- minX = minX > 10 ? minX - 10 : minX;
167
- minY = minY > 10 ? minY - 10 : minY;
168
- maxX = maxX + 10;
169
- maxY = maxY + 10;
184
+ const centerX = (minX + maxX) / 2;
185
+ const centerY = (minY + maxY) / 2;
186
+ const padding = 20;
187
+ const width = maxX - minX + padding * 2;
188
+ const height = maxY - minY + padding * 2;
189
+ minX = centerX - width / 2;
190
+ minY = centerY - height / 2;
191
+ maxX = maxX - minX + padding * 2;
192
+ maxY = maxY - minY + padding * 2;
170
193
  }
171
194
  });
172
195
  extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
@@ -216,7 +239,7 @@ const LayerView = (props) => {
216
239
  // width: maxX + paddingX * 2,
217
240
  // height: maxY + paddingY + (maxY + paddingY) * 0.5,
218
241
  // };
219
- // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
242
+ // console.log(minX, minY, maxX, maxY, props?.viewStyles, "bounding box");
220
243
  return {
221
244
  minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
222
245
  minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
@@ -279,7 +302,7 @@ const LayerView = (props) => {
279
302
  };
280
303
  // drop from out layout editor
281
304
  if (type === "drop") {
282
- (onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop)) && onDrop(event, data);
305
+ onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop) && onDrop(event, data);
283
306
  }
284
307
  // cari elemen bentuk (rect / circle / path)
285
308
  const shape = group.querySelector("rect") ||
@@ -301,6 +324,10 @@ const LayerView = (props) => {
301
324
  const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
302
325
  return { x: transformed.x, y: transformed.y };
303
326
  };
327
+ const lastClickRef = useRef(0);
328
+ const clickTimerRef = useRef(null);
329
+ const ignoreNextRef = useRef(false);
330
+ const DOUBLE_DELAY = 250;
304
331
  const handlePointerDown = (e) => {
305
332
  var _a;
306
333
  const svg = svgRef.current;
@@ -327,7 +354,9 @@ const LayerView = (props) => {
327
354
  : !((_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
328
355
  const dataRaw = originalData({ id: ghostId, type: "find" });
329
356
  return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
330
- }))) && ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch));
357
+ }))) &&
358
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) &&
359
+ (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch);
331
360
  if (ghostAttributes) {
332
361
  Object.keys(ghostAttributes).forEach((key) => {
333
362
  ghost.setAttribute(key, ghostAttributes[key]);
@@ -430,7 +459,27 @@ const LayerView = (props) => {
430
459
  visible: rightClick,
431
460
  });
432
461
  const findDayaById = originalData({ id: dataId, type: "find" });
433
- handleSelectComponent(findDayaById, e);
462
+ const now = Date.now();
463
+ if (ignoreNextRef.current) {
464
+ ignoreNextRef.current = false;
465
+ return;
466
+ }
467
+ const diff = now - lastClickRef.current;
468
+ if (diff < DOUBLE_DELAY) {
469
+ if (clickTimerRef.current) {
470
+ handleDoubleClick(findDayaById, e);
471
+ clearTimeout(clickTimerRef.current);
472
+ clickTimerRef.current = null;
473
+ }
474
+ ignoreNextRef.current = true;
475
+ lastClickRef.current = 0;
476
+ return;
477
+ }
478
+ lastClickRef.current = now;
479
+ clickTimerRef.current = window.setTimeout(() => {
480
+ handleSelectComponent(findDayaById, e);
481
+ clickTimerRef.current = null;
482
+ }, DOUBLE_DELAY);
434
483
  }
435
484
  if (isDragging.current && hasMoved && allowedDrag) {
436
485
  // drag between group
@@ -578,7 +627,11 @@ const LayerView = (props) => {
578
627
  wheelPanning: true,
579
628
  }} wheel={{
580
629
  disabled: false,
581
- }} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} centerOnInit={true} {...props.transformProps}>
630
+ }}
631
+ // doubleClick={{
632
+ // disabled: true,
633
+ // }}
634
+ onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} centerOnInit={true} {...props.transformProps}>
582
635
  <TransformComponent wrapperStyle={{
583
636
  width: "100%",
584
637
  height: "100%",
@@ -589,7 +642,9 @@ const LayerView = (props) => {
589
642
  height: "100%",
590
643
  // pointerEvents: disabled ? "none" : "auto",
591
644
  }}>
592
- <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
645
+ <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp}
646
+ // onDoubleClick={handleDoubleClick}
647
+ ref={svgRef} width="100%" height="100%"
593
648
  // scale={5}
594
649
  overflow="hidden" viewBox={viewBox} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
595
650
  background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.4.4",
3
+ "version": "3.4.6",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",