Visitar URL original
feat(core): improve configurable behavior · ThatOpen/engine_components@292300c · GitHub
Skip to content

Commit 292300c

Browse files
agviegasagviegas
committed
feat(core): improve configurable behavior
1 parent b2d1fc7 commit 292300c

9 files changed

Lines changed: 303 additions & 52 deletions

File tree

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@thatopen/components",
33
"description": "Collection of core functionalities to author BIM apps.",
4-
"version": "2.2.5",
4+
"version": "2.3.0-alpha.1",
55
"author": "That Open Company",
66
"contributors": [
77
"Antonio Gonzalez Viegas (https://github.com/agviegas)",

‎packages/core/src/core/Types/src/base-scene.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,25 @@ export abstract class BaseScene extends BaseWorldItem implements Disposable {
3737
disposer.destroy(mesh);
3838
}
3939
}
40+
41+
this.deleteAllLights();
42+
43+
this.three.children = [];
44+
this.onDisposed.trigger();
45+
this.onDisposed.reset();
46+
}
47+
48+
deleteAllLights() {
4049
for (const [, light] of this.directionalLights) {
4150
light.removeFromParent();
4251
light.target.removeFromParent();
4352
light.dispose();
4453
}
54+
this.directionalLights.clear();
4555
for (const [, light] of this.ambientLights) {
4656
light.removeFromParent();
4757
light.dispose();
4858
}
49-
this.three.children = [];
50-
this.onDisposed.trigger();
51-
this.onDisposed.reset();
59+
this.ambientLights.clear();
5260
}
5361
}

‎packages/core/src/core/Types/src/component-with-ui.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from "./component";
2+
3+
export type ComponentUIElement = {
4+
name: string;
5+
componentID: string;
6+
attributes: { [name: string]: string };
7+
get: () => HTMLElement;
8+
};
9+
10+
export abstract class ComponentWithUI extends Component {
11+
abstract name: string;
12+
abstract getUI(): ComponentUIElement[];
13+
}

‎packages/core/src/core/Types/src/config-manager.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
export interface BooleanSettingsControl {
2+
type: "Boolean";
3+
value: boolean;
4+
}
5+
6+
export interface ColorSettingsControl {
7+
type: "Color";
8+
opacity: number;
9+
value: number;
10+
}
11+
12+
export interface TextSettingsControl {
13+
type: "Text";
14+
value: string;
15+
}
16+
17+
export interface NumberSettingControl {
18+
type: "Number";
19+
interpolable: boolean;
20+
min?: number;
21+
max?: number;
22+
value: number;
23+
}
24+
25+
export interface SelectSettingControl {
26+
type: "Select";
27+
options?: string[];
28+
value: string;
29+
}
30+
31+
export interface VectorSettingControl {
32+
type: "Vector";
33+
value: number[];
34+
}
35+
36+
type ControlEntry =
37+
| BooleanSettingsControl
38+
| ColorSettingsControl
39+
| TextSettingsControl
40+
| NumberSettingControl
41+
| SelectSettingControl
42+
| VectorSettingControl;
43+
44+
interface ControlsSchema {
45+
[name: string]: ControlEntry | ControlsSchema;
46+
}
47+
48+
export abstract class ConfigManager<T, U extends ControlsSchema> {
49+
protected abstract _list: U;
50+
51+
protected _component: T;
52+
53+
get controls() {
54+
return JSON.parse(JSON.stringify(this._list));
55+
}
56+
57+
constructor(component: T) {
58+
this._component = component;
59+
}
60+
}

‎packages/core/src/core/Types/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ export * from "./base-scene";
1010
export * from "./world";
1111
export * from "./data-set";
1212
export * from "./data-map";
13+
export * from "./component-with-ui";
14+
export * from "./config-manager";

