seat-editor 3.3.37 → 3.3.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/layout.d.ts +1 -1
- package/dist/app/new-board/page.d.ts +1 -1
- package/dist/app/old-board/page.d.ts +2 -1
- package/dist/app/only-view/chair.d.ts +1 -1
- package/dist/app/only-view/chair.js +10 -2
- package/dist/app/only-view/page.d.ts +1 -1
- package/dist/app/only-view/page.jsx +2 -4
- package/dist/app/only-view/user.d.ts +1 -1
- package/dist/app/only-view/user.js +10 -2
- package/dist/app/page.d.ts +1 -1
- package/dist/app/test/page.d.ts +2 -1
- package/dist/app/v2/page.d.ts +1 -1
- package/dist/components/button-tools/index.d.ts +1 -1
- package/dist/components/form-tools/label.d.ts +1 -1
- package/dist/components/form-tools/shape.d.ts +1 -1
- package/dist/components/input/number-indicator.d.ts +1 -1
- package/dist/components/joystick/index.d.ts +2 -1
- package/dist/components/layer/index.d.ts +1 -1
- package/dist/components/layer-v2/index.d.ts +1 -1
- package/dist/components/layer-v3/index.d.ts +1 -1
- package/dist/components/layer-v4/index.d.ts +1 -1
- package/dist/components/lib/index.d.ts +1 -1
- package/dist/components/modal-preview/index.d.ts +1 -1
- package/dist/features/board/index.d.ts +1 -1
- package/dist/features/board-v2/index.d.ts +2 -1
- package/dist/features/board-v3/index.d.ts +1 -1
- package/dist/features/navbar/index.d.ts +1 -1
- package/dist/features/package/index.d.ts +1 -1
- package/dist/features/panel/index.d.ts +1 -1
- package/dist/features/panel/select-tool.d.ts +1 -1
- package/dist/features/panel/selected-group.d.ts +1 -1
- package/dist/features/panel/square-circle-tool.d.ts +1 -1
- package/dist/features/panel/table-seat-circle.d.ts +1 -1
- package/dist/features/panel/table-seat-square.d.ts +1 -1
- package/dist/features/panel/text-tool.d.ts +1 -1
- package/dist/features/panel/upload-tool.d.ts +1 -1
- package/dist/features/side-tool/index.d.ts +1 -1
- package/dist/features/view-only/index.d.ts +1 -1
- package/dist/features/view-only-2/index.d.ts +1 -1
- package/dist/features/view-only-2/index.js +29 -29
- package/dist/features/view-only-2/index.jsx +463 -77
- package/dist/features/view-only-3/index.d.ts +1 -1
- package/dist/features/view-only-3/index.jsx +32 -32
- package/dist/provider/redux-provider.d.ts +1 -1
- package/dist/provider/store-provider.d.ts +1 -1
- package/package.json +1 -1
package/dist/app/layout.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function NewBoard(): import("react
|
|
1
|
+
export default function NewBoard(): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export function ChairIcon(): import("react
|
|
1
|
+
export function ChairIcon(): import("react").JSX.Element;
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
export const ChairIcon = () => {
|
|
3
|
-
return (
|
|
2
|
+
return (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<g clip-path="url(#clip0_3019_14165)">
|
|
4
|
+
<path d="M15.9717 7.5339V4.70339C15.9717 3.07627 14.7076 2.5 13.5189 2.5H6.46226C5.27359 2.5 4.00943 3.07627 4.00943 4.70339V7.5339C3.14151 7.73729 2.5 8.4322 2.5 9.27966V13.822C2.5 15.161 3.5 15.6864 4.48113 15.7373V16.8898C4.48113 17.2288 4.78302 17.5 5.16038 17.5H5.85849C6.23585 17.5 6.53774 17.2288 6.53774 16.8898V15.7373H13.4623V16.8898C13.4623 17.2288 13.7642 17.5 14.1415 17.5H14.8396C15.217 17.5 15.5189 17.2288 15.5189 16.8898V15.7373C16.9717 15.6695 17.5 14.7203 17.5 13.822V9.26271C17.4623 8.4322 16.8208 7.72034 15.9717 7.5339ZM4.68868 4.70339C4.68868 3.31356 5.80189 3.09322 6.46226 3.09322H13.5189C14.1792 3.09322 15.2925 3.29661 15.2925 4.68644V7.4661C14.2736 7.55085 13.4623 8.31356 13.4623 9.26271V9.68644H6.51887V9.26271C6.51887 8.31356 5.70755 7.55085 4.68868 7.4661V4.70339ZM13.4434 10.2966V12.3983H6.51887V10.2966H13.4434ZM5.85849 16.8898H5.16038V15.7373H5.85849V16.8898ZM14.8208 16.8898H14.1226V15.7373H14.8208V16.8898ZM16.8208 13.822H16.8019C16.8019 14.4153 16.5566 15.1441 15.3302 15.1441H14.8208H14.1226H5.85849H5.16038H4.65094C3.99057 15.1441 3.17925 14.9237 3.17925 13.822V9.26271C3.17925 8.6017 3.78302 8.05932 4.51887 8.05932C5.25472 8.05932 5.85849 8.6017 5.85849 9.26271V12.7034C5.85849 12.8729 6.00943 13.0085 6.19811 13.0085H13.8019C13.9906 13.0085 14.1415 12.8729 14.1415 12.7034V9.26271C14.1415 8.6017 14.7453 8.05932 15.4811 8.05932C16.217 8.05932 16.8208 8.6017 16.8208 9.26271V13.822Z" fill="#347ADB" stroke="#347ADB" stroke-width="0.8"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<clipPath id="clip0_3019_14165">
|
|
8
|
+
<rect width="16.6667" height="16.6667" fill="white" transform="translate(1.66675 1.6665)"/>
|
|
9
|
+
</clipPath>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>);
|
|
4
12
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import LayerView from "../../features/view-only-3";
|
|
3
3
|
import { useState, useRef } from "react";
|
|
4
|
-
|
|
4
|
+
import { data4 } from "../constant";
|
|
5
5
|
import { ChairIcon } from "./chair";
|
|
6
6
|
import { UserIcon } from "./user";
|
|
7
7
|
import { Modal } from "antd";
|
|
@@ -177,9 +177,7 @@ const TouchScrollDetect = () => {
|
|
|
177
177
|
<div className="flex">
|
|
178
178
|
<div className="h-screen bg-gray-500 w-1/3">
|
|
179
179
|
<div className="p-4">
|
|
180
|
-
{
|
|
181
|
-
<Card key={index} {...item} />
|
|
182
|
-
))} */}
|
|
180
|
+
{data4.map((item, index) => (<Card key={index} {...item}/>))}
|
|
183
181
|
</div>
|
|
184
182
|
</div>
|
|
185
183
|
<div className="h-screen w-2/3 relative">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export function UserIcon(): import("react
|
|
1
|
+
export function UserIcon(): import("react").JSX.Element;
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
export const UserIcon = () => {
|
|
3
|
-
return (
|
|
2
|
+
return (<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path d="M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z" fill="#5E6278"/>
|
|
4
|
+
<path d="M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z" fill="#5E6278"/>
|
|
5
|
+
<path opacity="0.3" d="M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z" fill="#5E6278"/>
|
|
6
|
+
<path opacity="0.3" d="M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z" fill="#5E6278"/>
|
|
7
|
+
<g opacity="0.3">
|
|
8
|
+
<path d="M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z" fill="#5E6278"/>
|
|
9
|
+
<path d="M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z" fill="#5E6278"/>
|
|
10
|
+
</g>
|
|
11
|
+
</svg>);
|
|
4
12
|
};
|
package/dist/app/page.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TableEditor: () => import("react
|
|
1
|
+
declare const TableEditor: () => import("react").JSX.Element;
|
|
2
2
|
export default TableEditor;
|
package/dist/app/test/page.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
export default function DraggableRect(): React.JSX.Element;
|
package/dist/app/v2/page.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TableEditor: () => import("react
|
|
1
|
+
declare const TableEditor: () => import("react").JSX.Element;
|
|
2
2
|
export default TableEditor;
|
|
@@ -7,5 +7,5 @@ interface ButtonToolsProps {
|
|
|
7
7
|
}>;
|
|
8
8
|
popoverProps?: PopoverProps;
|
|
9
9
|
}
|
|
10
|
-
declare const ButtonTools: (props: ButtonToolsProps) => import("react
|
|
10
|
+
declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
|
|
11
11
|
export default ButtonTools;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SectionLabel: () => import("react
|
|
1
|
+
declare const SectionLabel: () => import("react").JSX.Element;
|
|
2
2
|
export default SectionLabel;
|
|
@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
|
|
|
3
3
|
defaultValue?: number;
|
|
4
4
|
onChange: (value: number) => void;
|
|
5
5
|
}
|
|
6
|
-
declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react
|
|
6
|
+
declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
|
|
7
7
|
export default NumberIndicator;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
type JoystickPosition = {
|
|
2
3
|
x: number;
|
|
3
4
|
y: number;
|
|
@@ -7,5 +8,5 @@ type JoystickProps = {
|
|
|
7
8
|
onMove?: (pos: JoystickPosition) => void;
|
|
8
9
|
onEnd?: () => void;
|
|
9
10
|
};
|
|
10
|
-
export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) =>
|
|
11
|
+
export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -15,5 +15,5 @@ interface LayersProps {
|
|
|
15
15
|
onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
|
|
16
16
|
onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
|
|
17
17
|
}
|
|
18
|
-
declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react
|
|
18
|
+
declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").JSX.Element;
|
|
19
19
|
export default Layers;
|
|
@@ -15,5 +15,5 @@ interface LayersProps {
|
|
|
15
15
|
onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
|
|
16
16
|
onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
|
|
17
17
|
}
|
|
18
|
-
declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react
|
|
18
|
+
declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react").JSX.Element;
|
|
19
19
|
export default Layers;
|
|
@@ -9,5 +9,5 @@ interface LayersProps {
|
|
|
9
9
|
activeTool?: string;
|
|
10
10
|
selectionLines?: SelectionLines;
|
|
11
11
|
}
|
|
12
|
-
declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react
|
|
12
|
+
declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react").JSX.Element;
|
|
13
13
|
export default Layers;
|
|
@@ -20,5 +20,5 @@ interface LayersProps {
|
|
|
20
20
|
items: string[];
|
|
21
21
|
}[];
|
|
22
22
|
}
|
|
23
|
-
declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react
|
|
23
|
+
declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
|
|
24
24
|
export default Layers;
|
|
@@ -3,6 +3,6 @@ export interface LayerViewProps {
|
|
|
3
3
|
componentProps: any[];
|
|
4
4
|
extraComponentProps: any[];
|
|
5
5
|
}
|
|
6
|
-
declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react
|
|
6
|
+
declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
|
|
7
7
|
export default TableEditor;
|
|
8
8
|
export { LayerView };
|
|
@@ -2,5 +2,5 @@ interface BoardTemplateProps {
|
|
|
2
2
|
onSelectComponent?: (items: any) => void;
|
|
3
3
|
mappingKey?: string;
|
|
4
4
|
}
|
|
5
|
-
declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react
|
|
5
|
+
declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react").JSX.Element;
|
|
6
6
|
export default BoardTemplate;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
interface BoardTemplateProps {
|
|
2
3
|
onSelectComponent?: (items: any) => void;
|
|
3
4
|
mappingKey?: string;
|
|
4
5
|
viewOnly?: boolean;
|
|
5
6
|
}
|
|
6
|
-
declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) =>
|
|
7
|
+
declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => React.JSX.Element;
|
|
7
8
|
export default BoardTemplate;
|
|
@@ -12,5 +12,5 @@ interface BoardTemplateProps {
|
|
|
12
12
|
element: React.JSX.Element;
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
-
declare const BoardTemplate: ({ refs, loadingRender }: BoardTemplateProps) =>
|
|
15
|
+
declare const BoardTemplate: ({ refs, loadingRender }: BoardTemplateProps) => React.JSX.Element;
|
|
16
16
|
export default BoardTemplate;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const Navbar: () => import("react
|
|
1
|
+
declare const Navbar: () => import("react").JSX.Element;
|
|
2
2
|
export default Navbar;
|
|
@@ -43,5 +43,5 @@ export interface TableEditorProps<TMeta = undefined> {
|
|
|
43
43
|
element: React.JSX.Element;
|
|
44
44
|
};
|
|
45
45
|
}
|
|
46
|
-
declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react
|
|
46
|
+
declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react").JSX.Element;
|
|
47
47
|
export default TableEditor;
|
|
@@ -2,5 +2,5 @@ interface ControlPanelsProps {
|
|
|
2
2
|
action?: (file: File) => Promise<string>;
|
|
3
3
|
transform?: any;
|
|
4
4
|
}
|
|
5
|
-
declare const ControlPanels: (props: ControlPanelsProps) => import("react
|
|
5
|
+
declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
|
|
6
6
|
export default ControlPanels;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SelectedGroup: () => import("react
|
|
1
|
+
declare const SelectedGroup: () => import("react").JSX.Element;
|
|
2
2
|
export default SelectedGroup;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SquareToolForm: () => import("react
|
|
1
|
+
declare const SquareToolForm: () => import("react").JSX.Element;
|
|
2
2
|
export default SquareToolForm;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SeatCircle: () => import("react
|
|
1
|
+
declare const SeatCircle: () => import("react").JSX.Element;
|
|
2
2
|
export default SeatCircle;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SeatSquare: () => import("react
|
|
1
|
+
declare const SeatSquare: () => import("react").JSX.Element;
|
|
2
2
|
export default SeatSquare;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TextTool: () => import("react
|
|
1
|
+
declare const TextTool: () => import("react").JSX.Element;
|
|
2
2
|
export default TextTool;
|
|
@@ -6,5 +6,5 @@ interface UploadToolProps {
|
|
|
6
6
|
defaultValue?: PropertiesProps;
|
|
7
7
|
transform?: any;
|
|
8
8
|
}
|
|
9
|
-
declare const UploadTool: ({ name, type, action, defaultValue, transform }: UploadToolProps) => import("react
|
|
9
|
+
declare const UploadTool: ({ name, type, action, defaultValue, transform }: UploadToolProps) => import("react").JSX.Element;
|
|
10
10
|
export default UploadTool;
|
|
@@ -15,5 +15,5 @@ export interface LayerViewProps {
|
|
|
15
15
|
containerProps?: any;
|
|
16
16
|
svgProps?: any;
|
|
17
17
|
}
|
|
18
|
-
declare const LayerView: (props: LayerViewProps) => import("react
|
|
18
|
+
declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
|
|
19
19
|
export default LayerView;
|
|
@@ -85,5 +85,5 @@ export interface LayerViewProps<TMeta = undefined> {
|
|
|
85
85
|
defaultBoundingBox?: PropertiesProps;
|
|
86
86
|
viewOnly?: boolean;
|
|
87
87
|
}
|
|
88
|
-
declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) =>
|
|
88
|
+
declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
|
|
89
89
|
export default LayerView;
|
|
@@ -319,7 +319,7 @@ const LayerView = (props) => {
|
|
|
319
319
|
: (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
|
|
320
320
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
321
321
|
return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
|
|
322
|
-
})) &&
|
|
322
|
+
})) && !disabled;
|
|
323
323
|
if (ghostAttributes) {
|
|
324
324
|
Object.keys(ghostAttributes).forEach((key) => {
|
|
325
325
|
ghost.setAttribute(key, ghostAttributes[key]);
|
|
@@ -345,35 +345,35 @@ const LayerView = (props) => {
|
|
|
345
345
|
};
|
|
346
346
|
const pointerMoveGhost = (ev) => {
|
|
347
347
|
var _a;
|
|
348
|
-
isDragging.current = true;
|
|
349
|
-
const p = svg.createSVGPoint();
|
|
350
|
-
p.x = ev.clientX;
|
|
351
|
-
p.y = ev.clientY;
|
|
352
|
-
const dx = ev.clientX - startX;
|
|
353
|
-
const dy = ev.clientY - startY;
|
|
354
|
-
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
355
|
-
onPanning(ev);
|
|
356
|
-
if (!hasMoved && distance > 0) {
|
|
357
|
-
// transformRef?.current?.instance
|
|
358
|
-
// only move ghost if the mouse has moved more than 5 pixels
|
|
359
|
-
hasMoved = true;
|
|
360
|
-
isDragging.current = true;
|
|
361
|
-
}
|
|
362
|
-
// ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
|
|
363
|
-
ghost.style.display = "none";
|
|
364
|
-
const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
|
|
365
|
-
ghost.style.display = "";
|
|
366
|
-
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
367
|
-
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
368
|
-
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
369
|
-
if (dataHoveredGhostId !== dataGhostId) {
|
|
370
|
-
hoverUnderghostId.current = dataHoveredGhostId;
|
|
371
|
-
}
|
|
372
|
-
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
373
|
-
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
374
|
-
const newX = posSVG.x - offset.x;
|
|
375
|
-
const newY = posSVG.y - offset.y;
|
|
376
348
|
if (allowedDrag) {
|
|
349
|
+
isDragging.current = true;
|
|
350
|
+
const p = svg.createSVGPoint();
|
|
351
|
+
p.x = ev.clientX;
|
|
352
|
+
p.y = ev.clientY;
|
|
353
|
+
const dx = ev.clientX - startX;
|
|
354
|
+
const dy = ev.clientY - startY;
|
|
355
|
+
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
356
|
+
onPanning(ev);
|
|
357
|
+
if (!hasMoved && distance > 0) {
|
|
358
|
+
// transformRef?.current?.instance
|
|
359
|
+
// only move ghost if the mouse has moved more than 5 pixels
|
|
360
|
+
hasMoved = true;
|
|
361
|
+
isDragging.current = true;
|
|
362
|
+
}
|
|
363
|
+
// ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
|
|
364
|
+
ghost.style.display = "none";
|
|
365
|
+
const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
|
|
366
|
+
ghost.style.display = "";
|
|
367
|
+
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
368
|
+
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
369
|
+
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
370
|
+
if (dataHoveredGhostId !== dataGhostId) {
|
|
371
|
+
hoverUnderghostId.current = dataHoveredGhostId;
|
|
372
|
+
}
|
|
373
|
+
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
374
|
+
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
375
|
+
const newX = posSVG.x - offset.x;
|
|
376
|
+
const newY = posSVG.y - offset.y;
|
|
377
377
|
ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
|
|
378
378
|
}
|
|
379
379
|
};
|
|
@@ -1,23 +1,68 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import React, { useEffect, useMemo, useRef, useState, useImperativeHandle, } from "react";
|
|
3
3
|
import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
|
|
4
|
-
import Layers from "../../components/layer";
|
|
4
|
+
import Layers from "../../components/layer-v4";
|
|
5
|
+
import { getTranslate } from "../board-v3/utils";
|
|
6
|
+
import { Spin } from "antd";
|
|
5
7
|
const LayerView = (props) => {
|
|
6
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey,
|
|
8
|
+
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled, loadingRender, } = props;
|
|
9
|
+
const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
|
|
10
|
+
const tableGhost = useRef(null);
|
|
11
|
+
const hoverUnderghostId = useRef(null);
|
|
7
12
|
const transformRef = useRef(null);
|
|
8
13
|
const containerRef = useRef(null);
|
|
9
14
|
const svgRef = useRef(null);
|
|
15
|
+
const hasBoundingBoxRef = useRef(false);
|
|
16
|
+
const [tooltip, setTooltip] = useState({
|
|
17
|
+
x: 0,
|
|
18
|
+
y: 0,
|
|
19
|
+
visible: false,
|
|
20
|
+
});
|
|
21
|
+
const isDragging = useRef(false);
|
|
22
|
+
const [panningGroup, setPanningGroup] = useState(false);
|
|
10
23
|
const [scale, setScale] = useState(1);
|
|
11
24
|
const [selectedTable, setSelectedTable] = useState(null);
|
|
12
|
-
const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
|
|
25
|
+
const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps, } = useAppSelector((state) => state.board);
|
|
13
26
|
const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
|
|
27
|
+
const { loading } = useAppSelector((state) => state.panel);
|
|
28
|
+
useImperativeHandle(refs, () => ({
|
|
29
|
+
svgRef: svgRef === null || svgRef === void 0 ? void 0 : svgRef.current,
|
|
30
|
+
transformRef: transformRef === null || transformRef === void 0 ? void 0 : transformRef.current,
|
|
31
|
+
containerRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current,
|
|
32
|
+
tableGhost: tableGhost === null || tableGhost === void 0 ? void 0 : tableGhost.current,
|
|
33
|
+
hoverUnderghost: originalData({
|
|
34
|
+
id: hoverUnderghostId === null || hoverUnderghostId === void 0 ? void 0 : hoverUnderghostId.current,
|
|
35
|
+
type: "find",
|
|
36
|
+
}),
|
|
37
|
+
}));
|
|
14
38
|
const dispatch = useAppDispatch();
|
|
15
39
|
useEffect(() => {
|
|
40
|
+
if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
|
|
41
|
+
dispatch({ type: "panel/setLoading", payload: true });
|
|
42
|
+
}
|
|
43
|
+
// check in null
|
|
44
|
+
const isEmptyComponents = (componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) === 0;
|
|
45
|
+
const isEmptyExtraComponents = (extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) === 0;
|
|
46
|
+
// const isEmptyBoundingBox = boundingBox === null;
|
|
47
|
+
if (isEmptyComponents) {
|
|
48
|
+
dispatch({
|
|
49
|
+
type: "board/setNewComponents",
|
|
50
|
+
payload: [],
|
|
51
|
+
});
|
|
52
|
+
setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
|
|
53
|
+
}
|
|
54
|
+
if (isEmptyExtraComponents) {
|
|
55
|
+
dispatch({
|
|
56
|
+
type: "board/setNewExtraComponents",
|
|
57
|
+
payload: [],
|
|
58
|
+
});
|
|
59
|
+
}
|
|
16
60
|
if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
|
|
17
61
|
dispatch({
|
|
18
62
|
type: "board/setNewComponents",
|
|
19
63
|
payload: componentProps,
|
|
20
64
|
});
|
|
65
|
+
setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
|
|
21
66
|
}
|
|
22
67
|
if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
|
|
23
68
|
dispatch({
|
|
@@ -31,120 +76,154 @@ const LayerView = (props) => {
|
|
|
31
76
|
payload: defaultBackground,
|
|
32
77
|
});
|
|
33
78
|
}
|
|
34
|
-
|
|
79
|
+
// if(boundingBoxProps) {
|
|
80
|
+
dispatch({
|
|
81
|
+
type: "board/setBoundingBox",
|
|
82
|
+
payload: defaultBoundingBox,
|
|
83
|
+
});
|
|
84
|
+
// }
|
|
85
|
+
setTimeout(() => {
|
|
86
|
+
dispatch({ type: "panel/setLoading", payload: false });
|
|
87
|
+
}, 1000);
|
|
88
|
+
}, [
|
|
89
|
+
componentProps,
|
|
90
|
+
extraComponentProps,
|
|
91
|
+
defaultBackground,
|
|
92
|
+
loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
|
|
93
|
+
props === null || props === void 0 ? void 0 : props.viewOnly,
|
|
94
|
+
defaultBoundingBox,
|
|
95
|
+
]);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
|
|
98
|
+
}, [privilegedTags]);
|
|
35
99
|
useEffect(() => {
|
|
36
100
|
onCurrentStateChange &&
|
|
37
101
|
onCurrentStateChange({
|
|
38
102
|
components: componentsEditor,
|
|
39
103
|
extraComponents: extraComponentsEditor,
|
|
104
|
+
background: backgroundColor,
|
|
105
|
+
boundingBox: boundingBoxProps,
|
|
106
|
+
});
|
|
107
|
+
}, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
|
|
108
|
+
const originalData = ({ id, type, dataParams, }) => {
|
|
109
|
+
let data;
|
|
110
|
+
if (type === "find") {
|
|
111
|
+
data = componentsEditor.find((item) => {
|
|
112
|
+
if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
|
|
113
|
+
return item[mappingKey].id == id;
|
|
114
|
+
}
|
|
115
|
+
return (item === null || item === void 0 ? void 0 : item.id) == id;
|
|
40
116
|
});
|
|
41
|
-
|
|
42
|
-
|
|
117
|
+
}
|
|
118
|
+
if (type === "get" && dataParams) {
|
|
119
|
+
const mapped = mappingKey ? dataParams[mappingKey] : undefined;
|
|
120
|
+
data = mapped !== undefined ? mapped : dataParams;
|
|
121
|
+
}
|
|
122
|
+
return data;
|
|
123
|
+
};
|
|
124
|
+
const handleSelectComponent = (items, e) => {
|
|
43
125
|
const find = componentsEditor.find((item) => {
|
|
126
|
+
var _a;
|
|
44
127
|
if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
|
|
45
|
-
return item[mappingKey].id
|
|
128
|
+
return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
|
|
46
129
|
}
|
|
47
|
-
return (item === null || item === void 0 ? void 0 : item.id)
|
|
130
|
+
return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
|
|
48
131
|
});
|
|
49
|
-
|
|
50
|
-
|
|
132
|
+
const rightClick = e.button === 2;
|
|
133
|
+
const click = e.button === 0;
|
|
134
|
+
onRightClick && rightClick && onRightClick(e, find);
|
|
135
|
+
onSelectComponent && !rightClick && onSelectComponent(find);
|
|
136
|
+
const seletedTable = mappingKey ? find[mappingKey] : find;
|
|
137
|
+
setSelectedTable(seletedTable);
|
|
51
138
|
};
|
|
52
139
|
const boundingBox = useMemo(() => {
|
|
53
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
140
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
54
141
|
if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
|
|
55
142
|
return { minX: 0, minY: 0, width: 500, height: 500 };
|
|
56
143
|
}
|
|
57
144
|
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
58
|
-
componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
|
|
59
|
-
var _a, _b, _c, _d;
|
|
145
|
+
componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_, i) => {
|
|
60
146
|
let values = mappingKey ? _[mappingKey] : _;
|
|
61
147
|
if (!values)
|
|
62
148
|
return;
|
|
63
|
-
if (
|
|
64
|
-
minX = Math.min(minX, values.x);
|
|
65
|
-
minY = Math.min(minY, values.y);
|
|
66
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
67
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
68
|
-
}
|
|
69
|
-
if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
|
|
149
|
+
if (values === null || values === void 0 ? void 0 : values.shape) {
|
|
70
150
|
minX = Math.min(minX, values.x);
|
|
71
151
|
minY = Math.min(minY, values.y);
|
|
72
152
|
maxX = Math.max(maxX, values.x + values.width);
|
|
73
153
|
maxY = Math.max(maxY, values.y + values.height);
|
|
74
154
|
}
|
|
75
|
-
if (
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
|
|
82
|
-
minX = Math.min(minX, values.x);
|
|
83
|
-
minY = Math.min(minY, values.y);
|
|
84
|
-
maxX = Math.max(maxX, values.x + values.width);
|
|
85
|
-
maxY = Math.max(maxY, values.y + values.height);
|
|
155
|
+
if (i === componentsEditor.length - 1 &&
|
|
156
|
+
(extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
|
|
157
|
+
minX = minX > 10 ? minX - 10 : minX;
|
|
158
|
+
minY = minY > 10 ? minY - 10 : minY;
|
|
159
|
+
maxX = maxX + 10;
|
|
160
|
+
maxY = maxY + 10;
|
|
86
161
|
}
|
|
87
162
|
});
|
|
88
163
|
extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
|
|
89
|
-
var _a, _b;
|
|
90
|
-
if (
|
|
164
|
+
var _a, _b, _c, _d, _e;
|
|
165
|
+
if (values === null || values === void 0 ? void 0 : values.shape) {
|
|
91
166
|
minX = Math.min(minX, values.x);
|
|
92
167
|
minY = Math.min(minY, values.y);
|
|
93
168
|
maxX = Math.max(maxX, values.x + values.width);
|
|
94
169
|
maxY = Math.max(maxY, values.y + values.height);
|
|
95
170
|
}
|
|
96
|
-
if ((
|
|
97
|
-
minX = Math.min(minX, values.x);
|
|
98
|
-
minY = Math.min(minY, values.y);
|
|
99
|
-
maxX = Math.max(maxX, values
|
|
100
|
-
maxY = Math.max(maxY, values
|
|
171
|
+
if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("polygon")) {
|
|
172
|
+
minX = Math.min(minX, (_b = values === null || values === void 0 ? void 0 : values.points) === null || _b === void 0 ? void 0 : _b.reduce((min, point) => Math.min(min, point.x), Infinity));
|
|
173
|
+
minY = Math.min(minY, (_c = values === null || values === void 0 ? void 0 : values.points) === null || _c === void 0 ? void 0 : _c.reduce((min, point) => Math.min(min, point.y), Infinity));
|
|
174
|
+
maxX = Math.max(maxX, (_d = values === null || values === void 0 ? void 0 : values.points) === null || _d === void 0 ? void 0 : _d.reduce((max, point) => Math.max(max, point.x), -Infinity));
|
|
175
|
+
maxY = Math.max(maxY, (_e = values === null || values === void 0 ? void 0 : values.points) === null || _e === void 0 ? void 0 : _e.reduce((max, point) => Math.max(max, point.y), -Infinity));
|
|
101
176
|
}
|
|
102
177
|
});
|
|
103
178
|
let backgroundHasOne = false;
|
|
104
179
|
if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 &&
|
|
105
180
|
((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
|
|
106
181
|
backgroundHasOne = true;
|
|
182
|
+
// console.log({ backgroundHasOne },"shini")
|
|
107
183
|
minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
|
|
108
184
|
minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
|
|
109
185
|
maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
|
|
110
186
|
maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
|
|
111
187
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
188
|
+
const hasBoundingBox = boundingBoxProps;
|
|
189
|
+
// const paddingY =
|
|
190
|
+
// maxY * (props?.viewStyles?.paddingY || 0) +
|
|
191
|
+
// minY * (props?.viewStyles?.paddingY || 0);
|
|
192
|
+
// const paddingX =
|
|
193
|
+
// maxX * (props?.viewStyles?.paddingX || 0) +
|
|
194
|
+
// minX * (props?.viewStyles?.paddingX || 0);
|
|
118
195
|
if (hasBoundingBox) {
|
|
119
|
-
|
|
196
|
+
hasBoundingBoxRef.current = true;
|
|
120
197
|
return {
|
|
121
|
-
minX:
|
|
122
|
-
minY:
|
|
123
|
-
width:
|
|
124
|
-
height:
|
|
198
|
+
minX: boundingBoxProps.x,
|
|
199
|
+
minY: boundingBoxProps.y,
|
|
200
|
+
width: boundingBoxProps.width,
|
|
201
|
+
height: boundingBoxProps.height,
|
|
125
202
|
};
|
|
126
203
|
}
|
|
204
|
+
// return {
|
|
205
|
+
// minX: minX - paddingX - (minX - paddingX) * 0.5,
|
|
206
|
+
// minY: minY - paddingY * 2,
|
|
207
|
+
// width: maxX + paddingX * 2,
|
|
208
|
+
// height: maxY + paddingY + (maxY + paddingY) * 0.5,
|
|
209
|
+
// };
|
|
210
|
+
// console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
|
|
127
211
|
return {
|
|
128
|
-
minX:
|
|
129
|
-
minY:
|
|
130
|
-
width: maxX,
|
|
131
|
-
height: maxY,
|
|
212
|
+
minX: minX - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
|
|
213
|
+
minY: minY - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
|
|
214
|
+
width: maxX + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
|
|
215
|
+
height: maxY + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
|
|
132
216
|
};
|
|
133
|
-
}, [componentsEditor, extraComponentsEditor]);
|
|
134
|
-
const renderElements = (elementEditor, mappingKey,
|
|
135
|
-
return elementEditor.map((editorItem
|
|
136
|
-
var _a, _b, _c, _d;
|
|
217
|
+
}, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
|
|
218
|
+
const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
|
|
219
|
+
return elementEditor.map((editorItem) => {
|
|
137
220
|
const isUsingMapping = mappingKey &&
|
|
138
221
|
typeof editorItem[mappingKey] === "object" &&
|
|
139
222
|
editorItem[mappingKey] !== null;
|
|
140
|
-
|
|
141
|
-
if (
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
else {
|
|
146
|
-
return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
|
|
147
|
-
}
|
|
223
|
+
let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
|
|
224
|
+
if (tableMatchKey) {
|
|
225
|
+
const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
|
|
226
|
+
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 });
|
|
148
227
|
}
|
|
149
228
|
return finalProps;
|
|
150
229
|
});
|
|
@@ -170,21 +249,328 @@ const LayerView = (props) => {
|
|
|
170
249
|
}
|
|
171
250
|
};
|
|
172
251
|
}, []);
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
252
|
+
const handleTableEvent = (event, type) => {
|
|
253
|
+
var _a;
|
|
254
|
+
event.preventDefault();
|
|
255
|
+
// cari elemen yg diklik
|
|
256
|
+
const elementTarget = event.target;
|
|
257
|
+
if (!elementTarget)
|
|
258
|
+
return;
|
|
259
|
+
// cari group data-id terdekat
|
|
260
|
+
const group = elementTarget.closest("g[data-id]");
|
|
261
|
+
if (!group)
|
|
262
|
+
return;
|
|
263
|
+
try {
|
|
264
|
+
const tableId = JSON.parse(group.getAttribute("data-id") || "{}");
|
|
265
|
+
const dragEvent = event;
|
|
266
|
+
const dataTransfer = JSON.parse(((_a = dragEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("application/json")) || "{}");
|
|
267
|
+
const data = {
|
|
268
|
+
targetTable: originalData({ id: tableId, type: "find" }),
|
|
269
|
+
sourceTable: originalData({ dataParams: dataTransfer, type: "get" }),
|
|
270
|
+
};
|
|
271
|
+
// drop from out layout editor
|
|
272
|
+
if (type === "drop") {
|
|
273
|
+
onDrop && onDrop(event, data);
|
|
274
|
+
}
|
|
275
|
+
// cari elemen bentuk (rect / circle / path)
|
|
276
|
+
const shape = group.querySelector("rect") ||
|
|
277
|
+
group.querySelector("circle") ||
|
|
278
|
+
group.querySelector("path");
|
|
279
|
+
if (!shape)
|
|
280
|
+
return;
|
|
281
|
+
}
|
|
282
|
+
catch (err) {
|
|
283
|
+
console.error("Invalid data-id JSON:", err);
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
const getSvgCoords = (e) => {
|
|
287
|
+
var _a;
|
|
288
|
+
const svg = svgRef.current;
|
|
289
|
+
const point = svg.createSVGPoint();
|
|
290
|
+
point.x = e.clientX;
|
|
291
|
+
point.y = e.clientY;
|
|
292
|
+
const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
293
|
+
return { x: transformed.x, y: transformed.y };
|
|
294
|
+
};
|
|
295
|
+
const handlePointerDown = (e) => {
|
|
296
|
+
var _a;
|
|
297
|
+
const svg = svgRef.current;
|
|
298
|
+
if (!e.isPrimary)
|
|
299
|
+
return;
|
|
300
|
+
if (!svg)
|
|
301
|
+
return;
|
|
302
|
+
isDragging.current = false;
|
|
303
|
+
let hasMoved = false;
|
|
304
|
+
const startX = e.clientX;
|
|
305
|
+
const startY = e.clientY;
|
|
306
|
+
const { x, y } = getSvgCoords(e);
|
|
307
|
+
const targetGroup = e.target.closest("g[data-id]");
|
|
308
|
+
if (!targetGroup) {
|
|
309
|
+
setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
|
|
310
|
+
return;
|
|
311
|
+
}
|
|
312
|
+
setPanningGroup(true);
|
|
313
|
+
// clone element yang diklik
|
|
314
|
+
let ghost = targetGroup.cloneNode(true);
|
|
315
|
+
const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
316
|
+
const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
|
|
317
|
+
? true
|
|
318
|
+
: (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
|
|
319
|
+
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
320
|
+
return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
|
|
321
|
+
})) && !disabled;
|
|
322
|
+
if (ghostAttributes) {
|
|
323
|
+
Object.keys(ghostAttributes).forEach((key) => {
|
|
324
|
+
ghost.setAttribute(key, ghostAttributes[key]);
|
|
325
|
+
});
|
|
326
|
+
}
|
|
327
|
+
ghost.setAttribute("opacity", "0.5");
|
|
328
|
+
ghost.setAttribute("pointer-events", "none");
|
|
329
|
+
ghost.setAttribute("stroke-width", "1");
|
|
330
|
+
svg.appendChild(ghost);
|
|
331
|
+
tableGhost.current = ghost;
|
|
332
|
+
const pt = svg.createSVGPoint();
|
|
333
|
+
pt.x = e.clientX;
|
|
334
|
+
pt.y = e.clientY;
|
|
335
|
+
const startBox = getTranslate(targetGroup);
|
|
336
|
+
const groupCTM = targetGroup.getCTM();
|
|
337
|
+
if (!groupCTM) {
|
|
338
|
+
setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
|
|
339
|
+
return;
|
|
340
|
+
}
|
|
341
|
+
const offset = {
|
|
342
|
+
x: x - startBox.x,
|
|
343
|
+
y: y - startBox.y,
|
|
344
|
+
};
|
|
345
|
+
const pointerMoveGhost = (ev) => {
|
|
346
|
+
var _a;
|
|
347
|
+
if (allowedDrag) {
|
|
348
|
+
isDragging.current = true;
|
|
349
|
+
const p = svg.createSVGPoint();
|
|
350
|
+
p.x = ev.clientX;
|
|
351
|
+
p.y = ev.clientY;
|
|
352
|
+
const dx = ev.clientX - startX;
|
|
353
|
+
const dy = ev.clientY - startY;
|
|
354
|
+
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
355
|
+
onPanning(ev);
|
|
356
|
+
if (!hasMoved && distance > 0) {
|
|
357
|
+
// transformRef?.current?.instance
|
|
358
|
+
// only move ghost if the mouse has moved more than 5 pixels
|
|
359
|
+
hasMoved = true;
|
|
360
|
+
isDragging.current = true;
|
|
361
|
+
}
|
|
362
|
+
// ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
|
|
363
|
+
ghost.style.display = "none";
|
|
364
|
+
const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
|
|
365
|
+
ghost.style.display = "";
|
|
366
|
+
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
367
|
+
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
368
|
+
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
369
|
+
if (dataHoveredGhostId !== dataGhostId) {
|
|
370
|
+
hoverUnderghostId.current = dataHoveredGhostId;
|
|
371
|
+
}
|
|
372
|
+
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
373
|
+
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
374
|
+
const newX = posSVG.x - offset.x;
|
|
375
|
+
const newY = posSVG.y - offset.y;
|
|
376
|
+
ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
|
|
377
|
+
}
|
|
378
|
+
};
|
|
379
|
+
// tampilkan ghost di posisi awal
|
|
380
|
+
pointerMoveGhost(e.nativeEvent);
|
|
381
|
+
const pointerHandleUp = (e) => {
|
|
382
|
+
var _a;
|
|
383
|
+
if (!hasMoved) {
|
|
384
|
+
const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
385
|
+
isDragging.current = false;
|
|
386
|
+
const dataGroupEmty = !dataId;
|
|
387
|
+
// TOOLTIP ACTION
|
|
388
|
+
const svgSize = svg.getBoundingClientRect();
|
|
389
|
+
const widthScreeen = svgSize.width;
|
|
390
|
+
const heightScreen = svgSize.height;
|
|
391
|
+
const clientX = e.clientX;
|
|
392
|
+
const clientY = e.clientY;
|
|
393
|
+
const relX = clientX - svgSize.left;
|
|
394
|
+
const relY = clientY - svgSize.top;
|
|
395
|
+
const centerX = widthScreeen / 2;
|
|
396
|
+
const centerY = heightScreen / 2;
|
|
397
|
+
let newX = 0;
|
|
398
|
+
let newY = 0;
|
|
399
|
+
if (relX > centerX) {
|
|
400
|
+
newX = relX - widthTooltip;
|
|
401
|
+
}
|
|
402
|
+
else if (relX < centerX) {
|
|
403
|
+
newX = relX;
|
|
404
|
+
}
|
|
405
|
+
else if (relX === centerX) {
|
|
406
|
+
newX = relX;
|
|
407
|
+
}
|
|
408
|
+
if (relY > centerY) {
|
|
409
|
+
newY = relY;
|
|
410
|
+
}
|
|
411
|
+
else if (relY < centerY) {
|
|
412
|
+
newY = relY;
|
|
413
|
+
}
|
|
414
|
+
else if (relY === centerY) {
|
|
415
|
+
newY = relY;
|
|
416
|
+
}
|
|
417
|
+
const rightClick = e.button === 2 && !dataGroupEmty && allowTooltip;
|
|
418
|
+
setTooltip({
|
|
419
|
+
x: newX / scale,
|
|
420
|
+
y: newY / scale,
|
|
421
|
+
visible: rightClick,
|
|
422
|
+
});
|
|
423
|
+
const findDayaById = originalData({ id: dataId, type: "find" });
|
|
424
|
+
handleSelectComponent(findDayaById, e);
|
|
425
|
+
}
|
|
426
|
+
if (isDragging.current && hasMoved && allowedDrag) {
|
|
427
|
+
// drag between group
|
|
428
|
+
const dataHoveredGhost = hoverUnderghostId.current;
|
|
429
|
+
hoverUnderghostId.current = null;
|
|
430
|
+
const sourceTable = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
431
|
+
const data = {
|
|
432
|
+
targetTable: originalData({ id: dataHoveredGhost, type: "find" }),
|
|
433
|
+
sourceTable: originalData({ id: sourceTable, type: "find" }),
|
|
434
|
+
};
|
|
435
|
+
const allowToSwitch = onSwitch && (data === null || data === void 0 ? void 0 : data.sourceTable) && (data === null || data === void 0 ? void 0 : data.targetTable);
|
|
436
|
+
allowToSwitch && onSwitch(e, data);
|
|
437
|
+
ghost.remove();
|
|
438
|
+
isDragging.current = false;
|
|
439
|
+
(_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
440
|
+
tableGhost.current = null;
|
|
441
|
+
}
|
|
442
|
+
setPanningGroup(false);
|
|
443
|
+
tableGhost.current = null;
|
|
444
|
+
isDragging.current = false;
|
|
445
|
+
window.removeEventListener("pointermove", pointerMoveGhost);
|
|
446
|
+
window.removeEventListener("pointerup", pointerHandleUp);
|
|
447
|
+
};
|
|
448
|
+
window.addEventListener("pointermove", pointerMoveGhost);
|
|
449
|
+
window.addEventListener("pointerup", pointerHandleUp);
|
|
450
|
+
};
|
|
451
|
+
const handleMouseUp = () => {
|
|
452
|
+
var _a;
|
|
453
|
+
// isDragging.current = false;
|
|
454
|
+
(_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
455
|
+
tableGhost.current = null;
|
|
456
|
+
};
|
|
457
|
+
useEffect(() => {
|
|
458
|
+
return () => {
|
|
459
|
+
var _a;
|
|
460
|
+
(_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
461
|
+
};
|
|
462
|
+
}, []);
|
|
463
|
+
const handlePan = (dx, dy) => {
|
|
464
|
+
var _a, _b;
|
|
465
|
+
const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
|
|
466
|
+
const setTransform = (_b = transformRef === null || transformRef === void 0 ? void 0 : transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform;
|
|
467
|
+
if (!instance)
|
|
468
|
+
return;
|
|
469
|
+
const bounds = instance.bounds;
|
|
470
|
+
const { positionX, positionY, scale } = instance.transformState;
|
|
471
|
+
let x = positionX + dx;
|
|
472
|
+
let y = positionY + dy;
|
|
473
|
+
if (x >= bounds.maxPositionX)
|
|
474
|
+
x = bounds.maxPositionX;
|
|
475
|
+
if (y >= bounds.maxPositionY)
|
|
476
|
+
y = bounds.maxPositionY;
|
|
477
|
+
if (y <= bounds.minPositionY)
|
|
478
|
+
y = bounds.minPositionY;
|
|
479
|
+
if (x <= bounds.minPositionX)
|
|
480
|
+
x = bounds.minPositionX;
|
|
481
|
+
setTransform(x, y, scale, 100, "linear");
|
|
482
|
+
};
|
|
483
|
+
// const instance = transformRef.current?.instance;
|
|
484
|
+
// console.log({ instance })
|
|
485
|
+
const getCoords = (e) => {
|
|
486
|
+
var _a;
|
|
487
|
+
const svg = svgRef.current;
|
|
488
|
+
const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
|
|
489
|
+
if (!svg || !instance)
|
|
490
|
+
return null;
|
|
491
|
+
const { positionX, positionY, scale } = instance.transformState;
|
|
492
|
+
let clientX, clientY;
|
|
493
|
+
if ("touches" in e && e.touches.length > 0) {
|
|
494
|
+
clientX = e.touches[0].clientX;
|
|
495
|
+
clientY = e.touches[0].clientY;
|
|
496
|
+
}
|
|
497
|
+
else if ("clientX" in e) {
|
|
498
|
+
clientX = e.clientX;
|
|
499
|
+
clientY = e.clientY;
|
|
500
|
+
}
|
|
501
|
+
else {
|
|
502
|
+
return null;
|
|
503
|
+
}
|
|
504
|
+
const svgRect = svg.getBoundingClientRect();
|
|
505
|
+
// const viewBox = svg.viewBox.baseVal;
|
|
506
|
+
const xLeft = (clientX - svgRect.left + positionX) / scale;
|
|
507
|
+
const yTop = (clientY - svgRect.top + positionY) / scale;
|
|
508
|
+
const xRight = clientX - svgRect.left + positionX - svgRect.width / scale;
|
|
509
|
+
const yBottom = clientY - svgRect.top + positionY - svgRect.height / scale;
|
|
510
|
+
const minX = svgRect.left + positionX;
|
|
511
|
+
const minY = svgRect.top + positionY;
|
|
512
|
+
const maxX = svgRect.right;
|
|
513
|
+
const maxY = svgRect.bottom;
|
|
514
|
+
return [
|
|
515
|
+
xLeft,
|
|
516
|
+
yTop,
|
|
517
|
+
Math.abs(xRight),
|
|
518
|
+
Math.abs(yBottom),
|
|
519
|
+
minX,
|
|
520
|
+
minY,
|
|
521
|
+
maxX,
|
|
522
|
+
maxY,
|
|
523
|
+
];
|
|
524
|
+
};
|
|
525
|
+
const onPanning = (e) => {
|
|
526
|
+
const [xLeft, yTop, xRight, yBottom, minX, minY, maxX, maxY] = getCoords(e);
|
|
527
|
+
const edgeThreshold = 100;
|
|
528
|
+
const speedPanning = 50;
|
|
529
|
+
if (scale !== 1) {
|
|
530
|
+
if (xLeft < edgeThreshold)
|
|
531
|
+
handlePan(speedPanning, 0);
|
|
532
|
+
if (xRight < edgeThreshold)
|
|
533
|
+
handlePan(-speedPanning, 0);
|
|
534
|
+
if (yTop < edgeThreshold)
|
|
535
|
+
handlePan(0, speedPanning);
|
|
536
|
+
if (yBottom < edgeThreshold)
|
|
537
|
+
handlePan(0, -speedPanning);
|
|
538
|
+
}
|
|
539
|
+
};
|
|
540
|
+
const hasBoundingBox = hasBoundingBoxRef.current;
|
|
541
|
+
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
|
|
542
|
+
overflow: "auto",
|
|
543
|
+
WebkitOverflowScrolling: "touch",
|
|
544
|
+
}} {...props.containerProps}>
|
|
545
|
+
{loading && (<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">
|
|
546
|
+
{(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
|
|
547
|
+
</div>)}
|
|
548
|
+
|
|
549
|
+
<svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
|
|
550
|
+
// scale={5}
|
|
551
|
+
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={{
|
|
177
552
|
background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
|
|
178
553
|
display: "block",
|
|
179
|
-
pointerEvents: "
|
|
180
|
-
touchAction: "
|
|
181
|
-
|
|
182
|
-
}}>
|
|
183
|
-
|
|
554
|
+
pointerEvents: disabled ? "none" : "all",
|
|
555
|
+
touchAction: "none",
|
|
556
|
+
userSelect: "none",
|
|
557
|
+
}} {...props.svgProps}>
|
|
558
|
+
{hasBoundingBox && (<defs>
|
|
559
|
+
<clipPath id="contentCrop">
|
|
560
|
+
<rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
|
|
561
|
+
</clipPath>
|
|
562
|
+
</defs>)}
|
|
563
|
+
<g id="main-layer" clip-path="url(#contentCrop)">
|
|
564
|
+
<Layers components={[
|
|
184
565
|
...extraComponentsEditor,
|
|
185
|
-
...renderElements(componentsEditor, mappingKey,
|
|
186
|
-
]}
|
|
566
|
+
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|
|
567
|
+
]} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable} privilegedTags={privilegedTags}/>
|
|
568
|
+
</g>
|
|
569
|
+
{/* 🧠 Ghost universal */}
|
|
187
570
|
</svg>
|
|
571
|
+
{tooltip.visible && (<div className={`seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`} style={Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / scale})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style)}>
|
|
572
|
+
{tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children}
|
|
573
|
+
</div>)}
|
|
188
574
|
</div>);
|
|
189
575
|
};
|
|
190
576
|
export default LayerView;
|
|
@@ -85,5 +85,5 @@ export interface LayerViewProps<TMeta = undefined> {
|
|
|
85
85
|
defaultBoundingBox?: PropertiesProps;
|
|
86
86
|
viewOnly?: boolean;
|
|
87
87
|
}
|
|
88
|
-
declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) =>
|
|
88
|
+
declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
|
|
89
89
|
export default LayerView;
|
|
@@ -6,7 +6,7 @@ import Layers from "../../components/layer-v4";
|
|
|
6
6
|
import { getTranslate } from "../board-v3/utils";
|
|
7
7
|
import { Spin } from "antd";
|
|
8
8
|
const LayerView = (props) => {
|
|
9
|
-
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled, loadingRender, } = props;
|
|
9
|
+
const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled = true, loadingRender, } = props;
|
|
10
10
|
const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
|
|
11
11
|
const tableGhost = useRef(null);
|
|
12
12
|
const hoverUnderghostId = useRef(null);
|
|
@@ -314,12 +314,12 @@ const LayerView = (props) => {
|
|
|
314
314
|
// clone element yang diklik
|
|
315
315
|
let ghost = targetGroup.cloneNode(true);
|
|
316
316
|
const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
317
|
-
const allowedDrag = !(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
|
|
317
|
+
const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
|
|
318
318
|
? true
|
|
319
319
|
: (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
|
|
320
320
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
321
|
-
return _.value
|
|
322
|
-
});
|
|
321
|
+
return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
|
|
322
|
+
})) && (!disabled);
|
|
323
323
|
if (ghostAttributes) {
|
|
324
324
|
Object.keys(ghostAttributes).forEach((key) => {
|
|
325
325
|
ghost.setAttribute(key, ghostAttributes[key]);
|
|
@@ -345,35 +345,35 @@ const LayerView = (props) => {
|
|
|
345
345
|
};
|
|
346
346
|
const pointerMoveGhost = (ev) => {
|
|
347
347
|
var _a;
|
|
348
|
-
isDragging.current = true;
|
|
349
|
-
const p = svg.createSVGPoint();
|
|
350
|
-
p.x = ev.clientX;
|
|
351
|
-
p.y = ev.clientY;
|
|
352
|
-
const dx = ev.clientX - startX;
|
|
353
|
-
const dy = ev.clientY - startY;
|
|
354
|
-
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
355
|
-
onPanning(ev);
|
|
356
|
-
if (!hasMoved && distance > 0) {
|
|
357
|
-
// transformRef?.current?.instance
|
|
358
|
-
// only move ghost if the mouse has moved more than 5 pixels
|
|
359
|
-
hasMoved = true;
|
|
360
|
-
isDragging.current = true;
|
|
361
|
-
}
|
|
362
|
-
// ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
|
|
363
|
-
ghost.style.display = "none";
|
|
364
|
-
const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
|
|
365
|
-
ghost.style.display = "";
|
|
366
|
-
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
367
|
-
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
368
|
-
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
369
|
-
if (dataHoveredGhostId !== dataGhostId) {
|
|
370
|
-
hoverUnderghostId.current = dataHoveredGhostId;
|
|
371
|
-
}
|
|
372
|
-
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
373
|
-
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
374
|
-
const newX = posSVG.x - offset.x;
|
|
375
|
-
const newY = posSVG.y - offset.y;
|
|
376
348
|
if (allowedDrag) {
|
|
349
|
+
isDragging.current = true;
|
|
350
|
+
const p = svg.createSVGPoint();
|
|
351
|
+
p.x = ev.clientX;
|
|
352
|
+
p.y = ev.clientY;
|
|
353
|
+
const dx = ev.clientX - startX;
|
|
354
|
+
const dy = ev.clientY - startY;
|
|
355
|
+
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
356
|
+
onPanning(ev);
|
|
357
|
+
if (!hasMoved && distance > 0) {
|
|
358
|
+
// transformRef?.current?.instance
|
|
359
|
+
// only move ghost if the mouse has moved more than 5 pixels
|
|
360
|
+
hasMoved = true;
|
|
361
|
+
isDragging.current = true;
|
|
362
|
+
}
|
|
363
|
+
// ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
|
|
364
|
+
ghost.style.display = "none";
|
|
365
|
+
const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
|
|
366
|
+
ghost.style.display = "";
|
|
367
|
+
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
368
|
+
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
369
|
+
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
370
|
+
if (dataHoveredGhostId !== dataGhostId) {
|
|
371
|
+
hoverUnderghostId.current = dataHoveredGhostId;
|
|
372
|
+
}
|
|
373
|
+
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
374
|
+
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
375
|
+
const newX = posSVG.x - offset.x;
|
|
376
|
+
const newY = posSVG.y - offset.y;
|
|
377
377
|
ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
|
|
378
378
|
}
|
|
379
379
|
};
|