@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/components/MlFeatureEditor/MlFeatureEditor.stories.js

@@ -1,91 +0,0 @@
-import React from "react";
-
-import MlFeatureEditor from "./MlFeatureEditor";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlFeatureEditor",
-	component: MlFeatureEditor,
-	argTypes: {},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => {
-	return (
-		<MlFeatureEditor
-			{...args}
-			onChange={(features) => {
-				console.log(features);
-			}}
-		/>
-	);
-};
-
-export const EditPolygon = Template.bind({});
-EditPolygon.args = {
-	mode: "custom_select",
-	geojson: {
-		type: "Feature",
-		properties: {},
-		geometry: {
-			coordinates: [
-				[
-					[7.0904979943736635, 50.73948334574527],
-					[7.087554458473562, 50.73827346433987],
-					[7.093562913197076, 50.73723639825727],
-					[7.096294028980594, 50.7387727842636],
-					[7.0904979943736635, 50.73948334574527],
-				],
-			],
-			type: "Polygon",
-		},
-	},
-};
-
-export const EditPoint = Template.bind({});
-EditPoint.args = {
-	mode: "custom_select",
-	geojson: {
-		type: "Feature",
-		properties: {},
-		geometry: {
-			type: "Point",
-			coordinates: [7.0904979943736635, 50.73948334574527],
-		},
-	},
-};
-
-export const EditLineString = Template.bind({});
-EditLineString.args = {
-	mode: "simple_select",
-	geojson: {
-		type: "Feature",
-		properties: {},
-		geometry: {
-			coordinates: [
-				[7.0904979943736635, 50.73948334574527],
-				[7.087554458473562, 50.73827346433987],
-				[7.093562913197076, 50.73723639825727],
-				[7.096294028980594, 50.7387727842636],
-			],
-			type: "LineString",
-		},
-	},
-};
-
-export const DrawPolygon = Template.bind({});
-DrawPolygon.args = {
-	mode: "custom_polygon",
-};
-
-export const DrawPoint = Template.bind({});
-DrawPoint.args = {
-	mode: "draw_point",
-};
-
-export const DrawLineString = Template.bind({});
-DrawLineString.args = {
-	mode: "draw_line_string",
-};

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -1,126 +0,0 @@
-import React, { useContext, useState } from "react";
-import { mount, configure } from "enzyme";
-import { waitFor } from "@testing-library/react";
-import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
-import MlFeatureEditor from "./MlFeatureEditor";
-import MapLibreMap from "./../MapLibreMap/MapLibreMap";
-import maplibregl from "maplibre-gl/dist/maplibre-gl";
-import { mockMapLibreMethods } from "../../setupTests";
-
-jest.mock("@mapbox/mapbox-gl-draw", () => {
-	return function () {
-		return {
-			set: jest.fn(),
-		};
-	};
-});
-const mapLibreInstance = new maplibregl.Map();
-
-const MlFeatureEditorTestComponent = (props) => {
-	const [layerVisible, setLayerVisible] = useState(true);
-	const [refreshTrigger, setRefreshTrigger] = useState(0);
-	const mapContext = useContext(MapContext);
-
-	return (
-		<>
-			<MapLibreMap />
-
-			{layerVisible && <MlFeatureEditor {...props} />}
-
-			<button
-				className="toggle_layer_visible"
-				onClick={() => {
-					setLayerVisible(!layerVisible);
-				}}
-			>
-				toggle layer visible
-			</button>
-			<button
-				className="trigger_refresh"
-				onClick={() => {
-					setRefreshTrigger(refreshTrigger + 1);
-				}}
-			>
-				refresh
-			</button>
-			<div className="layers_json">
-				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
-			</div>
-			<div className="sources_json">
-				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.sources)}
-			</div>
-		</>
-	);
-};
-
-let testAttributes = {
-	mode: "custom_select",
-	geojson: {
-		type: "Feature",
-		properties: {},
-		geometry: {
-			coordinates: [
-				[
-					[7.0904979943736635, 50.73948334574527],
-					[7.087554458473562, 50.73827346433987],
-					[7.093562913197076, 50.73723639825727],
-					[7.096294028980594, 50.7387727842636],
-					[7.0904979943736635, 50.73948334574527],
-				],
-			],
-			type: "Polygon",
-		},
-	},
-};
-
-describe("<MlFeatureEditor>", () => {
-	it("should register 2 event listeners to the maplibre instance", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlFeatureEditorTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
-	});
-
-	it("should deregister 2 event listeners to the maplibre instance", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlFeatureEditorTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
-
-		wrapper.find(".toggle_layer_visible").simulate("click");
-
-		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
-	});
-
-	it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlFeatureEditorTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlFeatureEditorTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
-
-		wrapper.find(".toggle_layer_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeControl).toHaveBeenCalledTimes(1);
-	});
-});

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './MlFeatureEditor.css';
-
-import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import CustomPolygonMode from './custom-polygon-mode.js';
-import CustomSelectMode from './custom-select-mode.js';
-import CustomDirectSelectMode from './custom-direct-select-mode.js';
-
-import useMap from '../../hooks/useMap';
-import { GeoJSONObject, Feature } from '@turf/turf';
-
-interface MlFeatureEditorProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * Id of an existing layer in the mapLibre instance to help specify the layer order
-	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-	 */
-	insertBeforeLayer?: string;
-	/**
-	 * Input GeoJson data at initialization
-	 */
-	geojson?: Feature;
-	/**
-	 * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
-	 * First parameter is the new GeoJson feature.
-	 */
-	onChange?: (para: GeoJSONObject[]) => void;
-	/**
-	 * Callback function that is called each time the GeoJson data within has been finished within MlFeatureEditor.
-	 * First parameter is the new GeoJson feature.
-	 */
-	onFinish?: () => void;
-	/**
-	 * Feature editor mode:
-	 * - "custom_select" edit features
-	 * - "custom_polygon" draw Polygon
-	 * - "draw_point" draw Point
-	 * - "draw_line_string" draw LineString
-	 */
-	mode?: string;
-}
-
-/**
- * GeoJson Feature editor that allows to create or manipulate GeoJson data
- */
-const MlFeatureEditor = (props: MlFeatureEditorProps) => {
-	const draw = useRef<MapboxDraw>();
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const drawToolsInitialized = useRef(false);
-	const [drawToolsReady, setDrawToolsReady] = useState(false);
-
-	const modeChangeHandler = (e: any) => {
-		console.log('MlFeatureEditor mode change to ' + e.mode);
-		//setDrawMode(e.mode);
-		if (
-			typeof props.onFinish === 'function' &&
-			(e.mode === 'custom_select' || e.mode === 'simple_select')
-		) {
-			props.onFinish();
-		}
-	};
-
-	useEffect(() => {
-		if (mapHook.map && !drawToolsInitialized.current) {
-			drawToolsInitialized.current = true;
-
-			if (
-				mapHook.map.map.style &&
-				mapHook.map.map.getSource('mapbox-gl-draw-cold') &&
-				draw.current
-			) {
-				// remove old Mapbox-gl-Draw from Mapbox instance when hot-reloading this component during development
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				draw.current?.remove();
-			}
-
-			draw.current = new MapboxDraw({
-				displayControlsDefault: false,
-				defaultMode: props.mode || 'custom_select',
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				modes: Object.assign(
-					{
-						custom_polygon: CustomPolygonMode,
-						custom_select: CustomSelectMode,
-						custom_direct_select: CustomDirectSelectMode,
-					},
-					MapboxDraw.modes
-				),
-			});
-
-			mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
-			mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
-
-			setDrawToolsReady(true);
-		}
-	}, [mapHook.map, props, drawToolsInitialized]);
-
-	useEffect(() => {
-		if (!mapHook.map || !drawToolsReady) return;
-
-		const changeHandler = () => {
-			if (draw.current) {
-				// update drawnFeatures state object
-				if (typeof props.onChange === 'function') {
-					const currentFeatureCollection = draw.current.getAll?.();
-					props.onChange(currentFeatureCollection?.features);
-				}
-			}
-		};
-
-		mapHook.map.on('mouseup', changeHandler);
-
-		mapHook.map.on('touchend', changeHandler);
-
-		return () => {
-			if (!mapHook.map) return;
-
-			mapHook.map.map.off('mouseup', changeHandler);
-			mapHook.map.map.off('touchend', changeHandler);
-		};
-	}, [drawToolsReady, mapHook.map]);
-
-	useEffect(() => {
-		if (draw.current && props.geojson?.geometry) {
-			draw.current.set({ type: 'FeatureCollection', features: [props.geojson as any] });
-		}
-	}, [props.geojson, drawToolsReady]);
-
-	useEffect(() => {
-		if (props.mode && draw.current) {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			draw.current.changeMode(props.mode);
-		}
-	}, [props.mode]);
-
-	return <></>;
-};
-
-export default MlFeatureEditor;

