@dlr-eoc/core-ui

@dlr-eoc/core-ui (Schematics for UKIS core-ui)

This is are some schematics to add the base UKIS-Layout to an angular application. It is based on Clarity so add this first!

For further information how to build custom schematics see angular schematics and @angular-devkit.

This is what the ng-add command is doing

• add paths for library project in tsconfig.json

• add styles (for core-ui)

• add icons

• adjust index and add favicon

• add default components (core-ui) for the app and register all in the app module

• add sample route for map

Ng Add options

ng add @dlr-eoc/core-ui

--project=string // the project in the angular workspace --routing=boolean // default false --addClr=boolean // run's @clr/angular:ng-add default false

// Not implemented right now!

--addMap=boolean // adds a map component default false --auth=boolean // default false, adjusts the app for authentication and user login

Test locally on a new angular project

https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

1. build the schematics ng build core-ui

2. set Versions in build node scripts/library/index.js --set

3. create a new project ng new my-project

4. link to the Schematics in the new project npm link $PATH_TO_SCHEMATIC_PROJECT e.g. (npm link ../frontend-libraries/dist/core-ui)

5. run the schematics in the new project schematics @dlr-eoc/core-ui:ng-add or ng generate @dlr-eoc/core-ui:ng-add

to unlink use npm unlink $PATH_TO_SCHEMATIC_PROJECT (npm unlink ../frontend-libraries/dist/core-ui) // this unfortunately does not remove the full link so you have to run
npm uninstall @dlr-eoc/core-ui -g // this leaves an empty folder @dlr-eoc in the global directory (npm config get prefix/node_modules) so remove it later if not needed

Unit Testing

npm run schematics:test will run the unit tests, using Jasmine as a runner and test framework. ng test core-ui will run the unit tests of the lib via Karma.

Build Schematics

1. build core-ui

• ng build core-ui

1. compile schematics to core-ui build

• tsc -p projects/core-ui/tsconfig.schematics.json

1. copy files (this is done by a custom builder)

• cpx projects/core-ui/schematics/collection.json dist/core-ui/schematics/
• cpx projects/core-ui/schematics/**/schema.json dist/core-ui/schematics/
• cpx projects/core-ui/schematics/*/files/** dist/core-ui/schematics/
• cpx projects/core-ui/src/lib/global-alert/** dist/core-ui/schematics/ng-add/files/src/app/components/global-alert/
• cpx projects/core-ui/src/lib/global-progress/** dist/core-ui/schematics/ng-add/files/src/app/components/global-progress/
• ...

Publishing

for local publish use

• in dist/ npm pack this creates a ukis-schematics-.tgz file which we can copy.

Changelog

7.1.0 (2020-06-03) (Schematics, OL-configuration, performance-monitoring)

Features

• @dlr-eoc/core-ui: add tests for schematics to CI
• @dlr-eoc/core-ui: Provide header component from core-ui module
• @dlr-eoc/map-ol: Allow to pass OpenLayers options to IMapControls
• demo-maps: Added new component performance, that measures FPS and change detection.
• demo-maps: Added new route map7 that showcases drop in performance when displaying large vector datasets.
• demo-maps: Added service LargeLayersService that allows users to load data from a WFS with a specified data-strategy (downloading full data, downloading only current viewport, using simplified geometry, not loading any properties) to compare how each strategy affects loading- and render-performance.

Refactoring

• @dlr-eoc/core-ui: on ngAdd without routing setup a view component so not all code is placed in the App component - this

• @dlr-eoc/core-ui: Start convert clr-theme to use custom css properties. If you must support IE11 see Setting up IE11 support.

• @dlr-eoc/services-layers: Type for CustomLayer (type: 'custom') now optional on creation

• demo-maps: Add more examples how to use CustomLayers for OpenLayers route-example-custom-layers

• @dlr-eoc/map-ol:

  • Overview-Map Control now as default uses a Clarity Icon
  • Prepare for OpenLayers Types with ol@dev
  • Start to use custom css properties

Bug Fixes

• demo-maps: workaround for header overflow #6

• @dlr-eoc/layer-control: Layerentry expand icon not working in Edge Browser due to [dir].

• @dlr-eoc/map-ol:

  • Fix Bug Attribution Control is displayed twice Issue #3
  • Fix Bug Issue #1 Layer Popup now working for BaseTile, BaseImage, BaseVector (Cluster, Vector, VectorTile)

• @dlr-eoc/core-ui: Use the same types for 'ts' as @schematics/angular /**Types of property 'kind' are incompatible */

• @dlr-eoc/services-ogc:

  • Used to depend on @boundlessgeo/jsonix, because this fork of @highsource/jsonix worked with angular8. However, that fork declared a couple of variables globally, which now no longer works with angular9 and the ES2015 target.
  • Created an own fork under @michaellangbein/jsonix that adresses both the global variables issue and allows building to es2015.
  • All imports of 'jsonix' have been updated to '@michaellangbein/jsonix'
  • As a consequence of using this package, the sourceIsEvt hack in src/index.html is no longer required and has been removed.