@opengeoweb/webmap-react 6.0.4

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@opengeoweb/webmap-react",
+  "version": "6.0.4",
+  "description": "GeoWeb react wrapper for webmap",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
+  },
+  "module": "./index.esm.js",
+  "type": "module",
+  "main": "./index.esm.js"
+}

package/src/index.d.ts

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

package/src/lib/components/CanvasComponent/CanvasComponent.d.ts

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+interface CanvasComponentProps {
+    onRenderCanvas: (ctx: CanvasRenderingContext2D, width: number, height: number, canvas: HTMLCanvasElement) => void;
+    onCanvasClick?: (x: number, y: number, width: number, height: number) => void;
+    onMouseMove?: (x: number, y: number, event: MouseEvent, width: number) => void;
+    onMouseUp?: (x: number) => void;
+    onMouseDown?: (x: number, y: number, width: number) => void;
+    onTouchStart?: (event: TouchEvent, width: number) => void;
+    onTouchEnd?: () => void;
+    onTouchMove?: (event: TouchEvent, width: number) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    isFocussed?: (isFocussed: boolean) => void;
+    onWheel?: ({ event, deltaY, deltaX, canvasWidth, mouseX, }: {
+        event: WheelEvent;
+        deltaY: number;
+        deltaX: number;
+        canvasWidth: number;
+        mouseX: number;
+    }) => void;
+    loop?: boolean;
+    redrawInterval?: number;
+    resizeCallback?: (newWidth: number) => void;
+    children?: React.ReactNode;
+}
+export declare class CanvasComponent extends Component<CanvasComponentProps> {
+    canvas: HTMLCanvasElement | null;
+    ctx: CanvasRenderingContext2D | null;
+    currentWidth: number;
+    currentHeight: number;
+    canvascontaineroutside: React.RefObject<HTMLDivElement> | null;
+    canvascontainer: React.RefObject<HTMLDivElement> | null;
+    timer: ReturnType<typeof setTimeout> | null;
+    redrawTimer: ReturnType<typeof setTimeout> | null;
+    loopHasStarted: boolean;
+    mounted: boolean;
+    static defaultProps: {
+        onRenderCanvas: () => void;
+        onCanvasClick: () => void;
+        onMouseMove: () => void;
+        onMouseUp: () => void;
+        onMouseDown: () => void;
+        onTouchStart: () => void;
+        onTouchEnd: () => void;
+        onTouchMove: () => void;
+        onWheel: () => void;
+    };
+    private _isFocussed;
+    constructor(props: CanvasComponentProps);
+    componentDidMount(): void;
+    shouldComponentUpdate(): boolean;
+    componentWillUnmount(): void;
+    handleMouseMoveEvent(event: MouseEvent): void;
+    handleMouseUpEvent(event: MouseEvent): void;
+    handleMouseDownEvent(event: MouseEvent): void;
+    handleTouchStartEvent(event: TouchEvent): void;
+    handleTouchEndEvent(): void;
+    handleTouchMoveEvent(event: TouchEvent): void;
+    handleClickEvent(event: MouseEvent): void;
+    handleWheelEvent(event: WheelEvent): void;
+    onFocus(): void;
+    onBlur(): void;
+    onKeyUp(event: KeyboardEvent): void;
+    _documentKeyDown(event: KeyboardEvent): void;
+    _handleWindowResize(): void;
+    startLoop(): void;
+    updateCanvas(): void;
+    resize(): void;
+    render(): React.ReactElement;
+}
+export {};

package/src/lib/components/CanvasComponent/index.d.ts

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

package/src/lib/components/Legend/Legend.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LayerFoundation } from '@opengeoweb/webmap';
+interface LegendProps {
+    layer: LayerFoundation;
+}
+export declare const Legend: React.FC<LegendProps>;
+export {};

package/src/lib/components/Legend/LegendLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Dimension } from '@opengeoweb/webmap';
+interface LegendLayoutProps {
+    title: string;
+    name: string;
+    dimensions: Dimension[];
+    children: React.ReactNode;
+    height?: number;
+    width?: number;
+    minWidth?: number;
+}
+export declare const LegendLayout: React.FC<LegendLayoutProps>;
+export {};

package/src/lib/components/Legend/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Legend';
+export * from './LegendLayout';

