Lighter Tweaks (#6404)

* inverse selection opacity

* fix drag handle borders and remove scrim from hit detection

* short dash for hovered, long dash for selected

* refactor drawing handles and scrim

* don't abandon moving handlers

* maintain bounding box location at the top left

* dashed line over solid border

* maintain aspect ratio with shift key

* fix black flash on resize

* scrim should not overlap border

---------

Co-authored-by: Gavin McDonald <[email protected]>

Author: mcdoh

app/packages/lighter/src/constants.ts

@@ -17,6 +17,8 @@ export const DEFAULT_TEXT_PADDING = 4;
  * Default stroke width for overlays (matches Looker's STROKE_WIDTH)
  */
 export const STROKE_WIDTH = 3;
+export const SELECTED_DASH_LENGTH = 8;
+export const HOVERED_DASH_LENGTH = 4;
 
 /**
  * Default font settings
@@ -29,9 +31,12 @@ export const FONT_WEIGHT = "bold";
  * settings related to resize handles
  */
 export const EDGE_THRESHOLD = 10;
+export const HANDLE_ALPHA = 0.9;
 export const HANDLE_FACTOR = 3;
 export const HANDLE_COLOR = 0xffffff;
 export const HANDLE_OUTLINE = 2;
+export const HANDLE_OFFSET_X = 6;
+export const HANDLE_OFFSET_Y = 3;
 
 /**
  * Opacity of selected bounding boxes

app/packages/lighter/src/interaction/InteractionManager.ts

@@ -66,13 +66,15 @@ export interface InteractionHandler {
    * @param worldPoint - Screen point translated to viewport point.
    * @param event - The original pointer event.
    * @param scale - The current scaling factor of the renderer.
+   * @param maintainAspectRatio - Maintain aspect ratio during resize (shift key held).
    * @returns True if the event was handled.
    */
   onMove?(
     point: Point,
     worldPoint: Point,
     event: PointerEvent,
-    sclae: number
+    scale: number,
+    maintainAspectRatio?: boolean
   ): boolean;
 
   /**
@@ -154,6 +156,7 @@ export class InteractionManager {
   private clickStartPoint?: Point;
   private lastClickTime = 0;
   private lastClickPoint?: Point;
+  private maintainAspectRatio = false;
 
   private canonicalMediaId?: string;
 
@@ -201,6 +204,7 @@ export class InteractionManager {
     this.canvas.addEventListener("pointercancel", this.handlePointerCancel);
     this.canvas.addEventListener("pointerleave", this.handlePointerLeave);
     document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
     this.eventBus.on(LIGHTER_EVENTS.ZOOMED, this.handleZoomed);
   }
 
@@ -266,9 +270,21 @@ export class InteractionManager {
     if (handler) {
       // Handle drag move
       if (!interactiveHandler) {
-        handler.onMove?.(point, worldPoint, event, scale);
+        handler.onMove?.(
+          point,
+          worldPoint,
+          event,
+          scale,
+          this.maintainAspectRatio
+        );
       } else {
-        interactiveHandler.onMove?.(point, worldPoint, event, scale);
+        interactiveHandler.onMove?.(
+          point,
+          worldPoint,
+          event,
+          scale,
+          this.maintainAspectRatio
+        );
       }
 
       if (handler.isMoving?.()) {
@@ -301,7 +317,7 @@ export class InteractionManager {
     const point = this.getCanvasPoint(event);
     const worldPoint = this.renderer.screenToWorld(point);
     const scale = this.renderer.getScale();
-    const handler = this.findHandlerAtPoint(point);
+    const handler = this.findMovingHandler() || this.findHandlerAtPoint(point);
     const now = Date.now();
 
     if (handler?.isMoving?.()) {
@@ -371,7 +387,7 @@ export class InteractionManager {
   };
 
   /**
-   * Handles keyboard events for undo/redo shortcuts.
+   * Handles keyboard events for undo/redo shortcuts and shift modifier to maintain aspect ratio.
    * @param event - The keyboard event.
    */
   private handleKeyDown = (event: KeyboardEvent): void => {
@@ -409,6 +425,30 @@ export class InteractionManager {
       this.undoRedoManager.redo();
       return;
     }
+
+    if (event.shiftKey) {
+      this.maintainAspectRatio = event.shiftKey;
+      return;
+    }
+  };
+
+  /**
+   * Handles keyboard events for release of shift modifier to maintain aspect ratio.
+   * @param event - The keyboard event.
+   */
+  private handleKeyUp = (event: KeyboardEvent): void => {
+    // Check if we're in an input field - don't handle shortcuts there
+    const activeElement = document.activeElement;
+    if (
+      activeElement &&
+      (activeElement.tagName === "INPUT" ||
+        activeElement.tagName === "TEXTAREA" ||
+        (activeElement as HTMLElement).contentEditable === "true")
+    ) {
+      return;
+    }
+
+    this.maintainAspectRatio = event.shiftKey;
   };
 
   private handleClick(point: Point, event: PointerEvent, now: number): void {
@@ -664,6 +704,7 @@ export class InteractionManager {
     this.canvas.removeEventListener("pointercancel", this.handlePointerCancel);
     this.canvas.removeEventListener("pointerleave", this.handlePointerLeave);
     document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp);
     this.eventBus.off(LIGHTER_EVENTS.ZOOMED, this.handleZoomed);
     this.clearHandlers();
   }

app/packages/lighter/src/overlay/BoundingBoxOverlay.ts

@@ -7,6 +7,10 @@ import {
   LABEL_ARCHETYPE_PRIORITY,
   STROKE_WIDTH,
   EDGE_THRESHOLD,
+  SELECTED_DASH_LENGTH,
+  HOVERED_DASH_LENGTH,
+  HANDLE_OFFSET_X,
+  HANDLE_OFFSET_Y,
 } from "../constants";
 import { CONTAINS } from "../core/Scene2D";
 import type { Renderer2D } from "../renderer/Renderer2D";
@@ -19,6 +23,7 @@ import type {
   Rect,
   Spatial,
 } from "../types";
+import { parseColorWithAlpha } from "../utils/color";
 import {
   getInstanceStrokeStyles,
   getSimpleStrokeStyles,
@@ -167,7 +172,9 @@ export class BoundingBoxOverlay
             isSelected: this.isSelectedState,
             strokeColor: style.strokeStyle || "#ffffff",
             isHovered: this.isHoveredState,
-            dashLength: 8,
+            dashLength: this.isSelectedState
+              ? SELECTED_DASH_LENGTH
+              : HOVERED_DASH_LENGTH,
           });
 
     const mainStrokeStyle = {
@@ -176,9 +183,7 @@ export class BoundingBoxOverlay
       isSelected: this.isSelectedState,
     };
 
-    if (style.dashPattern && !overlayStrokeColor && !overlayDash) {
-      mainStrokeStyle.dashPattern = style.dashPattern;
-    }
+    delete mainStrokeStyle.dashPattern;
 
     renderer.drawRect(this.absoluteBounds, mainStrokeStyle, this.containerId);
 
@@ -187,7 +192,7 @@ export class BoundingBoxOverlay
         this.absoluteBounds,
         {
           strokeStyle: hoverStrokeColor,
-          lineWidth: style.lineWidth || 2,
+          lineWidth: style.lineWidth || STROKE_WIDTH,
         },
         this.containerId
       );
