canvasengine 2.0.0-beta.44 → 2.0.0-beta.46

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.
Files changed (83) hide show
  1. package/dist/components/Container.d.ts +86 -0
  2. package/dist/components/Container.d.ts.map +1 -0
  3. package/dist/components/DOMContainer.d.ts +98 -0
  4. package/dist/components/DOMContainer.d.ts.map +1 -0
  5. package/dist/components/DOMElement.d.ts +16 -5
  6. package/dist/components/DOMElement.d.ts.map +1 -1
  7. package/dist/components/DOMSprite.d.ts +108 -0
  8. package/dist/components/DOMSprite.d.ts.map +1 -0
  9. package/dist/components/DisplayObject.d.ts +94 -0
  10. package/dist/components/DisplayObject.d.ts.map +1 -0
  11. package/dist/components/FocusContainer.d.ts +129 -0
  12. package/dist/components/FocusContainer.d.ts.map +1 -0
  13. package/dist/components/Mesh.d.ts +208 -0
  14. package/dist/components/Mesh.d.ts.map +1 -0
  15. package/dist/components/Sprite.d.ts +242 -0
  16. package/dist/components/Sprite.d.ts.map +1 -0
  17. package/dist/components/Viewport.d.ts +121 -0
  18. package/dist/components/Viewport.d.ts.map +1 -0
  19. package/dist/components/index.d.ts +2 -1
  20. package/dist/components/index.d.ts.map +1 -1
  21. package/dist/directives/Controls.d.ts +4 -4
  22. package/dist/directives/Controls.d.ts.map +1 -1
  23. package/dist/directives/ControlsBase.d.ts +1 -0
  24. package/dist/directives/ControlsBase.d.ts.map +1 -1
  25. package/dist/directives/FocusNavigation.d.ts +4 -22
  26. package/dist/directives/FocusNavigation.d.ts.map +1 -1
  27. package/dist/directives/KeyboardControls.d.ts +1 -0
  28. package/dist/directives/KeyboardControls.d.ts.map +1 -1
  29. package/dist/directives/Scheduler.d.ts.map +1 -1
  30. package/dist/directives/Shake.d.ts +1 -0
  31. package/dist/directives/Shake.d.ts.map +1 -1
  32. package/dist/engine/FocusManager.d.ts +10 -9
  33. package/dist/engine/FocusManager.d.ts.map +1 -1
  34. package/dist/engine/bootstrap.d.ts +1 -0
  35. package/dist/engine/bootstrap.d.ts.map +1 -1
  36. package/dist/engine/directive.d.ts +1 -1
  37. package/dist/engine/directive.d.ts.map +1 -1
  38. package/dist/engine/reactive.d.ts +10 -0
  39. package/dist/engine/reactive.d.ts.map +1 -1
  40. package/dist/engine/signal.d.ts +19 -19
  41. package/dist/engine/signal.d.ts.map +1 -1
  42. package/dist/hooks/useFocus.d.ts.map +1 -1
  43. package/dist/index-DaGekQUW.js +2218 -0
  44. package/dist/index-DaGekQUW.js.map +1 -0
  45. package/dist/index.d.ts +1 -0
  46. package/dist/index.d.ts.map +1 -1
  47. package/dist/index.global.js +3 -3
  48. package/dist/index.global.js.map +1 -1
  49. package/dist/index.js +11868 -86
  50. package/dist/index.js.map +1 -1
  51. package/dist/utils/tabindex.d.ts +16 -0
  52. package/dist/utils/tabindex.d.ts.map +1 -0
  53. package/package.json +1 -1
  54. package/src/components/DOMContainer.ts +186 -1
  55. package/src/components/DOMElement.ts +164 -37
  56. package/src/components/DOMSprite.ts +759 -0
  57. package/src/components/DisplayObject.ts +33 -7
  58. package/src/components/FocusContainer.ts +22 -26
  59. package/src/components/Sprite.ts +12 -3
  60. package/src/components/Text.ts +1 -1
  61. package/src/components/Viewport.ts +5 -5
  62. package/src/components/index.ts +2 -1
  63. package/src/directives/Controls.ts +5 -5
  64. package/src/directives/ControlsBase.ts +1 -0
  65. package/src/directives/FocusNavigation.ts +8 -146
  66. package/src/directives/KeyboardControls.ts +11 -2
  67. package/src/directives/Scheduler.ts +12 -4
  68. package/src/directives/Shake.ts +9 -6
  69. package/src/engine/FocusManager.ts +44 -29
  70. package/src/engine/bootstrap.ts +5 -2
  71. package/src/engine/directive.ts +2 -2
  72. package/src/engine/reactive.ts +137 -27
  73. package/src/engine/signal.ts +80 -23
  74. package/src/hooks/useFocus.ts +2 -5
  75. package/src/index.ts +2 -1
  76. package/src/types/pixi-cull.d.ts +7 -0
  77. package/src/utils/tabindex.ts +70 -0
  78. package/testing/index.ts +31 -3
  79. package/tsconfig.json +3 -2
  80. package/dist/DebugRenderer-P5sZ-0Tq.js +0 -172
  81. package/dist/DebugRenderer-P5sZ-0Tq.js.map +0 -1
  82. package/dist/index-VPoz4ufu.js +0 -13252
  83. package/dist/index-VPoz4ufu.js.map +0 -1
