From 549bfb3f29bd38c6439aebbc044a272c1de9dc2d Mon Sep 17 00:00:00 2001
From: wass08 <wass08@gmail.com>
Date: Mon, 2 Feb 2026 10:33:36 +0900
Subject: [PATCH] handle visible/invisible items

---
 .../ui/sidebar/panels/site-panel/ceiling-tree-node.tsx       | 1 +
 .../ui/sidebar/panels/site-panel/item-tree-node.tsx          | 1 +
 .../ui/sidebar/panels/site-panel/roof-tree-node.tsx          | 1 +
 .../ui/sidebar/panels/site-panel/slab-tree-node.tsx          | 1 +
 .../components/ui/sidebar/panels/site-panel/tree-node.tsx    | 5 ++++-
 .../ui/sidebar/panels/site-panel/wall-tree-node.tsx          | 1 +
 .../viewer/src/components/renderers/item/item-renderer.tsx   | 2 +-
 .../viewer/src/components/renderers/roof/roof-renderer.tsx   | 1 +
 .../viewer/src/components/renderers/slab/slab-renderer.tsx   | 2 +-
 .../viewer/src/components/renderers/wall/wall-renderer.tsx   | 2 +-
 10 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx
index ea87fb74..017d4dba 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx
@@ -59,6 +59,7 @@ export function CeilingTreeNode({ node, depth }: CeilingTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       >
         {node.children.map((childId) => (
diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/item-tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/item-tree-node.tsx
index d64b53e3..3443ce30 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/item-tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/item-tree-node.tsx
@@ -67,6 +67,7 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       />
     </RenamePopover>
diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx
index 26f2ac0b..026020bf 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx
@@ -59,6 +59,7 @@ export function RoofTreeNode({ node, depth }: RoofTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       />
     </RenamePopover>
diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
index 86c43860..9c222102 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
@@ -58,6 +58,7 @@ export function SlabTreeNode({ node, depth }: SlabTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       />
     </RenamePopover>
diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/tree-node.tsx
index f5a447fc..a7f829f9 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/tree-node.tsx
@@ -58,6 +58,7 @@ interface TreeNodeWrapperProps {
   children?: React.ReactNode;
   isSelected?: boolean;
   isHovered?: boolean;
+  isVisible?: boolean;
 }
 
 export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
@@ -77,6 +78,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
       children,
       isSelected,
       isHovered,
+      isVisible = true,
     },
     ref
   ) {
@@ -89,7 +91,8 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
               ? "text-primary-foreground bg-primary/80 hover:bg-primary/90"
               : isHovered
                 ? "bg-accent/70 text-foreground"
-                : "text-muted-foreground hover:bg-accent/50"
+                : "text-muted-foreground hover:bg-accent/50",
+            !isVisible && "opacity-50"
           )}
           style={{ paddingLeft: depth * 12 + 4 }}
           onMouseEnter={onMouseEnter}
diff --git a/apps/editor/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx b/apps/editor/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx
index a5a4625e..e55b9bc1 100644
--- a/apps/editor/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx
+++ b/apps/editor/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx
@@ -62,6 +62,7 @@ export function WallTreeNode({ node, depth }: WallTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       >
         {node.children.map((childId) => (
diff --git a/packages/viewer/src/components/renderers/item/item-renderer.tsx b/packages/viewer/src/components/renderers/item/item-renderer.tsx
index 563742fd..ad07d14a 100644
--- a/packages/viewer/src/components/renderers/item/item-renderer.tsx
+++ b/packages/viewer/src/components/renderers/item/item-renderer.tsx
@@ -37,7 +37,7 @@ export const ItemRenderer = ({ node }: { node: ItemNode }) => {
   useRegistry(node.id, node.type, ref)
 
   return (
-    <group position={node.position} rotation={node.rotation} ref={ref}>
+    <group position={node.position} rotation={node.rotation} ref={ref} visible={node.visible}>
       <Suspense>
         <ModelRenderer node={node} />
       </Suspense>
diff --git a/packages/viewer/src/components/renderers/roof/roof-renderer.tsx b/packages/viewer/src/components/renderers/roof/roof-renderer.tsx
index 31156860..fcdd063f 100644
--- a/packages/viewer/src/components/renderers/roof/roof-renderer.tsx
+++ b/packages/viewer/src/components/renderers/roof/roof-renderer.tsx
@@ -17,6 +17,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
       receiveShadow
       position={node.position}
       rotation-y={node.rotation}
+      visible={node.visible}
       {...handlers}
     >
       {/* RoofSystem will replace this geometry in the next frame */}
diff --git a/packages/viewer/src/components/renderers/slab/slab-renderer.tsx b/packages/viewer/src/components/renderers/slab/slab-renderer.tsx
index e7207eab..5390fc08 100644
--- a/packages/viewer/src/components/renderers/slab/slab-renderer.tsx
+++ b/packages/viewer/src/components/renderers/slab/slab-renderer.tsx
@@ -11,7 +11,7 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const handlers = useNodeEvents(node, 'slab')
 
   return (
-    <mesh ref={ref} castShadow receiveShadow {...handlers}>
+    <mesh ref={ref} castShadow receiveShadow {...handlers} visible={node.visible}>
       {/* SlabSystem will replace this geometry in the next frame */}
       <boxGeometry args={[0, 0, 0]} />
       <meshStandardMaterial color="#e5e5e5" />
diff --git a/packages/viewer/src/components/renderers/wall/wall-renderer.tsx b/packages/viewer/src/components/renderers/wall/wall-renderer.tsx
index 3895c20c..436e324a 100644
--- a/packages/viewer/src/components/renderers/wall/wall-renderer.tsx
+++ b/packages/viewer/src/components/renderers/wall/wall-renderer.tsx
@@ -12,7 +12,7 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
   const handlers = useNodeEvents(node, 'wall')
 
   return (
-    <mesh ref={ref} castShadow receiveShadow>
+    <mesh ref={ref} castShadow receiveShadow visible={node.visible}>
       {/* WallSystem will replace this geometry in the next frame */}
       <boxGeometry args={[0, 0, 0]} />
       <meshStandardMaterial color="lightgray"  />