@rogieking/figui3 3.17.0 → 3.19.0

package/README.md

@@ -82,6 +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 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 |
@@ -762,6 +763,8 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 | `drag-snapping` | string | — | Snapping behavior |
 | `type` | string | — | `"color"` for color handle with `fig-color-tip` |
 | `control` | string | — | `"add"` or `"remove"` delegated to color tip |
+| `hit-area` | string | — | Expanded interaction zone (unitless px). `"8"`, `"8 12"` (v h), or `"8 circle"` |
+| `hit-area-mode` | string | `"handle"` | `"handle"` proxies to handle drag/select; `"delegate"` emits `hitareadown` event |
 
 **Events:**
 
@@ -771,6 +774,7 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 | `change` | `{ x, y, px, py }` — on release |
 | `add` | — (when control="add") |
 | `remove` | — (when control="remove") |
+| `hitareadown` | `{ originalEvent }` — when `hit-area-mode="delegate"` and the hit area is clicked |
 
 ```html
 <div style="position: relative; width: 200px; height: 200px; background: #eee;">
@@ -780,6 +784,54 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 
 ---
 
+#### Canvas Control
+
+`<fig-canvas-control>` — [demo](https://rog.ie/figui3/#canvas-control)
+
+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"`, `"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 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` | 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-control
+    type="point-point"
+    name="Start, End"
+    value='{"x":25,"y":25,"x2":75,"y2":75}'
+    snapping="modifier"
+  ></fig-canvas-control>
+</div>
+```
+
+---
+
 ### Layout & Feedback
 
 #### Field

package/components.css

@@ -3125,7 +3125,11 @@ fig-input-fill {
   }
 }
 fig-input-gradient {
+  --height: 1.5rem;
   position: relative;
+  height: var(--height);
+  width: 100%;
+  min-width: 0;
 
   &:focus,
   &:active,
@@ -3147,6 +3151,7 @@ fig-input-gradient {
     align-items: center;
     inset: 0;
     pointer-events: auto;
+    z-index: 1;
 
     fig-handle {
       pointer-events: auto;
@@ -3242,7 +3247,6 @@ fig-input-palette {
       border-radius: var(--radius-medium) !important;
     }
   }
-
 }
 
 fig-field[direction="horizontal"]:has(> fig-input-palette) {
@@ -4811,20 +4815,33 @@ fig-handle {
   --box-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
   --outline: none;
   --border: none;
+  --fig-handle-hit-area-opacity: 0;
+  --fig-handle-hit-area-size: 0;
 
-  display: grid;
   margin: 0;
   padding: 0;
   place-items: center;
   width: var(--width);
   height: var(--height);
-  background: var(--handle-color);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  outline: var(--outline);
-  border: var(--border);
+  display: grid;
 
   &::before {
+    content: "";
+    color-scheme: light only;
+    width: var(--width);
+    height: var(--height);
+    background: var(--handle-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    outline: var(--outline);
+    border: var(--border);
+    place-self: center;
+    grid-area: 1 / 1;
+    z-index: 1;
+  }
+
+  &::after {
     content: "";
     color-scheme: light only;
     width: calc(var(--width) - var(--ring-width) * 2);
@@ -4833,6 +4850,8 @@ fig-handle {
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     place-self: center;
+    grid-area: 1 / 1;
+    z-index: 2;
   }
 
   &[size="small"] {
@@ -4868,6 +4887,15 @@ fig-handle {
       z-index: 10;
     }
   }
+
+  .fig-handle-hit-area {
+    position: absolute;
+    inset: calc(var(--fig-handle-hit-area-size) * -0.5px);
+    pointer-events: auto;
+    background: red;
+    opacity: var(--fig-handle-hit-area-opacity, 0);
+    z-index: 0;
+  }
 }
 
 fig-color-tip {
@@ -4949,3 +4977,74 @@ fig-color-tip {
     }
   }
 }
+
+/* Canvas Control */
+fig-canvas-control {
+  display: contents;
+  --fig-canvas-control-line-stroke: 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.5px;
+
+  & > fig-handle,
+  & > fig-tooltip:has(fig-handle:not([size="small"])) {
+    z-index: 1;
+  }
+
+  .fig-canvas-control-radius {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+
+    circle {
+      fill: none;
+      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-control-radius-hit {
+      stroke: transparent;
+      stroke-width: 12px;
+      pointer-events: stroke;
+      filter: none;
+
+      &:hover ~ circle {
+        stroke: var(--fig-canvas-control-line-stroke-hover);
+      }
+    }
+  }
+
+  &: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-control-ring-active
+    .fig-canvas-control-radius
+    circle:not(.fig-canvas-control-radius-hit) {
+    stroke: var(--fig-canvas-control-line-stroke-active);
+  }
+
+  .fig-canvas-control-angle-svg {
+    pointer-events: none;
+  }
+
+  .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));
+  }
+
+  fig-handle[size="small"] {
+    z-index: 2;
+
+    .fig-handle-hit-area {
+      cursor: grab;
+    }
+  }
+}