package/src/lib/components/MapDraw/MapDraw.d.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { GeoJsonProperties, GeometryObject, Position } from 'geojson';
+import { GeoJsonFeatureType, GeoJsonFeature, GeoFeatureStyle, Coordinate } from './geojsonShapes';
+type DrawStyle = {
+    x: number;
+    y: number;
+    nr: number;
+};
+type InputEvent = {
+    leftButton: boolean;
+    mouseDown: boolean;
+    mouseX: number;
+    mouseY: number;
+    rightButton: boolean;
+};
+export interface FeatureEvent {
+    coordinateIndexInFeature: number;
+    featureIndex: number;
+    mouseX: number;
+    mouseY: number;
+    isInEditMode: boolean;
+    feature: GeoJsonFeature;
+}
+export interface MapDrawProps {
+    mapId: string;
+    geojson: GeoJSON.FeatureCollection;
+    drawMode: string;
+    deletePolygonCallback?: string;
+    exitDrawModeCallback: (reason: DrawModeExitCallback) => void;
+    isInEditMode: boolean;
+    isInDeleteMode: boolean;
+    featureNrToEdit: number;
+    onHoverFeature?: (event: FeatureEvent) => void;
+    onClickFeature?: (event: FeatureEvent) => void;
+    updateGeojson: (geoJson: GeometryObject, text: string) => void;
+}
+export declare enum EDITMODE {
+    EMPTY = "EMPTY",
+    DELETE_FEATURES = "DELETE_FEATURES",
+    ADD_FEATURE = "ADD_FEATURE"
+}
+export declare enum DRAWMODE {
+    POLYGON = "POLYGON",
+    BOX = "BOX",
+    MULTIPOINT = "MULTIPOINT",
+    POINT = "POINT",
+    LINESTRING = "LINESTRING"
+}
+declare enum VERTEX {
+    NONE = "NONE",
+    MIDDLE_POINT_OF_FEATURE = "MIDDLE_POINT_OF_FEATURE"
+}
+declare enum EDGE {
+    NONE = "NONE"
+}
+declare enum SNAPPEDFEATURE {
+    NONE = "NONE"
+}
+export type DrawModeExitCallback = 'escaped' | 'doubleClicked';
+export default class MapDraw extends React.PureComponent<MapDrawProps> {
+    myEditMode: EDITMODE;
+    myDrawMode: DRAWMODE;
+    textPositions: {
+        x: number;
+        y: number;
+        text: string;
+    }[];
+    mouseOverPolygonCoordinates: Coordinate[] | number;
+    defaultPolyProps: GeoFeatureStyle;
+    defaultLineStringProps: GeoFeatureStyle;
+    defaultIconProps: {
+        imageWidth: number;
+        imageHeight: number;
+    };
+    somethingWasDragged: string;
+    mouseIsOverVertexNr: SNAPPEDFEATURE | VERTEX | number;
+    selectedEdge: EDGE;
+    geojson: GeoJSON.FeatureCollection;
+    listenersInitialized: boolean;
+    mouseGeoCoord: Coordinate;
+    snappedGeoCoords: Coordinate;
+    doubleClickTimer: {
+        isRunning?: boolean;
+        timer?: number;
+        mouseX?: number;
+        mouseY?: number;
+    };
+    mouseStoppedTimer: number;
+    snappedPolygonIndex: SNAPPEDFEATURE | number;
+    mouseX: number;
+    mouseY: number;
+    mouseOverPolygonFeatureIndex: number;
+    drawMode: string;
+    disabled: boolean;
+    static defaultProps: {
+        isInEditMode: boolean;
+        isInDeleteMode: boolean;
+        webmapjs: undefined;
+        featureNrToEdit: number;
+    };
+    featureEvent: FeatureEvent;
+    constructor(props: MapDrawProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: MapDrawProps): void;
+    componentWillUnmount(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleDrawMode(_drawMode: string): void;
+    getPixelCoordFromGeoCoord(featureCoords: Position[]): Coordinate[];
+    handleGeoJSONUpdate: (newGeoJSON: GeoJSON.FeatureCollection) => void;
+    handleExitDrawMode: (reason?: DrawModeExitCallback) => void;
+    hoverVertex(feature: GeoJsonFeature, mouseX: number, mouseY: number): void;
+    mouseMove(event: InputEvent): boolean;
+    triggerMouseDownTimer(event: InputEvent): void | boolean;
+    mouseDoubleClick(): void;
+    insertVertexInEdge(event: InputEvent): boolean;
+    createNewFeature(event: InputEvent): void;
+    addPointToMultiPointFeature(event: InputEvent): boolean;
+    addVerticesToPolygonFeature(event: InputEvent): boolean;
+    addPointToLineStringFeature(event: InputEvent): boolean;
+    mouseDown(event: InputEvent): void | boolean;
+    deletePolygon(index: number | SNAPPEDFEATURE): void;
+    deleteFeature(): void;
+    mouseUp(event: InputEvent): void | boolean;
+    cancelEdit(cancelLastPoint: boolean): void;
+    moveVertex(feature: GeoJsonFeature, mouseDown: boolean): boolean;
+    transposePolygon(featureCoords: Position[]): void;
+    transposeVertex(featureCoords: Position[]): void;
+    componentCleanup(): void;
+    validateFeature(feature: GeoJsonFeature): void;
+    validatePolys(fixPolys: boolean): void;
+    beforeDraw(ctx: CanvasRenderingContext2D): void;
+    distance(a: Coordinate, b: Coordinate): number;
+    isBetween(a: Coordinate, c: Coordinate, b: Coordinate): boolean;
+    checkDist(coord: Coordinate, polygonIndex: SNAPPEDFEATURE | number, mouseX: number, mouseY: number): boolean;
+    hoverEdge(geometry: GeoJsonFeatureType, mouseX: number, mouseY: number): {
+        selectedEdge: EDGE | number;
+        snappedPolygonIndex: SNAPPEDFEATURE | number;
+    };
+    drawVertice(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean): void;
+    drawPoint(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean, feature: GeoJsonFeature, featureIndex: number): void;
+    drawIcon(ctx: CanvasRenderingContext2D, _coord: Coordinate, featureProperties: GeoJsonProperties): DrawStyle;
+    drawMarker(ctx: CanvasRenderingContext2D, _coord: Coordinate, selected: boolean, middle: boolean, isInEditMode: boolean, featureProperties: GeoFeatureStyle): void | DrawStyle;
+    drawLine(ctx: CanvasRenderingContext2D, XYCoords: Coordinate[], featureIndex: number, lineStringIndex: number): void | DrawStyle;
+    drawPolygon(ctx: CanvasRenderingContext2D, XYCoords: Coordinate[], featureIndex: number, polygonIndex: number): void | DrawStyle;
+    convertGeoCoordsToScreenCoords(featureCoords: Position[]): Coordinate[];
+    initializeFeature(feature: GeoJsonFeature, type: string): GeoJSON.Feature;
+    checkIfFeatureIsBox(feature: GeoJsonFeature): boolean;
+    featureHasChanged(text: string): void;
+    render(): React.ReactElement;
+}
+export {};

package/src/lib/components/MapDraw/MapDrawContainer.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { GeometryObject } from 'geojson';
+import { DrawModeExitCallback, FeatureEvent } from './MapDraw';
+export type FeatureLayer = {
+    id: string;
+    type: string;
+    features: [];
+    isInEditMode?: boolean;
+    isInDeleteMode?: boolean;
+    geojson?: GeoJSON.FeatureCollection;
+    drawMode?: string;
+    onHoverFeature?: (feature: FeatureEvent) => void;
+    onClickFeature?: (feature: FeatureEvent) => void;
+    updateGeojson?: (feature: GeometryObject) => void;
+    exitDrawModeCallback?: (reason: DrawModeExitCallback) => void;
+    featureNrToEdit?: string;
+};
+interface MapDrawContainerProps {
+    featureLayers: FeatureLayer[];
+    mapId: string;
+}
+export declare const MapDrawContainer: React.FC<MapDrawContainerProps>;
+export {};

package/src/lib/components/MapDraw/geojsonShapes.d.ts

@@ -0,0 +1,19 @@
+export declare const emptyGeoJSON: GeoJSON.FeatureCollection;
+export declare const featurePoint: GeoJSON.Feature<GeoJSON.Point>;
+export declare const featureMultiPoint: GeoJSON.Feature<GeoJSON.MultiPoint>;
+export declare const featurePolygon: GeoJSON.Feature<GeoJSON.Polygon>;
+export declare const featureBox: GeoJSON.Feature<GeoJSON.Polygon>;
+export declare const lineString: GeoJSON.FeatureCollection;
+export type GeoJsonFeatureType = GeoJSON.Polygon | GeoJSON.MultiPoint | GeoJSON.Point | GeoJSON.LineString | GeoJSON.MultiPolygon;
+export type GeoJsonFeature = GeoJSON.Feature<GeoJsonFeatureType>;
+export type GeoFeatureStyle = {
+    stroke?: string;
+    fill?: string;
+    'stroke-width'?: number;
+    'stroke-opacity'?: number;
+    'fill-opacity'?: number;
+};
+export type Coordinate = {
+    x: number;
+    y: number;
+};

package/src/lib/components/MapDraw/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MapDrawContainer';
+export * from './MapDraw';
+export * from './mapDrawUtils';
+export * from './geojsonShapes';
+export * from './storyComponents/geojsonExamples';

package/src/lib/components/MapDraw/mapDrawUtils.d.ts

@@ -0,0 +1,57 @@
+import { Position } from 'geojson';
+import { Coordinate, GeoJsonFeature } from './geojsonShapes';
+export type CheckHoverFeaturesResult = {
+    coordinateIndexInFeature: number;
+    featureIndex: number;
+    feature: GeoJsonFeature;
+} | null;
+export declare const distance: (a: Coordinate, b: Coordinate) => number;
+export declare const checkHoverFeatures: (geojson: GeoJSON.FeatureCollection, mouseX: number, mouseY: number, convertGeoCoordsToScreenCoords: (featureCoords: Position[]) => Coordinate[], ignoreCoordinateIndexInFeature?: boolean) => CheckHoverFeaturesResult;
+export interface MapDrawDrawFunctionArgs {
+    context: CanvasRenderingContext2D;
+    featureIndex: number;
+    coord: Coordinate;
+    selected: boolean;
+    isInEditMode: boolean;
+    feature: GeoJsonFeature;
+    mouseX: number;
+    mouseY: number;
+    isHovered: boolean;
+}
+type DrawFunction = {
+    id: string;
+    drawMethod: (args: MapDrawDrawFunctionArgs) => void;
+};
+export declare const getDrawFunctionFromStore: (id: string) => DrawFunction['drawMethod'] | undefined;
+export declare const registerDrawFunction: (drawFunction?: DrawFunction['drawMethod']) => string;
+/**
+ * Adds properties to the first geojson feature based on the given property object.
+ * It only extends or changes the properties which are defined in styleConfig,
+ * all other properties in the geojson are left unchanged.
+ * @param geojson
+ * @param featureProperties
+ */
+export declare const addFeatureProperties: (geojson: GeoJSON.FeatureCollection | undefined, featureProperties: GeoJSON.GeoJsonProperties, featureIndex?: number) => GeoJSON.FeatureCollection;
+/**
+ * Returns the intersection of two features. In case of a polygon, only the first feature is used.
+ * @param a Feature A
+ * @param b Feature B
+ * @returns The intersection of the two features.
+ */
+export declare const intersectGeoJSONS: (a: GeoJSON.FeatureCollection, b: GeoJSON.FeatureCollection, geoJSONProperties?: {
+    stroke: string;
+    'stroke-width': number;
+    'stroke-opacity': number;
+    fill: string;
+    'fill-opacity': number;
+}) => GeoJSON.FeatureCollection;
+/**
+ * Adds the intersectionStart and intersectionEnd properties to the GeoJSONS structure
+ * @param geoJSONs
+ * @returns GeoJSONS extend with intersections
+ */
+export declare const createInterSections: (geojson: GeoJSON.FeatureCollection, otherGeoJSON: GeoJSON.FeatureCollection, geoJSONproperties?: GeoJSON.GeoJsonProperties) => GeoJSON.FeatureCollection;
+export declare const getGeoJson: (geojson: GeoJSON.FeatureCollection, shouldAllowMultipleshapes: boolean) => GeoJSON.FeatureCollection;
+export declare const getFeatureCollection: (geoJSONFeature: GeoJSON.Feature | GeoJSON.FeatureCollection, shouldAllowMultipleshapes: boolean, geoJSONFeatureCollection?: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection;
+export declare const isGeoJSONFeatureCreatedByTool: (existingJSON: GeoJSON.FeatureCollection, newGeoJSON: GeoJSON.Feature | GeoJSON.FeatureCollection) => boolean;
+export {};

package/src/lib/components/MapDraw/storyComponents/geojsonExamples.d.ts

@@ -0,0 +1,11 @@
+export declare const defaultStyleProperties: GeoJSON.GeoJsonProperties;
+export declare const simplePolygonGeoJSON: GeoJSON.FeatureCollection;
+export declare const simplePointsGeojson: GeoJSON.FeatureCollection;
+export declare const simpleSmallLineStringGeoJSON: GeoJSON.FeatureCollection;
+export declare const simpleFlightRoutePointsGeoJSON: GeoJSON.FeatureCollection;
+export declare const simpleLineStringGeoJSON: GeoJSON.FeatureCollection;
+export declare const simpleBoxGeoJSON: GeoJSON.FeatureCollection;
+export declare const simpleFlightRouteLineStringGeoJSON: GeoJSON.FeatureCollection;
+export declare const simpleMultiPolygon: GeoJSON.FeatureCollection;
+export declare const intersectionFeatureNL: GeoJSON.Feature;
+export declare const intersectionFeatureBE: GeoJSON.Feature;

package/src/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CanvasComponent';
+export * from './Legend';
+export * from './MapDraw';

package/src/lib/index.d.ts

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