canvasengine 2.0.0-beta.12 → 2.0.0-beta.14
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/index.d.ts +34 -28
- package/dist/index.js +461 -186
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Graphic.ts +15 -13
- package/src/components/Viewport.ts +5 -11
- package/src/components/types/DisplayObject.ts +7 -0
- package/src/directives/Drag.ts +271 -53
- package/src/directives/KeyboardControls.ts +3 -1
- package/src/directives/ViewportFollow.ts +35 -7
- package/src/engine/directive.ts +2 -2
- package/src/engine/reactive.ts +13 -24
- package/src/hooks/useProps.ts +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as _signe_reactive from '@signe/reactive';
|
|
2
|
-
import { WritableSignal, Signal
|
|
2
|
+
import { WritableSignal, Signal } from '@signe/reactive';
|
|
3
3
|
export * from '@signe/reactive';
|
|
4
4
|
import { Subscription, Subject, Observable } from 'rxjs';
|
|
5
5
|
export { isObservable } from 'rxjs';
|
|
6
6
|
import { Node } from 'yoga-layout';
|
|
7
7
|
import * as PIXI from 'pixi.js';
|
|
8
|
-
import { ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
|
|
8
|
+
import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
|
|
9
9
|
export { Howler } from 'howler';
|
|
10
10
|
import * as popmotion from 'popmotion';
|
|
11
11
|
|
|
@@ -68,6 +68,26 @@ declare function animatedSequence(sequence: ((() => Promise<void>) | (() => Prom
|
|
|
68
68
|
|
|
69
69
|
type SignalOrPrimitive<T> = T | Signal<T> | AnimatedSignal<T>;
|
|
70
70
|
|
|
71
|
+
type DragProps = {
|
|
72
|
+
move?: (event: FederatedPointerEvent) => void;
|
|
73
|
+
start?: () => void;
|
|
74
|
+
end?: () => void;
|
|
75
|
+
snap?: SignalOrPrimitive<number>;
|
|
76
|
+
direction?: SignalOrPrimitive<'x' | 'y' | 'all'>;
|
|
77
|
+
viewport?: {
|
|
78
|
+
edgeThreshold?: SignalOrPrimitive<number>;
|
|
79
|
+
maxSpeed?: SignalOrPrimitive<number>;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
type ViewportFollowProps = {
|
|
84
|
+
viewportFollow?: boolean | {
|
|
85
|
+
speed?: SignalOrPrimitive<number>;
|
|
86
|
+
acceleration?: SignalOrPrimitive<number>;
|
|
87
|
+
radius?: SignalOrPrimitive<number>;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
|
|
71
91
|
type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
72
92
|
type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
|
|
73
93
|
type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
|
|
@@ -114,6 +134,8 @@ interface DisplayObjectProps {
|
|
|
114
134
|
filters?: any[];
|
|
115
135
|
blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
|
|
116
136
|
blur?: SignalOrPrimitive<number>;
|
|
137
|
+
drag?: DragProps;
|
|
138
|
+
viewportFollow?: ViewportFollowProps;
|
|
117
139
|
click?: PIXI.FederatedEventHandler;
|
|
118
140
|
mousedown?: PIXI.FederatedEventHandler;
|
|
119
141
|
mouseenter?: PIXI.FederatedEventHandler;
|
|
@@ -219,17 +241,6 @@ declare function DisplayObject(extendClass: any): {
|
|
|
219
241
|
interface Props {
|
|
220
242
|
[key: string]: any;
|
|
221
243
|
}
|
|
222
|
-
type ArrayChange<T> = {
|
|
223
|
-
type: "add" | "remove" | "update" | "init" | "reset";
|
|
224
|
-
index?: number;
|
|
225
|
-
items: T[];
|
|
226
|
-
};
|
|
227
|
-
type ObjectChange<T> = {
|
|
228
|
-
type: "add" | "remove" | "update" | "init" | "reset";
|
|
229
|
-
key?: string;
|
|
230
|
-
value?: T;
|
|
231
|
-
items: T[];
|
|
232
|
-
};
|
|
233
244
|
type NestedSignalObjects = {
|
|
234
245
|
[Key in string]: NestedSignalObjects | Signal<any>;
|
|
235
246
|
};
|
|
@@ -279,7 +290,7 @@ declare function createComponent(tag: string, props?: Props): Element;
|
|
|
279
290
|
* @param {Function} createElementFn - A function that takes an item and returns an element representation.
|
|
280
291
|
* @returns {Observable} An observable that emits the list of created child elements.
|
|
281
292
|
*/
|
|
282
|
-
declare function loop<T>(itemsSubject:
|
|
293
|
+
declare function loop<T>(itemsSubject: any, createElementFn: (item: T, index: number | string) => Element | null): FlowObservable;
|
|
283
294
|
/**
|
|
284
295
|
* Conditionally creates and destroys elements based on a condition signal.
|
|
285
296
|
*
|
|
@@ -290,10 +301,10 @@ declare function loop<T>(itemsSubject: WritableArraySignal<T[]> | WritableObject
|
|
|
290
301
|
declare function cond(condition: Signal<boolean> | boolean, createElementFn: () => Element | Promise<Element>): FlowObservable;
|
|
291
302
|
|
|
292
303
|
declare abstract class Directive {
|
|
293
|
-
abstract onDestroy(): any;
|
|
304
|
+
abstract onDestroy(element: Element<any>): any;
|
|
294
305
|
abstract onInit(element: Element<any>): any;
|
|
295
306
|
abstract onMount(element: Element<any>): any;
|
|
296
|
-
abstract onUpdate(props: any): any;
|
|
307
|
+
abstract onUpdate(props: any, element: Element<any>): any;
|
|
297
308
|
}
|
|
298
309
|
|
|
299
310
|
interface Tick {
|
|
@@ -391,23 +402,18 @@ interface GraphicsProps extends DisplayObjectProps {
|
|
|
391
402
|
draw?: (graphics: Graphics$1) => void;
|
|
392
403
|
}
|
|
393
404
|
interface RectProps extends DisplayObjectProps {
|
|
394
|
-
|
|
395
|
-
height: number;
|
|
396
|
-
color: string;
|
|
405
|
+
color: SignalOrPrimitive<string>;
|
|
397
406
|
}
|
|
398
407
|
interface CircleProps extends DisplayObjectProps {
|
|
399
|
-
radius: number
|
|
400
|
-
color: string
|
|
408
|
+
radius: SignalOrPrimitive<number>;
|
|
409
|
+
color: SignalOrPrimitive<string>;
|
|
401
410
|
}
|
|
402
411
|
interface EllipseProps extends DisplayObjectProps {
|
|
403
|
-
|
|
404
|
-
height: number;
|
|
405
|
-
color: string;
|
|
412
|
+
color: SignalOrPrimitive<string>;
|
|
406
413
|
}
|
|
407
414
|
interface TriangleProps extends DisplayObjectProps {
|
|
408
|
-
base: number
|
|
409
|
-
|
|
410
|
-
color: string;
|
|
415
|
+
base: SignalOrPrimitive<number>;
|
|
416
|
+
color: SignalOrPrimitive<string>;
|
|
411
417
|
}
|
|
412
418
|
interface SvgProps extends DisplayObjectProps {
|
|
413
419
|
svg: string;
|
|
@@ -1134,4 +1140,4 @@ declare namespace utils {
|
|
|
1134
1140
|
export { utils_arrayEquals as arrayEquals, utils_calculateDistance as calculateDistance, utils_error as error, utils_fps2ms as fps2ms, utils_get as get, utils_isBrowser as isBrowser, utils_isFunction as isFunction, utils_isObject as isObject, utils_isPromise as isPromise, utils_log as log, utils_preciseNow as preciseNow, utils_set as set, utils_setObservablePoint as setObservablePoint };
|
|
1135
1141
|
}
|
|
1136
1142
|
|
|
1137
|
-
export { type AnimateOptions, type AnimatedSignal, type AnimatedState,
|
|
1143
|
+
export { type AnimateOptions, type AnimatedSignal, type AnimatedState, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };
|