seat-editor 3.2.7 → 3.2.10

package/dist/features/board-v3/index.jsx

@@ -8,7 +8,7 @@ import ModalPreview from "../../components/modal-preview";
 import LayerView from "../view-only-3";
 import { isEqual, debounce } from "lodash";
 import { ZoomIn, ZoomOut } from "lucide-react";
-import { Button } from "antd";
+import { Button, Radio } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 const toolElement = ["square", "circle", "table-seat-circle"];
@@ -66,7 +66,7 @@ const BoardTemplate = ({ refs }) => {
     //polygon
     const polygonElementRef = useRef([]);
     const isOnMakePolygonRef = useRef(false);
-    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, } = useAppSelector((state) => state.board);
+    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, isShowTagType } = useAppSelector((state) => state.board);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
     useEffect(() => {
@@ -214,19 +214,15 @@ const BoardTemplate = ({ refs }) => {
     const updateComponentsAttribute = (components) => {
         if (!components.length)
             return;
-        // const isExtra = components?.filter((item) => item?.shape === "polygon");
-        // if (isExtra) {
-        //   const nextExtra = updateManyComponents(
-        //     extraComponentsState,
-        //     components,
-        //     setExtraComponentsState
-        //   );
-        //   dispatch({ type: "board/setUpdateBy", payload: "local" });
-        //   queueUpdateComponents(nextExtra);
-        // }
+        const nextExtraComponents = updateManyComponents(extraComponentsState, components, setExtraComponentsState);
+        if (nextExtraComponents) {
+            queueUpdateComponents(nextExtraComponents);
+        }
         const nextComponents = updateManyComponents(componentsState, components, setComponentsState);
+        if (nextComponents) {
+            queueUpdateComponents(nextComponents);
+        }
         dispatch({ type: "board/setUpdateBy", payload: "local" });
-        // queueUpdateExtraComponents(nextComponents);
     };
     const addComponents = (component) => {
         const index = extraComponentsState.findIndex((c) => (c === null || c === void 0 ? void 0 : c.shape) === "bounding-box");
@@ -1077,7 +1073,7 @@ const BoardTemplate = ({ refs }) => {
             }
         };
         const pointerHandleUp = (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
             updateSelectionGuides(svg, {
                 x: 0,
                 y: 0,
@@ -1352,13 +1348,6 @@ const BoardTemplate = ({ refs }) => {
                 });
                 const newDataComponent = results.map((r) => r.newDataComponent);
                 const dataSelection = results.map((r) => r.newDataSelection);
-                // const currentRotation = getRotation(
-                //   (selectionLines?.children[0] as SVGGraphicsElement)?.transform
-                //     ?.baseVal
-                // );
-                // rotationSelectionRef.current = currentRotation;
-                const sizeSelection = getSvgElementSize((_q = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _q === void 0 ? void 0 : _q.children[0]);
-                // const newBoxSelection = getGlobalBBox(svg, selectionLines);
                 updateComponentsAttribute(newDataComponent);
                 const newDataSelection = {
                     x: Math.min(...dataSelection.map((d) => d.x)),
@@ -1381,19 +1370,14 @@ const BoardTemplate = ({ refs }) => {
                 });
                 setSelectedLines(newDataSelection);
                 dataElementSelectionGroupRef.current = newDataComponent;
-                // // remove ghost element
-                // svgRef.current
-                //   ?.querySelectorAll("#ghost-element-has-selection")
-                //   .forEach((el) => el.remove());
                 hadSelectionRef.current = false;
             }
             //MOVE SELECTION BOX UP
             if (downOutResizePositionAndInSelectionBox &&
                 !shiftActive &&
                 !isRotateSelectionBox) {
-                const selectionLines = (_r = svgRef.current) === null || _r === void 0 ? void 0 : _r.querySelector("#selection-lines");
                 isResizeSelectionRef.current = false;
-                const results = (_s = dataElementSelectionGroupRef.current) === null || _s === void 0 ? void 0 : _s.map((item) => {
+                const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
                     const { g, element, inner } = getAttributeElement(svg, item.id);
                     const { x, y } = getTranslate(g);
                     const getBBox = getGlobalBBox(svg, g);
@@ -1431,17 +1415,11 @@ const BoardTemplate = ({ refs }) => {
                     payload: null,
                 });
                 setSelectedLines(newDataSelection);
-                // if (newDataSelection?.height?.id) {
-                //   newDataSelection.height = newDataSelection.height.id;
-                // }
-                // if (newDataSelection?.x) {
-                //   setSelectedLines(newDataSelection);
-                // }
                 dataElementSelectionGroupRef.current = newDataComponent;
                 hadSelectionRef.current = false;
             }
             //DELETE GHOST ELEMENT BISA MEMBU
-            (_t = svgRef.current) === null || _t === void 0 ? void 0 : _t.querySelectorAll("#ghost-element").forEach((el) => el.remove());
+            (_r = svgRef.current) === null || _r === void 0 ? void 0 : _r.querySelectorAll("#ghost-element").forEach((el) => el.remove());
             //UPDATE DATASET TO STATE IF MOVEk
             // if (releaseGroupRef.current) return;
             if ((isMightMove &&
@@ -1500,9 +1478,37 @@ const BoardTemplate = ({ refs }) => {
             //lin helper from start to move
         }
     };
+    const handleCheckPreview = (e) => {
+        const type = e.target.value;
+        if (type === "type-1") {
+            dispatch({
+                type: "board/setTagType",
+                payload: type,
+            });
+        }
+        if (type === "type-2") {
+            dispatch({
+                type: "board/setTagType",
+                payload: type,
+            });
+        }
+        if (type === "default") {
+            dispatch({
+                type: "board/setTagType",
+                payload: type,
+            });
+        }
+    };
     return (<>
       <ModalPreview>
         <LayerView statusKey="status"/>
+        <div className="flex gap-2 mt-2">
+          <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
+            <Radio value="default">Default</Radio>
+            <Radio value="type-1">Type 1</Radio>
+            <Radio value="type-2">Type 2</Radio>
+          </Radio.Group>
+        </div>
       </ModalPreview>
       <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
         <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">

package/dist/features/panel/index.jsx

@@ -43,7 +43,6 @@ const ControlPanels = (props) => {
     let values = Form.useWatch([], form);
     useEffect(() => {
         if (selectedComponent) {
-            console.log("selectedComponent", selectedComponent);
             const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
             const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -56,7 +55,6 @@ const ControlPanels = (props) => {
             form.setFieldsValue(selectedComponent);
         }
         else if (selectedGroup) {
-            console.log("selectedGroup", selectedGroup);
             if (show)
                 setOpen(true);
             if (!show)
@@ -67,32 +65,24 @@ const ControlPanels = (props) => {
                 const firstValue = arr[0][key];
                 return arr.every((item) => item[key] === firstValue);
             }
-            const isSameAllWidth = isSameAllByKey(selectedGroup, "width");
-            const isSameAllHeight = isSameAllByKey(selectedGroup, "height");
-            const isSameX = isSameAllByKey(selectedGroup, "x");
-            const isSameY = isSameAllByKey(selectedGroup, "y");
-            const isSameFill = isSameAllByKey(selectedGroup, "fill");
-            const isSameStroke = isSameAllByKey(selectedGroup, "stroke");
-            const isSameOpacity = isSameAllByKey(selectedGroup, "opacity");
-            const isSampeRotation = isSameAllByKey(selectedGroup, "rotation");
-            const isSameStrokeWidth = isSameAllByKey(selectedGroup, "strokeWidth");
-            console.log({
-                isSameAllWidth,
-                isSameAllHeight,
-                isSameX,
-                isSameY,
-                isSameFill,
-                isSameStroke,
-                isSameOpacity,
-                isSampeRotation,
-                isSameStrokeWidth,
+            function getValueIfSame(arr, key) {
+                return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
+            }
+            form.setFieldsValue({
+                width: getValueIfSame(selectedGroup, "width"),
+                height: getValueIfSame(selectedGroup, "height"),
+                x: getValueIfSame(selectedGroup, "x"),
+                y: getValueIfSame(selectedGroup, "y"),
+                fill: getValueIfSame(selectedGroup, "fill"),
+                stroke: getValueIfSame(selectedGroup, "stroke"),
+                opacity: getValueIfSame(selectedGroup, "opacity"),
+                rotation: getValueIfSame(selectedGroup, "rotation"),
+                strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
+                radius: getValueIfSame(selectedGroup, "radius"),
             });
-            form.setFieldsValue(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isSameAllWidth ? { width: selectedGroup[0].width } : undefined)), (isSameAllHeight ? { height: selectedGroup[0].height } : undefined)), (isSameX ? { x: selectedGroup[0].x } : undefined)), (isSameY ? { y: selectedGroup[0].y } : undefined)), (isSameFill ? { fill: selectedGroup[0].fill } : undefined)), (isSameStroke ? { stroke: selectedGroup[0].stroke } : undefined)), (isSameOpacity ? { opacity: selectedGroup[0].opacity } : undefined)), (isSampeRotation ? { rotation: selectedGroup[0].rotation } : undefined)), (isSameStrokeWidth
-                ? { strokeWidth: selectedGroup[0].strokeWidth }
-                : {})));
+            const values = form.getFieldsValue();
         }
         else {
-            console.log("selectedGroup", selectedGroup);
             setOpen(false);
         }
     }, [selectedComponent, selectedGroup, show]);
@@ -140,7 +130,11 @@ const ControlPanels = (props) => {
     }, 300));
     const debounceSyncDataSelectedGroup = useRef(debounce((data) => {
         dispatch({
-            type: "board/updateAllComponents",
+            type: "panel/updateSelectedGroup",
+            payload: data,
+        });
+        dispatch({
+            type: "board/updateComponentsBulk",
             payload: data,
         });
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -178,8 +172,8 @@ const ControlPanels = (props) => {
             debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, } = newValues;
-            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;
@@ -216,7 +210,7 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return (<SelectToolForm action={action} tranform={transform}/>);
+                return <SelectToolForm action={action} tranform={transform}/>;
             case "square":
             case "circle":
                 return <SquareToolForm />;

package/dist/features/panel/panel-slice.js

@@ -31,11 +31,7 @@ export const panelSlice = createSlice({
             state.selectedGroup = action.payload;
         },
         updateSelectedGroup: (state, action) => {
-            state.selectedGroup = Object.assign({}, action.payload);
-            state.history.push(state.selectedGroup);
-            if (state.history.length > 20) {
-                state.history.shift();
-            }
+            state.selectedGroup = action.payload;
         },
         setSelectionLines: (state, action) => {
             state.selectionLines = action.payload;

package/dist/features/panel/selected-group.jsx

@@ -12,6 +12,9 @@ const SelectedGroup = () => {
             <Form.Item label="Height" name="height" className="w-full">
               <InputNumber suffix="px"/>
             </Form.Item>
+            <Form.Item label="Radius" name={"radius"} className="w-full">
+              <InputNumber step={1} max={1} min={0}/>
+            </Form.Item>
           </Flex>
           <Flex gap={2}>
             <Form.Item label="Position X" name="x" className="w-full">
@@ -39,6 +42,7 @@ const SelectedGroup = () => {
             <Form.Item label="opacity" name={"opacity"} className="w-full">
               <InputNumber step={0.1} max={1} min={0}/>
             </Form.Item>
+           
           </Flex>
         </div>
       </div>

package/dist/features/panel/upload-tool.jsx

@@ -35,8 +35,8 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
         id: id || new Date().getTime(),
         x: Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
         y: Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
-        width: width < 1 ? 100 : width,
-        height: height < 1 ? 100 : height,
+        width: width < 1 ? 200 : width,
+        height: height < 1 ? 200 : height,
         rotation: 0,
         shape: name,
         src,
@@ -59,24 +59,27 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
                         if (isEdit) {
                             dispatch({
                                 type: "board/updateComponent",
-                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src, Number(defaultValue.id))),
+                                payload: Object.assign({}, defaultFormatValue(defaultValue.width, defaultValue.height, src, Number(defaultValue.id))),
                             });
                             dispatch({
                                 type: "panel/setSelectedComponent",
-                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src, Number(defaultValue.id))),
+                                payload: Object.assign({}, defaultFormatValue(0, 0, src, Number(defaultValue.id))),
                             });
                             setDefaultSrc(src);
                             dispatch({ type: "board/setFlagChange", payload: true });
                             dispatch({ type: "board/setUpdateBy", payload: "global" });
                         }
                         else {
+                            const defaultValue = Object.assign({}, defaultFormatValue(0, 0, src));
                             dispatch({
-                                type: "board/addComponent",
-                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src)),
+                                type: type === "component"
+                                    ? "board/addComponent"
+                                    : "board/setExtraComponent",
+                                payload: defaultValue,
                             });
                             dispatch({
                                 type: "panel/setSelectedComponent",
-                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src)),
+                                payload: defaultValue,
                             });
                         }
                     }

