Add focus button to TreeNode and adjust Outline component state

app/src/modules/builder/testUi/outline.tsx

@@ -9,6 +9,7 @@ import {
     AddIcon,
     KebebIcon,
     CollapseAllIcon,
+    FocusIcon,
 } from "../../../components/icons/ExportCommonIcons";
 import RenameInput from "../../../components/ui/inputs/RenameInput";
 import { useSceneContext } from "../../scene/sceneContext";
@@ -18,6 +19,7 @@ import useAssetResponseHandler from "../../collaboration/responseHandler/useAsse
 import { getUserData } from "../../../functions/getUserData";
 import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
 import clsx from "clsx";
+import { useContextActionStore } from "../../../store/builder/store";
 
 interface DragState {
     draggedItem: AssetGroupChild | null;
@@ -121,7 +123,10 @@ const TreeNode = ({
     const shouldShowHighlight = isDropTarget();
 
     return (
-        <div key={itemId} className={`tree-node ${shouldShowHighlight ? "drop-target-highlight" : ""}`}>
+        <div
+            key={itemId}
+            className={`tree-node ${shouldShowHighlight ? "drop-target-highlight" : ""}`}
+        >
             <div
                 className={clsx("tree-node-content", {
                     locked: isLocked,
@@ -163,6 +168,15 @@ const TreeNode = ({
                     >
                         <EyeIcon isClosed={!isVisible} />
                     </button>
+                    <button
+                        className="control-button"
+                        title={isLocked ? "Locked" : "Unlocked"}
+                        onClick={(e) => {
+                            handleOptionClick(e, "focus");
+                        }}
+                    >
+                        <FocusIcon />
+                    </button>
                     <button
                         className="control-button"
                         title={isLocked ? "Locked" : "Unlocked"}
@@ -217,7 +231,8 @@ const TreeNode = ({
 
 // Main Component
 export const Outline = () => {
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(true);
+    const { setContextAction } = useContextActionStore();
     const lastSelectedRef = useRef<{ item: AssetGroupChild; index: number } | null>(null);
     const dragStateRef = useRef<DragState>({
         draggedItem: null,
@@ -227,8 +242,25 @@ export const Outline = () => {
     });
     const [_, forceUpdate] = useState({});
     const { scene, assetGroupStore, assetStore, versionStore, undoRedo3DStore } = useSceneContext();
-    const { addSelectedAsset, clearSelectedAssets, getAssetById, peekToggleVisibility, peekToggleLock, toggleSelectedAsset, selectedAssets } = assetStore();
+    const {
-    const { groupHierarchy, isGroup, getGroupsContainingAsset, getFlatGroupChildren, setGroupExpanded, addChildToGroup, removeChildFromGroup, getGroupsContainingGroup } = assetGroupStore();
+        addSelectedAsset,
+        clearSelectedAssets,
+        getAssetById,
+        peekToggleVisibility,
+        peekToggleLock,
+        toggleSelectedAsset,
+        selectedAssets,
+    } = assetStore();
+    const {
+        groupHierarchy,
+        isGroup,
+        getGroupsContainingAsset,
+        getFlatGroupChildren,
+        setGroupExpanded,
+        addChildToGroup,
+        removeChildFromGroup,
+        getGroupsContainingGroup,
+    } = assetGroupStore();
     const { projectId } = useParams();
     const { push3D } = undoRedo3DStore();
     const { builderSocket } = useSocketStore();
@@ -355,7 +387,11 @@ export const Outline = () => {
             })
                 .then((data) => {
                     if (!data.message || !data.data) {
-                        echo.error(`Error ${asset.isVisible ? "locking" : "unlocking"} asset: ${asset.modelName}`);
+                        echo.error(
+                            `Error ${asset.isVisible ? "locking" : "unlocking"} asset: ${
+                                asset.modelName
+                            }`
+                        );
                         return;
                     }
                     if (data.message === "Model updated successfully" && data.data) {
@@ -374,14 +410,26 @@ export const Outline = () => {
                         };
 
                         updateAssetInScene(model, () => {
-                            echo.info(`${asset.isVisible ? "Locked" : "Unlocked"} asset: ${model.modelName}`);
+                            echo.info(
+                                `${asset.isVisible ? "Locked" : "Unlocked"} asset: ${
+                                    model.modelName
+                                }`
+                            );
                         });
                     } else {
-                        echo.error(`Error ${asset.isVisible ? "locking" : "unlocking"} asset: ${asset.modelName}`);
+                        echo.error(
+                            `Error ${asset.isVisible ? "locking" : "unlocking"} asset: ${
+                                asset.modelName
+                            }`
+                        );
                     }
                 })
                 .catch(() => {
-                    echo.error(`Error ${asset.isVisible ? "locking" : "unlocking"} asset: ${asset.modelName}`);
+                    echo.error(
+                        `Error ${asset.isVisible ? "locking" : "unlocking"} asset: ${
+                            asset.modelName
+                        }`
+                    );
                 });
         } else {
             const data = {
@@ -683,7 +731,14 @@ export const Outline = () => {
                 });
             }
         },
-        [scene, isGroup, clearSelectedAssets, addSelectedAsset, getFlattenedHierarchy, toggleSelectedAsset]
+        [
+            scene,
+            isGroup,
+            clearSelectedAssets,
+            addSelectedAsset,
+            getFlattenedHierarchy,
+            toggleSelectedAsset,
+        ]
     );
 
     const handleOptionClick = useCallback(
@@ -711,9 +766,17 @@ export const Outline = () => {
 
                     if (assetsToUpdate.length > 0) {
                         if (assetsToUpdate.length === 1) {
-                            undoActions.push({ module: "builder", actionType: "Asset-Update", asset: assetsToUpdate[0] });
+                            undoActions.push({
+                                module: "builder",
+                                actionType: "Asset-Update",
+                                asset: assetsToUpdate[0],
+                            });
                         } else {
-                            undoActions.push({ module: "builder", actionType: "Assets-Update", assets: assetsToUpdate });
+                            undoActions.push({
+                                module: "builder",
+                                actionType: "Assets-Update",
+                                assets: assetsToUpdate,
+                            });
                         }
 
                         push3D({
@@ -745,9 +808,17 @@ export const Outline = () => {
 
                     if (assetsToUpdate.length > 0) {
                         if (assetsToUpdate.length === 1) {
-                            undoActions.push({ module: "builder", actionType: "Asset-Update", asset: assetsToUpdate[0] });
+                            undoActions.push({
+                                module: "builder",
+                                actionType: "Asset-Update",
+                                asset: assetsToUpdate[0],
+                            });
                         } else {
-                            undoActions.push({ module: "builder", actionType: "Assets-Update", assets: assetsToUpdate });
+                            undoActions.push({
+                                module: "builder",
+                                actionType: "Assets-Update",
+                                assets: assetsToUpdate,
+                            });
                         }
 
                         push3D({
@@ -756,6 +827,11 @@ export const Outline = () => {
                         });
                     }
                 }
+            } else if (option === "focus") {
+                if (isGroup(item)) {
+                } else {
+                    setContextAction("focusAsset");
+                }
             } else if (option === "kebab") {
                 if (isGroup(item)) {
                 }

app/src/styles/layout/_assetOutline.scss

@@ -147,7 +147,6 @@
         gap: 6px;
         padding: 6px 12px;
         border-radius: $border-radius-medium;
-        cursor: grab;
         transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
         background: transparent;
         position: relative;