@@ -0,0 +1,70 @@
1
+ import { WritableSignal } from "@signe/reactive";
2
+
3
+ export type TabindexBoundaryMode = "wrap" | "clamp" | "none";
4
+
5
+ export type TabindexBounds =
6
+ | { count: () => number; min?: number }
7
+ | { min: number; max: number };
8
+
9
+ type TabindexNavigator = {
10
+ next: (delta: number) => void;
11
+ set: (value: number) => void;
12
+ };
13
+
14
+ function resolveBounds(bounds: TabindexBounds): { min: number; max: number; size: number } | null {
15
+ if ("count" in bounds) {
16
+ const count = bounds.count();
17
+ if (!Number.isFinite(count) || count <= 0) return null;
18
+ const min = bounds.min ?? 0;
19
+ const max = min + count - 1;
20
+ return { min, max, size: count };
21
+ }
22
+
23
+ const min = bounds.min;
24
+ const max = bounds.max;
25
+ if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return null;
26
+ return { min, max, size: max - min + 1 };
27
+ }
28
+
29
+ function normalizeValue(
30
+ value: number,
31
+ current: number,
32
+ bounds: { min: number; max: number; size: number },
33
+ mode: TabindexBoundaryMode
34
+ ): number {
35
+ if (mode === "clamp") {
36
+ return Math.min(bounds.max, Math.max(bounds.min, value));
37
+ }
38
+
39
+ if (mode === "none") {
40
+ return value < bounds.min || value > bounds.max ? current : value;
41
+ }
42
+
43
+ // wrap
44
+ const size = bounds.size;
45
+ if (size <= 0) return current;
46
+ const offset = value - bounds.min;
47
+ const wrapped = ((offset % size) + size) % size;
48
+ return bounds.min + wrapped;
49
+ }
50
+
51
+ export function createTabindexNavigator(
52
+ tabindex: WritableSignal<number>,
53
+ bounds: TabindexBounds,
54
+ mode: TabindexBoundaryMode = "wrap"
55
+ ): TabindexNavigator {
56
+ const applyValue = (value: number) => {
57
+ const current = tabindex();
58
+ const resolved = resolveBounds(bounds);
59
+ if (!resolved) return;
60
+ const nextValue = normalizeValue(value, current, resolved, mode);
61
+ if (nextValue !== current) {
62
+ tabindex.set(nextValue);
63
+ }
64
+ };
65
+
66
+ return {
67
+ next: (delta: number) => applyValue(tabindex() + delta),
68
+ set: (value: number) => applyValue(value),
69
+ };
70
+ }
package/testing/index.ts CHANGED
@@ -1,12 +1,40 @@
1
1
  import { bootstrapCanvas, Canvas, ComponentInstance, Element, h } from "canvasengine";
2
+ import type { Application } from "pixi.js";
2
3
 
