Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add focus button to TreeNode and adjust Outline component state

Browse Source
This commit is contained in:
Vishnu
2025-10-08 09:10:00 +05:30
parent 4764585536
commit a55d25e55b
2 changed files with 89 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/src/modules/builder/testUi/outline.tsx
View File

@@ -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 { groupHierarchy, isGroup, getGroupsContainingAsset, getFlatGroupChildren, setGroupExpanded, addChildToGroup, removeChildFromGroup, getGroupsContainingGroup } = assetGroupStore();
const {
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)) {
}

1
app/src/styles/layout/_assetOutline.scss
View File

@@ -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;