@number10/phaserjsx 0.6.1 → 4.1.0
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 +43 -3
- package/dist/chunk-C2EiDwsr.cjs +35 -0
- package/dist/clip/index.cjs +696 -0
- package/dist/clip/index.cjs.map +1 -0
- package/dist/clip/index.d.ts +3 -0
- package/dist/clip/index.d.ts.map +1 -0
- package/dist/clip/index.js +688 -0
- package/dist/clip/index.js.map +1 -0
- package/dist/clip/stencil-clip-extension.d.ts +18 -0
- package/dist/clip/stencil-clip-extension.d.ts.map +1 -0
- package/dist/clip/stencil-clip.d.ts +134 -0
- package/dist/clip/stencil-clip.d.ts.map +1 -0
- package/dist/components/appliers/applyBackground.d.ts +2 -1
- package/dist/components/appliers/applyBackground.d.ts.map +1 -1
- package/dist/components/appliers/applyGestures.d.ts.map +1 -1
- package/dist/components/appliers/applyTooltip.d.ts.map +1 -1
- package/dist/components/backgroundImage.d.ts +12 -0
- package/dist/components/backgroundImage.d.ts.map +1 -0
- package/dist/components/creators/createBackground.d.ts +2 -1
- package/dist/components/creators/createBackground.d.ts.map +1 -1
- package/dist/components/creators/createGestures.d.ts.map +1 -1
- package/dist/components/custom/Accordion.d.ts.map +1 -1
- package/dist/components/custom/CharText/CharText.d.ts.map +1 -1
- package/dist/components/custom/Dialog.d.ts +1 -1
- package/dist/components/custom/Divider.d.ts +1 -1
- package/dist/components/custom/Dropdown.d.ts.map +1 -1
- package/dist/components/custom/Graphics.d.ts +1 -1
- package/dist/components/custom/Graphics.d.ts.map +1 -1
- package/dist/components/custom/Icon.d.ts.map +1 -1
- package/dist/components/custom/Image.d.ts.map +1 -1
- package/dist/components/custom/Joystick.d.ts +1 -1
- package/dist/components/custom/NineSlice.d.ts.map +1 -1
- package/dist/components/custom/Particles.d.ts +1 -1
- package/dist/components/custom/Particles.d.ts.map +1 -1
- package/dist/components/custom/Portal.d.ts.map +1 -1
- package/dist/components/custom/RefOriginView.d.ts +1 -1
- package/dist/components/custom/ScrollView.d.ts.map +1 -1
- package/dist/components/custom/Sprite.d.ts +1 -1
- package/dist/components/custom/Sprite.d.ts.map +1 -1
- package/dist/components/custom/Text.d.ts.map +1 -1
- package/dist/components/custom/TileSprite.d.ts +1 -1
- package/dist/components/custom/TileSprite.d.ts.map +1 -1
- package/dist/components/custom/View.d.ts.map +1 -1
- package/dist/components/custom/index.cjs +34 -36
- package/dist/components/custom/index.js +2 -37
- package/dist/components/primitives/graphics.d.ts.map +1 -1
- package/dist/components/primitives/image.d.ts.map +1 -1
- package/dist/components/primitives/nineslice.d.ts.map +1 -1
- package/dist/components/primitives/particles.d.ts.map +1 -1
- package/dist/components/primitives/sprite.d.ts.map +1 -1
- package/dist/components/primitives/text.d.ts.map +1 -1
- package/dist/components/primitives/tilesprite.d.ts.map +1 -1
- package/dist/components/primitives/view.d.ts.map +1 -1
- package/dist/custom-C_w8D39m.js +29259 -0
- package/dist/custom-C_w8D39m.js.map +1 -0
- package/dist/custom-Dp3yAJdU.cjs +30498 -0
- package/dist/custom-Dp3yAJdU.cjs.map +1 -0
- package/dist/fx/fx-creators/blur.d.ts.map +1 -1
- package/dist/fx/fx-creators/color-matrix.d.ts.map +1 -1
- package/dist/fx/fx-creators/glow.d.ts.map +1 -1
- package/dist/fx/fx-creators/pixelate.d.ts.map +1 -1
- package/dist/fx/fx-creators/shadow.d.ts.map +1 -1
- package/dist/fx/fx-creators/vignette.d.ts.map +1 -1
- package/dist/fx/use-fx.d.ts +3 -3
- package/dist/fx/use-fx.d.ts.map +1 -1
- package/dist/gestures/gesture-manager.d.ts +3 -1
- package/dist/gestures/gesture-manager.d.ts.map +1 -1
- package/dist/gestures/gesture-types.d.ts +1 -1
- package/dist/gestures/gesture-types.d.ts.map +1 -1
- package/dist/hooks.d.ts +9 -8
- package/dist/hooks.d.ts.map +1 -1
- package/dist/index.cjs +1628 -2837
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1430 -2866
- package/dist/index.js.map +1 -1
- package/dist/jsx-dev-runtime.cjs +12 -7
- package/dist/jsx-dev-runtime.cjs.map +1 -1
- package/dist/jsx-dev-runtime.js +11 -11
- package/dist/jsx-dev-runtime.js.map +1 -1
- package/dist/jsx-runtime.cjs +55 -33
- package/dist/jsx-runtime.cjs.map +1 -1
- package/dist/jsx-runtime.js +56 -37
- package/dist/jsx-runtime.js.map +1 -1
- package/dist/layout/appliers/background-applier.d.ts.map +1 -1
- package/dist/layout/layout-engine.d.ts.map +1 -1
- package/dist/layout/types.d.ts +2 -1
- package/dist/layout/types.d.ts.map +1 -1
- package/dist/scene-backgrounds.d.ts +51 -1
- package/dist/scene-backgrounds.d.ts.map +1 -1
- package/dist/scripts/generate-icon-loaders.js +146 -143
- package/dist/scripts/generate-icon-types.js +94 -83
- package/dist/scripts/generate-icons.d.ts +1 -2
- package/dist/scripts/generate-icons.d.ts.map +1 -1
- package/dist/scripts/generate-icons.js +381 -399
- package/dist/scripts/icon-generator-config.d.ts +0 -1
- package/dist/scripts/icon-generator-config.js +7 -4
- package/dist/theme-base.d.ts.map +1 -1
- package/dist/vite-plugin-icons.d.ts +1 -2
- package/dist/vite-plugin-icons.js +109 -90
- package/package.json +29 -22
- package/dist/TransformOriginView-Dw_HKnFH.cjs +0 -17116
- package/dist/TransformOriginView-Dw_HKnFH.cjs.map +0 -1
- package/dist/TransformOriginView-i8uVBHb1.js +0 -17100
- package/dist/TransformOriginView-i8uVBHb1.js.map +0 -1
- package/dist/components/custom/index.cjs.map +0 -1
- package/dist/components/custom/index.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,2949 +1,1740 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
n.default = e;
|
|
21
|
-
return Object.freeze(n);
|
|
22
|
-
}
|
|
23
|
-
const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser);
|
|
24
|
-
function shallowEqual(a, b) {
|
|
25
|
-
if (!a || !b) return a === b;
|
|
26
|
-
if (a.length !== b.length) return false;
|
|
27
|
-
return a.every((val, i) => val === b[i]);
|
|
28
|
-
}
|
|
29
|
-
function applyGraphicsProps(node, _prev, next) {
|
|
30
|
-
const prevDeps = node.__drawDependencies;
|
|
31
|
-
const nextDeps = next.dependencies;
|
|
32
|
-
const depsChanged = !shallowEqual(prevDeps, nextDeps);
|
|
33
|
-
if (depsChanged && next.onDraw) {
|
|
34
|
-
if (next.autoClear !== false) {
|
|
35
|
-
node.clear();
|
|
36
|
-
}
|
|
37
|
-
next.onDraw(node, next);
|
|
38
|
-
node.__drawDependencies = nextDeps;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
function applyGraphicsLayout(node, prev, next) {
|
|
42
|
-
node.__layoutProps = next;
|
|
43
|
-
if (prev.width !== next.width || prev.height !== next.height || prev.headless !== next.headless) {
|
|
44
|
-
node.__getLayoutSize = () => {
|
|
45
|
-
if (next.headless ?? true) {
|
|
46
|
-
return { width: 0.01, height: 0.01 };
|
|
47
|
-
}
|
|
48
|
-
return {
|
|
49
|
-
width: typeof next.width === "number" ? next.width : 0,
|
|
50
|
-
height: typeof next.height === "number" ? next.height : 0
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
function normalizeVisible$1(visible) {
|
|
56
|
-
if (visible === void 0) return true;
|
|
57
|
-
if (typeof visible === "boolean") return visible;
|
|
58
|
-
if (visible === "visible") return true;
|
|
59
|
-
if (visible === "invisible" || visible === "none") return false;
|
|
60
|
-
return true;
|
|
61
|
-
}
|
|
62
|
-
function applyPhaserProps(node, prev, next) {
|
|
63
|
-
if (prev.alpha !== next.alpha && typeof next.alpha === "number") {
|
|
64
|
-
node.setAlpha?.(next.alpha);
|
|
65
|
-
}
|
|
66
|
-
if (prev.depth !== next.depth && typeof next.depth === "number") {
|
|
67
|
-
node.setDepth?.(next.depth);
|
|
68
|
-
}
|
|
69
|
-
if (prev.visible !== next.visible) {
|
|
70
|
-
const visibleValue = normalizeVisible$1(next.visible);
|
|
71
|
-
node.visible = visibleValue;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
function applyTransformProps(node, prev, next) {
|
|
75
|
-
if (prev.x !== next.x && typeof next.x === "number") {
|
|
76
|
-
node.x = next.x;
|
|
77
|
-
}
|
|
78
|
-
if (prev.y !== next.y && typeof next.y === "number") {
|
|
79
|
-
node.y = next.y;
|
|
80
|
-
}
|
|
81
|
-
if (prev.rotation !== next.rotation && typeof next.rotation === "number") {
|
|
82
|
-
node.rotation = next.rotation;
|
|
83
|
-
}
|
|
84
|
-
const nextScale = next.scale;
|
|
85
|
-
const nextScaleX = next.scaleX;
|
|
86
|
-
const nextScaleY = next.scaleY;
|
|
87
|
-
const prevScale = prev.scale;
|
|
88
|
-
const prevScaleX = prev.scaleX;
|
|
89
|
-
const prevScaleY = prev.scaleY;
|
|
90
|
-
if (nextScale !== void 0 && nextScale !== prevScale) {
|
|
91
|
-
node.setScale?.(nextScale, nextScale);
|
|
92
|
-
} else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {
|
|
93
|
-
const currentScaleX = node.scaleX ?? 1;
|
|
94
|
-
const currentScaleY = node.scaleY ?? 1;
|
|
95
|
-
const sx = nextScaleX ?? currentScaleX;
|
|
96
|
-
const sy = nextScaleY ?? currentScaleY;
|
|
97
|
-
node.setScale?.(sx, sy);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
function createGraphicsLayout(graphics, props) {
|
|
101
|
-
if (props.headless === false) {
|
|
102
|
-
if (typeof props.width !== "number" || typeof props.height !== "number") {
|
|
103
|
-
throw new Error(
|
|
104
|
-
"Graphics component requires explicit width and height props when headless=false"
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
graphics.__layoutProps = props;
|
|
109
|
-
graphics.__getLayoutSize = () => {
|
|
110
|
-
if (graphics.__layoutProps?.headless ?? true) {
|
|
111
|
-
return { width: 0.01, height: 0.01 };
|
|
112
|
-
}
|
|
113
|
-
return {
|
|
114
|
-
width: props.width ?? 0,
|
|
115
|
-
height: props.height ?? 0
|
|
116
|
-
};
|
|
117
|
-
};
|
|
118
|
-
graphics.__drawDependencies = props.dependencies;
|
|
119
|
-
}
|
|
120
|
-
function normalizeVisible(visible) {
|
|
121
|
-
if (visible === void 0) return true;
|
|
122
|
-
if (typeof visible === "boolean") return visible;
|
|
123
|
-
if (visible === "visible") return true;
|
|
124
|
-
if (visible === "invisible" || visible === "none") return false;
|
|
125
|
-
return true;
|
|
126
|
-
}
|
|
127
|
-
function createPhaser(node, props) {
|
|
128
|
-
if (props.visible !== void 0) {
|
|
129
|
-
node.visible = normalizeVisible(props.visible);
|
|
130
|
-
}
|
|
131
|
-
if (props.depth !== void 0) {
|
|
132
|
-
node.setDepth(props.depth);
|
|
133
|
-
}
|
|
134
|
-
if (props.alpha !== void 0) {
|
|
135
|
-
node.setAlpha(props.alpha);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
function createTransform(node, props) {
|
|
139
|
-
if (props.scaleX !== void 0 || props.scaleY !== void 0) {
|
|
140
|
-
node.setScale(
|
|
141
|
-
props.scaleX ?? 1,
|
|
142
|
-
props.scaleY ?? 1
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
if (props.rotation !== void 0) {
|
|
146
|
-
node.setRotation(props.rotation);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
const graphicsCreator = (scene, props) => {
|
|
150
|
-
const graphics = scene.add.graphics();
|
|
151
|
-
graphics.setPosition(props.x ?? 0, props.y ?? 0);
|
|
152
|
-
createTransform(graphics, props);
|
|
153
|
-
createPhaser(graphics, props);
|
|
154
|
-
createGraphicsLayout(graphics, props);
|
|
155
|
-
if (props.onDraw) {
|
|
156
|
-
props.onDraw(graphics, props);
|
|
157
|
-
}
|
|
158
|
-
return graphics;
|
|
2
|
+
const require_chunk = require("./chunk-C2EiDwsr.cjs");
|
|
3
|
+
const require_custom = require("./custom-Dp3yAJdU.cjs");
|
|
4
|
+
const require_jsx_runtime = require("./jsx-runtime.cjs");
|
|
5
|
+
const require_clip_index = require("./clip/index.cjs");
|
|
6
|
+
let phaser = require("phaser");
|
|
7
|
+
phaser = require_chunk.__toESM(phaser, 1);
|
|
8
|
+
let _preact_signals_core = require("@preact/signals-core");
|
|
9
|
+
//#region src/camera/use-camera-fx.ts
|
|
10
|
+
/**
|
|
11
|
+
* Hook and creators for Phaser camera effects
|
|
12
|
+
*/
|
|
13
|
+
var createCameraShakeFX = (camera, config) => {
|
|
14
|
+
const duration = config.duration ?? 250;
|
|
15
|
+
const intensity = typeof config.intensity === "object" ? new phaser.Math.Vector2(config.intensity.x, config.intensity.y) : config.intensity ?? .01;
|
|
16
|
+
camera.shake(duration, intensity, config.force ?? false, config.onComplete);
|
|
159
17
|
};
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
function calculateFitScale$1(image, targetWidth, targetHeight, fit = "fill") {
|
|
167
|
-
const textureWidth = image.width;
|
|
168
|
-
const textureHeight = image.height;
|
|
169
|
-
if (textureWidth === 0 || textureHeight === 0) {
|
|
170
|
-
return { scaleX: 1, scaleY: 1 };
|
|
171
|
-
}
|
|
172
|
-
if (fit === "fill") {
|
|
173
|
-
return {
|
|
174
|
-
scaleX: targetWidth / textureWidth,
|
|
175
|
-
scaleY: targetHeight / textureHeight
|
|
176
|
-
};
|
|
177
|
-
}
|
|
178
|
-
const targetAspect = targetWidth / targetHeight;
|
|
179
|
-
const textureAspect = textureWidth / textureHeight;
|
|
180
|
-
if (fit === "contain") {
|
|
181
|
-
const scale = targetAspect > textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
|
|
182
|
-
return { scaleX: scale, scaleY: scale };
|
|
183
|
-
}
|
|
184
|
-
if (fit === "cover") {
|
|
185
|
-
const scale = targetAspect < textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
|
|
186
|
-
return { scaleX: scale, scaleY: scale };
|
|
187
|
-
}
|
|
188
|
-
return { scaleX: 1, scaleY: 1 };
|
|
189
|
-
}
|
|
190
|
-
function applyImageProps(image, prev, next) {
|
|
191
|
-
const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
|
|
192
|
-
if (textureChanged && next.texture) {
|
|
193
|
-
image.setTexture(next.texture, next.frame);
|
|
194
|
-
}
|
|
195
|
-
if (prev.tint !== next.tint) {
|
|
196
|
-
if (typeof next.tint === "number") {
|
|
197
|
-
image.setTint(next.tint);
|
|
198
|
-
} else {
|
|
199
|
-
image.clearTint();
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
if (prev.originX !== next.originX || prev.originY !== next.originY) {
|
|
203
|
-
const originX = next.originX ?? image.originX;
|
|
204
|
-
const originY = next.originY ?? image.originY;
|
|
205
|
-
image.setOrigin(originX, originY);
|
|
206
|
-
}
|
|
207
|
-
const displayWidthChanged = prev.displayWidth !== next.displayWidth;
|
|
208
|
-
const displayHeightChanged = prev.displayHeight !== next.displayHeight;
|
|
209
|
-
const fitChanged = prev.fit !== next.fit;
|
|
210
|
-
if (displayWidthChanged || displayHeightChanged || fitChanged || textureChanged) {
|
|
211
|
-
if (typeof next.displayWidth === "number" && typeof next.displayHeight === "number") {
|
|
212
|
-
const { scaleX, scaleY } = calculateFitScale$1(
|
|
213
|
-
image,
|
|
214
|
-
next.displayWidth,
|
|
215
|
-
next.displayHeight,
|
|
216
|
-
next.fit
|
|
217
|
-
);
|
|
218
|
-
image.setScale(scaleX, scaleY);
|
|
219
|
-
} else if (typeof next.displayWidth === "number") {
|
|
220
|
-
const scale = next.displayWidth / image.width;
|
|
221
|
-
image.setScale(scale);
|
|
222
|
-
} else if (typeof next.displayHeight === "number") {
|
|
223
|
-
const scale = next.displayHeight / image.height;
|
|
224
|
-
image.setScale(scale, scale);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
function applyImageLayout(image, prev, next) {
|
|
229
|
-
image.__layoutProps = next;
|
|
230
|
-
if (prev.headless !== next.headless) {
|
|
231
|
-
image.__getLayoutSize = () => {
|
|
232
|
-
if (image.__layoutProps?.headless) {
|
|
233
|
-
return { width: 0.01, height: 0.01 };
|
|
234
|
-
}
|
|
235
|
-
return {
|
|
236
|
-
width: image.displayWidth,
|
|
237
|
-
height: image.displayHeight
|
|
238
|
-
};
|
|
239
|
-
};
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
function createImageLayout(image, props) {
|
|
243
|
-
image.__layoutProps = props;
|
|
244
|
-
image.__getLayoutSize = () => {
|
|
245
|
-
if (image.__layoutProps?.headless) {
|
|
246
|
-
return { width: 0.01, height: 0.01 };
|
|
247
|
-
}
|
|
248
|
-
return {
|
|
249
|
-
width: image.displayWidth,
|
|
250
|
-
height: image.displayHeight
|
|
251
|
-
};
|
|
252
|
-
};
|
|
253
|
-
}
|
|
254
|
-
const imageCreator = (scene, props) => {
|
|
255
|
-
const image = scene.add.image(props.x ?? 0, props.y ?? 0, props.texture, props.frame);
|
|
256
|
-
if (props.headless) {
|
|
257
|
-
image.setOrigin(0.5, 0.5);
|
|
258
|
-
} else {
|
|
259
|
-
image.setOrigin(0, 0);
|
|
260
|
-
}
|
|
261
|
-
if (props.originX !== void 0 || props.originY !== void 0) {
|
|
262
|
-
image.setOrigin(props.originX ?? image.originX, props.originY ?? image.originY);
|
|
263
|
-
}
|
|
264
|
-
const normalizedProps = { ...props };
|
|
265
|
-
if (props.headless) {
|
|
266
|
-
delete normalizedProps.padding;
|
|
267
|
-
delete normalizedProps.margin;
|
|
268
|
-
delete normalizedProps.gap;
|
|
269
|
-
} else {
|
|
270
|
-
if (normalizedProps.rotation !== void 0) {
|
|
271
|
-
delete normalizedProps.rotation;
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
createTransform(image, normalizedProps);
|
|
275
|
-
createPhaser(image, normalizedProps);
|
|
276
|
-
if (props.tint !== void 0) {
|
|
277
|
-
image.setTint(props.tint);
|
|
278
|
-
}
|
|
279
|
-
if (props.displayWidth !== void 0 || props.displayHeight !== void 0) {
|
|
280
|
-
if (props.displayWidth !== void 0 && props.displayHeight !== void 0) {
|
|
281
|
-
const fit = props.fit ?? "fill";
|
|
282
|
-
const textureWidth = image.width;
|
|
283
|
-
const textureHeight = image.height;
|
|
284
|
-
if (textureWidth > 0 && textureHeight > 0) {
|
|
285
|
-
if (fit === "fill") {
|
|
286
|
-
image.setDisplaySize(props.displayWidth, props.displayHeight);
|
|
287
|
-
} else if (fit === "contain") {
|
|
288
|
-
const targetAspect = props.displayWidth / props.displayHeight;
|
|
289
|
-
const textureAspect = textureWidth / textureHeight;
|
|
290
|
-
const scale = targetAspect > textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
|
|
291
|
-
image.setScale(scale);
|
|
292
|
-
} else if (fit === "cover") {
|
|
293
|
-
const targetAspect = props.displayWidth / props.displayHeight;
|
|
294
|
-
const textureAspect = textureWidth / textureHeight;
|
|
295
|
-
const scale = targetAspect < textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
|
|
296
|
-
image.setScale(scale);
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
} else if (props.displayWidth !== void 0) {
|
|
300
|
-
const scale = props.displayWidth / image.width;
|
|
301
|
-
image.setScale(scale);
|
|
302
|
-
} else if (props.displayHeight !== void 0) {
|
|
303
|
-
const scale = props.displayHeight / image.height;
|
|
304
|
-
image.setScale(scale);
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
createImageLayout(image, normalizedProps);
|
|
308
|
-
if (props.onReady) {
|
|
309
|
-
props.onReady(image);
|
|
310
|
-
}
|
|
311
|
-
return image;
|
|
312
|
-
};
|
|
313
|
-
const imagePatcher = (node, prev, next) => {
|
|
314
|
-
if (prev.headless !== next.headless) {
|
|
315
|
-
if (next.headless) {
|
|
316
|
-
node.setOrigin(0.5, 0.5);
|
|
317
|
-
} else {
|
|
318
|
-
node.setOrigin(0, 0);
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
const normalizedPrev = { ...prev };
|
|
322
|
-
const normalizedNext = { ...next };
|
|
323
|
-
if (next.headless) {
|
|
324
|
-
delete normalizedNext.padding;
|
|
325
|
-
delete normalizedNext.margin;
|
|
326
|
-
delete normalizedNext.gap;
|
|
327
|
-
} else {
|
|
328
|
-
if (normalizedNext.rotation !== void 0) {
|
|
329
|
-
delete normalizedNext.rotation;
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
if (prev.headless) {
|
|
333
|
-
delete normalizedPrev.padding;
|
|
334
|
-
delete normalizedPrev.margin;
|
|
335
|
-
delete normalizedPrev.gap;
|
|
336
|
-
} else {
|
|
337
|
-
if (normalizedPrev.rotation !== void 0) {
|
|
338
|
-
delete normalizedPrev.rotation;
|
|
339
|
-
}
|
|
340
|
-
}
|
|
341
|
-
applyTransformProps(node, normalizedPrev, normalizedNext);
|
|
342
|
-
applyPhaserProps(node, normalizedPrev, normalizedNext);
|
|
343
|
-
applyImageProps(node, normalizedPrev, normalizedNext);
|
|
344
|
-
applyImageLayout(node, normalizedPrev, normalizedNext);
|
|
345
|
-
};
|
|
346
|
-
function applyNineSliceProps(nineSlice, prev, next) {
|
|
347
|
-
const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
|
|
348
|
-
if (textureChanged && next.texture) {
|
|
349
|
-
nineSlice.setTexture(next.texture, next.frame);
|
|
350
|
-
}
|
|
351
|
-
const sliceChanged = prev.leftWidth !== next.leftWidth || prev.rightWidth !== next.rightWidth || prev.topHeight !== next.topHeight || prev.bottomHeight !== next.bottomHeight;
|
|
352
|
-
if (sliceChanged) {
|
|
353
|
-
const width = typeof next.width === "number" ? next.width : nineSlice.width;
|
|
354
|
-
const height = typeof next.height === "number" ? next.height : nineSlice.height;
|
|
355
|
-
nineSlice.setSlices(
|
|
356
|
-
width,
|
|
357
|
-
height,
|
|
358
|
-
next.leftWidth ?? prev.leftWidth ?? 0,
|
|
359
|
-
next.rightWidth ?? prev.rightWidth ?? 0,
|
|
360
|
-
next.topHeight ?? prev.topHeight,
|
|
361
|
-
next.bottomHeight ?? prev.bottomHeight
|
|
362
|
-
);
|
|
363
|
-
}
|
|
364
|
-
const prevWidth = typeof prev.width === "number" ? prev.width : nineSlice.width;
|
|
365
|
-
const nextWidth = typeof next.width === "number" ? next.width : nineSlice.width;
|
|
366
|
-
const prevHeight = typeof prev.height === "number" ? prev.height : nineSlice.height;
|
|
367
|
-
const nextHeight = typeof next.height === "number" ? next.height : nineSlice.height;
|
|
368
|
-
if (prevWidth !== nextWidth || prevHeight !== nextHeight) {
|
|
369
|
-
nineSlice.setSize(nextWidth, nextHeight);
|
|
370
|
-
}
|
|
371
|
-
if (prev.tint !== next.tint) {
|
|
372
|
-
if (next.tint !== void 0) {
|
|
373
|
-
nineSlice.setTint(next.tint);
|
|
374
|
-
} else {
|
|
375
|
-
nineSlice.clearTint();
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
function applyNineSliceLayout(nineSlice, prev, next) {
|
|
380
|
-
nineSlice.__layoutProps = next;
|
|
381
|
-
if (prev.width !== next.width || prev.height !== next.height) {
|
|
382
|
-
nineSlice.__getLayoutSize = () => {
|
|
383
|
-
return {
|
|
384
|
-
width: nineSlice.width,
|
|
385
|
-
height: nineSlice.height
|
|
386
|
-
};
|
|
387
|
-
};
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
function createNineSliceLayout(nineSlice, props) {
|
|
391
|
-
nineSlice.__layoutProps = props;
|
|
392
|
-
nineSlice.__getLayoutSize = () => {
|
|
393
|
-
return {
|
|
394
|
-
width: nineSlice.width,
|
|
395
|
-
height: nineSlice.height
|
|
396
|
-
};
|
|
397
|
-
};
|
|
398
|
-
}
|
|
399
|
-
const nineSliceCreator = (scene, props) => {
|
|
400
|
-
const initialWidth = typeof props.width === "number" ? props.width : 64;
|
|
401
|
-
const initialHeight = typeof props.height === "number" ? props.height : 64;
|
|
402
|
-
const nineSlice = scene.add.nineslice(
|
|
403
|
-
props.x ?? 0,
|
|
404
|
-
props.y ?? 0,
|
|
405
|
-
props.texture,
|
|
406
|
-
props.frame,
|
|
407
|
-
initialWidth,
|
|
408
|
-
initialHeight,
|
|
409
|
-
props.leftWidth,
|
|
410
|
-
props.rightWidth,
|
|
411
|
-
props.topHeight,
|
|
412
|
-
props.bottomHeight
|
|
413
|
-
);
|
|
414
|
-
nineSlice.setOrigin(0, 0);
|
|
415
|
-
if (props.tint !== void 0) {
|
|
416
|
-
nineSlice.setTint(props.tint);
|
|
417
|
-
}
|
|
418
|
-
createTransform(nineSlice, props);
|
|
419
|
-
createPhaser(nineSlice, props);
|
|
420
|
-
createNineSliceLayout(nineSlice, props);
|
|
421
|
-
return nineSlice;
|
|
422
|
-
};
|
|
423
|
-
const nineSlicePatcher = (node, prev, next) => {
|
|
424
|
-
applyTransformProps(node, prev, next);
|
|
425
|
-
applyPhaserProps(node, prev, next);
|
|
426
|
-
applyNineSliceProps(node, prev, next);
|
|
427
|
-
applyNineSliceLayout(node, prev, next);
|
|
428
|
-
};
|
|
429
|
-
function resolveNumericSize(value) {
|
|
430
|
-
return typeof value === "number" ? value : void 0;
|
|
431
|
-
}
|
|
432
|
-
function resolveZoneSize(zone, fallback) {
|
|
433
|
-
const size = {};
|
|
434
|
-
const width = zone.width ?? fallback.width;
|
|
435
|
-
const height = zone.height ?? fallback.height;
|
|
436
|
-
if (width !== void 0) size.width = width;
|
|
437
|
-
if (height !== void 0) size.height = height;
|
|
438
|
-
return size;
|
|
439
|
-
}
|
|
440
|
-
function buildZoneSource(zone, fallbackSize) {
|
|
441
|
-
const baseX = zone.x ?? 0;
|
|
442
|
-
const baseY = zone.y ?? 0;
|
|
443
|
-
const { width, height } = resolveZoneSize(zone, fallbackSize);
|
|
444
|
-
switch (zone.shape) {
|
|
445
|
-
case "rect":
|
|
446
|
-
return new Phaser__namespace.Geom.Rectangle(baseX, baseY, width ?? 1, height ?? 1);
|
|
447
|
-
case "circle":
|
|
448
|
-
return new Phaser__namespace.Geom.Circle(baseX, baseY, zone.radius ?? 1);
|
|
449
|
-
case "ellipse":
|
|
450
|
-
return new Phaser__namespace.Geom.Ellipse(baseX, baseY, width ?? 1, height ?? 1);
|
|
451
|
-
case "line":
|
|
452
|
-
return new Phaser__namespace.Geom.Line(
|
|
453
|
-
baseX,
|
|
454
|
-
baseY,
|
|
455
|
-
zone.endX ?? baseX + (width ?? 1),
|
|
456
|
-
zone.endY ?? baseY + (height ?? 1)
|
|
457
|
-
);
|
|
458
|
-
default:
|
|
459
|
-
return void 0;
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
function buildEmitZone(zone, fallbackSize = {}) {
|
|
463
|
-
const type = zone.type ?? "random";
|
|
464
|
-
const source = buildZoneSource(zone, fallbackSize);
|
|
465
|
-
if (!source) return void 0;
|
|
466
|
-
return { type, source };
|
|
467
|
-
}
|
|
468
|
-
function buildEmitZoneFromLayout(zone, width, height) {
|
|
469
|
-
const fallback = {};
|
|
470
|
-
const resolvedWidth = resolveNumericSize(width);
|
|
471
|
-
const resolvedHeight = resolveNumericSize(height);
|
|
472
|
-
if (resolvedWidth !== void 0) fallback.width = resolvedWidth;
|
|
473
|
-
if (resolvedHeight !== void 0) fallback.height = resolvedHeight;
|
|
474
|
-
return buildEmitZone(zone, fallback);
|
|
475
|
-
}
|
|
476
|
-
function buildDeathZone(zone, fallbackSize = {}) {
|
|
477
|
-
const type = zone.mode ?? "onEnter";
|
|
478
|
-
const source = buildZoneSource(zone, fallbackSize);
|
|
479
|
-
if (!source) return void 0;
|
|
480
|
-
return { type, source };
|
|
481
|
-
}
|
|
482
|
-
function buildDeathZonesFromLayout(zones, width, height) {
|
|
483
|
-
if (!zones) return void 0;
|
|
484
|
-
const list = Array.isArray(zones) ? zones : [zones];
|
|
485
|
-
const fallback = {};
|
|
486
|
-
const resolvedWidth = resolveNumericSize(width);
|
|
487
|
-
const resolvedHeight = resolveNumericSize(height);
|
|
488
|
-
if (resolvedWidth !== void 0) fallback.width = resolvedWidth;
|
|
489
|
-
if (resolvedHeight !== void 0) fallback.height = resolvedHeight;
|
|
490
|
-
const deathZones = list.map((zone) => buildDeathZone(zone, fallback)).filter((zone) => Boolean(zone));
|
|
491
|
-
return deathZones.length > 0 ? deathZones : void 0;
|
|
492
|
-
}
|
|
493
|
-
const PARTICLE_PRESET_REGISTRY = {
|
|
494
|
-
explosion: {
|
|
495
|
-
speed: { min: 120, max: 320 },
|
|
496
|
-
scale: { start: 1, end: 0 },
|
|
497
|
-
alpha: { start: 1, end: 0 },
|
|
498
|
-
lifespan: 600,
|
|
499
|
-
quantity: 24,
|
|
500
|
-
blendMode: "ADD"
|
|
501
|
-
},
|
|
502
|
-
trail: {
|
|
503
|
-
speed: { min: 30, max: 80 },
|
|
504
|
-
scale: { start: 0.6, end: 0 },
|
|
505
|
-
alpha: { start: 0.8, end: 0 },
|
|
506
|
-
lifespan: 700,
|
|
507
|
-
frequency: 40
|
|
508
|
-
},
|
|
509
|
-
rain: {
|
|
510
|
-
speed: { min: 320, max: 520 },
|
|
511
|
-
angle: { min: 80, max: 100 },
|
|
512
|
-
scale: { start: 0.5, end: 0.2 },
|
|
513
|
-
alpha: { start: 0.6, end: 0.1 },
|
|
514
|
-
lifespan: 1e3,
|
|
515
|
-
frequency: 20
|
|
516
|
-
},
|
|
517
|
-
snow: {
|
|
518
|
-
speed: { min: 40, max: 120 },
|
|
519
|
-
angle: { min: 80, max: 100 },
|
|
520
|
-
gravityY: 8,
|
|
521
|
-
scale: { start: 0.6, end: 0.6 },
|
|
522
|
-
alpha: { start: 0.8, end: 0.3 },
|
|
523
|
-
lifespan: 2600,
|
|
524
|
-
frequency: 80
|
|
525
|
-
},
|
|
526
|
-
sparkle: {
|
|
527
|
-
speed: { min: 20, max: 60 },
|
|
528
|
-
scale: { start: 0.4, end: 0 },
|
|
529
|
-
alpha: { start: 1, end: 0 },
|
|
530
|
-
lifespan: 500,
|
|
531
|
-
frequency: 60,
|
|
532
|
-
blendMode: "ADD"
|
|
533
|
-
}
|
|
534
|
-
};
|
|
535
|
-
function resolveParticlePreset(preset, config = {}) {
|
|
536
|
-
const base = preset ? PARTICLE_PRESET_REGISTRY[preset] : void 0;
|
|
537
|
-
if (preset && !base) {
|
|
538
|
-
console.warn(`[Particles] Preset "${String(preset)}" not found in registry`);
|
|
539
|
-
}
|
|
540
|
-
return {
|
|
541
|
-
...base ?? {},
|
|
542
|
-
...config
|
|
543
|
-
};
|
|
544
|
-
}
|
|
545
|
-
function isParticleEmitter(target) {
|
|
546
|
-
return !!target && typeof target.explode === "function";
|
|
547
|
-
}
|
|
548
|
-
function getFirstEmitter(manager) {
|
|
549
|
-
if (!manager) return null;
|
|
550
|
-
if (manager.__emitter) return manager.__emitter;
|
|
551
|
-
const emitters = manager.emitters;
|
|
552
|
-
if (Array.isArray(emitters)) {
|
|
553
|
-
return emitters[0] ?? null;
|
|
554
|
-
}
|
|
555
|
-
if (emitters && "list" in emitters && Array.isArray(emitters.list)) {
|
|
556
|
-
return emitters.list[0] ?? null;
|
|
557
|
-
}
|
|
558
|
-
return null;
|
|
559
|
-
}
|
|
560
|
-
function applyEmitterConfig(emitter, config) {
|
|
561
|
-
if (!emitter) return;
|
|
562
|
-
const withConfig = emitter;
|
|
563
|
-
if (withConfig.setConfig) {
|
|
564
|
-
withConfig.setConfig(config);
|
|
565
|
-
return;
|
|
566
|
-
}
|
|
567
|
-
if (withConfig.fromJSON) {
|
|
568
|
-
withConfig.fromJSON(config);
|
|
569
|
-
return;
|
|
570
|
-
}
|
|
571
|
-
Object.assign(emitter, config);
|
|
572
|
-
}
|
|
573
|
-
function applyEmitZone(emitter, emitZone) {
|
|
574
|
-
if (!emitter || !emitZone) return;
|
|
575
|
-
const withZone = emitter;
|
|
576
|
-
if (withZone.setEmitZone) {
|
|
577
|
-
withZone.setEmitZone(emitZone);
|
|
578
|
-
return;
|
|
579
|
-
}
|
|
580
|
-
}
|
|
581
|
-
function applyDeathZone(emitter, deathZone) {
|
|
582
|
-
if (!emitter) return;
|
|
583
|
-
const withZone = emitter;
|
|
584
|
-
const isDefined = (value) => value !== null && value !== void 0;
|
|
585
|
-
const normalized = Array.isArray(deathZone) ? deathZone.filter(isDefined) : deathZone ? [deathZone] : [];
|
|
586
|
-
const hasZone = normalized.length > 0;
|
|
587
|
-
if (hasZone && withZone.setDeathZone) {
|
|
588
|
-
withZone.setDeathZone(normalized);
|
|
589
|
-
return;
|
|
590
|
-
}
|
|
591
|
-
if (!hasZone) {
|
|
592
|
-
if (withZone.clearDeathZones) {
|
|
593
|
-
withZone.clearDeathZones();
|
|
594
|
-
return;
|
|
595
|
-
}
|
|
596
|
-
if (withZone.deathZones) {
|
|
597
|
-
withZone.deathZones = [];
|
|
598
|
-
}
|
|
599
|
-
return;
|
|
600
|
-
}
|
|
601
|
-
if (withZone.clearDeathZones) {
|
|
602
|
-
withZone.clearDeathZones();
|
|
603
|
-
}
|
|
604
|
-
if (withZone.addDeathZone) {
|
|
605
|
-
withZone.addDeathZone(normalized);
|
|
606
|
-
return;
|
|
607
|
-
}
|
|
608
|
-
if (withZone.deathZones) {
|
|
609
|
-
withZone.deathZones = normalized;
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
function mergeDeathZones(base, extra) {
|
|
613
|
-
const baseList = Array.isArray(base) ? base : base ? [base] : [];
|
|
614
|
-
const extraList = extra ?? [];
|
|
615
|
-
const merged = [...baseList, ...extraList];
|
|
616
|
-
return merged.length > 0 ? merged : void 0;
|
|
617
|
-
}
|
|
618
|
-
function applyParticlesProps(manager, prev, next) {
|
|
619
|
-
if (!manager) return;
|
|
620
|
-
const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
|
|
621
|
-
if (textureChanged && next.texture && "setTexture" in manager && manager.setTexture) {
|
|
622
|
-
manager.setTexture(next.texture, next.frame);
|
|
623
|
-
}
|
|
624
|
-
const configChanged = prev.preset !== next.preset || prev.config !== next.config || prev.zone !== next.zone || prev.excludeZones !== next.excludeZones || prev.width !== next.width || prev.height !== next.height;
|
|
625
|
-
if (configChanged) {
|
|
626
|
-
const resolvedConfig = resolveParticlePreset(next.preset, next.config);
|
|
627
|
-
let emitter = null;
|
|
628
|
-
if (isParticleEmitter(manager)) {
|
|
629
|
-
emitter = manager;
|
|
630
|
-
} else {
|
|
631
|
-
const managerLike = manager;
|
|
632
|
-
emitter = managerLike.__emitter ?? getFirstEmitter(managerLike);
|
|
633
|
-
if (!emitter && managerLike.createEmitter) {
|
|
634
|
-
const created = managerLike.createEmitter(resolvedConfig);
|
|
635
|
-
emitter = created ?? null;
|
|
636
|
-
}
|
|
637
|
-
managerLike.__emitter = emitter;
|
|
638
|
-
}
|
|
639
|
-
if (!emitter) return;
|
|
640
|
-
applyEmitterConfig(emitter, resolvedConfig);
|
|
641
|
-
if (next.zone) {
|
|
642
|
-
const emitZone = buildEmitZoneFromLayout(next.zone, next.width, next.height);
|
|
643
|
-
if (emitZone) {
|
|
644
|
-
applyEmitZone(emitter, emitZone);
|
|
645
|
-
}
|
|
646
|
-
}
|
|
647
|
-
const deathZones = buildDeathZonesFromLayout(next.excludeZones, next.width, next.height);
|
|
648
|
-
const combined = mergeDeathZones(
|
|
649
|
-
resolvedConfig.deathZone,
|
|
650
|
-
deathZones
|
|
651
|
-
);
|
|
652
|
-
applyDeathZone(emitter, combined);
|
|
653
|
-
}
|
|
654
|
-
}
|
|
655
|
-
function applyParticlesLayout(particles, _prev, next) {
|
|
656
|
-
particles.__layoutProps = next;
|
|
657
|
-
}
|
|
658
|
-
function createParticlesLayout(particles, props) {
|
|
659
|
-
particles.__layoutProps = props;
|
|
660
|
-
particles.__getLayoutSize = () => ({ width: 0.01, height: 0.01 });
|
|
661
|
-
}
|
|
662
|
-
const particlesCreator = (scene, props) => {
|
|
663
|
-
const resolvedConfig = {
|
|
664
|
-
...resolveParticlePreset(props.preset, props.config)
|
|
665
|
-
};
|
|
666
|
-
if (props.zone) {
|
|
667
|
-
const emitZone = buildEmitZoneFromLayout(props.zone, props.width, props.height);
|
|
668
|
-
if (emitZone) {
|
|
669
|
-
const configWithZone = resolvedConfig;
|
|
670
|
-
configWithZone.emitZone = emitZone;
|
|
671
|
-
}
|
|
672
|
-
}
|
|
673
|
-
const particles = scene.add.particles(
|
|
674
|
-
props.x ?? 0,
|
|
675
|
-
props.y ?? 0,
|
|
676
|
-
props.texture,
|
|
677
|
-
resolvedConfig
|
|
678
|
-
);
|
|
679
|
-
if (props.frame !== void 0) {
|
|
680
|
-
const configWithFrame = resolvedConfig;
|
|
681
|
-
configWithFrame.frame = props.frame;
|
|
682
|
-
if ("setTexture" in particles && particles.setTexture) {
|
|
683
|
-
particles.setTexture(props.texture, props.frame);
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
const emitter = isParticleEmitter(particles) ? particles : getFirstEmitter(particles);
|
|
687
|
-
if (!isParticleEmitter(particles)) {
|
|
688
|
-
particles.__emitter = emitter;
|
|
689
|
-
}
|
|
690
|
-
if ("setOrigin" in particles && typeof particles.setOrigin === "function") {
|
|
691
|
-
particles.setOrigin(0, 0);
|
|
692
|
-
}
|
|
693
|
-
createTransform(particles, props);
|
|
694
|
-
createPhaser(particles, props);
|
|
695
|
-
createParticlesLayout(particles, props);
|
|
696
|
-
if (props.excludeZones && emitter) {
|
|
697
|
-
const deathZones = buildDeathZonesFromLayout(props.excludeZones, props.width, props.height);
|
|
698
|
-
const combinedDeathZones = mergeDeathZones(
|
|
699
|
-
resolvedConfig.deathZone,
|
|
700
|
-
deathZones
|
|
701
|
-
);
|
|
702
|
-
if (combinedDeathZones) {
|
|
703
|
-
applyDeathZone(emitter, combinedDeathZones);
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
if (props.onReady) {
|
|
707
|
-
props.onReady(particles);
|
|
708
|
-
}
|
|
709
|
-
return particles;
|
|
710
|
-
};
|
|
711
|
-
const particlesPatcher = (node, prev, next) => {
|
|
712
|
-
applyTransformProps(node, prev, next);
|
|
713
|
-
applyPhaserProps(node, prev, next);
|
|
714
|
-
applyParticlesProps(node, prev, next);
|
|
715
|
-
applyParticlesLayout(node, prev, next);
|
|
716
|
-
};
|
|
717
|
-
function getOriginalTextureDimensions(sprite) {
|
|
718
|
-
const frame = sprite.frame;
|
|
719
|
-
return {
|
|
720
|
-
width: frame.width,
|
|
721
|
-
height: frame.height
|
|
722
|
-
};
|
|
723
|
-
}
|
|
724
|
-
function calculateFitScale(sprite, targetWidth, targetHeight, fit = "fill") {
|
|
725
|
-
const { width: textureWidth, height: textureHeight } = getOriginalTextureDimensions(sprite);
|
|
726
|
-
if (textureWidth === 0 || textureHeight === 0) {
|
|
727
|
-
return { scaleX: 1, scaleY: 1 };
|
|
728
|
-
}
|
|
729
|
-
if (fit === "fill") {
|
|
730
|
-
return {
|
|
731
|
-
scaleX: targetWidth / textureWidth,
|
|
732
|
-
scaleY: targetHeight / textureHeight
|
|
733
|
-
};
|
|
734
|
-
}
|
|
735
|
-
const targetAspect = targetWidth / targetHeight;
|
|
736
|
-
const textureAspect = textureWidth / textureHeight;
|
|
737
|
-
if (fit === "contain") {
|
|
738
|
-
const scale = targetAspect > textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
|
|
739
|
-
return { scaleX: scale, scaleY: scale };
|
|
740
|
-
}
|
|
741
|
-
if (fit === "cover") {
|
|
742
|
-
const scale = targetAspect < textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
|
|
743
|
-
return { scaleX: scale, scaleY: scale };
|
|
744
|
-
}
|
|
745
|
-
return { scaleX: 1, scaleY: 1 };
|
|
746
|
-
}
|
|
747
|
-
function applySpriteProps(sprite, prev, next) {
|
|
748
|
-
const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
|
|
749
|
-
if (textureChanged && next.texture) {
|
|
750
|
-
sprite.setTexture(next.texture, next.frame);
|
|
751
|
-
}
|
|
752
|
-
if (prev.tint !== next.tint) {
|
|
753
|
-
if (typeof next.tint === "number") {
|
|
754
|
-
sprite.setTint(next.tint);
|
|
755
|
-
} else {
|
|
756
|
-
sprite.clearTint();
|
|
757
|
-
}
|
|
758
|
-
}
|
|
759
|
-
if (prev.originX !== next.originX || prev.originY !== next.originY) {
|
|
760
|
-
const originX = next.originX ?? sprite.originX;
|
|
761
|
-
const originY = next.originY ?? sprite.originY;
|
|
762
|
-
sprite.setOrigin(originX, originY);
|
|
763
|
-
}
|
|
764
|
-
const displayWidthChanged = prev.displayWidth !== next.displayWidth;
|
|
765
|
-
const displayHeightChanged = prev.displayHeight !== next.displayHeight;
|
|
766
|
-
const fitChanged = prev.fit !== next.fit;
|
|
767
|
-
if (displayWidthChanged || displayHeightChanged || fitChanged || textureChanged) {
|
|
768
|
-
if (typeof next.displayWidth === "number" && typeof next.displayHeight === "number") {
|
|
769
|
-
const fit = next.fit ?? "fill";
|
|
770
|
-
if (fit === "fill") {
|
|
771
|
-
sprite.setDisplaySize(next.displayWidth, next.displayHeight);
|
|
772
|
-
} else {
|
|
773
|
-
const { scaleX, scaleY } = calculateFitScale(
|
|
774
|
-
sprite,
|
|
775
|
-
next.displayWidth,
|
|
776
|
-
next.displayHeight,
|
|
777
|
-
fit
|
|
778
|
-
);
|
|
779
|
-
sprite.setScale(scaleX, scaleY);
|
|
780
|
-
}
|
|
781
|
-
} else if (typeof next.displayWidth === "number") {
|
|
782
|
-
const { width: origWidth } = getOriginalTextureDimensions(sprite);
|
|
783
|
-
const scale = next.displayWidth / origWidth;
|
|
784
|
-
sprite.setScale(scale);
|
|
785
|
-
} else if (typeof next.displayHeight === "number") {
|
|
786
|
-
const { height: origHeight } = getOriginalTextureDimensions(sprite);
|
|
787
|
-
const scale = next.displayHeight / origHeight;
|
|
788
|
-
sprite.setScale(scale, scale);
|
|
789
|
-
} else {
|
|
790
|
-
sprite.setScale(1);
|
|
791
|
-
}
|
|
792
|
-
}
|
|
793
|
-
const animationChanged = prev.animationKey !== next.animationKey || prev.loop !== next.loop || prev.repeatDelay !== next.repeatDelay;
|
|
794
|
-
if (animationChanged) {
|
|
795
|
-
if (sprite.anims.isPlaying) {
|
|
796
|
-
sprite.anims.stop();
|
|
797
|
-
}
|
|
798
|
-
if (next.animationKey) {
|
|
799
|
-
sprite.anims.play({
|
|
800
|
-
key: next.animationKey,
|
|
801
|
-
repeat: next.loop ? -1 : 0,
|
|
802
|
-
repeatDelay: next.repeatDelay ?? 0
|
|
803
|
-
});
|
|
804
|
-
}
|
|
805
|
-
}
|
|
806
|
-
const callbacksChanged = prev.onAnimationStart !== next.onAnimationStart || prev.onAnimationComplete !== next.onAnimationComplete || prev.onAnimationRepeat !== next.onAnimationRepeat || prev.onAnimationUpdate !== next.onAnimationUpdate;
|
|
807
|
-
if (callbacksChanged) {
|
|
808
|
-
sprite.off("animationstart");
|
|
809
|
-
sprite.off("animationcomplete");
|
|
810
|
-
sprite.off("animationrepeat");
|
|
811
|
-
sprite.off("animationupdate");
|
|
812
|
-
if (next.onAnimationStart) {
|
|
813
|
-
sprite.on("animationstart", (anim) => {
|
|
814
|
-
next.onAnimationStart?.(anim.key);
|
|
815
|
-
});
|
|
816
|
-
}
|
|
817
|
-
if (next.onAnimationComplete) {
|
|
818
|
-
sprite.on("animationcomplete", (anim) => {
|
|
819
|
-
next.onAnimationComplete?.(anim.key);
|
|
820
|
-
});
|
|
821
|
-
}
|
|
822
|
-
if (next.onAnimationRepeat) {
|
|
823
|
-
sprite.on("animationrepeat", (anim) => {
|
|
824
|
-
next.onAnimationRepeat?.(anim.key);
|
|
825
|
-
});
|
|
826
|
-
}
|
|
827
|
-
if (next.onAnimationUpdate) {
|
|
828
|
-
sprite.on(
|
|
829
|
-
"animationupdate",
|
|
830
|
-
(anim, frame) => {
|
|
831
|
-
next.onAnimationUpdate?.(anim.key, frame);
|
|
832
|
-
}
|
|
833
|
-
);
|
|
834
|
-
}
|
|
835
|
-
}
|
|
836
|
-
}
|
|
837
|
-
function applySpriteLayout(sprite, _prev, next) {
|
|
838
|
-
sprite.__layoutProps = next;
|
|
839
|
-
}
|
|
840
|
-
function createSpriteLayout(sprite, props) {
|
|
841
|
-
sprite.__layoutProps = props;
|
|
842
|
-
sprite.__getLayoutSize = () => {
|
|
843
|
-
return { width: 0.01, height: 0.01 };
|
|
844
|
-
};
|
|
845
|
-
}
|
|
846
|
-
const spriteCreator = (scene, props) => {
|
|
847
|
-
const sprite = scene.add.sprite(props.x ?? 0, props.y ?? 0, props.texture, props.frame);
|
|
848
|
-
sprite.setOrigin(0.5, 0.5);
|
|
849
|
-
if (props.originX !== void 0 || props.originY !== void 0) {
|
|
850
|
-
sprite.setOrigin(props.originX ?? sprite.originX, props.originY ?? sprite.originY);
|
|
851
|
-
}
|
|
852
|
-
createTransform(sprite, props);
|
|
853
|
-
createPhaser(sprite, props);
|
|
854
|
-
if (props.tint !== void 0) {
|
|
855
|
-
sprite.setTint(props.tint);
|
|
856
|
-
}
|
|
857
|
-
if (props.displayWidth !== void 0 || props.displayHeight !== void 0) {
|
|
858
|
-
if (props.displayWidth !== void 0 && props.displayHeight !== void 0) {
|
|
859
|
-
const fit = props.fit ?? "fill";
|
|
860
|
-
const textureWidth = sprite.width;
|
|
861
|
-
const textureHeight = sprite.height;
|
|
862
|
-
if (textureWidth > 0 && textureHeight > 0) {
|
|
863
|
-
if (fit === "fill") {
|
|
864
|
-
sprite.setDisplaySize(props.displayWidth, props.displayHeight);
|
|
865
|
-
} else if (fit === "contain") {
|
|
866
|
-
const targetAspect = props.displayWidth / props.displayHeight;
|
|
867
|
-
const textureAspect = textureWidth / textureHeight;
|
|
868
|
-
const scale = targetAspect > textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
|
|
869
|
-
sprite.setScale(scale);
|
|
870
|
-
} else if (fit === "cover") {
|
|
871
|
-
const targetAspect = props.displayWidth / props.displayHeight;
|
|
872
|
-
const textureAspect = textureWidth / textureHeight;
|
|
873
|
-
const scale = targetAspect < textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
|
|
874
|
-
sprite.setScale(scale);
|
|
875
|
-
}
|
|
876
|
-
}
|
|
877
|
-
} else if (props.displayWidth !== void 0) {
|
|
878
|
-
const scale = props.displayWidth / sprite.width;
|
|
879
|
-
sprite.setScale(scale);
|
|
880
|
-
} else if (props.displayHeight !== void 0) {
|
|
881
|
-
const scale = props.displayHeight / sprite.height;
|
|
882
|
-
sprite.setScale(scale);
|
|
883
|
-
}
|
|
884
|
-
}
|
|
885
|
-
if (props.animationKey) {
|
|
886
|
-
if (sprite.scene && sprite.scene.anims.exists(props.animationKey)) {
|
|
887
|
-
sprite.anims.play({
|
|
888
|
-
key: props.animationKey,
|
|
889
|
-
repeat: props.loop ? -1 : 0,
|
|
890
|
-
repeatDelay: props.repeatDelay ?? 0
|
|
891
|
-
});
|
|
892
|
-
}
|
|
893
|
-
}
|
|
894
|
-
if (props.onAnimationStart) {
|
|
895
|
-
sprite.on("animationstart", (anim) => {
|
|
896
|
-
props.onAnimationStart?.(anim.key);
|
|
897
|
-
});
|
|
898
|
-
}
|
|
899
|
-
if (props.onAnimationComplete) {
|
|
900
|
-
sprite.on("animationcomplete", (anim) => {
|
|
901
|
-
props.onAnimationComplete?.(anim.key);
|
|
902
|
-
});
|
|
903
|
-
}
|
|
904
|
-
if (props.onAnimationRepeat) {
|
|
905
|
-
sprite.on("animationrepeat", (anim) => {
|
|
906
|
-
props.onAnimationRepeat?.(anim.key);
|
|
907
|
-
});
|
|
908
|
-
}
|
|
909
|
-
if (props.onAnimationUpdate) {
|
|
910
|
-
sprite.on(
|
|
911
|
-
"animationupdate",
|
|
912
|
-
(anim, frame) => {
|
|
913
|
-
props.onAnimationUpdate?.(anim.key, frame);
|
|
914
|
-
}
|
|
915
|
-
);
|
|
916
|
-
}
|
|
917
|
-
createSpriteLayout(sprite, props);
|
|
918
|
-
if (props.onReady) {
|
|
919
|
-
props.onReady(sprite);
|
|
920
|
-
}
|
|
921
|
-
return sprite;
|
|
922
|
-
};
|
|
923
|
-
const spritePatcher = (node, prev, next) => {
|
|
924
|
-
applyTransformProps(node, prev, next);
|
|
925
|
-
applyPhaserProps(node, prev, next);
|
|
926
|
-
applySpriteProps(node, prev, next);
|
|
927
|
-
applySpriteLayout(node, prev, next);
|
|
928
|
-
};
|
|
929
|
-
function applyTextProps(node, prev, next) {
|
|
930
|
-
if (node.active === false || node.scene && !node.scene.sys.game) {
|
|
931
|
-
return;
|
|
932
|
-
}
|
|
933
|
-
let needsUpdate = false;
|
|
934
|
-
if (prev.text !== next.text && typeof next.text === "string") {
|
|
935
|
-
node.setText(next.text);
|
|
936
|
-
needsUpdate = true;
|
|
937
|
-
}
|
|
938
|
-
if (next.style !== void 0 && !TransformOriginView.equal(next.style, prev.style || {})) {
|
|
939
|
-
try {
|
|
940
|
-
node.setStyle(next.style);
|
|
941
|
-
needsUpdate = true;
|
|
942
|
-
} catch (error) {
|
|
943
|
-
console.warn("Failed to apply text style (scene may be transitioning):", error);
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
if (next.maxWidth !== prev.maxWidth && next.maxWidth !== void 0) {
|
|
947
|
-
const viewport = TransformOriginView.viewportRegistry.getViewport();
|
|
948
|
-
const parsedMaxWidth = TransformOriginView.parseSize(next.maxWidth);
|
|
949
|
-
const resolvedMaxWidth = TransformOriginView.resolveSize(parsedMaxWidth, viewport?.width, void 0, void 0);
|
|
950
|
-
node.setWordWrapWidth(resolvedMaxWidth, true);
|
|
951
|
-
needsUpdate = true;
|
|
952
|
-
}
|
|
953
|
-
if (prev.style !== next.style && next.style !== void 0) {
|
|
954
|
-
try {
|
|
955
|
-
node.setStyle(next.style);
|
|
956
|
-
needsUpdate = true;
|
|
957
|
-
} catch (error) {
|
|
958
|
-
console.warn("Failed to apply text style (scene may be transitioning):", error);
|
|
959
|
-
}
|
|
960
|
-
}
|
|
961
|
-
if (needsUpdate && node.updateText) {
|
|
962
|
-
node.updateText();
|
|
963
|
-
}
|
|
964
|
-
}
|
|
965
|
-
function applyTextLayout(text, _prev, next) {
|
|
966
|
-
text.__layoutProps = next;
|
|
967
|
-
text.__getLayoutSize = () => {
|
|
968
|
-
if (text.__layoutProps?.headless) {
|
|
969
|
-
return { width: 0.01, height: 0.01 };
|
|
970
|
-
}
|
|
971
|
-
return {
|
|
972
|
-
width: text.width,
|
|
973
|
-
height: text.height
|
|
974
|
-
};
|
|
975
|
-
};
|
|
976
|
-
}
|
|
977
|
-
function createTextLayout(text, props) {
|
|
978
|
-
text.__layoutProps = props;
|
|
979
|
-
text.__getLayoutSize = () => {
|
|
980
|
-
if (text.__layoutProps?.headless) {
|
|
981
|
-
return { width: 0.01, height: 0.01 };
|
|
982
|
-
}
|
|
983
|
-
return {
|
|
984
|
-
width: text.width,
|
|
985
|
-
height: text.height
|
|
986
|
-
};
|
|
987
|
-
};
|
|
988
|
-
}
|
|
989
|
-
const textCreator = (scene, props) => {
|
|
990
|
-
const text = scene.add.text(props.x ?? 0, props.y ?? 0, props.text ?? "", props.style);
|
|
991
|
-
if (props.headless) {
|
|
992
|
-
text.setOrigin(0.5, 0.5);
|
|
993
|
-
} else {
|
|
994
|
-
text.setOrigin(0, 0);
|
|
995
|
-
}
|
|
996
|
-
const normalizedProps = { ...props };
|
|
997
|
-
if (props.headless) {
|
|
998
|
-
delete normalizedProps.padding;
|
|
999
|
-
delete normalizedProps.margin;
|
|
1000
|
-
delete normalizedProps.gap;
|
|
1001
|
-
} else {
|
|
1002
|
-
if (normalizedProps.rotation !== void 0) {
|
|
1003
|
-
delete normalizedProps.rotation;
|
|
1004
|
-
}
|
|
1005
|
-
}
|
|
1006
|
-
createTransform(text, normalizedProps);
|
|
1007
|
-
createPhaser(text, normalizedProps);
|
|
1008
|
-
createTextLayout(text, normalizedProps);
|
|
1009
|
-
return text;
|
|
18
|
+
var createCameraFlashFX = (camera, config) => {
|
|
19
|
+
const duration = config.duration ?? 200;
|
|
20
|
+
const red = config.red ?? 255;
|
|
21
|
+
const green = config.green ?? 255;
|
|
22
|
+
const blue = config.blue ?? 255;
|
|
23
|
+
camera.flash(duration, red, green, blue, config.force ?? false, config.onComplete);
|
|
1010
24
|
};
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
}
|
|
1018
|
-
}
|
|
1019
|
-
const normalizedPrev = { ...prev };
|
|
1020
|
-
const normalizedNext = { ...next };
|
|
1021
|
-
if (next.headless) {
|
|
1022
|
-
delete normalizedNext.padding;
|
|
1023
|
-
delete normalizedNext.margin;
|
|
1024
|
-
delete normalizedNext.gap;
|
|
1025
|
-
} else {
|
|
1026
|
-
if (normalizedNext.rotation !== void 0) {
|
|
1027
|
-
delete normalizedNext.rotation;
|
|
1028
|
-
}
|
|
1029
|
-
}
|
|
1030
|
-
if (prev.headless) {
|
|
1031
|
-
delete normalizedPrev.padding;
|
|
1032
|
-
delete normalizedPrev.margin;
|
|
1033
|
-
delete normalizedPrev.gap;
|
|
1034
|
-
} else {
|
|
1035
|
-
if (normalizedPrev.rotation !== void 0) {
|
|
1036
|
-
delete normalizedPrev.rotation;
|
|
1037
|
-
}
|
|
1038
|
-
}
|
|
1039
|
-
applyTransformProps(node, normalizedPrev, normalizedNext);
|
|
1040
|
-
applyPhaserProps(node, normalizedPrev, normalizedNext);
|
|
1041
|
-
applyTextProps(node, normalizedPrev, normalizedNext);
|
|
1042
|
-
applyTextLayout(node, normalizedPrev, normalizedNext);
|
|
25
|
+
var createCameraFadeInFX = (camera, config) => {
|
|
26
|
+
const duration = config.duration ?? 300;
|
|
27
|
+
const red = config.red ?? 0;
|
|
28
|
+
const green = config.green ?? 0;
|
|
29
|
+
const blue = config.blue ?? 0;
|
|
30
|
+
camera.fadeIn(duration, red, green, blue, config.onComplete);
|
|
1043
31
|
};
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
32
|
+
var createCameraFadeOutFX = (camera, config) => {
|
|
33
|
+
const duration = config.duration ?? 300;
|
|
34
|
+
const red = config.red ?? 0;
|
|
35
|
+
const green = config.green ?? 0;
|
|
36
|
+
const blue = config.blue ?? 0;
|
|
37
|
+
camera.fadeOut(duration, red, green, blue, config.onComplete);
|
|
1048
38
|
};
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
};
|
|
1054
|
-
function applyBackgroundProps(container, prev, next) {
|
|
1055
|
-
const prevBgColor = prev.backgroundColor;
|
|
1056
|
-
const nextBgColor = next.backgroundColor;
|
|
1057
|
-
const prevBgAlpha = prev.backgroundAlpha ?? 1;
|
|
1058
|
-
const nextBgAlpha = next.backgroundAlpha ?? 1;
|
|
1059
|
-
let prevWidth = typeof prev.width === "number" ? prev.width : 100;
|
|
1060
|
-
let prevHeight = typeof prev.height === "number" ? prev.height : 100;
|
|
1061
|
-
let nextWidth = typeof next.width === "number" ? next.width : 100;
|
|
1062
|
-
let nextHeight = typeof next.height === "number" ? next.height : 100;
|
|
1063
|
-
if (container.__getLayoutSize) {
|
|
1064
|
-
const layoutSize = container.__getLayoutSize();
|
|
1065
|
-
prevWidth = layoutSize.width;
|
|
1066
|
-
prevHeight = layoutSize.height;
|
|
1067
|
-
nextWidth = layoutSize.width;
|
|
1068
|
-
nextHeight = layoutSize.height;
|
|
1069
|
-
}
|
|
1070
|
-
const prevCornerRadius = prev.cornerRadius ?? 0;
|
|
1071
|
-
const nextCornerRadius = next.cornerRadius ?? 0;
|
|
1072
|
-
const prevBorderColor = prev.borderColor;
|
|
1073
|
-
const nextBorderColor = next.borderColor;
|
|
1074
|
-
const prevBorderWidth = prev.borderWidth ?? 0;
|
|
1075
|
-
const nextBorderWidth = next.borderWidth ?? 0;
|
|
1076
|
-
const prevBorderAlpha = prev.borderAlpha ?? 1;
|
|
1077
|
-
const nextBorderAlpha = next.borderAlpha ?? 1;
|
|
1078
|
-
const prevHasBorder = prevBorderWidth > 0 && prevBorderColor !== void 0;
|
|
1079
|
-
const nextHasBorder = nextBorderWidth > 0 && nextBorderColor !== void 0;
|
|
1080
|
-
const prevHasGraphics = prevBgColor !== void 0 || prevHasBorder;
|
|
1081
|
-
const nextHasGraphics = nextBgColor !== void 0 || nextHasBorder;
|
|
1082
|
-
if (prevHasGraphics && !nextHasGraphics) {
|
|
1083
|
-
if (container.__background) {
|
|
1084
|
-
container.__background.destroy();
|
|
1085
|
-
delete container.__background;
|
|
1086
|
-
}
|
|
1087
|
-
} else if (!prevHasGraphics && nextHasGraphics) {
|
|
1088
|
-
if (container.scene) {
|
|
1089
|
-
const background = container.scene.add.graphics();
|
|
1090
|
-
if (nextBgColor !== void 0) {
|
|
1091
|
-
background.fillStyle(nextBgColor, nextBgAlpha);
|
|
1092
|
-
}
|
|
1093
|
-
if (nextHasBorder) {
|
|
1094
|
-
background.lineStyle(nextBorderWidth, nextBorderColor, nextBorderAlpha);
|
|
1095
|
-
}
|
|
1096
|
-
if (nextCornerRadius !== 0) {
|
|
1097
|
-
if (nextBgColor !== void 0) {
|
|
1098
|
-
background.fillRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
|
|
1099
|
-
}
|
|
1100
|
-
if (nextHasBorder) {
|
|
1101
|
-
background.strokeRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
|
|
1102
|
-
}
|
|
1103
|
-
} else {
|
|
1104
|
-
if (nextBgColor !== void 0) {
|
|
1105
|
-
background.fillRect(0, 0, nextWidth, nextHeight);
|
|
1106
|
-
}
|
|
1107
|
-
if (nextHasBorder) {
|
|
1108
|
-
background.strokeRect(0, 0, nextWidth, nextHeight);
|
|
1109
|
-
}
|
|
1110
|
-
}
|
|
1111
|
-
container.addAt(background, 0);
|
|
1112
|
-
container.__background = background;
|
|
1113
|
-
background.__isBackground = true;
|
|
1114
|
-
}
|
|
1115
|
-
} else if (container.__background && nextHasGraphics) {
|
|
1116
|
-
const needsRedraw = prevBgColor !== nextBgColor || prevBgAlpha !== nextBgAlpha || prevWidth !== nextWidth || prevHeight !== nextHeight || prevCornerRadius !== nextCornerRadius || prevBorderWidth !== nextBorderWidth || prevBorderColor !== nextBorderColor || prevBorderAlpha !== nextBorderAlpha;
|
|
1117
|
-
if (needsRedraw) {
|
|
1118
|
-
container.__background.clear();
|
|
1119
|
-
if (nextBgColor !== void 0) {
|
|
1120
|
-
container.__background.fillStyle(nextBgColor, nextBgAlpha);
|
|
1121
|
-
}
|
|
1122
|
-
if (nextHasBorder) {
|
|
1123
|
-
container.__background.lineStyle(nextBorderWidth, nextBorderColor, nextBorderAlpha);
|
|
1124
|
-
}
|
|
1125
|
-
if (nextCornerRadius !== 0) {
|
|
1126
|
-
if (nextBgColor !== void 0) {
|
|
1127
|
-
container.__background.fillRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
|
|
1128
|
-
}
|
|
1129
|
-
if (nextHasBorder) {
|
|
1130
|
-
container.__background.strokeRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
|
|
1131
|
-
}
|
|
1132
|
-
} else {
|
|
1133
|
-
if (nextBgColor !== void 0) {
|
|
1134
|
-
container.__background.fillRect(0, 0, nextWidth, nextHeight);
|
|
1135
|
-
}
|
|
1136
|
-
if (nextHasBorder) {
|
|
1137
|
-
container.__background.strokeRect(0, 0, nextWidth, nextHeight);
|
|
1138
|
-
}
|
|
1139
|
-
}
|
|
1140
|
-
}
|
|
1141
|
-
}
|
|
1142
|
-
}
|
|
1143
|
-
function applyGesturesProps(scene, container, prev, next) {
|
|
1144
|
-
if (!scene || !scene.sys || !scene.data) {
|
|
1145
|
-
console.warn("applyGesturesProps: Invalid scene or scene not initialized");
|
|
1146
|
-
return;
|
|
1147
|
-
}
|
|
1148
|
-
if (scene.sys.game === null) {
|
|
1149
|
-
return;
|
|
1150
|
-
}
|
|
1151
|
-
const hasAnyGesture = !!(next.onTouch || next.onTouchOutside || next.onTouchMove || next.onDoubleTap || next.onLongPress || next.onHoverStart || next.onHoverEnd || next.onWheel);
|
|
1152
|
-
const hadAnyGesture = !!(prev.onTouch || prev.onTouchOutside || prev.onTouchMove || prev.onDoubleTap || prev.onLongPress || prev.onHoverStart || prev.onHoverEnd || prev.onWheel);
|
|
1153
|
-
const prevEnabled = hadAnyGesture && prev.enableGestures !== false;
|
|
1154
|
-
const nextEnabled = hasAnyGesture && next.enableGestures !== false;
|
|
1155
|
-
const manager = TransformOriginView.getGestureManager(scene);
|
|
1156
|
-
if (!prevEnabled && nextEnabled && hasAnyGesture) {
|
|
1157
|
-
const containerWithLayout = container;
|
|
1158
|
-
let width = 100;
|
|
1159
|
-
let height = 100;
|
|
1160
|
-
if (containerWithLayout.__getLayoutSize) {
|
|
1161
|
-
const size = containerWithLayout.__getLayoutSize();
|
|
1162
|
-
width = size.width;
|
|
1163
|
-
height = size.height;
|
|
1164
|
-
} else {
|
|
1165
|
-
const bounds = container.getBounds();
|
|
1166
|
-
width = bounds.width || 100;
|
|
1167
|
-
height = bounds.height || 100;
|
|
1168
|
-
}
|
|
1169
|
-
const hitArea = new Phaser__namespace.Geom.Rectangle(0, 0, width, height);
|
|
1170
|
-
const callbacks = {};
|
|
1171
|
-
if (next.onTouch) callbacks.onTouch = next.onTouch;
|
|
1172
|
-
if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside;
|
|
1173
|
-
if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove;
|
|
1174
|
-
if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap;
|
|
1175
|
-
if (next.onLongPress) callbacks.onLongPress = next.onLongPress;
|
|
1176
|
-
if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart;
|
|
1177
|
-
if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd;
|
|
1178
|
-
if (next.onWheel) callbacks.onWheel = next.onWheel;
|
|
1179
|
-
const config = {};
|
|
1180
|
-
if (next.longPressDuration !== void 0) config.longPressDuration = next.longPressDuration;
|
|
1181
|
-
if (next.doubleTapDelay !== void 0) config.doubleTapDelay = next.doubleTapDelay;
|
|
1182
|
-
manager.registerContainer(container, callbacks, hitArea, config);
|
|
1183
|
-
return;
|
|
1184
|
-
}
|
|
1185
|
-
if (prevEnabled && (!nextEnabled || !hasAnyGesture)) {
|
|
1186
|
-
manager.unregisterContainer(container);
|
|
1187
|
-
return;
|
|
1188
|
-
}
|
|
1189
|
-
if (nextEnabled && hasAnyGesture) {
|
|
1190
|
-
const callbacksChanged = prev.onTouch !== next.onTouch || prev.onTouchOutside !== next.onTouchOutside || prev.onTouchMove !== next.onTouchMove || prev.onDoubleTap !== next.onDoubleTap || prev.onLongPress !== next.onLongPress || prev.onHoverStart !== next.onHoverStart || prev.onHoverEnd !== next.onHoverEnd || prev.onWheel !== next.onWheel;
|
|
1191
|
-
if (callbacksChanged) {
|
|
1192
|
-
const callbacks = {};
|
|
1193
|
-
if (next.onTouch) callbacks.onTouch = next.onTouch;
|
|
1194
|
-
if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside;
|
|
1195
|
-
if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove;
|
|
1196
|
-
if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap;
|
|
1197
|
-
if (next.onLongPress) callbacks.onLongPress = next.onLongPress;
|
|
1198
|
-
if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart;
|
|
1199
|
-
if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd;
|
|
1200
|
-
if (next.onWheel) callbacks.onWheel = next.onWheel;
|
|
1201
|
-
manager.updateCallbacks(container, callbacks);
|
|
1202
|
-
}
|
|
1203
|
-
const containerWithLayout = container;
|
|
1204
|
-
let width = 100;
|
|
1205
|
-
let height = 100;
|
|
1206
|
-
if (containerWithLayout.__getLayoutSize) {
|
|
1207
|
-
const size = containerWithLayout.__getLayoutSize();
|
|
1208
|
-
width = size.width;
|
|
1209
|
-
height = size.height;
|
|
1210
|
-
} else {
|
|
1211
|
-
const bounds = container.getBounds();
|
|
1212
|
-
width = bounds.width || 100;
|
|
1213
|
-
height = bounds.height || 100;
|
|
1214
|
-
}
|
|
1215
|
-
const hitArea = new Phaser__namespace.Geom.Rectangle(0, 0, width, height);
|
|
1216
|
-
manager.updateHitArea(container, hitArea);
|
|
1217
|
-
}
|
|
1218
|
-
}
|
|
1219
|
-
function updateGestureHitAreaIfNeeded(node) {
|
|
1220
|
-
const containerWithLayout = node;
|
|
1221
|
-
if (!containerWithLayout.__getLayoutSize) return;
|
|
1222
|
-
try {
|
|
1223
|
-
const manager = TransformOriginView.getGestureManager(containerWithLayout.scene);
|
|
1224
|
-
const size = containerWithLayout.__getLayoutSize();
|
|
1225
|
-
const hitArea = new Phaser__namespace.Geom.Rectangle(0, 0, size.width, size.height);
|
|
1226
|
-
manager.updateHitArea(node, hitArea);
|
|
1227
|
-
} catch {
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
const LAYOUT_RELEVANT_PROPS = [
|
|
1231
|
-
"width",
|
|
1232
|
-
"height",
|
|
1233
|
-
"minWidth",
|
|
1234
|
-
"maxWidth",
|
|
1235
|
-
"minHeight",
|
|
1236
|
-
"maxHeight",
|
|
1237
|
-
"flex",
|
|
1238
|
-
"margin",
|
|
1239
|
-
"padding",
|
|
1240
|
-
"gap",
|
|
1241
|
-
"direction",
|
|
1242
|
-
"justifyContent",
|
|
1243
|
-
"alignItems",
|
|
1244
|
-
"overflow"
|
|
1245
|
-
];
|
|
1246
|
-
const DEEP_COMPARE_PROPS = /* @__PURE__ */ new Set(["margin", "padding"]);
|
|
1247
|
-
function hasLayoutPropsChanged(prev, next) {
|
|
1248
|
-
for (const prop of LAYOUT_RELEVANT_PROPS) {
|
|
1249
|
-
const oldVal = prev[prop];
|
|
1250
|
-
const newVal = next[prop];
|
|
1251
|
-
if (DEEP_COMPARE_PROPS.has(prop)) {
|
|
1252
|
-
if (!TransformOriginView.equal(oldVal, newVal)) {
|
|
1253
|
-
return true;
|
|
1254
|
-
}
|
|
1255
|
-
} else {
|
|
1256
|
-
if (oldVal !== newVal) {
|
|
1257
|
-
return true;
|
|
1258
|
-
}
|
|
1259
|
-
}
|
|
1260
|
-
}
|
|
1261
|
-
return false;
|
|
1262
|
-
}
|
|
1263
|
-
function getParentLayoutContext(node) {
|
|
1264
|
-
const parent = node.parentContainer;
|
|
1265
|
-
if (parent && parent.__layoutProps && parent.__getLayoutSize) {
|
|
1266
|
-
const parentSize = parent.__getLayoutSize();
|
|
1267
|
-
const padding = parent.__layoutProps.padding ?? 0;
|
|
1268
|
-
const normPadding = typeof padding === "number" ? { left: padding, right: padding, top: padding, bottom: padding } : {
|
|
1269
|
-
left: padding.left ?? 0,
|
|
1270
|
-
right: padding.right ?? 0,
|
|
1271
|
-
top: padding.top ?? 0,
|
|
1272
|
-
bottom: padding.bottom ?? 0
|
|
1273
|
-
};
|
|
1274
|
-
return {
|
|
1275
|
-
parentSize: {
|
|
1276
|
-
width: parentSize.width - normPadding.left - normPadding.right,
|
|
1277
|
-
height: parentSize.height - normPadding.top - normPadding.bottom
|
|
1278
|
-
}
|
|
1279
|
-
// Parent already provides content-area, no padding offset needed
|
|
1280
|
-
};
|
|
1281
|
-
}
|
|
1282
|
-
if (node.scene) {
|
|
1283
|
-
return {
|
|
1284
|
-
parentSize: {
|
|
1285
|
-
width: node.scene.scale.width,
|
|
1286
|
-
height: node.scene.scale.height
|
|
1287
|
-
}
|
|
1288
|
-
};
|
|
1289
|
-
}
|
|
1290
|
-
return {};
|
|
1291
|
-
}
|
|
1292
|
-
function applyLayoutProps(node, prev, next) {
|
|
1293
|
-
node.__layoutProps = next;
|
|
1294
|
-
if (hasLayoutPropsChanged(prev, next)) {
|
|
1295
|
-
const { parentSize, parentPadding } = getParentLayoutContext(node);
|
|
1296
|
-
TransformOriginView.calculateLayout(node, next, parentSize, parentPadding);
|
|
1297
|
-
updateGestureHitAreaIfNeeded(node);
|
|
1298
|
-
}
|
|
1299
|
-
}
|
|
1300
|
-
const tooltipStates = /* @__PURE__ */ new Map();
|
|
1301
|
-
function calculateTooltipPosition(targetBounds, position, offset, tooltipWidth, tooltipHeight) {
|
|
1302
|
-
const viewport = {
|
|
1303
|
-
width: window.innerWidth,
|
|
1304
|
-
height: window.innerHeight
|
|
1305
|
-
};
|
|
1306
|
-
let x = 0;
|
|
1307
|
-
let y = 0;
|
|
1308
|
-
switch (position) {
|
|
1309
|
-
case "top":
|
|
1310
|
-
x = targetBounds.centerX - tooltipWidth / 2;
|
|
1311
|
-
y = targetBounds.top - tooltipHeight - offset;
|
|
1312
|
-
break;
|
|
1313
|
-
case "bottom":
|
|
1314
|
-
x = targetBounds.centerX - tooltipWidth / 2;
|
|
1315
|
-
y = targetBounds.bottom + offset;
|
|
1316
|
-
break;
|
|
1317
|
-
case "left":
|
|
1318
|
-
x = targetBounds.left - tooltipWidth - offset;
|
|
1319
|
-
y = targetBounds.centerY - tooltipHeight / 2;
|
|
1320
|
-
break;
|
|
1321
|
-
case "right":
|
|
1322
|
-
x = targetBounds.right + offset;
|
|
1323
|
-
y = targetBounds.centerY - tooltipHeight / 2;
|
|
1324
|
-
break;
|
|
1325
|
-
}
|
|
1326
|
-
x = Math.max(8, Math.min(x, viewport.width - tooltipWidth - 8));
|
|
1327
|
-
y = Math.max(8, Math.min(y, viewport.height - tooltipHeight - 8));
|
|
1328
|
-
return { x, y };
|
|
1329
|
-
}
|
|
1330
|
-
function showTooltip(scene, container, config) {
|
|
1331
|
-
const state = tooltipStates.get(container);
|
|
1332
|
-
if (!state || state.isVisible) return;
|
|
1333
|
-
state.isVisible = true;
|
|
1334
|
-
state.currentConfig = config;
|
|
1335
|
-
const theme = TransformOriginView.themeRegistry.getGlobalTheme();
|
|
1336
|
-
const tooltipTheme = theme.Tooltip || {};
|
|
1337
|
-
const position = config.position ?? tooltipTheme.position ?? "top";
|
|
1338
|
-
const offset = config.offset ?? tooltipTheme.offset ?? 8;
|
|
1339
|
-
const content = config.content;
|
|
1340
|
-
const targetBounds = container.getBounds();
|
|
1341
|
-
const textStyle = tooltipTheme.textStyle ?? {
|
|
1342
|
-
fontSize: "14px",
|
|
1343
|
-
fontFamily: "Arial",
|
|
1344
|
-
color: "#ffffff",
|
|
1345
|
-
padding: { x: 8, y: 4 }
|
|
1346
|
-
};
|
|
1347
|
-
const { backgroundColor: bgColor, ...styleWithoutBg } = textStyle;
|
|
1348
|
-
const text = scene.add.text(0, 0, content, styleWithoutBg);
|
|
1349
|
-
text.setOrigin(0.5);
|
|
1350
|
-
const padding = textStyle.padding ?? { x: 8, y: 4 };
|
|
1351
|
-
const paddingX = typeof padding === "number" ? padding : padding.x ?? 8;
|
|
1352
|
-
const paddingY = typeof padding === "number" ? padding : padding.y ?? 4;
|
|
1353
|
-
const textWidth = text.width;
|
|
1354
|
-
const textHeight = text.height;
|
|
1355
|
-
const bgWidth = textWidth + paddingX * 2;
|
|
1356
|
-
const bgHeight = textHeight + paddingY * 2;
|
|
1357
|
-
const cornerRadius = tooltipTheme.cornerRadius ?? 6;
|
|
1358
|
-
const graphics = scene.add.graphics();
|
|
1359
|
-
const bg = bgColor ?? "#000000dd";
|
|
1360
|
-
let fillColor = 0;
|
|
1361
|
-
let fillAlpha = 0.87;
|
|
1362
|
-
if (typeof bg === "string") {
|
|
1363
|
-
if (bg.startsWith("#")) {
|
|
1364
|
-
const hex = bg.slice(1);
|
|
1365
|
-
if (hex.length === 8) {
|
|
1366
|
-
fillColor = parseInt(hex.slice(0, 6), 16);
|
|
1367
|
-
fillAlpha = parseInt(hex.slice(6, 8), 16) / 255;
|
|
1368
|
-
} else if (hex.length === 6) {
|
|
1369
|
-
fillColor = parseInt(hex, 16);
|
|
1370
|
-
fillAlpha = 1;
|
|
1371
|
-
}
|
|
1372
|
-
}
|
|
1373
|
-
}
|
|
1374
|
-
graphics.fillStyle(fillColor, fillAlpha);
|
|
1375
|
-
graphics.fillRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, cornerRadius);
|
|
1376
|
-
const tooltipContainer = scene.add.container(0, 0, [graphics, text]);
|
|
1377
|
-
tooltipContainer.setDepth(1e4);
|
|
1378
|
-
const textBounds = tooltipContainer.getBounds();
|
|
1379
|
-
const pos = calculateTooltipPosition(
|
|
1380
|
-
targetBounds,
|
|
1381
|
-
position,
|
|
1382
|
-
offset,
|
|
1383
|
-
textBounds.width,
|
|
1384
|
-
textBounds.height
|
|
1385
|
-
);
|
|
1386
|
-
const themeAnim = tooltipTheme.animation || {};
|
|
1387
|
-
const anim = config.animation || {};
|
|
1388
|
-
const fadeInDuration = anim.fadeIn ?? themeAnim.fadeIn ?? 200;
|
|
1389
|
-
const moveOffset = {
|
|
1390
|
-
dx: anim.move?.dx ?? themeAnim.move?.dx ?? 0,
|
|
1391
|
-
dy: anim.move?.dy ?? themeAnim.move?.dy ?? 0
|
|
1392
|
-
};
|
|
1393
|
-
const pulse = anim.pulse ?? themeAnim.pulse ?? false;
|
|
1394
|
-
const pulseScale = anim.pulseScale ?? [0.75, 1.25];
|
|
1395
|
-
tooltipContainer.setPosition(
|
|
1396
|
-
pos.x + textBounds.width / 2 - moveOffset.dx,
|
|
1397
|
-
pos.y + textBounds.height / 2 - moveOffset.dy
|
|
1398
|
-
);
|
|
1399
|
-
tooltipContainer.setAlpha(0);
|
|
1400
|
-
state.tooltip = tooltipContainer;
|
|
1401
|
-
const fadeTween = scene.tweens.add({
|
|
1402
|
-
targets: tooltipContainer,
|
|
1403
|
-
alpha: 1,
|
|
1404
|
-
x: pos.x + textBounds.width / 2,
|
|
1405
|
-
y: pos.y + textBounds.height / 2,
|
|
1406
|
-
duration: fadeInDuration,
|
|
1407
|
-
ease: "Cubic.Out"
|
|
1408
|
-
});
|
|
1409
|
-
state.activeTweens.push(fadeTween);
|
|
1410
|
-
if (pulse) {
|
|
1411
|
-
const pulseTween = scene.tweens.add({
|
|
1412
|
-
targets: tooltipContainer,
|
|
1413
|
-
scale: { from: pulseScale[0], to: pulseScale[1] },
|
|
1414
|
-
duration: 600,
|
|
1415
|
-
yoyo: true,
|
|
1416
|
-
repeat: -1,
|
|
1417
|
-
ease: "Sine.InOut"
|
|
1418
|
-
});
|
|
1419
|
-
state.activeTweens.push(pulseTween);
|
|
1420
|
-
}
|
|
1421
|
-
if (config.autoDismiss && config.autoDismiss > 0) {
|
|
1422
|
-
state.autoDismissTimer = setTimeout(() => {
|
|
1423
|
-
hideTooltip(container);
|
|
1424
|
-
}, config.autoDismiss);
|
|
1425
|
-
}
|
|
1426
|
-
}
|
|
1427
|
-
function hideTooltip(container) {
|
|
1428
|
-
const state = tooltipStates.get(container);
|
|
1429
|
-
if (!state || !state.isVisible) return;
|
|
1430
|
-
state.isVisible = false;
|
|
1431
|
-
const config = state.currentConfig;
|
|
1432
|
-
state.currentConfig = null;
|
|
1433
|
-
if (state.autoDismissTimer) {
|
|
1434
|
-
clearTimeout(state.autoDismissTimer);
|
|
1435
|
-
state.autoDismissTimer = null;
|
|
1436
|
-
}
|
|
1437
|
-
if (!state.tooltip) return;
|
|
1438
|
-
const tooltip = state.tooltip;
|
|
1439
|
-
const scene = tooltip.scene;
|
|
1440
|
-
const theme = TransformOriginView.themeRegistry.getGlobalTheme();
|
|
1441
|
-
const tooltipTheme = theme.Tooltip || {};
|
|
1442
|
-
const themeAnim = tooltipTheme.animation || {};
|
|
1443
|
-
const anim = config?.animation || {};
|
|
1444
|
-
const fadeOutDuration = anim.fadeOut ?? themeAnim.fadeOut ?? 200;
|
|
1445
|
-
state.activeTweens.forEach((tween) => tween.stop());
|
|
1446
|
-
state.activeTweens = [];
|
|
1447
|
-
scene.tweens.add({
|
|
1448
|
-
targets: tooltip,
|
|
1449
|
-
alpha: 0,
|
|
1450
|
-
duration: fadeOutDuration,
|
|
1451
|
-
ease: "Cubic.In",
|
|
1452
|
-
onComplete: () => {
|
|
1453
|
-
tooltip.destroy();
|
|
1454
|
-
}
|
|
1455
|
-
});
|
|
1456
|
-
state.tooltip = null;
|
|
1457
|
-
}
|
|
1458
|
-
function applyTooltip(scene, container, nextCallback, existingOnHoverStart, existingOnHoverEnd) {
|
|
1459
|
-
if (!tooltipStates.has(container)) {
|
|
1460
|
-
tooltipStates.set(container, {
|
|
1461
|
-
isVisible: false,
|
|
1462
|
-
tooltip: null,
|
|
1463
|
-
activeTweens: [],
|
|
1464
|
-
showTimer: null,
|
|
1465
|
-
hideTimer: null,
|
|
1466
|
-
autoDismissTimer: null,
|
|
1467
|
-
currentConfig: null
|
|
1468
|
-
});
|
|
1469
|
-
container.once("destroy", () => {
|
|
1470
|
-
const state2 = tooltipStates.get(container);
|
|
1471
|
-
if (state2) {
|
|
1472
|
-
if (state2.showTimer) clearTimeout(state2.showTimer);
|
|
1473
|
-
if (state2.hideTimer) clearTimeout(state2.hideTimer);
|
|
1474
|
-
if (state2.autoDismissTimer) clearTimeout(state2.autoDismissTimer);
|
|
1475
|
-
state2.activeTweens.forEach((tween) => tween.stop());
|
|
1476
|
-
hideTooltip(container);
|
|
1477
|
-
tooltipStates.delete(container);
|
|
1478
|
-
}
|
|
1479
|
-
});
|
|
1480
|
-
}
|
|
1481
|
-
const state = tooltipStates.get(container);
|
|
1482
|
-
if (!state) {
|
|
1483
|
-
throw new Error("applyTooltip: state not initialized");
|
|
1484
|
-
}
|
|
1485
|
-
const theme = TransformOriginView.themeRegistry.getGlobalTheme();
|
|
1486
|
-
const tooltipTheme = theme.Tooltip || {};
|
|
1487
|
-
const onHoverStart = (data) => {
|
|
1488
|
-
if (existingOnHoverStart) existingOnHoverStart(data);
|
|
1489
|
-
if (!nextCallback) return;
|
|
1490
|
-
const result = nextCallback();
|
|
1491
|
-
if (!result) return;
|
|
1492
|
-
const config = typeof result === "string" ? { content: result } : result;
|
|
1493
|
-
if (config.disabled) return;
|
|
1494
|
-
if (state.hideTimer) {
|
|
1495
|
-
clearTimeout(state.hideTimer);
|
|
1496
|
-
state.hideTimer = null;
|
|
1497
|
-
}
|
|
1498
|
-
if (state.autoDismissTimer) {
|
|
1499
|
-
clearTimeout(state.autoDismissTimer);
|
|
1500
|
-
state.autoDismissTimer = null;
|
|
1501
|
-
}
|
|
1502
|
-
const showDelay = config.showDelay ?? tooltipTheme.showDelay ?? 500;
|
|
1503
|
-
state.showTimer = setTimeout(() => {
|
|
1504
|
-
showTooltip(scene, container, config);
|
|
1505
|
-
}, showDelay);
|
|
1506
|
-
};
|
|
1507
|
-
const onHoverEnd = (data) => {
|
|
1508
|
-
if (existingOnHoverEnd) existingOnHoverEnd(data);
|
|
1509
|
-
if (state.showTimer) {
|
|
1510
|
-
clearTimeout(state.showTimer);
|
|
1511
|
-
state.showTimer = null;
|
|
1512
|
-
}
|
|
1513
|
-
const hideDelay = state.currentConfig?.hideDelay ?? tooltipTheme.hideDelay ?? 0;
|
|
1514
|
-
if (hideDelay > 0) {
|
|
1515
|
-
state.hideTimer = setTimeout(() => {
|
|
1516
|
-
hideTooltip(container);
|
|
1517
|
-
}, hideDelay);
|
|
1518
|
-
} else {
|
|
1519
|
-
hideTooltip(container);
|
|
1520
|
-
}
|
|
1521
|
-
};
|
|
1522
|
-
return { onHoverStart, onHoverEnd };
|
|
1523
|
-
}
|
|
1524
|
-
function createBackground(scene, container, props) {
|
|
1525
|
-
const hasBackground = props.backgroundColor !== void 0;
|
|
1526
|
-
const hasBorder = props.borderColor !== void 0;
|
|
1527
|
-
if (hasBackground || hasBorder) {
|
|
1528
|
-
const width = typeof props.width === "number" ? props.width : 100;
|
|
1529
|
-
const height = typeof props.height === "number" ? props.height : 100;
|
|
1530
|
-
const bgColor = props.backgroundColor;
|
|
1531
|
-
const bgAlpha = props.backgroundAlpha ?? 1;
|
|
1532
|
-
const cornerRadius = props.cornerRadius ?? 0;
|
|
1533
|
-
const borderColor = props.borderColor;
|
|
1534
|
-
const borderWidth = props.borderWidth ?? 0;
|
|
1535
|
-
const borderAlpha = props.borderAlpha ?? 1;
|
|
1536
|
-
const background = scene.add.graphics();
|
|
1537
|
-
if (bgColor !== void 0) {
|
|
1538
|
-
background.fillStyle(bgColor, bgAlpha);
|
|
1539
|
-
}
|
|
1540
|
-
if (borderWidth > 0 && borderColor !== void 0) {
|
|
1541
|
-
background.lineStyle(borderWidth, borderColor, borderAlpha);
|
|
1542
|
-
}
|
|
1543
|
-
if (cornerRadius !== 0) {
|
|
1544
|
-
if (bgColor !== void 0) {
|
|
1545
|
-
background.fillRoundedRect(0, 0, width, height, cornerRadius);
|
|
1546
|
-
}
|
|
1547
|
-
if (borderWidth > 0 && borderColor !== void 0) {
|
|
1548
|
-
background.strokeRoundedRect(0, 0, width, height, cornerRadius);
|
|
1549
|
-
}
|
|
1550
|
-
} else {
|
|
1551
|
-
if (bgColor !== void 0) {
|
|
1552
|
-
background.fillRect(0, 0, width, height);
|
|
1553
|
-
}
|
|
1554
|
-
if (borderWidth > 0 && borderColor !== void 0) {
|
|
1555
|
-
background.strokeRect(0, 0, width, height);
|
|
1556
|
-
}
|
|
1557
|
-
}
|
|
1558
|
-
container.addAt(background, 0);
|
|
1559
|
-
container.__background = background;
|
|
1560
|
-
background.__isBackground = true;
|
|
1561
|
-
}
|
|
1562
|
-
}
|
|
1563
|
-
function createGestures(scene, container, props) {
|
|
1564
|
-
const hasAnyGesture = !!(props.onTouch || props.onTouchOutside || props.onTouchMove || props.onDoubleTap || props.onLongPress || props.onHoverStart || props.onHoverEnd || props.onWheel);
|
|
1565
|
-
const shouldEnable = hasAnyGesture && props.enableGestures !== false;
|
|
1566
|
-
if (!shouldEnable) {
|
|
1567
|
-
return;
|
|
1568
|
-
}
|
|
1569
|
-
const manager = TransformOriginView.getGestureManager(scene);
|
|
1570
|
-
const containerWithLayout = container;
|
|
1571
|
-
let width = 100;
|
|
1572
|
-
let height = 100;
|
|
1573
|
-
if (containerWithLayout.__getLayoutSize) {
|
|
1574
|
-
const size = containerWithLayout.__getLayoutSize();
|
|
1575
|
-
width = size.width;
|
|
1576
|
-
height = size.height;
|
|
1577
|
-
} else {
|
|
1578
|
-
const bounds = container.getBounds();
|
|
1579
|
-
width = bounds.width || 100;
|
|
1580
|
-
height = bounds.height || 100;
|
|
1581
|
-
}
|
|
1582
|
-
const hitArea = new Phaser__namespace.Geom.Rectangle(0, 0, width, height);
|
|
1583
|
-
const callbacks = {};
|
|
1584
|
-
if (props.onTouch) callbacks.onTouch = props.onTouch;
|
|
1585
|
-
if (props.onTouchOutside) callbacks.onTouchOutside = props.onTouchOutside;
|
|
1586
|
-
if (props.onTouchMove) callbacks.onTouchMove = props.onTouchMove;
|
|
1587
|
-
if (props.onDoubleTap) callbacks.onDoubleTap = props.onDoubleTap;
|
|
1588
|
-
if (props.onLongPress) callbacks.onLongPress = props.onLongPress;
|
|
1589
|
-
if (props.onHoverStart) callbacks.onHoverStart = props.onHoverStart;
|
|
1590
|
-
if (props.onHoverEnd) callbacks.onHoverEnd = props.onHoverEnd;
|
|
1591
|
-
if (props.onWheel) callbacks.onWheel = props.onWheel;
|
|
1592
|
-
const config = {};
|
|
1593
|
-
if (props.longPressDuration !== void 0) config.longPressDuration = props.longPressDuration;
|
|
1594
|
-
if (props.doubleTapDelay !== void 0) config.doubleTapDelay = props.doubleTapDelay;
|
|
1595
|
-
if (props.maxTouchDuration !== void 0) config.maxTouchDuration = props.maxTouchDuration;
|
|
1596
|
-
manager.registerContainer(container, callbacks, hitArea, config);
|
|
1597
|
-
}
|
|
1598
|
-
function createLayout(container, props) {
|
|
1599
|
-
container.__layoutProps = props;
|
|
1600
|
-
container.__getLayoutSize = () => {
|
|
1601
|
-
const children = container.list;
|
|
1602
|
-
const direction = props.direction ?? "column";
|
|
1603
|
-
const paddingRaw = props.padding ?? {};
|
|
1604
|
-
const padding = typeof paddingRaw === "number" ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw } : paddingRaw;
|
|
1605
|
-
const paddingLeft = padding.left ?? 0;
|
|
1606
|
-
const paddingTop = padding.top ?? 0;
|
|
1607
|
-
const paddingRight = padding.right ?? 0;
|
|
1608
|
-
const paddingBottom = padding.bottom ?? 0;
|
|
1609
|
-
const gapNormalized = TransformOriginView.normalizeGap(props.gap);
|
|
1610
|
-
let maxWidth = 0;
|
|
1611
|
-
let maxHeight = 0;
|
|
1612
|
-
let totalMainSize = 0;
|
|
1613
|
-
let childCount = 0;
|
|
1614
|
-
for (const child of children) {
|
|
1615
|
-
if (child.__isBackground) {
|
|
1616
|
-
continue;
|
|
1617
|
-
}
|
|
1618
|
-
childCount++;
|
|
1619
|
-
const marginRaw = child.__layoutProps?.margin ?? {};
|
|
1620
|
-
const margin = typeof marginRaw === "number" ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw } : marginRaw;
|
|
1621
|
-
const marginTop = margin.top ?? 0;
|
|
1622
|
-
const marginBottom = margin.bottom ?? 0;
|
|
1623
|
-
const marginLeft = margin.left ?? 0;
|
|
1624
|
-
const marginRight = margin.right ?? 0;
|
|
1625
|
-
const childSize = TransformOriginView.getChildSize(child);
|
|
1626
|
-
if (direction === "row") {
|
|
1627
|
-
totalMainSize += marginLeft + childSize.width + marginRight;
|
|
1628
|
-
const childTotalHeight = marginTop + childSize.height + marginBottom;
|
|
1629
|
-
maxHeight = Math.max(maxHeight, childTotalHeight);
|
|
1630
|
-
} else {
|
|
1631
|
-
const childTotalWidth = marginLeft + childSize.width + marginRight;
|
|
1632
|
-
maxWidth = Math.max(maxWidth, childTotalWidth);
|
|
1633
|
-
totalMainSize += marginTop + childSize.height + marginBottom;
|
|
1634
|
-
}
|
|
1635
|
-
}
|
|
1636
|
-
if (childCount > 1) {
|
|
1637
|
-
const gapValue = direction === "row" ? gapNormalized.horizontal : gapNormalized.vertical;
|
|
1638
|
-
totalMainSize += gapValue * (childCount - 1);
|
|
1639
|
-
}
|
|
1640
|
-
const defaultWidth = direction === "row" ? totalMainSize + paddingLeft + paddingRight : maxWidth + paddingLeft + paddingRight;
|
|
1641
|
-
const defaultHeight = direction === "row" ? maxHeight + paddingTop + paddingBottom : totalMainSize + paddingTop + paddingBottom;
|
|
1642
|
-
const parsedWidth = TransformOriginView.parseSize(props.width);
|
|
1643
|
-
const finalWidth = TransformOriginView.resolveSize(parsedWidth, void 0, defaultWidth);
|
|
1644
|
-
const parsedHeight = TransformOriginView.parseSize(props.height);
|
|
1645
|
-
const finalHeight = TransformOriginView.resolveSize(parsedHeight, void 0, defaultHeight);
|
|
1646
|
-
return {
|
|
1647
|
-
width: finalWidth,
|
|
1648
|
-
height: finalHeight
|
|
1649
|
-
};
|
|
1650
|
-
};
|
|
1651
|
-
}
|
|
1652
|
-
function normalizeBackgroundProps(props) {
|
|
1653
|
-
const bgProps = props;
|
|
1654
|
-
const hasBackground = bgProps.backgroundColor !== void 0;
|
|
1655
|
-
const hasBorder = bgProps.borderColor !== void 0;
|
|
1656
|
-
if (!hasBackground && !hasBorder) {
|
|
1657
|
-
return props;
|
|
1658
|
-
}
|
|
1659
|
-
const normalized = { ...props };
|
|
1660
|
-
if (hasBackground && bgProps.backgroundAlpha === void 0) {
|
|
1661
|
-
normalized.backgroundAlpha = 1;
|
|
1662
|
-
}
|
|
1663
|
-
if (hasBorder) {
|
|
1664
|
-
if (bgProps.borderWidth === void 0 || bgProps.borderWidth === 0) {
|
|
1665
|
-
normalized.borderWidth = 1;
|
|
1666
|
-
}
|
|
1667
|
-
if (bgProps.borderAlpha === void 0 || bgProps.borderAlpha === 0) {
|
|
1668
|
-
normalized.borderAlpha = 1;
|
|
1669
|
-
}
|
|
1670
|
-
}
|
|
1671
|
-
return normalized;
|
|
1672
|
-
}
|
|
1673
|
-
const viewCreator = (scene, props) => {
|
|
1674
|
-
if (props.backgroundColor !== void 0 || props.cornerRadius !== void 0) {
|
|
1675
|
-
TransformOriginView.DebugLogger.log("theme", "View Creator - Props received:", {
|
|
1676
|
-
backgroundColor: props.backgroundColor,
|
|
1677
|
-
cornerRadius: props.cornerRadius,
|
|
1678
|
-
width: props.width,
|
|
1679
|
-
height: props.height
|
|
1680
|
-
});
|
|
1681
|
-
}
|
|
1682
|
-
const normalizedProps = normalizeBackgroundProps(props);
|
|
1683
|
-
const container = scene.add.container(normalizedProps.x ?? 0, normalizedProps.y ?? 0);
|
|
1684
|
-
createTransform(container, normalizedProps);
|
|
1685
|
-
createPhaser(container, normalizedProps);
|
|
1686
|
-
createBackground(
|
|
1687
|
-
scene,
|
|
1688
|
-
container,
|
|
1689
|
-
normalizedProps
|
|
1690
|
-
);
|
|
1691
|
-
createLayout(container, normalizedProps);
|
|
1692
|
-
if (normalizedProps.onTooltip) {
|
|
1693
|
-
const handlers = applyTooltip(
|
|
1694
|
-
scene,
|
|
1695
|
-
container,
|
|
1696
|
-
normalizedProps.onTooltip,
|
|
1697
|
-
normalizedProps.onHoverStart,
|
|
1698
|
-
normalizedProps.onHoverEnd
|
|
1699
|
-
);
|
|
1700
|
-
normalizedProps.onHoverStart = handlers.onHoverStart;
|
|
1701
|
-
normalizedProps.onHoverEnd = handlers.onHoverEnd;
|
|
1702
|
-
}
|
|
1703
|
-
createGestures(scene, container, normalizedProps);
|
|
1704
|
-
TransformOriginView.DebugLogger.log(
|
|
1705
|
-
"layout",
|
|
1706
|
-
"View creator storing __layoutProps with padding:",
|
|
1707
|
-
normalizedProps.padding
|
|
1708
|
-
);
|
|
1709
|
-
return container;
|
|
1710
|
-
};
|
|
1711
|
-
const viewPatcher = (node, prev, next) => {
|
|
1712
|
-
const normalizedPrev = normalizeBackgroundProps(prev);
|
|
1713
|
-
const normalizedNext = normalizeBackgroundProps(next);
|
|
1714
|
-
applyTransformProps(node, normalizedPrev, normalizedNext);
|
|
1715
|
-
applyPhaserProps(node, normalizedPrev, normalizedNext);
|
|
1716
|
-
const container = node;
|
|
1717
|
-
applyBackgroundProps(container, normalizedPrev, normalizedNext);
|
|
1718
|
-
if (container.scene && container.scene.data) {
|
|
1719
|
-
if (normalizedNext.onTooltip) {
|
|
1720
|
-
const handlers = applyTooltip(
|
|
1721
|
-
container.scene,
|
|
1722
|
-
container,
|
|
1723
|
-
normalizedNext.onTooltip,
|
|
1724
|
-
normalizedNext.onHoverStart,
|
|
1725
|
-
normalizedNext.onHoverEnd
|
|
1726
|
-
);
|
|
1727
|
-
normalizedNext.onHoverStart = handlers.onHoverStart;
|
|
1728
|
-
normalizedNext.onHoverEnd = handlers.onHoverEnd;
|
|
1729
|
-
}
|
|
1730
|
-
}
|
|
1731
|
-
if (container.scene && container.scene.data) {
|
|
1732
|
-
applyGesturesProps(container.scene, container, normalizedPrev, normalizedNext);
|
|
1733
|
-
}
|
|
1734
|
-
applyLayoutProps(container, normalizedPrev, normalizedNext);
|
|
1735
|
-
};
|
|
1736
|
-
function Sprite(props) {
|
|
1737
|
-
const localTheme = TransformOriginView.useTheme();
|
|
1738
|
-
const { props: themed, nestedTheme } = TransformOriginView.getThemedProps("Sprite", localTheme, props);
|
|
1739
|
-
return /* @__PURE__ */ jsxRuntime.jsx("sprite", { ...themed, theme: nestedTheme });
|
|
1740
|
-
}
|
|
1741
|
-
function TileSprite(props) {
|
|
1742
|
-
const localTheme = TransformOriginView.useTheme();
|
|
1743
|
-
const { props: themed, nestedTheme } = TransformOriginView.getThemedProps("TileSprite", localTheme, props);
|
|
1744
|
-
return /* @__PURE__ */ jsxRuntime.jsx("tilesprite", { ...themed, theme: nestedTheme });
|
|
1745
|
-
}
|
|
1746
|
-
function registerBuiltins() {
|
|
1747
|
-
TransformOriginView.register("view", { create: viewCreator, patch: viewPatcher });
|
|
1748
|
-
TransformOriginView.register("text", { create: textCreator, patch: textPatcher });
|
|
1749
|
-
TransformOriginView.register("nineslice", { create: nineSliceCreator, patch: nineSlicePatcher });
|
|
1750
|
-
TransformOriginView.register("particles", { create: particlesCreator, patch: particlesPatcher });
|
|
1751
|
-
TransformOriginView.register("sprite", { create: spriteCreator, patch: spritePatcher });
|
|
1752
|
-
TransformOriginView.register("image", { create: imageCreator, patch: imagePatcher });
|
|
1753
|
-
TransformOriginView.register("graphics", { create: graphicsCreator, patch: graphicsPatcher });
|
|
1754
|
-
TransformOriginView.register("tilesprite", { create: tileSpriteCreator, patch: tileSpritePatcher });
|
|
1755
|
-
TransformOriginView.register("View", { create: viewCreator, patch: viewPatcher });
|
|
1756
|
-
TransformOriginView.register("Text", { create: textCreator, patch: textPatcher });
|
|
1757
|
-
TransformOriginView.register("NineSlice", { create: nineSliceCreator, patch: nineSlicePatcher });
|
|
1758
|
-
TransformOriginView.register("Particles", { create: particlesCreator, patch: particlesPatcher });
|
|
1759
|
-
TransformOriginView.register("Sprite", { create: spriteCreator, patch: spritePatcher });
|
|
1760
|
-
TransformOriginView.register("Image", { create: imageCreator, patch: imagePatcher });
|
|
1761
|
-
TransformOriginView.register("Graphics", { create: graphicsCreator, patch: graphicsPatcher });
|
|
1762
|
-
TransformOriginView.register("TileSprite", { create: tileSpriteCreator, patch: tileSpritePatcher });
|
|
1763
|
-
}
|
|
1764
|
-
const createCameraShakeFX = (camera, config) => {
|
|
1765
|
-
const duration = config.duration ?? 250;
|
|
1766
|
-
const intensity = typeof config.intensity === "object" ? new Phaser__namespace.Math.Vector2(config.intensity.x, config.intensity.y) : config.intensity ?? 0.01;
|
|
1767
|
-
camera.shake(duration, intensity, config.force ?? false, config.onComplete);
|
|
1768
|
-
};
|
|
1769
|
-
const createCameraFlashFX = (camera, config) => {
|
|
1770
|
-
const duration = config.duration ?? 200;
|
|
1771
|
-
const red = config.red ?? 255;
|
|
1772
|
-
const green = config.green ?? 255;
|
|
1773
|
-
const blue = config.blue ?? 255;
|
|
1774
|
-
camera.flash(duration, red, green, blue, config.force ?? false, config.onComplete);
|
|
1775
|
-
};
|
|
1776
|
-
const createCameraFadeInFX = (camera, config) => {
|
|
1777
|
-
const duration = config.duration ?? 300;
|
|
1778
|
-
const red = config.red ?? 0;
|
|
1779
|
-
const green = config.green ?? 0;
|
|
1780
|
-
const blue = config.blue ?? 0;
|
|
1781
|
-
camera.fadeIn(duration, red, green, blue, config.onComplete);
|
|
1782
|
-
};
|
|
1783
|
-
const createCameraFadeOutFX = (camera, config) => {
|
|
1784
|
-
const duration = config.duration ?? 300;
|
|
1785
|
-
const red = config.red ?? 0;
|
|
1786
|
-
const green = config.green ?? 0;
|
|
1787
|
-
const blue = config.blue ?? 0;
|
|
1788
|
-
camera.fadeOut(duration, red, green, blue, config.onComplete);
|
|
1789
|
-
};
|
|
1790
|
-
const createCameraZoomFX = (camera, config) => {
|
|
1791
|
-
const duration = config.duration ?? 250;
|
|
1792
|
-
const targetZoom = config.zoom ?? camera.zoom * 1.1;
|
|
1793
|
-
camera.zoomTo(targetZoom, duration, config.ease, config.force ?? false, config.onComplete);
|
|
39
|
+
var createCameraZoomFX = (camera, config) => {
|
|
40
|
+
const duration = config.duration ?? 250;
|
|
41
|
+
const targetZoom = config.zoom ?? camera.zoom * 1.1;
|
|
42
|
+
camera.zoomTo(targetZoom, duration, config.ease, config.force ?? false, config.onComplete);
|
|
1794
43
|
};
|
|
1795
44
|
function useCameraFX(cameraRef, options = {}) {
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
}
|
|
1831
|
-
}, [getCamera, options.resetZoomOnClear]);
|
|
1832
|
-
TransformOriginView.useEffect(() => {
|
|
1833
|
-
return () => clearCameraFX();
|
|
1834
|
-
}, [clearCameraFX]);
|
|
1835
|
-
return { applyCameraFX, clearCameraFX };
|
|
45
|
+
const scene = require_custom.useScene();
|
|
46
|
+
const activeFxRef = require_custom.useRef(/* @__PURE__ */ new Set());
|
|
47
|
+
const baseZoomRef = require_custom.useRef(null);
|
|
48
|
+
const getCamera = require_custom.useCallback(() => {
|
|
49
|
+
return cameraRef?.current ?? scene.cameras.main;
|
|
50
|
+
}, [cameraRef, scene]);
|
|
51
|
+
const applyCameraFX = require_custom.useCallback((fx, config) => {
|
|
52
|
+
const camera = getCamera();
|
|
53
|
+
if (!camera) {
|
|
54
|
+
console.warn("[useCameraFX] No camera available");
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (baseZoomRef.current === null) baseZoomRef.current = camera.zoom;
|
|
58
|
+
const cleanup = fx(camera, config);
|
|
59
|
+
if (typeof cleanup === "function") activeFxRef.current.add(cleanup);
|
|
60
|
+
}, [getCamera]);
|
|
61
|
+
const clearCameraFX = require_custom.useCallback(() => {
|
|
62
|
+
const camera = getCamera();
|
|
63
|
+
activeFxRef.current.forEach((cleanup) => cleanup());
|
|
64
|
+
activeFxRef.current.clear();
|
|
65
|
+
if (!camera) return;
|
|
66
|
+
const cameraWithStops = camera;
|
|
67
|
+
if (typeof cameraWithStops.stopShake === "function") cameraWithStops.stopShake();
|
|
68
|
+
if (typeof cameraWithStops.stopFlash === "function") cameraWithStops.stopFlash();
|
|
69
|
+
if (typeof cameraWithStops.stopFade === "function") cameraWithStops.stopFade();
|
|
70
|
+
if (options.resetZoomOnClear !== false && baseZoomRef.current !== null) camera.setZoom(baseZoomRef.current);
|
|
71
|
+
}, [getCamera, options.resetZoomOnClear]);
|
|
72
|
+
require_custom.useEffect(() => {
|
|
73
|
+
return () => clearCameraFX();
|
|
74
|
+
}, [clearCameraFX]);
|
|
75
|
+
return {
|
|
76
|
+
applyCameraFX,
|
|
77
|
+
clearCameraFX
|
|
78
|
+
};
|
|
1836
79
|
}
|
|
1837
80
|
function useScreenShake(config = {}, cameraRef) {
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
81
|
+
const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
|
|
82
|
+
require_custom.useEffect(() => {
|
|
83
|
+
applyCameraFX(createCameraShakeFX, config);
|
|
84
|
+
return () => clearCameraFX();
|
|
85
|
+
}, [
|
|
86
|
+
applyCameraFX,
|
|
87
|
+
clearCameraFX,
|
|
88
|
+
config
|
|
89
|
+
]);
|
|
90
|
+
return { clearCameraFX };
|
|
1844
91
|
}
|
|
1845
92
|
function useCameraFlash(config = {}, cameraRef) {
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
93
|
+
const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
|
|
94
|
+
require_custom.useEffect(() => {
|
|
95
|
+
applyCameraFX(createCameraFlashFX, config);
|
|
96
|
+
return () => clearCameraFX();
|
|
97
|
+
}, [
|
|
98
|
+
applyCameraFX,
|
|
99
|
+
clearCameraFX,
|
|
100
|
+
config
|
|
101
|
+
]);
|
|
102
|
+
return { clearCameraFX };
|
|
1852
103
|
}
|
|
1853
104
|
function useCameraFade(config = {}, cameraRef) {
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
105
|
+
const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
|
|
106
|
+
require_custom.useEffect(() => {
|
|
107
|
+
applyCameraFX(config.direction === "in" ? createCameraFadeInFX : createCameraFadeOutFX, config);
|
|
108
|
+
return () => clearCameraFX();
|
|
109
|
+
}, [
|
|
110
|
+
applyCameraFX,
|
|
111
|
+
clearCameraFX,
|
|
112
|
+
config
|
|
113
|
+
]);
|
|
114
|
+
return { clearCameraFX };
|
|
1861
115
|
}
|
|
1862
116
|
function useCameraZoom(config = {}, cameraRef) {
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
117
|
+
const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
|
|
118
|
+
require_custom.useEffect(() => {
|
|
119
|
+
applyCameraFX(createCameraZoomFX, config);
|
|
120
|
+
return () => clearCameraFX();
|
|
121
|
+
}, [
|
|
122
|
+
applyCameraFX,
|
|
123
|
+
clearCameraFX,
|
|
124
|
+
config
|
|
125
|
+
]);
|
|
126
|
+
return { clearCameraFX };
|
|
127
|
+
}
|
|
128
|
+
//#endregion
|
|
129
|
+
//#region src/camera/camera-fx-registry.ts
|
|
130
|
+
/**
|
|
131
|
+
* Camera FX registry - string-based lookup with extension support
|
|
132
|
+
*/
|
|
133
|
+
/**
|
|
134
|
+
* Camera FX registry mapping names to FX creators
|
|
135
|
+
*/
|
|
136
|
+
var CAMERA_FX_REGISTRY = {
|
|
137
|
+
shake: createCameraShakeFX,
|
|
138
|
+
flash: createCameraFlashFX,
|
|
139
|
+
fadeIn: createCameraFadeInFX,
|
|
140
|
+
fadeOut: createCameraFadeOutFX,
|
|
141
|
+
zoom: createCameraZoomFX
|
|
1876
142
|
};
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
143
|
+
/**
|
|
144
|
+
* Default camera FX definition
|
|
145
|
+
*/
|
|
146
|
+
var DEFAULT_CAMERA_FX = {
|
|
147
|
+
fx: "shake",
|
|
148
|
+
fxConfig: {
|
|
149
|
+
duration: 200,
|
|
150
|
+
force: false
|
|
151
|
+
}
|
|
1880
152
|
};
|
|
153
|
+
/**
|
|
154
|
+
* Apply a camera FX by name
|
|
155
|
+
*/
|
|
1881
156
|
function applyCameraFXByName(applyCameraFX, fxName, fxConfig) {
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
}
|
|
157
|
+
const name = fxName ?? DEFAULT_CAMERA_FX.fx;
|
|
158
|
+
const config = fxConfig ?? DEFAULT_CAMERA_FX.fxConfig;
|
|
159
|
+
const fx = CAMERA_FX_REGISTRY[name];
|
|
160
|
+
if (fx) {
|
|
161
|
+
applyCameraFX(fx, config);
|
|
162
|
+
return true;
|
|
163
|
+
}
|
|
164
|
+
return false;
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Resolve camera FX definition with priority: props > default
|
|
168
|
+
*/
|
|
1891
169
|
function resolveCameraFX(props) {
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
}
|
|
170
|
+
return {
|
|
171
|
+
fx: props?.fx ?? DEFAULT_CAMERA_FX.fx,
|
|
172
|
+
fxConfig: props?.fxConfig ?? DEFAULT_CAMERA_FX.fxConfig
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
//#endregion
|
|
176
|
+
//#region src/fx/use-fx.ts
|
|
177
|
+
/**
|
|
178
|
+
* Hook for applying Phaser PostFX/PreFX pipeline effects
|
|
179
|
+
* Manages FX lifecycle with proper cleanup
|
|
180
|
+
*/
|
|
181
|
+
/**
|
|
182
|
+
* Hook for applying FX to GameObject
|
|
183
|
+
* @param ref - Ref to GameObject
|
|
184
|
+
* @returns Object with applyFX and clearFX methods
|
|
185
|
+
*
|
|
186
|
+
* @example
|
|
187
|
+
* ```tsx
|
|
188
|
+
* const ref = useRef(null)
|
|
189
|
+
* const { applyFX, clearFX } = useFX(ref)
|
|
190
|
+
*
|
|
191
|
+
* const handleClick = () => {
|
|
192
|
+
* applyFX(createShadowFX, { offsetX: 4, offsetY: 4, blur: 8 })
|
|
193
|
+
* }
|
|
194
|
+
*
|
|
195
|
+
* return <View ref={ref} onClick={handleClick}>Click me</View>
|
|
196
|
+
* ```
|
|
197
|
+
*/
|
|
1897
198
|
function useFX(ref) {
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
199
|
+
const activeEffectsRef = require_custom.useRef(/* @__PURE__ */ new Set());
|
|
200
|
+
require_custom.useEffect(() => {
|
|
201
|
+
const obj = ref.current;
|
|
202
|
+
if (obj && typeof obj.enableFilters === "function") obj.enableFilters();
|
|
203
|
+
}, []);
|
|
204
|
+
require_custom.useEffect(() => {
|
|
205
|
+
return () => {
|
|
206
|
+
activeEffectsRef.current.forEach((cleanup) => {
|
|
207
|
+
if (typeof cleanup === "function") cleanup();
|
|
208
|
+
else if (cleanup?.destroy) cleanup.destroy();
|
|
209
|
+
});
|
|
210
|
+
activeEffectsRef.current.clear();
|
|
211
|
+
};
|
|
212
|
+
}, []);
|
|
213
|
+
const applyFX = (fxCreator, config, type = "internal") => {
|
|
214
|
+
const obj = ref.current;
|
|
215
|
+
if (!obj) {
|
|
216
|
+
console.warn("[useFX] No object found in ref");
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
219
|
+
const cleanupOrController = fxCreator(obj, config, type);
|
|
220
|
+
if (cleanupOrController) activeEffectsRef.current.add(cleanupOrController);
|
|
221
|
+
};
|
|
222
|
+
const clearFX = () => {
|
|
223
|
+
activeEffectsRef.current.forEach((cleanup) => {
|
|
224
|
+
if (typeof cleanup === "function") cleanup();
|
|
225
|
+
else if (cleanup?.destroy) cleanup.destroy();
|
|
226
|
+
});
|
|
227
|
+
activeEffectsRef.current.clear();
|
|
228
|
+
const obj = ref.current;
|
|
229
|
+
if (obj?.filters) {
|
|
230
|
+
obj.filters.internal.clear();
|
|
231
|
+
obj.filters.external.clear();
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
return {
|
|
235
|
+
applyFX,
|
|
236
|
+
clearFX
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
//#endregion
|
|
240
|
+
//#region src/fx/fx-creators/blur.ts
|
|
241
|
+
/**
|
|
242
|
+
* Create blur FX
|
|
243
|
+
* @param obj - GameObject
|
|
244
|
+
* @param config - Blur configuration
|
|
245
|
+
* @param type - 'post' or 'pre' FX
|
|
246
|
+
* @returns Blur controller
|
|
247
|
+
*
|
|
248
|
+
* @example
|
|
249
|
+
* ```tsx
|
|
250
|
+
* applyFX(createBlurFX, {
|
|
251
|
+
* quality: 1,
|
|
252
|
+
* x: 4,
|
|
253
|
+
* y: 4,
|
|
254
|
+
* strength: 2
|
|
255
|
+
* })
|
|
256
|
+
* ```
|
|
257
|
+
*/
|
|
258
|
+
var createBlurFX = (obj, config, type = "internal") => {
|
|
259
|
+
const { quality = 0, x = 2, y = 2, strength = 1, color = 16777215, steps = 4 } = config;
|
|
260
|
+
obj.enableFilters();
|
|
261
|
+
const filters = obj.filters;
|
|
262
|
+
if (!filters) {
|
|
263
|
+
console.warn("[createBlurFX] Filters not available on this GameObject");
|
|
264
|
+
return null;
|
|
265
|
+
}
|
|
266
|
+
const pipeline = type === "internal" ? filters.internal : filters.external;
|
|
267
|
+
if (!pipeline) {
|
|
268
|
+
console.warn("[createBlurFX] FX pipeline not available on this GameObject");
|
|
269
|
+
return null;
|
|
270
|
+
}
|
|
271
|
+
return pipeline.addBlur(quality, x, y, strength, color, steps);
|
|
1950
272
|
};
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
273
|
+
//#endregion
|
|
274
|
+
//#region src/fx/fx-creators/color-matrix.ts
|
|
275
|
+
/**
|
|
276
|
+
* Create color matrix FX
|
|
277
|
+
* @param obj - GameObject
|
|
278
|
+
* @param config - Color matrix configuration
|
|
279
|
+
* @param type - 'post' or 'pre' FX
|
|
280
|
+
* @returns Color matrix controller
|
|
281
|
+
*
|
|
282
|
+
* @example
|
|
283
|
+
* ```tsx
|
|
284
|
+
* applyFX(createColorMatrixFX, {
|
|
285
|
+
* effect: 'grayscale',
|
|
286
|
+
* amount: 1
|
|
287
|
+
* })
|
|
288
|
+
* ```
|
|
289
|
+
*/
|
|
290
|
+
var createColorMatrixFX = (obj, config, type = "internal") => {
|
|
291
|
+
const { effect = "grayscale", amount = 1 } = config;
|
|
292
|
+
obj.enableFilters();
|
|
293
|
+
const filters = obj.filters;
|
|
294
|
+
if (!filters) {
|
|
295
|
+
console.warn("[createColorMatrixFX] Filters not available on this GameObject");
|
|
296
|
+
return null;
|
|
297
|
+
}
|
|
298
|
+
const pipeline = type === "internal" ? filters.internal : filters.external;
|
|
299
|
+
if (!pipeline) {
|
|
300
|
+
console.warn("[createColorMatrixFX] FX pipeline not available on this GameObject");
|
|
301
|
+
return null;
|
|
302
|
+
}
|
|
303
|
+
const colorMatrixFilter = pipeline.addColorMatrix();
|
|
304
|
+
const cm = colorMatrixFilter.colorMatrix;
|
|
305
|
+
switch (effect) {
|
|
306
|
+
case "grayscale":
|
|
307
|
+
cm.grayscale(amount);
|
|
308
|
+
break;
|
|
309
|
+
case "sepia":
|
|
310
|
+
cm.sepia();
|
|
311
|
+
break;
|
|
312
|
+
case "negative":
|
|
313
|
+
cm.negative();
|
|
314
|
+
break;
|
|
315
|
+
case "blackWhite":
|
|
316
|
+
cm.blackWhite();
|
|
317
|
+
break;
|
|
318
|
+
case "brown":
|
|
319
|
+
cm.brown();
|
|
320
|
+
break;
|
|
321
|
+
case "kodachrome":
|
|
322
|
+
cm.kodachrome();
|
|
323
|
+
break;
|
|
324
|
+
case "technicolor":
|
|
325
|
+
cm.technicolor();
|
|
326
|
+
break;
|
|
327
|
+
case "polaroid":
|
|
328
|
+
cm.polaroid();
|
|
329
|
+
break;
|
|
330
|
+
}
|
|
331
|
+
return colorMatrixFilter;
|
|
1986
332
|
};
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
333
|
+
//#endregion
|
|
334
|
+
//#region src/fx/fx-creators/glow.ts
|
|
335
|
+
/**
|
|
336
|
+
* Create glow FX
|
|
337
|
+
* @param obj - GameObject
|
|
338
|
+
* @param config - Glow configuration
|
|
339
|
+
* @param type - 'post' or 'pre' FX
|
|
340
|
+
* @returns Glow controller
|
|
341
|
+
*
|
|
342
|
+
* @example
|
|
343
|
+
* ```tsx
|
|
344
|
+
* applyFX(createGlowFX, {
|
|
345
|
+
* color: 0xff6600,
|
|
346
|
+
* outerStrength: 6,
|
|
347
|
+
* innerStrength: 2
|
|
348
|
+
* })
|
|
349
|
+
* ```
|
|
350
|
+
*/
|
|
351
|
+
var createGlowFX = (obj, config, type = "internal") => {
|
|
352
|
+
const { color = 16777215, outerStrength = 4, innerStrength = 0, knockout = false, quality = .1, distance = 10 } = config;
|
|
353
|
+
obj.enableFilters();
|
|
354
|
+
const filters = obj.filters;
|
|
355
|
+
if (!filters) {
|
|
356
|
+
console.warn("[createGlowFX] Filters not available on this GameObject");
|
|
357
|
+
return null;
|
|
358
|
+
}
|
|
359
|
+
const pipeline = type === "internal" ? filters.internal : filters.external;
|
|
360
|
+
if (!pipeline) {
|
|
361
|
+
console.warn("[createGlowFX] FX pipeline not available on this GameObject");
|
|
362
|
+
return null;
|
|
363
|
+
}
|
|
364
|
+
return pipeline.addGlow(color, outerStrength, innerStrength, 1, knockout, quality, distance);
|
|
2003
365
|
};
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
366
|
+
//#endregion
|
|
367
|
+
//#region src/fx/fx-creators/pixelate.ts
|
|
368
|
+
/**
|
|
369
|
+
* Create pixelate FX
|
|
370
|
+
* @param obj - GameObject
|
|
371
|
+
* @param config - Pixelate configuration
|
|
372
|
+
* @param type - 'post' or 'pre' FX
|
|
373
|
+
* @returns Pixelate controller
|
|
374
|
+
*
|
|
375
|
+
* @example
|
|
376
|
+
* ```tsx
|
|
377
|
+
* applyFX(createPixelateFX, {
|
|
378
|
+
* amount: 8
|
|
379
|
+
* })
|
|
380
|
+
* ```
|
|
381
|
+
*/
|
|
382
|
+
var createPixelateFX = (obj, config, type = "internal") => {
|
|
383
|
+
const { amount = 1 } = config;
|
|
384
|
+
obj.enableFilters();
|
|
385
|
+
const filters = obj.filters;
|
|
386
|
+
if (!filters) {
|
|
387
|
+
console.warn("[createPixelateFX] Filters not available on this GameObject");
|
|
388
|
+
return null;
|
|
389
|
+
}
|
|
390
|
+
const pipeline = type === "internal" ? filters.internal : filters.external;
|
|
391
|
+
if (!pipeline) {
|
|
392
|
+
console.warn("[createPixelateFX] FX pipeline not available on this GameObject");
|
|
393
|
+
return null;
|
|
394
|
+
}
|
|
395
|
+
return pipeline.addPixelate(amount);
|
|
2013
396
|
};
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
397
|
+
//#endregion
|
|
398
|
+
//#region src/fx/fx-creators/shadow.ts
|
|
399
|
+
/**
|
|
400
|
+
* Create shadow FX
|
|
401
|
+
* @param obj - GameObject
|
|
402
|
+
* @param config - Shadow configuration
|
|
403
|
+
* @param type - 'post' or 'pre' FX
|
|
404
|
+
* @returns Shadow controller
|
|
405
|
+
*
|
|
406
|
+
* @example
|
|
407
|
+
* ```tsx
|
|
408
|
+
* applyFX(createShadowFX, {
|
|
409
|
+
* x: 0,
|
|
410
|
+
* y: 0,
|
|
411
|
+
* decay: 0.1,
|
|
412
|
+
* power: 1,
|
|
413
|
+
* color: 0x000000,
|
|
414
|
+
* samples: 6,
|
|
415
|
+
* intensity: 1
|
|
416
|
+
* })
|
|
417
|
+
* ```
|
|
418
|
+
*/
|
|
419
|
+
var createShadowFX = (obj, config, type = "internal") => {
|
|
420
|
+
const { x = 0, y = 1, decay = .05, power = 1, color = 0, samples = 6, intensity = 1 } = config;
|
|
421
|
+
obj.enableFilters();
|
|
422
|
+
const filters = obj.filters;
|
|
423
|
+
if (!filters) {
|
|
424
|
+
console.warn("[createShadowFX] Filters not available on this GameObject");
|
|
425
|
+
return null;
|
|
426
|
+
}
|
|
427
|
+
const pipeline = type === "internal" ? filters.internal : filters.external;
|
|
428
|
+
if (!pipeline) {
|
|
429
|
+
console.warn("[createShadowFX] FX pipeline not available on this GameObject");
|
|
430
|
+
return null;
|
|
431
|
+
}
|
|
432
|
+
return pipeline.addShadow(x, y, decay, power, color, samples, intensity);
|
|
2031
433
|
};
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
434
|
+
//#endregion
|
|
435
|
+
//#region src/fx/fx-creators/vignette.ts
|
|
436
|
+
/**
|
|
437
|
+
* Create vignette FX
|
|
438
|
+
* @param obj - GameObject
|
|
439
|
+
* @param config - Vignette configuration
|
|
440
|
+
* @param type - 'post' or 'pre' FX
|
|
441
|
+
* @returns Vignette controller
|
|
442
|
+
*
|
|
443
|
+
* @example
|
|
444
|
+
* ```tsx
|
|
445
|
+
* applyFX(createVignetteFX, {
|
|
446
|
+
* x: 0.5,
|
|
447
|
+
* y: 0.5,
|
|
448
|
+
* radius: 0.5,
|
|
449
|
+
* strength: 0.7
|
|
450
|
+
* })
|
|
451
|
+
* ```
|
|
452
|
+
*/
|
|
453
|
+
var createVignetteFX = (obj, config, type = "internal") => {
|
|
454
|
+
const { strength = .5, radius = .5, x = .5, y = .5 } = config;
|
|
455
|
+
obj.enableFilters();
|
|
456
|
+
const filters = obj.filters;
|
|
457
|
+
if (!filters) {
|
|
458
|
+
console.warn("[createVignetteFX] Filters not available on this GameObject");
|
|
459
|
+
return null;
|
|
460
|
+
}
|
|
461
|
+
const pipeline = type === "internal" ? filters.internal : filters.external;
|
|
462
|
+
if (!pipeline) {
|
|
463
|
+
console.warn("[createVignetteFX] FX pipeline not available on this GameObject");
|
|
464
|
+
return null;
|
|
465
|
+
}
|
|
466
|
+
return pipeline.addVignette(x, y, radius, strength);
|
|
2041
467
|
};
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
468
|
+
//#endregion
|
|
469
|
+
//#region src/fx/fx-registry.ts
|
|
470
|
+
/**
|
|
471
|
+
* FX Registry - string-based FX lookup
|
|
472
|
+
* Similar to effect-registry.ts for animation effects
|
|
473
|
+
*/
|
|
474
|
+
/**
|
|
475
|
+
* FX Registry mapping names to creator functions
|
|
476
|
+
*/
|
|
477
|
+
var FX_REGISTRY = {
|
|
478
|
+
shadow: createShadowFX,
|
|
479
|
+
glow: createGlowFX,
|
|
480
|
+
blur: createBlurFX,
|
|
481
|
+
pixelate: createPixelateFX,
|
|
482
|
+
vignette: createVignetteFX,
|
|
483
|
+
grayscale: (obj, config, type) => createColorMatrixFX(obj, {
|
|
484
|
+
...config,
|
|
485
|
+
effect: "grayscale"
|
|
486
|
+
}, type),
|
|
487
|
+
sepia: (obj, config, type) => createColorMatrixFX(obj, {
|
|
488
|
+
...config,
|
|
489
|
+
effect: "sepia"
|
|
490
|
+
}, type),
|
|
491
|
+
negative: (obj, config, type) => createColorMatrixFX(obj, {
|
|
492
|
+
...config,
|
|
493
|
+
effect: "negative"
|
|
494
|
+
}, type),
|
|
495
|
+
blackWhite: (obj, config, type) => createColorMatrixFX(obj, {
|
|
496
|
+
...config,
|
|
497
|
+
effect: "blackWhite"
|
|
498
|
+
}, type),
|
|
499
|
+
brown: (obj, config, type) => createColorMatrixFX(obj, {
|
|
500
|
+
...config,
|
|
501
|
+
effect: "brown"
|
|
502
|
+
}, type),
|
|
503
|
+
kodachrome: (obj, config, type) => createColorMatrixFX(obj, {
|
|
504
|
+
...config,
|
|
505
|
+
effect: "kodachrome"
|
|
506
|
+
}, type),
|
|
507
|
+
technicolor: (obj, config, type) => createColorMatrixFX(obj, {
|
|
508
|
+
...config,
|
|
509
|
+
effect: "technicolor"
|
|
510
|
+
}, type),
|
|
511
|
+
polaroid: (obj, config, type) => createColorMatrixFX(obj, {
|
|
512
|
+
...config,
|
|
513
|
+
effect: "polaroid"
|
|
514
|
+
}, type)
|
|
2056
515
|
};
|
|
2057
|
-
|
|
516
|
+
/**
|
|
517
|
+
* Default FX (none)
|
|
518
|
+
*/
|
|
519
|
+
var DEFAULT_FX = "grayscale";
|
|
520
|
+
/**
|
|
521
|
+
* Resolve FX by name or function
|
|
522
|
+
* @param fxOrName - FX name string or creator function
|
|
523
|
+
* @returns FX creator function or null
|
|
524
|
+
*/
|
|
2058
525
|
function resolveFX(fxOrName) {
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
526
|
+
if (typeof fxOrName === "function") return fxOrName;
|
|
527
|
+
return FX_REGISTRY[fxOrName] ?? null;
|
|
528
|
+
}
|
|
529
|
+
/**
|
|
530
|
+
* Apply FX by name (helper function)
|
|
531
|
+
* @param applyFXFn - applyFX function from useFX hook
|
|
532
|
+
* @param fxName - FX name
|
|
533
|
+
* @param config - FX config
|
|
534
|
+
*
|
|
535
|
+
* @example
|
|
536
|
+
* ```tsx
|
|
537
|
+
* const { applyFX } = useFX(ref)
|
|
538
|
+
* applyFXByName(applyFX, 'shadow', { offsetX: 4, offsetY: 4, blur: 8 })
|
|
539
|
+
* ```
|
|
540
|
+
*/
|
|
2064
541
|
function applyFXByName(applyFXFn, fxName, config = {}) {
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
542
|
+
const creator = resolveFX(fxName);
|
|
543
|
+
if (creator) applyFXFn(creator, config);
|
|
544
|
+
else console.warn(`[applyFXByName] FX "${fxName}" not found in registry`);
|
|
545
|
+
}
|
|
546
|
+
//#endregion
|
|
547
|
+
//#region src/fx/convenience-hooks/use-blur.ts
|
|
548
|
+
/**
|
|
549
|
+
* Convenience hook for automatic blur FX
|
|
550
|
+
* Applies blur on mount and updates on config changes
|
|
551
|
+
*/
|
|
552
|
+
/**
|
|
553
|
+
* Hook for automatic blur FX
|
|
554
|
+
* @param ref - GameObject ref
|
|
555
|
+
* @param config - Blur config (updates reactively)
|
|
556
|
+
* @returns FX controls
|
|
557
|
+
*
|
|
558
|
+
* @example
|
|
559
|
+
* ```tsx
|
|
560
|
+
* const ref = useRef(null)
|
|
561
|
+
* useBlur(ref, { strength: 8, steps: 4 })
|
|
562
|
+
*
|
|
563
|
+
* return <View ref={ref}>Content</View>
|
|
564
|
+
* ```
|
|
565
|
+
*/
|
|
2072
566
|
function useBlur(ref, config = {}) {
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
567
|
+
const { applyFX, clearFX } = useFX(ref);
|
|
568
|
+
require_custom.useEffect(() => {
|
|
569
|
+
if (!ref.current) return;
|
|
570
|
+
clearFX();
|
|
571
|
+
applyFX(createBlurFX, config);
|
|
572
|
+
return () => clearFX();
|
|
573
|
+
}, [
|
|
574
|
+
ref,
|
|
575
|
+
config,
|
|
576
|
+
applyFX,
|
|
577
|
+
clearFX
|
|
578
|
+
]);
|
|
579
|
+
return { clearFX };
|
|
580
|
+
}
|
|
581
|
+
//#endregion
|
|
582
|
+
//#region src/fx/convenience-hooks/use-glow.ts
|
|
583
|
+
/**
|
|
584
|
+
* Convenience hook for automatic glow FX
|
|
585
|
+
* Applies glow on mount and updates on config changes
|
|
586
|
+
*/
|
|
587
|
+
/**
|
|
588
|
+
* Hook for automatic glow FX
|
|
589
|
+
* @param ref - GameObject ref
|
|
590
|
+
* @param config - Glow config (updates reactively)
|
|
591
|
+
* @returns FX controls
|
|
592
|
+
*
|
|
593
|
+
* @example
|
|
594
|
+
* ```tsx
|
|
595
|
+
* const ref = useRef(null)
|
|
596
|
+
* useGlow(ref, { color: 0xff6600, outerStrength: 6, innerStrength: 2 })
|
|
597
|
+
*
|
|
598
|
+
* return <View ref={ref}>Content</View>
|
|
599
|
+
* ```
|
|
600
|
+
*/
|
|
2082
601
|
function useGlow(ref, config = {}) {
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
602
|
+
const { applyFX, clearFX } = useFX(ref);
|
|
603
|
+
require_custom.useEffect(() => {
|
|
604
|
+
if (!ref.current) return;
|
|
605
|
+
clearFX();
|
|
606
|
+
applyFX(createGlowFX, config);
|
|
607
|
+
return () => clearFX();
|
|
608
|
+
}, [
|
|
609
|
+
ref,
|
|
610
|
+
config,
|
|
611
|
+
applyFX,
|
|
612
|
+
clearFX
|
|
613
|
+
]);
|
|
614
|
+
return { clearFX };
|
|
615
|
+
}
|
|
616
|
+
//#endregion
|
|
617
|
+
//#region src/fx/convenience-hooks/use-shadow.ts
|
|
618
|
+
/**
|
|
619
|
+
* Convenience hook for automatic shadow FX
|
|
620
|
+
* Applies shadow on mount and updates on config changes
|
|
621
|
+
*/
|
|
622
|
+
/**
|
|
623
|
+
* Hook for automatic shadow FX
|
|
624
|
+
* @param ref - GameObject ref
|
|
625
|
+
* @param config - Shadow config (updates reactively)
|
|
626
|
+
* @returns FX controls
|
|
627
|
+
*
|
|
628
|
+
* @example
|
|
629
|
+
* ```tsx
|
|
630
|
+
* const ref = useRef(null)
|
|
631
|
+
* useShadow(ref, { x: 4, y: 4, decay: 0.1 })
|
|
632
|
+
*
|
|
633
|
+
* return <View ref={ref}>Content</View>
|
|
634
|
+
* ```
|
|
635
|
+
*/
|
|
2092
636
|
function useShadow(ref, config = {}) {
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
637
|
+
const { applyFX, clearFX } = useFX(ref);
|
|
638
|
+
require_custom.useEffect(() => {
|
|
639
|
+
if (!ref.current) return;
|
|
640
|
+
clearFX();
|
|
641
|
+
applyFX(createShadowFX, config);
|
|
642
|
+
return () => clearFX();
|
|
643
|
+
}, [
|
|
644
|
+
ref,
|
|
645
|
+
config,
|
|
646
|
+
applyFX,
|
|
647
|
+
clearFX
|
|
648
|
+
]);
|
|
649
|
+
return { clearFX };
|
|
650
|
+
}
|
|
651
|
+
//#endregion
|
|
652
|
+
//#region src/memo.ts
|
|
653
|
+
/**
|
|
654
|
+
* Safely sets __memo on a VNode, handling frozen/sealed objects from bundlers
|
|
655
|
+
* @param vnode - VNode to set __memo on
|
|
656
|
+
* @param value - Memoization value
|
|
657
|
+
* @returns Original VNode if extensible, or shallow copy with __memo
|
|
658
|
+
*/
|
|
2102
659
|
function setMemoSafe(vnode, value) {
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
660
|
+
if (Object.isExtensible(vnode)) {
|
|
661
|
+
vnode.__memo = value;
|
|
662
|
+
return vnode;
|
|
663
|
+
}
|
|
664
|
+
return {
|
|
665
|
+
...vnode,
|
|
666
|
+
__memo: value
|
|
667
|
+
};
|
|
668
|
+
}
|
|
669
|
+
/**
|
|
670
|
+
* Marks a component to skip memoization (always re-render on prop changes)
|
|
671
|
+
* Use when component has side effects or needs to re-render every time
|
|
672
|
+
*
|
|
673
|
+
* @example
|
|
674
|
+
* ```tsx
|
|
675
|
+
* function AlwaysUpdate({ value }) {
|
|
676
|
+
* console.log('Rendering with:', value)
|
|
677
|
+
* return <Text text={value} />
|
|
678
|
+
* }
|
|
679
|
+
*
|
|
680
|
+
* // Disable memoization
|
|
681
|
+
* <AlwaysUpdate value={counter} __memo={false} />
|
|
682
|
+
* ```
|
|
683
|
+
*
|
|
684
|
+
* @param vnode - VNode to mark
|
|
685
|
+
* @returns Same VNode with memoization disabled (may be a copy if frozen)
|
|
686
|
+
*/
|
|
2109
687
|
function noMemo(vnode) {
|
|
2110
|
-
|
|
2111
|
-
}
|
|
688
|
+
return setMemoSafe(vnode, false);
|
|
689
|
+
}
|
|
690
|
+
/**
|
|
691
|
+
* Explicitly enable memoization for a component (default behavior)
|
|
692
|
+
* This is the default - you don't need to call this unless you want to be explicit
|
|
693
|
+
*
|
|
694
|
+
* @param vnode - VNode to mark
|
|
695
|
+
* @returns Same VNode with memoization enabled (may be a copy if frozen)
|
|
696
|
+
*/
|
|
2112
697
|
function memo(vnode) {
|
|
2113
|
-
|
|
698
|
+
return setMemoSafe(vnode, true);
|
|
2114
699
|
}
|
|
700
|
+
//#endregion
|
|
701
|
+
//#region src/particles/use-particles.ts
|
|
702
|
+
/**
|
|
703
|
+
* Hook for imperative particle control
|
|
704
|
+
*/
|
|
2115
705
|
function useParticles(ref) {
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
applyDeathZone(emitter, deathZones);
|
|
2158
|
-
},
|
|
2159
|
-
[getEmitter]
|
|
2160
|
-
);
|
|
2161
|
-
return {
|
|
2162
|
-
getManager,
|
|
2163
|
-
getEmitter,
|
|
2164
|
-
start,
|
|
2165
|
-
stop,
|
|
2166
|
-
explode,
|
|
2167
|
-
setConfig,
|
|
2168
|
-
setEmitZone,
|
|
2169
|
-
setExcludeZones
|
|
2170
|
-
};
|
|
2171
|
-
}
|
|
2172
|
-
const DEFAULT_LOGO_KEY = "phaser-jsx-logo";
|
|
2173
|
-
const DEFAULT_BACKGROUND = {
|
|
2174
|
-
type: "grid",
|
|
2175
|
-
animation: "lemniscate",
|
|
2176
|
-
opacity: 0.15,
|
|
2177
|
-
color: 4890367
|
|
706
|
+
const getManager = require_custom.useCallback(() => ref.current ?? null, [ref]);
|
|
707
|
+
const getEmitter = require_custom.useCallback(() => {
|
|
708
|
+
const current = ref.current;
|
|
709
|
+
if (!current) return null;
|
|
710
|
+
if (require_custom.isParticleEmitter(current)) return current;
|
|
711
|
+
return require_custom.getFirstEmitter(current);
|
|
712
|
+
}, [ref]);
|
|
713
|
+
return {
|
|
714
|
+
getManager,
|
|
715
|
+
getEmitter,
|
|
716
|
+
start: require_custom.useCallback(() => {
|
|
717
|
+
getEmitter()?.start();
|
|
718
|
+
}, [getEmitter]),
|
|
719
|
+
stop: require_custom.useCallback(() => {
|
|
720
|
+
getEmitter()?.stop();
|
|
721
|
+
}, [getEmitter]),
|
|
722
|
+
explode: require_custom.useCallback((count, x, y) => {
|
|
723
|
+
getEmitter()?.explode(count, x, y);
|
|
724
|
+
}, [getEmitter]),
|
|
725
|
+
setConfig: require_custom.useCallback((config) => {
|
|
726
|
+
require_custom.applyEmitterConfig(getEmitter(), config);
|
|
727
|
+
}, [getEmitter]),
|
|
728
|
+
setEmitZone: require_custom.useCallback((zone, width, height) => {
|
|
729
|
+
require_custom.applyEmitZone(getEmitter(), require_custom.buildEmitZoneFromLayout(zone, width, height));
|
|
730
|
+
}, [getEmitter]),
|
|
731
|
+
setExcludeZones: require_custom.useCallback((zones, width, height) => {
|
|
732
|
+
require_custom.applyDeathZone(getEmitter(), require_custom.buildDeathZonesFromLayout(zones, width, height));
|
|
733
|
+
}, [getEmitter])
|
|
734
|
+
};
|
|
735
|
+
}
|
|
736
|
+
//#endregion
|
|
737
|
+
//#region src/scene-backgrounds.ts
|
|
738
|
+
var DEFAULT_LOGO_KEY = "phaser-jsx-logo";
|
|
739
|
+
/**
|
|
740
|
+
* Default scene background used when no explicit config is provided.
|
|
741
|
+
*/
|
|
742
|
+
var DEFAULT_BACKGROUND = {
|
|
743
|
+
type: "grid",
|
|
744
|
+
animation: "lemniscate",
|
|
745
|
+
opacity: .15,
|
|
746
|
+
color: 4890367
|
|
2178
747
|
};
|
|
748
|
+
var sceneBackgroundTextureId = 0;
|
|
749
|
+
function colorToCss(color) {
|
|
750
|
+
return `#${color.toString(16).padStart(6, "0")}`;
|
|
751
|
+
}
|
|
752
|
+
function createCanvasTexture(scene, width, height, draw) {
|
|
753
|
+
const textureKey = `__phaserjsx_scene_bg_${sceneBackgroundTextureId++}`;
|
|
754
|
+
const textureWidth = Math.max(1, Math.ceil(width));
|
|
755
|
+
const textureHeight = Math.max(1, Math.ceil(height));
|
|
756
|
+
const texture = scene.textures.createCanvas(textureKey, textureWidth, textureHeight);
|
|
757
|
+
if (!texture) throw new Error("Unable to create scene background texture");
|
|
758
|
+
const ctx = texture.getSourceImage().getContext("2d");
|
|
759
|
+
if (!ctx) throw new Error("Unable to create scene background canvas texture");
|
|
760
|
+
ctx.clearRect(0, 0, textureWidth, textureHeight);
|
|
761
|
+
draw(ctx, textureWidth, textureHeight);
|
|
762
|
+
texture.refresh();
|
|
763
|
+
return textureKey;
|
|
764
|
+
}
|
|
765
|
+
function removeTexture(scene, textureKey) {
|
|
766
|
+
if (textureKey && scene.textures.exists(textureKey)) scene.textures.remove(textureKey);
|
|
767
|
+
}
|
|
768
|
+
/**
|
|
769
|
+
* Adds a decorative background object to a Phaser scene.
|
|
770
|
+
*
|
|
771
|
+
* The helper owns all game objects, tweens, resize listeners, and generated textures it creates.
|
|
772
|
+
* It automatically cleans up on scene shutdown or destroy. Call `handle.destroy()` when removing
|
|
773
|
+
* the background earlier.
|
|
774
|
+
*
|
|
775
|
+
* @param scene - Phaser scene that receives the background.
|
|
776
|
+
* @param config - Background type, colors, opacity, animation, and optional logo texture key.
|
|
777
|
+
* @returns A handle for manual resize and cleanup, or `null` when `config.type` is `'none'`.
|
|
778
|
+
*
|
|
779
|
+
* @example
|
|
780
|
+
* ```ts
|
|
781
|
+
* const handle = addSceneBackground(scene, {
|
|
782
|
+
* type: 'grid',
|
|
783
|
+
* animation: 'wave',
|
|
784
|
+
* color: 0x4a9eff,
|
|
785
|
+
* opacity: 0.12,
|
|
786
|
+
* })
|
|
787
|
+
*
|
|
788
|
+
* // Later, if the background should be removed before scene shutdown:
|
|
789
|
+
* handle?.destroy()
|
|
790
|
+
* ```
|
|
791
|
+
*/
|
|
2179
792
|
function addSceneBackground(scene, config = DEFAULT_BACKGROUND) {
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
793
|
+
const bgConfig = config ?? DEFAULT_BACKGROUND;
|
|
794
|
+
if (bgConfig.type === "none") return null;
|
|
795
|
+
let background;
|
|
796
|
+
let backgroundTween;
|
|
797
|
+
const particleTweens = [];
|
|
798
|
+
const textureKeys = /* @__PURE__ */ new Set();
|
|
799
|
+
let resizeFn;
|
|
800
|
+
let destroyed = false;
|
|
801
|
+
const createGridBackground = () => {
|
|
802
|
+
const gridSize = 40;
|
|
803
|
+
const color = bgConfig.color ?? 4890367;
|
|
804
|
+
const opacity = bgConfig.opacity ?? .15;
|
|
805
|
+
const textureKey = createCanvasTexture(scene, gridSize, gridSize, (ctx, width, height) => {
|
|
806
|
+
ctx.globalAlpha = opacity;
|
|
807
|
+
ctx.strokeStyle = colorToCss(color);
|
|
808
|
+
ctx.lineWidth = 1;
|
|
809
|
+
ctx.beginPath();
|
|
810
|
+
ctx.moveTo(.5, 0);
|
|
811
|
+
ctx.lineTo(.5, height);
|
|
812
|
+
ctx.moveTo(0, .5);
|
|
813
|
+
ctx.lineTo(width, .5);
|
|
814
|
+
ctx.stroke();
|
|
815
|
+
});
|
|
816
|
+
textureKeys.add(textureKey);
|
|
817
|
+
const tile = scene.add.tileSprite(0, 0, scene.scale.width, scene.scale.height, textureKey);
|
|
818
|
+
tile.setOrigin(0, 0);
|
|
819
|
+
const moveGrid = (offsetX, offsetY) => {
|
|
820
|
+
tile.tilePositionX = -offsetX;
|
|
821
|
+
tile.tilePositionY = -offsetY;
|
|
822
|
+
};
|
|
823
|
+
tile.__redrawFn = moveGrid;
|
|
824
|
+
background = tile;
|
|
825
|
+
resizeFn = (width, height) => {
|
|
826
|
+
tile.setSize(width, height);
|
|
827
|
+
};
|
|
828
|
+
};
|
|
829
|
+
const createLogoBackground = () => {
|
|
830
|
+
const container = scene.add.container(scene.scale.width / 2, scene.scale.height / 2);
|
|
831
|
+
const opacity = bgConfig.opacity ?? .1;
|
|
832
|
+
const logoKey = bgConfig.logoKey ?? DEFAULT_LOGO_KEY;
|
|
833
|
+
const logo = scene.add.image(0, 0, logoKey);
|
|
834
|
+
logo.setAlpha(opacity);
|
|
835
|
+
logo.setScale(.5);
|
|
836
|
+
container.add(logo);
|
|
837
|
+
background = container;
|
|
838
|
+
resizeFn = (width, height) => {
|
|
839
|
+
container.setPosition(width / 2, height / 2);
|
|
840
|
+
};
|
|
841
|
+
};
|
|
842
|
+
const createGradientBackground = () => {
|
|
843
|
+
const color1 = bgConfig.color ?? 4890367;
|
|
844
|
+
const color2 = bgConfig.colorSecondary ?? 7031551;
|
|
845
|
+
const opacity = bgConfig.opacity ?? .2;
|
|
846
|
+
const createGradientTexture = (width, height) => createCanvasTexture(scene, width, height, (ctx, textureWidth, textureHeight) => {
|
|
847
|
+
const gradient = ctx.createLinearGradient(0, 0, 0, textureHeight);
|
|
848
|
+
gradient.addColorStop(0, colorToCss(color1));
|
|
849
|
+
gradient.addColorStop(1, colorToCss(color2));
|
|
850
|
+
ctx.globalAlpha = opacity;
|
|
851
|
+
ctx.fillStyle = gradient;
|
|
852
|
+
ctx.fillRect(0, 0, textureWidth, textureHeight);
|
|
853
|
+
});
|
|
854
|
+
let textureKey = createGradientTexture(scene.scale.width, scene.scale.height);
|
|
855
|
+
textureKeys.add(textureKey);
|
|
856
|
+
const image = scene.add.image(0, 0, textureKey);
|
|
857
|
+
image.setOrigin(0, 0);
|
|
858
|
+
resizeFn = (width, height) => {
|
|
859
|
+
const previousTextureKey = textureKey;
|
|
860
|
+
textureKey = createGradientTexture(width, height);
|
|
861
|
+
textureKeys.add(textureKey);
|
|
862
|
+
image.setTexture(textureKey);
|
|
863
|
+
image.setDisplaySize(width, height);
|
|
864
|
+
textureKeys.delete(previousTextureKey);
|
|
865
|
+
removeTexture(scene, previousTextureKey);
|
|
866
|
+
};
|
|
867
|
+
background = image;
|
|
868
|
+
};
|
|
869
|
+
const createParticlesBackground = () => {
|
|
870
|
+
const container = scene.add.container(0, 0);
|
|
871
|
+
const particleCount = 20;
|
|
872
|
+
const color = bgConfig.color ?? 4890367;
|
|
873
|
+
const opacity = bgConfig.opacity ?? .1;
|
|
874
|
+
const particles = [];
|
|
875
|
+
for (let i = 0; i < particleCount; i += 1) {
|
|
876
|
+
const size = phaser.Math.Between(2, 6);
|
|
877
|
+
const x = phaser.Math.Between(0, scene.scale.width);
|
|
878
|
+
const y = phaser.Math.Between(0, scene.scale.height);
|
|
879
|
+
const particle = scene.add.circle(x, y, size, color, opacity);
|
|
880
|
+
container.add(particle);
|
|
881
|
+
particles.push(particle);
|
|
882
|
+
particleTweens.push(scene.tweens.add({
|
|
883
|
+
targets: particle,
|
|
884
|
+
y: particle.y + phaser.Math.Between(-50, 50),
|
|
885
|
+
x: particle.x + phaser.Math.Between(-50, 50),
|
|
886
|
+
alpha: opacity * 1.5,
|
|
887
|
+
duration: phaser.Math.Between(2e3, 4e3),
|
|
888
|
+
yoyo: true,
|
|
889
|
+
repeat: -1,
|
|
890
|
+
ease: "Sine.easeInOut"
|
|
891
|
+
}));
|
|
892
|
+
}
|
|
893
|
+
background = container;
|
|
894
|
+
resizeFn = (width, height) => {
|
|
895
|
+
for (const particle of particles) particle.setPosition(phaser.Math.Between(0, width), phaser.Math.Between(0, height));
|
|
896
|
+
};
|
|
897
|
+
};
|
|
898
|
+
switch (bgConfig.type) {
|
|
899
|
+
case "grid":
|
|
900
|
+
createGridBackground();
|
|
901
|
+
break;
|
|
902
|
+
case "logo":
|
|
903
|
+
createLogoBackground();
|
|
904
|
+
break;
|
|
905
|
+
case "gradient":
|
|
906
|
+
createGradientBackground();
|
|
907
|
+
break;
|
|
908
|
+
case "particles":
|
|
909
|
+
createParticlesBackground();
|
|
910
|
+
break;
|
|
911
|
+
}
|
|
912
|
+
if (!background) return null;
|
|
913
|
+
if (bgConfig.animation && bgConfig.animation !== "static") backgroundTween = applyAnimation(scene, background, bgConfig.animation);
|
|
914
|
+
const onResize = () => {
|
|
915
|
+
if (resizeFn) resizeFn(scene.scale.width, scene.scale.height);
|
|
916
|
+
};
|
|
917
|
+
const cleanup = () => {
|
|
918
|
+
if (destroyed) return;
|
|
919
|
+
destroyed = true;
|
|
920
|
+
backgroundTween?.stop();
|
|
921
|
+
for (const tween of particleTweens) tween.stop();
|
|
922
|
+
background?.destroy();
|
|
923
|
+
background = void 0;
|
|
924
|
+
for (const textureKey of textureKeys) removeTexture(scene, textureKey);
|
|
925
|
+
textureKeys.clear();
|
|
926
|
+
scene.scale.off(phaser.Scale.Events.RESIZE, onResize);
|
|
927
|
+
scene.events.off(phaser.Scenes.Events.SHUTDOWN, cleanup);
|
|
928
|
+
scene.events.off(phaser.Scenes.Events.DESTROY, cleanup);
|
|
929
|
+
};
|
|
930
|
+
scene.scale.on(phaser.Scale.Events.RESIZE, onResize);
|
|
931
|
+
scene.events.once(phaser.Scenes.Events.SHUTDOWN, cleanup);
|
|
932
|
+
scene.events.once(phaser.Scenes.Events.DESTROY, cleanup);
|
|
933
|
+
return {
|
|
934
|
+
background,
|
|
935
|
+
destroy: cleanup,
|
|
936
|
+
resize: (width, height) => {
|
|
937
|
+
if (resizeFn) resizeFn(width, height);
|
|
938
|
+
}
|
|
939
|
+
};
|
|
2313
940
|
}
|
|
2314
941
|
function applyAnimation(scene, target, animation) {
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
case "rotate":
|
|
2324
|
-
return animateRotate(scene, target);
|
|
2325
|
-
case "static":
|
|
2326
|
-
default:
|
|
2327
|
-
return void 0;
|
|
2328
|
-
}
|
|
942
|
+
const redrawFn = target.__redrawFn;
|
|
943
|
+
switch (animation) {
|
|
944
|
+
case "lemniscate": return redrawFn ? animateLemniscate(scene, redrawFn) : animatePulse(scene, target);
|
|
945
|
+
case "wave": return redrawFn ? animateWave(scene, redrawFn) : animatePulse(scene, target);
|
|
946
|
+
case "pulse": return animatePulse(scene, target);
|
|
947
|
+
case "rotate": return animateRotate(scene, target);
|
|
948
|
+
default: return;
|
|
949
|
+
}
|
|
2329
950
|
}
|
|
2330
951
|
function animateLemniscate(scene, drawFn) {
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
const offsetY = amplitude * Math.sin(2 * t) / 2;
|
|
2343
|
-
drawFn(offsetX, offsetY);
|
|
2344
|
-
}
|
|
2345
|
-
}
|
|
2346
|
-
});
|
|
952
|
+
const amplitude = 30;
|
|
953
|
+
return scene.tweens.addCounter({
|
|
954
|
+
from: 0,
|
|
955
|
+
to: Math.PI * 2,
|
|
956
|
+
duration: 8e3,
|
|
957
|
+
repeat: -1,
|
|
958
|
+
onUpdate: (tween) => {
|
|
959
|
+
const t = tween.getValue();
|
|
960
|
+
if (t !== null) drawFn(amplitude * Math.cos(t), amplitude * Math.sin(2 * t) / 2);
|
|
961
|
+
}
|
|
962
|
+
});
|
|
2347
963
|
}
|
|
2348
964
|
function animateWave(scene, drawFn) {
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
}
|
|
2361
|
-
});
|
|
965
|
+
return scene.tweens.addCounter({
|
|
966
|
+
from: 0,
|
|
967
|
+
to: 40,
|
|
968
|
+
duration: 3e3,
|
|
969
|
+
yoyo: true,
|
|
970
|
+
repeat: -1,
|
|
971
|
+
onUpdate: (tween) => {
|
|
972
|
+
const offset = tween.getValue();
|
|
973
|
+
if (offset !== null) drawFn(offset, 0);
|
|
974
|
+
}
|
|
975
|
+
});
|
|
2362
976
|
}
|
|
2363
977
|
function animatePulse(scene, target) {
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
978
|
+
return scene.tweens.add({
|
|
979
|
+
targets: target,
|
|
980
|
+
scaleX: 1.1,
|
|
981
|
+
scaleY: 1.1,
|
|
982
|
+
duration: 2e3,
|
|
983
|
+
yoyo: true,
|
|
984
|
+
repeat: -1,
|
|
985
|
+
ease: "Sine.easeInOut"
|
|
986
|
+
});
|
|
2373
987
|
}
|
|
2374
988
|
function animateRotate(scene, target) {
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
}
|
|
989
|
+
return scene.tweens.add({
|
|
990
|
+
targets: target,
|
|
991
|
+
angle: 360,
|
|
992
|
+
duration: 2e4,
|
|
993
|
+
repeat: -1,
|
|
994
|
+
ease: "Linear"
|
|
995
|
+
});
|
|
996
|
+
}
|
|
997
|
+
//#endregion
|
|
998
|
+
//#region src/plugin.ts
|
|
999
|
+
/**
|
|
1000
|
+
* PhaserJSX Plugin for automatic JSX mounting
|
|
1001
|
+
* Enables declarative initialization via Phaser game config
|
|
1002
|
+
*/
|
|
1003
|
+
/**
|
|
1004
|
+
* Implementation
|
|
1005
|
+
*/
|
|
2383
1006
|
function createPhaserJSXPlugin(config) {
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
}
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
1007
|
+
return {
|
|
1008
|
+
key: "PhaserJSX",
|
|
1009
|
+
plugin: PhaserJSXPlugin,
|
|
1010
|
+
start: true,
|
|
1011
|
+
data: config
|
|
1012
|
+
};
|
|
1013
|
+
}
|
|
1014
|
+
/**
|
|
1015
|
+
* PhaserJSX Plugin
|
|
1016
|
+
* Provides automatic JSX mounting through Phaser plugin system
|
|
1017
|
+
*
|
|
1018
|
+
* @example
|
|
1019
|
+
* ```typescript
|
|
1020
|
+
* // In game config
|
|
1021
|
+
* plugins: {
|
|
1022
|
+
* global: [{
|
|
1023
|
+
* key: 'PhaserJSX',
|
|
1024
|
+
* plugin: PhaserJSXPlugin,
|
|
1025
|
+
* start: true,
|
|
1026
|
+
* data: {
|
|
1027
|
+
* component: App,
|
|
1028
|
+
* props: { width: '100%', height: '100%' }
|
|
1029
|
+
* }
|
|
1030
|
+
* }]
|
|
1031
|
+
* }
|
|
1032
|
+
* ```
|
|
1033
|
+
*/
|
|
1034
|
+
var PhaserJSXPlugin = class extends phaser.Plugins.BasePlugin {
|
|
1035
|
+
config;
|
|
1036
|
+
mountHandle;
|
|
1037
|
+
container;
|
|
1038
|
+
targetScene;
|
|
1039
|
+
/**
|
|
1040
|
+
* Constructor - receives plugin manager and optional mapping
|
|
1041
|
+
*/
|
|
1042
|
+
constructor(pluginManager) {
|
|
1043
|
+
super(pluginManager);
|
|
1044
|
+
}
|
|
1045
|
+
/**
|
|
1046
|
+
* Init lifecycle - called first with config data
|
|
1047
|
+
*/
|
|
1048
|
+
init(data) {
|
|
1049
|
+
if (data) this.config = { ...data };
|
|
1050
|
+
}
|
|
1051
|
+
/**
|
|
1052
|
+
* Start lifecycle - called when plugin should start
|
|
1053
|
+
*/
|
|
1054
|
+
start() {
|
|
1055
|
+
this.game.events.on("ready", this.onGameReady, this);
|
|
1056
|
+
}
|
|
1057
|
+
/**
|
|
1058
|
+
* Game ready handler - scene system is now initialized
|
|
1059
|
+
*/
|
|
1060
|
+
onGameReady() {
|
|
1061
|
+
const scenes = this.game.scene.scenes;
|
|
1062
|
+
if (scenes.length > 0) {
|
|
1063
|
+
const targetScene = scenes[0];
|
|
1064
|
+
if (!targetScene) return;
|
|
1065
|
+
this.targetScene = targetScene;
|
|
1066
|
+
targetScene.events.once("create", this.onSceneCreate, this);
|
|
1067
|
+
if (targetScene.scene.isActive()) this.onSceneCreate();
|
|
1068
|
+
} else console.warn("[PhaserJSX Plugin] No scenes found to mount JSX");
|
|
1069
|
+
}
|
|
1070
|
+
/**
|
|
1071
|
+
* Scene create handler - auto-mount JSX
|
|
1072
|
+
*/
|
|
1073
|
+
onSceneCreate() {
|
|
1074
|
+
if (this.config?.autoMount !== false && this.config?.component) {
|
|
1075
|
+
this.mount();
|
|
1076
|
+
if (this.config?.autoResize !== false) this.setupResizeHandler();
|
|
1077
|
+
} else console.warn("[PhaserJSX Plugin] Auto-mount disabled or no component configured");
|
|
1078
|
+
}
|
|
1079
|
+
/**
|
|
1080
|
+
* Setup resize event handler
|
|
1081
|
+
*/
|
|
1082
|
+
setupResizeHandler() {
|
|
1083
|
+
if (!this.targetScene) return;
|
|
1084
|
+
this.targetScene.scale.on("resize", this.onResize, this);
|
|
1085
|
+
}
|
|
1086
|
+
/**
|
|
1087
|
+
* Handle scene resize - update component props
|
|
1088
|
+
*/
|
|
1089
|
+
onResize(gameSize) {
|
|
1090
|
+
if (!this.mountHandle || !this.config?.component || !this.container) return;
|
|
1091
|
+
const props = this.config.props || {};
|
|
1092
|
+
const width = props.width ?? gameSize.width;
|
|
1093
|
+
const height = props.height ?? gameSize.height;
|
|
1094
|
+
this.mountHandle = require_custom.mountJSX(this.container, this.config.component, {
|
|
1095
|
+
...props,
|
|
1096
|
+
width,
|
|
1097
|
+
height
|
|
1098
|
+
});
|
|
1099
|
+
}
|
|
1100
|
+
/**
|
|
1101
|
+
* Configure plugin
|
|
1102
|
+
* Can be called from scene to set up component dynamically
|
|
1103
|
+
*/
|
|
1104
|
+
configure(component, props) {
|
|
1105
|
+
const newConfig = { component };
|
|
1106
|
+
if (props !== void 0) newConfig.props = props;
|
|
1107
|
+
this.config = {
|
|
1108
|
+
...this.config,
|
|
1109
|
+
...newConfig
|
|
1110
|
+
};
|
|
1111
|
+
}
|
|
1112
|
+
/**
|
|
1113
|
+
* Mount JSX component
|
|
1114
|
+
*/
|
|
1115
|
+
mount() {
|
|
1116
|
+
if (!this.targetScene) {
|
|
1117
|
+
console.warn("[PhaserJSX Plugin] No scene available for mounting");
|
|
1118
|
+
return;
|
|
1119
|
+
}
|
|
1120
|
+
if (!this.config?.component) {
|
|
1121
|
+
console.warn("[PhaserJSX Plugin] No component configured for mounting");
|
|
1122
|
+
return;
|
|
1123
|
+
}
|
|
1124
|
+
if (!this.container) {
|
|
1125
|
+
const containerConfig = this.config.container || {};
|
|
1126
|
+
this.container = this.targetScene.add.container(containerConfig.x ?? 0, containerConfig.y ?? 0);
|
|
1127
|
+
this.container.setDepth(containerConfig.depth ?? 100);
|
|
1128
|
+
}
|
|
1129
|
+
const props = this.config.props || {};
|
|
1130
|
+
const width = props.width ?? this.targetScene.scale.width;
|
|
1131
|
+
const height = props.height ?? this.targetScene.scale.height;
|
|
1132
|
+
this.mountHandle = require_custom.mountJSX(this.container, this.config.component, {
|
|
1133
|
+
...props,
|
|
1134
|
+
width,
|
|
1135
|
+
height
|
|
1136
|
+
});
|
|
1137
|
+
}
|
|
1138
|
+
/**
|
|
1139
|
+
* Unmount JSX component
|
|
1140
|
+
*/
|
|
1141
|
+
unmount() {
|
|
1142
|
+
if (this.mountHandle) {
|
|
1143
|
+
this.mountHandle.unmount();
|
|
1144
|
+
this.mountHandle = void 0;
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
/**
|
|
1148
|
+
* Destroy lifecycle - cleanup
|
|
1149
|
+
*/
|
|
1150
|
+
destroy() {
|
|
1151
|
+
this.unmount();
|
|
1152
|
+
if (this.container) {
|
|
1153
|
+
this.container.destroy();
|
|
1154
|
+
this.container = void 0;
|
|
1155
|
+
}
|
|
1156
|
+
this.game.events.off("ready", this.onGameReady, this);
|
|
1157
|
+
if (this.targetScene) {
|
|
1158
|
+
this.targetScene.events.off("create", this.onSceneCreate, this);
|
|
1159
|
+
this.targetScene.scale.off("resize", this.onResize, this);
|
|
1160
|
+
}
|
|
1161
|
+
this.targetScene = void 0;
|
|
1162
|
+
this.config = void 0;
|
|
1163
|
+
super.destroy();
|
|
1164
|
+
}
|
|
1165
|
+
};
|
|
1166
|
+
//#endregion
|
|
1167
|
+
//#region src/colors/use-color-mode.ts
|
|
1168
|
+
/**
|
|
1169
|
+
* Color mode management for dynamic theme switching
|
|
1170
|
+
*/
|
|
1171
|
+
/**
|
|
1172
|
+
* Hook to manage color mode (light/dark) dynamically
|
|
1173
|
+
* @returns Object with current mode, toggle function, and setter
|
|
1174
|
+
* @example
|
|
1175
|
+
* ```typescript
|
|
1176
|
+
* function ThemeToggle() {
|
|
1177
|
+
* const { colorMode, toggleColorMode } = useColorMode()
|
|
1178
|
+
*
|
|
1179
|
+
* return (
|
|
1180
|
+
* <Button onClick={toggleColorMode}>
|
|
1181
|
+
* {colorMode === 'light' ? 'Dark' : 'Light'} Mode
|
|
1182
|
+
* </Button>
|
|
1183
|
+
* )
|
|
1184
|
+
* }
|
|
1185
|
+
* ```
|
|
1186
|
+
*/
|
|
2541
1187
|
function useColorMode() {
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
1188
|
+
const [colorMode, setColorModeState] = require_custom.useState(require_custom.themeRegistry.getColorMode());
|
|
1189
|
+
require_custom.useEffect(() => {
|
|
1190
|
+
return require_custom.themeRegistry.subscribe(() => {
|
|
1191
|
+
setColorModeState(require_custom.themeRegistry.getColorMode());
|
|
1192
|
+
});
|
|
1193
|
+
}, []);
|
|
1194
|
+
const setColorMode = (mode) => {
|
|
1195
|
+
require_custom.themeRegistry.setColorMode(mode);
|
|
1196
|
+
};
|
|
1197
|
+
const toggleColorMode = () => {
|
|
1198
|
+
setColorMode(colorMode === "light" ? "dark" : "light");
|
|
1199
|
+
};
|
|
1200
|
+
return {
|
|
1201
|
+
colorMode,
|
|
1202
|
+
setColorMode,
|
|
1203
|
+
toggleColorMode
|
|
1204
|
+
};
|
|
1205
|
+
}
|
|
1206
|
+
//#endregion
|
|
1207
|
+
//#region src/colors/use-colors.ts
|
|
1208
|
+
/**
|
|
1209
|
+
* Color system hooks for component usage
|
|
1210
|
+
*/
|
|
1211
|
+
/**
|
|
1212
|
+
* Hook to access color tokens from theme context
|
|
1213
|
+
* Automatically updates when color mode or preset changes
|
|
1214
|
+
* @returns Current ColorTokens or undefined
|
|
1215
|
+
* @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more
|
|
1216
|
+
* @example
|
|
1217
|
+
* ```typescript
|
|
1218
|
+
* // Old way (deprecated):
|
|
1219
|
+
* const colors = useColors()
|
|
1220
|
+
*
|
|
1221
|
+
* // New way:
|
|
1222
|
+
* const tokens = useThemeTokens()
|
|
1223
|
+
* const colors = tokens?.colors
|
|
1224
|
+
*
|
|
1225
|
+
* // Access text styles, spacing, etc.:
|
|
1226
|
+
* <Text style={tokens.textStyles.DEFAULT} />
|
|
1227
|
+
* <View padding={tokens.spacing.lg} />
|
|
1228
|
+
* ```
|
|
1229
|
+
*/
|
|
2562
1230
|
function useColors() {
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
1231
|
+
const localTheme = require_custom.useTheme();
|
|
1232
|
+
const getInitialColors = () => {
|
|
1233
|
+
if (localTheme?.__colorPreset) return require_custom.getPresetWithMode(localTheme.__colorPreset.name, localTheme.__colorPreset.mode ?? "light").colors;
|
|
1234
|
+
return require_custom.themeRegistry.getColorTokens();
|
|
1235
|
+
};
|
|
1236
|
+
const [colors, setColors] = require_custom.useState(getInitialColors());
|
|
1237
|
+
const [, forceUpdate] = require_custom.useState(0);
|
|
1238
|
+
require_custom.useEffect(() => {
|
|
1239
|
+
return require_custom.themeRegistry.subscribe(() => {
|
|
1240
|
+
if (localTheme?.__colorPreset) {
|
|
1241
|
+
const currentMode = require_custom.themeRegistry.getColorMode();
|
|
1242
|
+
setColors(require_custom.getPresetWithMode(localTheme.__colorPreset.name, currentMode).colors);
|
|
1243
|
+
} else setColors(require_custom.themeRegistry.getColorTokens());
|
|
1244
|
+
forceUpdate((n) => n + 1);
|
|
1245
|
+
});
|
|
1246
|
+
}, [localTheme]);
|
|
1247
|
+
return colors;
|
|
1248
|
+
}
|
|
1249
|
+
/**
|
|
1250
|
+
* Hook to subscribe to theme changes without accessing colors
|
|
1251
|
+
* Use this in parent components that don't need colors themselves
|
|
1252
|
+
* but want to ensure children re-render when theme changes
|
|
1253
|
+
*
|
|
1254
|
+
* Note: Since useColors() now triggers re-renders automatically,
|
|
1255
|
+
* this hook is mainly useful if you don't need the colors themselves
|
|
1256
|
+
* but still want to react to theme changes.
|
|
1257
|
+
*
|
|
1258
|
+
* @example
|
|
1259
|
+
* ```typescript
|
|
1260
|
+
* function ParentComponent() {
|
|
1261
|
+
* useThemeSubscription() // Children will re-render on theme changes
|
|
1262
|
+
* return <ChildThatUsesColors />
|
|
1263
|
+
* }
|
|
1264
|
+
* ```
|
|
1265
|
+
*/
|
|
2594
1266
|
function useThemeSubscription() {
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
1267
|
+
const [, forceUpdate] = require_custom.useState(0);
|
|
1268
|
+
require_custom.useEffect(() => {
|
|
1269
|
+
return require_custom.themeRegistry.subscribe(() => {
|
|
1270
|
+
forceUpdate((n) => n + 1);
|
|
1271
|
+
});
|
|
1272
|
+
}, []);
|
|
1273
|
+
}
|
|
1274
|
+
//#endregion
|
|
1275
|
+
//#region src/colors/color-theme-helpers.ts
|
|
1276
|
+
/**
|
|
1277
|
+
* Convert ColorTokens to a theme-compatible object
|
|
1278
|
+
* Maps semantic color names to Phaser number format for View/Button components
|
|
1279
|
+
* @param colors - ColorTokens to convert
|
|
1280
|
+
* @returns Object with backgroundColor, borderColor, etc.
|
|
1281
|
+
* @example
|
|
1282
|
+
* ```typescript
|
|
1283
|
+
* const colors = getPreset('oceanBlue').colors
|
|
1284
|
+
* const buttonTheme = {
|
|
1285
|
+
* ...colorsToTheme(colors, 'primary'),
|
|
1286
|
+
* padding: 8,
|
|
1287
|
+
* }
|
|
1288
|
+
* // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }
|
|
1289
|
+
* ```
|
|
1290
|
+
*/
|
|
2603
1291
|
function colorsToTheme(colors, colorKey, options = {}) {
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
1292
|
+
const { backgroundShade = "DEFAULT", borderShade = "dark", includeBorder = true } = options;
|
|
1293
|
+
const result = { backgroundColor: colors[colorKey][backgroundShade].toNumber() };
|
|
1294
|
+
if (includeBorder) result.borderColor = colors[colorKey][borderShade].toNumber();
|
|
1295
|
+
return result;
|
|
1296
|
+
}
|
|
1297
|
+
/**
|
|
1298
|
+
* Get text color from ColorTokens as hex string for Phaser Text style
|
|
1299
|
+
* @param colors - ColorTokens to use
|
|
1300
|
+
* @param shade - Which text shade to use (default: 'DEFAULT')
|
|
1301
|
+
* @param alphaValue - Optional alpha value (0-1)
|
|
1302
|
+
* @returns Hex string or rgba string for Text style
|
|
1303
|
+
* @example
|
|
1304
|
+
* ```typescript
|
|
1305
|
+
* const colors = getPreset('oceanBlue').colors
|
|
1306
|
+
* const textStyle = {
|
|
1307
|
+
* color: getTextColor(colors),
|
|
1308
|
+
* fontSize: '18px'
|
|
1309
|
+
* }
|
|
1310
|
+
* ```
|
|
1311
|
+
*/
|
|
2613
1312
|
function getTextColor(colors, shade = "DEFAULT", alphaValue) {
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
}
|
|
1313
|
+
const color = colors.text[shade];
|
|
1314
|
+
return alphaValue !== void 0 ? require_custom.alpha(color.toNumber(), alphaValue) : color.toString();
|
|
1315
|
+
}
|
|
1316
|
+
/**
|
|
1317
|
+
* Get background color from ColorTokens
|
|
1318
|
+
* @param colors - ColorTokens to use
|
|
1319
|
+
* @param shade - Which shade to use (default: 'DEFAULT')
|
|
1320
|
+
* @returns Phaser color number
|
|
1321
|
+
*/
|
|
2617
1322
|
function getBackgroundColor(colors, shade = "DEFAULT") {
|
|
2618
|
-
|
|
2619
|
-
}
|
|
1323
|
+
return colors.background[shade].toNumber();
|
|
1324
|
+
}
|
|
1325
|
+
/**
|
|
1326
|
+
* Get surface color from ColorTokens
|
|
1327
|
+
* @param colors - ColorTokens to use
|
|
1328
|
+
* @param shade - Which shade to use (default: 'DEFAULT')
|
|
1329
|
+
* @returns Phaser color number
|
|
1330
|
+
*/
|
|
2620
1331
|
function getSurfaceColor(colors, shade = "DEFAULT") {
|
|
2621
|
-
|
|
2622
|
-
}
|
|
1332
|
+
return colors.surface[shade].toNumber();
|
|
1333
|
+
}
|
|
1334
|
+
/**
|
|
1335
|
+
* Get border color from ColorTokens
|
|
1336
|
+
* @param colors - ColorTokens to use
|
|
1337
|
+
* @param shade - Which shade to use (default: 'DEFAULT')
|
|
1338
|
+
* @returns Phaser color number
|
|
1339
|
+
*/
|
|
2623
1340
|
function getBorderColor(colors, shade = "DEFAULT") {
|
|
2624
|
-
|
|
2625
|
-
}
|
|
1341
|
+
return colors.border[shade].toNumber();
|
|
1342
|
+
}
|
|
1343
|
+
//#endregion
|
|
1344
|
+
//#region src/colors/preset-manager.ts
|
|
1345
|
+
/**
|
|
1346
|
+
* Dynamic color preset management
|
|
1347
|
+
*/
|
|
1348
|
+
/**
|
|
1349
|
+
* Set the active color preset globally
|
|
1350
|
+
* Applies the preset with the current color mode and updates all components
|
|
1351
|
+
* Triggers complete remount of all active mountJSX instances
|
|
1352
|
+
* @param presetName - Name of the preset to apply
|
|
1353
|
+
* @param colorMode - Optional color mode to apply together with the preset
|
|
1354
|
+
* @example
|
|
1355
|
+
* ```typescript
|
|
1356
|
+
* // Switch to forest green theme
|
|
1357
|
+
* setColorPreset('forestGreen')
|
|
1358
|
+
*
|
|
1359
|
+
* // Apply preset and force dark mode in one go
|
|
1360
|
+
* setColorPreset('midnight', 'dark')
|
|
1361
|
+
*
|
|
1362
|
+
* // Current mode (light/dark) is preserved
|
|
1363
|
+
* ```
|
|
1364
|
+
*/
|
|
2626
1365
|
function setColorPreset(presetName, colorMode) {
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
1366
|
+
const preset = require_custom.getPresetWithMode(presetName, colorMode ?? require_custom.themeRegistry.getColorMode());
|
|
1367
|
+
require_custom.themeRegistry.setColorTokens(preset.colors);
|
|
1368
|
+
require_custom.themeRegistry.setCurrentPresetName(presetName, true);
|
|
1369
|
+
if (colorMode && require_custom.themeRegistry.getColorMode() !== colorMode) {
|
|
1370
|
+
require_custom.themeRegistry.setColorMode(colorMode);
|
|
1371
|
+
return;
|
|
1372
|
+
}
|
|
1373
|
+
setTimeout(() => {
|
|
1374
|
+
require_custom.remountAll();
|
|
1375
|
+
}, 0);
|
|
1376
|
+
}
|
|
1377
|
+
/**
|
|
1378
|
+
* Get the currently active preset name
|
|
1379
|
+
* @returns Current preset name or undefined
|
|
1380
|
+
*/
|
|
2639
1381
|
function getCurrentPreset() {
|
|
2640
|
-
|
|
1382
|
+
return require_custom.themeRegistry.getCurrentPresetName();
|
|
2641
1383
|
}
|
|
1384
|
+
/**
|
|
1385
|
+
* Set the active color mode globally (without changing the preset)
|
|
1386
|
+
* @param mode - Color mode to apply
|
|
1387
|
+
*/
|
|
2642
1388
|
function setColorMode(mode) {
|
|
2643
|
-
|
|
2644
|
-
}
|
|
1389
|
+
require_custom.themeRegistry.setColorMode(mode);
|
|
1390
|
+
}
|
|
1391
|
+
/**
|
|
1392
|
+
* Get all available preset names
|
|
1393
|
+
* @returns Array of preset names
|
|
1394
|
+
* @example
|
|
1395
|
+
* ```typescript
|
|
1396
|
+
* const presets = getAvailablePresets() // ['oceanBlue', 'forestGreen', 'midnight']
|
|
1397
|
+
* ```
|
|
1398
|
+
*/
|
|
2645
1399
|
function getAvailablePresets() {
|
|
2646
|
-
|
|
2647
|
-
|
|
1400
|
+
return [
|
|
1401
|
+
"oceanBlue",
|
|
1402
|
+
"forestGreen",
|
|
1403
|
+
"midnight"
|
|
1404
|
+
];
|
|
1405
|
+
}
|
|
1406
|
+
//#endregion
|
|
1407
|
+
//#region src/design-tokens/use-theme-tokens.ts
|
|
1408
|
+
/**
|
|
1409
|
+
* Hook to access complete design token system
|
|
1410
|
+
* Combines colors with text styles, spacing, sizes, and radius tokens
|
|
1411
|
+
*/
|
|
1412
|
+
/**
|
|
1413
|
+
* Hook to access complete design token system from theme context
|
|
1414
|
+
* Provides colors, text styles, spacing, sizes, and radius tokens
|
|
1415
|
+
* Automatically updates when color mode or preset changes
|
|
1416
|
+
* @returns Current DesignTokens or undefined
|
|
1417
|
+
* @example
|
|
1418
|
+
* ```typescript
|
|
1419
|
+
* function MyComponent() {
|
|
1420
|
+
* const tokens = useThemeTokens()
|
|
1421
|
+
*
|
|
1422
|
+
* if (!tokens) return null
|
|
1423
|
+
*
|
|
1424
|
+
* return (
|
|
1425
|
+
* <View
|
|
1426
|
+
* backgroundColor={tokens.colors.surface.DEFAULT}
|
|
1427
|
+
* padding={tokens.spacing.lg}
|
|
1428
|
+
* cornerRadius={tokens.radius.md}
|
|
1429
|
+
* >
|
|
1430
|
+
* <Text text="Title" style={tokens.textStyles.title} />
|
|
1431
|
+
* <Text text="Body text" style={tokens.textStyles.DEFAULT} />
|
|
1432
|
+
* </View>
|
|
1433
|
+
* )
|
|
1434
|
+
* }
|
|
1435
|
+
* ```
|
|
1436
|
+
*/
|
|
2648
1437
|
function useThemeTokens() {
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
exports.
|
|
2711
|
-
exports.AlertDialog = TransformOriginView.AlertDialog;
|
|
2712
|
-
exports.Button = TransformOriginView.Button;
|
|
2713
|
-
exports.CharText = TransformOriginView.CharText;
|
|
2714
|
-
exports.CharTextInput = TransformOriginView.CharTextInput;
|
|
2715
|
-
exports.DEFAULT_EFFECT = TransformOriginView.DEFAULT_EFFECT;
|
|
2716
|
-
exports.DEFAULT_SPRING_CONFIG = TransformOriginView.DEFAULT_SPRING_CONFIG;
|
|
2717
|
-
exports.DOMInputElement = TransformOriginView.DOMInputElement;
|
|
2718
|
-
exports.DebugLogger = TransformOriginView.DebugLogger;
|
|
2719
|
-
exports.DevConfig = TransformOriginView.DevConfig;
|
|
2720
|
-
exports.DevPresets = TransformOriginView.DevPresets;
|
|
2721
|
-
exports.Dialog = TransformOriginView.Dialog;
|
|
2722
|
-
exports.Divider = TransformOriginView.Divider;
|
|
2723
|
-
exports.Dropdown = TransformOriginView.Dropdown;
|
|
2724
|
-
exports.EFFECT_REGISTRY = TransformOriginView.EFFECT_REGISTRY;
|
|
2725
|
-
exports.Graphics = TransformOriginView.Graphics;
|
|
2726
|
-
exports.HexColor = TransformOriginView.HexColor;
|
|
2727
|
-
exports.Icon = TransformOriginView.Icon;
|
|
2728
|
-
exports.Image = TransformOriginView.Image;
|
|
2729
|
-
exports.Joystick = TransformOriginView.Joystick;
|
|
2730
|
-
exports.KeyboardInputManager = TransformOriginView.KeyboardInputManager;
|
|
2731
|
-
exports.Modal = TransformOriginView.Modal;
|
|
2732
|
-
exports.NineSlice = TransformOriginView.NineSlice;
|
|
2733
|
-
exports.NineSliceButton = TransformOriginView.NineSliceButton;
|
|
2734
|
-
exports.Particles = TransformOriginView.Particles;
|
|
2735
|
-
exports.Portal = TransformOriginView.Portal;
|
|
2736
|
-
exports.RadioButton = TransformOriginView.RadioButton;
|
|
2737
|
-
exports.RadioGroup = TransformOriginView.RadioGroup;
|
|
2738
|
-
exports.RangeSlider = TransformOriginView.RangeSlider;
|
|
2739
|
-
exports.RefOriginView = TransformOriginView.RefOriginView;
|
|
2740
|
-
exports.SPRING_PRESETS = TransformOriginView.SPRING_PRESETS;
|
|
2741
|
-
exports.ScrollSlider = TransformOriginView.ScrollSlider;
|
|
2742
|
-
exports.ScrollView = TransformOriginView.ScrollView;
|
|
2743
|
-
exports.Sidebar = TransformOriginView.Sidebar;
|
|
2744
|
-
exports.Slider = TransformOriginView.Slider;
|
|
2745
|
-
exports.SpringPhysics = TransformOriginView.SpringPhysics;
|
|
2746
|
-
exports.Tab = TransformOriginView.Tab;
|
|
2747
|
-
exports.TabPanel = TransformOriginView.TabPanel;
|
|
2748
|
-
exports.Tabs = TransformOriginView.Tabs;
|
|
2749
|
-
exports.Text = TransformOriginView.Text;
|
|
2750
|
-
exports.Toggle = TransformOriginView.Toggle;
|
|
2751
|
-
exports.TransformOriginView = TransformOriginView.TransformOriginView;
|
|
2752
|
-
exports.View = TransformOriginView.View;
|
|
2753
|
-
exports.WrapText = TransformOriginView.WrapText;
|
|
2754
|
-
exports.alpha = TransformOriginView.alpha;
|
|
2755
|
-
exports.animatedSignal = TransformOriginView.animatedSignal;
|
|
2756
|
-
exports.applyDarkMode = TransformOriginView.applyDarkMode;
|
|
2757
|
-
exports.applyEffectByName = TransformOriginView.applyEffectByName;
|
|
2758
|
-
exports.applyLightMode = TransformOriginView.applyLightMode;
|
|
2759
|
-
exports.calculateSliderSize = TransformOriginView.calculateSliderSize;
|
|
2760
|
-
exports.createBounceEffect = TransformOriginView.createBounceEffect;
|
|
2761
|
-
exports.createBreatheEffect = TransformOriginView.createBreatheEffect;
|
|
2762
|
-
exports.createDefaultTheme = TransformOriginView.createDefaultTheme;
|
|
2763
|
-
exports.createElement = TransformOriginView.createElement;
|
|
2764
|
-
exports.createFadeEffect = TransformOriginView.createFadeEffect;
|
|
2765
|
-
exports.createFlashEffect = TransformOriginView.createFlashEffect;
|
|
2766
|
-
exports.createFlipInEffect = TransformOriginView.createFlipInEffect;
|
|
2767
|
-
exports.createFlipOutEffect = TransformOriginView.createFlipOutEffect;
|
|
2768
|
-
exports.createFloatEffect = TransformOriginView.createFloatEffect;
|
|
2769
|
-
exports.createIconComponent = TransformOriginView.createIconComponent;
|
|
2770
|
-
exports.createJelloEffect = TransformOriginView.createJelloEffect;
|
|
2771
|
-
exports.createNoneEffect = TransformOriginView.createNoneEffect;
|
|
2772
|
-
exports.createPressEffect = TransformOriginView.createPressEffect;
|
|
2773
|
-
exports.createPulseEffect = TransformOriginView.createPulseEffect;
|
|
2774
|
-
exports.createShakeEffect = TransformOriginView.createShakeEffect;
|
|
2775
|
-
exports.createSlideInEffect = TransformOriginView.createSlideInEffect;
|
|
2776
|
-
exports.createSlideOutEffect = TransformOriginView.createSlideOutEffect;
|
|
2777
|
-
exports.createSpinEffect = TransformOriginView.createSpinEffect;
|
|
2778
|
-
exports.createSwingEffect = TransformOriginView.createSwingEffect;
|
|
2779
|
-
exports.createTadaEffect = TransformOriginView.createTadaEffect;
|
|
2780
|
-
exports.createTextStyle = TransformOriginView.createTextStyle;
|
|
2781
|
-
exports.createTextStyleTokens = TransformOriginView.createTextStyleTokens;
|
|
2782
|
-
exports.createTheme = TransformOriginView.createTheme;
|
|
2783
|
-
exports.createWiggleEffect = TransformOriginView.createWiggleEffect;
|
|
2784
|
-
exports.createWobbleEffect = TransformOriginView.createWobbleEffect;
|
|
2785
|
-
exports.createZoomInEffect = TransformOriginView.createZoomInEffect;
|
|
2786
|
-
exports.createZoomOutEffect = TransformOriginView.createZoomOutEffect;
|
|
2787
|
-
exports.darken = TransformOriginView.darken;
|
|
2788
|
-
exports.darkenHex = TransformOriginView.darkenHex;
|
|
2789
|
-
exports.defaultRadiusTokens = TransformOriginView.defaultRadiusTokens;
|
|
2790
|
-
exports.defaultSizeTokens = TransformOriginView.defaultSizeTokens;
|
|
2791
|
-
exports.defaultSpacingTokens = TransformOriginView.defaultSpacingTokens;
|
|
2792
|
-
exports.defaultTextStyleTokens = TransformOriginView.defaultTextStyleTokens;
|
|
2793
|
-
exports.defaultTheme = TransformOriginView.defaultTheme;
|
|
2794
|
-
exports.disposeCtx = TransformOriginView.disposeCtx;
|
|
2795
|
-
exports.ensureContrast = TransformOriginView.ensureContrast;
|
|
2796
|
-
exports.forestGreenPreset = TransformOriginView.forestGreenPreset;
|
|
2797
|
-
exports.generateColorScale = TransformOriginView.generateColorScale;
|
|
2798
|
-
exports.getBackgroundGraphics = TransformOriginView.getBackgroundGraphics;
|
|
2799
|
-
exports.getContrastRatio = TransformOriginView.getContrastRatio;
|
|
2800
|
-
exports.getCurrent = TransformOriginView.getCurrent;
|
|
2801
|
-
exports.getLayoutProps = TransformOriginView.getLayoutProps;
|
|
2802
|
-
exports.getLayoutRect = TransformOriginView.getLayoutRect;
|
|
2803
|
-
exports.getLayoutSize = TransformOriginView.getLayoutSize;
|
|
2804
|
-
exports.getMountStats = TransformOriginView.getMountStats;
|
|
2805
|
-
exports.getPreset = TransformOriginView.getPreset;
|
|
2806
|
-
exports.getPresetWithMode = TransformOriginView.getPresetWithMode;
|
|
2807
|
-
exports.getRenderContext = TransformOriginView.getRenderContext;
|
|
2808
|
-
exports.getThemedProps = TransformOriginView.getThemedProps;
|
|
2809
|
-
exports.getWorldLayoutRect = TransformOriginView.getWorldLayoutRect;
|
|
2810
|
-
exports.hex = TransformOriginView.hex;
|
|
2811
|
-
exports.hexToNumber = TransformOriginView.hexToNumber;
|
|
2812
|
-
exports.host = TransformOriginView.host;
|
|
2813
|
-
exports.isAnimatedSignal = TransformOriginView.isAnimatedSignal;
|
|
2814
|
-
exports.lighten = TransformOriginView.lighten;
|
|
2815
|
-
exports.lightenHex = TransformOriginView.lightenHex;
|
|
2816
|
-
exports.mergeThemes = TransformOriginView.mergeThemes;
|
|
2817
|
-
exports.midnightPreset = TransformOriginView.midnightPreset;
|
|
2818
|
-
exports.mount = TransformOriginView.mount;
|
|
2819
|
-
exports.mountComponent = TransformOriginView.mountJSX;
|
|
2820
|
-
exports.mountJSX = TransformOriginView.mountJSX;
|
|
2821
|
-
exports.nodeRegistry = TransformOriginView.nodeRegistry;
|
|
2822
|
-
exports.normalizeCornerRadius = TransformOriginView.normalizeCornerRadius;
|
|
2823
|
-
exports.normalizeEdgeInsets = TransformOriginView.normalizeEdgeInsets;
|
|
2824
|
-
exports.normalizeGap = TransformOriginView.normalizeGap;
|
|
2825
|
-
exports.normalizeVNodeLike = TransformOriginView.normalizeVNodeLike;
|
|
2826
|
-
exports.numberToHex = TransformOriginView.numberToHex;
|
|
2827
|
-
exports.numberToRgb = TransformOriginView.numberToRgb;
|
|
2828
|
-
exports.oceanBluePreset = TransformOriginView.oceanBluePreset;
|
|
2829
|
-
exports.patchVNode = TransformOriginView.patchVNode;
|
|
2830
|
-
exports.portalRegistry = TransformOriginView.portalRegistry;
|
|
2831
|
-
exports.presets = TransformOriginView.presets;
|
|
2832
|
-
exports.register = TransformOriginView.register;
|
|
2833
|
-
exports.releaseAllSVGTextures = TransformOriginView.releaseAllSVGTextures;
|
|
2834
|
-
exports.releaseSVGTexture = TransformOriginView.releaseSVGTexture;
|
|
2835
|
-
exports.releaseSVGTextures = TransformOriginView.releaseSVGTextures;
|
|
2836
|
-
exports.remountAll = TransformOriginView.remountAll;
|
|
2837
|
-
exports.resolveEffect = TransformOriginView.resolveEffect;
|
|
2838
|
-
exports.rgbToHsl = TransformOriginView.rgbToHsl;
|
|
2839
|
-
exports.rgbToNumber = TransformOriginView.rgbToNumber;
|
|
2840
|
-
exports.shallowEqual = TransformOriginView.shallowEqual;
|
|
2841
|
-
exports.shouldComponentUpdate = TransformOriginView.shouldComponentUpdate;
|
|
2842
|
-
exports.svgToTexture = TransformOriginView.svgToTexture;
|
|
2843
|
-
exports.themeRegistry = TransformOriginView.themeRegistry;
|
|
2844
|
-
exports.unmount = TransformOriginView.unmount;
|
|
2845
|
-
exports.unmountJSX = TransformOriginView.unmountJSX;
|
|
2846
|
-
exports.unwrapSignal = TransformOriginView.unwrapSignal;
|
|
2847
|
-
exports.useBackgroundGraphics = TransformOriginView.useBackgroundGraphics;
|
|
2848
|
-
exports.useCallback = TransformOriginView.useCallback;
|
|
2849
|
-
exports.useEffect = TransformOriginView.useEffect;
|
|
2850
|
-
exports.useForceRedraw = TransformOriginView.useForceRedraw;
|
|
2851
|
-
exports.useGameObjectEffect = TransformOriginView.useGameObjectEffect;
|
|
2852
|
-
exports.useIconPreload = TransformOriginView.useIconPreload;
|
|
2853
|
-
exports.useLayoutEffect = TransformOriginView.useLayoutEffect;
|
|
2854
|
-
exports.useLayoutRect = TransformOriginView.useLayoutRect;
|
|
2855
|
-
exports.useLayoutSize = TransformOriginView.useLayoutSize;
|
|
2856
|
-
exports.useMemo = TransformOriginView.useMemo;
|
|
2857
|
-
exports.useRedraw = TransformOriginView.useRedraw;
|
|
2858
|
-
exports.useRef = TransformOriginView.useRef;
|
|
2859
|
-
exports.useSVGTexture = TransformOriginView.useSVGTexture;
|
|
2860
|
-
exports.useSVGTextures = TransformOriginView.useSVGTextures;
|
|
2861
|
-
exports.useScene = TransformOriginView.useScene;
|
|
2862
|
-
exports.useSpring = TransformOriginView.useSpring;
|
|
2863
|
-
exports.useSprings = TransformOriginView.useSprings;
|
|
2864
|
-
exports.useState = TransformOriginView.useState;
|
|
2865
|
-
exports.useTheme = TransformOriginView.useTheme;
|
|
2866
|
-
exports.useViewportSize = TransformOriginView.useViewportSize;
|
|
2867
|
-
exports.useWorldLayoutRect = TransformOriginView.useWorldLayoutRect;
|
|
2868
|
-
exports.viewportRegistry = TransformOriginView.viewportRegistry;
|
|
2869
|
-
exports.withHooks = TransformOriginView.withHooks;
|
|
2870
|
-
exports.Fragment = jsxRuntime.Fragment;
|
|
2871
|
-
exports.jsx = jsxRuntime.jsx;
|
|
2872
|
-
exports.jsxs = jsxRuntime.jsxs;
|
|
2873
|
-
Object.defineProperty(exports, "computed", {
|
|
2874
|
-
enumerable: true,
|
|
2875
|
-
get: () => signalsCore.computed
|
|
2876
|
-
});
|
|
1438
|
+
const localTheme = require_custom.useTheme();
|
|
1439
|
+
const getInitialTokens = () => {
|
|
1440
|
+
if (localTheme?.__colorPreset) {
|
|
1441
|
+
const preset = require_custom.getPresetWithMode(localTheme.__colorPreset.name, localTheme.__colorPreset.mode ?? "light");
|
|
1442
|
+
return {
|
|
1443
|
+
colors: preset.colors,
|
|
1444
|
+
textStyles: require_custom.createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
|
|
1445
|
+
spacing: require_custom.defaultSpacingTokens,
|
|
1446
|
+
sizes: require_custom.defaultSizeTokens,
|
|
1447
|
+
radius: require_custom.defaultRadiusTokens
|
|
1448
|
+
};
|
|
1449
|
+
}
|
|
1450
|
+
const colors = require_custom.themeRegistry.getColorTokens();
|
|
1451
|
+
if (!colors) return void 0;
|
|
1452
|
+
return {
|
|
1453
|
+
colors,
|
|
1454
|
+
textStyles: require_custom.createTextStyleTokens(colors.text.DEFAULT.toString()),
|
|
1455
|
+
spacing: require_custom.defaultSpacingTokens,
|
|
1456
|
+
sizes: require_custom.defaultSizeTokens,
|
|
1457
|
+
radius: require_custom.defaultRadiusTokens
|
|
1458
|
+
};
|
|
1459
|
+
};
|
|
1460
|
+
const [tokens, setTokens] = require_custom.useState(getInitialTokens());
|
|
1461
|
+
const [, forceUpdate] = require_custom.useState(0);
|
|
1462
|
+
require_custom.useEffect(() => {
|
|
1463
|
+
return require_custom.themeRegistry.subscribe(() => {
|
|
1464
|
+
if (localTheme?.__colorPreset) {
|
|
1465
|
+
const currentMode = require_custom.themeRegistry.getColorMode();
|
|
1466
|
+
const preset = require_custom.getPresetWithMode(localTheme.__colorPreset.name, currentMode);
|
|
1467
|
+
setTokens({
|
|
1468
|
+
colors: preset.colors,
|
|
1469
|
+
textStyles: require_custom.createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
|
|
1470
|
+
spacing: require_custom.defaultSpacingTokens,
|
|
1471
|
+
sizes: require_custom.defaultSizeTokens,
|
|
1472
|
+
radius: require_custom.defaultRadiusTokens
|
|
1473
|
+
});
|
|
1474
|
+
} else {
|
|
1475
|
+
const colors = require_custom.themeRegistry.getColorTokens();
|
|
1476
|
+
if (colors) setTokens({
|
|
1477
|
+
colors,
|
|
1478
|
+
textStyles: require_custom.createTextStyleTokens(colors.text.DEFAULT.toString()),
|
|
1479
|
+
spacing: require_custom.defaultSpacingTokens,
|
|
1480
|
+
sizes: require_custom.defaultSizeTokens,
|
|
1481
|
+
radius: require_custom.defaultRadiusTokens
|
|
1482
|
+
});
|
|
1483
|
+
}
|
|
1484
|
+
forceUpdate((n) => n + 1);
|
|
1485
|
+
});
|
|
1486
|
+
}, [localTheme]);
|
|
1487
|
+
return tokens;
|
|
1488
|
+
}
|
|
1489
|
+
//#endregion
|
|
1490
|
+
//#region src/index.ts
|
|
1491
|
+
/**
|
|
1492
|
+
* PhaserJSX UI Library
|
|
1493
|
+
* Provides JSX + hooks + VDOM for Phaser 3 game development
|
|
1494
|
+
*/
|
|
1495
|
+
require_custom.registerBuiltins();
|
|
1496
|
+
//#endregion
|
|
1497
|
+
exports.Accordion = require_custom.Accordion;
|
|
1498
|
+
exports.AlertDialog = require_custom.AlertDialog;
|
|
1499
|
+
exports.Button = require_custom.Button;
|
|
2877
1500
|
exports.CAMERA_FX_REGISTRY = CAMERA_FX_REGISTRY;
|
|
1501
|
+
exports.CharText = require_custom.CharText;
|
|
1502
|
+
exports.CharTextInput = require_custom.CharTextInput;
|
|
2878
1503
|
exports.DEFAULT_BACKGROUND = DEFAULT_BACKGROUND;
|
|
2879
1504
|
exports.DEFAULT_CAMERA_FX = DEFAULT_CAMERA_FX;
|
|
1505
|
+
exports.DEFAULT_EFFECT = require_custom.DEFAULT_EFFECT;
|
|
2880
1506
|
exports.DEFAULT_FX = DEFAULT_FX;
|
|
1507
|
+
exports.DEFAULT_SPRING_CONFIG = require_custom.DEFAULT_SPRING_CONFIG;
|
|
1508
|
+
exports.DOMInputElement = require_custom.DOMInputElement;
|
|
1509
|
+
exports.DebugLogger = require_custom.DebugLogger;
|
|
1510
|
+
exports.DevConfig = require_custom.DevConfig;
|
|
1511
|
+
exports.DevPresets = require_custom.DevPresets;
|
|
1512
|
+
exports.Dialog = require_custom.Dialog;
|
|
1513
|
+
exports.Divider = require_custom.Divider;
|
|
1514
|
+
exports.Dropdown = require_custom.Dropdown;
|
|
1515
|
+
exports.EFFECT_REGISTRY = require_custom.EFFECT_REGISTRY;
|
|
2881
1516
|
exports.FX_REGISTRY = FX_REGISTRY;
|
|
2882
|
-
exports.
|
|
1517
|
+
exports.Fragment = require_jsx_runtime.Fragment;
|
|
1518
|
+
exports.Graphics = require_custom.Graphics;
|
|
1519
|
+
exports.HexColor = require_custom.HexColor;
|
|
1520
|
+
exports.Icon = require_custom.Icon;
|
|
1521
|
+
exports.Image = require_custom.Image;
|
|
1522
|
+
exports.Joystick = require_custom.Joystick;
|
|
1523
|
+
exports.KeyboardInputManager = require_custom.KeyboardInputManager;
|
|
1524
|
+
exports.Modal = require_custom.Modal;
|
|
1525
|
+
exports.NineSlice = require_custom.NineSlice;
|
|
1526
|
+
exports.NineSliceButton = require_custom.NineSliceButton;
|
|
1527
|
+
exports.PARTICLE_PRESET_REGISTRY = require_custom.PARTICLE_PRESET_REGISTRY;
|
|
1528
|
+
exports.Particles = require_custom.Particles;
|
|
2883
1529
|
exports.PhaserJSXPlugin = PhaserJSXPlugin;
|
|
2884
|
-
exports.
|
|
2885
|
-
exports.
|
|
1530
|
+
exports.Portal = require_custom.Portal;
|
|
1531
|
+
exports.RadioButton = require_custom.RadioButton;
|
|
1532
|
+
exports.RadioGroup = require_custom.RadioGroup;
|
|
1533
|
+
exports.RangeSlider = require_custom.RangeSlider;
|
|
1534
|
+
exports.RefOriginView = require_custom.RefOriginView;
|
|
1535
|
+
exports.SPRING_PRESETS = require_custom.SPRING_PRESETS;
|
|
1536
|
+
exports.ScrollSlider = require_custom.ScrollSlider;
|
|
1537
|
+
exports.ScrollView = require_custom.ScrollView;
|
|
1538
|
+
exports.Sidebar = require_custom.Sidebar;
|
|
1539
|
+
exports.Slider = require_custom.Slider;
|
|
1540
|
+
exports.SpringPhysics = require_custom.SpringPhysics;
|
|
1541
|
+
exports.Sprite = require_custom.Sprite;
|
|
1542
|
+
exports.Tab = require_custom.Tab;
|
|
1543
|
+
exports.TabPanel = require_custom.TabPanel;
|
|
1544
|
+
exports.Tabs = require_custom.Tabs;
|
|
1545
|
+
exports.Text = require_custom.Text;
|
|
1546
|
+
exports.TileSprite = require_custom.TileSprite;
|
|
1547
|
+
exports.Toggle = require_custom.Toggle;
|
|
1548
|
+
exports.TransformOriginView = require_custom.TransformOriginView;
|
|
1549
|
+
exports.View = require_custom.View;
|
|
1550
|
+
exports.WrapText = require_custom.WrapText;
|
|
2886
1551
|
exports.addSceneBackground = addSceneBackground;
|
|
1552
|
+
exports.alpha = require_custom.alpha;
|
|
1553
|
+
exports.animatedSignal = require_custom.animatedSignal;
|
|
2887
1554
|
exports.applyCameraFXByName = applyCameraFXByName;
|
|
1555
|
+
exports.applyDarkMode = require_custom.applyDarkMode;
|
|
1556
|
+
exports.applyEffectByName = require_custom.applyEffectByName;
|
|
2888
1557
|
exports.applyFXByName = applyFXByName;
|
|
2889
|
-
exports.
|
|
2890
|
-
exports.
|
|
2891
|
-
exports.
|
|
1558
|
+
exports.applyLightMode = require_custom.applyLightMode;
|
|
1559
|
+
exports.applyStencilClip = require_clip_index.applyStencilClip;
|
|
1560
|
+
exports.buildDeathZonesFromLayout = require_custom.buildDeathZonesFromLayout;
|
|
1561
|
+
exports.buildEmitZone = require_custom.buildEmitZone;
|
|
1562
|
+
exports.buildEmitZoneFromLayout = require_custom.buildEmitZoneFromLayout;
|
|
1563
|
+
exports.calculateSliderSize = require_custom.calculateSliderSize;
|
|
1564
|
+
exports.clearStencilClip = require_clip_index.clearStencilClip;
|
|
2892
1565
|
exports.colorsToTheme = colorsToTheme;
|
|
1566
|
+
exports.computed = _preact_signals_core.computed;
|
|
2893
1567
|
exports.createBlurFX = createBlurFX;
|
|
1568
|
+
exports.createBounceEffect = require_custom.createBounceEffect;
|
|
1569
|
+
exports.createBreatheEffect = require_custom.createBreatheEffect;
|
|
2894
1570
|
exports.createCameraFadeInFX = createCameraFadeInFX;
|
|
2895
1571
|
exports.createCameraFadeOutFX = createCameraFadeOutFX;
|
|
2896
1572
|
exports.createCameraFlashFX = createCameraFlashFX;
|
|
2897
1573
|
exports.createCameraShakeFX = createCameraShakeFX;
|
|
2898
1574
|
exports.createCameraZoomFX = createCameraZoomFX;
|
|
2899
1575
|
exports.createColorMatrixFX = createColorMatrixFX;
|
|
1576
|
+
exports.createDefaultTheme = require_custom.createDefaultTheme;
|
|
1577
|
+
exports.createElement = require_custom.createElement;
|
|
1578
|
+
exports.createFadeEffect = require_custom.createFadeEffect;
|
|
1579
|
+
exports.createFlashEffect = require_custom.createFlashEffect;
|
|
1580
|
+
exports.createFlipInEffect = require_custom.createFlipInEffect;
|
|
1581
|
+
exports.createFlipOutEffect = require_custom.createFlipOutEffect;
|
|
1582
|
+
exports.createFloatEffect = require_custom.createFloatEffect;
|
|
2900
1583
|
exports.createGlowFX = createGlowFX;
|
|
1584
|
+
exports.createIconComponent = require_custom.createIconComponent;
|
|
1585
|
+
exports.createJelloEffect = require_custom.createJelloEffect;
|
|
1586
|
+
exports.createNoneEffect = require_custom.createNoneEffect;
|
|
2901
1587
|
exports.createPhaserJSXPlugin = createPhaserJSXPlugin;
|
|
2902
1588
|
exports.createPixelateFX = createPixelateFX;
|
|
1589
|
+
exports.createPressEffect = require_custom.createPressEffect;
|
|
1590
|
+
exports.createPulseEffect = require_custom.createPulseEffect;
|
|
2903
1591
|
exports.createShadowFX = createShadowFX;
|
|
1592
|
+
exports.createShakeEffect = require_custom.createShakeEffect;
|
|
1593
|
+
exports.createSlideInEffect = require_custom.createSlideInEffect;
|
|
1594
|
+
exports.createSlideOutEffect = require_custom.createSlideOutEffect;
|
|
1595
|
+
exports.createSpinEffect = require_custom.createSpinEffect;
|
|
1596
|
+
exports.createSwingEffect = require_custom.createSwingEffect;
|
|
1597
|
+
exports.createTadaEffect = require_custom.createTadaEffect;
|
|
1598
|
+
exports.createTextStyle = require_custom.createTextStyle;
|
|
1599
|
+
exports.createTextStyleTokens = require_custom.createTextStyleTokens;
|
|
1600
|
+
exports.createTheme = require_custom.createTheme;
|
|
2904
1601
|
exports.createVignetteFX = createVignetteFX;
|
|
1602
|
+
exports.createWiggleEffect = require_custom.createWiggleEffect;
|
|
1603
|
+
exports.createWobbleEffect = require_custom.createWobbleEffect;
|
|
1604
|
+
exports.createZoomInEffect = require_custom.createZoomInEffect;
|
|
1605
|
+
exports.createZoomOutEffect = require_custom.createZoomOutEffect;
|
|
1606
|
+
exports.darken = require_custom.darken;
|
|
1607
|
+
exports.darkenHex = require_custom.darkenHex;
|
|
1608
|
+
exports.defaultRadiusTokens = require_custom.defaultRadiusTokens;
|
|
1609
|
+
exports.defaultSizeTokens = require_custom.defaultSizeTokens;
|
|
1610
|
+
exports.defaultSpacingTokens = require_custom.defaultSpacingTokens;
|
|
1611
|
+
exports.defaultTextStyleTokens = require_custom.defaultTextStyleTokens;
|
|
1612
|
+
exports.defaultTheme = require_custom.defaultTheme;
|
|
1613
|
+
exports.disposeCtx = require_custom.disposeCtx;
|
|
1614
|
+
exports.ensureContrast = require_custom.ensureContrast;
|
|
1615
|
+
exports.forestGreenPreset = require_custom.forestGreenPreset;
|
|
1616
|
+
exports.generateColorScale = require_custom.generateColorScale;
|
|
2905
1617
|
exports.getAvailablePresets = getAvailablePresets;
|
|
2906
1618
|
exports.getBackgroundColor = getBackgroundColor;
|
|
1619
|
+
exports.getBackgroundGraphics = require_custom.getBackgroundGraphics;
|
|
2907
1620
|
exports.getBorderColor = getBorderColor;
|
|
1621
|
+
exports.getContrastRatio = require_custom.getContrastRatio;
|
|
1622
|
+
exports.getCurrent = require_custom.getCurrent;
|
|
2908
1623
|
exports.getCurrentPreset = getCurrentPreset;
|
|
1624
|
+
exports.getLayoutProps = require_custom.getLayoutProps;
|
|
1625
|
+
exports.getLayoutRect = require_custom.getLayoutRect;
|
|
1626
|
+
exports.getLayoutSize = require_custom.getLayoutSize;
|
|
1627
|
+
exports.getMountStats = require_custom.getMountStats;
|
|
1628
|
+
exports.getPreset = require_custom.getPreset;
|
|
1629
|
+
exports.getPresetWithMode = require_custom.getPresetWithMode;
|
|
1630
|
+
exports.getRenderContext = require_custom.getRenderContext;
|
|
1631
|
+
exports.getStencilClipHandle = require_clip_index.getStencilClipHandle;
|
|
2909
1632
|
exports.getSurfaceColor = getSurfaceColor;
|
|
2910
1633
|
exports.getTextColor = getTextColor;
|
|
2911
|
-
exports.
|
|
2912
|
-
exports.
|
|
2913
|
-
exports.
|
|
2914
|
-
exports.
|
|
1634
|
+
exports.getThemedProps = require_custom.getThemedProps;
|
|
1635
|
+
exports.getWorldLayoutRect = require_custom.getWorldLayoutRect;
|
|
1636
|
+
exports.graphicsCreator = require_custom.graphicsCreator;
|
|
1637
|
+
exports.graphicsPatcher = require_custom.graphicsPatcher;
|
|
1638
|
+
exports.hex = require_custom.hex;
|
|
1639
|
+
exports.hexToNumber = require_custom.hexToNumber;
|
|
1640
|
+
exports.host = require_custom.host;
|
|
1641
|
+
exports.imageCreator = require_custom.imageCreator;
|
|
1642
|
+
exports.imagePatcher = require_custom.imagePatcher;
|
|
1643
|
+
exports.installStencilClipExtension = require_clip_index.installStencilClipExtension;
|
|
1644
|
+
exports.isAnimatedSignal = require_custom.isAnimatedSignal;
|
|
1645
|
+
exports.isBitmapStencilClipSource = require_clip_index.isBitmapStencilClipSource;
|
|
1646
|
+
exports.jsx = require_jsx_runtime.jsx;
|
|
1647
|
+
exports.jsxs = require_jsx_runtime.jsxs;
|
|
1648
|
+
exports.lighten = require_custom.lighten;
|
|
1649
|
+
exports.lightenHex = require_custom.lightenHex;
|
|
2915
1650
|
exports.memo = memo;
|
|
2916
|
-
exports.
|
|
2917
|
-
exports.
|
|
1651
|
+
exports.mergeThemes = require_custom.mergeThemes;
|
|
1652
|
+
exports.midnightPreset = require_custom.midnightPreset;
|
|
1653
|
+
exports.mount = require_custom.mount;
|
|
1654
|
+
exports.mountComponent = require_custom.mountJSX;
|
|
1655
|
+
exports.mountJSX = require_custom.mountJSX;
|
|
1656
|
+
exports.nineSliceCreator = require_custom.nineSliceCreator;
|
|
1657
|
+
exports.nineSlicePatcher = require_custom.nineSlicePatcher;
|
|
2918
1658
|
exports.noMemo = noMemo;
|
|
2919
|
-
exports.
|
|
2920
|
-
exports.
|
|
2921
|
-
exports.
|
|
1659
|
+
exports.nodeRegistry = require_custom.nodeRegistry;
|
|
1660
|
+
exports.normalizeCornerRadius = require_custom.normalizeCornerRadius;
|
|
1661
|
+
exports.normalizeEdgeInsets = require_custom.normalizeEdgeInsets;
|
|
1662
|
+
exports.normalizeGap = require_custom.normalizeGap;
|
|
1663
|
+
exports.normalizeVNodeLike = require_custom.normalizeVNodeLike;
|
|
1664
|
+
exports.numberToHex = require_custom.numberToHex;
|
|
1665
|
+
exports.numberToRgb = require_custom.numberToRgb;
|
|
1666
|
+
exports.oceanBluePreset = require_custom.oceanBluePreset;
|
|
1667
|
+
exports.particlesCreator = require_custom.particlesCreator;
|
|
1668
|
+
exports.particlesPatcher = require_custom.particlesPatcher;
|
|
1669
|
+
exports.patchVNode = require_custom.patchVNode;
|
|
1670
|
+
exports.portalRegistry = require_custom.portalRegistry;
|
|
1671
|
+
exports.presets = require_custom.presets;
|
|
1672
|
+
exports.register = require_custom.register;
|
|
1673
|
+
exports.registerBuiltins = require_custom.registerBuiltins;
|
|
1674
|
+
exports.releaseAllSVGTextures = require_custom.releaseAllSVGTextures;
|
|
1675
|
+
exports.releaseSVGTexture = require_custom.releaseSVGTexture;
|
|
1676
|
+
exports.releaseSVGTextures = require_custom.releaseSVGTextures;
|
|
1677
|
+
exports.remountAll = require_custom.remountAll;
|
|
2922
1678
|
exports.resolveCameraFX = resolveCameraFX;
|
|
1679
|
+
exports.resolveEffect = require_custom.resolveEffect;
|
|
2923
1680
|
exports.resolveFX = resolveFX;
|
|
2924
|
-
exports.resolveParticlePreset = resolveParticlePreset;
|
|
1681
|
+
exports.resolveParticlePreset = require_custom.resolveParticlePreset;
|
|
1682
|
+
exports.rgbToHsl = require_custom.rgbToHsl;
|
|
1683
|
+
exports.rgbToNumber = require_custom.rgbToNumber;
|
|
2925
1684
|
exports.setColorMode = setColorMode;
|
|
2926
1685
|
exports.setColorPreset = setColorPreset;
|
|
2927
|
-
exports.
|
|
2928
|
-
exports.
|
|
2929
|
-
exports.
|
|
2930
|
-
exports.
|
|
2931
|
-
exports.
|
|
2932
|
-
exports.
|
|
1686
|
+
exports.shallowEqual = require_custom.shallowEqual;
|
|
1687
|
+
exports.shouldComponentUpdate = require_custom.shouldComponentUpdate;
|
|
1688
|
+
exports.spriteCreator = require_custom.spriteCreator;
|
|
1689
|
+
exports.spritePatcher = require_custom.spritePatcher;
|
|
1690
|
+
exports.svgToTexture = require_custom.svgToTexture;
|
|
1691
|
+
exports.textCreator = require_custom.textCreator;
|
|
1692
|
+
exports.textPatcher = require_custom.textPatcher;
|
|
1693
|
+
exports.themeRegistry = require_custom.themeRegistry;
|
|
1694
|
+
exports.tileSpriteCreator = require_custom.tileSpriteCreator;
|
|
1695
|
+
exports.tileSpritePatcher = require_custom.tileSpritePatcher;
|
|
1696
|
+
exports.uninstallStencilClipExtension = require_clip_index.uninstallStencilClipExtension;
|
|
1697
|
+
exports.unmount = require_custom.unmount;
|
|
1698
|
+
exports.unmountJSX = require_custom.unmountJSX;
|
|
1699
|
+
exports.unwrapSignal = require_custom.unwrapSignal;
|
|
1700
|
+
exports.useBackgroundGraphics = require_custom.useBackgroundGraphics;
|
|
2933
1701
|
exports.useBlur = useBlur;
|
|
1702
|
+
exports.useCallback = require_custom.useCallback;
|
|
2934
1703
|
exports.useCameraFX = useCameraFX;
|
|
2935
1704
|
exports.useCameraFade = useCameraFade;
|
|
2936
1705
|
exports.useCameraFlash = useCameraFlash;
|
|
2937
1706
|
exports.useCameraZoom = useCameraZoom;
|
|
2938
1707
|
exports.useColorMode = useColorMode;
|
|
2939
1708
|
exports.useColors = useColors;
|
|
1709
|
+
exports.useEffect = require_custom.useEffect;
|
|
2940
1710
|
exports.useFX = useFX;
|
|
1711
|
+
exports.useForceRedraw = require_custom.useForceRedraw;
|
|
1712
|
+
exports.useGameObjectEffect = require_custom.useGameObjectEffect;
|
|
2941
1713
|
exports.useGlow = useGlow;
|
|
1714
|
+
exports.useIconPreload = require_custom.useIconPreload;
|
|
1715
|
+
exports.useLayoutEffect = require_custom.useLayoutEffect;
|
|
1716
|
+
exports.useLayoutRect = require_custom.useLayoutRect;
|
|
1717
|
+
exports.useLayoutSize = require_custom.useLayoutSize;
|
|
1718
|
+
exports.useMemo = require_custom.useMemo;
|
|
2942
1719
|
exports.useParticles = useParticles;
|
|
1720
|
+
exports.useRedraw = require_custom.useRedraw;
|
|
1721
|
+
exports.useRef = require_custom.useRef;
|
|
1722
|
+
exports.useSVGTexture = require_custom.useSVGTexture;
|
|
1723
|
+
exports.useSVGTextures = require_custom.useSVGTextures;
|
|
1724
|
+
exports.useScene = require_custom.useScene;
|
|
2943
1725
|
exports.useScreenShake = useScreenShake;
|
|
2944
1726
|
exports.useShadow = useShadow;
|
|
1727
|
+
exports.useSpring = require_custom.useSpring;
|
|
1728
|
+
exports.useSprings = require_custom.useSprings;
|
|
1729
|
+
exports.useState = require_custom.useState;
|
|
1730
|
+
exports.useTheme = require_custom.useTheme;
|
|
2945
1731
|
exports.useThemeSubscription = useThemeSubscription;
|
|
2946
1732
|
exports.useThemeTokens = useThemeTokens;
|
|
2947
|
-
exports.
|
|
2948
|
-
exports.
|
|
2949
|
-
|
|
1733
|
+
exports.useViewportSize = require_custom.useViewportSize;
|
|
1734
|
+
exports.useWorldLayoutRect = require_custom.useWorldLayoutRect;
|
|
1735
|
+
exports.viewCreator = require_custom.viewCreator;
|
|
1736
|
+
exports.viewPatcher = require_custom.viewPatcher;
|
|
1737
|
+
exports.viewportRegistry = require_custom.viewportRegistry;
|
|
1738
|
+
exports.withHooks = require_custom.withHooks;
|
|
1739
|
+
|
|
1740
|
+
//# sourceMappingURL=index.cjs.map
|