@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

package/dist/components/questions/components/ColorRegionClient.js

@@ -1,545 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { toast } from 'sonner';
-import { ReactFlow, Background, useNodesState, useEdgesState, ReactFlowProvider, useReactFlow, } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { Lightbulb } from 'lucide-react';
-import { ColorNode } from './ColorNode';
-import { ColorRegionNode } from './ColorRegionNode';
-import { usePresignedFileUrl } from '../../../shared/lib/hooks';
-const nodeTypes = {
-    clientColorNode: (props) => _jsx(ColorNode, { ...props, variant: "client" }),
-    clientColorRegionNode: (props) => _jsx(ColorRegionNode, { ...props }),
-};
-function ColorRegionClientContent({ questionData, explanation, isReviewMode = false, config }) {
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
-    // Get presigned URL for background image from S3
-    const { previewUrl: backgroundImagePreviewUrl, isLoading: isLoadingImage } = usePresignedFileUrl(questionData.backgroundImageUrl);
-    // Refs
-    const imageRef = useRef(null);
-    const flowRef = useRef(null);
-    // React Flow State
-    const [nodes, setNodes, reactFlowOnNodesChange] = useNodesState([]);
-    const [, , onEdgesChange] = useEdgesState([]);
-    // Track which color is assigned to which region
-    const [regionAssignments, setRegionAssignments] = useState({});
-    // Handle image load
-    const handleImageLoad = () => {
-        if (imageRef.current && flowRef.current) {
-            const flowWidth = flowRef.current.clientWidth - 100; // 50px padding on each side
-            const flowHeight = flowRef.current.clientHeight - 260; // top section and bottom margin
-            const naturalWidth = imageRef.current.naturalWidth || imageRef.current.clientWidth;
-            const naturalHeight = imageRef.current.naturalHeight || imageRef.current.clientHeight;
-            const widthRatio = flowWidth / naturalWidth;
-            const heightRatio = flowHeight / naturalHeight;
-            const scale = Math.min(widthRatio, heightRatio, 1);
-            setImageDimensions({
-                width: naturalWidth * scale,
-                height: naturalHeight * scale,
-            });
-            setImageLoaded(true);
-        }
-    };
-    // Handle filling color into region
-    const handleFillRegionColor = useCallback((regionId, color) => {
-        setRegionAssignments((prev) => ({
-            ...prev,
-            [regionId]: color,
-        }));
-    }, []);
-    // Handle removing color from region (for client mode delete)
-    const handleRemoveColorFromRegion = useCallback((regionId) => {
-        const removedColor = regionAssignments[regionId];
-        if (removedColor) {
-            // Remove assignment
-            setRegionAssignments((prev) => {
-                const newAssignments = { ...prev };
-                delete newAssignments[regionId];
-                return newAssignments;
-            });
-            // Restore color node visibility
-            setNodes((prevNodes) => prevNodes.map((n) => n.data?.color === removedColor ? { ...n, data: { ...n.data, isConnected: false } } : n));
-        }
-    }, [regionAssignments, setNodes]);
-    // State for visual feedback
-    const [highlightedRegionId, setHighlightedRegionId] = useState(null);
-    const { getIntersectingNodes } = useReactFlow();
-    const imageStartY = 200;
-    const imageStartX = (() => {
-        if (!imageLoaded || imageDimensions.width <= 0)
-            return 50;
-        const flowWidth = flowRef.current?.clientWidth || 0;
-        if (!flowWidth)
-            return 50;
-        const centered = (flowWidth - imageDimensions.width) / 2;
-        return Math.max(50, centered);
-    })();
-    // Track if a node is being dragged to prevent panning
-    const isDraggingNodeRef = useRef(false);
-    // Track the old region ID when dragging starts (for swap functionality)
-    const draggedNodeOldRegionRef = useRef(null);
-    // Handle node drag start - store old region for potential swap
-    const onNodeDragStart = useCallback((_, node) => {
-        // Only handle color nodes
-        if (node.type !== 'clientColorNode') {
-            return;
-        }
-        // Set flag to prevent panning
-        isDraggingNodeRef.current = true;
-        const draggedColor = node.data?.color;
-        if (!draggedColor || typeof draggedColor !== 'string') {
-            return;
-        }
-        // Check if this color node is from a region (has regionId in data)
-        const regionId = node.data?.regionId;
-        // Find the old region this color was assigned to (either from regionId or from assignments)
-        const assignedRegionId = regionId ||
-            Object.keys(regionAssignments).find((id) => regionAssignments[id] === draggedColor);
-        // Store the old region ID for potential swap
-        draggedNodeOldRegionRef.current = assignedRegionId || null;
-        if (assignedRegionId) {
-            // Temporarily remove the old assignment (will be restored or swapped)
-            setRegionAssignments((prev) => {
-                const newAssignments = { ...prev };
-                delete newAssignments[assignedRegionId];
-                return newAssignments;
-            });
-            // Ngay lập tức cập nhật lại region node để hiển thị vùng drop
-            setNodes((prevNodes) => prevNodes.map((n) => {
-                if (n.id !== assignedRegionId || n.type !== 'clientColorRegionNode') {
-                    return n;
-                }
-                return {
-                    ...n,
-                    data: {
-                        ...n.data,
-                        savedColor: '',
-                    },
-                    style: {
-                        ...n.style,
-                        pointerEvents: 'auto',
-                    },
-                };
-            }));
-        }
-    }, [regionAssignments, setNodes]);
-    const onNodeDrag = useCallback((_, node) => {
-        if (node.type !== 'clientColorNode') {
-            return;
-        }
-        const draggedColor = node.data?.color;
-        if (!draggedColor || typeof draggedColor !== 'string') {
-            setHighlightedRegionId(null);
-            return;
-        }
-        const parseDimension = (value) => {
-            if (typeof value === 'number') {
-                return Number.isFinite(value) ? value : null;
-            }
-            if (typeof value === 'string') {
-                const parsed = parseFloat(value);
-                return Number.isFinite(parsed) ? parsed : null;
-            }
-            return null;
-        };
-        const getNodeDimension = (targetNode, key) => {
-            const direct = key in targetNode ? targetNode[key] : null;
-            if (typeof direct === 'number' && Number.isFinite(direct)) {
-                return direct;
-            }
-            const styleValue = targetNode.measured
-                ? targetNode.measured[key]
-                : undefined;
-            return parseDimension(styleValue);
-        };
-        const getRegionPixelSize = (targetRegion) => {
-            if (imageDimensions.width <= 0 || imageDimensions.height <= 0) {
-                return null;
-            }
-            const styleWidth = parseDimension(targetRegion.style?.width);
-            const styleHeight = parseDimension(targetRegion.style?.height);
-            if (styleWidth && styleHeight) {
-                return {
-                    width: Math.max(styleWidth, 60),
-                    height: Math.max(styleHeight, 40),
-                };
-            }
-            const regionData = targetRegion.data;
-            if (regionData?.width === undefined ||
-                regionData?.height === undefined ||
-                typeof regionData.width !== 'number' ||
-                typeof regionData.height !== 'number') {
-                return null;
-            }
-            return {
-                width: Math.max((regionData.width / 100) * imageDimensions.width, 60),
-                height: Math.max((regionData.height / 100) * imageDimensions.height, 40),
-            };
-        };
-        const highlightedColorNodeClass = '';
-        const draggingColorNodeClass = ''; // Bỏ border khi đang drag
-        const intersectingNodes = getIntersectingNodes(node, true);
-        const colorNodeIds = intersectingNodes
-            .filter((n) => n.type === 'clientColorNode')
-            .map((n) => n.id);
-        const intersectingRegions = intersectingNodes.filter((n) => n.type === 'clientColorRegionNode' && n.id !== 'unassigned-region');
-        const nodeY = node.position.y;
-        const isInUnassignedRegion = nodeY >= 0 && nodeY <= 100;
-        if (intersectingRegions.length > 0) {
-            setHighlightedRegionId(intersectingRegions[0].id);
-            if (!colorNodeIds.includes(node.id)) {
-                colorNodeIds.push(node.id);
-            }
-        }
-        else if (isInUnassignedRegion) {
-            setHighlightedRegionId('unassigned-region');
-        }
-        else {
-            setHighlightedRegionId(null);
-        }
-        setNodes((prevNodes) => prevNodes.map((n) => n.type === 'clientColorNode'
-            ? {
-                ...n,
-                data: {
-                    ...n.data,
-                    highlightClass: colorNodeIds.includes(n.id)
-                        ? highlightedColorNodeClass
-                        : n.id === node.id
-                            ? draggingColorNodeClass
-                            : undefined,
-                    highlightStyle: colorNodeIds.includes(n.id) &&
-                        n.id === node.id &&
-                        intersectingRegions.length > 0
-                        ? (() => {
-                            const targetRegion = intersectingRegions[0];
-                            const regionSize = getRegionPixelSize(targetRegion);
-                            const nodeWidth = getNodeDimension(n, 'width');
-                            const nodeHeight = getNodeDimension(n, 'height');
-                            if (!regionSize || !nodeWidth || !nodeHeight) {
-                                return undefined;
-                            }
-                            return {
-                                transform: `scale(${Number(regionSize.width) / Number(nodeWidth)}, ${Number(regionSize.height) / Number(nodeHeight)})`,
-                                transformOrigin: 'center center',
-                                transition: 'transform 180ms ease-out',
-                            };
-                        })()
-                        : undefined,
-                    isHighlighted: colorNodeIds.includes(n.id),
-                },
-            }
-            : n));
-    }, [getIntersectingNodes, imageDimensions, setNodes]);
-    // Handle node drag stop (drop) with intersection detection
-    const onNodeDragStop = useCallback((_, node) => {
-        if (node.type !== 'clientColorNode')
-            return;
-        setNodes((prevNodes) => prevNodes.map((n) => n.type === 'clientColorNode'
-            ? {
-                ...n,
-                data: {
-                    ...n.data,
-                    highlightClass: undefined,
-                    highlightStyle: undefined,
-                    isHighlighted: false,
-                },
-            }
-            : n));
-        const draggedColor = node.data?.color;
-        if (!draggedColor || typeof draggedColor !== 'string') {
-            setHighlightedRegionId(null);
-            return;
-        }
-        // Get intersecting nodes using React Flow's built-in method with partial intersection
-        const intersectingNodes = getIntersectingNodes(node, true); // partially = true
-        // Find intersecting region nodes (excluding unassigned region - we'll check it manually)
-        const intersectingRegions = intersectingNodes.filter((n) => n.type === 'clientColorRegionNode' && n.id !== 'unassigned-region');
-        // Manually check if node is in unassigned region area (top 100px)
-        const nodeY = node.position.y;
-        const isInUnassignedRegion = nodeY >= 0 && nodeY <= 100;
-        // Clear highlight
-        setHighlightedRegionId(null);
-        if (intersectingRegions.length > 0) {
-            const targetRegion = intersectingRegions[0];
-            const oldRegionId = draggedNodeOldRegionRef.current;
-            // Drop into a regular region
-            const existingColorInTargetRegion = regionAssignments[targetRegion.id];
-            if (existingColorInTargetRegion && existingColorInTargetRegion !== draggedColor) {
-                // Swap: Target region already has a color node
-                // 1. Assign dragged color to target region
-                // 2. Assign existing color to old region (if exists) or remove it
-                setRegionAssignments((prev) => {
-                    const newAssignments = { ...prev };
-                    // Assign dragged color to target region
-                    newAssignments[targetRegion.id] = draggedColor;
-                    // If dragged color had an old region, assign existing color to old region
-                    if (oldRegionId) {
-                        newAssignments[oldRegionId] = existingColorInTargetRegion;
-                    }
-                    // If dragged color had no old region, existing color will be removed from assignments
-                    // (it will go back to original position - already removed when we set newAssignments)
-                    return newAssignments;
-                });
-            }
-            else {
-                // Simple assignment: Target region is empty or same color
-                setRegionAssignments((prev) => ({
-                    ...prev,
-                    [targetRegion.id]: draggedColor,
-                }));
-            }
-            // Clear the ref
-            draggedNodeOldRegionRef.current = null;
-        }
-        else if (isInUnassignedRegion) {
-            // Drop into unassigned region area - remove assignment and return to original position
-            const oldRegionId = draggedNodeOldRegionRef.current;
-            if (oldRegionId) {
-                setRegionAssignments((prev) => {
-                    const newAssignments = { ...prev };
-                    delete newAssignments[oldRegionId];
-                    return newAssignments;
-                });
-            }
-            // Reset node position to original position
-            const originalNode = questionData.colorNodes.find((n) => n.color === draggedColor);
-            if (originalNode) {
-                const currentAssignments = oldRegionId
-                    ? Object.fromEntries(Object.entries(regionAssignments).filter(([id]) => id !== oldRegionId))
-                    : regionAssignments;
-                const unassignedColors = questionData.colorNodes.filter((n) => !Object.values(currentAssignments).includes(n.color) || n.color === draggedColor);
-                const itemsPerRow = 4;
-                const nodeIndex = unassignedColors.findIndex((n) => n.id === originalNode.id);
-                const row = Math.floor(nodeIndex / itemsPerRow);
-                const col = nodeIndex % itemsPerRow;
-                const originalPosition = { x: 50 + col * 200, y: 20 + row * 80 };
-                // Update node position
-                setNodes((prevNodes) => prevNodes.map((n) => (n.id === node.id ? { ...n, position: originalPosition } : n)));
-            }
-            draggedNodeOldRegionRef.current = null;
-        }
-        else {
-            // Drop outside any valid region - return to original position
-            // If it was assigned to a region, remove the assignment
-            if (draggedNodeOldRegionRef.current) {
-                setRegionAssignments((prev) => {
-                    const newAssignments = { ...prev };
-                    delete newAssignments[draggedNodeOldRegionRef.current];
-                    return newAssignments;
-                });
-            }
-            // Reset node position to original position
-            const originalNode = questionData.colorNodes.find((n) => n.color === draggedColor);
-            if (originalNode) {
-                const currentAssignments = draggedNodeOldRegionRef.current
-                    ? Object.fromEntries(Object.entries(regionAssignments).filter(([id]) => id !== draggedNodeOldRegionRef.current))
-                    : regionAssignments;
-                const unassignedColors = questionData.colorNodes.filter((n) => !Object.values(currentAssignments).includes(n.color) || n.color === draggedColor);
-                const itemsPerRow = 4;
-                const nodeIndex = unassignedColors.findIndex((n) => n.id === originalNode.id);
-                const row = Math.floor(nodeIndex / itemsPerRow);
-                const col = nodeIndex % itemsPerRow;
-                const originalPosition = { x: 50 + col * 200, y: 20 + row * 80 };
-                // Update node position
-                setNodes((prevNodes) => prevNodes.map((n) => (n.id === node.id ? { ...n, position: originalPosition } : n)));
-            }
-            // Clear the ref
-            draggedNodeOldRegionRef.current = null;
-        }
-        // Clear dragging flag
-        isDraggingNodeRef.current = false;
-    }, [getIntersectingNodes, regionAssignments, questionData.colorNodes, setNodes]);
-    // Memoize color nodes to avoid unnecessary recalculations
-    // Only show color nodes that are NOT assigned to any region (they will be shown in regions when assigned)
-    const colorFlowNodes = useMemo(() => {
-        if (!questionData.colorNodes || questionData.colorNodes.length === 0) {
-            return [];
-        }
-        // Filter out color nodes that are already assigned to regions
-        const unassignedColors = questionData.colorNodes.filter((node) => !Object.values(regionAssignments).includes(node.color));
-        const itemsPerRow = 4; // 4 items per row
-        return unassignedColors.map((node, index) => {
-            const row = Math.floor(index / itemsPerRow);
-            const col = index % itemsPerRow;
-            return {
-                id: node.id,
-                type: 'clientColorNode',
-                position: { x: 50 + col * 200, y: 20 + row * 80 },
-                data: {
-                    color: node.color,
-                    isEditMode: false,
-                    isConnected: false, // These are unassigned, so always false
-                    displayMode: 'compact',
-                    onRemove: () => {
-                        // Remove assignment when color node is removed
-                        const regionId = Object.keys(regionAssignments).find((id) => regionAssignments[id] === node.color);
-                        if (regionId) {
-                            setRegionAssignments((prev) => {
-                                const newAssignments = { ...prev };
-                                delete newAssignments[regionId];
-                                return newAssignments;
-                            });
-                        }
-                    },
-                },
-                draggable: true, // Enable dragging in client mode
-            };
-        });
-    }, [questionData.colorNodes, regionAssignments]);
-    // Memoize color nodes that are assigned to regions (render them inside regions for dragging)
-    const colorNodesInRegions = useMemo(() => {
-        if (!imageLoaded || imageDimensions.width <= 0)
-            return [];
-        return questionData.regionNodes
-            .filter((region) => regionAssignments[region.id]) // Only regions with assigned colors
-            .map((region) => {
-            const assignedColor = regionAssignments[region.id];
-            const colorNodeData = questionData.colorNodes.find((n) => n.color === assignedColor);
-            if (!colorNodeData)
-                return null;
-            // Position and size color node relative to region
-            const flowWidth = flowRef.current?.clientWidth || 0;
-            const startX = flowWidth > 0 && imageDimensions.width > 0
-                ? Math.max(50, (flowWidth - imageDimensions.width) / 2)
-                : 50;
-            const regionX = startX + (region.x / 100) * imageDimensions.width;
-            const regionY = imageStartY + (region.y / 100) * imageDimensions.height;
-            const regionWidth = (region.width / 100) * imageDimensions.width;
-            const regionHeight = (region.height / 100) * imageDimensions.height;
-            // Apply min dimensions to match ColorRegionNode behavior
-            const minWidth = 60;
-            const minHeight = 40;
-            const finalWidth = Math.max(regionWidth, minWidth);
-            const finalHeight = Math.max(regionHeight, minHeight);
-            return {
-                id: `color-in-region-${region.id}`,
-                type: 'clientColorNode',
-                position: {
-                    x: regionX,
-                    y: regionY,
-                },
-                data: {
-                    color: assignedColor,
-                    isEditMode: false,
-                    isConnected: true,
-                    regionId: region.id, // Store region ID for reference
-                    onRemove: () => handleRemoveColorFromRegion(region.id),
-                },
-                draggable: true,
-                width: finalWidth,
-                height: finalHeight,
-                style: {
-                    width: `${finalWidth}px`,
-                    height: `${finalHeight}px`,
-                    margin: 0,
-                    padding: 0,
-                    boxSizing: 'border-box',
-                },
-            };
-        })
-            .filter((node) => node !== null);
-    }, [
-        imageLoaded,
-        imageDimensions,
-        questionData.regionNodes,
-        questionData.colorNodes,
-        regionAssignments,
-        handleRemoveColorFromRegion,
-    ]);
-    // Memoize region nodes to avoid unnecessary recalculations
-    // Regions will be positioned on the image in the middle section
-    const regionFlowNodes = useMemo(() => {
-        if (!imageLoaded || imageDimensions.width <= 0)
-            return [];
-        // Calculate image position in the middle section
-        // Image starts after color nodes section (top ~200px) and is centered
-        const imageStartY = 200; // Start image after color nodes
-        const imageStartX = 50; // Left margin
-        const flowWidth = flowRef.current?.clientWidth || 0;
-        const imageLeft = flowWidth > 0 ? (flowWidth - imageDimensions.width) / 2 : imageStartX;
-        return questionData.regionNodes.map((region) => {
-            const savedColor = regionAssignments[region.id] || '';
-            return {
-                id: region.id,
-                type: 'clientColorRegionNode',
-                position: {
-                    x: imageLeft + (region.x / 100) * imageDimensions.width,
-                    y: imageStartY + (region.y / 100) * imageDimensions.height,
-                },
-                data: {
-                    color: region.color,
-                    x: region.x,
-                    y: region.y,
-                    width: region.width,
-                    height: region.height,
-                    isEditMode: false,
-                    isClientMode: true,
-                    savedColor: savedColor, // Only use assignments from client interactions
-                    onFillColor: (color) => handleFillRegionColor(region.id, color),
-                    onRemove: () => handleRemoveColorFromRegion(region.id), // Add remove handler for client mode
-                    isHighlighted: highlightedRegionId === region.id, // Pass highlight state
-                },
-                draggable: false,
-                style: {
-                    width: `${(region.width / 100) * imageDimensions.width}px`,
-                    height: `${(region.height / 100) * imageDimensions.height}px`,
-                    pointerEvents: (savedColor ? 'none' : 'auto'), // Disable pointer events when ColorNode is assigned
-                },
-                zIndex: 0, // Ensure regions are below color nodes
-            };
-        });
-    }, [
-        imageLoaded,
-        imageDimensions,
-        questionData.regionNodes,
-        regionAssignments,
-        handleFillRegionColor,
-        handleRemoveColorFromRegion,
-        highlightedRegionId,
-    ]);
-    // Update nodes when dependencies change
-    useEffect(() => {
-        // Skip updating nodes if we're currently dragging a node
-        // This prevents position reset during drag operations
-        if (isDraggingNodeRef.current) {
-            return;
-        }
-        // Don't include unassigned region as a React Flow node - render it as background instead
-        const allNodes = [...regionFlowNodes, ...colorFlowNodes, ...colorNodesInRegions];
-        setNodes(allNodes);
-    }, [
-        colorFlowNodes,
-        colorNodesInRegions,
-        regionFlowNodes,
-        setNodes,
-        imageLoaded,
-        imageDimensions,
-    ]);
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: config.clientTitle }), _jsx("p", { className: "text-sm text-gray-500", children: config.clientSubtitle })] }) }), questionData.instructions && questionData.instructions.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2.5", children: [_jsx("svg", { className: "h-5 w-5 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" }) }), _jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" })] }), _jsx("div", { className: "divide-y divide-gray-50 mt-2", children: questionData.instructions.map((instruction, index) => (_jsx("div", { className: "flex items-center gap-3 px-5 py-2 transition-colors hover:bg-gray-50", children: _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: [index + 1, ". ", instruction] }) }, index))) })] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg", children: [_jsx("div", { className: "border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-red-400" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-green-400" }), _jsx("span", { className: "ml-3 text-sm font-medium text-gray-500", children: "Workspace" })] }) }), _jsxs("div", { className: "relative bg-gradient-to-br from-slate-50 to-gray-100", style: { height: '800px', width: '100%' }, ref: flowRef, children: [_jsx("div", { className: "pointer-events-none absolute", style: {
-                                    left: `${imageStartX}px`,
-                                    top: `${imageStartY}px`,
-                                    width: imageDimensions.width ? `${imageDimensions.width}px` : 'auto',
-                                    height: imageDimensions.height ? `${imageDimensions.height}px` : 'auto',
-                                    zIndex: 0,
-                                }, children: isLoadingImage ? (_jsx("div", { className: "flex h-full w-full items-center justify-center text-gray-500", children: "\u0110ang t\u1EA3i h\u00ECnh \u1EA3nh..." })) : backgroundImagePreviewUrl ? (_jsx("img", { ref: imageRef, src: backgroundImagePreviewUrl, alt: "Background", className: "h-full w-full object-contain", style: imageDimensions.width && imageDimensions.height
-                                        ? {
-                                            width: `${imageDimensions.width}px`,
-                                            height: `${imageDimensions.height}px`,
-                                        }
-                                        : undefined, onLoad: handleImageLoad, onError: () => {
-                                        toast.error('Không thể load ảnh!');
-                                        setImageLoaded(false);
-                                    } })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-gray-500", children: "Kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh" })) }), _jsx(ReactFlow, { nodes: nodes, edges: [], onNodesChange: reactFlowOnNodesChange, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onEdgesChange: onEdgesChange, nodeTypes: nodeTypes, defaultViewport: { x: 0, y: 0, zoom: 1 }, fitView: false, nodesDraggable: true, nodesConnectable: false, elementsSelectable: false, panOnDrag: false, panOnScroll: false, zoomOnScroll: false, zoomOnDoubleClick: false, zoomOnPinch: false, preventScrolling: true, autoPanOnNodeDrag: false, autoPanOnConnect: false, proOptions: { hideAttribution: true }, style: {
-                                    width: '100%',
-                                    height: '100%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    zIndex: 10,
-                                }, children: _jsx(Background, {}) })] })] }), isReviewMode && explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
-}
-export function ColorRegionClient(props) {
-    return (_jsx(ReactFlowProvider, { children: _jsx(ColorRegionClientContent, { ...props }) }));
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as o,useCallback as n,useMemo as l}from"react";import{toast as d}from"sonner";import{ReactFlow as s,Background as a,useNodesState as c,useEdgesState as h,ReactFlowProvider as u,useReactFlow as g}from"@xyflow/react";import"@xyflow/react/dist/style.css";import{Lightbulb as m}from"lucide-react";import{ColorNode as f}from"./ColorNode";import{ColorRegionNode as p}from"./ColorRegionNode";import{usePresignedFileUrl as x}from"../../../shared/lib/hooks";const y={clientColorNode:t=>e(f,{...t,variant:"client"}),clientColorRegionNode:t=>e(p,{...t})};function N({questionData:u,explanation:f,isReviewMode:p=!1,config:N}){const[b,w]=i(!1),[v,C]=i({width:0,height:0}),{previewUrl:M,isLoading:j}=x(u.backgroundImageUrl),O=r(null),k=r(null),[R,S,$]=c([]),[,,E]=h([]),[I,z]=i({}),D=n((e,t)=>{z(i=>({...i,[e]:t}))},[]),H=n(e=>{const t=I[e];t&&(z(t=>{const i={...t};return delete i[e],i}),S(e=>e.map(e=>e.data?.color===t?{...e,data:{...e.data,isConnected:!1}}:e)))},[I,S]),[W,F]=i(null),{getIntersectingNodes:L}=g(),P=(()=>{if(!b||v.width<=0)return 50;const e=k.current?.clientWidth||0;if(!e)return 50;const t=(e-v.width)/2;return Math.max(50,t)})(),V=r(!1),B=r(null),K=n((e,t)=>{if("clientColorNode"!==t.type)return;V.current=!0;const i=t.data?.color;if(!i||"string"!=typeof i)return;const r=t.data?.regionId,o=r||Object.keys(I).find(e=>I[e]===i);B.current=o||null,o&&(z(e=>{const t={...e};return delete t[o],t}),S(e=>e.map(e=>e.id!==o||"clientColorRegionNode"!==e.type?e:{...e,data:{...e.data,savedColor:""},style:{...e.style,pointerEvents:"auto"}})))},[I,S]),T=n((e,t)=>{if("clientColorNode"!==t.type)return;const i=t.data?.color;if(!i||"string"!=typeof i)return void F(null);const r=e=>{if("number"==typeof e)return Number.isFinite(e)?e:null;if("string"==typeof e){const t=parseFloat(e);return Number.isFinite(t)?t:null}return null},o=(e,t)=>{const i=t in e?e[t]:null;if("number"==typeof i&&Number.isFinite(i))return i;const o=e.measured?e.measured[t]:void 0;return r(o)},n=L(t,!0),l=n.filter(e=>"clientColorNode"===e.type).map(e=>e.id),d=n.filter(e=>"clientColorRegionNode"===e.type&&"unassigned-region"!==e.id),s=t.position.y,a=s>=0&&s<=100;d.length>0?(F(d[0].id),l.includes(t.id)||l.push(t.id)):F(a?"unassigned-region":null),S(e=>e.map(e=>"clientColorNode"===e.type?{...e,data:{...e.data,highlightClass:l.includes(e.id)||e.id===t.id?"":void 0,highlightStyle:l.includes(e.id)&&e.id===t.id&&d.length>0?(()=>{const t=(e=>{if(v.width<=0||v.height<=0)return null;const t=r(e.style?.width),i=r(e.style?.height);if(t&&i)return{width:Math.max(t,60),height:Math.max(i,40)};const o=e.data;return void 0===o?.width||void 0===o?.height||"number"!=typeof o.width||"number"!=typeof o.height?null:{width:Math.max(o.width/100*v.width,60),height:Math.max(o.height/100*v.height,40)}})(d[0]),i=o(e,"width"),n=o(e,"height");if(t&&i&&n)return{transform:`scale(${Number(t.width)/Number(i)}, ${Number(t.height)/Number(n)})`,transformOrigin:"center center",transition:"transform 180ms ease-out"}})():void 0,isHighlighted:l.includes(e.id)}}:e))},[L,v,S]),U=n((e,t)=>{if("clientColorNode"!==t.type)return;S(e=>e.map(e=>"clientColorNode"===e.type?{...e,data:{...e.data,highlightClass:void 0,highlightStyle:void 0,isHighlighted:!1}}:e));const i=t.data?.color;if(!i||"string"!=typeof i)return void F(null);const r=L(t,!0).filter(e=>"clientColorRegionNode"===e.type&&"unassigned-region"!==e.id),o=t.position.y,n=o>=0&&o<=100;if(F(null),r.length>0){const e=r[0],t=B.current,o=I[e.id];z(o&&o!==i?r=>{const n={...r};return n[e.id]=i,t&&(n[t]=o),n}:t=>({...t,[e.id]:i})),B.current=null}else if(n){const e=B.current;e&&z(t=>{const i={...t};return delete i[e],i});const r=u.colorNodes.find(e=>e.color===i);if(r){const o=e?Object.fromEntries(Object.entries(I).filter(([t])=>t!==e)):I,n=4,l=u.colorNodes.filter(e=>!Object.values(o).includes(e.color)||e.color===i).findIndex(e=>e.id===r.id),d={x:50+200*(l%n),y:20+80*Math.floor(l/n)};S(e=>e.map(e=>e.id===t.id?{...e,position:d}:e))}B.current=null}else{B.current&&z(e=>{const t={...e};return delete t[B.current],t});const e=u.colorNodes.find(e=>e.color===i);if(e){const r=B.current?Object.fromEntries(Object.entries(I).filter(([e])=>e!==B.current)):I,o=4,n=u.colorNodes.filter(e=>!Object.values(r).includes(e.color)||e.color===i).findIndex(t=>t.id===e.id),l={x:50+200*(n%o),y:20+80*Math.floor(n/o)};S(e=>e.map(e=>e.id===t.id?{...e,position:l}:e))}B.current=null}V.current=!1},[L,I,u.colorNodes,S]),q=l(()=>{if(!u.colorNodes||0===u.colorNodes.length)return[];const e=u.colorNodes.filter(e=>!Object.values(I).includes(e.color));return e.map((e,t)=>{const i=Math.floor(t/4),r=t%4;return{id:e.id,type:"clientColorNode",position:{x:50+200*r,y:20+80*i},data:{color:e.color,isEditMode:!1,isConnected:!1,displayMode:"compact",onRemove:()=>{const t=Object.keys(I).find(t=>I[t]===e.color);t&&z(e=>{const i={...e};return delete i[t],i})}},draggable:!0}})},[u.colorNodes,I]),A=l(()=>!b||v.width<=0?[]:u.regionNodes.filter(e=>I[e.id]).map(e=>{const t=I[e.id];if(!u.colorNodes.find(e=>e.color===t))return null;const i=k.current?.clientWidth||0,r=(i>0&&v.width>0?Math.max(50,(i-v.width)/2):50)+e.x/100*v.width,o=200+e.y/100*v.height,n=e.width/100*v.width,l=e.height/100*v.height,d=Math.max(n,60),s=Math.max(l,40);return{id:`color-in-region-${e.id}`,type:"clientColorNode",position:{x:r,y:o},data:{color:t,isEditMode:!1,isConnected:!0,regionId:e.id,onRemove:()=>H(e.id)},draggable:!0,width:d,height:s,style:{width:`${d}px`,height:`${s}px`,margin:0,padding:0,boxSizing:"border-box"}}}).filter(e=>null!==e),[b,v,u.regionNodes,u.colorNodes,I,H]),G=l(()=>{if(!b||v.width<=0)return[];const e=k.current?.clientWidth||0,t=e>0?(e-v.width)/2:50;return u.regionNodes.map(e=>{const i=I[e.id]||"";return{id:e.id,type:"clientColorRegionNode",position:{x:t+e.x/100*v.width,y:200+e.y/100*v.height},data:{color:e.color,x:e.x,y:e.y,width:e.width,height:e.height,isEditMode:!1,isClientMode:!0,savedColor:i,onFillColor:t=>D(e.id,t),onRemove:()=>H(e.id),isHighlighted:W===e.id},draggable:!1,style:{width:e.width/100*v.width+"px",height:e.height/100*v.height+"px",pointerEvents:i?"none":"auto"},zIndex:0}})},[b,v,u.regionNodes,I,D,H,W]);return o(()=>{if(V.current)return;const e=[...G,...q,...A];S(e)},[q,A,G,S,b,v]),t("div",{className:"space-y-4",children:[e("div",{className:"flex items-center justify-between",children:t("div",{children:[e("h2",{className:"text-lg font-semibold text-gray-900",children:N.clientTitle}),e("p",{className:"text-sm text-gray-500",children:N.clientSubtitle})]})}),u.instructions&&u.instructions.length>0&&t("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm",children:[t("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2.5",children:[e("svg",{className:"h-5 w-5 text-blue-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"})}),e("h3",{className:"text-sm font-semibold text-gray-800",children:"Hướng dẫn"})]}),e("div",{className:"divide-y divide-gray-50 mt-2",children:u.instructions.map((i,r)=>e("div",{className:"flex items-center gap-3 px-5 py-2 transition-colors hover:bg-gray-50",children:t("span",{className:"text-sm font-semibold text-gray-700",children:[r+1,". ",i]})},r))})]}),t("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg",children:[e("div",{className:"border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-2.5 w-2.5 rounded-full bg-red-400"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-yellow-400"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-green-400"}),e("span",{className:"ml-3 text-sm font-medium text-gray-500",children:"Workspace"})]})}),t("div",{className:"relative bg-gradient-to-br from-slate-50 to-gray-100",style:{height:"800px",width:"100%"},ref:k,children:[e("div",{className:"pointer-events-none absolute",style:{left:`${P}px`,top:"200px",width:v.width?`${v.width}px`:"auto",height:v.height?`${v.height}px`:"auto",zIndex:0},children:j?e("div",{className:"flex h-full w-full items-center justify-center text-gray-500",children:"Đang tải hình ảnh..."}):M?e("img",{ref:O,src:M,alt:"Background",className:"h-full w-full object-contain",style:v.width&&v.height?{width:`${v.width}px`,height:`${v.height}px`}:void 0,onLoad:()=>{if(O.current&&k.current){const e=k.current.clientWidth-100,t=k.current.clientHeight-260,i=O.current.naturalWidth||O.current.clientWidth,r=O.current.naturalHeight||O.current.clientHeight,o=e/i,n=t/r,l=Math.min(o,n,1);C({width:i*l,height:r*l}),w(!0)}},onError:()=>{d.error("Không thể load ảnh!"),w(!1)}}):e("div",{className:"flex h-full w-full items-center justify-center text-gray-500",children:"Không có hình ảnh"})}),e(s,{nodes:R,edges:[],onNodesChange:$,onNodeDragStart:K,onNodeDrag:T,onNodeDragStop:U,onEdgesChange:E,nodeTypes:y,defaultViewport:{x:0,y:0,zoom:1},fitView:!1,nodesDraggable:!0,nodesConnectable:!1,elementsSelectable:!1,panOnDrag:!1,panOnScroll:!1,zoomOnScroll:!1,zoomOnDoubleClick:!1,zoomOnPinch:!1,preventScrolling:!0,autoPanOnNodeDrag:!1,autoPanOnConnect:!1,proOptions:{hideAttribution:!0},style:{width:"100%",height:"100%",position:"absolute",top:0,left:0,zIndex:10},children:e(a,{})})]})]}),p&&f&&e("div",{className:"rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200",children:t("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(m,{className:"h-3.5 w-3.5"})}),t("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:f})]})]})})]})}export function ColorRegionClient(t){return e(u,{children:e(N,{...t})})}