@grida/hud 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +562 -37
- package/dist/core/index.d.mts +181 -0
- package/dist/core/index.d.ts +181 -0
- package/dist/core/index.js +301 -0
- package/dist/core/index.mjs +291 -0
- package/dist/cursors/index.d.mts +1 -1
- package/dist/cursors/index.d.ts +1 -1
- package/dist/cursors/index.js +1 -1
- package/dist/cursors/index.mjs +1 -1
- package/dist/index-BQtDtpHM.d.mts +3215 -0
- package/dist/index-BlfZbeEJ.d.ts +3215 -0
- package/dist/index.d.mts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +55 -2
- package/dist/index.mjs +3 -3
- package/dist/overlay-CVV4s3IL.d.ts +241 -0
- package/dist/overlay-dsG32baA.d.mts +241 -0
- package/dist/primitives/bedrock.d.mts +47 -0
- package/dist/primitives/bedrock.d.ts +47 -0
- package/dist/primitives/bedrock.js +71 -0
- package/dist/primitives/bedrock.mjs +65 -0
- package/dist/react.d.mts +3 -2
- package/dist/react.d.ts +2 -1
- package/dist/react.js +4 -1
- package/dist/react.mjs +4 -1
- package/dist/surface-BHDH6P6p.js +7383 -0
- package/dist/surface-B_8w6VWG.mjs +6929 -0
- package/dist/types-3wwFisZs.d.mts +296 -0
- package/dist/types-3wwFisZs.d.ts +296 -0
- package/package.json +16 -3
- package/dist/index-Cp0X4SV7.d.ts +0 -947
- package/dist/index-DhGdcuQz.d.mts +0 -947
- package/dist/surface-BvMmXoEl.mjs +0 -2471
- package/dist/surface-ofSNTJ8H.js +0 -2607
- /package/dist/{cursor-BFGUuD2M.d.mts → cursor-CxS8EMvm.d.mts} +0 -0
- /package/dist/{cursor-CIYvFshz.d.ts → cursor-CxS8EMvm.d.ts} +0 -0
- /package/dist/{cursor-BieMVb71.mjs → cursor-DW-uAPVE.mjs} +0 -0
- /package/dist/{cursor-DsP9qtN2.js → cursor-FGiJBdU-.js} +0 -0
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { a as HUDPaintStripes, c as HUDRect, d as HUDSemantic, f as HUDSemanticGroup, i as HUDPaintSolid, l as HUDRule, n as HUDLine, o as HUDPoint, r as HUDPaint, s as HUDPolyline, t as HUDDraw, u as HUDScreenRect } from "../types-3wwFisZs.mjs";
|
|
2
|
+
import { a as MIN_CHROME_VISIBLE_SIZE, c as CURSOR_ANGLE_BUCKET_RAD, d as ResizeDirection, f as RotationCorner, h as cursorToCss, i as HitShape, l as CursorIcon, m as cursorEquals, n as HUDObjectInteractive, o as MIN_HIT_SIZE, p as angleBucket, r as HUDObjectPaintOnly, s as RenderShape, t as HUDObject, u as CursorRenderer } from "../overlay-dsG32baA.mjs";
|
|
3
|
+
import cmath from "@grida/cmath";
|
|
4
|
+
|
|
5
|
+
//#region primitives/painter.d.ts
|
|
6
|
+
/**
|
|
7
|
+
* Per-frame viewport state handed to `beginFrame`.
|
|
8
|
+
*/
|
|
9
|
+
interface PainterViewport {
|
|
10
|
+
/** Width in CSS pixels. */
|
|
11
|
+
readonly w: number;
|
|
12
|
+
/** Height in CSS pixels. */
|
|
13
|
+
readonly h: number;
|
|
14
|
+
/** Device-pixel ratio. */
|
|
15
|
+
readonly dpr: number;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Backend-agnostic chrome painter.
|
|
19
|
+
*
|
|
20
|
+
* Bedrock contract — exactly four methods. Concrete implementations
|
|
21
|
+
* (`primitives/painter-canvas2d.ts` ships canvas2d) may add private
|
|
22
|
+
* helpers, but the public interface is frozen at this shape.
|
|
23
|
+
*
|
|
24
|
+
* Frame lifecycle:
|
|
25
|
+
*
|
|
26
|
+
* 1. `beginFrame(viewport)` — clear or prepare the backing surface.
|
|
27
|
+
* 2. `setTransform(t)` — set the camera (doc → screen affine). May
|
|
28
|
+
* be called multiple times within a frame.
|
|
29
|
+
* 3. `draw(d)` — submit a `HUDDraw` payload. May be called multiple
|
|
30
|
+
* times within a frame; payloads accumulate.
|
|
31
|
+
* 4. `endFrame()` — commit. The backing surface displays the frame.
|
|
32
|
+
*
|
|
33
|
+
* Implementations MAY no-op `endFrame` (canvas2d does); SVG/DOM
|
|
34
|
+
* backends use it to flush DOM mutations in a single batch.
|
|
35
|
+
*/
|
|
36
|
+
interface Painter {
|
|
37
|
+
/** Start a new frame. Implementations clear / reset state here. */
|
|
38
|
+
beginFrame(viewport: PainterViewport): void;
|
|
39
|
+
/** Set the camera (doc → screen). */
|
|
40
|
+
setTransform(t: cmath.Transform): void;
|
|
41
|
+
/** Paint a `HUDDraw` payload. Calls accumulate within a frame. */
|
|
42
|
+
draw(d: HUDDraw): void;
|
|
43
|
+
/** Commit the frame. Implementations flush their backing surface. */
|
|
44
|
+
endFrame(): void;
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
export { CURSOR_ANGLE_BUCKET_RAD, type CursorIcon, type CursorRenderer, type HUDDraw, type HUDLine, type HUDObject, type HUDObjectInteractive, type HUDObjectPaintOnly, type HUDPaint, type HUDPaintSolid, type HUDPaintStripes, type HUDPoint, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDSemantic, type HUDSemanticGroup, type HitShape, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Painter, type PainterViewport, type RenderShape, type ResizeDirection, type RotationCorner, angleBucket, cursorEquals, cursorToCss };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { a as HUDPaintStripes, c as HUDRect, d as HUDSemantic, f as HUDSemanticGroup, i as HUDPaintSolid, l as HUDRule, n as HUDLine, o as HUDPoint, r as HUDPaint, s as HUDPolyline, t as HUDDraw, u as HUDScreenRect } from "../types-3wwFisZs.js";
|
|
2
|
+
import { a as MIN_CHROME_VISIBLE_SIZE, c as CURSOR_ANGLE_BUCKET_RAD, d as ResizeDirection, f as RotationCorner, h as cursorToCss, i as HitShape, l as CursorIcon, m as cursorEquals, n as HUDObjectInteractive, o as MIN_HIT_SIZE, p as angleBucket, r as HUDObjectPaintOnly, s as RenderShape, t as HUDObject, u as CursorRenderer } from "../overlay-CVV4s3IL.js";
|
|
3
|
+
import cmath from "@grida/cmath";
|
|
4
|
+
|
|
5
|
+
//#region primitives/painter.d.ts
|
|
6
|
+
/**
|
|
7
|
+
* Per-frame viewport state handed to `beginFrame`.
|
|
8
|
+
*/
|
|
9
|
+
interface PainterViewport {
|
|
10
|
+
/** Width in CSS pixels. */
|
|
11
|
+
readonly w: number;
|
|
12
|
+
/** Height in CSS pixels. */
|
|
13
|
+
readonly h: number;
|
|
14
|
+
/** Device-pixel ratio. */
|
|
15
|
+
readonly dpr: number;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Backend-agnostic chrome painter.
|
|
19
|
+
*
|
|
20
|
+
* Bedrock contract — exactly four methods. Concrete implementations
|
|
21
|
+
* (`primitives/painter-canvas2d.ts` ships canvas2d) may add private
|
|
22
|
+
* helpers, but the public interface is frozen at this shape.
|
|
23
|
+
*
|
|
24
|
+
* Frame lifecycle:
|
|
25
|
+
*
|
|
26
|
+
* 1. `beginFrame(viewport)` — clear or prepare the backing surface.
|
|
27
|
+
* 2. `setTransform(t)` — set the camera (doc → screen affine). May
|
|
28
|
+
* be called multiple times within a frame.
|
|
29
|
+
* 3. `draw(d)` — submit a `HUDDraw` payload. May be called multiple
|
|
30
|
+
* times within a frame; payloads accumulate.
|
|
31
|
+
* 4. `endFrame()` — commit. The backing surface displays the frame.
|
|
32
|
+
*
|
|
33
|
+
* Implementations MAY no-op `endFrame` (canvas2d does); SVG/DOM
|
|
34
|
+
* backends use it to flush DOM mutations in a single batch.
|
|
35
|
+
*/
|
|
36
|
+
interface Painter {
|
|
37
|
+
/** Start a new frame. Implementations clear / reset state here. */
|
|
38
|
+
beginFrame(viewport: PainterViewport): void;
|
|
39
|
+
/** Set the camera (doc → screen). */
|
|
40
|
+
setTransform(t: cmath.Transform): void;
|
|
41
|
+
/** Paint a `HUDDraw` payload. Calls accumulate within a frame. */
|
|
42
|
+
draw(d: HUDDraw): void;
|
|
43
|
+
/** Commit the frame. Implementations flush their backing surface. */
|
|
44
|
+
endFrame(): void;
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
export { CURSOR_ANGLE_BUCKET_RAD, type CursorIcon, type CursorRenderer, type HUDDraw, type HUDLine, type HUDObject, type HUDObjectInteractive, type HUDObjectPaintOnly, type HUDPaint, type HUDPaintSolid, type HUDPaintStripes, type HUDPoint, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDSemantic, type HUDSemanticGroup, type HitShape, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Painter, type PainterViewport, type RenderShape, type ResizeDirection, type RotationCorner, angleBucket, cursorEquals, cursorToCss };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
//#region primitives/overlay.ts
|
|
3
|
+
/**
|
|
4
|
+
* Minimum hit-target size in screen-px.
|
|
5
|
+
*
|
|
6
|
+
* Visual knobs are typically 8px; the hit region is 16px so the user
|
|
7
|
+
* does not need pixel-perfect aim (Fitts'). Bedrock constant — value
|
|
8
|
+
* mirrors the legacy `event/overlay.ts` constant during the additive
|
|
9
|
+
* migration.
|
|
10
|
+
*/
|
|
11
|
+
const MIN_HIT_SIZE = 16;
|
|
12
|
+
/**
|
|
13
|
+
* Below this selection size (in screen-px on either axis), chrome is
|
|
14
|
+
* suppressed — both the visual handles AND the hit regions. The
|
|
15
|
+
* consumer enforces this when computing per-frame `HUDObject`s.
|
|
16
|
+
*/
|
|
17
|
+
const MIN_CHROME_VISIBLE_SIZE = 12;
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region primitives/cursor.ts
|
|
20
|
+
/**
|
|
21
|
+
* Angle quantization bucket — 0.5° in radians. Two rotated cursors
|
|
22
|
+
* compare equal when their `baseAngle`s round to the same bucket.
|
|
23
|
+
*
|
|
24
|
+
* 0.5° is below human perception for cursor orientation, so the
|
|
25
|
+
* quantization is visually free.
|
|
26
|
+
*/
|
|
27
|
+
const CURSOR_ANGLE_BUCKET_RAD = Math.PI / 360;
|
|
28
|
+
/** Quantize an angle (radians) to its `CURSOR_ANGLE_BUCKET_RAD` bucket. */
|
|
29
|
+
function angleBucket(rad) {
|
|
30
|
+
if (rad === void 0 || rad === 0) return 0;
|
|
31
|
+
return Math.round(rad / CURSOR_ANGLE_BUCKET_RAD);
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Default mapping from `CursorIcon` to CSS `cursor` value.
|
|
35
|
+
*/
|
|
36
|
+
function cursorToCss(c) {
|
|
37
|
+
if (typeof c === "string") switch (c) {
|
|
38
|
+
case "default": return "default";
|
|
39
|
+
case "pointer": return "pointer";
|
|
40
|
+
case "move": return "move";
|
|
41
|
+
case "crosshair": return "crosshair";
|
|
42
|
+
case "grab": return "grab";
|
|
43
|
+
case "grabbing": return "grabbing";
|
|
44
|
+
case "text": return "text";
|
|
45
|
+
}
|
|
46
|
+
if (c.kind === "resize") return `${c.direction}-resize`;
|
|
47
|
+
return "crosshair";
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Cursor equality with `baseAngle` bucketing.
|
|
51
|
+
*
|
|
52
|
+
* Lets a hot path (a rotate-in-progress gesture's per-frame setCursor)
|
|
53
|
+
* emit `cursorChanged` only on visible motion (≥ one bucket of
|
|
54
|
+
* rotation).
|
|
55
|
+
*/
|
|
56
|
+
function cursorEquals(a, b) {
|
|
57
|
+
if (typeof a === "string" && typeof b === "string") return a === b;
|
|
58
|
+
if (typeof a !== "string" && typeof b !== "string") {
|
|
59
|
+
if (a.kind === "resize" && b.kind === "resize") return a.direction === b.direction && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
|
|
60
|
+
if (a.kind === "rotate" && b.kind === "rotate") return a.corner === b.corner && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
//#endregion
|
|
66
|
+
exports.CURSOR_ANGLE_BUCKET_RAD = CURSOR_ANGLE_BUCKET_RAD;
|
|
67
|
+
exports.MIN_CHROME_VISIBLE_SIZE = MIN_CHROME_VISIBLE_SIZE;
|
|
68
|
+
exports.MIN_HIT_SIZE = MIN_HIT_SIZE;
|
|
69
|
+
exports.angleBucket = angleBucket;
|
|
70
|
+
exports.cursorEquals = cursorEquals;
|
|
71
|
+
exports.cursorToCss = cursorToCss;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
//#region primitives/overlay.ts
|
|
2
|
+
/**
|
|
3
|
+
* Minimum hit-target size in screen-px.
|
|
4
|
+
*
|
|
5
|
+
* Visual knobs are typically 8px; the hit region is 16px so the user
|
|
6
|
+
* does not need pixel-perfect aim (Fitts'). Bedrock constant — value
|
|
7
|
+
* mirrors the legacy `event/overlay.ts` constant during the additive
|
|
8
|
+
* migration.
|
|
9
|
+
*/
|
|
10
|
+
const MIN_HIT_SIZE = 16;
|
|
11
|
+
/**
|
|
12
|
+
* Below this selection size (in screen-px on either axis), chrome is
|
|
13
|
+
* suppressed — both the visual handles AND the hit regions. The
|
|
14
|
+
* consumer enforces this when computing per-frame `HUDObject`s.
|
|
15
|
+
*/
|
|
16
|
+
const MIN_CHROME_VISIBLE_SIZE = 12;
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region primitives/cursor.ts
|
|
19
|
+
/**
|
|
20
|
+
* Angle quantization bucket — 0.5° in radians. Two rotated cursors
|
|
21
|
+
* compare equal when their `baseAngle`s round to the same bucket.
|
|
22
|
+
*
|
|
23
|
+
* 0.5° is below human perception for cursor orientation, so the
|
|
24
|
+
* quantization is visually free.
|
|
25
|
+
*/
|
|
26
|
+
const CURSOR_ANGLE_BUCKET_RAD = Math.PI / 360;
|
|
27
|
+
/** Quantize an angle (radians) to its `CURSOR_ANGLE_BUCKET_RAD` bucket. */
|
|
28
|
+
function angleBucket(rad) {
|
|
29
|
+
if (rad === void 0 || rad === 0) return 0;
|
|
30
|
+
return Math.round(rad / CURSOR_ANGLE_BUCKET_RAD);
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Default mapping from `CursorIcon` to CSS `cursor` value.
|
|
34
|
+
*/
|
|
35
|
+
function cursorToCss(c) {
|
|
36
|
+
if (typeof c === "string") switch (c) {
|
|
37
|
+
case "default": return "default";
|
|
38
|
+
case "pointer": return "pointer";
|
|
39
|
+
case "move": return "move";
|
|
40
|
+
case "crosshair": return "crosshair";
|
|
41
|
+
case "grab": return "grab";
|
|
42
|
+
case "grabbing": return "grabbing";
|
|
43
|
+
case "text": return "text";
|
|
44
|
+
}
|
|
45
|
+
if (c.kind === "resize") return `${c.direction}-resize`;
|
|
46
|
+
return "crosshair";
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Cursor equality with `baseAngle` bucketing.
|
|
50
|
+
*
|
|
51
|
+
* Lets a hot path (a rotate-in-progress gesture's per-frame setCursor)
|
|
52
|
+
* emit `cursorChanged` only on visible motion (≥ one bucket of
|
|
53
|
+
* rotation).
|
|
54
|
+
*/
|
|
55
|
+
function cursorEquals(a, b) {
|
|
56
|
+
if (typeof a === "string" && typeof b === "string") return a === b;
|
|
57
|
+
if (typeof a !== "string" && typeof b !== "string") {
|
|
58
|
+
if (a.kind === "resize" && b.kind === "resize") return a.direction === b.direction && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
|
|
59
|
+
if (a.kind === "rotate" && b.kind === "rotate") return a.corner === b.corner && angleBucket(a.baseAngle) === angleBucket(b.baseAngle);
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
64
|
+
//#endregion
|
|
65
|
+
export { CURSOR_ANGLE_BUCKET_RAD, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, angleBucket, cursorEquals, cursorToCss };
|
package/dist/react.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { t as HUDDraw } from "./types-3wwFisZs.mjs";
|
|
2
|
+
import { n as SurfaceOptions, t as Surface } from "./index-BQtDtpHM.mjs";
|
|
3
3
|
import cmath from "@grida/cmath";
|
|
4
|
+
import { Measurement } from "@grida/cmath/_measurement";
|
|
4
5
|
import * as React from "react";
|
|
5
6
|
import { SnapResult } from "@grida/cmath/_snap";
|
|
6
7
|
|
package/dist/react.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { t as HUDDraw } from "./types-3wwFisZs.js";
|
|
2
|
+
import { n as SurfaceOptions, t as Surface } from "./index-BlfZbeEJ.js";
|
|
2
3
|
import cmath from "@grida/cmath";
|
|
3
4
|
import { SnapResult } from "@grida/cmath/_snap";
|
|
4
5
|
import { Measurement } from "@grida/cmath/_measurement";
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const require_surface = require("./surface-
|
|
3
|
+
const require_surface = require("./surface-BHDH6P6p.js");
|
|
4
4
|
let react = require("react");
|
|
5
5
|
react = require_surface.__toESM(react);
|
|
6
6
|
let _grida_cmath__snap = require("@grida/cmath/_snap");
|
|
@@ -22,15 +22,18 @@ function useHUDSurface(canvasRef, options) {
|
|
|
22
22
|
const pickRef = react.useRef(options.pick);
|
|
23
23
|
const shapeOfRef = react.useRef(options.shapeOf);
|
|
24
24
|
const onIntentRef = react.useRef(options.onIntent);
|
|
25
|
+
const onTapRef = react.useRef(options.onTap);
|
|
25
26
|
pickRef.current = options.pick;
|
|
26
27
|
shapeOfRef.current = options.shapeOf;
|
|
27
28
|
onIntentRef.current = options.onIntent;
|
|
29
|
+
onTapRef.current = options.onTap;
|
|
28
30
|
react.useLayoutEffect(() => {
|
|
29
31
|
if (!canvasRef.current) return;
|
|
30
32
|
const s = new require_surface.Surface(canvasRef.current, {
|
|
31
33
|
pick: (p) => pickRef.current(p),
|
|
32
34
|
shapeOf: (id) => shapeOfRef.current(id),
|
|
33
35
|
onIntent: (i) => onIntentRef.current(i),
|
|
36
|
+
onTap: (t) => onTapRef.current?.(t),
|
|
34
37
|
style: options.style,
|
|
35
38
|
readonly: options.readonly,
|
|
36
39
|
color: options.color,
|
package/dist/react.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { D as marqueeToHUDDraw, E as lassoToHUDDraw, O as measurementToHUDDraw, j as HUDCanvas, k as snapGuideToHUDDraw, t as Surface } from "./surface-B_8w6VWG.mjs";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { guide } from "@grida/cmath/_snap";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -20,15 +20,18 @@ function useHUDSurface(canvasRef, options) {
|
|
|
20
20
|
const pickRef = React.useRef(options.pick);
|
|
21
21
|
const shapeOfRef = React.useRef(options.shapeOf);
|
|
22
22
|
const onIntentRef = React.useRef(options.onIntent);
|
|
23
|
+
const onTapRef = React.useRef(options.onTap);
|
|
23
24
|
pickRef.current = options.pick;
|
|
24
25
|
shapeOfRef.current = options.shapeOf;
|
|
25
26
|
onIntentRef.current = options.onIntent;
|
|
27
|
+
onTapRef.current = options.onTap;
|
|
26
28
|
React.useLayoutEffect(() => {
|
|
27
29
|
if (!canvasRef.current) return;
|
|
28
30
|
const s = new Surface(canvasRef.current, {
|
|
29
31
|
pick: (p) => pickRef.current(p),
|
|
30
32
|
shapeOf: (id) => shapeOfRef.current(id),
|
|
31
33
|
onIntent: (i) => onIntentRef.current(i),
|
|
34
|
+
onTap: (t) => onTapRef.current?.(t),
|
|
32
35
|
style: options.style,
|
|
33
36
|
readonly: options.readonly,
|
|
34
37
|
color: options.color,
|