Fix tree hover (#1429)

There were two problems here. 1 hover out provided item selector which actually made it hovered. And outline was not reset when hover selector is reset.
webstudio-is · Apr 12, 2023 · 1c0faf7 · 1c0faf7
1 parent 4559779
commit 1c0faf7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/apps/builder/app/canvas/instance-hovering.ts b/apps/builder/app/canvas/instance-hovering.ts
@@ -83,12 +83,13 @@ export const subscribeInstanceHovering = () => {
   // update rect whenever hovered instance is changed
   const unsubscribeHoveredInstanceId = hoveredInstanceSelectorStore.subscribe(
     (instanceSelector) => {
-      if (instanceSelector === undefined) {
-        return;
-      }
-      const element = getElementByInstanceSelector(instanceSelector);
-      if (element !== undefined) {
-        updateHoveredRect(element);
+      if (instanceSelector) {
+        const element = getElementByInstanceSelector(instanceSelector);
+        if (element !== undefined) {
+          updateHoveredRect(element);
+        }
+      } else {
+        hoveredInstanceOutlineStore.set(undefined);
       }
     }
   );

diff --git a/packages/design-system/src/components/tree/tree-node.tsx b/packages/design-system/src/components/tree/tree-node.tsx
@@ -248,8 +248,7 @@ const useScrollIntoView = (
 };
 
 export type TreeItemRenderProps<Data extends { id: string }> = {
-  onMouseEnter?: (itemSelector: ItemSelector) => void;
-  onMouseLeave?: (itemSelector: ItemSelector) => void;
+  onHover?: (itemSelector?: ItemSelector) => void;
   itemData: Data;
   itemSelector: ItemSelector;
   dropTargetItemSelector?: ItemSelector;
@@ -268,8 +267,7 @@ export const TreeItemBody = <Data extends { id: string }>({
   parentIsSelected = false,
   isSelected = false,
   dropTargetItemSelector,
-  onMouseEnter,
-  onMouseLeave,
+  onHover,
   itemData,
   itemSelector,
   level,
@@ -332,8 +330,8 @@ export const TreeItemBody = <Data extends { id: string }>({
 
   return (
     <ItemContainer
-      onMouseEnter={onMouseEnter && (() => onMouseEnter(itemSelector))}
-      onMouseLeave={onMouseLeave && (() => onMouseLeave(itemSelector))}
+      onMouseEnter={onHover && (() => onHover(itemSelector))}
+      onMouseLeave={onHover && (() => onHover())}
       isSelected={isSelected}
       parentIsSelected={parentIsSelected}
       enableHoverState={isDragging === false}
@@ -411,8 +409,7 @@ export type TreeNodeProps<Data extends { id: ItemId }> = {
 
   parentIsSelected?: boolean;
   onSelect?: (itemSelector: ItemSelector) => void;
-  onMouseEnter?: (itemSelector: ItemSelector) => void;
-  onMouseLeave?: (itemSelector: ItemSelector) => void;
+  onHover?: (itemSelector?: ItemSelector) => void;
 
   animate?: boolean;
 
@@ -432,8 +429,7 @@ export const TreeNode = <Data extends { id: string }>({
     setIsExpanded,
     selectedItemSelector,
     onSelect,
-    onMouseEnter,
-    onMouseLeave,
+    onHover,
     onExpandTransitionEnd,
     dropTargetItemSelector,
     renderItem,
@@ -489,8 +485,7 @@ export const TreeNode = <Data extends { id: string }>({
       {itemIsHidden === false &&
         renderItem({
           dropTargetItemSelector,
-          onMouseEnter,
-          onMouseLeave,
+          onHover,
           itemData,
           itemSelector,
           parentIsSelected,

diff --git a/packages/design-system/src/components/tree/tree.tsx b/packages/design-system/src/components/tree/tree.tsx
@@ -295,8 +295,7 @@ export const Tree = <Data extends { id: string }>({
           isItemHidden={isItemHidden}
           animate={animate}
           onSelect={onSelect}
-          onMouseEnter={onHover}
-          onMouseLeave={onHover}
+          onHover={onHover}
           selectedItemSelector={selectedItemSelector}
           itemData={root}
           getIsExpanded={getIsExpanded}