seat-editor 3.2.2 → 3.2.3

package/dist/app/new-board/page.jsx

@@ -1,38 +1,27 @@
 "use client";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
-import { extraComponent } from "../constant";
 import { data4 } from "../constant";
 import { dummyImage } from "../only-view/page";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState(dummyImage);
+    const [extraComponents, setExtraComponents] = useState([]);
     const [backgroundColor, setBackgroundColor] = useState("#000000");
     const [viewOnly, setViewOnly] = useState(true);
     useEffect(() => {
         setInitialValue(data4);
-        setExtraComponents(extraComponent);
+        setExtraComponents(dummyImage);
     }, []);
     return (<>
       <div className="w-full h-screen flex flex-col relative justify-center">
         <div className="w-full h-[1000px] bg-white border-r border-gray-200">
-        {/* <LayerView
-          componentProps={initialValue}
-          mappingKey="properties"
-          extraComponentProps={[]}
-          defaultBackground="#ffffff"
-          // dragOnly={true}
-          statusKey="status"
-          
-        /> */}
+     
         </div>
-        {/* <button className="bg-blue-500 text-white px-4 py-2 rounded"
-          onClick={() => setViewOnly(!viewOnly)}
-        >
-          {viewOnly ? "Edit Mode" : "View Mode"}
-        </button> */}
+        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
+          {viewOnly ? "Edit Mode ddd" : "View Mode"}
+        </button>
         <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={false} dragOnly={viewOnly} deleteAutorized={{
+          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly={true} deleteAutorized={{
             component: true,
             extraComponent: true,
         }} 

package/dist/app/only-view/page.jsx

@@ -228,7 +228,9 @@ const TouchScrollDetect = () => {
                 icon: <UserIcon />,
                 key: "user",
             },
-        ]}/>
+        ]} viewStyles={{
+            paddingTop: 200,
+        }}/>
         </div>
       </div>
     </div>);

package/dist/components/layer-v4/index.jsx

@@ -111,7 +111,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }
                     return null;
                 });
