@invinite-org/chartlang-adapter-kit 1.3.0 → 1.5.0

package/dist/geometry/kinds/annotations.js

@@ -0,0 +1,219 @@
+// Copyright (c) 2026 Invinite. Licensed under the MIT License.
+// See the LICENSE file in the repo root for full license text.
+//
+// Annotation geometry moved from the canvas2d adapter's per-kind
+// renderers
+//   examples/canvas2d-adapter/src/render/draw/{text,arrow,arrowMarker,
+//   arrowMarkUp,arrowMarkDown}.ts.
+// The originating math is invinite's text / arrow / arrow-marker /
+// arrow-mark-up / arrow-mark-down tools (commit
+// 078f41fe2569d659d5aba726da8bcb5d3e2ced02, © Invinite); re-licensed
+// MIT for chartlang.
+import { arrowheadPolygon } from "../_lib/arrowhead.js";
+import { chevronPolygon } from "../_lib/chevron.js";
+import { dashPattern } from "../_lib/dash.js";
+import { resolveTextOpts } from "../_lib/textStyle.js";
+import { worldPointToPixel } from "../project.js";
+const DEFAULT_LINE_COLOR = "#000000";
+const DEFAULT_LINE_WIDTH = 1;
+const DEFAULT_ARROW_MARKER_COLOR = "#3b82f6"; // invinite toolbar blue
+const DEFAULT_MARK_UP_COLOR = "#22c55e";
+const DEFAULT_MARK_DOWN_COLOR = "#ef4444";
+const SOLID_FILL_ALPHA = 1;
+const ARROW_LABEL_FONT = "12px sans-serif";
+const ARROW_LABEL_VERTICAL_OFFSET = 4;
+const MARKER_DOT_RADIUS = 3;
+const MARKER_STUB_DX = 16;
+const MARKER_STUB_DY = -8;
+const MARKER_TEXT_OFFSET_X = 6;
+const MARKER_TEXT_FONT = "12px sans-serif";
+const TWO_PI = Math.PI * 2;
+/**
+ * Decompose a `text` drawing — a single label at the projected anchor,
+ * its font / alignment / colour resolved from `TextOpts`. `bgColor` is
+ * carried through onto the IR `text` primitive (adapters that can paint
+ * a background rect may use it; the canvas sink ignores it).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: TextState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeText(s, v);
+ *     // prims[0].kind === "text"
+ *     void prims;
+ */
+export function decomposeText(state, view) {
+    const anchor = worldPointToPixel(state.anchor, view);
+    const resolved = resolveTextOpts(state.style);
+    return [
+        {
+            kind: "text",
+            x: anchor.x,
+            y: anchor.y,
+            text: state.body,
+            color: resolved.color,
+            font: resolved.font,
+            align: resolved.align,
+            baseline: resolved.baseline,
+            ...(state.style.bgColor === undefined ? {} : { bgColor: state.style.bgColor }),
+        },
+    ];
+}
+/**
+ * Decompose an `arrow` drawing — a stroked shaft, a filled arrowhead
+ * triangle at the head anchor, and an optional label at the shaft
+ * midpoint. Stroke and arrowhead fill share `style.color`.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: ArrowState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeArrow(s, v);
+ *     // prims[0].kind === "polyline"; prims[1].kind === "polyline"
+ *     void prims;
+ */
+export function decomposeArrow(state, view) {
+    const from = worldPointToPixel(state.anchors[0], view);
+    const to = worldPointToPixel(state.anchors[1], view);
+    const color = state.style.color ?? DEFAULT_LINE_COLOR;
+    const out = [
+        {
+            kind: "polyline",
+            points: [from, to],
+            closed: false,
+            stroke: {
+                color,
+                width: state.style.lineWidth ?? DEFAULT_LINE_WIDTH,
+                dash: dashPattern(state.style.lineStyle ?? "solid"),
+            },
+        },
+        {
+            kind: "polyline",
+            points: arrowheadPolygon(from, to),
+            closed: true,
+            fill: { color, alpha: SOLID_FILL_ALPHA },
+        },
+    ];
+    if (state.style.label !== undefined) {
+        out.push({
+            kind: "text",
+            x: (from.x + to.x) / 2,
+            y: (from.y + to.y) / 2 - ARROW_LABEL_VERTICAL_OFFSET,
+            text: state.style.label,
+            color,
+            font: ARROW_LABEL_FONT,
+            align: "center",
+            baseline: "bottom",
+        });
+    }
+    return out;
+}
+/**
+ * Decompose an `arrow-marker` drawing — a self-contained compact glyph
+ * at the anchor: a filled dot, a short stub up + right, a filled
+ * arrowhead at the stub end, and optional text to the right. Default
+ * colour is `"#3b82f6"` (invinite toolbar blue).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: ArrowMarkerState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeArrowMarker(s, v);
+ *     void prims;
+ */
+export function decomposeArrowMarker(state, view) {
+    const anchor = worldPointToPixel(state.anchor, view);
+    const color = state.style.color ?? DEFAULT_ARROW_MARKER_COLOR;
+    const stubEnd = { x: anchor.x + MARKER_STUB_DX, y: anchor.y + MARKER_STUB_DY };
+    const out = [
+        {
+            kind: "arc",
+            cx: anchor.x,
+            cy: anchor.y,
+            r: MARKER_DOT_RADIUS,
+            start: 0,
+            end: TWO_PI,
+            closed: false,
+            fill: { color, alpha: SOLID_FILL_ALPHA },
+        },
+        {
+            kind: "polyline",
+            points: [anchor, stubEnd],
+            closed: false,
+            stroke: { color, width: DEFAULT_LINE_WIDTH, dash: dashPattern("solid") },
+        },
+        {
+            kind: "polyline",
+            points: arrowheadPolygon(anchor, stubEnd),
+            closed: true,
+            fill: { color, alpha: SOLID_FILL_ALPHA },
+        },
+    ];
+    if (state.style.text !== undefined) {
+        out.push({
+            kind: "text",
+            x: anchor.x + MARKER_TEXT_OFFSET_X,
+            y: anchor.y,
+            text: state.style.text,
+            color,
+            font: MARKER_TEXT_FONT,
+            align: "left",
+            baseline: "middle",
+        });
+    }
+    return out;
+}
+/**
+ * Decompose an `arrow-mark-up` drawing — a filled up-chevron glyph at
+ * the anchor. Default fill colour is `"#22c55e"` (green); an explicit
+ * `style.color` overrides.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: ArrowMarkUpState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeArrowMarkUp(s, v);
+ *     void prims;
+ */
+export function decomposeArrowMarkUp(state, view) {
+    const anchor = worldPointToPixel(state.anchor, view);
+    const color = state.style.color ?? DEFAULT_MARK_UP_COLOR;
+    return [
+        {
+            kind: "polyline",
+            points: chevronPolygon(anchor, "up"),
+            closed: true,
+            fill: { color, alpha: SOLID_FILL_ALPHA },
+        },
+    ];
+}
+/**
+ * Decompose an `arrow-mark-down` drawing — a filled down-chevron glyph
+ * at the anchor. Default fill colour is `"#ef4444"` (red); an explicit
+ * `style.color` overrides.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: ArrowMarkDownState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeArrowMarkDown(s, v);
+ *     void prims;
+ */
+export function decomposeArrowMarkDown(state, view) {
+    const anchor = worldPointToPixel(state.anchor, view);
+    const color = state.style.color ?? DEFAULT_MARK_DOWN_COLOR;
+    return [
+        {
+            kind: "polyline",
+            points: chevronPolygon(anchor, "down"),
+            closed: true,
+            fill: { color, alpha: SOLID_FILL_ALPHA },
+        },
+    ];
+}
+//# sourceMappingURL=annotations.js.map