@@ -203,15 +208,32 @@ export class BoundingBoxOverlay
       );
     }
 
+    if (this.isSelected() && style.strokeStyle) {
+      const colorObj = parseColorWithAlpha(style.strokeStyle);
+      const color = colorObj.color;
+
+      renderer.drawScrim(
+        this.absoluteBounds,
+        style.lineWidth || STROKE_WIDTH,
+        this.containerId
+      );
+      renderer.drawHandles(
+        this.absoluteBounds,
+        style.lineWidth || STROKE_WIDTH,
+        color,
+        this.containerId
+      );
+    }
+
     if (this.options.label && this.options.label.label?.length > 0) {
       const offset = style.lineWidth
         ? style.lineWidth / renderer.getScale() / 2
         : 0;
 
       const labelPosition = this.isSelected()
         ? {
-            x: this.absoluteBounds.x + offset * 6,
-            y: this.absoluteBounds.y - offset * 3,
+            x: this.absoluteBounds.x + offset * HANDLE_OFFSET_X,
+            y: this.absoluteBounds.y - offset * HANDLE_OFFSET_Y,
           }
         : {
             x: this.absoluteBounds.x - offset,
@@ -380,14 +402,15 @@ export class BoundingBoxOverlay
     point: Point,
     worldPoint: Point,
     event: PointerEvent,
-    scale: number
+    scale: number,
+    maintainAspectRatio?: boolean
   ): boolean {
     this.calculateMoving(point, worldPoint, scale);
 
     if (this.moveState === "DRAGGING") {
       return this.onDrag(point, event, scale);
     } else if (this.moveState.startsWith("RESIZE_")) {
-      return this.onResize(point, event, scale);
+      return this.onResize(point, event, scale, maintainAspectRatio);
     } else {
       return false;
     }
@@ -414,32 +437,96 @@ export class BoundingBoxOverlay
     return true;
   }
 
-  private onResize(point: Point, _event: PointerEvent, scale: number): boolean {
+  private onResize(
+    point: Point,
+    _event: PointerEvent,
+    scale: number,
+    maintainAspectRatio: boolean = false
+  ): boolean {
     if (!this.moveStartPoint || !this.moveStartBounds) return false;
 
     const delta = {
       x: (point.x - this.moveStartPoint.x) / scale,
       y: (point.y - this.moveStartPoint.y) / scale,
     };
 
+    let maintainX = 0;
+    let maintainY = 0;
+
+    if (maintainAspectRatio) {
+      const aspectRatio =
+        this.moveStartBounds.width / this.moveStartBounds.height;
+
+      if (
+        Math.abs(delta.x / this.absoluteBounds.width) >
+        Math.abs(delta.y / this.absoluteBounds.height)
+      ) {
+        maintainY = delta.x / aspectRatio;
+      } else {
+        maintainX = delta.y * aspectRatio;
+      }
+    }
+
     let { x, y, width, height } = this.moveStartBounds;
 
     if (["RESIZE_NW", "RESIZE_N", "RESIZE_NE"].includes(this.moveState)) {
-      y += delta.y;
-      height -= delta.y;
+      maintainY = this.moveState === "RESIZE_NE" ? maintainY * -1 : maintainY;
+      maintainY = this.moveState === "RESIZE_E" ? 0 : maintainY;
+
+      y += maintainY || delta.y;
+      height -= maintainY || delta.y;
+
+      if (this.moveState === "RESIZE_N") {
+        x += maintainX / 2;
+        width -= maintainX;
+      }
     }
 
     if (["RESIZE_NW", "RESIZE_W", "RESIZE_SW"].includes(this.moveState)) {
-      x += delta.x;
-      width -= delta.x;
+      maintainX = this.moveState === "RESIZE_SW" ? maintainX * -1 : maintainX;
+      maintainX = this.moveState === "RESIZE_W" ? 0 : maintainX;
+
+      x += maintainX || delta.x;
+      width -= maintainX || delta.x;
+
+      if (this.moveState === "RESIZE_W") {
+        y += maintainY / 2;
+        height -= maintainY;
+      }
     }
 
     if (["RESIZE_SW", "RESIZE_S", "RESIZE_SE"].includes(this.moveState)) {
-      height += delta.y;
+      maintainY = this.moveState === "RESIZE_SW" ? maintainY * -1 : maintainY;
+      maintainY = this.moveState === "RESIZE_S" ? 0 : maintainY;
+
+      height += maintainY || delta.y;
+
+      if (this.moveState === "RESIZE_S") {
+        x -= maintainX / 2;
+        width += maintainX;
+      }
     }
 
     if (["RESIZE_NE", "RESIZE_E", "RESIZE_SE"].includes(this.moveState)) {
-      width += delta.x;
+      maintainX = this.moveState === "RESIZE_NE" ? maintainX * -1 : maintainX;
+      maintainX = this.moveState === "RESIZE_E" ? 0 : maintainX;
+
+      width += maintainX || delta.x;
+
+      if (this.moveState === "RESIZE_E") {
+        y -= maintainY / 2;
+        height += maintainY;
+      }
+    }
+
+    if (width < 0) {
+      width *= -1;
+      x -= width;
+    }
+
+    if (height < 0) {
+      height *= -1;
+      y -= height;
     }
 
     // Update absolute bounds

app/packages/lighter/src/overlay/ClassificationOverlay.ts

@@ -2,7 +2,11 @@
  * Copyright 2017-2025, Voxel51, Inc.
  */
 
-import { FONT_SIZE, LABEL_ARCHETYPE_PRIORITY } from "../constants";
+import {
+  FONT_SIZE,
+  LABEL_ARCHETYPE_PRIORITY,
+  SELECTED_DASH_LENGTH,
+} from "../constants";
 import type { Renderer2D } from "../renderer/Renderer2D";
 import type { Selectable } from "../selection/Selectable";
 import type { Hoverable, Point, RawLookerLabel } from "../types";
@@ -67,7 +71,7 @@ export class ClassificationOverlay
     const { overlayStrokeColor, overlayDash } = getSimpleStrokeStyles({
       isSelected: this.isSelectedState,
       strokeColor: style.strokeStyle || "#000000",
-      dashLength: 8,
+      dashLength: this.isSelectedState ? SELECTED_DASH_LENGTH : undefined,
     });
 
     // Draw the classification text