seat-editor 1.2.21 → 1.2.22

package/dist/app/layout.d.ts

@@ -3,4 +3,4 @@ import "./globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: Readonly<{
     children: React.ReactNode;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/app/new-board/page.d.ts

@@ -1 +1 @@
-export default function NewBoard(): import("react/jsx-runtime").JSX.Element;
+export default function NewBoard(): import("react").JSX.Element;

package/dist/app/old-board/page.d.ts

@@ -1,2 +1,3 @@
-declare const SeatEditor: () => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare const SeatEditor: () => React.JSX.Element;
 export default SeatEditor;

package/dist/app/only-view/page.d.ts

@@ -1,2 +1,2 @@
-declare const OnlyView: () => import("react/jsx-runtime").JSX.Element;
-export default OnlyView;
+declare const TouchScrollDetect: () => import("react").JSX.Element;
+export default TouchScrollDetect;

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

@@ -1,19 +1,52 @@
-import LayerView from "@/features/view/index";
-import { dataDummy, dummyImage } from "./constant";
-const OnlyView = () => {
-    return (<>
-      <div className="w-full h-screen flex relative justify-center items-center">
-        <LayerView componentProps={dataDummy} mappingKey="properties" extraComponentProps={dummyImage} statusKey="status" colorMatchKey={[
-            {
-                color: "red",
-                key: "1",
-            },
-            {
-                color: "blue",
-                key: "2",
+"use client";
+import LayerView from "@/features/view";
+import { useState, useEffect } from "react";
+const TouchScrollDetect = () => {
+    const [fingerCount, setFingerCount] = useState(0);
+    const [scrollType, setScrollType] = useState(""); // untuk kondisi tampilan
+    useEffect(() => {
+        const container = document.getElementById("scroll-container");
+        const handleTouchStart = (e) => {
+            const count = e.touches.length;
+            setFingerCount(count);
+            if (count === 1) {
+                setScrollType("one");
             }
-        ]}/>
+            else if (count === 2) {
+                setScrollType("two");
+            }
+            else {
+                setScrollType("other");
+            }
+        };
+        const handleTouchEnd = () => {
+            setFingerCount(0);
+            setScrollType(""); // reset saat tidak ada sentuhan
+        };
+        if (container) {
+            container.addEventListener("touchstart", handleTouchStart);
+            container.addEventListener("touchend", handleTouchEnd);
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener("touchstart", handleTouchStart);
+                container.removeEventListener("touchend", handleTouchEnd);
+            }
+        };
+    }, []);
+    return (<div id="scroll-container" className="h-screen overflow-y-scroll bg-gray-100 p-6 text-gray-800">
+      <LayerView statusKey="status" defaultBackground="#000000"/>
+      <div className="sticky top-0 bg-white z-10 py-2">
+        {scrollType === "one" && (<p className="text-blue-600 font-medium">👆 One-finger scroll</p>)}
+        {scrollType === "two" && (<p className="text-green-600 font-medium">✌️ Two-finger scroll</p>)}
+        {scrollType === "other" && (<p className="text-red-600 font-medium">
+            🖐️ {fingerCount} fingers on screen
+          </p>)}
+      </div>
+
+      <div className="h-[2000px] bg-white mt-4 rounded p-4 shadow">
+        <p>Scroll this page with 1 or 2 fingers.</p>
       </div>
-    </>);
+    </div>);
 };
-export default OnlyView;
+export default TouchScrollDetect;

package/dist/app/page.d.ts

@@ -1,2 +1,2 @@
-declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: () => import("react").JSX.Element;
 export default TableEditor;

package/dist/components/button-tools/index.d.ts

@@ -7,5 +7,5 @@ interface ButtonToolsProps {
     }>;
     popoverProps?: PopoverProps;
 }
-declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
 export default ButtonTools;

package/dist/components/form-tools/label.d.ts

@@ -1,2 +1,2 @@
-declare const SectionLabel: () => import("react/jsx-runtime").JSX.Element;
+declare const SectionLabel: () => import("react").JSX.Element;
 export default SectionLabel;

package/dist/components/form-tools/shape.d.ts

@@ -1,2 +1,2 @@
-declare const SectionShape: () => import("react/jsx-runtime").JSX.Element;
+declare const SectionShape: () => import("react").JSX.Element;
 export default SectionShape;

package/dist/components/input/number-indicator.d.ts

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
 export default NumberIndicator;

package/dist/components/layer/index.d.ts

