@grida/hud 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+import { A as HUDPolyline, C as marqueeToHUDDraw, D as HUDCanvasOptions, E as HUDCanvas, M as HUDRule, N as HUDScreenRect, O as HUDDraw, S as lassoToHUDDraw, T as snapGuideToHUDDraw, _ as Modifiers, a as RenderShape, b as SurfaceEvent, c as HUDStyle, d as Intent, f as IntentPhase, g as RotationCorner, h as ResizeDirection, i as OverlayElement, j as HUDRect, k as HUDLine, l as SelectionGroup, m as CursorIcon, n as MIN_CHROME_VISIBLE_SIZE, o as Surface, p as SurfaceGesture, r as MIN_HIT_SIZE, s as SurfaceOptions, t as HitShape, u as SelectionShape, v as NO_MODS, w as measurementToHUDDraw, x as SurfaceResponse, y as PointerButton } from "./index-CBqCh-ZM.mjs";
+export { type CursorIcon, HUDCanvas, type HUDCanvasOptions, type HUDDraw, type HUDLine, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDStyle, type HitShape, type Intent, type IntentPhase, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Modifiers, NO_MODS, type OverlayElement, type PointerButton, type RenderShape, type ResizeDirection, type RotationCorner, type SelectionGroup, type SelectionShape, Surface, type SurfaceEvent, type SurfaceGesture, type SurfaceOptions, type SurfaceResponse, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, snapGuideToHUDDraw };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { A as HUDPolyline, C as marqueeToHUDDraw, D as HUDCanvasOptions, E as HUDCanvas, M as HUDRule, N as HUDScreenRect, O as HUDDraw, S as lassoToHUDDraw, T as snapGuideToHUDDraw, _ as Modifiers, a as RenderShape, b as SurfaceEvent, c as HUDStyle, d as Intent, f as IntentPhase, g as RotationCorner, h as ResizeDirection, i as OverlayElement, j as HUDRect, k as HUDLine, l as SelectionGroup, m as CursorIcon, n as MIN_CHROME_VISIBLE_SIZE, o as Surface, p as SurfaceGesture, r as MIN_HIT_SIZE, s as SurfaceOptions, t as HitShape, u as SelectionShape, v as NO_MODS, w as measurementToHUDDraw, x as SurfaceResponse, y as PointerButton } from "./index-DRBeSiI2.js";
+export { type CursorIcon, HUDCanvas, type HUDCanvasOptions, type HUDDraw, type HUDLine, type HUDPolyline, type HUDRect, type HUDRule, type HUDScreenRect, type HUDStyle, type HitShape, type Intent, type IntentPhase, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, type Modifiers, NO_MODS, type OverlayElement, type PointerButton, type RenderShape, type ResizeDirection, type RotationCorner, type SelectionGroup, type SelectionShape, Surface, type SurfaceEvent, type SurfaceGesture, type SurfaceOptions, type SurfaceResponse, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, snapGuideToHUDDraw };

package/dist/index.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_surface = require("./surface-CNlBaEXn.js");
+exports.HUDCanvas = require_surface.HUDCanvas;
+exports.MIN_CHROME_VISIBLE_SIZE = require_surface.MIN_CHROME_VISIBLE_SIZE;
+exports.MIN_HIT_SIZE = require_surface.MIN_HIT_SIZE;
+exports.NO_MODS = require_surface.NO_MODS;
+exports.Surface = require_surface.Surface;
+exports.lassoToHUDDraw = require_surface.lassoToHUDDraw;
+exports.marqueeToHUDDraw = require_surface.marqueeToHUDDraw;
+exports.measurementToHUDDraw = require_surface.measurementToHUDDraw;
+exports.snapGuideToHUDDraw = require_surface.snapGuideToHUDDraw;

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import { a as lassoToHUDDraw, c as snapGuideToHUDDraw, i as NO_MODS, l as HUDCanvas, n as MIN_CHROME_VISIBLE_SIZE, o as marqueeToHUDDraw, r as MIN_HIT_SIZE, s as measurementToHUDDraw, t as Surface } from "./surface-hUEeEVdL.mjs";
+export { HUDCanvas, MIN_CHROME_VISIBLE_SIZE, MIN_HIT_SIZE, NO_MODS, Surface, lassoToHUDDraw, marqueeToHUDDraw, measurementToHUDDraw, snapGuideToHUDDraw };

package/dist/react.d.mts

