@lightningjs/renderer 3.0.0-beta21 → 3.0.0-beta22
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/exports/index.d.ts +1 -0
- package/dist/exports/index.js +1 -0
- package/dist/exports/index.js.map +1 -1
- package/dist/src/common/CommonTypes.d.ts +2 -1
- package/dist/src/core/renderers/webgl/WebGlRenderOp.d.ts +3 -2
- package/dist/src/core/renderers/webgl/WebGlRenderOp.js +3 -1
- package/dist/src/core/renderers/webgl/WebGlRenderOp.js.map +1 -1
- package/dist/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.js +8 -24
- package/dist/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.js.map +1 -1
- package/dist/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.js +8 -25
- package/dist/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.js.map +1 -1
- package/dist/src/core/shaders/webgl/Border.js +7 -13
- package/dist/src/core/shaders/webgl/Border.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithBorder.js +6 -17
- package/dist/src/core/shaders/webgl/RoundedWithBorder.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js +4 -8
- package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js.map +1 -1
- package/dist/src/core/text-rendering/CanvasFont.d.ts +14 -0
- package/dist/src/core/text-rendering/CanvasFont.js +115 -0
- package/dist/src/core/text-rendering/CanvasFont.js.map +1 -0
- package/dist/src/core/text-rendering/CoreFont.d.ts +33 -0
- package/dist/src/core/text-rendering/CoreFont.js +48 -0
- package/dist/src/core/text-rendering/CoreFont.js.map +1 -0
- package/dist/src/core/text-rendering/FontManager.d.ts +11 -0
- package/dist/src/core/text-rendering/FontManager.js +41 -0
- package/dist/src/core/text-rendering/FontManager.js.map +1 -0
- package/dist/src/core/text-rendering/SdfFont.d.ts +29 -0
- package/dist/src/core/text-rendering/SdfFont.js +142 -0
- package/dist/src/core/text-rendering/SdfFont.js.map +1 -0
- package/dist/src/core/textures/Texture.d.ts +4 -3
- package/dist/src/core/textures/Texture.js.map +1 -1
- package/dist/src/core/utils.d.ts +1 -1
- package/dist/src/main-api/Inspector.d.ts +4 -0
- package/dist/src/main-api/Inspector.js +160 -0
- package/dist/src/main-api/Inspector.js.map +1 -1
- package/dist/tsconfig.dist.tsbuildinfo +1 -1
- package/exports/index.ts +5 -0
- package/package.json +1 -1
- package/src/common/CommonTypes.ts +2 -1
- package/src/core/shaders/webgl/Border.ts +7 -13
- package/src/core/shaders/webgl/RoundedWithBorder.ts +6 -17
- package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts +4 -8
- package/src/core/textures/Texture.ts +10 -6
- package/src/main-api/Inspector.ts +215 -0
- package/dist/src/core/animations/Animation.d.ts +0 -21
- package/dist/src/core/animations/Animation.js +0 -194
- package/dist/src/core/animations/Animation.js.map +0 -1
- package/dist/src/core/animations/Playback.d.ts +0 -64
- package/dist/src/core/animations/Playback.js +0 -169
- package/dist/src/core/animations/Playback.js.map +0 -1
- package/dist/src/core/animations/Transition.d.ts +0 -27
- package/dist/src/core/animations/Transition.js +0 -52
- package/dist/src/core/animations/Transition.js.map +0 -1
- package/dist/src/core/animations/utils.d.ts +0 -2
- package/dist/src/core/animations/utils.js +0 -136
- package/dist/src/core/animations/utils.js.map +0 -1
- package/dist/src/core/shaders/webgl/SdfShadowShader.d.ts +0 -9
- package/dist/src/core/shaders/webgl/SdfShadowShader.js +0 -100
- package/dist/src/core/shaders/webgl/SdfShadowShader.js.map +0 -1
- package/dist/tsconfig.tsbuildinfo +0 -1
|
@@ -11,6 +11,8 @@ import type {
|
|
|
11
11
|
} from '../common/IAnimationController.js';
|
|
12
12
|
import { isProductionEnvironment } from '../utils.js';
|
|
13
13
|
import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
|
|
14
|
+
import type { Texture } from '../core/textures/Texture.js';
|
|
15
|
+
import { TextureType } from '../core/textures/Texture.js';
|
|
14
16
|
|
|
15
17
|
/**
|
|
16
18
|
* Inspector Options
|
|
@@ -204,6 +206,22 @@ const gradientColorPropertyMap = [
|
|
|
204
206
|
'colorBr',
|
|
205
207
|
];
|
|
206
208
|
|
|
209
|
+
const textureTypeNames: Record<number, string> = {
|
|
210
|
+
[TextureType.generic]: 'generic',
|
|
211
|
+
[TextureType.color]: 'color',
|
|
212
|
+
[TextureType.image]: 'image',
|
|
213
|
+
[TextureType.noise]: 'noise',
|
|
214
|
+
[TextureType.renderToTexture]: 'renderToTexture',
|
|
215
|
+
[TextureType.subTexture]: 'subTexture',
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
interface TextureMetrics {
|
|
219
|
+
previousState: string;
|
|
220
|
+
loadedCount: number;
|
|
221
|
+
failedCount: number;
|
|
222
|
+
freedCount: number;
|
|
223
|
+
}
|
|
224
|
+
|
|
207
225
|
const knownProperties = new Set<string>([
|
|
208
226
|
...Object.keys(stylePropertyMap),
|
|
209
227
|
...Object.keys(domPropertyMap),
|
|
@@ -223,6 +241,7 @@ export class Inspector {
|
|
|
223
241
|
private width = 1920;
|
|
224
242
|
private scaleX = 1;
|
|
225
243
|
private scaleY = 1;
|
|
244
|
+
private textureMetrics = new Map<Texture, TextureMetrics>();
|
|
226
245
|
|
|
227
246
|
// Performance monitoring for frequent setter calls
|
|
228
247
|
private static setterCallCount = new Map<
|
|
@@ -788,6 +807,94 @@ export class Inspector {
|
|
|
788
807
|
node: CoreNode | CoreTextNode,
|
|
789
808
|
div: HTMLElement,
|
|
790
809
|
): CoreNode | CoreTextNode {
|
|
810
|
+
// Store texture event listeners for cleanup
|
|
811
|
+
const textureListeners = new Map<
|
|
812
|
+
Texture,
|
|
813
|
+
{
|
|
814
|
+
onLoaded: () => void;
|
|
815
|
+
onFailed: () => void;
|
|
816
|
+
onFreed: () => void;
|
|
817
|
+
}
|
|
818
|
+
>();
|
|
819
|
+
|
|
820
|
+
const coreNodeListeners = new Map<
|
|
821
|
+
CoreNode,
|
|
822
|
+
{
|
|
823
|
+
onLoaded: () => void;
|
|
824
|
+
}
|
|
825
|
+
>();
|
|
826
|
+
|
|
827
|
+
const setupCoreNodeListeners = (coreNode: CoreNode) => {
|
|
828
|
+
const onLoaded = () => {
|
|
829
|
+
this.updateTextNodeDimensions(div, coreNode as CoreTextNode);
|
|
830
|
+
};
|
|
831
|
+
coreNode.on('loaded', onLoaded);
|
|
832
|
+
coreNodeListeners.set(coreNode, { onLoaded });
|
|
833
|
+
};
|
|
834
|
+
|
|
835
|
+
// Helper function to setup texture event listeners
|
|
836
|
+
const setupTextureListeners = (texture: Texture | null) => {
|
|
837
|
+
// Clean up existing listeners first
|
|
838
|
+
textureListeners.forEach((listeners, oldTexture) => {
|
|
839
|
+
oldTexture.off('loaded', listeners.onLoaded);
|
|
840
|
+
oldTexture.off('failed', listeners.onFailed);
|
|
841
|
+
oldTexture.off('freed', listeners.onFreed);
|
|
842
|
+
});
|
|
843
|
+
textureListeners.clear();
|
|
844
|
+
|
|
845
|
+
// Setup new listeners if texture exists
|
|
846
|
+
if (texture) {
|
|
847
|
+
// Initialize metrics if not exists
|
|
848
|
+
if (!this.textureMetrics.has(texture)) {
|
|
849
|
+
this.textureMetrics.set(texture, {
|
|
850
|
+
previousState: texture.state,
|
|
851
|
+
loadedCount: 0,
|
|
852
|
+
failedCount: 0,
|
|
853
|
+
freedCount: 0,
|
|
854
|
+
});
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
const onLoaded = () => {
|
|
858
|
+
const metrics = this.textureMetrics.get(texture);
|
|
859
|
+
if (metrics) {
|
|
860
|
+
metrics.previousState =
|
|
861
|
+
metrics.previousState !== texture.state
|
|
862
|
+
? metrics.previousState
|
|
863
|
+
: 'loading';
|
|
864
|
+
metrics.loadedCount++;
|
|
865
|
+
}
|
|
866
|
+
this.updateTextureAttributes(div, texture);
|
|
867
|
+
};
|
|
868
|
+
const onFailed = () => {
|
|
869
|
+
const metrics = this.textureMetrics.get(texture);
|
|
870
|
+
if (metrics) {
|
|
871
|
+
metrics.previousState =
|
|
872
|
+
metrics.previousState !== texture.state
|
|
873
|
+
? metrics.previousState
|
|
874
|
+
: 'loading';
|
|
875
|
+
metrics.failedCount++;
|
|
876
|
+
}
|
|
877
|
+
this.updateTextureAttributes(div, texture);
|
|
878
|
+
};
|
|
879
|
+
const onFreed = () => {
|
|
880
|
+
const metrics = this.textureMetrics.get(texture);
|
|
881
|
+
if (metrics) {
|
|
882
|
+
metrics.previousState =
|
|
883
|
+
metrics.previousState !== texture.state
|
|
884
|
+
? metrics.previousState
|
|
885
|
+
: texture.state;
|
|
886
|
+
metrics.freedCount++;
|
|
887
|
+
}
|
|
888
|
+
this.updateTextureAttributes(div, texture);
|
|
889
|
+
};
|
|
890
|
+
|
|
891
|
+
texture.on('loaded', onLoaded);
|
|
892
|
+
texture.on('failed', onFailed);
|
|
893
|
+
texture.on('freed', onFreed);
|
|
894
|
+
|
|
895
|
+
textureListeners.set(texture, { onLoaded, onFailed, onFreed });
|
|
896
|
+
}
|
|
897
|
+
};
|
|
791
898
|
// Define traps for each property in knownProperties
|
|
792
899
|
knownProperties.forEach((property) => {
|
|
793
900
|
let originalProp = Object.getOwnPropertyDescriptor(node, property);
|
|
@@ -802,6 +909,10 @@ export class Inspector {
|
|
|
802
909
|
return;
|
|
803
910
|
}
|
|
804
911
|
|
|
912
|
+
if (property === 'text') {
|
|
913
|
+
setupCoreNodeListeners(node);
|
|
914
|
+
}
|
|
915
|
+
|
|
805
916
|
Object.defineProperty(node, property, {
|
|
806
917
|
get() {
|
|
807
918
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
|
@@ -818,6 +929,15 @@ export class Inspector {
|
|
|
818
929
|
value,
|
|
819
930
|
node.props,
|
|
820
931
|
);
|
|
932
|
+
|
|
933
|
+
// Setup texture event listeners if this is a texture property
|
|
934
|
+
if (property === 'texture') {
|
|
935
|
+
const textureValue =
|
|
936
|
+
value && typeof value === 'object' && 'state' in value
|
|
937
|
+
? (value as Texture)
|
|
938
|
+
: null;
|
|
939
|
+
setupTextureListeners(textureValue);
|
|
940
|
+
}
|
|
821
941
|
},
|
|
822
942
|
configurable: true,
|
|
823
943
|
enumerable: true,
|
|
@@ -827,6 +947,21 @@ export class Inspector {
|
|
|
827
947
|
const originalDestroy = node.destroy;
|
|
828
948
|
Object.defineProperty(node, 'destroy', {
|
|
829
949
|
value: () => {
|
|
950
|
+
// Clean up texture event listeners and metrics
|
|
951
|
+
textureListeners.forEach((listeners, texture) => {
|
|
952
|
+
texture.off('loaded', listeners.onLoaded);
|
|
953
|
+
texture.off('failed', listeners.onFailed);
|
|
954
|
+
texture.off('freed', listeners.onFreed);
|
|
955
|
+
// Clean up metrics for this texture
|
|
956
|
+
this.textureMetrics.delete(texture);
|
|
957
|
+
});
|
|
958
|
+
textureListeners.clear();
|
|
959
|
+
|
|
960
|
+
coreNodeListeners.forEach((listeners, coreNode) => {
|
|
961
|
+
coreNode.off('loaded', listeners.onLoaded);
|
|
962
|
+
});
|
|
963
|
+
coreNodeListeners.clear();
|
|
964
|
+
|
|
830
965
|
this.destroyNode(node.id);
|
|
831
966
|
originalDestroy.call(node);
|
|
832
967
|
},
|
|
@@ -856,6 +991,86 @@ export class Inspector {
|
|
|
856
991
|
return node;
|
|
857
992
|
}
|
|
858
993
|
|
|
994
|
+
updateTextNodeDimensions(div: HTMLElement, node: CoreTextNode) {
|
|
995
|
+
const textMetrics = node.renderInfo;
|
|
996
|
+
if (textMetrics) {
|
|
997
|
+
div.style.width = `${textMetrics.width}px`;
|
|
998
|
+
div.style.height = `${textMetrics.height}px`;
|
|
999
|
+
} else {
|
|
1000
|
+
div.style.removeProperty('width');
|
|
1001
|
+
div.style.removeProperty('height');
|
|
1002
|
+
}
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
updateTextureAttributes(div: HTMLElement, texture: Texture) {
|
|
1006
|
+
// Update texture state
|
|
1007
|
+
div.setAttribute('data-texture-state', texture.state);
|
|
1008
|
+
|
|
1009
|
+
// Update texture type
|
|
1010
|
+
div.setAttribute(
|
|
1011
|
+
'data-texture-type',
|
|
1012
|
+
textureTypeNames[texture.type] || 'unknown',
|
|
1013
|
+
);
|
|
1014
|
+
|
|
1015
|
+
// Update texture dimensions if available
|
|
1016
|
+
if (texture.dimensions) {
|
|
1017
|
+
div.setAttribute('data-texture-width', String(texture.dimensions.w));
|
|
1018
|
+
div.setAttribute('data-texture-height', String(texture.dimensions.h));
|
|
1019
|
+
} else {
|
|
1020
|
+
div.removeAttribute('data-texture-width');
|
|
1021
|
+
div.removeAttribute('data-texture-height');
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
// Update renderable owners count
|
|
1025
|
+
div.setAttribute(
|
|
1026
|
+
'data-texture-owners',
|
|
1027
|
+
String(texture.renderableOwners.length),
|
|
1028
|
+
);
|
|
1029
|
+
|
|
1030
|
+
// Update retry count
|
|
1031
|
+
div.setAttribute('data-texture-retry-count', String(texture.retryCount));
|
|
1032
|
+
|
|
1033
|
+
// Update max retry count if available
|
|
1034
|
+
if (texture.maxRetryCount !== null) {
|
|
1035
|
+
div.setAttribute(
|
|
1036
|
+
'data-texture-max-retry-count',
|
|
1037
|
+
String(texture.maxRetryCount),
|
|
1038
|
+
);
|
|
1039
|
+
} else {
|
|
1040
|
+
div.removeAttribute('data-texture-max-retry-count');
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
// Update metrics if available
|
|
1044
|
+
const metrics = this.textureMetrics.get(texture);
|
|
1045
|
+
if (metrics) {
|
|
1046
|
+
div.setAttribute('data-texture-previous-state', metrics.previousState);
|
|
1047
|
+
div.setAttribute(
|
|
1048
|
+
'data-texture-loaded-count',
|
|
1049
|
+
String(metrics.loadedCount),
|
|
1050
|
+
);
|
|
1051
|
+
div.setAttribute(
|
|
1052
|
+
'data-texture-failed-count',
|
|
1053
|
+
String(metrics.failedCount),
|
|
1054
|
+
);
|
|
1055
|
+
div.setAttribute('data-texture-freed-count', String(metrics.freedCount));
|
|
1056
|
+
} else {
|
|
1057
|
+
div.removeAttribute('data-texture-previous-state');
|
|
1058
|
+
div.removeAttribute('data-texture-loaded-count');
|
|
1059
|
+
div.removeAttribute('data-texture-failed-count');
|
|
1060
|
+
div.removeAttribute('data-texture-freed-count');
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
// Update error information if present
|
|
1064
|
+
if (texture.error) {
|
|
1065
|
+
div.setAttribute(
|
|
1066
|
+
'data-texture-error',
|
|
1067
|
+
texture.error.code || texture.error.message,
|
|
1068
|
+
);
|
|
1069
|
+
} else {
|
|
1070
|
+
div.removeAttribute('data-texture-error');
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
|
|
859
1074
|
public destroy() {
|
|
860
1075
|
// Stop animation stats timer
|
|
861
1076
|
this.stopAnimationStatsTimer();
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { AnimationManager } from './AnimationManager.js';
|
|
2
|
-
import type { PlaybackSettings, StopMethodOptions } from './Playback.js';
|
|
3
|
-
import { type Transition, type TransitionTypes } from './Transition.js';
|
|
4
|
-
import { type TimingFunction } from './utils.js';
|
|
5
|
-
import Playback from './Playback.js';
|
|
6
|
-
export type AnimatableValues = number | number[];
|
|
7
|
-
export type AnimationParams<T> = Partial<PlaybackSettings> & {
|
|
8
|
-
[K in keyof T]?: TransitionTypes;
|
|
9
|
-
};
|
|
10
|
-
export type AnimatableTarget = Record<string, AnimatableValues>;
|
|
11
|
-
export type AnimationSettings = {
|
|
12
|
-
[key: string]: TransitionTypes | boolean | number | string | TimingFunction | StopMethodOptions | undefined;
|
|
13
|
-
} & Partial<PlaybackSettings>;
|
|
14
|
-
export default class Animation extends Playback {
|
|
15
|
-
target: AnimatableTarget;
|
|
16
|
-
transitions: Record<string, Transition[]>;
|
|
17
|
-
transitionKeys: string[];
|
|
18
|
-
constructor(animationManager: AnimationManager, target: AnimatableTarget, animationParams: AnimationSettings);
|
|
19
|
-
updateValues(currentTime: number): void;
|
|
20
|
-
applyStartValues(): void;
|
|
21
|
-
}
|
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
import { createTransition, } from './Transition.js';
|
|
2
|
-
import { normalizeTimingFunction } from './utils.js';
|
|
3
|
-
import Playback, { PlaybackSettingsKeys } from './Playback.js';
|
|
4
|
-
const mapTransitions = (target, animationParams, aDuration, aEasing) => {
|
|
5
|
-
const transitionsByKey = {};
|
|
6
|
-
const keys = Object.keys(animationParams);
|
|
7
|
-
const filteredKeys = [];
|
|
8
|
-
for (let i = 0; i < keys.length; i++) {
|
|
9
|
-
const key = keys[i];
|
|
10
|
-
//skip playback settings
|
|
11
|
-
if (PlaybackSettingsKeys[key] === true) {
|
|
12
|
-
continue;
|
|
13
|
-
}
|
|
14
|
-
transitionsByKey[key] = [];
|
|
15
|
-
filteredKeys.push(key);
|
|
16
|
-
}
|
|
17
|
-
aEasing = aEasing ?? undefined;
|
|
18
|
-
//only initialize these values when needed to avoid unnecessary workload
|
|
19
|
-
let easing;
|
|
20
|
-
let delay;
|
|
21
|
-
let duration;
|
|
22
|
-
let to;
|
|
23
|
-
let from;
|
|
24
|
-
let start;
|
|
25
|
-
let end;
|
|
26
|
-
for (let i = 0; i < filteredKeys.length; i++) {
|
|
27
|
-
const key = filteredKeys[i];
|
|
28
|
-
const prop = target[key];
|
|
29
|
-
if (prop === undefined) {
|
|
30
|
-
console.warn(`CoreAnimation: property "${key}" does not exist on target.`);
|
|
31
|
-
continue;
|
|
32
|
-
}
|
|
33
|
-
const aProp = animationParams[key];
|
|
34
|
-
if (typeof aProp === 'number') {
|
|
35
|
-
transitionsByKey[key].push(createTransition({
|
|
36
|
-
to: aProp,
|
|
37
|
-
from: undefined,
|
|
38
|
-
start: 0,
|
|
39
|
-
end: aDuration,
|
|
40
|
-
delay: 0,
|
|
41
|
-
duration: aDuration,
|
|
42
|
-
easing: aEasing,
|
|
43
|
-
}));
|
|
44
|
-
continue;
|
|
45
|
-
}
|
|
46
|
-
easing = aEasing;
|
|
47
|
-
if (typeof aProp === 'object' && Array.isArray(aProp) === false) {
|
|
48
|
-
delay = aProp.delay ?? 0;
|
|
49
|
-
duration = aProp.duration ?? aDuration;
|
|
50
|
-
from = aProp.from;
|
|
51
|
-
start = delay;
|
|
52
|
-
end = start + duration;
|
|
53
|
-
easing =
|
|
54
|
-
aProp.easing !== undefined
|
|
55
|
-
? normalizeTimingFunction(aProp.easing) ?? easing
|
|
56
|
-
: easing;
|
|
57
|
-
transitionsByKey[key].push(createTransition({
|
|
58
|
-
to: aProp.to,
|
|
59
|
-
from: from,
|
|
60
|
-
start,
|
|
61
|
-
end,
|
|
62
|
-
delay,
|
|
63
|
-
duration,
|
|
64
|
-
easing,
|
|
65
|
-
}));
|
|
66
|
-
continue;
|
|
67
|
-
}
|
|
68
|
-
//keyframed animation
|
|
69
|
-
let frame;
|
|
70
|
-
const isUsableArray = Array.isArray(aProp) && aProp.length > 0;
|
|
71
|
-
//keyframed animation for number arrays
|
|
72
|
-
if (isUsableArray === true) {
|
|
73
|
-
const spreadDuration = aDuration / Math.max(aProp.length - 1, 1);
|
|
74
|
-
start = 0;
|
|
75
|
-
let startValue = aProp[0];
|
|
76
|
-
if (typeof startValue === 'object') {
|
|
77
|
-
frame = aProp[0];
|
|
78
|
-
startValue = frame.to;
|
|
79
|
-
to = startValue;
|
|
80
|
-
from = frame.from;
|
|
81
|
-
duration = frame.duration ?? aDuration;
|
|
82
|
-
delay = frame.delay ?? 0;
|
|
83
|
-
easing =
|
|
84
|
-
frame.easing !== undefined
|
|
85
|
-
? normalizeTimingFunction(frame.easing) ?? easing
|
|
86
|
-
: easing;
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
to = startValue;
|
|
90
|
-
from = startValue;
|
|
91
|
-
duration = aDuration;
|
|
92
|
-
delay = 0;
|
|
93
|
-
}
|
|
94
|
-
start = delay;
|
|
95
|
-
end = start + duration;
|
|
96
|
-
const len = aProp.length;
|
|
97
|
-
if (len > 1) {
|
|
98
|
-
for (let j = 1; j < len; j++) {
|
|
99
|
-
const value = aProp[j];
|
|
100
|
-
if (typeof value === 'object') {
|
|
101
|
-
frame = value;
|
|
102
|
-
to = frame.to;
|
|
103
|
-
from = startValue;
|
|
104
|
-
duration = frame.duration ?? spreadDuration;
|
|
105
|
-
delay = frame.delay ?? 0;
|
|
106
|
-
easing =
|
|
107
|
-
frame.easing !== undefined
|
|
108
|
-
? normalizeTimingFunction(frame.easing) ?? easing
|
|
109
|
-
: easing;
|
|
110
|
-
}
|
|
111
|
-
else {
|
|
112
|
-
to = value;
|
|
113
|
-
from = startValue;
|
|
114
|
-
duration = spreadDuration;
|
|
115
|
-
delay = 0;
|
|
116
|
-
}
|
|
117
|
-
start = start + delay;
|
|
118
|
-
end = start + duration;
|
|
119
|
-
transitionsByKey[key].push(createTransition({
|
|
120
|
-
to,
|
|
121
|
-
from,
|
|
122
|
-
start,
|
|
123
|
-
end,
|
|
124
|
-
delay,
|
|
125
|
-
duration,
|
|
126
|
-
easing,
|
|
127
|
-
}));
|
|
128
|
-
//carry over to next transition
|
|
129
|
-
start = end;
|
|
130
|
-
startValue = to;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
else {
|
|
134
|
-
transitionsByKey[key].push(createTransition({
|
|
135
|
-
to,
|
|
136
|
-
from,
|
|
137
|
-
start,
|
|
138
|
-
end,
|
|
139
|
-
delay,
|
|
140
|
-
duration,
|
|
141
|
-
easing,
|
|
142
|
-
}));
|
|
143
|
-
}
|
|
144
|
-
continue;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
return transitionsByKey;
|
|
148
|
-
};
|
|
149
|
-
export default class Animation extends Playback {
|
|
150
|
-
target;
|
|
151
|
-
transitions;
|
|
152
|
-
transitionKeys;
|
|
153
|
-
constructor(animationManager, target, animationParams) {
|
|
154
|
-
super(animationManager, animationParams);
|
|
155
|
-
this.target = target;
|
|
156
|
-
this.transitions = mapTransitions(target, animationParams, this.duration, this.easing);
|
|
157
|
-
this.transitionKeys = Object.keys(this.transitions);
|
|
158
|
-
}
|
|
159
|
-
updateValues(currentTime) {
|
|
160
|
-
for (let i = 0; i < this.transitionKeys.length; i++) {
|
|
161
|
-
const key = this.transitionKeys[i];
|
|
162
|
-
const transitions = this.transitions[key];
|
|
163
|
-
for (let j = 0; j < transitions.length; j++) {
|
|
164
|
-
const transition = transitions[j];
|
|
165
|
-
if (currentTime >= transition.start && currentTime <= transition.end) {
|
|
166
|
-
//apply value to target
|
|
167
|
-
this.target[key] =
|
|
168
|
-
transition.update(currentTime - transition.start);
|
|
169
|
-
continue;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
applyStartValues() {
|
|
175
|
-
//set start values for transitions
|
|
176
|
-
for (let i = 0; i < this.transitionKeys.length; i++) {
|
|
177
|
-
const key = this.transitionKeys[i];
|
|
178
|
-
const transitionsByKey = this.transitions[key];
|
|
179
|
-
//only need to set the first transition's from value
|
|
180
|
-
const firstTransition = transitionsByKey[0];
|
|
181
|
-
const from = firstTransition.from;
|
|
182
|
-
if (from !== undefined) {
|
|
183
|
-
this.target[key] = from;
|
|
184
|
-
firstTransition.current = from;
|
|
185
|
-
firstTransition.from = from;
|
|
186
|
-
continue;
|
|
187
|
-
}
|
|
188
|
-
const currentValue = this.target[key];
|
|
189
|
-
firstTransition.from = currentValue;
|
|
190
|
-
firstTransition.current = currentValue;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
//# sourceMappingURL=Animation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Animation.js","sourceRoot":"","sources":["../../../../src/core/animations/Animation.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { EventEmitter } from '../../common/EventEmitter.js';
|
|
2
|
-
import type { AnimationManager } from './AnimationManager.js';
|
|
3
|
-
import { type TimingFunction } from './utils.js';
|
|
4
|
-
export declare enum StopMethodFlags {
|
|
5
|
-
Immediate = 0,
|
|
6
|
-
Reset = 1,
|
|
7
|
-
Reverse = 2
|
|
8
|
-
}
|
|
9
|
-
export type StopMethodOptions = 'reverse' | 'reset' | 'immediate';
|
|
10
|
-
export declare const getStopMethodFlag: (method: string | undefined) => StopMethodFlags;
|
|
11
|
-
export interface PlaybackSettings {
|
|
12
|
-
delay: number;
|
|
13
|
-
duration: number;
|
|
14
|
-
easing: string | TimingFunction;
|
|
15
|
-
loop: boolean;
|
|
16
|
-
repeat: number;
|
|
17
|
-
reverse: boolean;
|
|
18
|
-
stopMethod: StopMethodOptions;
|
|
19
|
-
autoPlay: boolean;
|
|
20
|
-
}
|
|
21
|
-
export declare enum PlaybackState {
|
|
22
|
-
Idle = 0,
|
|
23
|
-
Destroyed = 1,
|
|
24
|
-
Stopped = 2,
|
|
25
|
-
Finished = 3,
|
|
26
|
-
Paused = 4,
|
|
27
|
-
Playing = 5,
|
|
28
|
-
Stopping = 6
|
|
29
|
-
}
|
|
30
|
-
export declare const PlaybackSettingsKeys: {
|
|
31
|
-
delay: boolean;
|
|
32
|
-
duration: boolean;
|
|
33
|
-
easing: boolean;
|
|
34
|
-
loop: boolean;
|
|
35
|
-
repeat: boolean;
|
|
36
|
-
reverse: boolean;
|
|
37
|
-
stopMethod: boolean;
|
|
38
|
-
autoPlay: boolean;
|
|
39
|
-
};
|
|
40
|
-
export declare function getPlaybackId(): number;
|
|
41
|
-
export default class Playback extends EventEmitter {
|
|
42
|
-
readonly animationManager: AnimationManager;
|
|
43
|
-
readonly id: number;
|
|
44
|
-
delay: number;
|
|
45
|
-
duration: number;
|
|
46
|
-
easing: TimingFunction | undefined;
|
|
47
|
-
loop: boolean;
|
|
48
|
-
repeat: number;
|
|
49
|
-
reverse: boolean;
|
|
50
|
-
stopMethod: StopMethodFlags;
|
|
51
|
-
state: PlaybackState;
|
|
52
|
-
startTime: number | null;
|
|
53
|
-
pauseTime: number | null;
|
|
54
|
-
endTime: number | null;
|
|
55
|
-
currentTime: number;
|
|
56
|
-
iteration: number;
|
|
57
|
-
constructor(animationManager: AnimationManager, settings?: Partial<PlaybackSettings>);
|
|
58
|
-
update(currentFrameTime: number): void;
|
|
59
|
-
updateValues(currentTime: number): void;
|
|
60
|
-
applyStartValues(): void;
|
|
61
|
-
start(): this;
|
|
62
|
-
stop(): void;
|
|
63
|
-
finish(): void;
|
|
64
|
-
}
|