package/dist/features/view-only-3/index.d.ts

@@ -9,6 +9,7 @@ export type TableGhost = {
 export type TableMatchKey = {
     key: string | number;
     properties: PropertiesProps;
+    className?: string;
 };
 export type TableMatchEvent = {
     event: EventHandleType;
@@ -76,6 +77,7 @@ export interface LayerViewProps<TMeta = undefined> {
         paddingRight?: number;
         paddingBottom?: number;
     };
+    disabled?: boolean;
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/features/view-only-3/index.jsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v4";
 import { getTranslate } from "../board-v3/utils";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -186,10 +186,10 @@ const LayerView = (props) => {
         //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
         // };
         return {
-            minX: minX - ((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop),
-            minY: minY - ((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingLeft),
-            width: maxX + ((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingRight),
-            height: maxY + ((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingBottom),
+            minX: minX - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
+            minY: minY - (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingLeft) || 0),
+            width: maxX + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingRight) || 0),
+            height: maxY + (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingBottom) || 0),
         };
     }, [componentsEditor, extraComponentsEditor]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -200,7 +200,7 @@ const LayerView = (props) => {
             let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
             if (tableMatchKey) {
                 const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
-                finalProps = Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties);
+                finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className });
             }
             return finalProps;
         });
@@ -514,6 +514,8 @@ const LayerView = (props) => {
     return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
             overflow: "auto",
             WebkitOverflowScrolling: "touch",
+            filter: disabled ? "grayscale(100%)" : "none",
+            pointerEvents: disabled ? "none" : "auto",
         }} {...props.containerProps}>
       {/* {isDragging?.current && (
           <div className="absolute bottom-1/2 left-1  flex gap-4 z-[10]">
@@ -533,18 +535,20 @@ const LayerView = (props) => {
             width: "100%",
             height: "100%",
             // overflow: "visible",
+            pointerEvents: disabled ? "none" : "auto",
         }} contentStyle={{
             width: "100%",
             height: "100%",
+            pointerEvents: disabled ? "none" : "auto",
         }}>
           <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%" 
     // scale={5}
     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={{
             background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
             display: "block",
-            pointerEvents: "all",
+            pointerEvents: disabled ? "none" : "all",
             touchAction: "none",
-            userSelect: "none",
+            userSelect: "none"
         }} {...props.svgProps}>
             {hasBoundingBox && (<defs>
                 <clipPath id="contentCrop">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.2.7",
+  "version": "3.2.10",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",