@@ -0,0 +1,73 @@
+import { O as HUDDraw, o as Surface, s as SurfaceOptions } from "./index-CBqCh-ZM.mjs";
+import { Measurement } from "@grida/cmath/_measurement";
+import cmath from "@grida/cmath";
+import * as React from "react";
+import { SnapResult } from "@grida/cmath/_snap";
+
+//#region react.d.ts
+/**
+ * Instantiate a `Surface` against the given canvas element and return the
+ * imperative instance. The surface is created once and reused across renders;
+ * its providers are kept up to date via refs so the host can pass new
+ * closures freely.
+ *
+ * The hook does **not** wire pointer events — the host attaches listeners
+ * to whatever element it wants (usually the canvas's container) and calls
+ * `surface.dispatch(event)` directly. This keeps the hook framework-agnostic
+ * past React's lifecycle.
+ */
+declare function useHUDSurface(canvasRef: React.RefObject<HTMLCanvasElement | null>, options: SurfaceOptions): Surface | null;
+interface HUDOverlayProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  draw: HUDDraw | undefined;
+  color?: string;
+  className?: string;
+}
+/**
+ * Generic HUD overlay component.
+ *
+ * Renders a `<canvas>` element driven by {@link HUDCanvas}. Pass a
+ * pre-built {@link HUDDraw} command list to control what is drawn.
+ */
+declare const HUDOverlay: React.FC<HUDOverlayProps>;
+interface SnapGuideProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  snapping: SnapResult | undefined;
+  color?: string;
+  className?: string;
+}
+declare const SnapGuide: React.FC<SnapGuideProps>;
+interface MeasurementGuideProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  measurement: Measurement | undefined;
+  color?: string;
+  className?: string;
+}
+declare const MeasurementGuide: React.FC<MeasurementGuideProps>;
+interface MarqueeProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  a: cmath.Vector2 | undefined;
+  b: cmath.Vector2 | undefined;
+  color?: string;
+  className?: string;
+}
+declare const Marquee: React.FC<MarqueeProps>;
+interface LassoProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  points: cmath.Vector2[] | undefined;
+  color?: string;
+  className?: string;
+}
+declare const Lasso: React.FC<LassoProps>;
+//#endregion
+export { HUDOverlay, HUDOverlayProps, Lasso, LassoProps, Marquee, MarqueeProps, MeasurementGuide, MeasurementGuideProps, SnapGuide, SnapGuideProps, useHUDSurface };

package/dist/react.d.ts

@@ -0,0 +1,73 @@
+import { O as HUDDraw, o as Surface, s as SurfaceOptions } from "./index-DRBeSiI2.js";
+import cmath from "@grida/cmath";
+import { SnapResult } from "@grida/cmath/_snap";
+import { Measurement } from "@grida/cmath/_measurement";
+import * as React from "react";
+
+//#region react.d.ts
+/**
+ * Instantiate a `Surface` against the given canvas element and return the
+ * imperative instance. The surface is created once and reused across renders;
+ * its providers are kept up to date via refs so the host can pass new
+ * closures freely.
+ *
+ * The hook does **not** wire pointer events — the host attaches listeners
+ * to whatever element it wants (usually the canvas's container) and calls
+ * `surface.dispatch(event)` directly. This keeps the hook framework-agnostic
+ * past React's lifecycle.
+ */
+declare function useHUDSurface(canvasRef: React.RefObject<HTMLCanvasElement | null>, options: SurfaceOptions): Surface | null;
+interface HUDOverlayProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  draw: HUDDraw | undefined;
+  color?: string;
+  className?: string;
+}
+/**
+ * Generic HUD overlay component.
+ *
+ * Renders a `<canvas>` element driven by {@link HUDCanvas}. Pass a
+ * pre-built {@link HUDDraw} command list to control what is drawn.
+ */
+declare const HUDOverlay: React.FC<HUDOverlayProps>;
+interface SnapGuideProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  snapping: SnapResult | undefined;
+  color?: string;
+  className?: string;
+}
+declare const SnapGuide: React.FC<SnapGuideProps>;
+interface MeasurementGuideProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  measurement: Measurement | undefined;
+  color?: string;
+  className?: string;
+}
+declare const MeasurementGuide: React.FC<MeasurementGuideProps>;
+interface MarqueeProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  a: cmath.Vector2 | undefined;
+  b: cmath.Vector2 | undefined;
+  color?: string;
+  className?: string;
+}
+declare const Marquee: React.FC<MarqueeProps>;
+interface LassoProps {
+  width: number;
+  height: number;
+  transform: cmath.Transform;
+  points: cmath.Vector2[] | undefined;
+  color?: string;
+  className?: string;
+}
+declare const Lasso: React.FC<LassoProps>;
+//#endregion
+export { HUDOverlay, HUDOverlayProps, Lasso, LassoProps, Marquee, MarqueeProps, MeasurementGuide, MeasurementGuideProps, SnapGuide, SnapGuideProps, useHUDSurface };

