@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

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

@@ -1 +1,545 @@
-"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})})}
+'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 }) }));
+}