package/dist/geometry/kinds/annotations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.js","sourceRoot":"","sources":["../../../src/geometry/kinds/annotations.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) 2026 Invinite. Licensed under the MIT License.\n// See the LICENSE file in the repo root for full license text.\n//\n// Annotation geometry moved from the canvas2d adapter's per-kind\n// renderers\n//   examples/canvas2d-adapter/src/render/draw/{text,arrow,arrowMarker,\n//   arrowMarkUp,arrowMarkDown}.ts.\n// The originating math is invinite's text / arrow / arrow-marker /\n// arrow-mark-up / arrow-mark-down tools (commit\n// 078f41fe2569d659d5aba726da8bcb5d3e2ced02, © Invinite); re-licensed\n// MIT for chartlang.\n\nimport type {\n    ArrowMarkDownState,\n    ArrowMarkUpState,\n    ArrowMarkerState,\n    ArrowState,\n    TextState,\n} from \"@invinite-org/chartlang-core\";\n\nimport { arrowheadPolygon } from \"../_lib/arrowhead.js\";\nimport { chevronPolygon } from \"../_lib/chevron.js\";\nimport { dashPattern } from \"../_lib/dash.js\";\nimport { resolveTextOpts } from \"../_lib/textStyle.js\";\nimport { worldPointToPixel } from \"../project.js\";\nimport type { DrawPrimitive, Viewport } from \"../types.js\";\n\nconst DEFAULT_LINE_COLOR = \"#000000\";\nconst DEFAULT_LINE_WIDTH = 1;\nconst DEFAULT_ARROW_MARKER_COLOR = \"#3b82f6\"; // invinite toolbar blue\nconst DEFAULT_MARK_UP_COLOR = \"#22c55e\";\nconst DEFAULT_MARK_DOWN_COLOR = \"#ef4444\";\nconst SOLID_FILL_ALPHA = 1;\nconst ARROW_LABEL_FONT = \"12px sans-serif\";\nconst ARROW_LABEL_VERTICAL_OFFSET = 4;\nconst MARKER_DOT_RADIUS = 3;\nconst MARKER_STUB_DX = 16;\nconst MARKER_STUB_DY = -8;\nconst MARKER_TEXT_OFFSET_X = 6;\nconst MARKER_TEXT_FONT = \"12px sans-serif\";\nconst TWO_PI = Math.PI * 2;\n\n/**\n * Decompose a `text` drawing — a single label at the projected anchor,\n * its font / alignment / colour resolved from `TextOpts`. `bgColor` is\n * carried through onto the IR `text` primitive (adapters that can paint\n * a background rect may use it; the canvas sink ignores it).\n *\n * @since 1.3\n * @stable\n * @example\n *     declare const s: TextState;\n *     declare const v: Viewport;\n *     const prims = decomposeText(s, v);\n *     // prims[0].kind === \"text\"\n *     void prims;\n */\nexport function decomposeText(state: TextState, view: Viewport): ReadonlyArray<DrawPrimitive> {\n    const anchor = worldPointToPixel(state.anchor, view);\n    const resolved = resolveTextOpts(state.style);\n    return [\n        {\n            kind: \"text\",\n            x: anchor.x,\n            y: anchor.y,\n            text: state.body,\n            color: resolved.color,\n            font: resolved.font,\n            align: resolved.align,\n            baseline: resolved.baseline,\n            ...(state.style.bgColor === undefined ? {} : { bgColor: state.style.bgColor }),\n        },\n    ];\n}\n\n/**\n * Decompose an `arrow` drawing — a stroked shaft, a filled arrowhead\n * triangle at the head anchor, and an optional label at the shaft\n * midpoint. Stroke and arrowhead fill share `style.color`.\n *\n * @since 1.3\n * @stable\n * @example\n *     declare const s: ArrowState;\n *     declare const v: Viewport;\n *     const prims = decomposeArrow(s, v);\n *     // prims[0].kind === \"polyline\"; prims[1].kind === \"polyline\"\n *     void prims;\n */\nexport function decomposeArrow(state: ArrowState, view: Viewport): ReadonlyArray<DrawPrimitive> {\n    const from = worldPointToPixel(state.anchors[0], view);\n    const to = worldPointToPixel(state.anchors[1], view);\n    const color = state.style.color ?? DEFAULT_LINE_COLOR;\n    const out: DrawPrimitive[] = [\n        {\n            kind: \"polyline\",\n            points: [from, to],\n            closed: false,\n            stroke: {\n                color,\n                width: state.style.lineWidth ?? DEFAULT_LINE_WIDTH,\n                dash: dashPattern(state.style.lineStyle ?? \"solid\"),\n            },\n        },\n        {\n            kind: \"polyline\",\n            points: arrowheadPolygon(from, to),\n            closed: true,\n            fill: { color, alpha: SOLID_FILL_ALPHA },\n        },\n    ];\n    if (state.style.label !== undefined) {\n        out.push({\n            kind: \"text\",\n            x: (from.x + to.x) / 2,\n            y: (from.y + to.y) / 2 - ARROW_LABEL_VERTICAL_OFFSET,\n            text: state.style.label,\n            color,\n            font: ARROW_LABEL_FONT,\n            align: \"center\",\n            baseline: \"bottom\",\n        });\n    }\n    return out;\n}\n\n/**\n * Decompose an `arrow-marker` drawing — a self-contained compact glyph\n * at the anchor: a filled dot, a short stub up + right, a filled\n * arrowhead at the stub end, and optional text to the right. Default\n * colour is `\"#3b82f6\"` (invinite toolbar blue).\n *\n * @since 1.3\n * @stable\n * @example\n *     declare const s: ArrowMarkerState;\n *     declare const v: Viewport;\n *     const prims = decomposeArrowMarker(s, v);\n *     void prims;\n */\nexport function decomposeArrowMarker(\n    state: ArrowMarkerState,\n    view: Viewport,\n): ReadonlyArray<DrawPrimitive> {\n    const anchor = worldPointToPixel(state.anchor, view);\n    const color = state.style.color ?? DEFAULT_ARROW_MARKER_COLOR;\n    const stubEnd = { x: anchor.x + MARKER_STUB_DX, y: anchor.y + MARKER_STUB_DY };\n    const out: DrawPrimitive[] = [\n        {\n            kind: \"arc\",\n            cx: anchor.x,\n            cy: anchor.y,\n            r: MARKER_DOT_RADIUS,\n            start: 0,\n            end: TWO_PI,\n            closed: false,\n            fill: { color, alpha: SOLID_FILL_ALPHA },\n        },\n        {\n            kind: \"polyline\",\n            points: [anchor, stubEnd],\n            closed: false,\n            stroke: { color, width: DEFAULT_LINE_WIDTH, dash: dashPattern(\"solid\") },\n        },\n        {\n            kind: \"polyline\",\n            points: arrowheadPolygon(anchor, stubEnd),\n            closed: true,\n            fill: { color, alpha: SOLID_FILL_ALPHA },\n        },\n    ];\n    if (state.style.text !== undefined) {\n        out.push({\n            kind: \"text\",\n            x: anchor.x + MARKER_TEXT_OFFSET_X,\n            y: anchor.y,\n            text: state.style.text,\n            color,\n            font: MARKER_TEXT_FONT,\n            align: \"left\",\n            baseline: \"middle\",\n        });\n    }\n    return out;\n}\n\n/**\n * Decompose an `arrow-mark-up` drawing — a filled up-chevron glyph at\n * the anchor. Default fill colour is `\"#22c55e\"` (green); an explicit\n * `style.color` overrides.\n *\n * @since 1.3\n * @stable\n * @example\n *     declare const s: ArrowMarkUpState;\n *     declare const v: Viewport;\n *     const prims = decomposeArrowMarkUp(s, v);\n *     void prims;\n */\nexport function decomposeArrowMarkUp(\n    state: ArrowMarkUpState,\n    view: Viewport,\n): ReadonlyArray<DrawPrimitive> {\n    const anchor = worldPointToPixel(state.anchor, view);\n    const color = state.style.color ?? DEFAULT_MARK_UP_COLOR;\n    return [\n        {\n            kind: \"polyline\",\n            points: chevronPolygon(anchor, \"up\"),\n            closed: true,\n            fill: { color, alpha: SOLID_FILL_ALPHA },\n        },\n    ];\n}\n\n/**\n * Decompose an `arrow-mark-down` drawing — a filled down-chevron glyph\n * at the anchor. Default fill colour is `\"#ef4444\"` (red); an explicit\n * `style.color` overrides.\n *\n * @since 1.3\n * @stable\n * @example\n *     declare const s: ArrowMarkDownState;\n *     declare const v: Viewport;\n *     const prims = decomposeArrowMarkDown(s, v);\n *     void prims;\n */\nexport function decomposeArrowMarkDown(\n    state: ArrowMarkDownState,\n    view: Viewport,\n): ReadonlyArray<DrawPrimitive> {\n    const anchor = worldPointToPixel(state.anchor, view);\n    const color = state.style.color ?? DEFAULT_MARK_DOWN_COLOR;\n    return [\n        {\n            kind: \"polyline\",\n            points: chevronPolygon(anchor, \"down\"),\n            closed: true,\n            fill: { color, alpha: SOLID_FILL_ALPHA },\n        },\n    ];\n}\n"]}