package/src/components/MlFeatureEditor/custom-direct-select-mode.js

@@ -1,303 +0,0 @@
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-import {
-	noTarget,
-	isOfMetaType,
-	isActiveFeature,
-	isInactiveFeature,
-	isShiftDown,
-} from "./lib/common_selectors.js";
-import createSupplementaryPoints from "./lib/create_supplementary_points.js";
-import constrainFeatureMovement from "./lib/constrain_feature_movement.js";
-import doubleClickZoom from "./lib/double_click_zoom.js";
-import * as Constants from "./lib/constants.js";
-import moveFeatures from "./lib/move_features.js";
-import drawUtils from "./lib/utils.js";
-
-const isVertex = isOfMetaType(Constants.meta.VERTEX);
-const isMidpoint = isOfMetaType(Constants.meta.MIDPOINT);
-
-const DirectSelect = {};
-
-// INTERNAL FUNCTIONS
-
-DirectSelect.fireUpdate = function () {
-	this.map.fire(Constants.events.UPDATE, {
-		action: Constants.updateActions.CHANGE_COORDINATES,
-		features: this.getSelected().map((f) => f.toGeoJSON()),
-	});
-};
-
-DirectSelect.fireActionable = function (state) {
-	this.setActionableState({
-		combineFeatures: false,
-		uncombineFeatures: false,
-		trash: state.selectedCoordPaths.length > 0,
-	});
-};
-
-DirectSelect.startDragging = function (state, e) {
-	this.map.dragPan.disable();
-	state.canDragMove = true;
-	state.dragMoveLocation = e.lngLat;
-};
-
-DirectSelect.stopDragging = function (state) {
-	this.map.dragPan.enable();
-	state.dragMoving = false;
-	state.canDragMove = false;
-	state.dragMoveLocation = null;
-};
-
-DirectSelect.onVertex = function (state, e) {
-	this.startDragging(state, e);
-	const about = e.featureTarget.properties;
-	const selectedIndex = state.selectedCoordPaths.indexOf(about.coord_path);
-	if (!isShiftDown(e) && selectedIndex === -1) {
-		state.selectedCoordPaths = [about.coord_path];
-	} else if (isShiftDown(e) && selectedIndex === -1) {
-		state.selectedCoordPaths.push(about.coord_path);
-	}
-
-	// currently this work with single selected vertices only
-	let allFeatures = drawUtils.getDrawInstance(this.map).getAll();
-
-	let matchingVertices = drawUtils.getMatchingVertices(
-		e.featureTarget._geometry.coordinates,
-		e.featureTarget.properties.parent,
-		allFeatures.features,
-		this.map
-	);
-	state.groupMove_vertices = matchingVertices;
-
-	for (let i = 0; i < state.groupMove_vertices.length; i++) {
-		state.groupMove_vertices[i].feature = this.getFeature(
-			state.groupMove_vertices[i].featureId
-		);
-	}
-
-	const selectedCoordinates = this.pathsToCoordinates(
-		state.featureId,
-		state.selectedCoordPaths
-	);
-	this.setSelectedCoordinates(selectedCoordinates);
-};
-
-DirectSelect.onMidpoint = function (state, e) {
-	this.startDragging(state, e);
-	const about = e.featureTarget.properties;
-	state.feature.addCoordinate(about.coord_path, about.lng, about.lat);
-	this.fireUpdate();
-	state.selectedCoordPaths = [about.coord_path];
-};
-
-DirectSelect.pathsToCoordinates = function (featureId, paths) {
-	return paths.map((coord_path) => ({ feature_id: featureId, coord_path }));
-};
-
-DirectSelect.onFeature = function (state, e) {
-	if (state.selectedCoordPaths.length === 0) this.startDragging(state, e);
-	else this.stopDragging(state);
-};
-
-DirectSelect.dragFeature = function (state, e, delta) {
-	moveFeatures(this.getSelected(), delta);
-	state.dragMoveLocation = e.lngLat;
-};
-
-DirectSelect.dragVertex = function (state, e, delta) {
-	const selectedCoords = state.selectedCoordPaths.map((coord_path) =>
-		state.feature.getCoordinate(coord_path)
-	);
-	const selectedCoordPoints = selectedCoords.map((coords) => ({
-		type: Constants.geojsonTypes.FEATURE,
-		properties: {},
-		geometry: {
-			type: Constants.geojsonTypes.POINT,
-			coordinates: coords,
-		},
-	}));
-
-	const constrainedDelta = constrainFeatureMovement(selectedCoordPoints, delta);
-	for (let i = 0; i < selectedCoords.length; i++) {
-		const coord = selectedCoords[i];
-		state.feature.updateCoordinate(
-			state.selectedCoordPaths[i],
-			coord[0] + constrainedDelta.lng,
-			coord[1] + constrainedDelta.lat
-		);
-
-		for (let k = 0; k < state.groupMove_vertices.length; k++) {
-			let coord_path_m = state.groupMove_vertices[k].coord_path.split(".");
-			if (
-				typeof coord_path_m[0] !== "undefined" &&
-				typeof coord_path_m[1] !== "undefined" &&
-				typeof state.groupMove_vertices[k].feature.coordinates[coord_path_m[0]] !==
-					"undefined" &&
-				typeof state.groupMove_vertices[k].feature.coordinates[coord_path_m[0]][
-					coord_path_m[1]
-				] !== "undefined"
-			) {
-				let coord_m =
-					state.groupMove_vertices[k].feature.coordinates[coord_path_m[0]][
-						coord_path_m[1]
-					];
-				state.groupMove_vertices[k].feature.updateCoordinate(
-					state.groupMove_vertices[k].coord_path,
-					coord_m[0] + constrainedDelta.lng,
-					coord_m[1] + constrainedDelta.lat
-				);
-			}
-		}
-	}
-};
-
-DirectSelect.clickNoTarget = function () {
-	this.changeMode("custom_select");
-};
-
-DirectSelect.clickInactive = function () {
-	this.changeMode("custom_select");
-};
-
-DirectSelect.clickActiveFeature = function (state) {
-	state.selectedCoordPaths = [];
-	this.clearSelectedCoordinates();
-	state.feature.changed();
-};
-
-// EXTERNAL FUNCTIONS
-
-DirectSelect.onSetup = function (opts) {
-	const featureId = opts.featureId;
-	const feature = this.getFeature(featureId);
-
-	if (!feature) {
-		throw new Error("You must provide a featureId to enter direct_select mode");
-	}
-
-	if (feature.type === Constants.geojsonTypes.POINT) {
-		throw new TypeError("direct_select mode doesn't handle point features");
-	}
-
-	const state = {
-		featureId,
-		feature,
-		dragMoveLocation: opts.startPos || null,
-		dragMoving: false,
-		canDragMove: false,
-		selectedCoordPaths: opts.coordPath ? [opts.coordPath] : [],
-		groupMove_vertices: opts.groupMove_vertices ? opts.groupMove_vertices : [],
-	};
-
-	this.setSelectedCoordinates(
-		this.pathsToCoordinates(featureId, state.selectedCoordPaths)
-	);
-	this.setSelected(featureId);
-	doubleClickZoom.disable(this);
-
-	this.setActionableState({
-		trash: true,
-	});
-
-	return state;
-};
-
-DirectSelect.onStop = function () {
-	doubleClickZoom.enable(this);
-	this.clearSelectedCoordinates();
-};
-
-DirectSelect.toDisplayFeatures = function (state, geojson, push) {
-	if (state.featureId === geojson.properties.id) {
-		geojson.properties.active = Constants.activeStates.ACTIVE;
-		push(geojson);
-		createSupplementaryPoints(geojson, {
-			map: this.map,
-			midpoints: true,
-			selectedPaths: state.selectedCoordPaths,
-		}).forEach(push);
-	} else {
-		geojson.properties.active = Constants.activeStates.INACTIVE;
-		push(geojson);
-	}
-	this.fireActionable(state);
-};
-
-DirectSelect.onTrash = function (state) {
-	// Uses number-aware sorting to make sure '9' < '10'. Comparison is reversed because we want them
-	// in reverse order so that we can remove by index safely.
-	state.selectedCoordPaths
-		.sort((a, b) => b.localeCompare(a, "en", { numeric: true }))
-		.forEach((id) => state.feature.removeCoordinate(id));
-	this.fireUpdate();
-	state.selectedCoordPaths = [];
-	this.clearSelectedCoordinates();
-	this.fireActionable(state);
-	if (state.feature.isValid() === false) {
-		this.deleteFeature([state.featureId]);
-		this.changeMode("custom_select", {});
-	}
-};
-
-DirectSelect.onMouseMove = function (state, e) {
-	// On mousemove that is not a drag, stop vertex movement.
-	const isFeature = isActiveFeature(e);
-	const onVertex = isVertex(e);
-	const noCoords = state.selectedCoordPaths.length === 0;
-	if (isFeature && noCoords) this.updateUIClasses({ mouse: Constants.cursors.MOVE });
-	else if (onVertex && !noCoords)
-		this.updateUIClasses({ mouse: Constants.cursors.MOVE });
-	else this.updateUIClasses({ mouse: Constants.cursors.NONE });
-	this.stopDragging(state);
-};
-
-DirectSelect.onMouseOut = function (state) {
-	// As soon as you mouse leaves the canvas, update the feature
-	if (state.dragMoving) this.fireUpdate();
-};
-
-DirectSelect.onTouchStart = DirectSelect.onMouseDown = function (state, e) {
-	if (isVertex(e)) return this.onVertex(state, e);
-	if (isActiveFeature(e)) return this.onFeature(state, e);
-	if (isMidpoint(e)) return this.onMidpoint(state, e);
-};
-
-DirectSelect.onDrag = function (state, e) {
-	if (state.canDragMove !== true) return;
-	state.dragMoving = true;
-	e.originalEvent.stopPropagation();
-
-	const delta = {
-		lng: e.lngLat.lng - state.dragMoveLocation.lng,
-		lat: e.lngLat.lat - state.dragMoveLocation.lat,
-	};
-	if (state.selectedCoordPaths.length > 0) this.dragVertex(state, e, delta);
-	else this.dragFeature(state, e, delta);
-
-	state.dragMoveLocation = e.lngLat;
-};
-
-DirectSelect.onClick = function (state, e) {
-	if (noTarget(e)) return this.clickNoTarget(state, e);
-	if (isActiveFeature(e)) return this.clickActiveFeature(state, e);
-	if (isInactiveFeature(e)) return this.clickInactive(state, e);
-	this.stopDragging(state);
-};
-
-DirectSelect.onTap = function (state, e) {
-	if (noTarget(e)) return this.clickNoTarget(state, e);
-	if (isActiveFeature(e)) return this.clickActiveFeature(state, e);
-	if (isInactiveFeature(e)) return this.clickInactive(state, e);
-};
-
-DirectSelect.onTouchEnd = DirectSelect.onMouseUp = function (state) {
-	if (state.dragMoving) {
-		this.fireUpdate();
-	}
-	this.stopDragging(state);
-};
-
-export default DirectSelect;