A high performance angular component for displaying 3D representations of bordnet harnesses. Harness element selection, arbitrary coloring and custom views are also supported.
npm install @4soft/harness-browser3dhtml
[selectedIds]="selectedIds"
[colors]="colors"
[settings]="settings"
[hooks]="hooks"
(initialized)="addAPI($event)"
(pickedIds)="pickIds($event)"
>
`
`ts
class AppComponent {
data: Harness;
selectedIds: string[];
colors: SetColorAPIStruct[];
settings: SettingsAPIStruct;
hooks: HooksAPIStruct;
api: HarnessBrowser3dLibraryAPI;
addAPI(api: HarnessBrowser3dLibraryAPI) {
this.api = api;
}
pickIds(ids: string[]) {
this.pickedIds = ids;
}
}
`
It is recommended to set the change detection strategy of the parent component to OnPush. It improves the performance when moving the camera.
$3
Add harnesses by inserting an array of Harness objects into the addHarnesses property. Include Harness from api\alias.ts.
Harness has been generated from assets\geometry-api.yaml.
$3
Select harness elements by inserting an array of harness element ids into the selectedIds property.
$3
Click on harness element geometries to pick them. Picking harness elements also selects them. Ids of the picked harness elements are passed in the pickedIds event.
$3
Set arbitrary colors for harness elements by inserting an array of SetColorAPIStruct objects into the colors property. Include SetColorAPIStruct from api\structs.ts.
$3
Apply settings by setting a SettingsAPIStruct object as settings property. Include SettingsAPIStruct from api\structs.ts.
$3
Hooks are functions that are called during certain points in execution.
- geometryParser parses a geometry string into a scene object
- animateBegin is called before each frame
- animateEnd is called after each frame
Set hooks by setting a HooksAPIStruct object as hooks property. Include HooksAPIStruct from api\structs.ts.
$3
Default geometries can be replaced by supplied geometries. Set geometryMode to GeometryModeAPIEnum.loaded and set geometryParser to a function that parses the string data into a Scene object. Open the geometry files and push their contents into the graphics array on a Harness object and add the harness.
$3
A HarnessBrowser3dLibraryAPI object is used to invoke certain actions, like resetting the camera. It is passed in the initialized event directly after the component has been initialized. Include HarnessBrowser3dLibraryAPI from api\api.ts.
Views
Predefined and also custom views on the harness geometries are supported. Predefined views are located in the views folder.
Views operate on string properties that are defined on the input harness data.
`json
{
"id": "exampleId",
"viewProperties": {
"exampleProperty": "exampleValue"
}
}
`
In this example an exampleProperty property is added to the object exampleId with value exampleValue.
$3
Pass the view into the setView API function. The previous view is disposed.
$3
Views are instances of View in views\view.ts.
`ts
class View {
public readonly propertyKey: string;
public readonly defaultValue: string;
public readonly material: Material;
public readonly mapper: (properties: string[]) => BufferAttribute;
}
`
- propertyKey is the property key in the input data and in the vertex shader
- defaultValue is the default value for harness elements without this property
- material contains the shaders for this view
- mapper is a function that processes the property values into a suitable buffer attribute
$3
Built-in shader attributes are controlled by the viewer and can be used by custom views.
- vec3 pDefaultColor is the default color of the corresponding harness element
- vec3 pColor is the specified color as set in the colors input property on the angular component
- float pEnabled is whether the harness element is enabled
- float pDiffState corresponds to the diffState property. See DiffStateAPIEnum for details.
$3
Diff
- property diffState
- values can be unmodified, added, removed, modified_new, modified_old
- hide certain states by setting the display booleans
- example
`ts
diffView.displayRemoved = false;
api.setView(diffView);
``