@@ -12,5 +12,5 @@ interface LayersProps {
     style?: any;
     mode?: "view" | "edit";
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: LayersProps) => import("react").JSX.Element;
 export default Layers;

package/dist/components/lib/index.d.ts

@@ -3,6 +3,6 @@ export interface LayerViewProps {
     componentProps: any[];
     extraComponentProps: any[];
 }
-declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
 export default TableEditor;
 export { LayerView };

package/dist/components/modal-preview/index.d.ts

@@ -1,4 +1,4 @@
 declare const ModalPreview: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ModalPreview;

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

@@ -1,5 +1,5 @@
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
 }
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react").JSX.Element;
 export default BoardTemplate;

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

@@ -1,2 +1,2 @@
-declare const Navbar: () => import("react/jsx-runtime").JSX.Element;
+declare const Navbar: () => import("react").JSX.Element;
 export default Navbar;

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

@@ -21,5 +21,5 @@ export interface TableEditorProps {
         src: string;
     };
 }
-declare const TableEditor: (props: TableEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

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

@@ -7,5 +7,5 @@ interface ControlPanelsProps {
         src: string;
     };
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/select-tool.d.ts

@@ -1,4 +1,4 @@
 declare const SelectToolForm: ({ title }: {
     title?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/square-circle-tool.d.ts

@@ -1,2 +1,2 @@
-declare const SquareToolForm: () => import("react/jsx-runtime").JSX.Element;
+declare const SquareToolForm: () => import("react").JSX.Element;
 export default SquareToolForm;

package/dist/features/panel/table-seat-circle.d.ts

@@ -1,2 +1,2 @@
-declare const SeatCircle: () => import("react/jsx-runtime").JSX.Element;
+declare const SeatCircle: () => import("react").JSX.Element;
 export default SeatCircle;

package/dist/features/panel/text-tool.d.ts

@@ -1,2 +1,2 @@
-declare const TextTool: () => import("react/jsx-runtime").JSX.Element;
+declare const TextTool: () => import("react").JSX.Element;
 export default TextTool;

package/dist/features/panel/upload-tool.d.ts

@@ -9,5 +9,5 @@ interface UploadToolProps {
         src: string;
     };
 }
-declare const UploadTool: ({ name, type, action, responseMapping, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type, action, responseMapping, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -1,2 +1,2 @@
-declare const SideTool: () => import("react/jsx-runtime").JSX.Element;
+declare const SideTool: () => import("react").JSX.Element;
 export default SideTool;

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

@@ -13,5 +13,5 @@ export interface LayerViewProps {
     defaultBackground?: string;
     transformProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/features/view/index.jsx

@@ -3,9 +3,8 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import Layers from "../../components/layer";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
     const transformRef = useRef(null);
     const containerRef = useRef(null);
     const svgRef = useRef(null);
@@ -125,12 +124,27 @@ const LayerView = (props) => {
             return finalProps;
         });
     };
-    return (<div className="relative w-full h-full flex-1" ref={containerRef}>
+    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
+            height: "100vh",
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+            touchAction: "pan-y",
+        }}>
       <TransformWrapper ref={transformRef} {...props.transformProps} 
     // panning={{
     //   disabled: false,
+    //   velocityDisabled: true,
     // }}
-    disablePadding={true} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true}>
+    // limitToBounds={false}
+    // doubleClick={{ disabled: true }}
+    // pinch={{ disabled: false }}
+    // wheel={{ disabled: true }}
+    // disabled={true}
+    // disablePadding={true}
+    // centerZoomedOut={true}
+    onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} 
+    // pinch={{ step: 1 }}
+    smooth={true}>
         <TransformComponent wrapperStyle={{
             width: "100%",
             height: "100%",
@@ -139,17 +153,14 @@ const LayerView = (props) => {
             width: "100%",
             height: "100%",
         }}>
-          <svg id="workspace" ref={svgRef} width="100%" height="100%" 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,
-            display: "block",
-            pointerEvents: "auto",
-            touchAction: "none",
+          <div style={{
+            height: "500px", // Assume your image is tall and scrollable
+            width: "100%",
+            touchAction: "pan-y",
+            background: "black", // Allow vertical scroll
         }}>
-            <Layers mode="view" components={[
-            ...extraComponentsEditor,
-            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
-        ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
-          </svg>
+            tesd
+          </div>
         </TransformComponent>
       </TransformWrapper>
     </div>);

package/dist/provider/redux-provider.d.ts

@@ -1,3 +1,3 @@
 export declare const ReduxProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/provider/store-provider.d.ts

@@ -1,3 +1,3 @@
 export declare const StoreProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/package.json

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