add hover / select / hightlight to frame title hud

Author: softmarshmallow

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -47,6 +47,11 @@ const default_canvas_preferences: CanvsPreferences = {
   can_highlight_selected_layer: false,
 };
 
+interface HovringNode {
+  node: ReflectSceneNode;
+  reason: "frame-title" | "raycast" | "external";
+}
+
 export function Canvas({
   renderItem,
   onSelectNode,
@@ -68,12 +73,14 @@ export function Canvas({
   const [xy, setXY] = useState<[number, number]>(INITIAL_XY);
   const [isPanning, setIsPanning] = useState(false);
 
+  const node = (id) => designq.find_node_by_id_under_inpage_nodes(id, nodes);
+
   const wshighlight = highlightedLayer
-    ? designq.find_node_by_id_under_inpage_nodes(highlightedLayer, nodes)
+    ? ({ node: node(highlightedLayer), reason: "external" } as HovringNode)
     : null;
 
   const [hoveringLayer, setHoveringLayer] =
-    useState<ReflectSceneNode | null>(wshighlight);
+    useState<HovringNode | null>(wshighlight);
 
   useEffect(() => {
     setHoveringLayer(wshighlight);
@@ -92,15 +99,33 @@ export function Canvas({
       offset: xy,
       margin: LAYER_HOVER_HIT_MARGIN,
     });
-    setHoveringLayer(hovering);
+
+    if (!hovering) {
+      if (
+        hoveringLayer &&
+        hoveringLayer.node &&
+        hoveringLayer.reason === "frame-title"
+      ) {
+        // skip
+      } else {
+        setHoveringLayer(null);
+      }
+    } else {
+      setHoveringLayer({ node: hovering, reason: "raycast" });
+    }
   };
 
   const onPointerDown: OnPointerDownHandler = (state) => {
     if (isPanning || isZooming) {
       return;
     }
     if (hoveringLayer) {
-      onSelectNode(hoveringLayer);
+      switch (hoveringLayer.reason) {
+        case "frame-title":
+        case "raycast":
+          onSelectNode(hoveringLayer.node);
+          break;
+      }
     } else {
       onClearSelection();
     }
@@ -176,23 +201,29 @@ export function Canvas({
         </DisableBackdropFilter>
       </CanvasTransformRoot>
       <HudSurface
-        xy={xy}
+        offset={xy}
         zoom={zoom}
         hide={is_canvas_transforming}
         readonly={readonly}
         labelDisplayNodes={nodes}
         selectedNodes={selected_nodes}
         highlights={
-          hoveringLayer
+          hoveringLayer?.node
             ? (config.can_highlight_selected_layer
-                ? [hoveringLayer]
-                : noduplicates([hoveringLayer], selected_nodes)
+                ? [hoveringLayer.node]
+                : noduplicates([hoveringLayer.node], selected_nodes)
               ).map((h) => ({
                 id: h.id,
                 xywh: [h.absoluteX, h.absoluteY, h.width, h.height],
               }))
             : []
         }
+        onHoverNode={(id) => {
+          setHoveringLayer({ node: node(id), reason: "frame-title" });
+        }}
+        onSelectNode={(id) => {
+          onSelectNode(node(id));
+        }}
       />
     </>
   );

editor-packages/editor-canvas/canvas/hud-surface.tsx

@@ -2,6 +2,11 @@ import { HoverOutlineHighlight, ReadonlySelectHightlight } from "../overlay";
 import { FrameTitle } from "../frame-title";
 import type { XY, XYWH } from "../types";
 
+interface HudControls {
+  onSelectNode: (node: string) => void;
+  onHoverNode: (node: string) => void;
+}
+
 /**
  * minimum meta of displaying nodes for hud surface
  */
@@ -15,23 +20,25 @@ export interface DisplayNodeMeta {
 }
 
 export function HudSurface({
-  xy,
+  offset,
   highlights,
   zoom,
   hide,
   labelDisplayNodes,
   selectedNodes,
   readonly,
+  onSelectNode,
+  onHoverNode,
 }: {
-  xy: XY;
+  offset: XY;
+  zoom: number;
   highlights: { id: string; xywh: XYWH }[];
   labelDisplayNodes: DisplayNodeMeta[];
   selectedNodes: DisplayNodeMeta[];
-  zoom: number;
   hide: boolean;
   readonly: boolean;
-}) {
-  const [ox, oy] = xy;
+} & HudControls) {
+  const [ox, oy] = offset;
   return (
     <div
       style={{
@@ -58,8 +65,19 @@ export function HudSurface({
               xy={absxy}
               wh={[node.width, node.height]}
               zoom={zoom}
-              onHoverStart={() => {}}
-              onHoverEnd={() => {}}
+              onSelect={() => onSelectNode(node.id)}
+              onHoverChange={(hv) => {
+                if (hv) {
+                  onHoverNode(node.id);
+                } else {
+                  onHoverNode(null);
+                }
+              }}
+              highlight={
+                !![...highlights, ...selectedNodes].find(
+                  (n) => n.id === node.id
+                )
+              }
             />
           );
         })}

editor-packages/editor-canvas/frame-title/frame-title.tsx

@@ -1,3 +1,5 @@
+import React, { useState } from "react";
+import { useHover } from "@editor-ui/hooks";
 import styled from "@emotion/styled";
 import { color_frame_title } from "../theme";
 
@@ -7,8 +9,8 @@ export function FrameTitle({
   wh,
   zoom,
   highlight = false,
-  onHoverStart,
-  onHoverEnd,
+  onHoverChange,
+  onSelect,
 }: {
   name: string;
   /**
@@ -21,18 +23,30 @@ export function FrameTitle({
   wh: [number, number];
   zoom: number;
   highlight?: boolean;
-  onHoverStart?: () => void;
-  onHoverEnd?: () => void;
+  onHoverChange?: (hover: boolean) => void;
+  onSelect?: () => void;
 }) {
   const [x, y] = xy;
   const [w, h] = wh;
   const view_height = 20;
 
   const height_considered_y_transform = y - view_height;
 
+  const [hoverred, setHoverred] = useState(false);
+
+  const _onHoverChange = (hover) => {
+    setHoverred(hover);
+    onHoverChange?.(hover);
+  };
+
+  const { hoverProps } = useHover({
+    onHoverChange: _onHoverChange,
+  });
+
   return (
     <div
       id="frame-title"
+      onClick={onSelect}
       style={{
         position: "fixed",
         width: w * zoom,
@@ -42,13 +56,16 @@ export function FrameTitle({
         cursor: "default",
         overflow: "hidden",
         transform: `translateX(${x}px) translateY(${height_considered_y_transform}px)`,
+        display: "flex",
+        flexDirection: "row",
       }}
-      onMouseEnter={onHoverStart}
-      onMouseLeave={onHoverEnd}
+      {...hoverProps}
     >
       <TitleLabel
         color={
-          highlight ? color_frame_title.highlight : color_frame_title.default
+          highlight || hoverred
+            ? color_frame_title.highlight
+            : color_frame_title.default
         }
       >
         {name}

editor-packages/editor-canvas/math/hovering-target.ts

@@ -1,3 +1,8 @@
+// TODO:
+/**
+ * if the array's order represents the reversed index (depth) set this to true.
+ */
+
 /**
  * get the hovering target node from nested children tree.
  * - ignore invisible nodes.

editor-packages/editor-canvas/overlay/outline-side.tsx

@@ -62,6 +62,7 @@ export function OulineSide({
         width: d,
         height: d,
         opacity: 1,
+        pointerEvents: "none",
         willChange: "transform",
         transformOrigin: "0px, 0px",
         transform: `translateX(${trans.x}px) translateY(${trans.y}px) translateZ(0px) scaleX(${l_scalex}) scaleY(${l_scaley})`,

editor-packages/editor-canvas/overlay/readonly-select-hightlight.tsx

@@ -17,7 +17,11 @@ export function ReadonlySelectHightlight({
   const dot_size = 4;
 
   return (
-    <>
+    <div
+      style={{
+        pointerEvents: "none",
+      }}
+    >
       <>
         <ReadonlyHandle
           box={bbox}
@@ -112,7 +116,7 @@ export function ReadonlySelectHightlight({
           color={color_layer_readonly_highlight}
         />
       </>
-    </>
+    </div>
   );
 }
 

editor-packages/editor-canvas/theme/default-theme.ts

@@ -1,5 +1,5 @@
 export const color_layer_highlight = "#0099ff";
-export const color_layer_readonly_highlight = "#FF12BD";
+export const color_layer_readonly_highlight = "#0099ff";
 export const color_frame_title = {
   default: "grey",
   highlight: color_layer_highlight,