3
4
  export class TestBed {
4
- static async createComponent(component: any, props: any = {}, children: any = []): Promise<Element<ComponentInstance>> {
5
+ private static lastApp: Application | null = null;
6
+
7
+ static async createComponent(
8
+ component: any,
9
+ props: any = {},
10
+ children: any = [],
11
+ options: { enableLayout?: boolean } = {}
12
+ ): Promise<Element<ComponentInstance>> {
13
+ if (TestBed.lastApp) {
14
+ try {
15
+ TestBed.lastApp.destroy(
16
+ { removeView: true },
17
+ { children: true, texture: true, textureSource: true, context: true }
18
+ );
19
+ } catch {
20
+ // ignore cleanup errors in test environment
21
+ }
22
+ TestBed.lastApp = null;
23
+ }
24
+
25
+ const root = document.getElementById('root');
26
+ if (root) {
27
+ root.innerHTML = '';
28
+ }
29
+
5
30
  const comp = () => h(Canvas, {
6
31
  tickStart: false
7
32
  }, h(component, props, children))
8
- const { canvasElement, app } = await bootstrapCanvas(document.getElementById('root'), comp)
33
+ const { canvasElement, app } = await bootstrapCanvas(root, comp, {
34
+ enableLayout: options.enableLayout ?? true
35
+ })
9
36
  app.render()
37
+ TestBed.lastApp = app as Application;
10
38
  return canvasElement.props.children?.[0]
11
39
  }
12
- }
40
+ }
package/tsconfig.json CHANGED
@@ -5,7 +5,8 @@
5
5
  "declaration": true,
6
6
  "emitDeclarationOnly": false,
7
7
  "declarationMap": true,
8
- "rootDir": "src"
8
+ "rootDir": "src",
9
+ "module": "ESNext"
9
10
  },
10
11
  "include": [
11
12
  "src/**/*"
@@ -14,4 +15,4 @@
14
15
  "dist",
15
16
  "node_modules"
16
17
  ]
