hd-wiring
v0.7.1
Published
Angular wiring component for hetida designer
Downloads
152
Readme
HdWiring
hdwiring is the part of hetida designer graphical composition tool and makes data wiring trough ui available. It provides a 'ready to use' angular component, which should simplify the use of hetida designer in general.
Requirements
Since hd wiring is an angular component, currently only angular applications can make use of it.
Angular applications with a minimum version of 9.x.
Installing
Peer Deps
you should have these peer dependencies in your package.json.
"@angular/common": "> 9.x.x <=12.x.x",
"@angular/core": "> 9.x.x <=12.x.x",
"@angular/animations": "> 9.x.x <=12.x.x",
"@angular/cdk": "> 9.x.x <=12.x.x",
"@angular/forms": "> 9.x.x <=12.x.x",
"@angular/material": "> 9.x.x <=12.x.x",
"hetida-flowchart": "^0.3.0",
"@danielmoncada/angular-datetime-picker": "^12.3.0",
"moment": "^2.29.1"
Angular Material
The component uses @angular/material as UI Framework, so you have to add it as a peer Dependency in your package.json and also import the styles.
You can either use the pre defined styles from angular material or make you own style.
to use the pre defined style add this line to you primary style file. To create you own style read please the getting started docs of angular material.
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
VScode´s Monaco Editor
we use vscode´s monaco editor for some functionalities like the json editor, if you like to use monaco editor either, just integrate it following this introduction to your app https://github.com/atularen/ngx-monaco-editor#readme. If you decide to not using monaco editor, textarea element will be used instead.
Otherwise a workaround is needed to avoid error in compilation. Add following lines to you tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
...
"paths": {
....
"ngx-monaco-editor": ["mock-ngx-monaco-editor.ts"] <== THIS
}
},
"files": [
....
"src/mock-ngx-monaco-editor.ts" <== THIS
],
....
}
mock-ngx-monaco-editor.ts is a empty file.
Styling
add this lines to you primary style file.
@import url("../node_modules/hd-wiring/hd-wiring.css");
@import url("../node_modules/hetida-flowchart/hetida-flowchart.css");
How To Use
As a Dialog
Because hd-wiring is written with angular material, it is possible to open hd-wiring as a dialog like any other dialog.
const dialogRef = this.dialog.open<WiringDialogComponent, ExecutionDialogData>(
WiringDialogComponent,
{
data: {
title,
wiringItem
adapterList
}
}
);
As a Component
you can also use it like a normal component
<hd-wiring-dialog
[title]="title"
[adapterList]="adapters"
[wiringItem]="wiringItem"
></hd-wiring-dialog>
API
Configuration
Configuration will be injected via a DI Token called HD_WIRING_CONFIG
.
- endpoint.applicationUrl: string => the url of the server.
- allowManualWiring: boolean => sets if manual wiring should be allowed. (default: true)
- allowOutputWiring: boolean => sets if output wiring should be allowed. Will also hide 'output parameter' section in ui (default: true)
- showUploadJsonButton: boolean => allow to upload a json file to fill the input items. Be sure that
allowManualWiring
are activated too. (default: true) - showDownloadExampleJsonButton: boolean => allows to download a json file with examples for paramter types. (default: true)
- monacoEditorTheme: WiringTheme => dark or light theme for the editor.
- enableDateRangeSelectionOnSeriesTypes: boolean => Shows date range picker for series types. Allows to pick a date range for specific series binding. [if enabled a range have to be selected] (default: false)
Provide the DI token like this in you app.module
....
providers: [
...
{
provide: ADAPTER_LIST_API,
useFactory: (someServiceYouDependOn: SomeService): HdWiringConfigToken => {
return {
allowManualWiring: someServiceYouDependOn.allowWiring,
allowOutputWiring: true,
monacoEditorTheme: WiringTheme.LightTheme,
showDownloadExampleJsonButton: true,
showUploadJsonButton: true,
};
},
deps: [SomeService]
},
...
]
...
Inputs
As you see in the previous section hd-wiring has only few input parameters.
- title: string
- wiringItem: WiringItem
- adapterList: [] | Adapter (you can put here the urls of your adapter implementations.)
Outputs (Events)
- confirmClick: ConfirmClickEvent
- cancelDialogClick: void
How To Contribute
I will skip the explanation to clone this repo and so on...
First you have to create a host application where this project is linked with npm link
. You have to consider few
things.
- Enable ivy in tsconfig.json, with ivy disabled your host component will not reload on changes.
- Set
"preserveSymlinks": true
in host application, otherwise you will get compilation errors.
After that link the dist folder of this project by navigating there in terminal and executing npm link
. (First time
you will probably do not have a dist folder so just run ng build
or create it manually.)In the host application just
execute npm link hd-wiring
in root folder.
Start this library with ng build --watch
and the host component with ng serve
.
Installation Guide To "NPM Link", Step By Step
Link to use my local created package, instead of the normally used one in node_modules.
- Clone the package from git locally in your workspace folder for example: hetida-flowchart
cd .\workspace
git clone [email protected]:neusta-sd-west/hetida-flowchart.git
- Move to the root folder, from the package you want to use
cd .\workspace\hetida-flowchart\packages\hd-wiring
- Install package dependencies
npm install
- build package
ng build
- Move to the new created dist folder
cd .\workspace\hetida-flowchart\packages\hd-wiring\dist
- Link your package in the dist folder, after that go back to the root folder
npm link
cd ..
- Open up a new terminal and go to your host-application frontend folder
cd .\workspace\hetida-designer\frontend
- If not happened before install host-application dependencies now
npm install
- Edit tsconfig.json an set preserveSymlinks = true
{
...
"compilerOptions": {
...
"preserveSymlinks": true
}
}
- Edit in angular.json the same
{
...
"projects": {
"frontend": {
...
"architect": {
"build": {
...
"options": {
"preserveSymlinks": true
}
}
}
}
}
}
- Link in host-application frontend folder
npm link hd-wiring
- Finished
Setup for working
- Start the library, in your package root folder, execute
cd .\workspace\hetida-flowchart\packages\hd-wiring
ng build --watch
- In a new terminal, start your host-application frontend
cd .\workspace\hetida-designer\frontend
ng serve
(Extra) To delete the link, go back to your host-application frontend folder and execute
npm unlink --no-save hd-wiring
npm install