‎packages/core/src/core/Types/src/interfaces.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,17 @@ export interface Createable {
100100
/**
101101
* Whether this component supports to be configured.
102102
*/
103-
export interface Configurable<T extends Record<string, any>> {
103+
export interface Configurable<T, U> {
104104
/** Wether this components has been already configured. */
105105
isSetup: boolean;
106106

107-
/** Use the provided configuration to setup the tool. */
108-
setup: (config?: Partial<T>) => void | Promise<void>;
107+
/** Use the provided configuration to set up the tool. */
108+
setup: (config?: Partial<U>) => void | Promise<void>;
109109

110110
/** Fired after successfully calling {@link Configurable.setup()} */
111111
readonly onSetup: Event<any>;
112112

113-
/** Object holding the tool configuration. Is not meant to be edited directly, if you need
114-
* to make changes to this object, use {@link Configurable.setup()} just after the tool is instantiated.
113+
/** Object holding the tool configuration. You can edit this directly to change the object.
115114
*/
116115
config: Required<T>;
117116
}

‎packages/core/src/core/Worlds/src/simple-scene-config.ts‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
// eslint-disable-next-line max-classes-per-file
2+
import * as THREE from "three";
3+
import { SimpleScene } from "./simple-scene";
4+
import {
5+
ColorSettingsControl,
6+
ConfigManager,
7+
NumberSettingControl,
8+
VectorSettingControl,
9+
} from "../../Types";
10+
11+
type SimpleSceneConfigType = {
12+
backgroundColor: ColorSettingsControl;
13+
ambientLight: {
14+
color: ColorSettingsControl;
15+
intensity: NumberSettingControl;
16+
};
17+
directionalLight: {
18+
color: ColorSettingsControl;
19+
intensity: NumberSettingControl;
20+
position: VectorSettingControl;
21+
};
22+
};
23+
24+
class DirectionalLightConfig {
25+
private _list: SimpleSceneConfigType;
26+
private _scene: SimpleScene;
27+
28+
constructor(list: SimpleSceneConfigType, scene: SimpleScene) {
29+
this._list = list;
30+
this._scene = scene;
31+
}
32+
33+
get color() {
34+
return this._list.directionalLight.color.value;
35+
}
36+
37+
set color(value: number) {
38+
this._list.directionalLight.color.value = value;
39+
for (const [, light] of this._scene.directionalLights) {
40+
light.color = new THREE.Color(value);
41+
}
42+
}
43+
44+
get intensity() {
45+
return this._list.directionalLight.intensity.value;
46+
}
47+
48+
set intensity(value: number) {
49+
this._list.directionalLight.intensity.value = value;
50+
for (const [, light] of this._scene.directionalLights) {
51+
light.intensity = value;
52+
}
53+
}
54+
55+
get position() {
56+
return this._list.directionalLight.position.value;
57+
}
58+
59+
set position(value: number[]) {
60+
this._list.directionalLight.position.value = value;
61+
const [x, y, z] = value;
62+
for (const [, light] of this._scene.directionalLights) {
63+
light.position.set(x, y, z);
64+
}
65+
}
66+
}
67+
68+
class AmbientLightConfig {
69+
private _list: SimpleSceneConfigType;
70+
private _scene: SimpleScene;
71+
72+
constructor(list: SimpleSceneConfigType, scene: SimpleScene) {
73+
this._list = list;
74+
this._scene = scene;
75+
}
76+
77+
get color() {
78+
return this._list.ambientLight.color.value;
79+
}
80+
81+
set color(value: number) {
82+
this._list.ambientLight.color.value = value;
83+
for (const [, light] of this._scene.ambientLights) {
84+
light.color = new THREE.Color(value);
85+
}
86+
}
87+
88+
get intensity() {
89+
return this._list.ambientLight.intensity.value;
90+
}
91+
92+
set intensity(value: number) {
93+
this._list.ambientLight.intensity.value = value;
94+
for (const [, light] of this._scene.ambientLights) {
95+
light.intensity = value;
96+
}
97+
}
98+
}
99+
100+
/**
101+
* Configuration interface for the {@link SimpleScene}.
102+
*/
103+
export interface SimpleSceneConfig {
104+
directionalLight: {
105+
color: THREE.Color;
106+
intensity: number;
107+
position: THREE.Vector3;
108+
};
109+
ambientLight: {
110+
color: THREE.Color;
111+
intensity: number;
112+
};
113+
}
114+
115+
export class SimpleSceneConfigManager extends ConfigManager<
116+
SimpleScene,
117+
SimpleSceneConfigType
118+
> {
119+
protected _list = {
120+
backgroundColor: {
121+
value: 0,
122+
opacity: 1,
123+
type: "Color" as const,
124+
},
125+
ambientLight: {
126+
color: {
127+
type: "Color" as const,
128+
opacity: 1,
129+
value: 1,
130+
},
131+
intensity: {
132+
type: "Number" as const,
133+
interpolable: false,
134+
value: 2,
135+
},
136+
},
137+
directionalLight: {
138+
color: {
139+
type: "Color" as const,
140+
opacity: 1,
141+
value: 1,
142+
},
143+
intensity: {
144+
type: "Number" as const,
145+
interpolable: false,
146+
value: 2,
147+
},
148+
position: {
149+
type: "Vector" as const,
150+
value: [],
151+
},
152+
},
153+
};
154+
155+
ambientLight = new AmbientLightConfig(this._list, this._component);
156+
157+
directionalLight = new DirectionalLightConfig(this._list, this._component);
158+
159+
get backgroundColor() {
160+
return this._list.backgroundColor.value;
161+
}
162+
163+
set backgroundColor(value: number) {
164+
this._list.backgroundColor.value = value;
165+
this._component.three.background = new THREE.Color(value);
166+
}
167+
}

0 commit comments

Comments
 (0)