@rogieking/figui3 3.18.0 → 3.20.0

package/README.md

@@ -82,7 +82,7 @@ Minimal example:
 | [Easing Curve](#easing-curve) | `<fig-easing-curve>` | Bezier/spring curve editor |
 | [3D Rotate](#3d-rotate) | `<fig-3d-rotate>` | 3D cube rotation control |
 | [Handle](#handle) | `<fig-handle>` | Draggable handle on a surface |
-| [Canvas Point](#canvas-point) | `<fig-canvas-point>` | Point with optional radius & angle |
+| [Canvas Control](#canvas-control) | `<fig-canvas-control>` | Point with optional radius, angle, or second point |
 | [Dialog](#dialog) | `<fig-dialog>` | Modal/non-modal dialog |
 | [Popup](#popup) | `<fig-popup>` | Anchored floating surface |
 | [Toast](#toast) | `<fig-toast>` | Toast notification |
@@ -784,36 +784,49 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 
 ---
 
-#### Canvas Point
+#### Canvas Control
 
-`<fig-canvas-point>` — [demo](https://rog.ie/figui3/#canvas-point)
+`<fig-canvas-control>` — [demo](https://rog.ie/figui3/#canvas-control)
 
-A composite point control with optional radius circle and angle handle. Place inside a positioned container; the component uses `display: contents` and does not create its own box.
+A composite point control with optional radius circle, angle handle, or second point. Place inside a positioned container; the component uses `display: contents` and does not create its own box.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `type` | string | `"point"` | `"point"`, `"color"`, `"point-radius"`, `"point-radius-angle"` |
-| `value` | JSON string | — | `{ "x": 50, "y": 50, "radius"?: 30, "angle"?: 45 }` — radius accepts unitless (px) or `"25%"` |
+| `type` | string | `"point"` | `"point"`, `"color"`, `"point-radius"`, `"point-radius-angle"`, `"point-point"` |
+| `value` | JSON string | — | `{ "x": 50, "y": 50 }` — see type-specific shapes below |
+| `name` | string | — | Tooltip label(s). Comma-separated for two handles: `"Start, End"` |
 | `color` | string | — | Passthrough color for `type="color"` handle |
 | `tooltips` | string | `"true"` | Show value tooltips on interaction |
 | `disabled` | boolean | `false` | Disable all interaction |
 | `drag-surface` | string | `"parent"` | Forwarded to inner `fig-handle`s |
-| `snapping` | string | `"false"` | `"false"`, `"true"`, `"modifier"` — applies to point, radius, and angle |
+| `snapping` | string | `"false"` | `"false"`, `"true"`, `"modifier"` — applies to all handles |
+
+**Value shapes by type:**
+
+| Type | Value shape |
+|---|---|
+| `point`, `color` | `{ x, y }` |
+| `point-radius` | `{ x, y, radius }` — radius: number (px) or `"25%"` |
+| `point-radius-angle` | `{ x, y, radius, angle }` — angle in degrees |
+| `point-point` | `{ x, y, x2, y2 }` — angle and length inferred |
 
 **Events:**
 
 | Event | Detail |
 |---|---|
-| `input` | `{ x, y, radius?, angle? }` — while dragging |
-| `change` | `{ x, y, radius?, angle? }` — on release |
+| `input` | Value object (shape depends on type) — while dragging |
+| `change` | Value object (shape depends on type) — on release |
+
+For `point-point`, both handles support direct drag (with a dynamic directional resize cursor) and rotation via their hit area (dragging from the hit area rotates around the opposite handle at fixed distance, with a rotate cursor).
 
 ```html
 <div style="position: relative; width: 200px; height: 200px; background: #eee;">
-  <fig-canvas-point
-    type="point-radius-angle"
-    value='{"x":50,"y":50,"radius":"25%","angle":45}'
+  <fig-canvas-control
+    type="point-point"
+    name="Start, End"
+    value='{"x":25,"y":25,"x2":75,"y2":75}'
     snapping="modifier"
-  ></fig-canvas-point>
+  ></fig-canvas-control>
 </div>
 ```
 

package/components.css

@@ -233,8 +233,8 @@
   --handle-color: #fff;
   --bg-selected: #f5f5f5;
   --bg-selected-active: #e5f4ff;
-  --bg-tooltip: #1e1e1e;
-  --color-tooltip: #ffffff;
+  --bg-tooltip: light-dark(#ffffff, #1e1e1e);
+  --color-tooltip: var(--figma-color-text);
 
   /* Transparent Backgrounds - use light-dark() */
   --figma-color-bordertranslucent: light-dark(
@@ -2776,7 +2776,8 @@ fig-tooltip {
   inset: unset;
   display: inline-block;
   overflow: visible;
-  color: var(--color-tooltip);
+  color-scheme: dark;
+  color: var(--figma-color-text);
   background-color: var(--bg-tooltip);
   padding: var(--spacer-1) var(--spacer-2);
   line-height: 1rem !important;
@@ -2784,7 +2785,8 @@ fig-tooltip {
   border-radius: var(--radius-medium, 0.3125rem);
   max-width: 180px;
   width: max-content;
-  box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0.5px 0 0
+    light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
   filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
     drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
     drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
@@ -2814,6 +2816,12 @@ fig-tooltip {
     transform: translate(-50%);
   }
 
+  &[pointer="false"] {
+    &:after {
+      display: none !important;
+    }
+  }
+
   &[position="bottom"] {
     &:after {
       top: 0px;
@@ -2821,6 +2829,18 @@ fig-tooltip {
       transform: translate(-50%, -100%) scaleY(-1);
     }
   }
+  &[theme="dark"] {
+    color-scheme: dark;
+  }
+
+  &[theme="light"] {
+    color-scheme: light;
+  }
+
+  &[theme="brand"] {
+    background-color: var(--figma-color-bg-brand);
+    color-scheme: dark;
+  }
 }
 
 /* UI Icons */
@@ -4978,63 +4998,66 @@ fig-color-tip {
   }
 }
 
-/* Canvas Point */
-fig-canvas-point {
+/* Canvas Control */
+fig-canvas-control {
   display: contents;
-  --fig-canvas-point-line-stroke: rgba(255, 255, 255, 0.5);
-  --fig-canvas-point-line-stroke-hover: var(--figma-color-bg-brand);
-  --fig-canvas-point-line-stroke-active: var(--figma-color-bg-brand);
-  --fig-canvas-point-line-stroke-width: 1.5px;
+  --fig-canvas-control-line-stroke: light-dark(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0.5)
+  );
+  --fig-canvas-control-line-stroke-hover: var(--figma-color-bg-brand);
+  --fig-canvas-control-line-stroke-active: var(--figma-color-bg-brand);
+  --fig-canvas-control-line-stroke-width: 1.25px;
 
   & > fig-handle,
   & > fig-tooltip:has(fig-handle:not([size="small"])) {
     z-index: 1;
   }
 
-  .fig-canvas-point-radius {
+  .fig-canvas-control-radius {
     position: absolute;
     pointer-events: none;
     overflow: visible;
 
     circle {
       fill: none;
-      stroke: var(--fig-canvas-point-line-stroke);
-      stroke-width: var(--fig-canvas-point-line-stroke-width);
+      stroke: var(--fig-canvas-control-line-stroke);
+      stroke-width: var(--fig-canvas-control-line-stroke-width);
       paint-order: stroke fill;
       filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
         drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
     }
 
-    .fig-canvas-point-radius-hit {
+    .fig-canvas-control-radius-hit {
       stroke: transparent;
       stroke-width: 12px;
       pointer-events: stroke;
       filter: none;
 
       &:hover ~ circle {
-        stroke: var(--fig-canvas-point-line-stroke-hover);
+        stroke: var(--fig-canvas-control-line-stroke-hover);
       }
     }
   }
 
-  &:has(.fig-canvas-point-radius-hit:hover) .fig-canvas-point-angle-line,
-  &.fig-canvas-point-ring-active .fig-canvas-point-angle-line {
-    stroke: var(--fig-canvas-point-line-stroke-active);
+  &:has(.fig-canvas-control-radius-hit:hover) .fig-canvas-control-angle-line,
+  &.fig-canvas-control-ring-active .fig-canvas-control-angle-line {
+    stroke: var(--fig-canvas-control-line-stroke-active);
   }
 
-  &.fig-canvas-point-ring-active
-    .fig-canvas-point-radius
-    circle:not(.fig-canvas-point-radius-hit) {
-    stroke: var(--fig-canvas-point-line-stroke-active);
+  &.fig-canvas-control-ring-active
+    .fig-canvas-control-radius
+    circle:not(.fig-canvas-control-radius-hit) {
+    stroke: var(--fig-canvas-control-line-stroke-active);
   }
 
-  .fig-canvas-point-angle-svg {
+  .fig-canvas-control-angle-svg {
     pointer-events: none;
   }
 
-  .fig-canvas-point-angle-line {
-    stroke: var(--fig-canvas-point-line-stroke);
-    stroke-width: var(--fig-canvas-point-line-stroke-width);
+  .fig-canvas-control-angle-line {
+    stroke: var(--fig-canvas-control-line-stroke);
+    stroke-width: var(--fig-canvas-control-line-stroke-width);
     paint-order: stroke fill;
     filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.3))
       drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));