feat: add dynamic entity color generation and support for reassigning geometry IDs

src/uhm/components/editor/ProjectEntityRefsPanel.tsx

@@ -5,6 +5,7 @@ import type { EntitySnapshot } from "@/uhm/types/entities";
 import { useShallow } from "zustand/react/shallow";
 import NewBadge from "@/uhm/components/editor/NewBadge";
 import { useEditorStore } from "@/uhm/store/editorStore";
+import { newId } from "@/uhm/lib/utils/id";
 
 type Props = {
   onCreateEntityOnly: () => void;
@@ -12,6 +13,7 @@ type Props = {
   hasSelectedGeometry?: boolean;
   selectedGeometryTime?: { time_start: number | null; time_end: number | null } | null;
   onToggleBindEntityForSelectedGeometry?: (entityId: string, nextChecked: boolean) => void;
+  onRerollEntityId?: (oldId: string, nextId: string) => void;
 };
 
 export default function ProjectEntityRefsPanel({
@@ -20,6 +22,7 @@ export default function ProjectEntityRefsPanel({
   hasSelectedGeometry,
   selectedGeometryTime,
   onToggleBindEntityForSelectedGeometry,
+  onRerollEntityId,
 }: Props) {
   const {
     snapshotEntityRows,
@@ -282,8 +285,35 @@ export default function ProjectEntityRefsPanel({
             </div>
           </div>
 
-          <div style={{ fontSize: 11, color: "#94a3b8", overflowWrap: "anywhere" }}>
-            {String(activeEntity.id)}
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
+            <div style={{ fontSize: 11, color: "#94a3b8", overflowWrap: "anywhere", minWidth: 0, flex: 1 }}>
+              {String(activeEntity.id)}
+            </div>
+            {activeEntity.source === "inline" && onRerollEntityId && (
+              <button
+                type="button"
+                onClick={() => {
+                  const nextId = newId();
+                  onRerollEntityId(String(activeEntity.id), nextId);
+                  setActiveEntityId(nextId);
+                }}
+                disabled={isEntitySubmitting}
+                title="Đổi mã ID để sinh ngẫu nhiên màu sắc mới cho thực thể này"
+                style={{
+                  border: "1px solid #0f766e",
+                  borderRadius: "4px",
+                  padding: "2px 6px",
+                  background: "transparent",
+                  color: "#14b8a6",
+                  fontSize: "11px",
+                  cursor: isEntitySubmitting ? "not-allowed" : "pointer",
+                  whiteSpace: "nowrap",
+                  flex: "0 0 auto",
+                }}
+              >
+                Đổi màu (Reroll ID)
+              </button>
+            )}
           </div>
           <input
             value={editName}

src/uhm/components/editor/SelectedGeometryPanel.tsx

@@ -20,6 +20,7 @@ type Props = {
     onReplayEdit?: (id: string | number) => void;
     onDeleteFeatures?: (ids: (string | number)[]) => void;
     onDeselectAll?: () => void;
+    onRerollGeometryId?: (oldId: string | number) => void;
 };
 
 export default function SelectedGeometryPanel({
@@ -29,6 +30,7 @@ export default function SelectedGeometryPanel({
     onReplayEdit,
     onDeleteFeatures,
     onDeselectAll,
+    onRerollGeometryId,
 }: Props) {
     const {
         geometryMetaForm,
@@ -221,8 +223,30 @@ export default function SelectedGeometryPanel({
                         <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: "12px" }}>
                             Thuộc tính GEO
                         </div>
-                        <div style={{ color: "#94a3b8", fontSize: "11px" }}>
-                            Các giá trị này thuộc về GEO đang chọn, không phụ thuộc entity.
+                        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}>
+                            <div style={{ color: "#94a3b8", fontSize: "11px", overflowWrap: "anywhere", minWidth: 0, flex: 1 }}>
+                                {isBulkMode ? `Đang chọn ${selectedFeatures.length} geometries` : `ID: ${representativeFeature.properties.id}`}
+                            </div>
+                            {!isBulkMode && onRerollGeometryId && (
+                                <button
+                                    type="button"
+                                    onClick={() => onRerollGeometryId(representativeFeature.properties.id)}
+                                    title="Đổi mã ID để sinh ngẫu nhiên màu sắc mới cho hình học này"
+                                    style={{
+                                        border: "1px solid #0f766e",
+                                        borderRadius: "4px",
+                                        padding: "2px 6px",
+                                        background: "transparent",
+                                        color: "#14b8a6",
+                                        fontSize: "11px",
+                                        cursor: "pointer",
+                                        whiteSpace: "nowrap",
+                                        flex: "0 0 auto",
+                                    }}
+                                >
+                                    Đổi màu (Reroll ID)
+                                </button>
+                            )}
                         </div>
 
                         {!isMultiEditValid ? (