@rogieking/figui3 6.4.2 → 6.4.3

package/fig-lab.css

@@ -195,8 +195,12 @@ fig-canvas-control {
   --fig-canvas-control-radius-stroke-halo: #FFFFFF;
   --fig-canvas-control-line-stroke-hover: #0D99FF;
   --fig-canvas-control-line-stroke-active: #0D99FF;
-  --fig-canvas-control-line-stroke-width: 1.5px;
-  --fig-canvas-control-line-stroke-width-hover: 2.25px;
+  --fig-canvas-control-line-stroke-width: 1px;
+  --fig-canvas-control-line-stroke-width-hover: 2px;
+
+  &:has(.fig-canvas-control-radius-hit:hover) {
+     --fig-canvas-control-line-stroke-width: var(--fig-canvas-control-line-stroke-width-hover);
+  }
 
   & > fig-handle,
   & > fig-tooltip:has(fig-handle:not([size="small"])) {
@@ -217,7 +221,7 @@ fig-canvas-control {
 
     .fig-canvas-control-radius-halo {
       stroke: var(--fig-canvas-control-radius-stroke-halo);
-      stroke-width: calc(var(--fig-canvas-control-line-stroke-width) * 2);
+      stroke-width: calc(var(--fig-canvas-control-line-stroke-width) + 2px);
       filter: none;
     }
 
@@ -226,18 +230,12 @@ fig-canvas-control {
       stroke-width: 12px;
       pointer-events: stroke;
       filter: none;
-
-      &:hover ~ circle:not(.fig-canvas-control-radius-halo) {
-        stroke-width: var(--fig-canvas-control-line-stroke-width-hover);
-      }
+ 
     }
   }
 
-  &.fig-canvas-control-ring-active
-    .fig-canvas-control-radius
-    circle:not(.fig-canvas-control-radius-hit):not(.fig-canvas-control-radius-halo) {
-    stroke: var(--fig-canvas-control-line-stroke-active);
-    stroke-width: var(--fig-canvas-control-line-stroke-width-hover);
+  &.fig-canvas-control-ring-active{
+    --fig-canvas-control-line-stroke-width: var(--fig-canvas-control-line-stroke-width-hover);
   }
 
   .fig-canvas-control-angle-svg {
@@ -254,7 +252,7 @@ fig-canvas-control {
 
   .fig-canvas-control-angle-line-halo {
     stroke: var(--fig-canvas-control-radius-stroke-halo);
-    stroke-width: calc(var(--fig-canvas-control-line-stroke-width) * 2);
+    stroke-width: calc(var(--fig-canvas-control-line-stroke-width) + 2px);
     stroke-linecap: butt;
     filter: none;
   }

package/fig-lab.js

@@ -571,8 +571,18 @@ class FigCanvasControl extends HTMLElement {
 
   #wireHoverTooltip(target, getTooltip, getText, isDraggingRef) {
     if (!target) return;
+    const shouldSuppress = () => !!isDraggingRef?.();
+    const hideTooltip = () => {
+      const tip = getTooltip();
+      if (!tip) return;
+      tip.removeAttribute("show");
+      tip.hidePopup?.();
+    };
     const show = () => {
-      if (isDraggingRef && isDraggingRef()) return;
+      if (shouldSuppress()) {
+        hideTooltip();
+        return;
+      }
       const tip = getTooltip();
       if (!tip) return;
       if (getText) tip.setAttribute("text", getText());
@@ -580,15 +590,21 @@ class FigCanvasControl extends HTMLElement {
       tip.showPopup?.();
     };
     const hide = () => {
-      if (isDraggingRef && isDraggingRef()) return;
-      const tip = getTooltip();
-      if (!tip) return;
-      tip.removeAttribute("show");
+      hideTooltip();
     };
     target.addEventListener("pointerenter", show);
     target.addEventListener("pointerleave", hide);
   }
 
+  #hasActiveInteraction() {
+    return (
+      this.#isDragging ||
+      this.#isSecondDragging ||
+      this.#isRadiusDragging ||
+      this.#isAngleDragging
+    );
+  }
+
   #wireHoverTooltips() {
     if (this.#pointHandle) {
       this.#wireHoverTooltip(
@@ -596,7 +612,7 @@ class FigCanvasControl extends HTMLElement {
         () => this.#pointTooltip,
         () => this.#pointTipText,
         () =>
-          this.#isDragging ||
+          this.#hasActiveInteraction() ||
           !!this.#pointHandle?.querySelector("fig-color-tip"),
       );
     }
@@ -605,7 +621,7 @@ class FigCanvasControl extends HTMLElement {
         this.#angleHandle,
         () => this.#angleTooltip,
         () => `Angle ${Math.round(this.#angle)}°`,
-        () => this.#isAngleDragging || this.#isRadiusDragging,
+        () => this.#hasActiveInteraction(),
       );
     }
     if (this.#secondHandle) {
@@ -613,7 +629,7 @@ class FigCanvasControl extends HTMLElement {
         this.#secondHandle,
         () => this.#secondTooltip,
         () => this.#secondTipText,
-        () => this.#isSecondDragging,
+        () => this.#hasActiveInteraction(),
       );
     }
     if (this.#radiusSvg) {
@@ -1102,6 +1118,7 @@ class FigCanvasControl extends HTMLElement {
         origEvent.preventDefault();
         this.#isAngleDragging = true;
         this.classList.add("fig-canvas-control-ring-active");
+        this.#angleHandle.setAttribute("selected", "");
         const container = this.#container;
         if (!container) return;
 
@@ -1142,6 +1159,7 @@ class FigCanvasControl extends HTMLElement {
         const onUp = () => {
           this.#isAngleDragging = false;
           this.classList.remove("fig-canvas-control-ring-active");
+          this.#angleHandle.removeAttribute("selected");
           document.body.style.cursor = prevBodyCursor;
           if (this.#angleTooltip) this.#angleTooltip.removeAttribute("show");
           this.#syncValueAttribute();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.4.2",
+  "version": "6.4.3",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",