package/dist/geometry/kinds/boxes.d.ts

@@ -0,0 +1,116 @@
+import type { CircleState, EllipseState, FillBetweenState, PathState, PolylineState, RectangleState, RotatedRectangleState, TriangleState } from "@invinite-org/chartlang-core";
+import type { DrawPrimitive, Viewport } from "../types.js";
+/**
+ * Decompose a `rectangle` drawing — a closed 4-corner polygon derived
+ * from the axis-aligned bounding box of the two projected anchors.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: RectangleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeRectangle(s, v);
+ *     // prims[0].kind === "polyline"; prims[0].closed === true
+ *     void prims;
+ */
+export declare function decomposeRectangle(state: RectangleState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose a `rotated-rectangle` drawing — a closed polygon through
+ * the four projected anchors (carried in stroke order, so no matrix
+ * math is needed).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: RotatedRectangleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeRotatedRectangle(s, v);
+ *     void prims;
+ */
+export declare function decomposeRotatedRectangle(state: RotatedRectangleState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose a `triangle` drawing — a closed 3-vertex polygon.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: TriangleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeTriangle(s, v);
+ *     void prims;
+ */
+export declare function decomposeTriangle(state: TriangleState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose a `polyline` drawing — a closed N-vertex polyline carrying
+ * a `LineDrawStyle` (no fill).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: PolylineState;
+ *     declare const v: Viewport;
+ *     const prims = decomposePolyline(s, v);
+ *     // prims[0].closed === true
+ *     void prims;
+ */
+export declare function decomposePolyline(state: PolylineState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose a `circle` drawing — an arc whose radius is the projected
+ * pixel distance between the centre anchor and the radius anchor (so
+ * the stroke keeps the same apparent thickness across zoom changes).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: CircleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeCircle(s, v);
+ *     // prims[0].kind === "arc"
+ *     void prims;
+ */
+export declare function decomposeCircle(state: CircleState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose an axis-aligned `ellipse` drawing — a closed
+ * {@link ELLIPSE_SEGMENTS}-segment polyline inscribed in the bounding
+ * box of the two anchors. Rotated ellipses are out of scope.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: EllipseState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeEllipse(s, v);
+ *     void prims;
+ */
+export declare function decomposeEllipse(state: EllipseState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose a `path` drawing — an OPEN N-vertex polyline (unless
+ * `style.closed === true`) carrying a `PathOpts` style (no fill).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: PathState;
+ *     declare const v: Viewport;
+ *     const prims = decomposePath(s, v);
+ *     void prims;
+ */
+export declare function decomposePath(state: PathState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+/**
+ * Decompose a `fill-between` drawing — a closed filled polygon walking
+ * `edgeA` forward then `edgeB` in reverse. The optional outline strokes
+ * only when `style.color` is set; the band fills only when `style.fill`
+ * is set. A degenerate edge (`< 1` point) or a non-finite mapped anchor
+ * is a silent no-op (returns `[]`), matching the source renderer's
+ * warmup behaviour.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: FillBetweenState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeFillBetween(s, v);
+ *     void prims;
+ */
+export declare function decomposeFillBetween(state: FillBetweenState, view: Viewport): ReadonlyArray<DrawPrimitive>;
+//# sourceMappingURL=boxes.d.ts.map

package/dist/geometry/kinds/boxes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boxes.d.ts","sourceRoot":"","sources":["../../../src/geometry/kinds/boxes.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACR,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,aAAa,EAChB,MAAM,8BAA8B,CAAC;AAKtC,OAAO,KAAK,EAAE,aAAa,EAAU,QAAQ,EAAE,MAAM,aAAa,CAAC;AAcnE;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAC9B,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,QAAQ,GACf,aAAa,CAAC,aAAa,CAAC,CAsB9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,yBAAyB,CACrC,KAAK,EAAE,qBAAqB,EAC5B,IAAI,EAAE,QAAQ,GACf,aAAa,CAAC,aAAa,CAAC,CAY9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,QAAQ,GACf,aAAa,CAAC,aAAa,CAAC,CAY9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,QAAQ,GACf,aAAa,CAAC,aAAa,CAAC,CAc9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,CAkBhG;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC5B,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,QAAQ,GACf,aAAa,CAAC,aAAa,CAAC,CAsB9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,CAc5F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,QAAQ,GACf,aAAa,CAAC,aAAa,CAAC,CA4B9B"}

package/dist/geometry/kinds/boxes.js

@@ -0,0 +1,285 @@
+// Copyright (c) 2026 Invinite. Licensed under the MIT License.
+// See the LICENSE file in the repo root for full license text.
+//
+// Stroke + fill geometry moved from the canvas2d adapter's per-kind
+// shape renderers
+//   examples/canvas2d-adapter/src/render/draw/{rectangle,
+//   rotatedRectangle,triangle,polyline,circle,ellipse,path,
+//   fillBetween}.ts.
+// The originating math is invinite's rectangle / rotated-rectangle /
+// triangle / polyline / circle / ellipse / path tools (commit
+// 078f41fe2569d659d5aba726da8bcb5d3e2ced02, © Invinite); re-licensed
+// MIT for chartlang.
+import { dashPattern } from "../_lib/dash.js";
+import { resolveShapeStyle } from "../_lib/shapeStyle.js";
+import { worldPointToPixel } from "../project.js";
+const DEFAULT_LINE_WIDTH = 1;
+const DEFAULT_FILL_ALPHA = 1;
+const TWO_PI = Math.PI * 2;
+/**
+ * Number of polyline segments used to approximate an `ellipse`. 64
+ * segments give visually smooth strokes at typical viewport widths
+ * (≈800 px) while keeping the primitive list bounded — matching the
+ * canvas2d source renderer exactly.
+ */
+const ELLIPSE_SEGMENTS = 64;
+/**
+ * Decompose a `rectangle` drawing — a closed 4-corner polygon derived
+ * from the axis-aligned bounding box of the two projected anchors.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: RectangleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeRectangle(s, v);
+ *     // prims[0].kind === "polyline"; prims[0].closed === true
+ *     void prims;
+ */
+export function decomposeRectangle(state, view) {
+    const a = worldPointToPixel(state.anchors[0], view);
+    const b = worldPointToPixel(state.anchors[1], view);
+    const xMin = Math.min(a.x, b.x);
+    const xMax = Math.max(a.x, b.x);
+    const yMin = Math.min(a.y, b.y);
+    const yMax = Math.max(a.y, b.y);
+    const { stroke, fill } = resolveShapeStyle(state.style);
+    return [
+        {
+            kind: "polyline",
+            points: [
+                { x: xMin, y: yMin },
+                { x: xMax, y: yMin },
+                { x: xMax, y: yMax },
+                { x: xMin, y: yMax },
+            ],
+            closed: true,
+            stroke,
+            ...(fill === undefined ? {} : { fill }),
+        },
+    ];
+}
+/**
+ * Decompose a `rotated-rectangle` drawing — a closed polygon through
+ * the four projected anchors (carried in stroke order, so no matrix
+ * math is needed).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: RotatedRectangleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeRotatedRectangle(s, v);
+ *     void prims;
+ */
+export function decomposeRotatedRectangle(state, view) {
+    const points = state.anchors.map((p) => worldPointToPixel(p, view));
+    const { stroke, fill } = resolveShapeStyle(state.style);
+    return [
+        {
+            kind: "polyline",
+            points,
+            closed: true,
+            stroke,
+            ...(fill === undefined ? {} : { fill }),
+        },
+    ];
+}
+/**
+ * Decompose a `triangle` drawing — a closed 3-vertex polygon.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: TriangleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeTriangle(s, v);
+ *     void prims;
+ */
+export function decomposeTriangle(state, view) {
+    const points = state.anchors.map((p) => worldPointToPixel(p, view));
+    const { stroke, fill } = resolveShapeStyle(state.style);
+    return [
+        {
+            kind: "polyline",
+            points,
+            closed: true,
+            stroke,
+            ...(fill === undefined ? {} : { fill }),
+        },
+    ];
+}
+/**
+ * Decompose a `polyline` drawing — a closed N-vertex polyline carrying
+ * a `LineDrawStyle` (no fill).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: PolylineState;
+ *     declare const v: Viewport;
+ *     const prims = decomposePolyline(s, v);
+ *     // prims[0].closed === true
+ *     void prims;
+ */
+export function decomposePolyline(state, view) {
+    const points = state.anchors.map((p) => worldPointToPixel(p, view));
+    return [
+        {
+            kind: "polyline",
+            points,
+            closed: true,
+            stroke: {
+                color: state.style.color ?? "#000000",
+                width: state.style.lineWidth ?? DEFAULT_LINE_WIDTH,
+                dash: dashPattern(state.style.lineStyle ?? "solid"),
+            },
+        },
+    ];
+}
+/**
+ * Decompose a `circle` drawing — an arc whose radius is the projected
+ * pixel distance between the centre anchor and the radius anchor (so
+ * the stroke keeps the same apparent thickness across zoom changes).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: CircleState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeCircle(s, v);
+ *     // prims[0].kind === "arc"
+ *     void prims;
+ */
+export function decomposeCircle(state, view) {
+    const centre = worldPointToPixel(state.anchors[0], view);
+    const edge = worldPointToPixel(state.anchors[1], view);
+    const radius = Math.hypot(edge.x - centre.x, edge.y - centre.y);
+    const { stroke, fill } = resolveShapeStyle(state.style);
+    return [
+        {
+            kind: "arc",
+            cx: centre.x,
+            cy: centre.y,
+            r: radius,
+            start: 0,
+            end: TWO_PI,
+            closed: true,
+            stroke,
+            ...(fill === undefined ? {} : { fill }),
+        },
+    ];
+}
+/**
+ * Decompose an axis-aligned `ellipse` drawing — a closed
+ * {@link ELLIPSE_SEGMENTS}-segment polyline inscribed in the bounding
+ * box of the two anchors. Rotated ellipses are out of scope.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: EllipseState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeEllipse(s, v);
+ *     void prims;
+ */
+export function decomposeEllipse(state, view) {
+    const a = worldPointToPixel(state.anchors[0], view);
+    const b = worldPointToPixel(state.anchors[1], view);
+    const cx = (a.x + b.x) / 2;
+    const cy = (a.y + b.y) / 2;
+    const rx = Math.abs(b.x - a.x) / 2;
+    const ry = Math.abs(b.y - a.y) / 2;
+    const points = [{ x: cx + rx, y: cy }];
+    for (let i = 1; i < ELLIPSE_SEGMENTS; i++) {
+        const theta = (i / ELLIPSE_SEGMENTS) * TWO_PI;
+        points.push({ x: cx + rx * Math.cos(theta), y: cy + ry * Math.sin(theta) });
+    }
+    const { stroke, fill } = resolveShapeStyle(state.style);
+    return [
+        {
+            kind: "polyline",
+            points,
+            closed: true,
+            stroke,
+            ...(fill === undefined ? {} : { fill }),
+        },
+    ];
+}
+/**
+ * Decompose a `path` drawing — an OPEN N-vertex polyline (unless
+ * `style.closed === true`) carrying a `PathOpts` style (no fill).
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: PathState;
+ *     declare const v: Viewport;
+ *     const prims = decomposePath(s, v);
+ *     void prims;
+ */
+export function decomposePath(state, view) {
+    const points = state.anchors.map((p) => worldPointToPixel(p, view));
+    return [
+        {
+            kind: "polyline",
+            points,
+            closed: state.style.closed === true,
+            stroke: {
+                color: state.style.color ?? "#000000",
+                width: state.style.lineWidth ?? DEFAULT_LINE_WIDTH,
+                dash: dashPattern(state.style.lineStyle ?? "solid"),
+            },
+        },
+    ];
+}
+/**
+ * Decompose a `fill-between` drawing — a closed filled polygon walking
+ * `edgeA` forward then `edgeB` in reverse. The optional outline strokes
+ * only when `style.color` is set; the band fills only when `style.fill`
+ * is set. A degenerate edge (`< 1` point) or a non-finite mapped anchor
+ * is a silent no-op (returns `[]`), matching the source renderer's
+ * warmup behaviour.
+ *
+ * @since 1.3
+ * @stable
+ * @example
+ *     declare const s: FillBetweenState;
+ *     declare const v: Viewport;
+ *     const prims = decomposeFillBetween(s, v);
+ *     void prims;
+ */
+export function decomposeFillBetween(state, view) {
+    const a = state.edgeA.map((p) => worldPointToPixel(p, view));
+    const b = state.edgeB.map((p) => worldPointToPixel(p, view));
+    if (a.length < 1 || b.length < 1)
+        return [];
+    if (a.some((p) => !Number.isFinite(p.x) || !Number.isFinite(p.y)))
+        return [];
+    if (b.some((p) => !Number.isFinite(p.x) || !Number.isFinite(p.y)))
+        return [];
+    const points = [...a];
+    for (let i = b.length - 1; i >= 0; i--)
+        points.push(b[i]);
+    const { color, fill } = state.style;
+    return [
+        {
+            kind: "polyline",
+            points,
+            closed: true,
+            ...(color === undefined
+                ? {}
+                : {
+                    stroke: {
+                        color,
+                        width: state.style.lineWidth ?? DEFAULT_LINE_WIDTH,
+                        dash: dashPattern(state.style.lineStyle ?? "solid"),
+                    },
+                }),
+            ...(fill === undefined
+                ? {}
+                : { fill: { color: fill, alpha: state.style.fillAlpha ?? DEFAULT_FILL_ALPHA } }),
+        },
+    ];
+}
+//# sourceMappingURL=boxes.js.map