package/dist/react.js

@@ -0,0 +1,124 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_surface = require("./surface-CNlBaEXn.js");
+let react = require("react");
+react = require_surface.__toESM(react);
+let _grida_cmath__snap = require("@grida/cmath/_snap");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region react.tsx
+/**
+* Instantiate a `Surface` against the given canvas element and return the
+* imperative instance. The surface is created once and reused across renders;
+* its providers are kept up to date via refs so the host can pass new
+* closures freely.
+*
+* The hook does **not** wire pointer events — the host attaches listeners
+* to whatever element it wants (usually the canvas's container) and calls
+* `surface.dispatch(event)` directly. This keeps the hook framework-agnostic
+* past React's lifecycle.
+*/
+function useHUDSurface(canvasRef, options) {
+	const [surface, setSurface] = react.useState(null);
+	const pickRef = react.useRef(options.pick);
+	const shapeOfRef = react.useRef(options.shapeOf);
+	const onIntentRef = react.useRef(options.onIntent);
+	pickRef.current = options.pick;
+	shapeOfRef.current = options.shapeOf;
+	onIntentRef.current = options.onIntent;
+	react.useLayoutEffect(() => {
+		if (!canvasRef.current) return;
+		const s = new require_surface.Surface(canvasRef.current, {
+			pick: (p) => pickRef.current(p),
+			shapeOf: (id) => shapeOfRef.current(id),
+			onIntent: (i) => onIntentRef.current(i),
+			style: options.style,
+			readonly: options.readonly,
+			color: options.color
+		});
+		setSurface(s);
+		return () => {
+			s.dispose();
+			setSurface(null);
+		};
+	}, [canvasRef]);
+	react.useEffect(() => {
+		if (!surface) return;
+		if (options.style) surface.setStyle(options.style);
+		if (options.readonly !== void 0) surface.setReadonly(options.readonly);
+	}, [
+		surface,
+		options.style,
+		options.readonly
+	]);
+	return surface;
+}
+/**
+* Generic HUD overlay component.
+*
+* Renders a `<canvas>` element driven by {@link HUDCanvas}. Pass a
+* pre-built {@link HUDDraw} command list to control what is drawn.
+*/
+const HUDOverlay = (props) => {
+	const canvasRef = react.useRef(null);
+	const rendererRef = react.useRef(null);
+	react.useLayoutEffect(() => {
+		if (!canvasRef.current) return;
+		if (!rendererRef.current) rendererRef.current = new require_surface.HUDCanvas(canvasRef.current, { color: props.color });
+		rendererRef.current.setColor(props.color);
+		rendererRef.current.setSize(props.width, props.height);
+		rendererRef.current.setTransform(props.transform);
+		rendererRef.current.draw(props.draw);
+	}, [
+		props.width,
+		props.height,
+		props.transform,
+		props.draw,
+		props.color
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		ref: canvasRef,
+		style: {
+			width: props.width,
+			height: props.height,
+			pointerEvents: "none"
+		},
+		className: props.className
+	});
+};
+const SnapGuide = (props) => {
+	const draw = react.useMemo(() => {
+		return require_surface.snapGuideToHUDDraw(props.snapping ? _grida_cmath__snap.guide.plot(props.snapping) : void 0);
+	}, [props.snapping]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+const MeasurementGuide = (props) => {
+	const draw = react.useMemo(() => props.measurement ? require_surface.measurementToHUDDraw(props.measurement) : void 0, [props.measurement]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+const Marquee = (props) => {
+	const draw = react.useMemo(() => props.a && props.b ? require_surface.marqueeToHUDDraw(props.a, props.b) : void 0, [props.a, props.b]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+const Lasso = (props) => {
+	const draw = react.useMemo(() => props.points ? require_surface.lassoToHUDDraw(props.points) : void 0, [props.points]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+//#endregion
+exports.HUDOverlay = HUDOverlay;
+exports.Lasso = Lasso;
+exports.Marquee = Marquee;
+exports.MeasurementGuide = MeasurementGuide;
+exports.SnapGuide = SnapGuide;
+exports.useHUDSurface = useHUDSurface;

package/dist/react.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { a as lassoToHUDDraw, c as snapGuideToHUDDraw, l as HUDCanvas, o as marqueeToHUDDraw, s as measurementToHUDDraw, t as Surface } from "./surface-hUEeEVdL.mjs";
+import * as React from "react";
+import { guide } from "@grida/cmath/_snap";
+import { jsx } from "react/jsx-runtime";
+//#region react.tsx
+/**
+* Instantiate a `Surface` against the given canvas element and return the
+* imperative instance. The surface is created once and reused across renders;
+* its providers are kept up to date via refs so the host can pass new
+* closures freely.
+*
+* The hook does **not** wire pointer events — the host attaches listeners
+* to whatever element it wants (usually the canvas's container) and calls
+* `surface.dispatch(event)` directly. This keeps the hook framework-agnostic
+* past React's lifecycle.
+*/
+function useHUDSurface(canvasRef, options) {
+	const [surface, setSurface] = React.useState(null);
+	const pickRef = React.useRef(options.pick);
+	const shapeOfRef = React.useRef(options.shapeOf);
+	const onIntentRef = React.useRef(options.onIntent);
+	pickRef.current = options.pick;
+	shapeOfRef.current = options.shapeOf;
+	onIntentRef.current = options.onIntent;
+	React.useLayoutEffect(() => {
+		if (!canvasRef.current) return;
+		const s = new Surface(canvasRef.current, {
+			pick: (p) => pickRef.current(p),
+			shapeOf: (id) => shapeOfRef.current(id),
+			onIntent: (i) => onIntentRef.current(i),
+			style: options.style,
+			readonly: options.readonly,
+			color: options.color
+		});
+		setSurface(s);
+		return () => {
+			s.dispose();
+			setSurface(null);
+		};
+	}, [canvasRef]);
+	React.useEffect(() => {
+		if (!surface) return;
+		if (options.style) surface.setStyle(options.style);
+		if (options.readonly !== void 0) surface.setReadonly(options.readonly);
+	}, [
+		surface,
+		options.style,
+		options.readonly
+	]);
+	return surface;
+}
+/**
+* Generic HUD overlay component.
+*
+* Renders a `<canvas>` element driven by {@link HUDCanvas}. Pass a
+* pre-built {@link HUDDraw} command list to control what is drawn.
+*/
+const HUDOverlay = (props) => {
+	const canvasRef = React.useRef(null);
+	const rendererRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		if (!canvasRef.current) return;
+		if (!rendererRef.current) rendererRef.current = new HUDCanvas(canvasRef.current, { color: props.color });
+		rendererRef.current.setColor(props.color);
+		rendererRef.current.setSize(props.width, props.height);
+		rendererRef.current.setTransform(props.transform);
+		rendererRef.current.draw(props.draw);
+	}, [
+		props.width,
+		props.height,
+		props.transform,
+		props.draw,
+		props.color
+	]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		style: {
+			width: props.width,
+			height: props.height,
+			pointerEvents: "none"
+		},
+		className: props.className
+	});
+};
+const SnapGuide = (props) => {
+	const draw = React.useMemo(() => {
+		return snapGuideToHUDDraw(props.snapping ? guide.plot(props.snapping) : void 0);
+	}, [props.snapping]);
+	return /* @__PURE__ */ jsx(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+const MeasurementGuide = (props) => {
+	const draw = React.useMemo(() => props.measurement ? measurementToHUDDraw(props.measurement) : void 0, [props.measurement]);
+	return /* @__PURE__ */ jsx(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+const Marquee = (props) => {
+	const draw = React.useMemo(() => props.a && props.b ? marqueeToHUDDraw(props.a, props.b) : void 0, [props.a, props.b]);
+	return /* @__PURE__ */ jsx(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+const Lasso = (props) => {
+	const draw = React.useMemo(() => props.points ? lassoToHUDDraw(props.points) : void 0, [props.points]);
+	return /* @__PURE__ */ jsx(HUDOverlay, {
+		...props,
+		draw
+	});
+};
+//#endregion
+export { HUDOverlay, Lasso, Marquee, MeasurementGuide, SnapGuide, useHUDSurface };