seat-editor 3.6.6 → 3.6.8

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.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;
 export { LayerView };

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

@@ -2,5 +2,5 @@ import { ModalProps } from "antd";
 declare const ModalPreview: ({ children, modalProps }: {
     children: React.ReactNode;
     modalProps?: ModalProps;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ModalPreview;

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

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

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

@@ -1,8 +1,7 @@
-import React from "react";
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
     viewOnly?: boolean;
 }
-declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;

package/dist/features/board-v3/icons.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 type IconProps = React.HTMLAttributes<SVGElement>;
 export declare const RsvpIcons: Record<string, React.FC<IconProps>>;
-export declare const WarningIcon: () => React.JSX.Element;
+export declare const WarningIcon: () => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,10 +13,10 @@ interface BoardTemplateProps {
         element: React.JSX.Element;
     };
     disabled?: boolean;
-    priviewActive?: {
+    previewActive?: {
         type: ShowTagType;
         label: string;
     }[];
 }
-declare const BoardTemplate: ({ refs, loadingRender, disabled, priviewActive, }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ refs, loadingRender, disabled, previewActive, }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;

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

@@ -19,7 +19,7 @@ import { WarningIcon } from "./icons";
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
-const BoardTemplate = ({ refs, loadingRender, disabled = false, priviewActive = [], }) => {
+const BoardTemplate = ({ refs, loadingRender, disabled = false, previewActive = [], }) => {
     const os = getOS();
     const dispatch = useAppDispatch();
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
@@ -1972,8 +1972,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, priviewActive =
     };
     const { typePreview } = useAppSelector((state) => state.tool);
     const previewTabValue = typePreview === "setting"
-        ? priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((item) => item.type !== "default")
-        : priviewActive;
+        ? previewActive === null || previewActive === void 0 ? void 0 : previewActive.filter((item) => item.type !== "default")
+        : previewActive;
     return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { modalProps: {
                     footer: typePreview === "setting" && isShowTagType !== "default" && (_jsx(_Fragment, { children: _jsxs("div", { className: "flex gap-2 p-[20px]", children: [_jsx("span", { className: "font-bold text-[14px]", children: "Select Font Size:" }), _jsx(Radio.Group, { value: valuesScalingFontSize(), onChange: (e) => {
                                         handleClickButtonFontScaling(e.target.value, isShowTagType);

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

@@ -18,7 +18,7 @@ import { WarningIcon } from "./icons";
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
-const BoardTemplate = ({ refs, loadingRender, disabled = false, priviewActive = [], }) => {
+const BoardTemplate = ({ refs, loadingRender, disabled = false, previewActive = [], }) => {
     const os = getOS();
     const dispatch = useAppDispatch();
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
@@ -1971,8 +1971,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, priviewActive =
     };
     const { typePreview } = useAppSelector((state) => state.tool);
     const previewTabValue = typePreview === "setting"
-        ? priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((item) => item.type !== "default")
-        : priviewActive;
+        ? previewActive === null || previewActive === void 0 ? void 0 : previewActive.filter((item) => item.type !== "default")
+        : previewActive;
     return (<>
       <ModalPreview modalProps={{
             footer: typePreview === "setting" && isShowTagType !== "default" && (<>

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

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

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

@@ -49,10 +49,10 @@ export interface TableEditorProps<TMeta = undefined> {
         key: string;
         value: number;
     };
-    priviewActive: {
+    previewActive: {
         type: ShowTagType;
         label: string;
     }[];
 }
-declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => React.JSX.Element;
+declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.js

@@ -237,6 +237,6 @@ const TableEditor = (props) => {
                         switch: false,
                         drop: false,
                         rightClick: false,
-                    } }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx("div", { className: "absolute top-0 left-0 w-full bg-white py-[20px] z-[51] border-b border-gray-200", children: props.header ? (props.header) : (_jsx("div", { className: "text-xl font-bold h-[38px] leading-[38px] flex ", children: "Logo Navbar" })) }), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized, priviewActive: props === null || props === void 0 ? void 0 : props.priviewActive }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView, priviewActive: props === null || props === void 0 ? void 0 : props.priviewActive }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
+                    } }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx("div", { className: "absolute top-0 left-0 w-full bg-white py-[20px] z-[51] border-b border-gray-200", children: props.header ? (props.header) : (_jsx("div", { className: "text-xl font-bold h-[38px] leading-[38px] flex ", children: "Logo Navbar" })) }), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized, previewActive: props === null || props === void 0 ? void 0 : props.previewActive }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView, previewActive: props === null || props === void 0 ? void 0 : props.previewActive }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
 };
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -249,8 +249,8 @@ const TableEditor = (props) => {
                   Logo Navbar
                 </div>)}
             </div>
-            <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized} priviewActive={props === null || props === void 0 ? void 0 : props.priviewActive}/>
-            <Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} disabled={props === null || props === void 0 ? void 0 : props.disabledView} priviewActive={props === null || props === void 0 ? void 0 : props.priviewActive}/>
+            <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized} previewActive={props === null || props === void 0 ? void 0 : props.previewActive}/>
+            <Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} disabled={props === null || props === void 0 ? void 0 : props.disabledView} previewActive={props === null || props === void 0 ? void 0 : props.previewActive}/>
             <ControlPanels action={props.action} transform={(_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef}/>
           </div>)}
       </div>

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

@@ -9,6 +9,6 @@ interface FormPlaceholderContextType {
     setPlaceholderBulk: (bulk: Record<string, string>) => void;
     resetPlaceholders: () => void;
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;
 export declare const useFormPlaceholder: () => FormPlaceholderContextType;

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

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

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

@@ -1,5 +1,5 @@
 declare const SelectToolForm: ({ action, tranform }: {
     action: any;
     tranform: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/selected-group.d.ts

@@ -1,4 +1,4 @@
 declare const SelectedGroup: ({ action, }: {
     action?: (file: File) => Promise<string>;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SelectedGroup;

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

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

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

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

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

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

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

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

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

@@ -6,5 +6,5 @@ interface UploadToolProps {
     defaultValue?: PropertiesProps;
     transform?: any;
 }
-declare const UploadTool: ({ name, type, action, transform }: UploadToolProps) => import("react").JSX.Element;
+declare const UploadTool: ({ name, type, action, transform }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadTool;

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

@@ -6,5 +6,5 @@ interface UploadToolProps {
     defaultValue?: PropertiesProps;
     transform?: any;
 }
-declare const UploadToolForm: (props: UploadToolProps) => import("react").JSX.Element;
+declare const UploadToolForm: (props: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadToolForm;

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

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

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

@@ -1,13 +1,13 @@
 import { ShowTagType } from "../board-v3/board-slice";
-declare const SideTool: ({ dragOnly, deleteAutorized, priviewActive }: {
+declare const SideTool: ({ dragOnly, deleteAutorized, previewActive }: {
     dragOnly?: boolean;
     deleteAutorized?: {
         component: boolean;
         extraComponent: boolean;
     };
-    priviewActive?: {
+    previewActive?: {
         type: ShowTagType;
         label: string;
     }[];
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SideTool;

package/dist/features/side-tool/index.js

@@ -7,7 +7,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
 import clsx from "clsx";
 import { FontSizeIcon } from "./icons";
-const SideTool = ({ dragOnly, deleteAutorized, priviewActive }) => {
+const SideTool = ({ dragOnly, deleteAutorized, previewActive }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
     const { active, grid, lockBackground } = useAppSelector((state) => state.tool);
@@ -179,7 +179,7 @@ const SideTool = ({ dragOnly, deleteAutorized, priviewActive }) => {
         if (type === "setting") {
             dispatch({
                 type: "board/setTagType",
-                payload: (_b = (_a = priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((f) => f.type !== "default")) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type,
+                payload: (_b = (_a = previewActive === null || previewActive === void 0 ? void 0 : previewActive.filter((f) => f.type !== "default")) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type,
             });
         }
         else {

package/dist/features/side-tool/index.jsx

@@ -6,7 +6,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
 import clsx from "clsx";
 import { FontSizeIcon } from "./icons";
-const SideTool = ({ dragOnly, deleteAutorized, priviewActive }) => {
+const SideTool = ({ dragOnly, deleteAutorized, previewActive }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
     const { active, grid, lockBackground } = useAppSelector((state) => state.tool);
@@ -178,7 +178,7 @@ const SideTool = ({ dragOnly, deleteAutorized, priviewActive }) => {
         if (type === "setting") {
             dispatch({
                 type: "board/setTagType",
-                payload: (_b = (_a = priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((f) => f.type !== "default")) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type,
+                payload: (_b = (_a = previewActive === null || previewActive === void 0 ? void 0 : previewActive.filter((f) => f.type !== "default")) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type,
             });
         }
         else {

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

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

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

@@ -91,5 +91,5 @@ export interface LayerViewProps<TMeta = undefined> {
         rightClick: boolean;
     };
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -95,5 +95,5 @@ export interface LayerViewProps<TMeta = undefined> {
     };
     defaultFontSizeType?: ShowTagType;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -95,5 +95,5 @@ export interface LayerViewProps<TMeta = undefined> {
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode: string;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

package/dist/features/view-only-5/connect-handle.d.ts

@@ -25,6 +25,13 @@ type Props = {
         from: string;
         to: string;
     }[];
+    connecting: {
+        fromId: string;
+        fromPos: {
+            x: number;
+            y: number;
+        };
+    } | null;
 };
 export declare const ConnectHandle: React.FC<Props>;
 export {};

package/dist/features/view-only-5/connect-handle.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// connect-handle.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 // 4 titik per sisi dalam local space
 const getLocalAnchors = (w, h) => {
     const hw = w / 2;
@@ -24,7 +23,7 @@ const nearestAnchor = (lx, ly, anchors) => {
     }
     return best;
 };
-export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges }) => {
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, }) => {
     const hw = width / 2;
     const hh = height / 2;
     const [hovered, setHovered] = useState(false);
@@ -53,15 +52,19 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
         };
     };
+    useEffect(() => {
+        if (!isActiveSelectEdge) {
+            onSelectEdge && onSelectEdge("");
+            onSelectEdge && onSelectNode("");
+        }
+    }, [isActiveSelectEdge]);
     const handlePointerDown = (e) => {
         e.stopPropagation();
         const local = toLocalPos(e);
         const snapped = nearestAnchor(local.x, local.y, anchors);
         const worldPos = toWorld(snapped.x, snapped.y);
-        console.log({ isActiveSelectEdge });
         if (isActiveSelectEdge) {
-            const findEdge = edges.find(e => e.from === nodeId || e.to === nodeId);
-            console.log({ findEdge });
+            const findEdge = edges.find((e) => e.from === nodeId || e.to === nodeId);
             onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
             onSelectNode(nodeId);
             return;
@@ -78,7 +81,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
                     cursor: isConnectEdge ? "crosshair" : "pointer",
                     pointerEvents: isConnectEdge ? "all" : "none",
                 }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onPointerDown: (e) => {
-                    console.log({ isConnectEdge, isSelectNode });
+                    // console.log({ isConnectEdge, isSelectNode });
                     // console.log({ isConnectEdge, isSelectNode })
                     // if (!isConnectEdge ) return;
                     // if (!isSelectNode) return;

package/dist/features/view-only-5/connect-handle.jsx

@@ -1,5 +1,4 @@
-// connect-handle.tsx
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // 4 titik per sisi dalam local space
 const getLocalAnchors = (w, h) => {
     const hw = w / 2;
@@ -23,7 +22,7 @@ const nearestAnchor = (lx, ly, anchors) => {
     }
     return best;
 };
-export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges }) => {
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, }) => {
     const hw = width / 2;
     const hh = height / 2;
     const [hovered, setHovered] = useState(false);
@@ -52,15 +51,19 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
         };
     };
+    useEffect(() => {
+        if (!isActiveSelectEdge) {
+            onSelectEdge && onSelectEdge("");
+            onSelectEdge && onSelectNode("");
+        }
+    }, [isActiveSelectEdge]);
     const handlePointerDown = (e) => {
         e.stopPropagation();
         const local = toLocalPos(e);
         const snapped = nearestAnchor(local.x, local.y, anchors);
         const worldPos = toWorld(snapped.x, snapped.y);
-        console.log({ isActiveSelectEdge });
         if (isActiveSelectEdge) {
-            const findEdge = edges.find(e => e.from === nodeId || e.to === nodeId);
-            console.log({ findEdge });
+            const findEdge = edges.find((e) => e.from === nodeId || e.to === nodeId);
             onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
             onSelectNode(nodeId);
             return;
@@ -82,7 +85,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             cursor: isConnectEdge ? "crosshair" : "pointer",
             pointerEvents: isConnectEdge ? "all" : "none",
         }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onPointerDown={(e) => {
-            console.log({ isConnectEdge, isSelectNode });
+            // console.log({ isConnectEdge, isSelectNode });
             // console.log({ isConnectEdge, isSelectNode })
             // if (!isConnectEdge ) return;
             // if (!isSelectNode) return;
@@ -92,5 +95,6 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
       {/* Anchor dots — muncul saat hover atau active */}
       {((hovered && isConnectEdge) || isActive) &&
             anchors.map((a, i) => (<circle key={i} cx={a.x} cy={a.y} r={3} fill={isActive ? "#a78bfa" : "#38bdf8"} opacity={0.5} style={{ pointerEvents: "none" }}/>))}
+      
     </g>);
 };

package/dist/features/view-only-5/connection-layer.d.ts

@@ -27,7 +27,6 @@ type Props = {
     onRemoveWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
     onStartDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
     isConnectEdge: boolean;
-    isSelectNode: boolean;
     selectedNodeId: string | null;
 };
 export declare const ConnectionLayer: React.FC<Props>;

package/dist/features/view-only-5/connection-layer.js

@@ -52,9 +52,9 @@ const quadraticMidpoint = (from, to) => {
         y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
     };
 };
-export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, isSelectNode, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    console.log({ selectedEdge });
+    // console.log({ selectedEdge})
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -138,12 +138,13 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 const fromLevel = nodeHighlightMap.get(edge.from);
                 const toLevel = nodeHighlightMap.get(edge.to);
                 const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-                console.log({ isInNetwork, fromLevel, toLevel }, selectedEdge, !isSel && !isInNetwork);
                 const networkColor = isInNetwork
                     ? getLevelColor(Math.max(fromLevel, toLevel))
                     : "#38bdf8";
                 const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
                 const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+                // const currentConnection = 
+                const isNotRing1 = connecting && ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to);
                 return (_jsxs("g", { children: [_jsx("path", { d: pathD, stroke: "transparent", strokeWidth: 14, fill: "none", style: { cursor: "pointer" }, onClick: (e) => {
                                 e.stopPropagation();
                                 onSelectEdge(edge.id);
@@ -151,7 +152,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                                 ? "#a78bfa"
                                 : isInNetwork && selectedEdge
                                     ? networkColor
-                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9, strokeLinecap: "round", style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#38bdf8", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
+                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: (selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 0.9, strokeLinecap: "round", style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#38bdf8", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
                                         e.stopPropagation();
                                         onStartDragAnchor(e, edge.id, "from");
                                     } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 6, fill: isDraggingFrom ? "#a78bfa" : "#38bdf8", stroke: "#0f172a", strokeWidth: 1.5, style: { pointerEvents: "none" } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 2.5, fill: "#0f172a", style: { pointerEvents: "none" } })] })), isSel && (_jsxs("g", { children: [isDraggingTo && (_jsx("circle", { cx: toPos.x, cy: toPos.y, r: 12, fill: "#22c55e", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
@@ -175,8 +176,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                             }, style: { cursor: "pointer" }, children: [_jsx("rect", { x: midX - 16, y: midY - 10, width: 32, height: 18, rx: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, opacity: 0.95 }), _jsx("text", { x: midX, y: midY, textAnchor: "middle", dominantBaseline: "middle", fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", fontWeight: 600, children: "DEL" })] }))] }, edge.id));
             }), connecting &&
                 (() => {
+                    var _a, _b;
                     const pts = computePoints(connecting.fromPos, mousePos, []);
                     const pathD = buildPath(pts);
-                    return (_jsxs("g", { children: [_jsx("circle", { cx: connecting.fromPos.x, cy: connecting.fromPos.y, r: 4, fill: "#a78bfa", stroke: "#0f172a", strokeWidth: 0.8, opacity: 0.9, style: { pointerEvents: "none" } }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", strokeLinecap: "round", opacity: 0.8, style: { pointerEvents: "none" } })] }));
+                    return (_jsxs("g", { children: [_jsx("circle", { cx: (_a = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _a === void 0 ? void 0 : _a.x, cy: (_b = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _b === void 0 ? void 0 : _b.y, r: 4, fill: "#a78bfa", stroke: "#0f172a", strokeWidth: 0.8, opacity: 0.9, style: { pointerEvents: "none" } }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", strokeLinecap: "round", opacity: 0.8, style: { pointerEvents: "none" } })] }));
                 })(), draggingAnchor && (_jsx("text", { x: mousePos.x + 14, y: mousePos.y - 8, fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", opacity: 0.8, style: { pointerEvents: "none", userSelect: "none" }, children: "klik node tujuan" }))] }));
 };

package/dist/features/view-only-5/connection-layer.jsx

@@ -51,9 +51,9 @@ const quadraticMidpoint = (from, to) => {
         y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
     };
 };
-export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, isSelectNode, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    console.log({ selectedEdge });
+    // console.log({ selectedEdge})
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -162,12 +162,13 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const fromLevel = nodeHighlightMap.get(edge.from);
             const toLevel = nodeHighlightMap.get(edge.to);
             const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-            console.log({ isInNetwork, fromLevel, toLevel }, selectedEdge, !isSel && !isInNetwork);
             const networkColor = isInNetwork
                 ? getLevelColor(Math.max(fromLevel, toLevel))
                 : "#38bdf8";
             const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
             const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+            // const currentConnection = 
+            const isNotRing1 = connecting && ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to);
             return (<g key={edge.id}>
             {/* Hit area */}
             <path d={pathD} stroke="transparent" strokeWidth={14} fill="none" style={{ cursor: "pointer" }} onClick={(e) => {
@@ -183,7 +184,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                     ? "#a78bfa"
                     : isInNetwork && selectedEdge
                         ? networkColor
-                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
+                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={(selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
 
             {/* FROM dot */}
             {isSel && (<g>
@@ -249,10 +250,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
       {/* Preview saat connecting */}
       {connecting &&
             (() => {
+                var _a, _b;
                 const pts = computePoints(connecting.fromPos, mousePos, []);
                 const pathD = buildPath(pts);
                 return (<g>
-              <circle cx={connecting.fromPos.x} cy={connecting.fromPos.y} r={4} fill="#a78bfa" stroke="#0f172a" strokeWidth={0.8} opacity={0.9} style={{ pointerEvents: "none" }}/>
+              <circle cx={(_a = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _a === void 0 ? void 0 : _a.x} cy={(_b = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _b === void 0 ? void 0 : _b.y} r={4} fill="#a78bfa" stroke="#0f172a" strokeWidth={0.8} opacity={0.9} style={{ pointerEvents: "none" }}/>
               <path d={pathD} stroke="#a78bfa" strokeWidth={1.5} fill="none" strokeDasharray="6 3" strokeLinecap="round" opacity={0.8} style={{ pointerEvents: "none" }}/>
             </g>);
             })()}

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

@@ -8,9 +8,14 @@ export type TableGhost = {
     event: EventHandleType;
 };
 export type TableMatchKey = {
-    key: string | number;
+    value: string | number;
+    key: string;
     properties?: PropertiesProps;
     className?: string;
+    element?: {
+        icon: React.JSX.Element;
+        props: SVGAttributes<SVGElement>;
+    };
 };
 export type TableMatchEvent = {
     event: EventHandleType;
@@ -86,17 +91,21 @@ export interface LayerViewProps<TMeta = undefined> {
     viewOnly?: boolean;
     actionPrivileged?: {
         select?: boolean;
-        move?: boolean;
-        switch?: boolean;
-        drop?: boolean;
         rightClick?: boolean;
         double?: boolean;
+        selection?: boolean;
+        grapConnection?: boolean;
+        viewGraph?: boolean;
+        dragTable?: boolean;
+        selectNode?: boolean;
+        connectingNode?: boolean;
     };
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode?: string;
     isConnectEdge?: boolean;
     isSelectNode?: boolean;
     onMakeSelection?: (component: ComponentProps<TMeta>[]) => void;
+    onDragTable?: (e: React.PointerEvent<SVGSVGElement>, component: ComponentProps<TMeta>) => void;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;