@canvasengine/presets 2.0.0-beta.35 → 2.0.0-beta.36
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/dist/Loading.d.ts +94 -0
- package/dist/Loading.d.ts.map +1 -0
- package/dist/NightAmbiant.d.ts.map +1 -1
- package/dist/Tilemap/TileLayer.d.ts +4 -0
- package/dist/Tilemap/TileLayer.d.ts.map +1 -1
- package/dist/Weathers/fog.d.ts +3 -0
- package/dist/Weathers/fog.d.ts.map +1 -0
- package/dist/Weathers/index.d.ts +1 -52
- package/dist/Weathers/index.d.ts.map +1 -1
- package/dist/Weathers/rain.d.ts +20 -0
- package/dist/Weathers/rain.d.ts.map +1 -0
- package/dist/Weathers/snow.d.ts +12 -0
- package/dist/Weathers/snow.d.ts.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.global.js +408 -103
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +2359 -1910
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Loading Component Props
|
|
3
|
+
*/
|
|
4
|
+
export interface LoadingProps {
|
|
5
|
+
/**
|
|
6
|
+
* Size of the loading spinner (radius in pixels)
|
|
7
|
+
* @default 30
|
|
8
|
+
*/
|
|
9
|
+
size?: number;
|
|
10
|
+
/**
|
|
11
|
+
* Color of the spinner segments
|
|
12
|
+
* @default "#3498db"
|
|
13
|
+
*/
|
|
14
|
+
color?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Background color of the spinner (optional)
|
|
17
|
+
*/
|
|
18
|
+
backgroundColor?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Rotation speed in degrees per second
|
|
21
|
+
* @default 180
|
|
22
|
+
*/
|
|
23
|
+
speed?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Number of segments in the spinner
|
|
26
|
+
* @default 8
|
|
27
|
+
*/
|
|
28
|
+
segments?: number;
|
|
29
|
+
/**
|
|
30
|
+
* Width of each segment
|
|
31
|
+
* @default 3
|
|
32
|
+
*/
|
|
33
|
+
segmentWidth?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Alpha value for inactive segments (0-1)
|
|
36
|
+
* @default 0.15
|
|
37
|
+
*/
|
|
38
|
+
inactiveAlpha?: number;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Loading Component
|
|
42
|
+
*
|
|
43
|
+
* Creates an animated circular loading spinner with customizable appearance and rotation speed.
|
|
44
|
+
* The spinner consists of multiple segments that rotate continuously, creating a smooth loading indicator.
|
|
45
|
+
*
|
|
46
|
+
* ## Design
|
|
47
|
+
*
|
|
48
|
+
* The component uses a Graphics element to draw multiple segments arranged in a circle:
|
|
49
|
+
* - **Segments**: Multiple radial segments that create a circular pattern
|
|
50
|
+
* - **Rotation animation**: Continuous rotation using the tick system for smooth animation
|
|
51
|
+
* - **Alpha variation**: Active segments are fully opaque while inactive segments have reduced opacity
|
|
52
|
+
* - **Customizable**: Size, color, speed, and number of segments can be adjusted
|
|
53
|
+
*
|
|
54
|
+
* @param {LoadingProps} opts - Configuration options for the loading spinner
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```tsx
|
|
58
|
+
* // Basic usage with default settings
|
|
59
|
+
* <Loading />
|
|
60
|
+
*
|
|
61
|
+
* // Custom size and color
|
|
62
|
+
* <Loading
|
|
63
|
+
* size={50}
|
|
64
|
+
* color="#e74c3c"
|
|
65
|
+
* />
|
|
66
|
+
*
|
|
67
|
+
* // Fast spinning loader
|
|
68
|
+
* <Loading
|
|
69
|
+
* speed={360}
|
|
70
|
+
* segments={12}
|
|
71
|
+
* />
|
|
72
|
+
*
|
|
73
|
+
* // Large loader with background
|
|
74
|
+
* <Loading
|
|
75
|
+
* size={80}
|
|
76
|
+
* color="#2ecc71"
|
|
77
|
+
* backgroundColor="#ecf0f1"
|
|
78
|
+
* segmentWidth={5}
|
|
79
|
+
* />
|
|
80
|
+
*
|
|
81
|
+
* // Using signals for dynamic control
|
|
82
|
+
* const loaderSize = signal(30);
|
|
83
|
+
* const loaderSpeed = signal(180);
|
|
84
|
+
*
|
|
85
|
+
* <Loading
|
|
86
|
+
* size={loaderSize}
|
|
87
|
+
* speed={loaderSpeed}
|
|
88
|
+
* />
|
|
89
|
+
* ```
|
|
90
|
+
*
|
|
91
|
+
* @returns {JSX.Element} A container with an animated loading spinner
|
|
92
|
+
*/
|
|
93
|
+
export declare function Loading(opts?: LoadingProps): import('../packages/core/src/index.ts').Element<import('../packages/core/src/index.ts').ComponentInstance> | Promise<import('../packages/core/src/index.ts').Element<import('../packages/core/src/index.ts').ComponentInstance>>;
|
|
94
|
+
//# sourceMappingURL=Loading.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../src/Loading.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,OAAO,CAAC,IAAI,GAAE,YAAiB,gKAkH9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NightAmbiant.d.ts","sourceRoot":"","sources":["../src/NightAmbiant.ts"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,IAAI,KAAA,4EA8C7B;AAED,wBAAgB,YAAY,CAAC,KAAK,KAAA,
|
|
1
|
+
{"version":3,"file":"NightAmbiant.d.ts","sourceRoot":"","sources":["../src/NightAmbiant.ts"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,IAAI,KAAA,4EA8C7B;AAED,wBAAgB,YAAY,CAAC,KAAK,KAAA,gKA6DjC"}
|
|
@@ -22,6 +22,10 @@ declare const CanvasTileLayer_base: {
|
|
|
22
22
|
subjectInit: import('rxjs').BehaviorSubject<any>;
|
|
23
23
|
disableLayout: boolean;
|
|
24
24
|
"__#1@#registeredEvents": Map<string, Function>;
|
|
25
|
+
"__#1@#computedLayoutBox": {
|
|
26
|
+
width?: number;
|
|
27
|
+
height?: number;
|
|
28
|
+
} | null;
|
|
25
29
|
readonly deltaRatio: any;
|
|
26
30
|
readonly parentIsFlex: any;
|
|
27
31
|
onInit(props: import('../../packages/core/src/index.ts').Props): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["../../src/Tilemap/TileLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAIjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAS,IAAI,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAO/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC
|
|
1
|
+
{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["../../src/Tilemap/TileLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAIjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAS,IAAI,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAO/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;iBAsGlB,CAAC;kBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjGpC,qBAAa,eAAgB,SAAQ,oBAA+B;IAClE,OAAO,CAAC,MAAM,CAAW;IACzB,KAAK,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAAc;IACxC,OAAO,CAAC,gBAAgB,CAAe;IAEvC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE;IAWnD,gBAAgB;IAChB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,IAAI,GAAG,SAAS;IAqCrE,OAAO,CAAC,SAAS;IAWX,OAAO,CAAC,IAAI,KAAA;IAuBlB,QAAQ,CAAC,KAAK,KAAA;IAsBR,SAAS,CAAC,MAAM,EAAE,GAAG;CAI5B;AAGD,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;CAAG;AAI5D,wBAAgB,kBAAkB,CAAC,KAAK,KAAA,4EAEvC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fog.d.ts","sourceRoot":"","sources":["../../src/Weathers/fog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,wBAAgB,eAAe,IAAI,SAAS,CAqH3C"}
|
package/dist/Weathers/index.d.ts
CHANGED
|
@@ -1,56 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Weather Effect Component
|
|
3
|
-
*
|
|
4
|
-
* Creates a realistic rain effect using WebGL shaders with customizable parameters.
|
|
5
|
-
* The effect simulates raindrops falling with wind influence, density control, and speed adjustment.
|
|
6
|
-
*
|
|
7
|
-
* ## Design
|
|
8
|
-
*
|
|
9
|
-
* The component uses a fragment shader to generate procedural rain drops with:
|
|
10
|
-
* - **Procedural generation**: Each raindrop is generated using hash functions for randomness
|
|
11
|
-
* - **Wind simulation**: Raindrops are affected by wind direction and strength as they fall
|
|
12
|
-
* - **Density control**: Number of visible raindrops can be adjusted
|
|
13
|
-
* - **Speed variation**: Each drop has slightly different falling speed for realism
|
|
14
|
-
* - **Visual styling**: Zelda-inspired rain appearance with proper fade effects
|
|
15
|
-
*
|
|
16
|
-
* @param {Object} options - Configuration options for the weather effect
|
|
17
|
-
* @param {number} [options.speed=0.5] - Rain falling speed (0.1 = slow, 2.0 = fast)
|
|
18
|
-
* @param {number} [options.windDirection=0.0] - Wind direction (-1.0 = left, 1.0 = right)
|
|
19
|
-
* @param {number} [options.windStrength=0.2] - Wind strength (0.0 = no wind, 1.0 = strong)
|
|
20
|
-
* @param {number} [options.density=180.0] - Rain density (number of raindrops, 50-400)
|
|
21
|
-
* @param {Array<number>} [options.resolution=[1000, 1000]] - Screen resolution for proper scaling
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* ```jsx
|
|
25
|
-
* // Basic usage with default settings
|
|
26
|
-
* <Weather />
|
|
27
|
-
*
|
|
28
|
-
* // Customized heavy rain with strong wind
|
|
29
|
-
* <Weather
|
|
30
|
-
* speed={1.5}
|
|
31
|
-
* windDirection={0.8}
|
|
32
|
-
* windStrength={0.6}
|
|
33
|
-
* density={300}
|
|
34
|
-
* />
|
|
35
|
-
*
|
|
36
|
-
* // Light drizzle
|
|
37
|
-
* <Weather
|
|
38
|
-
* speed={0.2}
|
|
39
|
-
* density={80}
|
|
40
|
-
* windStrength={0.1}
|
|
41
|
-
* />
|
|
42
|
-
*
|
|
43
|
-
* // Using signals for dynamic control
|
|
44
|
-
* const rainSpeed = signal(0.5);
|
|
45
|
-
* const windDir = signal(0.0);
|
|
46
|
-
*
|
|
47
|
-
* <Weather
|
|
48
|
-
* speed={rainSpeed}
|
|
49
|
-
* windDirection={windDir}
|
|
50
|
-
* />
|
|
51
|
-
* ```
|
|
52
|
-
*
|
|
53
|
-
* @returns {JSX.Element} A mesh component with the weather shader effect
|
|
2
|
+
* Weather Effect Component (optimized)
|
|
54
3
|
*/
|
|
55
4
|
export declare const WeatherEffect: (options: any) => import('../../packages/core/src/index.ts').Element<import('../../packages/core/src/index.ts').ComponentInstance> | Promise<import('../../packages/core/src/index.ts').Element<import('../../packages/core/src/index.ts').ComponentInstance>>;
|
|
56
5
|
export declare const Weather: (options: any) => import('../../packages/core/src/index.ts').Element<import('../../packages/core/src/index.ts').ComponentInstance> | Promise<import('../../packages/core/src/index.ts').Element<import('../../packages/core/src/index.ts').ComponentInstance>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Weathers/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Weathers/index.ts"],"names":[],"mappings":"AAeA;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,YAAO,iKA8MpC,CAAC;AAEF,eAAO,MAAM,OAAO,gLAAgB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { GlProgram } from 'pixi.js';
|
|
2
|
+
/**
|
|
3
|
+
* Creates a high-performance rain shader program with fine realistic streaks
|
|
4
|
+
*
|
|
5
|
+
* Generates procedural raindrops using optimized hash functions for randomness.
|
|
6
|
+
* Simulates physics with gravity and wind effects on fine elongated streaks.
|
|
7
|
+
* Features thin realistic rain streaks (like real rain), optimized calculations,
|
|
8
|
+
* and early exit optimizations for smooth 60fps performance.
|
|
9
|
+
*
|
|
10
|
+
* Performance optimizations:
|
|
11
|
+
* - Reduced hash function calls (4 instead of 6)
|
|
12
|
+
* - Early bounds checking before expensive calculations
|
|
13
|
+
* - Single smoothstep instead of multiple
|
|
14
|
+
* - Optimized distance calculations
|
|
15
|
+
* - Pre-calculated trigonometric values
|
|
16
|
+
*
|
|
17
|
+
* @returns {GlProgram} The compiled WebGL program for rain effect
|
|
18
|
+
*/
|
|
19
|
+
export declare function createRainShader(): GlProgram;
|
|
20
|
+
//# sourceMappingURL=rain.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rain.d.ts","sourceRoot":"","sources":["../../src/Weathers/rain.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,IAAI,SAAS,CAuJ5C"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { GlProgram } from 'pixi.js';
|
|
2
|
+
/**
|
|
3
|
+
* Creates a slow & smooth snow shader program
|
|
4
|
+
*
|
|
5
|
+
* Generates procedural snowflakes with circular shapes and size variation.
|
|
6
|
+
* Simulates gentle physics with slower movement and subtle wind drift.
|
|
7
|
+
* Optimized for performance with early exits and efficient calculations.
|
|
8
|
+
*
|
|
9
|
+
* @returns {GlProgram} The compiled WebGL program for snow effect
|
|
10
|
+
*/
|
|
11
|
+
export declare function createSnowShader(): GlProgram;
|
|
12
|
+
//# sourceMappingURL=snow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snow.d.ts","sourceRoot":"","sources":["../../src/Weathers/snow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,IAAI,SAAS,CAwJ5C"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA"}
|