17
- }
18
+ }
@@ -1,172 +0,0 @@
1
- import { Bounds as F, Rectangle as C, Container as M, Graphics as x, BigPool as b } from "pixi.js";
2
- import { E as p, F as _ } from "./index-VPoz4ufu.js";
3
- var l = /* @__PURE__ */ ((e) => (e.Margin = "margin", e.Padding = "padding", e.Border = "border", e.Flex = "flex", e.Content = "content", e))(l || {});
4
- function w(e, t) {
5
- const r = `getComputed${t.charAt(0).toUpperCase() + t.slice(1)}`;
6
- return {
7
- top: e.yoga[r](p.Top),
8
- right: e.yoga[r](p.Right),
9
- bottom: e.yoga[r](p.Bottom),
10
- left: e.yoga[r](p.Left)
11
- };
12
- }
13
- function B(e, t) {
14
- const { width: r, height: h } = e.computedLayout, a = w(e, "margin"), i = w(e, "border"), c = w(e, "padding"), n = t.get(
15
- "margin"
16
- /* Margin */
17
- );
18
- n.outer.x = -a.left, n.outer.y = -a.top, n.outer.width = r + a.left + a.right, n.outer.height = h + a.top + a.bottom, n.inner.x = 0, n.inner.y = 0, n.inner.width = r, n.inner.height = h;
19
- const o = t.get(
20
- "border"
21
- /* Border */
22
- );
23
- o.outer.x = 0, o.outer.y = 0, o.outer.width = r, o.outer.height = h, o.inner.x = i.left, o.inner.y = i.top, o.inner.width = r - i.left - i.right, o.inner.height = h - i.top - i.bottom;
24
- const s = t.get(
25
- "padding"
26
- /* Padding */
27
- );
28
- s.outer.copyFrom(o.inner), s.inner.x = c.left + i.left, s.inner.y = c.top + i.top, s.inner.width = r - c.left - c.right - i.left - i.right, s.inner.height = h - c.top - c.bottom - i.top - i.bottom, E(e, t);
29
- }
30
- function E(e, t) {
31
- var r;
32
- const h = t.get(
33
- "flex"
34
- /* Flex */
35
- ), a = t.get(
36
- "padding"
37
- /* Padding */
38
- );
39
- h.outer.copyFrom(a.inner);
40
- const i = new F(), c = e.yoga.getChildCount();
41
- for (let o = 0; o < c; o++) {
42
- const d = e.yoga.getChild(o).getComputedLayout();
43
- i.addRect(
44
- new C(d.left, d.top, d.width, d.height)
45
- );
46
- }
47
- const n = e.yoga.getFlexDirection();
48
- n === _.Column || n === _.ColumnReverse ? (i.width = h.outer.width, i.x = h.outer.x) : (i.height = h.outer.height, i.y = h.outer.y), (r = h.inner) == null || r.copyFrom(i.rectangle), t.get(
49
- "content"
50
- /* Content */
51
- ).outer.copyFrom(i.rectangle);
52
- }
53
- var O = Object.defineProperty, A = (e, t, r) => t in e ? O(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, v = (e, t, r) => A(e, typeof t != "symbol" ? t + "" : t, r);
54
- function P(e, t, r) {
55
- const h = Math.round(e[0] + (t[0] - e[0]) * r), a = Math.round(e[1] + (t[1] - e[1]) * r), i = Math.round(e[2] + (t[2] - e[2]) * r);
56
- return `rgb(${h},${a},${i})`;
57
- }
58
- class G extends M {
59
- constructor() {
60
- super(), v(this, "graphics"), v(this, "heatGraphics"), this.graphics = /* @__PURE__ */ new Map(), Object.values(l).forEach((t) => {
61
- const r = new x();
62
- this.graphics.set(t, r), this.addChild(r);
63
- }), this.heatGraphics = new x(), this.addChild(this.heatGraphics);
64
- }
65
- /**
66
- * Initialize the debug object with region data
67
- */
68
- init(t) {
69
- const { target: r, alpha: h, heat: a } = t;
70
- t.heatOnly || Object.entries(t).forEach(([n, o]) => {
71
- if (n === "target" || n === "alpha" || n === "heat" || n === "heatOnly") return;
72
- o = o;
73
- const s = this.graphics.get(n);
74
- if (!(!s || !o.draw))
75
- if (o.inner)
76
- this.drawCutBox(s, o.outer, o.inner, o.color, h);
77
- else {
78
- const { x: d, y: u, width: g, height: m } = o.outer;
79
- s.rect(d, u, g, Math.max(m, 1)), s.fill({ color: o.color, alpha: h });
80
- }
81
- });
82
- const { invalidationCount: i, draw: c } = a;
83
- if (i > 0 && c) {
84
- const o = Math.min(i / 20, 1), s = t[l.Margin], g = P([255, 255, 0], [255, 0, 0], o);
85
- this.heatGraphics.rect(
86
- s.outer.x,
87
- s.outer.y,
88
- s.outer.width,
89
- s.outer.height
90
- ), this.heatGraphics.fill({ color: g, alpha: Math.min(0.3, o) }), this.heatGraphics.stroke({ color: g, alpha: Math.max(0.3, o), pixelLine: !0 });
91
- }
92
- this.position.set(r.x, r.y);
93
- }
94
- /**
95
- * Reset the debug object's state
96
- */
97
- reset() {
98
- this.graphics.forEach((t) => t.clear()), this.heatGraphics.clear(), this.removeFromParent();
99
- }
100
- /**
101
- * Draw a box with a cut-out center
102
- */
103
- drawCutBox(t, r, h, a, i) {
104
- const { x: c, y: n, width: o, height: s } = r, { x: d, y: u, width: g, height: m } = h;
105
- t.rect(c, n, o, s), t.fill({ color: a, alpha: i }), t.rect(d, u, g, m), t.cut();
106
- }
107
- }
108
- var R = Object.defineProperty, $ = (e, t, r) => t in e ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, f = (e, t, r) => $(e, typeof t != "symbol" ? t + "" : t, r);
109
- class y {
110
- constructor() {
111
- f(this, "holder", new M()), f(this, "regions", /* @__PURE__ */ new Map()), f(this, "colors", {
112
- [l.Margin]: "#B68655",
113
- [l.Padding]: "#BAC57F",
114
- [l.Border]: "#E7C583",
115
- [l.Content]: "#89B1BE",
116
- [l.Flex]: "#6E28D9"
117
- }), f(this, "alpha", 0.75), Object.values(l).forEach((t) => {
118
- this.regions.set(t, {
119
- outer: new C(),
120
- inner: new C()
121
- });
122
- }), this.holder.__devtoolIgnore = !0, this.holder.__devtoolIgnoreChildren = !0, this.holder.eventMode = "none", this.holder.interactiveChildren = !1;
123
- }
124
- /**
125
- * Clean up previous render state
126
- */
127
- reset() {
128
- for (let t = this.holder.children.length - 1; t >= 0; t--) {
129
- const r = this.holder.children[t];
130
- b.return(r);
131
- }
132
- }
133
- /**
134
- * Render debug visuals for the given layout
135
- */
136
- render(t) {
137
- B(t, this.regions);
138
- const r = Object.values(l).reduce(
139
- (n, o) => {
140
- const s = this.regions.get(o);
141
- if (!s) return n;
142
- const d = `debugDraw${o.charAt(0).toUpperCase()}${o.slice(1)}`;
143
- return n[o] = {
144
- ...s,
145
- color: this.colors[o],
146
- draw: t._styles.custom[d] ?? !0
147
- }, n;
148
- },
149
- {}
150
- ), { left: h, top: a } = t.computedLayout, i = t.target.getGlobalPosition(), c = b.get(G, {
151
- ...r,
152
- target: { x: i.x + h, y: i.y + a },
153
- alpha: this.alpha,
154
- heat: {
155
- invalidationCount: t._modificationCount,
156
- draw: t._styles.custom.debugHeat !== !1
157
- },
158
- heatOnly: !t._styles.custom.debug
159
- });
160
- this.holder.addChildAt(c, 0);
161
- }
162
- /**
163
- * Clean up the debug renderer
164
- */
165
- destroy() {
166
- this.reset(), this.holder.destroy(), this.regions.clear();
167
- }
168
- }
169
- export {
170
- y as DebugRenderer
171
- };
172
- //# sourceMappingURL=DebugRenderer-P5sZ-0Tq.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DebugRenderer-P5sZ-0Tq.js","sources":["../../../node_modules/.pnpm/@pixi+layout@3.2.0_@types+react@19.1.3_pixi.js@8.9.2_react@19.1.0_yoga-layout@3.2.1/node_modules/@pixi/layout/dist/core/debug/calculateDebugRegions.mjs","../../../node_modules/.pnpm/@pixi+layout@3.2.0_@types+react@19.1.3_pixi.js@8.9.2_react@19.1.0_yoga-layout@3.2.1/node_modules/@pixi/layout/dist/core/debug/DebugNode.mjs","../../../node_modules/.pnpm/@pixi+layout@3.2.0_@types+react@19.1.3_pixi.js@8.9.2_react@19.1.0_yoga-layout@3.2.1/node_modules/@pixi/layout/dist/core/debug/DebugRenderer.mjs"],"sourcesContent":["import { Bounds, Rectangle } from \"pixi.js\";\nimport { Edge, FlexDirection } from \"yoga-layout/load\";\nvar DebugRegionType = /* @__PURE__ */ ((DebugRegionType2) => {\n DebugRegionType2[\"Margin\"] = \"margin\";\n DebugRegionType2[\"Padding\"] = \"padding\";\n DebugRegionType2[\"Border\"] = \"border\";\n DebugRegionType2[\"Flex\"] = \"flex\";\n DebugRegionType2[\"Content\"] = \"content\";\n return DebugRegionType2;\n})(DebugRegionType || {});\nfunction getEdgeValues(layout, type) {\n const method = `getComputed${type.charAt(0).toUpperCase() + type.slice(1)}`;\n return {\n top: layout.yoga[method](Edge.Top),\n right: layout.yoga[method](Edge.Right),\n bottom: layout.yoga[method](Edge.Bottom),\n left: layout.yoga[method](Edge.Left)\n };\n}\nfunction calculateRegions(layout, regions) {\n const { width, height } = layout.computedLayout;\n const margin = getEdgeValues(layout, \"margin\");\n const border = getEdgeValues(layout, \"border\");\n const padding = getEdgeValues(layout, \"padding\");\n const marginRegion = regions.get(\n \"margin\"\n /* Margin */\n );\n marginRegion.outer.x = -margin.left;\n marginRegion.outer.y = -margin.top;\n marginRegion.outer.width = width + margin.left + margin.right;\n marginRegion.outer.height = height + margin.top + margin.bottom;\n marginRegion.inner.x = 0;\n marginRegion.inner.y = 0;\n marginRegion.inner.width = width;\n marginRegion.inner.height = height;\n const borderRegion = regions.get(\n \"border\"\n /* Border */\n );\n borderRegion.outer.x = 0;\n borderRegion.outer.y = 0;\n borderRegion.outer.width = width;\n borderRegion.outer.height = height;\n borderRegion.inner.x = border.left;\n borderRegion.inner.y = border.top;\n borderRegion.inner.width = width - border.left - border.right;\n borderRegion.inner.height = height - border.top - border.bottom;\n const paddingRegion = regions.get(\n \"padding\"\n /* Padding */\n );\n paddingRegion.outer.copyFrom(borderRegion.inner);\n paddingRegion.inner.x = padding.left + border.left;\n paddingRegion.inner.y = padding.top + border.top;\n paddingRegion.inner.width = width - padding.left - padding.right - border.left - border.right;\n paddingRegion.inner.height = height - padding.top - padding.bottom - border.top - border.bottom;\n calculateFlexRegion(layout, regions);\n}\nfunction calculateFlexRegion(layout, regions) {\n var _a;\n const flexRegion = regions.get(\n \"flex\"\n /* Flex */\n );\n const paddingRegion = regions.get(\n \"padding\"\n /* Padding */\n );\n flexRegion.outer.copyFrom(paddingRegion.inner);\n const bounds = new Bounds();\n const children = layout.yoga.getChildCount();\n for (let i = 0; i < children; i++) {\n const child = layout.yoga.getChild(i);\n const computedBounds = child.getComputedLayout();\n bounds.addRect(\n new Rectangle(computedBounds.left, computedBounds.top, computedBounds.width, computedBounds.height)\n );\n }\n const flexDir = layout.yoga.getFlexDirection();\n if (flexDir === FlexDirection.Column || flexDir === FlexDirection.ColumnReverse) {\n bounds.width = flexRegion.outer.width;\n bounds.x = flexRegion.outer.x;\n } else {\n bounds.height = flexRegion.outer.height;\n bounds.y = flexRegion.outer.y;\n }\n (_a = flexRegion.inner) == null ? void 0 : _a.copyFrom(bounds.rectangle);\n regions.get(\n \"content\"\n /* Content */\n ).outer.copyFrom(bounds.rectangle);\n}\nexport {\n DebugRegionType,\n calculateRegions\n};\n//# sourceMappingURL=calculateDebugRegions.mjs.map\n","var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\nimport { Container, Graphics as Graphics$1 } from \"pixi.js\";\nimport { DebugRegionType } from \"./calculateDebugRegions.mjs\";\nfunction lerpColor(start, end, t) {\n const r = Math.round(start[0] + (end[0] - start[0]) * t);\n const g = Math.round(start[1] + (end[1] - start[1]) * t);\n const b = Math.round(start[2] + (end[2] - start[2]) * t);\n return `rgb(${r},${g},${b})`;\n}\nclass DebugNode extends Container {\n constructor() {\n super();\n /** Graphics objects for each region type */\n __publicField(this, \"graphics\");\n __publicField(this, \"heatGraphics\");\n this.graphics = /* @__PURE__ */ new Map();\n Object.values(DebugRegionType).forEach((type) => {\n const graphics = new Graphics$1();\n this.graphics.set(type, graphics);\n this.addChild(graphics);\n });\n this.heatGraphics = new Graphics$1();\n this.addChild(this.heatGraphics);\n }\n /**\n * Initialize the debug object with region data\n */\n init(regions) {\n const { target, alpha, heat } = regions;\n if (!regions.heatOnly) {\n Object.entries(regions).forEach(([type, region]) => {\n if (type === \"target\" || type === \"alpha\" || type === \"heat\" || type === \"heatOnly\") return;\n region = region;\n const graphics = this.graphics.get(type);\n if (!graphics || !region.draw) return;\n if (region.inner) {\n this.drawCutBox(graphics, region.outer, region.inner, region.color, alpha);\n } else {\n const { x, y, width, height } = region.outer;\n graphics.rect(x, y, width, Math.max(height, 1));\n graphics.fill({ color: region.color, alpha });\n }\n });\n }\n const { invalidationCount, draw } = heat;\n if (invalidationCount > 0 && draw) {\n const MAX_INVALIDATE_COUNT = 20;\n const normalizedAlpha = Math.min(invalidationCount / MAX_INVALIDATE_COUNT, 1);\n const marginRegion = regions[DebugRegionType.Margin];\n const startColor = [255, 255, 0];\n const endColor = [255, 0, 0];\n const color = lerpColor(startColor, endColor, normalizedAlpha);\n this.heatGraphics.rect(\n marginRegion.outer.x,\n marginRegion.outer.y,\n marginRegion.outer.width,\n marginRegion.outer.height\n );\n this.heatGraphics.fill({ color, alpha: Math.min(0.3, normalizedAlpha) });\n this.heatGraphics.stroke({ color, alpha: Math.max(0.3, normalizedAlpha), pixelLine: true });\n }\n this.position.set(target.x, target.y);\n }\n /**\n * Reset the debug object's state\n */\n reset() {\n this.graphics.forEach((graphics) => graphics.clear());\n this.heatGraphics.clear();\n this.removeFromParent();\n }\n /**\n * Draw a box with a cut-out center\n */\n drawCutBox(graphics, outer, inner, color, alpha) {\n const { x, y, width, height } = outer;\n const { x: innerX, y: innerY, width: innerWidth, height: innerHeight } = inner;\n graphics.rect(x, y, width, height);\n graphics.fill({ color, alpha });\n graphics.rect(innerX, innerY, innerWidth, innerHeight);\n graphics.cut();\n }\n}\nexport {\n DebugNode\n};\n//# sourceMappingURL=DebugNode.mjs.map\n","var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\nimport { Container, Rectangle, BigPool } from \"pixi.js\";\nimport { DebugRegionType, calculateRegions } from \"./calculateDebugRegions.mjs\";\nimport { DebugNode } from \"./DebugNode.mjs\";\nclass DebugRenderer {\n constructor() {\n /** Container for all debug visuals */\n __publicField(this, \"holder\", new Container());\n /** Region data for each debug type */\n __publicField(this, \"regions\", /* @__PURE__ */ new Map());\n /** Color configuration for each region type */\n __publicField(this, \"colors\", {\n [DebugRegionType.Margin]: \"#B68655\",\n [DebugRegionType.Padding]: \"#BAC57F\",\n [DebugRegionType.Border]: \"#E7C583\",\n [DebugRegionType.Content]: \"#89B1BE\",\n [DebugRegionType.Flex]: \"#6E28D9\"\n });\n /** Global alpha value for all regions */\n __publicField(this, \"alpha\", 0.75);\n Object.values(DebugRegionType).forEach((type) => {\n this.regions.set(type, {\n outer: new Rectangle(),\n inner: new Rectangle()\n });\n });\n this.holder.__devtoolIgnore = true;\n this.holder.__devtoolIgnoreChildren = true;\n this.holder.eventMode = \"none\";\n this.holder.interactiveChildren = false;\n }\n /**\n * Clean up previous render state\n */\n reset() {\n for (let i = this.holder.children.length - 1; i >= 0; i--) {\n const child = this.holder.children[i];\n BigPool.return(child);\n }\n }\n /**\n * Render debug visuals for the given layout\n */\n render(layout) {\n calculateRegions(layout, this.regions);\n const regionData = Object.values(DebugRegionType).reduce(\n (acc, type) => {\n const region = this.regions.get(type);\n if (!region) return acc;\n const drawString = `debugDraw${type.charAt(0).toUpperCase()}${type.slice(1)}`;\n acc[type] = {\n ...region,\n color: this.colors[type],\n draw: layout._styles.custom[drawString] ?? true\n };\n return acc;\n },\n {}\n );\n const { left, top } = layout.computedLayout;\n const pos = layout.target.getGlobalPosition();\n const debugObject = BigPool.get(DebugNode, {\n ...regionData,\n target: { x: pos.x + left, y: pos.y + top },\n alpha: this.alpha,\n heat: {\n invalidationCount: layout._modificationCount,\n draw: layout._styles.custom.debugHeat !== false\n },\n heatOnly: !layout._styles.custom.debug\n });\n this.holder.addChildAt(debugObject, 0);\n }\n /**\n * Clean up the debug renderer\n */\n destroy() {\n this.reset();\n this.holder.destroy();\n this.regions.clear();\n }\n}\nexport {\n DebugRenderer\n};\n//# sourceMappingURL=DebugRenderer.mjs.map\n"],"names":["DebugRegionType","DebugRegionType2","getEdgeValues","layout","type","method","Edge","calculateRegions","regions","width","height","margin","border","padding","marginRegion","borderRegion","paddingRegion","calculateFlexRegion","_a","flexRegion","bounds","Bounds","children","i","computedBounds","Rectangle","flexDir","FlexDirection","__defProp","__defNormalProp","obj","key","value","__publicField","lerpColor","start","end","t","r","g","b","DebugNode","Container","graphics","Graphics$1","target","alpha","heat","region","x","y","invalidationCount","draw","normalizedAlpha","color","outer","inner","innerX","innerY","innerWidth","innerHeight","DebugRenderer","child","BigPool","regionData","acc","drawString","left","top","pos","debugObject"],"mappings":"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","x_google_ignoreList":[0,1,2]}