A-Frame additions (#25006)

* Add new PropertyTypes

* A-Frame: Expand registerComponent test.

* Add generics to properties, components, and systems.

* Add missing ShaderDefinition interface.

* Add missing event data.

* Add missing throttle and throttleTick functions.

* Update Typescript version

* Use classes for component, system, and geometry

* Add tests for class inheritance.

* Improve defaults, rename ComponentBase -> ComponentDefault

* Saw the sign - many simplifications, return to interfaces
Can't extend a class definition that doesn't exist at runtime, so we need to use interfaces?

* Remove unnecessary generics

* Simplified some references, added a couple tests.

* Moving undefined system from generic to property.

* Revert "Update Typescript version"

This reverts commit 43ef72cef75b0bcee2d04eddcaa0f594290ec46f.
This commit is contained in:
Trygve Wastvedt
2018-05-08 12:12:01 -05:00
committed by Sheetal Nandi
parent 5660c8b816
commit 229e28706e
3 changed files with 160 additions and 85 deletions

View File

@@ -21,9 +21,9 @@ type MyEntity = AFrame.Entity<{
material: THREE.Material;
sound: { pause(): void };
}>;
const camera = document.querySelector<MyEntity>('a-entity[camera]').components.camera;
const material = document.querySelector<MyEntity>('a-entity[material]').components.material;
document.querySelector<MyEntity>('a-entity[sound]').components.sound.pause();
const camera = (document.querySelector('a-entity[camera]') as MyEntity).components.camera;
const material = (document.querySelector('a-entity[material]') as MyEntity).components.material;
(document.querySelector('a-entity[sound]') as MyEntity).components.sound.pause();
entity.getDOMAttribute('geometry').primitive;
@@ -38,21 +38,82 @@ entity.addEventListener('child-detached', (event) => {
});
// Components
const Component = AFRAME.registerComponent('test', {});
interface TestComponent extends AFrame.Component {
multiply: (f: number) => number;
data: {
myProperty: any[],
string: string,
num: number
};
system: TestSystem;
}
const Component = AFRAME.registerComponent<TestComponent>('test-component', {
schema: {
myProperty: {
default: [],
parse() { return [true]; },
},
string: { type: 'string' },
num: 0
},
init() {
this.data.num = 0;
},
update() {},
tick() {},
remove() {},
pause() {},
play() {},
multiply(this: TestComponent, f: number) {
// Reference to system because both were registered with the same name.
return f * this.data.num * this.system.data.counter;
}
});
// Scene
const scene = document.querySelector('a-scene');
scene.hasLoaded;
// System
const system = scene.systems['systemName'];
interface TestSystem extends AFrame.System {
data: {
counter: number;
};
}
const testSystem: AFrame.SystemDefinition<TestSystem> = {
schema: {
counter: 0
},
init() {
this.data.counter = 1;
}
};
AFRAME.registerSystem('test-component', testSystem);
// Register Custom Geometry
AFRAME.registerGeometry('a-test-geometry', {
interface TestGeometry extends AFrame.Geometry {
schema: AFrame.MultiPropertySchema<{
groupIndex: number;
}>;
}
AFRAME.registerGeometry<TestGeometry>('a-test-geometry', {
schema: {
groupIndex: { default: 0 }
},
init(data) {
this.geometry = new THREE.Geometry();
const temp = data.groupIndex;
temp;
}
});

View File

@@ -2,6 +2,7 @@
// Project: https://aframe.io/
// Definitions by: Paul Shannon <https://github.com/devpaul>
// Roberto Ritger <https://github.com/bertoritger>
// Trygve Wastvedt <https://github.com/twastvedt>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
@@ -19,7 +20,7 @@ declare var hasNativeWebVRImplementation: boolean;
interface Document {
createElement(tagName: string): AFrame.Entity;
querySelector(selectors: 'a-scene'): AFrame.Scene;
querySelector<T extends AFrame.Entity<any>>(selectors: string): T;
querySelector(selectors: string): AFrame.Entity<any>;
querySelectorAll(selectors: string): NodeListOf<AFrame.Entity<any> | Element>;
}
@@ -36,15 +37,15 @@ declare namespace AFrame {
components: { [ key: string ]: ComponentDescriptor };
geometries: { [ key: string ]: GeometryDescriptor };
primitives: { [ key: string ]: Entity };
registerComponent(name: string, component: ComponentDefinition): ComponentConstructor;
registerComponent<T extends Component>(name: string, component: ComponentDefinition<T>): ComponentConstructor<T>;
registerElement(name: string, element: ANode): void;
registerGeometry(name: string, geometry: GeometryDefinition): Geometry;
registerGeometry<T extends Geometry>(name: string, geometry: GeometryDefinition<T>): GeometryConstructor<T>;
registerPrimitive(name: string, primitive: PrimitiveDefinition): void;
registerShader(name: string, shader: any): void;
registerSystem(name: string, definition: SystemDefinition): void;
registerShader<T extends Shader>(name: string, shader: T): ShaderConstructor<T>;
registerSystem<T extends System>(name: string, definition: SystemDefinition<T>): SystemConstructor<T>;
schema: SchemaUtils;
shaders: { [ key: string ]: ShaderDescriptor };
systems: { [key: string]: System };
systems: { [key: string]: SystemConstructor };
THREE: typeof THREE;
TWEEN: typeof TWEEN;
utils: Utils;
@@ -89,54 +90,39 @@ declare namespace AFrame {
tick(): void;
}
interface Component {
interface Component<T extends { [key: string]: any } = any, S extends System = System> {
attrName?: string;
data?: any;
data: T;
dependencies?: string[];
el: Entity;
id: string;
multiple?: boolean;
name: string;
schema: Schema;
schema: Schema<T>;
system: S | undefined;
init(data?: any): void;
pause(): void;
play(): void;
remove(): void;
tick?(time: number, timeDelta: number): void;
update(oldData: any): void;
updateSchema?(): void;
init(this: this, data?: T): void;
pause(this: this): void;
play(this: this): void;
remove(this: this): void;
tick?(this: this, time: number, timeDelta: number): void;
update(this: this, oldData: T): void;
updateSchema?(this: this): void;
extendSchema(update: Schema): void;
flushToDOM(): void;
extendSchema(this: this, update: Schema): void;
flushToDOM(this: this): void;
}
interface ComponentConstructor {
new (el: Entity, name: string, id: string): Component;
interface ComponentConstructor<T extends Component> {
new (el: Entity, attrValue: string, id: string): T;
}
interface ComponentDefinition {
dependencies?: string[];
el?: Entity;
id?: string;
multiple?: boolean;
schema?: Schema;
type ComponentDefinition<T extends Component = Component> = Partial<T>;
init?(data?: any): void;
pause?(): void;
play?(): void;
remove?(): void;
tick?(time: number, timeDelta: number): void;
update?(oldData: any): void;
updateSchema?(): void;
[ key: string ]: any;
}
interface ComponentDescriptor {
Component: Component;
dependencies: string[] | null;
multiple: boolean | null;
interface ComponentDescriptor<T extends Component = Component> {
Component: ComponentConstructor<T>;
dependencies: string[] | undefined;
multiple: boolean | undefined;
// internal APIs2
// parse
@@ -144,7 +130,6 @@ declare namespace AFrame {
// schema
// stringify
// type
[ key: string ]: any;
}
interface Coordinate {
@@ -153,8 +138,14 @@ declare namespace AFrame {
z: number;
}
interface DefaultComponents {
position: Component<Coordinate>;
rotation: Component<Coordinate>;
scale: Component<Coordinate>;
}
interface Entity<C = ObjectMap<Component>> extends ANode {
components: C;
components: C & DefaultComponents;
isPlaying: boolean;
object3D: THREE.Object3D;
object3DMap: ObjectMap<THREE.Object3D>;
@@ -165,8 +156,8 @@ declare namespace AFrame {
/**
* @deprecated since 0.4.0
*/
getComputedAttribute<T = Component>(attr: string): T;
getDOMAttribute<T = any>(attr: string): T;
getComputedAttribute(attr: string): Component;
getDOMAttribute(attr: string): any;
getObject3D(type: string): THREE.Object3D;
getOrCreateObject3D(type: string, construct: any): THREE.Object3D;
is(stateName: string): boolean;
@@ -179,7 +170,6 @@ declare namespace AFrame {
// getAttribute specific usages
getAttribute(type: string): any;
getAttribute<T = Component>(attr: string): T;
getAttribute(type: 'position' | 'rotation' | 'scale'): Coordinate;
// setAttribute specific usages
@@ -192,12 +182,18 @@ declare namespace AFrame {
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
type DetailEvent<D> = Event & { detail: D };
type DetailEvent<D> = Event & {
detail: D;
target: EventTarget & Entity;
};
interface EntityEventMap {
'child-attached': DetailEvent<{ el: Element | Entity }>;
'child-detached': DetailEvent<{ el: Element | Entity }>;
'componentchanged': DetailEvent<{ name: string }>;
'componentchanged': DetailEvent<{
name: string,
id: string
}>;
'componentremoved': DetailEvent<{
name: string,
id: string,
@@ -215,23 +211,28 @@ declare namespace AFrame {
interface Geometry {
name: string;
geometry: THREE.Geometry;
schema: Schema;
update(data: object): void;
[ key: string ]: any;
schema: Schema<any>;
init(this: this, data: { [P in keyof this['schema']]: any }): void;
// Would like the above to be:
// init?(this: this, data?: { [P in keyof T['schema']]: T['schema'][P]['default'] } ): void;
// I think this is prevented by the following issue: https://github.com/Microsoft/TypeScript/issues/21760.
}
interface GeometryDefinition extends ComponentDefinition {
geometry?: THREE.Geometry;
interface GeometryConstructor<T extends Geometry> {
new (): T;
}
interface GeometryDescriptor {
Geometry: Geometry;
type GeometryDefinition<T extends Geometry = Geometry> = Partial<T>;
interface GeometryDescriptor<T extends Geometry = Geometry> {
Geometry: GeometryConstructor<T>;
schema: Schema;
}
interface MultiPropertySchema {
[ key: string ]: SinglePropertySchema<any>;
}
type MultiPropertySchema<T extends { [key: string ]: any }> = {
[P in keyof T]: SinglePropertySchema<T[P]> | T[P];
};
interface PrimitiveDefinition {
defaultComponents?: any; // TODO cleanup type
@@ -240,8 +241,9 @@ declare namespace AFrame {
transforms?: any; // TODO cleanup type
}
type PropertyTypes = 'array' | 'boolean' | 'color' | 'int' | 'number' | 'selector' |
'selectorAll' | 'src' | 'string' | 'vec2' | 'vec3' | 'vec4';
type PropertyTypes = 'array' | 'asset' | 'audio' | 'boolean' | 'color' |
'int' | 'map' | 'model' | 'number' | 'selector' | 'selectorAll' |
'string' | 'vec2' | 'vec3' | 'vec4';
type SceneEvents = 'enter-vr' | 'exit-vr' | 'loaded' | 'renderstart';
@@ -265,7 +267,7 @@ declare namespace AFrame {
addEventListener(type: SceneEvents, listener: EventListener, useCapture?: boolean): void;
}
type Schema = SinglePropertySchema<any> | MultiPropertySchema;
type Schema<T = { [key: string]: any }> = SinglePropertySchema<T> | MultiPropertySchema<T>;
interface SchemaUtils {
isSingleProperty(schema: Schema): boolean;
@@ -274,11 +276,25 @@ declare namespace AFrame {
interface Shader {
name: string;
schema: Schema;
data: { [key: string]: any };
schema: Schema<this['data']>;
material: THREE.Material;
vertexShader: string;
fragmentShader: string;
init(this: this, data?: this['data']): void;
tick?(this: this, time: number, timeDelta: number): void;
update(this: this, oldData: this['data']): void;
}
interface ShaderDescriptor {
Shader: Shader;
interface ShaderConstructor<T extends Shader> {
new (): T;
}
type ShaderDefinition<T extends Shader = Shader> = Partial<T>;
interface ShaderDescriptor<T extends Shader = Shader> {
Shader: ShaderConstructor<T>;
schema: Schema;
}
@@ -287,27 +303,23 @@ declare namespace AFrame {
'default'?: T;
parse?(value: string): T;
stringify?(value: T): string;
[ key: string ]: any;
}
interface System {
data: any;
schema: Schema;
init(): void;
pause(): void;
play(): void;
tick?(): void;
data: { [key: string]: any };
schema: Schema<this['data']>;
init(this: this): void;
pause(this: this): void;
play(this: this): void;
tick?(this: this, t: number, dt: number): void;
}
interface SystemDefinition {
schema?: Schema;
init?(): void;
pause?(): void;
play?(): void;
tick?(): void;
[ key: string ]: any;
interface SystemConstructor<T extends System = System> {
new (scene: Scene): T;
}
type SystemDefinition<T extends System = System> = Partial<T>;
interface Utils {
coordinates: {
isCoordinate(value: string): boolean;
@@ -326,5 +338,8 @@ declare namespace AFrame {
diff(a: object, b: object): object;
extend(target: object, ... source: object[]): object;
extendDeep(target: object, ... source: object[]): object;
throttle(tickFunction: () => void, minimumInterval: number, optionalContext?: {}): (t: number, dt: number) => void;
throttleTick(tickFunction: (t: number, dt: number) => void, minimumInterval: number, optionalContext?: {}): (t: number, dt: number) => void;
}
}

View File

@@ -1,6 +1,5 @@
{
"extends": "dtslint/dt.json",
"rules": {
"no-unnecessary-generics": false
}
}