increase linewitdh of prettier + add GH action

PDOK · Oct 2, 2023 · a68202c · a68202c
1 parent ed5307c
commit a68202c
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 201 deletions.
diff --git a/.github/workflows/lint.yml → .github/workflows/lint-go.yml b/.github/workflows/lint.yml → .github/workflows/lint-go.yml
@@ -1,4 +1,4 @@
-name: lint
+name: lint (go)
 on:
   push:
     branches:

diff --git a/.github/workflows/lint-ts.yml b/.github/workflows/lint-ts.yml
@@ -0,0 +1,33 @@
+name: lint (web/typescript)
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+defaults:
+  run:
+    working-directory: ./webcomponents/vectortile-view-component
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: './webcomponents/vectortile-view-component/package-lock.json'
+      - name: Formatting
+        run: npm run format
+      - name: Linting
+        run: npm run lint
diff --git a/webcomponents/vectortile-view-component/.prettierrc.json b/webcomponents/vectortile-view-component/.prettierrc.json
@@ -7,7 +7,7 @@
   "arrowParens": "avoid",
   "trailingComma": "es5",
   "bracketSameLine": true,
-  "printWidth": 80,
+  "printWidth": 140,
   "endOfLine": "auto",
   "overrides": [
     {

diff --git a/webcomponents/vectortile-view-component/README.md b/webcomponents/vectortile-view-component/README.md
@@ -11,19 +11,10 @@ Embed the webcomponent 'app-vectortile-view' in your web application
 - load styles and javascript in your html
 
   ```html
-  <link
-    rel="stylesheet"
-    type="text/css"
-    href="vectortile-view-component/styles.css" />
-  <script
-    type="text/javascript"
-    src="vectortile-view-component/main.js"></script>
-  <script
-    type="text/javascript"
-    src="vectortile-view-component/polyfills.js"></script>
-  <script
-    type="text/javascript"
-    src="vectortile-view-component/runtime.js"></script>
+  <link rel="stylesheet" type="text/css" href="vectortile-view-component/styles.css" />
+  <script type="text/javascript" src="vectortile-view-component/main.js"></script>
+  <script type="text/javascript" src="vectortile-view-component/polyfills.js"></script>
+  <script type="text/javascript" src="vectortile-view-component/runtime.js"></script>
 
   <app-vectortile-view
     style="width: 800px; height: 600px;"
@@ -37,17 +28,10 @@ Embed the webcomponent 'app-vectortile-view' in your web application
 ## Embedding a vectortile legend
 
 ```html
-<link
-  rel="stylesheet"
-  type="text/css"
-  href="vectortile-view-component/styles.css" />
+<link rel="stylesheet" type="text/css" href="vectortile-view-component/styles.css" />
 <script type="text/javascript" src="vectortile-view-component/main.js"></script>
-<script
-  type="text/javascript"
-  src="vectortile-view-component/polyfills.js"></script>
-<script
-  type="text/javascript"
-  src="vectortile-view-component/runtime.js"></script>
+<script type="text/javascript" src="vectortile-view-component/polyfills.js"></script>
+<script type="text/javascript" src="vectortile-view-component/runtime.js"></script>
 
 <app-legend-view
   id="legendadminunit"

diff --git a/webcomponents/vectortile-view-component/package.json b/webcomponents/vectortile-view-component/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "npm run format && ng build --output-hashing none",
+    "build": "npm run format && npm run lint && ng build --output-hashing none",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "deploy": "ng deploy --base-href=https://pdok.github.io/gokoala/ --name=JLSchaap --email=John.Schaap@Kadaster.nl",

diff --git a/webcomponents/vectortile-view-component/src/adminunits.html b/webcomponents/vectortile-view-component/src/adminunits.html
@@ -62,9 +62,7 @@ <H1>administrative unit NL </H1>
 
       function seturl(projection) {
         const view = document.getElementById('adminunit');
-        const url =
-          'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' +
-          projection;
+        const url = 'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' + projection;
         view.setAttribute('tile-url', url);
         const link = document.getElementById('sample1viewlink');
         link.innerHTML = "<a href='" + url + "'> " + url + '</a>';

diff --git a/webcomponents/vectortile-view-component/src/app/app.component.html b/webcomponents/vectortile-view-component/src/app/app.component.html
@@ -1,14 +1,5 @@
-<div
-  class="maparea"
-  id="map"
-  [style.width.px]="mapWidth"
-  [style.height.px]="mapHeight">
+<div class="maparea" id="map" [style.width.px]="mapWidth" [style.height.px]="mapHeight">
   <div class="toprightpanel">
-    <app-objectinfo-view
-      class="objectinfopanel"
-      id="objectinfo"
-      [feature]="curFeature"
-      *ngIf="showObjectInfo">
-    </app-objectinfo-view>
+    <app-objectinfo-view class="objectinfopanel" id="objectinfo" [feature]="curFeature" *ngIf="showObjectInfo"> </app-objectinfo-view>
   </div>
 </div>
diff --git a/webcomponents/vectortile-view-component/src/app/app.component.spec.ts b/webcomponents/vectortile-view-component/src/app/app.component.spec.ts
@@ -24,8 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain(
-      'vectortile-view-component app is running!'
-    );
+    expect(compiled.querySelector('.content span')?.textContent).toContain('vectortile-view-component app is running!');
   });
 });
