@ue-too/board 0.9.5 → 0.10.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 +66 -2
- package/boardify/index.d.ts +280 -9
- package/camera/base.d.ts +364 -68
- package/camera/camera-edge-auto-input.d.ts +105 -0
- package/camera/camera-mux/animation-and-lock/animation-and-lock.d.ts +316 -14
- package/camera/camera-mux/animation-and-lock/index.d.ts +27 -0
- package/camera/camera-mux/animation-and-lock/pan-control-state-machine.d.ts +143 -60
- package/camera/camera-mux/animation-and-lock/rotation-control-state-machine.d.ts +143 -55
- package/camera/camera-mux/animation-and-lock/zoom-control-state-machine.d.ts +205 -58
- package/camera/camera-mux/index.d.ts +26 -0
- package/camera/camera-mux/interface.d.ts +161 -5
- package/camera/camera-mux/relay.d.ts +79 -16
- package/camera/camera-rig/camera-rig.d.ts +536 -94
- package/camera/camera-rig/index.d.ts +26 -1
- package/camera/camera-rig/pan-handler.d.ts +508 -48
- package/camera/camera-rig/rotation-handler.d.ts +353 -31
- package/camera/camera-rig/zoom-handler.d.ts +369 -32
- package/camera/default-camera.d.ts +173 -26
- package/camera/index.d.ts +20 -0
- package/camera/interface.d.ts +202 -2
- package/camera/update-publisher.d.ts +128 -38
- package/camera/utils/coordinate-conversion.d.ts +323 -26
- package/camera/utils/index.d.ts +22 -0
- package/camera/utils/matrix.d.ts +217 -14
- package/camera/utils/position.d.ts +249 -11
- package/camera/utils/rotation.d.ts +139 -9
- package/camera/utils/zoom.d.ts +72 -4
- package/index.d.ts +37 -0
- package/index.js +2 -4796
- package/index.js.map +39 -38
- package/input-interpretation/index.d.ts +29 -0
- package/input-interpretation/input-orchestrator.d.ts +197 -0
- package/input-interpretation/input-state-machine/index.d.ts +18 -0
- package/input-interpretation/input-state-machine/kmt-input-context.d.ts +191 -38
- package/input-interpretation/input-state-machine/kmt-input-state-machine.d.ts +201 -85
- package/input-interpretation/input-state-machine/touch-input-context.d.ts +76 -10
- package/input-interpretation/input-state-machine/touch-input-state-machine.d.ts +138 -17
- package/input-interpretation/raw-input-parser/index.d.ts +19 -0
- package/input-interpretation/raw-input-parser/vanilla-kmt-event-parser.d.ts +107 -21
- package/input-interpretation/raw-input-parser/vanilla-touch-event-parser.d.ts +71 -8
- package/input-interpretation/raw-input-publisher/index.d.ts +18 -0
- package/input-interpretation/raw-input-publisher/raw-input-publisher.d.ts +133 -37
- package/package.json +3 -3
- package/utils/canvas-position-dimension.d.ts +282 -1
- package/utils/coordinate-conversions/canvas-viewport.d.ts +79 -0
- package/utils/coordinate-conversions/viewport-world.d.ts +101 -0
- package/utils/coordinate-conversions/window-canvas.d.ts +90 -0
- package/utils/coorindate-conversion.d.ts +91 -0
- package/utils/drawing.d.ts +151 -3
- package/utils/index.d.ts +21 -0
- package/utils/observable.d.ts +179 -0
- package/utils/ruler.d.ts +36 -0
- package/utils/zoomlevel-adjustment.d.ts +144 -8
- package/camera/camera-rig/update-batcher/index.d.ts +0 -3
- package/camera/camera-rig/update-batcher/position-update-batcher.d.ts +0 -58
- package/camera/camera-rig/update-batcher/rotation-update-batcher.d.ts +0 -54
- package/camera/camera-rig/update-batcher/zoom-udpate-batcher.d.ts +0 -60
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Constraints for camera rotation defining an angular range with direction.
|
|
3
|
+
*
|
|
4
|
+
* @property start - Starting angle of the allowed range in radians
|
|
5
|
+
* @property end - Ending angle of the allowed range in radians
|
|
6
|
+
* @property ccw - If true, the range is measured counter-clockwise from start to end. If false, clockwise
|
|
7
|
+
* @property startAsTieBreaker - When clamping and distance to start equals distance to end, clamp to start if true, end if false
|
|
8
|
+
*
|
|
9
|
+
* @remarks
|
|
10
|
+
* Rotation limits define an angular arc. The direction (ccw) determines which
|
|
11
|
+
* way around the circle the range extends from start to end.
|
|
12
|
+
*
|
|
13
|
+
* For example:
|
|
14
|
+
* - start=0, end=π/2, ccw=true: allows 0 to π/2 (0° to 90°)
|
|
15
|
+
* - start=0, end=π/2, ccw=false: allows 0 to -3π/2 going clockwise (0° to 270° the other way)
|
|
3
16
|
*
|
|
4
17
|
* @category Camera
|
|
5
18
|
*/
|
|
@@ -10,7 +23,15 @@ export type RotationLimits = {
|
|
|
10
23
|
startAsTieBreaker: boolean;
|
|
11
24
|
};
|
|
12
25
|
/**
|
|
13
|
-
*
|
|
26
|
+
* Experimental rotation boundary type with positive/negative direction semantics.
|
|
27
|
+
*
|
|
28
|
+
* @property start - Starting angle of the boundary in radians
|
|
29
|
+
* @property end - Ending angle of the boundary in radians
|
|
30
|
+
* @property positiveDirection - If true, range extends in positive angle direction. If false, negative direction
|
|
31
|
+
* @property startAsTieBreaker - When equidistant from start and end, prefer start if true, end if false
|
|
32
|
+
*
|
|
33
|
+
* @remarks
|
|
34
|
+
* This is an experimental alternative to {@link RotationLimits} with different direction semantics.
|
|
14
35
|
*
|
|
15
36
|
* @category Camera
|
|
16
37
|
*/
|
|
@@ -21,43 +42,152 @@ export type RotationBoundary = {
|
|
|
21
42
|
startAsTieBreaker: boolean;
|
|
22
43
|
};
|
|
23
44
|
/**
|
|
24
|
-
*
|
|
45
|
+
* Clamps a rotation angle to stay within specified angular limits.
|
|
46
|
+
*
|
|
47
|
+
* @param rotation - The rotation angle to clamp in radians
|
|
48
|
+
* @param rotationLimits - Optional rotation constraints with direction
|
|
49
|
+
* @returns The clamped rotation angle, or original if already within limits
|
|
50
|
+
*
|
|
51
|
+
* @remarks
|
|
52
|
+
* If the rotation is outside the allowed arc, it's clamped to the nearest
|
|
53
|
+
* boundary (start or end). When equidistant from both, the `startAsTieBreaker`
|
|
54
|
+
* flag determines which boundary to use.
|
|
55
|
+
*
|
|
56
|
+
* The rotation is normalized to [0, 2π] before clamping.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* ```typescript
|
|
60
|
+
* const limits = { start: 0, end: Math.PI/2, ccw: true, startAsTieBreaker: true };
|
|
61
|
+
*
|
|
62
|
+
* clampRotation(Math.PI/4, limits); // π/4 (within range)
|
|
63
|
+
* clampRotation(Math.PI, limits); // π/2 (clamped to end)
|
|
64
|
+
* clampRotation(-0.1, limits); // 0 (clamped to start)
|
|
65
|
+
* ```
|
|
25
66
|
*
|
|
26
67
|
* @category Camera
|
|
27
68
|
*/
|
|
28
69
|
export declare function clampRotation(rotation: number, rotationLimits?: RotationLimits): number;
|
|
29
70
|
/**
|
|
30
|
-
*
|
|
71
|
+
* Checks if a rotation angle is within specified angular limits.
|
|
72
|
+
*
|
|
73
|
+
* @param rotation - The rotation angle to check in radians
|
|
74
|
+
* @param rotationLimits - Optional rotation constraints with direction
|
|
75
|
+
* @returns True if rotation is within the allowed arc or no limits specified, false otherwise
|
|
76
|
+
*
|
|
77
|
+
* @remarks
|
|
78
|
+
* Returns true if:
|
|
79
|
+
* - No limits are specified (undefined)
|
|
80
|
+
* - Start and end angles are effectively equal (full circle allowed)
|
|
81
|
+
* - Rotation falls within the arc from start to end in the specified direction
|
|
82
|
+
*
|
|
83
|
+
* The rotation is normalized to [0, 2π] before checking.
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```typescript
|
|
87
|
+
* const limits = { start: 0, end: Math.PI/2, ccw: true, startAsTieBreaker: true };
|
|
88
|
+
*
|
|
89
|
+
* rotationWithinLimits(Math.PI/4, limits); // true (within range)
|
|
90
|
+
* rotationWithinLimits(Math.PI, limits); // false (outside range)
|
|
91
|
+
* rotationWithinLimits(0, limits); // true (at start)
|
|
92
|
+
* rotationWithinLimits(Math.PI/2, limits); // true (at end)
|
|
93
|
+
* ```
|
|
31
94
|
*
|
|
32
95
|
* @category Camera
|
|
33
96
|
*/
|
|
34
97
|
export declare function rotationWithinLimits(rotation: number, rotationLimits?: RotationLimits): boolean;
|
|
35
98
|
/**
|
|
36
|
-
*
|
|
99
|
+
* Checks if a rotation angle is within an experimental rotation boundary.
|
|
100
|
+
*
|
|
101
|
+
* @param rotation - The rotation angle to check in radians
|
|
102
|
+
* @param rotationBoundary - Rotation boundary with positive/negative direction
|
|
103
|
+
* @returns True if rotation is within the boundary range, false otherwise
|
|
104
|
+
*
|
|
105
|
+
* @remarks
|
|
106
|
+
* This is an experimental alternative to {@link rotationWithinLimits} using
|
|
107
|
+
* positive/negative direction semantics instead of ccw/cw.
|
|
37
108
|
*
|
|
38
109
|
* @category Camera
|
|
39
110
|
*/
|
|
40
111
|
export declare function rotationWithinBoundary(rotation: number, rotationBoundary: RotationBoundary): boolean;
|
|
41
112
|
/**
|
|
42
|
-
*
|
|
113
|
+
* Normalizes an angle to the range [0, 2π).
|
|
114
|
+
*
|
|
115
|
+
* @param angle - Angle in radians (can be any value)
|
|
116
|
+
* @returns Equivalent angle in the range [0, 2π)
|
|
117
|
+
*
|
|
118
|
+
* @remarks
|
|
119
|
+
* This function wraps angles to the standard [0, 2π) range. Useful for
|
|
120
|
+
* ensuring consistent angle representation when comparing or storing angles.
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```typescript
|
|
124
|
+
* normalizeAngleZero2TwoPI(0); // 0
|
|
125
|
+
* normalizeAngleZero2TwoPI(Math.PI); // π
|
|
126
|
+
* normalizeAngleZero2TwoPI(3 * Math.PI); // π (wraps around)
|
|
127
|
+
* normalizeAngleZero2TwoPI(-Math.PI/2); // 3π/2 (negative becomes positive)
|
|
128
|
+
* normalizeAngleZero2TwoPI(2 * Math.PI); // 0 (full rotation)
|
|
129
|
+
* ```
|
|
43
130
|
*
|
|
44
131
|
* @category Camera
|
|
45
132
|
*/
|
|
46
133
|
export declare function normalizeAngleZero2TwoPI(angle: number): number;
|
|
47
134
|
/**
|
|
48
|
-
*
|
|
135
|
+
* Calculates the signed angular distance between two angles, taking the shorter path.
|
|
136
|
+
*
|
|
137
|
+
* @param from - Starting angle in radians
|
|
138
|
+
* @param to - Target angle in radians
|
|
139
|
+
* @returns Signed angular difference in radians, in the range (-π, π]
|
|
140
|
+
*
|
|
141
|
+
* @remarks
|
|
142
|
+
* Returns the shortest angular path from `from` to `to`:
|
|
143
|
+
* - Positive value: rotate counter-clockwise (positive direction)
|
|
144
|
+
* - Negative value: rotate clockwise (negative direction)
|
|
145
|
+
* - Always returns the smaller of the two possible paths
|
|
146
|
+
*
|
|
147
|
+
* @example
|
|
148
|
+
* ```typescript
|
|
149
|
+
* angleSpan(0, Math.PI/2); // π/2 (90° ccw)
|
|
150
|
+
* angleSpan(Math.PI/2, 0); // -π/2 (90° cw)
|
|
151
|
+
* angleSpan(0, 3*Math.PI/2); // -π/2 (shorter to go cw)
|
|
152
|
+
* angleSpan(3*Math.PI/2, 0); // π/2 (shorter to go ccw)
|
|
153
|
+
* angleSpan(0, Math.PI); // π (180°, ambiguous)
|
|
154
|
+
* ```
|
|
49
155
|
*
|
|
50
156
|
* @category Camera
|
|
51
157
|
*/
|
|
52
158
|
export declare function angleSpan(from: number, to: number): number;
|
|
53
159
|
/**
|
|
54
|
-
*
|
|
160
|
+
* Converts degrees to radians.
|
|
161
|
+
*
|
|
162
|
+
* @param deg - Angle in degrees
|
|
163
|
+
* @returns Equivalent angle in radians
|
|
164
|
+
*
|
|
165
|
+
* @example
|
|
166
|
+
* ```typescript
|
|
167
|
+
* deg2rad(0); // 0
|
|
168
|
+
* deg2rad(90); // π/2
|
|
169
|
+
* deg2rad(180); // π
|
|
170
|
+
* deg2rad(360); // 2π
|
|
171
|
+
* deg2rad(-45); // -π/4
|
|
172
|
+
* ```
|
|
55
173
|
*
|
|
56
174
|
* @category Camera
|
|
57
175
|
*/
|
|
58
176
|
export declare function deg2rad(deg: number): number;
|
|
59
177
|
/**
|
|
60
|
-
*
|
|
178
|
+
* Converts radians to degrees.
|
|
179
|
+
*
|
|
180
|
+
* @param rad - Angle in radians
|
|
181
|
+
* @returns Equivalent angle in degrees
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* ```typescript
|
|
185
|
+
* rad2deg(0); // 0
|
|
186
|
+
* rad2deg(Math.PI/2); // 90
|
|
187
|
+
* rad2deg(Math.PI); // 180
|
|
188
|
+
* rad2deg(2 * Math.PI); // 360
|
|
189
|
+
* rad2deg(-Math.PI/4); // -45
|
|
190
|
+
* ```
|
|
61
191
|
*
|
|
62
192
|
* @category Camera
|
|
63
193
|
*/
|
package/camera/utils/zoom.d.ts
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Constraints for camera zoom level with optional minimum and maximum bounds.
|
|
3
|
+
*
|
|
4
|
+
* @property min - Minimum allowed zoom level (optional, e.g., 0.1 for 10% zoom)
|
|
5
|
+
* @property max - Maximum allowed zoom level (optional, e.g., 10 for 1000% zoom)
|
|
6
|
+
*
|
|
7
|
+
* @remarks
|
|
8
|
+
* Zoom level of 1.0 represents 100% (no zoom), values >1 zoom in, values <1 zoom out.
|
|
9
|
+
* If both min and max are undefined, no constraints are applied.
|
|
3
10
|
*
|
|
4
11
|
* @category Camera
|
|
5
12
|
*/
|
|
@@ -8,17 +15,78 @@ export type ZoomLevelLimits = {
|
|
|
8
15
|
max?: number;
|
|
9
16
|
};
|
|
10
17
|
/**
|
|
11
|
-
*
|
|
18
|
+
* Validates that zoom level limits are logically consistent.
|
|
19
|
+
*
|
|
20
|
+
* @param zoomLevelLimits - The zoom limits to validate
|
|
21
|
+
* @returns True if limits are valid or undefined, false if min > max
|
|
22
|
+
*
|
|
23
|
+
* @remarks
|
|
24
|
+
* Returns true if:
|
|
25
|
+
* - Limits are undefined (no constraints)
|
|
26
|
+
* - Only min or max is defined
|
|
27
|
+
* - Both are defined and min ≤ max
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```typescript
|
|
31
|
+
* isValidZoomLevelLimits({ min: 0.5, max: 5 }); // true
|
|
32
|
+
* isValidZoomLevelLimits({ min: 5, max: 0.5 }); // false
|
|
33
|
+
* isValidZoomLevelLimits({ min: 0.5 }); // true
|
|
34
|
+
* isValidZoomLevelLimits(undefined); // true
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @category Camera
|
|
12
38
|
*/
|
|
13
39
|
export declare function isValidZoomLevelLimits(zoomLevelLimits: ZoomLevelLimits | undefined): boolean;
|
|
14
40
|
/**
|
|
15
|
-
*
|
|
41
|
+
* Clamps a zoom level to stay within specified limits.
|
|
42
|
+
*
|
|
43
|
+
* @param zoomLevel - The zoom level to clamp
|
|
44
|
+
* @param zoomLevelLimits - Optional zoom constraints
|
|
45
|
+
* @returns The clamped zoom level, or original value if already within limits
|
|
46
|
+
*
|
|
47
|
+
* @remarks
|
|
48
|
+
* If the zoom level is already within limits, returns it unchanged.
|
|
49
|
+
* If no limits are specified, returns the original value.
|
|
50
|
+
*
|
|
51
|
+
* @example
|
|
52
|
+
* ```typescript
|
|
53
|
+
* const limits = { min: 0.5, max: 4 };
|
|
54
|
+
*
|
|
55
|
+
* clampZoomLevel(2.0, limits); // 2.0 (within bounds)
|
|
56
|
+
* clampZoomLevel(0.1, limits); // 0.5 (clamped to min)
|
|
57
|
+
* clampZoomLevel(10, limits); // 4.0 (clamped to max)
|
|
58
|
+
* clampZoomLevel(2.0); // 2.0 (no limits)
|
|
59
|
+
* ```
|
|
16
60
|
*
|
|
17
61
|
* @category Camera
|
|
18
62
|
*/
|
|
19
63
|
export declare function clampZoomLevel(zoomLevel: number, zoomLevelLimits?: ZoomLevelLimits): number;
|
|
20
64
|
/**
|
|
21
|
-
*
|
|
65
|
+
* Checks if a zoom level is within specified limits.
|
|
66
|
+
*
|
|
67
|
+
* @param zoomLevel - The zoom level to check
|
|
68
|
+
* @param zoomLevelLimits - Optional zoom constraints
|
|
69
|
+
* @returns True if zoom level is valid and within limits, false otherwise
|
|
70
|
+
*
|
|
71
|
+
* @remarks
|
|
72
|
+
* Returns false if:
|
|
73
|
+
* - Zoom level is ≤ 0 (invalid zoom)
|
|
74
|
+
* - Zoom level exceeds maximum limit (if defined)
|
|
75
|
+
* - Zoom level is below minimum limit (if defined)
|
|
76
|
+
*
|
|
77
|
+
* Returns true if no limits are defined or zoom is within bounds.
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```typescript
|
|
81
|
+
* const limits = { min: 0.5, max: 4 };
|
|
82
|
+
*
|
|
83
|
+
* zoomLevelWithinLimits(2.0, limits); // true
|
|
84
|
+
* zoomLevelWithinLimits(0.1, limits); // false (below min)
|
|
85
|
+
* zoomLevelWithinLimits(10, limits); // false (above max)
|
|
86
|
+
* zoomLevelWithinLimits(-1, limits); // false (negative zoom)
|
|
87
|
+
* zoomLevelWithinLimits(0, limits); // false (zero zoom)
|
|
88
|
+
* zoomLevelWithinLimits(2.0); // true (no limits)
|
|
89
|
+
* ```
|
|
22
90
|
*
|
|
23
91
|
* @category Camera
|
|
24
92
|
*/
|
package/index.d.ts
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @packageDocumentation
|
|
3
|
+
* Main entry point for the @ue-too/board package.
|
|
4
|
+
*
|
|
5
|
+
* @remarks
|
|
6
|
+
* This package provides a high-performance infinite canvas with pan, zoom, and rotate capabilities.
|
|
7
|
+
* The {@link Board} class is the primary API that orchestrates camera management, input handling,
|
|
8
|
+
* and coordinate transformations for building interactive 2D canvas applications.
|
|
9
|
+
*
|
|
10
|
+
* ## Key Exports
|
|
11
|
+
*
|
|
12
|
+
* - **{@link Board}**: Main class for creating an infinite canvas with camera controls
|
|
13
|
+
* - **Camera System**: Camera classes, rigs, and multiplexers for viewport management
|
|
14
|
+
* - **Input System**: Input parsers, state machines, and orchestration for user interaction
|
|
15
|
+
* - **Utilities**: Helper functions for coordinate conversion, math operations, and more
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* Basic usage
|
|
19
|
+
* ```typescript
|
|
20
|
+
* import { Board } from '@ue-too/board';
|
|
21
|
+
*
|
|
22
|
+
* const canvas = document.querySelector('canvas') as HTMLCanvasElement;
|
|
23
|
+
* const board = new Board(canvas);
|
|
24
|
+
*
|
|
25
|
+
* function draw(timestamp: number) {
|
|
26
|
+
* board.step(timestamp);
|
|
27
|
+
*
|
|
28
|
+
* if (board.context) {
|
|
29
|
+
* board.context.fillRect(0, 0, 100, 100);
|
|
30
|
+
* }
|
|
31
|
+
*
|
|
32
|
+
* requestAnimationFrame(draw);
|
|
33
|
+
* }
|
|
34
|
+
*
|
|
35
|
+
* requestAnimationFrame(draw);
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
1
38
|
export * from "./boardify";
|
|
2
39
|
export * from "./camera";
|
|
3
40
|
export * from "./input-interpretation";
|