projects/atft/src/lib/object/connector/line-connector.component.ts
OnDestroy
OnChanges
| providers |
provideParent(LineConnectorComponent)
|
| selector | atft-line-connector |
| template | |
Properties |
Methods |
|
Inputs |
Outputs |
constructor(rendererService: RendererService, parent: AbstractObject3D<any>, animationService: AnimationService)
|
||||||||||||
|
Parameters :
|
| animated | |
Type : boolean
|
|
Default value : true
|
|
| dashSize | |
Type : number
|
|
Default value : 3
|
|
| gapSize | |
Type : number
|
|
Default value : 0.5
|
|
| lineType | |
Type : LineType
|
|
Default value : LineType.dashed
|
|
| lineWidth | |
Type : number
|
|
Default value : 2
|
|
| materialColor | |
Type : number
|
|
Default value : 0xFFFFFF
|
|
| opacity | |
Type : number
|
|
Default value : 1
|
|
| solid | |
Type : boolean
|
|
Default value : false
|
|
| source | |
Type : AbstractObject3D<THREE.Object3D>
|
|
|
Inherited from
AbstractConnector
|
|
|
Defined in
AbstractConnector:10
|
|
| target | |
Type : AbstractObject3D<THREE.Object3D>
|
|
|
Inherited from
AbstractConnector
|
|
|
Defined in
AbstractConnector:13
|
|
| layer | |
Type : number
|
|
Default value : 0
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:42
|
|
| name | |
Type : string
|
|
Default value : uuidv4()
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:40
|
|
| rotateX | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:24
|
|
|
Rotation in Euler angles (radians) with order X, Y, Z. |
|
| rotateY | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:25
|
|
| rotateZ | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:26
|
|
| scaleX | |
Type : number
|
|
Default value : 1
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:36
|
|
| scaleY | |
Type : number
|
|
Default value : 1
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:37
|
|
| scaleZ | |
Type : number
|
|
Default value : 1
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:38
|
|
| translateX | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:31
|
|
|
Translate the geometry. This is typically done as a one time operation, and not during a loop. |
|
| translateY | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:32
|
|
| translateZ | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:33
|
|
| changed | |
Type : EventEmitter
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:44
|
|
| Private animate |
animate()
|
|
Returns :
void
|
| Public createLineMesh |
createLineMesh()
|
|
Inherited from
AbstractConnector
|
|
Defined in
AbstractConnector:50
|
|
Returns :
Line2
|
| Protected getPositions |
getPositions()
|
|
Returns :
number[]
|
| Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:127
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:107
|
|
Returns :
void
|
| updateLineGeometry |
updateLineGeometry()
|
|
Inherited from
AbstractConnector
|
|
Defined in
AbstractConnector:85
|
|
Returns :
void
|
| Protected newObject3DInstance |
newObject3DInstance()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:18
|
|
Returns :
THREE.Object3D
|
| Private watchObjects |
watchObjects()
|
|
Inherited from
AbstractConnector
|
|
Defined in
AbstractConnector:26
|
|
Returns :
void
|
| Public addChild | ||||||
addChild(object: AbstractObject3D<any>)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:143
|
||||||
|
Parameters :
Returns :
void
|
| Protected afterInit |
afterInit()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:156
|
|
Returns :
void
|
| Public applyRotation |
applyRotation()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:118
|
|
Returns :
void
|
| Public applyScale |
applyScale()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:135
|
|
Returns :
void
|
| Public applyTranslation |
applyTranslation()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:127
|
|
Returns :
void
|
| Public findByName | ||||||
findByName(name: string)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:185
|
||||||
|
Parameters :
Returns :
any
|
| Public getChildren |
getChildren()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:202
|
|
Returns :
Array<AbstractObject3D<any>>
|
| Public getObject |
getObject()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:175
|
|
Returns :
T
|
| Public ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:181
|
|
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:97
|
|
Returns :
void
|
| Protected recursionByName | |||||||||
recursionByName(currentNode: AbstractObject3D<any>, name: string)
|
|||||||||
|
Inherited from
AbstractObject3D
|
|||||||||
|
Defined in
AbstractObject3D:192
|
|||||||||
|
Parameters :
Returns :
any
|
| Public removeChild | ||||||
removeChild(object: AbstractObject3D<any>)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:160
|
||||||
|
Parameters :
Returns :
void
|
| Public removeChildByName | ||||||
removeChildByName(name: string)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:206
|
||||||
|
Parameters :
Returns :
void
|
| Public updateParent |
updateParent()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:111
|
|
Returns :
void
|
| Protected animation |
Type : Subscription
|
| Protected clock |
Default value : new THREE.Clock()
|
| Protected line |
Type : Line2
|
| Private matLine |
Type : LineMaterial
|
| Protected time |
Type : number
|
Default value : 0
|
| Protected timeScale |
Type : number
|
Default value : 5
|
| Protected sourceSub |
Type : Subscription
|
|
Inherited from
AbstractConnector
|
|
Defined in
AbstractConnector:15
|
| Protected targetSub |
Type : Subscription
|
|
Inherited from
AbstractConnector
|
|
Defined in
AbstractConnector:16
|
| Protected childlren |
Type : Array<AbstractObject3D<any>>
|
Default value : []
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:46
|
| Protected object |
Type : T
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:48
|
import {Component, Input, OnChanges, OnDestroy, Optional, SimpleChanges, SkipSelf} from '@angular/core';
import {Subscription} from 'rxjs';
import * as THREE from 'three';
import {AnimationService} from '../../animation';
import {RendererService} from '../../renderer/renderer.service';
import {provideParent} from '../../util';
import {AbstractObject3D} from '../abstract-object-3d';
import {AbstractConnector} from './abstract-connector';
import {Line2} from 'three/examples/jsm/lines/Line2';
import {LineGeometry} from 'three/examples/jsm/lines/LineGeometry';
import {LineMaterial} from 'three/examples/jsm/lines/LineMaterial';
export enum LineType {
dashed = 'dash',
solid = 'solid'
}
@Component({
selector: 'atft-line-connector',
providers: [provideParent(LineConnectorComponent)],
template: '<ng-content></ng-content>'
})
export class LineConnectorComponent extends AbstractConnector<Line2> implements OnDestroy, OnChanges {
@Input() materialColor = 0xFFFFFF;
@Input() solid = false;
@Input() lineWidth = 2;
@Input() dashSize = 3;
@Input() gapSize = 0.5;
@Input() opacity = 1;
@Input() lineType: LineType = LineType.dashed;
@Input() animated = true;
protected animation!: Subscription;
protected time = 0;
protected timeScale = 5;
protected clock = new THREE.Clock();
protected line!: Line2;
private matLine!: LineMaterial;
constructor(
protected override rendererService: RendererService,
@SkipSelf() @Optional() protected override parent: AbstractObject3D<any>,
protected animationService: AnimationService,
) {
super(rendererService, parent);
}
public createLineMesh(): Line2 {
const positions = this.getPositions();
const geometry = new LineGeometry();
geometry.setPositions(positions);
this.matLine = new LineMaterial({
// wrong type in three@types def color?: number;
// color: parseInt(Number(this.materialColor).toString(), 10),
color: this.materialColor,
linewidth: this.lineWidth,
vertexColors: false,
dashed: !this.solid,
dashSize: this.dashSize,
dashOffset: 0,
gapSize: this.gapSize,
opacity: this.opacity,
transparent: this.opacity < 1,
depthWrite: true
});
this.matLine.resolution.set(window.innerWidth, window.innerHeight);
if (!this.solid) {
this.matLine.defines['USE_DASH'] = '';
}
this.line = new Line2(geometry, this.matLine);
this.line.computeLineDistances();
if (this.animated) {
this.animate = this.animate.bind(this);
this.animation = this.animationService.animate.subscribe(this.animate);
}
return this.line;
}
updateLineGeometry(): void {
const positions = this.getPositions();
this.line.geometry.dispose();
this.line.geometry.setPositions(positions);
this.line.computeLineDistances();
}
protected getPositions(): number[] {
if (!this.source || !this.target) {
throw new Error('AbstractConnector: source or target inputs are missing!');
}
const source = this.source.getObject().position;
const target = this.target.getObject().position;
const positions = [];
positions.push(source.x, source.y, source.z);
positions.push(target.x, target.y, target.z);
return positions;
}
override ngOnDestroy() {
super.ngOnDestroy();
if (this.animation) {
this.animation.unsubscribe();
}
}
private animate() {
// console.log('LineConnectorComponent.animate');
const material: any = this.line?.material;
if (this.line?.material) {
// console.log('LineConnectorComponent.animate do');
this.time += this.clock.getDelta();
// material.uniforms.time.value = -1 * this.time * this.timeScale;
material.dashOffset = -1 * this.time * this.timeScale;
this.line.computeLineDistances();
}
}
public override ngOnChanges(changes: SimpleChanges) {
if (!this.object) {
return;
}
super.ngOnChanges(changes);
let modified = false;
if (['materialColor'].some(propName => propName in changes)) {
console.log('Changed color to', this.materialColor);
this.line.material.color = new THREE.Color(this.materialColor);
this.line.material.needsUpdate = true;
modified = true;
}
if (modified) {
this.changed.emit();
this.rendererService.render();
}
}
}