seat-editor 1.2.21 → 1.2.23

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-runtime").JSX.Element;
+export default TouchScrollDetect;

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

@@ -1,16 +1,40 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import LayerView from "@/features/view/index";
-import { dataDummy, dummyImage } from "./constant";
-const OnlyView = () => {
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative justify-center items-center", children: _jsx(LayerView, { componentProps: dataDummy, mappingKey: "properties", extraComponentProps: dummyImage, statusKey: "status", colorMatchKey: [
-                    {
-                        color: "red",
-                        key: "1",
-                    },
-                    {
-                        color: "blue",
-                        key: "2",
-                    }
-                ] }) }) }));
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { id: "scroll-container", className: "h-screen overflow-y-scroll bg-gray-100 p-6 text-gray-800", children: [_jsx(LayerView, { statusKey: "status", defaultBackground: "#000000" }), _jsxs("div", { className: "sticky top-0 bg-white z-10 py-2", children: [scrollType === "one" && (_jsx("p", { className: "text-blue-600 font-medium", children: "\uD83D\uDC46 One-finger scroll" })), scrollType === "two" && (_jsx("p", { className: "text-green-600 font-medium", children: "\u270C\uFE0F Two-finger scroll" })), scrollType === "other" && (_jsxs("p", { className: "text-red-600 font-medium", children: ["\uD83D\uDD90\uFE0F ", fingerCount, " fingers on screen"] }))] }), _jsx("div", { className: "h-[2000px] bg-white mt-4 rounded p-4 shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) })] }));
 };
-export default OnlyView;
+export default TouchScrollDetect;

package/dist/features/view/index.js

@@ -6,7 +6,7 @@ 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);
@@ -126,14 +126,20 @@ const LayerView = (props) => {
             return finalProps;
         });
     };
-    return (_jsx("div", { className: "relative w-full h-full flex-1", ref: containerRef, children: _jsx(TransformWrapper, Object.assign({ ref: transformRef }, props.transformProps, { 
-            // panning={{
-            //   disabled: false,
-            // }}
-            disablePadding: true, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, children: _jsx(TransformComponent, { wrapperStyle: {
+    return (_jsx("div", { className: "relative w-full h-full flex-1", ref: containerRef, style: {
+            height: "100vh",
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+            touchAction: "pan-y",
+        }, children: _jsx(TransformWrapper, Object.assign({ ref: transformRef }, props.transformProps, { panning: {
+                disabled: false,
+                velocityDisabled: 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, children: _jsx(TransformComponent, { wrapperStyle: {
                     width: "100%",
                     height: "100%",
-                    overflow: "hidden",
+                    overflow: "visible",
                 }, contentStyle: {
                     width: "100%",
                     height: "100%",
@@ -141,7 +147,7 @@ const LayerView = (props) => {
                         background: backgroundColor,
                         display: "block",
                         pointerEvents: "auto",
-                        touchAction: "none",
+                        touchAction: "pay-y",
                     }, children: _jsx(Layers, { mode: "view", components: [
                             ...extraComponentsEditor,
                             ...renderElements(componentsEditor, mappingKey, colorMatchKey),

package/package.json

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

package/dist/app/layout.jsx

@@ -1,27 +0,0 @@
-import localFont from "next/font/local";
-import "./globals.css";
-import { Layout } from "antd";
-import { StoreProvider } from "../provider/store-provider";
-const geistSans = localFont({
-    src: "./fonts/GeistVF.woff",
-    variable: "--font-geist-sans",
-    weight: "100 900",
-});
-const geistMono = localFont({
-    src: "./fonts/GeistMonoVF.woff",
-    variable: "--font-geist-mono",
-    weight: "100 900",
-});
-export const metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
-};
-export default function RootLayout({ children, }) {
-    return (<html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <StoreProvider>
-          <Layout>{children}</Layout>
-        </StoreProvider>
-      </body>
-    </html>);
-}

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

@@ -1,12 +0,0 @@
-import Board from "../../features/board";
-import SideTool from "../../features/side-tool";
-import ControlPanels from "../../features/panel";
-export default function NewBoard() {
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool />
-        <Board />
-        <ControlPanels />
-      </div>
-    </>);
-}