diff --git a/webcomponents/vectortile-view-component/src/app/app.component.ts b/webcomponents/vectortile-view-component/src/app/app.component.ts
@@ -16,11 +16,7 @@ import VectorTileSource from 'ol/source/VectorTile.js';
 import TileDebug from 'ol/source/TileDebug.js';
 import Map from 'ol/Map';
 import View from 'ol/View';
-import {
-  EuropeanETRS89_LAEAQuad,
-  MapProjection,
-  NetherlandsRDNewQuadDefault,
-} from './mapprojection';
+import { EuropeanETRS89_LAEAQuad, MapProjection, NetherlandsRDNewQuadDefault } from './mapprojection';
 
 import { defaults as defaultControls, FullScreen } from 'ol/control.js';
 import { applyStyle } from 'ol-mapbox-style';
@@ -41,10 +37,7 @@ import { CommonModule } from '@angular/common';
 import { Link, Matrix, MatrixsetService } from './matrixset.service';
 import { MapBrowserEvent, VectorTile } from 'ol';
 
-export type NgChanges<
-  Component extends object,
-  Props = ExcludeFunctions<Component>,
-> = {
+export type NgChanges<Component extends object, Props = ExcludeFunctions<Component>> = {
   [Key in keyof Props]: {
     previousValue: Props[Key];
     currentValue: Props[Key];
@@ -55,17 +48,11 @@ export type NgChanges<
 
 type MarkFunctionPropertyNames<Component> = {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  [Key in keyof Component]: Component[Key] extends Function | Subject<never>
-    ? never
-    : Key;
+  [Key in keyof Component]: Component[Key] extends Function | Subject<never> ? never : Key;
 };
 
-type ExcludeFunctionPropertyNames<T extends object> =
-  MarkFunctionPropertyNames<T>[keyof T];
-type ExcludeFunctions<T extends object> = Pick<
-  T,
-  ExcludeFunctionPropertyNames<T>
->;
+type ExcludeFunctionPropertyNames<T extends object> = MarkFunctionPropertyNames<T>[keyof T];
+type ExcludeFunctions<T extends object> = Pick<T, ExcludeFunctionPropertyNames<T>>;
 
 @Component({
   selector: 'app-vectortile-view',
@@ -279,8 +266,7 @@ export class AppComponent implements OnChanges {
     });
 
     this.SetZoom(tile);
-    const mapdiv: HTMLElement =
-      this.elementRef.nativeElement.querySelector("[id='map']");
+    const mapdiv: HTMLElement = this.elementRef.nativeElement.querySelector("[id='map']");
     this.mapWidth = this.elementRef.nativeElement.offsetWidth;
     this.mapHeight = this.elementRef.nativeElement.offsetWidth * 0.75; // height = 0.75 * width creates 4:3 aspect ratio
     map.setTarget(mapdiv);
@@ -297,9 +283,7 @@ export class AppComponent implements OnChanges {
     }
 
     if (!this.centerX) {
-      console.error(
-        'No zoom center-x was provided for the app-vectortile-view'
-      );
+      console.error('No zoom center-x was provided for the app-vectortile-view');
     } else console.log('center-x=' + this.centerX);
     if (!this.centerY) {
       console.error('No center-y was provided for the app-vectortile-view');
@@ -331,11 +315,7 @@ export class AppComponent implements OnChanges {
     this.projection = new MapProjection(this.tileUrl).Projection;
     const vectorTileLayer = this.getVectortileLayer(this.projection);
     this.setStyle(vectorTileLayer);
-    let layers = [vectorTileLayer] as
-      | BaseLayer[]
-      | Collection<BaseLayer>
-      | LayerGroup
-      | undefined;
+    let layers = [vectorTileLayer] as BaseLayer[] | Collection<BaseLayer> | LayerGroup | undefined;
 
     if (this.showGrid) {
       const source = vectorTileLayer.getSource();
@@ -367,11 +347,7 @@ export class AppComponent implements OnChanges {
             vectorTileLayer.getSource()?.setUrl(this.tileUrl + this.selector);
           }
         })
-        .catch(err =>
-          console.error(
-            'error loading: ' + this.id + ' ' + this.styleUrl + ' ' + err
-          )
-        );
+        .catch(err => console.error('error loading: ' + this.id + ' ' + this.styleUrl + ' ' + err));
     } else {
       const defaultStyle = new Style({
         fill: new Fill({
@@ -414,17 +390,13 @@ export class AppComponent implements OnChanges {
       cacheSize: 0,
     });
     source.on(['tileloadend'], e => {
-      const evt: { type: 'tileloadend'; target: VectorTile; tile: VectorTile } =
-        e as never;
+      const evt: { type: 'tileloadend'; target: VectorTile; tile: VectorTile } = e as never;
       this.activeTileUrl.next(evt.tile.key);
     });
     return source;
   }
 
   isFullURL(url: string): boolean {
-    return (
-      url.toLowerCase().startsWith('http://') ||
-      url.toLowerCase().startsWith('https://')
-    );
+    return url.toLowerCase().startsWith('http://') || url.toLowerCase().startsWith('https://');
   }
 }
diff --git a/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.html b/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.html
@@ -1,5 +1 @@
-<div
-  class="legenditem"
-  id="itemmap"
-  [style.width.px]="itemWidth"
-  [style.height.px]="itemHeight"></div>
+<div class="legenditem" id="itemmap" [style.width.px]="itemWidth" [style.height.px]="itemHeight"></div>
diff --git a/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.ts b/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.ts
@@ -1,24 +1,12 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
 import { Feature, Map as OLMap, Tile, VectorTile, View } from 'ol';
 import { Projection } from 'ol/proj';
 import { MVT } from 'ol/format';
 import VectorTileSource from 'ol/source/VectorTile.js';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import { getCenter } from 'ol/extent';
 import { Geometry, LineString, Point } from 'ol/geom';
-import {
-  exhaustiveGuard,
-  LayerType,
-  LegendItem,
-  MapboxStyle,
-  MapboxStyleService,
-} from '../mapbox-style.service';
+import { exhaustiveGuard, LayerType, LegendItem, MapboxStyle, MapboxStyleService } from '../mapbox-style.service';
 import { applyStyle } from 'ol-mapbox-style';
 import { fromExtent } from 'ol/geom/Polygon';
 
@@ -90,13 +78,7 @@ export class LegendItemComponent implements OnInit {
     resolutions.push(1);
     const sources = this.mapboxStyleService.getLayersids(this.mapboxStyle);
 
-    applyStyle(
-      this.cvectorLayer,
-      this.mapboxStyle,
-      sources,
-      undefined,
-      resolutions
-    )
+    applyStyle(this.cvectorLayer, this.mapboxStyle, sources, undefined, resolutions)
       .then(() => {
         console.log(' loading legend style');
       })
@@ -105,8 +87,7 @@ export class LegendItemComponent implements OnInit {
         console.error('error loading legend style: ' + ' ' + err);
       });
     this.cvectorLayer.getSource()?.refresh();
-    const mapdiv: HTMLElement =
-      this.elementRef.nativeElement.querySelector("[id='itemmap']");
+    const mapdiv: HTMLElement = this.elementRef.nativeElement.querySelector("[id='itemmap']");
     this.map.setTarget(mapdiv);
   }
 

diff --git a/webcomponents/vectortile-view-component/src/app/legend-view/legend-view.component.ts b/webcomponents/vectortile-view-component/src/app/legend-view/legend-view.component.ts
@@ -1,19 +1,8 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnInit,
-  ViewEncapsulation,
-} from '@angular/core';
+import { Component, ElementRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LegendItemComponent } from '../legend-item/legend-item.component';
 import { recordStyleLayer } from 'ol-mapbox-style';
-import {
-  LegendItem,
-  MapboxStyle,
-  MapboxStyleService,
-} from '../mapbox-style.service';
+import { LegendItem, MapboxStyle, MapboxStyleService } from '../mapbox-style.service';
 import { NgChanges } from '../app.component';
 
 @Component({
@@ -45,9 +34,7 @@ export class LegendViewComponent implements OnInit, OnChanges {
       }
     }
     if (this.titleItems) {
-      if (
-        changes.titleItems.previousValue !== changes.titleItems.currentValue
-      ) {
+      if (changes.titleItems.previousValue !== changes.titleItems.currentValue) {
         if (!changes.titleItems.isFirstChange()) {
           this.generateLegend();
         }
@@ -65,17 +52,9 @@ export class LegendViewComponent implements OnInit, OnChanges {
         this.mapboxStyle = this.mapboxStyleService.removeRasterLayers(style);
         if (this.titleItems) {
           const titlepart = this.titleItems.split(',');
-          this.LegendItems = this.mapboxStyleService.getItems(
-            this.mapboxStyle,
-            this.mapboxStyleService.customTitle,
-            titlepart
-          );
+          this.LegendItems = this.mapboxStyleService.getItems(this.mapboxStyle, this.mapboxStyleService.customTitle, titlepart);
         } else {
-          this.LegendItems = this.mapboxStyleService.getItems(
-            this.mapboxStyle,
-            this.mapboxStyleService.capitalizeFirstLetter,
-            []
-          );
+          this.LegendItems = this.mapboxStyleService.getItems(this.mapboxStyle, this.mapboxStyleService.capitalizeFirstLetter, []);
         }
       });
     } else {