seat-editor 3.4.8 → 3.5.0

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

@@ -0,0 +1,244 @@
+// components/ConnectionLayer.tsx
+import React, { useMemo, useState } from "react";
+import { buildCurvePath, getCurveEndAngle, getRectEdge, NODE_WIDTH, NODE_HEIGHT, } from "./utils";
+// ─── Constants ────────────────────────────────────────────────────────────────
+const LEVEL_COLORS = [
+    "#22c55e",
+    "#f59e0b",
+    "#f97316",
+    "#ef4444",
+    "#a78bfa",
+    "#38bdf8",
+];
+const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
+// ─── BFS flood fill ───────────────────────────────────────────────────────────
+const floodFill = (seedIds, edges) => {
+    const levelMap = new Map();
+    const queue = [];
+    seedIds.forEach((id) => {
+        levelMap.set(id, 0);
+        queue.push({ id, level: 0 });
+    });
+    while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        edges.forEach((edge) => {
+            const neighbors = [];
+            if (edge.from === id)
+                neighbors.push(edge.to);
+            if (edge.to === id)
+                neighbors.push(edge.from);
+            neighbors.forEach((nId) => {
+                if (!levelMap.has(nId)) {
+                    levelMap.set(nId, level + 1);
+                    queue.push({ id: nId, level: level + 1 });
+                }
+            });
+        });
+    }
+    return levelMap;
+};
+// ─── Group edges by source ────────────────────────────────────────────────────
+const groupBySource = (edges) => {
+    const map = new Map();
+    edges.forEach((edge) => {
+        if (!map.has(edge.from))
+            map.set(edge.from, []);
+        map.get(edge.from).push(edge);
+    });
+    return map;
+};
+// ─── Component ────────────────────────────────────────────────────────────────
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, mousePos, getNodeById, onSelectEdge,
+// onDeleteEdge,
+ }) => {
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    // ── Flood fill highlight ──────────────────────────────────────────
+    const nodeHighlightMap = useMemo(() => {
+        if (!selectedEdge)
+            return new Map();
+        const sel = edges.find((e) => e.id === selectedEdge);
+        if (!sel)
+            return new Map();
+        return floodFill([sel.from, sel.to], edges);
+    }, [selectedEdge, edges]);
+    // ── Group by source for shared stem ──────────────────────────────
+    const sourceGroups = useMemo(() => groupBySource(edges), [edges]);
+    // ── Pre-compute curve data per edge ──────────────────────────────
+    const curveData = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            const fromNode = getNodeById(edge.from);
+            const toNode = getNodeById(edge.to);
+            if (!fromNode || !toNode)
+                return;
+            const start = getRectEdge(fromNode, toNode, fromNode.width, fromNode.height);
+            const end = getRectEdge(toNode, fromNode, toNode.width, toNode.height);
+            const pathD = buildCurvePath(start, end);
+            const angle = getCurveEndAngle(start, end);
+            // Midpoint di kurva (t=0.5) untuk label/badge
+            const dx = end.x - start.x;
+            const dy = end.y - start.y;
+            const absDx = Math.abs(dx);
+            const absDy = Math.abs(dy);
+            const strength = Math.max(Math.max(absDx, absDy) * 0.5, 60);
+            let cp1;
+            let cp2;
+            if (absDx >= absDy) {
+                cp1 = { x: start.x + strength, y: start.y };
+                cp2 = { x: end.x - strength, y: end.y };
+            }
+            else {
+                cp1 = { x: start.x, y: start.y + strength };
+                cp2 = { x: end.x, y: end.y - strength };
+            }
+            // Cubic bezier at t=0.5
+            const t = 0.5;
+            const mt = 1 - t;
+            const midX = mt * mt * mt * start.x +
+                3 * mt * mt * t * cp1.x +
+                3 * mt * t * t * cp2.x +
+                t * t * t * end.x;
+            const midY = mt * mt * mt * start.y +
+                3 * mt * mt * t * cp1.y +
+                3 * mt * t * t * cp2.y +
+                t * t * t * end.y;
+            map.set(edge.id, { start, end, pathD, angle, midX, midY });
+        });
+        return map;
+    }, [edges, getNodeById]);
+    // ── Shared stem exit point per source ────────────────────────────
+    const stemData = useMemo(() => {
+        const map = new Map();
+        sourceGroups.forEach((groupEdges, fromId) => {
+            if (groupEdges.length <= 1)
+                return;
+            const sourceNode = getNodeById(fromId);
+            if (!sourceNode)
+                return;
+            const exits = groupEdges
+                .map((edge) => {
+                const toNode = getNodeById(edge.to);
+                if (!toNode)
+                    return null;
+                return getRectEdge(sourceNode, toNode, sourceNode.width, sourceNode.height);
+            })
+                .filter(Boolean);
+            if (exits.length === 0)
+                return;
+            map.set(fromId, {
+                x: exits.reduce((s, p) => s + p.x, 0) / exits.length,
+                y: exits.reduce((s, p) => s + p.y, 0) / exits.length,
+            });
+        });
+        return map;
+    }, [sourceGroups, getNodeById]);
+    return (<g id="connection-layer">
+      {/* ── Node border highlight (flood fill) ───────────────────────── */}
+      {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
+            var _a, _b, _c;
+            const node = getNodeById(nodeId);
+            if (!node)
+                return null;
+            const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
+            const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
+            const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
+            const color = getLevelColor(level);
+            const padding = 4;
+            return (<g key={`highlight-${nodeId}`} transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`} style={{ pointerEvents: "none" }}>
+            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={8} rx={5} opacity={0.08}/>
+            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={level === 0 ? 2.5 : 1.5} strokeDasharray={level === 0 ? "none" : "5 3"} rx={5} opacity={level === 0 ? 1 : 0.75}/>
+            <g transform={`translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`}>
+              <circle r={7} fill={color} opacity={0.9}/>
+              <text textAnchor="middle" dominantBaseline="middle" fill="white" fontSize={7} fontFamily="monospace" fontWeight={700} style={{ userSelect: "none" }}>
+                {level}
+              </text>
+            </g>
+          </g>);
+        })}
+
+      {/* ── Stem dot di shared source exit ───────────────────────────── */}
+      {Array.from(stemData.entries()).map(([fromId, stemExit]) => {
+            var _a;
+            const isStemOfSelected = selectedEdge &&
+                ((_a = edges.find((e) => e.id === selectedEdge)) === null || _a === void 0 ? void 0 : _a.from) === fromId;
+            const color = isStemOfSelected ? "#a78bfa" : "#38bdf8";
+            return (<g key={`stem-dot-${fromId}`} style={{ pointerEvents: "none" }}>
+            <circle cx={stemExit.x} cy={stemExit.y} r={5} fill="#0f172a" stroke={color} strokeWidth={1.5}/>
+            <circle cx={stemExit.x} cy={stemExit.y} r={2.5} fill={color}/>
+          </g>);
+        })}
+
+      {/* ── Render edges ─────────────────────────────────────────────── */}
+      {edges.map((edge) => {
+            const data = curveData.get(edge.id);
+            if (!data)
+                return null;
+            const { pathD, angle, midX, midY } = data;
+            const isSel = selectedEdge === edge.id;
+            const isHov = hoveredEdge === edge.id;
+            const markerId = `conn-arrow-${edge.id}`;
+            const markerSelId = `conn-arrow-sel-${edge.id}`;
+            // Warna edge jika dalam network highlight
+            const fromLevel = nodeHighlightMap.get(edge.from);
+            const toLevel = nodeHighlightMap.get(edge.to);
+            const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
+            const networkColor = isInNetwork
+                ? getLevelColor(Math.max(fromLevel, toLevel))
+                : "#38bdf8";
+            return (<g key={edge.id}>
+            <defs>
+              <marker id={markerId} markerWidth="8" markerHeight="8" refX="7" refY="3" orient={`${angle}deg`}>
+                <path d="M 0 0 L 8 3 L 0 6 Z" fill={isSel
+                    ? "#a78bfa"
+                    : isInNetwork && !isSel
+                        ? networkColor
+                        : "#38bdf8"} opacity={0.9}/>
+              </marker>
+            </defs>
+
+            {/* Hit area */}
+            <path d={pathD} stroke="transparent" strokeWidth={14} fill="none" style={{ cursor: "pointer" }} onClick={(e) => {
+                    e.stopPropagation();
+                    onSelectEdge(edge.id);
+                }} onMouseEnter={() => setHoveredEdge(edge.id)} onMouseLeave={() => setHoveredEdge(null)}/>
+
+            {/* Glow saat selected/hovered */}
+            {(isSel || isHov) && (<path d={pathD} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={8} fill="none" opacity={isSel ? 0.12 : 0.06} style={{ pointerEvents: "none" }}/>)}
+
+            {/* Curve utama */}
+            <path d={pathD} stroke={isSel
+                    ? "#a78bfa"
+                    : isInNetwork && selectedEdge
+                        ? networkColor
+                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9} markerEnd={`url(#${markerId})`} style={{ pointerEvents: "none" }}/>
+
+            {/* DEL badge saat selected */}
+            {isSel && (<g style={{ pointerEvents: "none" }}>
+                <rect x={midX - 16} y={midY - 10} width={32} height={18} rx={4} fill="#1e1b2e" stroke="#a78bfa" strokeWidth={1} opacity={0.95}/>
+                <text x={midX} y={midY} textAnchor="middle" dominantBaseline="middle" fill="#a78bfa" fontSize={9} fontFamily="monospace" fontWeight={600}>
+                  DEL
+                </text>
+              </g>)}
+          </g>);
+        })}
+
+      {/* ── Preview curve saat connecting ─────────────────────────────── */}
+      {connecting &&
+            (() => {
+                const fromNode = getNodeById(connecting.fromId);
+                if (!fromNode)
+                    return null;
+                const start = getRectEdge(fromNode, mousePos, fromNode.width, fromNode.height);
+                const pathD = buildCurvePath(start, mousePos);
+                const angle = getCurveEndAngle(start, mousePos);
+                return (<g>
+              <defs>
+                <marker id="conn-preview-arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient={`${angle}deg`}>
+                  <path d="M 0 0 L 8 3 L 0 6 Z" fill="#a78bfa" opacity={0.85}/>
+                </marker>
+              </defs>
+              <path d={pathD} stroke="#a78bfa" strokeWidth={1.5} fill="none" strokeDasharray="6 3" markerEnd="url(#conn-preview-arrow)" opacity={0.8} style={{ pointerEvents: "none" }}/>
+            </g>);
+            })()}
+    </g>);
+};

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

