refactor: Use the same interfaces and constant values from maplibre-g… (

#105)

* refactor: Use the same interfaces and constant values from maplibre-gl-export

* export interfaces from mapbox-gl-export

* ci: changed to node v20

.changeset/cuddly-keys-push.md

@@ -0,0 +1,5 @@
+---
+"@watergis/mapbox-gl-export": patch
+---
+
+refactor: import interfaces from maplibre-gl-export

.changeset/hungry-shrimps-tan.md

@@ -0,0 +1,5 @@
+---
+"@watergis/maplibre-gl-export": patch
+---
+
+refactor: export interfaces from maplibre-gl-export

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
 
     steps:
     - uses: actions/checkout@v4

.github/workflows/release.yml

@@ -17,16 +17,20 @@ jobs:
       pull-requests: write # to create pull request (changesets/action)
     name: Release
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+
     steps:
       - name: checkout code repository
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: pnpm/[email protected]
-      - name: Setup Node.js
+      - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: ${{ matrix.node-version }}
           cache: pnpm
 
       - name: install dependencies

packages/mapbox-gl-export/src/lib/export-control.ts

@@ -4,22 +4,18 @@ import {
 	PrintableAreaManager,
 	type Translation,
 	type languages,
-	getTranslation
+	getTranslation,
+	Size,
+	SizeType,
+	PageOrientation,
+	Format,
+	DPI,
+	Unit,
+	DPIType,
+	FormatType
 } from '@watergis/maplibre-gl-export';
-import MapGenerator, { Size, Format, PageOrientation, DPI, Unit } from './map-generator';
-
-type Options = {
-	PageSize: [number, number];
-	PageOrientation: string;
-	Format: string;
-	DPI: number;
-	Crosshair?: boolean;
-	PrintableArea: boolean;
-	accessToken?: string;
-	Local?: languages;
-	AllowedSizes?: ('LETTER' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6')[];
-	Filename?: string;
-};
+import { ControlOptions } from './interfaces';
+import MapGenerator from './map-generator';
 
 /**
  * Mapbox GL Export Control.
@@ -38,8 +34,8 @@ export default class MapboxExportControl implements IControl {
 
 	private exportButton: HTMLButtonElement;
 
-	private options: Options = {
-		PageSize: Size.A4 as [number, number],
+	private options: ControlOptions = {
+		PageSize: Size.A4 as SizeType,
 		PageOrientation: PageOrientation.Landscape,
 		Format: Format.PDF,
 		DPI: DPI[300],
@@ -63,7 +59,7 @@ export default class MapboxExportControl implements IControl {
 		accessToken: undefined
 	};
 
-	constructor(options: Options) {
+	constructor(options: ControlOptions) {
 		if (options) {
 			this.options = Object.assign(this.options, options);
 		}
@@ -115,7 +111,7 @@ export default class MapboxExportControl implements IControl {
 			sizes,
 			this.getTranslation().PageSize,
 			'page-size',
-			this.options.PageSize,
+			this.options.PageSize as [number, number],
 			(data: { [key: string]: unknown }, key) => JSON.stringify(data[key])
 		);
 		table.appendChild(tr1);
@@ -124,7 +120,7 @@ export default class MapboxExportControl implements IControl {
 			PageOrientation,
 			this.getTranslation().PageOrientation,
 			'page-orientaiton',
-			this.options.PageOrientation,
+			this.options.PageOrientation as string,
 			(data: { [key: string]: unknown }, key) => data[key]
 		);
 		table.appendChild(tr2);
@@ -133,7 +129,7 @@ export default class MapboxExportControl implements IControl {
 			Format,
 			this.getTranslation().Format,
 			'format-type',
-			this.options.Format,
+			this.options.Format as string,
 			(data: { [key: string]: unknown }, key) => data[key]
 		);
 		table.appendChild(tr3);
@@ -142,7 +138,7 @@ export default class MapboxExportControl implements IControl {
 			DPI,
 			this.getTranslation().DPI,
 			'dpi-type',
-			this.options.DPI,
+			this.options.DPI as number,
 			(data: { [key: string]: unknown }, key) => data[key]
 		);
 		table.appendChild(tr4);
@@ -174,8 +170,8 @@ export default class MapboxExportControl implements IControl {
 			const mapGenerator = new MapGenerator(
 				map,
 				pageSizeValue,
-				Number(dpiType.value),
-				formatType.value,
+				Number(dpiType.value) as DPIType,
+				formatType.value as FormatType,
 				Unit.mm,
 				this.options.Filename,
 				this.options.accessToken

packages/mapbox-gl-export/src/lib/index.ts

@@ -1,2 +1,3 @@
 export { default as MapboxExportControl } from './export-control';
-export { Size, PageOrientation, Format, DPI } from './map-generator';
+export { Size, PageOrientation, Format, DPI } from '@watergis/maplibre-gl-export';
+export * from './interfaces';

packages/mapbox-gl-export/src/lib/interfaces/ControlOptions.ts

@@ -0,0 +1,5 @@
+import { type ControlOptions as MaplibreControlOptions } from '@watergis/maplibre-gl-export';
+
+export interface ControlOptions extends MaplibreControlOptions {
+	accessToken?: string;
+}

packages/mapbox-gl-export/src/lib/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './ControlOptions';

packages/mapbox-gl-export/src/lib/map-generator.ts

@@ -30,57 +30,15 @@
 import { jsPDF } from 'jspdf';
 import { accessToken, Map as MapboxMap } from 'mapbox-gl';
 import 'js-loading-overlay';
-
-export const Format = {
-	JPEG: 'jpg',
-	PNG: 'png',
-	PDF: 'pdf',
-	SVG: 'svg'
-} as const;
-type Format = (typeof Format)[keyof typeof Format];
-
-export const Unit = {
-	// don't use inch unit. because page size setting is using mm unit.
-	in: 'in',
-	mm: 'mm'
-} as const;
-type Unit = (typeof Unit)[keyof typeof Unit];
-
-export const Size = {
-	// A0, A1, B0, B1 are not working well.
-	// A0: [1189, 841],
-	// A1: [841, 594],
-	LETTER: [279, 216], // 8.5x11 - works
-	//TABLOID: [432,279] // 11x17 - not working currently prints to 11.68x8.27 in landscape
-	A2: [594, 420],
-	A3: [420, 297],
-	A4: [297, 210],
-	A5: [210, 148],
-	A6: [148, 105],
-	// B0: [1414, 1000],
-	// B1: [1000, 707],
-	B2: [707, 500],
-	B3: [500, 353],
-	B4: [353, 250],
-	B5: [250, 176],
-	B6: [176, 125]
-} as const;
-type Size = (typeof Size)[keyof typeof Size];
-
-export const PageOrientation = {
-	Landscape: 'landscape',
-	Portrait: 'portrait'
-} as const;
-type PageOrientation = (typeof PageOrientation)[keyof typeof PageOrientation];
-
-export const DPI = {
-	72: 72,
-	96: 96,
-	200: 200,
-	300: 300,
-	400: 400
-} as const;
-type DPI = (typeof DPI)[keyof typeof DPI];
+import {
+	DPIType,
+	Format,
+	FormatType,
+	Size,
+	SizeType,
+	Unit,
+	UnitType
+} from '@watergis/maplibre-gl-export';
 
 export default class MapGenerator {
 	private map: MapboxMap;
@@ -89,11 +47,11 @@ export default class MapGenerator {
 
 	private height: number;
 
-	private dpi: number;
+	private dpi: DPIType;
 
-	private format: string;
+	private format: FormatType;
 
-	private unit: Unit;
+	private unit: UnitType;
 
 	private fileName: string;
 
@@ -110,10 +68,10 @@ export default class MapGenerator {
 	 */
 	constructor(
 		map: MapboxMap,
-		size: Size = Size.A4,
-		dpi = 300,
-		format: string = Format.PNG.toString(),
-		unit: Unit = Unit.mm,
+		size: SizeType = Size.A4,
+		dpi: DPIType = 300,
+		format: FormatType = Format.PNG,
+		unit: UnitType = Unit.mm,
 		fileName = 'map',
 		accesstoken?: string
 	) {

packages/maplibre-gl-export/src/lib/export-control.ts

@@ -2,19 +2,18 @@ import { ControlPosition, IControl, Map as MaplibreMap } from 'maplibre-gl';
 import CrosshairManager from './crosshair-manager';
 import PrintableAreaManager from './printable-area-manager';
 import { Translation, getTranslation, type languages } from './local';
-import MapGenerator, { Size, Format, PageOrientation, DPI, Unit } from './map-generator';
-
-type Options = {
-	PageSize?: [number, number];
-	PageOrientation?: string;
-	Format?: string;
-	DPI?: number;
-	Crosshair?: boolean;
-	PrintableArea?: boolean;
-	Local?: languages;
-	AllowedSizes?: ('LETTER' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6')[];
-	Filename?: string;
-};
+import MapGenerator from './map-generator';
+import {
+	Format,
+	type ControlOptions,
+	FormatType,
+	Unit,
+	SizeType,
+	Size,
+	PageOrientation,
+	DPI,
+	DPIType
+} from './interfaces';
 
 /**
  * Mapbox GL Export Control.
@@ -33,8 +32,8 @@ export default class MaplibreExportControl implements IControl {
 
 	private exportButton: HTMLButtonElement;
 
-	private options: Options = {
-		PageSize: Size.A4 as [number, number],
+	private options: ControlOptions = {
+		PageSize: Size.A4 as SizeType,
 		PageOrientation: PageOrientation.Landscape,
 		Format: Format.PDF,
 		DPI: DPI[300],
@@ -57,7 +56,7 @@ export default class MaplibreExportControl implements IControl {
 		Filename: 'map'
 	};
 
-	constructor(options: Options) {
+	constructor(options: ControlOptions) {
 		if (options) {
 			this.options = Object.assign(this.options, options);
 		}
@@ -168,8 +167,8 @@ export default class MaplibreExportControl implements IControl {
 			const mapGenerator = new MapGenerator(
 				map,
 				pageSizeValue,
-				Number(dpiType.value),
-				formatType.value,
+				Number(dpiType.value) as DPIType,
+				formatType.value as FormatType,
 				Unit.mm,
 				this.options.Filename
 			);

packages/maplibre-gl-export/src/lib/index.ts

@@ -1,6 +1,6 @@
 export { default as MaplibreExportControl } from './export-control';
-export { Size, PageOrientation, Format, DPI } from './map-generator';
 export { default as CrosshairManager } from './crosshair-manager';
 export { default as PrintableAreaManager } from './printable-area-manager';
 
 export * from './local';
+export * from './interfaces';

packages/maplibre-gl-export/src/lib/interfaces/ControlOptions.ts

@@ -0,0 +1,16 @@
+import { languages } from '../local';
+import { FormatType } from './Format';
+import { PageOrientationType } from './PageOrientation';
+import { SizeType } from './Size';
+
+export interface ControlOptions {
+	PageSize?: SizeType;
+	PageOrientation?: PageOrientationType;
+	Format?: FormatType;
+	DPI?: number;
+	Crosshair?: boolean;
+	PrintableArea?: boolean;
+	Local?: languages;
+	AllowedSizes?: ('LETTER' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6')[];
+	Filename?: string;
+}

packages/maplibre-gl-export/src/lib/interfaces/DPI.ts

@@ -0,0 +1,8 @@
+export const DPI = {
+	72: 72,
+	96: 96,
+	200: 200,
+	300: 300,
+	400: 400
+} as const;
+export type DPIType = (typeof DPI)[keyof typeof DPI];

packages/maplibre-gl-export/src/lib/interfaces/Format.ts

@@ -0,0 +1,7 @@
+export const Format = {
+	JPEG: 'jpg',
+	PNG: 'png',
+	PDF: 'pdf',
+	SVG: 'svg'
+} as const;
+export type FormatType = (typeof Format)[keyof typeof Format];

packages/maplibre-gl-export/src/lib/interfaces/PageOrientation.ts

@@ -0,0 +1,5 @@
+export const PageOrientation = {
+	Landscape: 'landscape',
+	Portrait: 'portrait'
+} as const;
+export type PageOrientationType = (typeof PageOrientation)[keyof typeof PageOrientation];

packages/maplibre-gl-export/src/lib/interfaces/Size.ts

@@ -0,0 +1,20 @@
+export const Size = {
+	// A0, A1, B0, B1 are not working well.
+	// A0: [1189, 841],
+	// A1: [841, 594],
+	LETTER: [279, 216], // 8.5x11 - works
+	//TABLOID: [432,279] // 11x17 - not working currently prints to 11.68x8.27 in landscape
+	A2: [594, 420],
+	A3: [420, 297],
+	A4: [297, 210],
+	A5: [210, 148],
+	A6: [148, 105],
+	// B0: [1414, 1000],
+	// B1: [1000, 707],
+	B2: [707, 500],
+	B3: [500, 353],
+	B4: [353, 250],
+	B5: [250, 176],
+	B6: [176, 125]
+} as const;
+export type SizeType = (typeof Size)[keyof typeof Size];

packages/maplibre-gl-export/src/lib/interfaces/Unit.ts

@@ -0,0 +1,6 @@
+export const Unit = {
+	// don't use inch unit. because page size setting is using mm unit.
+	in: 'in',
+	mm: 'mm'
+} as const;
+export type UnitType = (typeof Unit)[keyof typeof Unit];