-                return <g key={`group-${tagIndex}`}>{elements}</g>;
+                return <g key={`group-${tagIndex}`} pointerEvents="none">{elements}</g>;
             });
         };
         let commonProps = {
@@ -243,12 +243,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 {...omit(item, ["x", "y", "label", "points"])} {...commonProps}/>
 
               {renderTags(tags)}
-              {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+              {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
                   {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                             var _a, _b, _c, _d, _e, _f, _g;
                             const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                             const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
+                            return (<text pointerEvents="none" {...omit(commonProps, [
                                 "opacity",
                                 "stroke",
                                 "strokeWidth",

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

@@ -146,10 +146,17 @@ const BoardTemplate = ({ refs }) => {
         }
         if ((extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.length) < 1 &&
             ["background", "text"].includes((_g = componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
-            minX = minX - minX * 0.5;
-            minY = minY - minY * 0.5;
+            minX = minX;
+            minY = minY;
+        }
+        const hasBoundingBox = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.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"); });
+        if (hasBoundingBox) {
+            const findBoundingBox = extraComponentsProps.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"); });
+            minX = findBoundingBox.x;
+            minY = findBoundingBox.y;
         }
         if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
+            console.log("minX", minX, "minY", minY, "maxX", maxX, "maxY", maxY, "Haduhhh");
             (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(-minX, -minY, scale);
             setHasInitialzed(true);
         }
@@ -174,6 +181,10 @@ const BoardTemplate = ({ refs }) => {
     }, 1000));
     // Redux → Local
     useEffect(() => {
+        console.log({
+            flagChange,
+            updateBy
+        }, "haduuhhh");
         if (flagChange && updateBy === "global") {
             if (!isEqual(selectedComponentProps, selectedComponent)) {
                 isSyncingFromRedux.current = true;
@@ -369,7 +380,6 @@ const BoardTemplate = ({ refs }) => {
         }
         //move tanpa ada selection single element dan bisa move juga ketika ada selection box
         //JIKA PUNYA SELECTION TAPI DOWN DI ELEMENT LAIN
-        const downInMatchSelectionBox = downInSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg" && isInSelectionTarget;
         if (downInSelectionBox) {
             hadSelectionRef.current = true;
         }
@@ -407,17 +417,17 @@ const BoardTemplate = ({ refs }) => {
             !downOutSelectionBox &&
             isInSelectionTarget &&
             !isSingleSelection &&
-            !isInTargetElement;
-        const downAtResizePositionAndHasSelectionBox = downAtResizePosition && hadSelectionBox && !isRotateSelectionBox;
+            !isInTargetElement && !isInitialCreateBoundingBox;
+        const downAtResizePositionAndHasSelectionBox = downAtResizePosition && hadSelectionBox && !isRotateSelectionBox && !isInitialCreateBoundingBox;
         const isMightResizeElement = !isEmpty(selectedComponent) &&
             downAtResizePosition &&
             downAtResizePosition &&
-            !hadSelectionBox;
+            !hadSelectionBox && !isInitialCreateBoundingBox;
         const isMightMove = activeId &&
             !targetPointPolygon &&
             isInTargetElement &&
-            !isMightResizeElement;
-        const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement;
+            !isMightResizeElement && !isInitialCreateBoundingBox;
+        const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement && !isInitialCreateBoundingBox;
         if (downOutResizePositionAndInSelectionBox) {
             onMoveSelectionBoxRef.current = true;
         }

package/dist/features/package/index.d.ts

@@ -34,6 +34,12 @@ export interface TableEditorProps {
         extraComponent: boolean;
     };
     refs?: React.RefObject<RefsType>;
+    viewStyles?: {
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
+    };
 }
 declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -8,7 +8,7 @@ import { isEqual } from "lodash";
 import LayerView from "../view-only";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
-    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs } = props;
+    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs, } = props;
     const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
     const refsBoard = useRef(null);
@@ -17,7 +17,7 @@ const TableEditor = (props) => {
         return ({
             svgRef: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.svgRef,
             transformRef: (_b = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _b === void 0 ? void 0 : _b.transformRef,
-            containerRef: (_c = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _c === void 0 ? void 0 : _c.containerRef
+            containerRef: (_c = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _c === void 0 ? void 0 : _c.containerRef,
         });
     });
     useEffect(() => {
@@ -27,6 +27,13 @@ const TableEditor = (props) => {
                 payload: null,
             });
         }
+        dispatch({
+            type: "tool/setActiveTool",
+            payload: ""
+        });
+        if (viewOnly) {
+            dispatch({ type: "board/setFlagChange", payload: true });
+        }
     }, [viewOnly]);
     const onUpdateCurrentState = () => {
         let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
@@ -58,7 +65,8 @@ const TableEditor = (props) => {
     };
     useEffect(() => {
         if (!isEqual(components, convertComponentProps()) ||
-            !isEqual(extraComponents, extraComponentProps) || !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground)) {
+            !isEqual(extraComponents, extraComponentProps) ||
+            !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground)) {
             onCurrentStateChange && onUpdateCurrentState();
         }
     }, [components, extraComponents, backgroundColor]);
@@ -105,18 +113,13 @@ const TableEditor = (props) => {
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
     return (<>
       <div className="w-full h-screen flex relative">
-        <div className="w-full h-full flex relative" style={{
-            display: !viewOnly ? "none" : "flex",
-        }}>
-          <LayerView statusKey="status"/>
-        </div>
-        <div className="w-full h-full flex relative" style={{
-            display: viewOnly ? "none" : "flex",
-        }}>
-          <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
-          <Board refs={refsBoard}/>
-          <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
-        </div>
+        {viewOnly ? (<div className="w-full h-full flex relative">
+            <LayerView statusKey="status"/>
+          </div>) : (<div key={`${viewOnly}`} className="w-full h-full flex relative">
+            <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
+            <Board key={`${viewOnly}`} refs={refsBoard}/>
+            <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
+          </div>)}
       </div>
     </>);
 };

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

@@ -71,8 +71,10 @@ export interface LayerViewProps<TMeta = undefined> {
     onSwitch?: (e: MouseEvent, component: TypeActionProps<TMeta>) => void;
     refs?: React.ForwardedRef<RefLayerView>;
     viewStyles?: {
-        paddingX?: number;
-        paddingY?: number;
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
     };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;

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

@@ -163,10 +163,12 @@ const LayerView = (props) => {
             minY = minY;
         }
         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"); });
-        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);
-        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);
+        // const paddingY =
+        //   maxY * (props?.viewStyles?.paddingY || 0) +
+        //   minY * (props?.viewStyles?.paddingY || 0);
+        // const paddingX =
+        //   maxX * (props?.viewStyles?.paddingX || 0) +
+        //   minX * (props?.viewStyles?.paddingX || 0);
         if (hasBoundingBox) {
             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"); });
             hasBoundingBoxRef.current = true;
@@ -177,11 +179,17 @@ const LayerView = (props) => {
                 height: findBoundingBox.height,
             };
         }
+        // return {
+        //   minX: minX - paddingX - (minX - paddingX) * 0.5,
+        //   minY: minY - paddingY * 2,
+        //   width: maxX + paddingX * 2,
+        //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
+        // };
         return {
-            minX: minX - paddingX - (minX - paddingX) * 0.5,
-            minY: minY - paddingY * 2,
-            width: maxX + paddingX * 2,
-            height: maxY + paddingY + (maxY + paddingY) * 0.5,
+            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),
         };
     }, [componentsEditor, extraComponentsEditor]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -538,11 +546,11 @@ const LayerView = (props) => {
             touchAction: "none",
             userSelect: "none",
         }} {...props.svgProps}>
-            <defs>
-              <clipPath id="contentCrop">
-                <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
-              </clipPath>
-            </defs>
+            {hasBoundingBox && (<defs>
+                <clipPath id="contentCrop">
+                  <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
+                </clipPath>
+              </defs>)}
             <g id="main-layer" clip-path="url(#contentCrop)">
               <Layers components={[
             ...extraComponentsEditor,

package/package.json

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