@@ -0,0 +1,99 @@
+import React, { CSSProperties, SVGAttributes } from "react";
+import { ReactZoomPanPinchRef, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from "react-zoom-pan-pinch";
+import { PropertiesProps } from "../../dto/table";
+import { EventHandleType } from "../../dto/event-handler";
+import { EdgeType } from "./utils";
+export type TableGhost = {
+    table: PropertiesProps;
+    event: EventHandleType;
+};
+export type TableMatchKey = {
+    key: string | number;
+    properties?: PropertiesProps;
+    className?: string;
+};
+export type TableMatchEvent = {
+    event: EventHandleType;
+    properties: PropertiesProps;
+};
+export type ComponentProps<T = undefined> = T extends undefined ? PropertiesProps : Omit<PropertiesProps, keyof T> & T;
+export type OnCurrentStateChange<TMeta = undefined> = ({ components, extraComponents, background, boundingBox, }: {
+    components: ComponentProps<TMeta>[];
+    extraComponents: ComponentProps[];
+    background: string;
+    boundingBox: PropertiesProps | null;
+}) => void;
+export type TransformProps = React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchContentRef>>;
+export type RefLayerView = {
+    svgRef: SVGSVGElement;
+    transformRef: ReactZoomPanPinchRef;
+    containerRef: HTMLDivElement;
+    tableGhost: SVGGElement;
+    hoverUnderghost: ComponentProps;
+};
+export type TypeActionProps<TMeta = undefined> = {
+    targetTable: ComponentProps<TMeta>;
+    sourceTable: ComponentProps<TMeta>;
+};
+export interface LayerViewProps<TMeta = undefined> {
+    componentProps?: ComponentProps<TMeta>[];
+    extraComponentProps?: ComponentProps[];
+    onSelectComponent?: (component: ComponentProps<TMeta>) => void;
+    onDoubleClick?: (component: ComponentProps<TMeta>) => void;
+    mappingKey?: string;
+    tableMatchKey?: TableMatchKey[];
+    eventMatchTable?: TableMatchEvent[];
+    statusKey?: string;
+    defaultBackground?: string;
+    transformProps?: ReactZoomPanPinchProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    svgProps?: SVGAttributes<SVGSVGElement>;
+    ghostAttributes?: SVGAttributes<SVGGElement>;
+    iconTags?: {
+        icon: React.JSX.Element;
+        key: string;
+    }[];
+    privilegedTags?: {
+        key: string;
+        items: string[];
+    }[];
+    tooltipProps?: {
+        className?: string;
+        style?: CSSProperties;
+        minWidth?: number;
+        children: React.ReactNode;
+    };
+    dragTableBlockKey?: {
+        key: string;
+        value: string | number | null;
+    }[];
+    onRightClick?: (e: MouseEvent, component: ComponentProps<TMeta>) => void;
+    allowTooltip?: boolean;
+    onDrop?: (e: React.MouseEvent<SVGSVGElement>, component: TypeActionProps<TMeta>) => void;
+    onSwitch?: (e: MouseEvent, component: TypeActionProps<TMeta>) => void;
+    refs?: React.ForwardedRef<RefLayerView>;
+    viewStyles?: {
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
+    };
+    loadingRender?: {
+        state: boolean;
+        element: React.JSX.Element;
+    };
+    defaultBoundingBox?: PropertiesProps;
+    viewOnly?: boolean;
+    actionPrivileged?: {
+        select?: boolean;
+        move?: boolean;
+        switch?: boolean;
+        drop?: boolean;
+        rightClick?: boolean;
+        double?: boolean;
+    };
+    onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
+    keyNode: string;
+}
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+export default LayerView;