solid-map-gl 1.11.2 → 1.12.0

package/dist/source/components/Draw/modes/rectangle.js

@@ -0,0 +1,118 @@
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import { getArea, getLength } from "./measurements";
+const RectangleMode = {
+    ...MapboxDraw.modes.draw_line_string,
+    // When the mode starts this function will be called.
+    onSetup: function (opts) {
+        const props = MapboxDraw.modes.draw_line_string.onSetup.call(this, opts);
+        const rectangle = this.newFeature({
+            type: "Feature",
+            properties: {},
+            geometry: {
+                type: "Polygon",
+                coordinates: [[]],
+            },
+        });
+        this.addFeature(rectangle);
+        return { ...props, ...opts, rectangle };
+    },
+    // support mobile taps
+    onTap: function (state, e) {
+        // emulate 'move mouse' to update feature coords
+        if (state.startPoint)
+            this.onMouseMove(state, e);
+        // emulate onClick
+        this.onClick(state, e);
+    },
+    // Whenever a user clicks on the map, Draw will call `onClick`
+    onClick: function (state, e) {
+        if (state.startPoint &&
+            state.startPoint[0] !== e.lngLat.lng &&
+            state.startPoint[1] !== e.lngLat.lat) {
+            // if state.startPoint exist, means its second click
+            // change to  simple_select mode
+            this.updateUIClasses({ mouse: "pointer" });
+            state.endPoint = [e.lngLat.lng, e.lngLat.lat];
+            this.changeMode("simple_select", { featuresId: state.rectangle.id });
+        }
+        else {
+            // if its first click, save clicked point coords as starting for  rectangle
+            state.startPoint = [e.lngLat.lng, e.lngLat.lat];
+        }
+    },
+    onMouseMove: function (state, e) {
+        // if startPoint, update the feature coordinates, using the bounding box concept
+        // we are simply using the startingPoint coordinates and the current Mouse Position
+        // coordinates to calculate the bounding box on the fly, which will be our rectangle
+        if (state.startPoint) {
+            state.rectangle.updateCoordinate("0.0", state.startPoint[0], state.startPoint[1]); //minX, minY - the starting point
+            state.rectangle.updateCoordinate("0.1", e.lngLat.lng, state.startPoint[1]); // maxX, minY
+            state.rectangle.updateCoordinate("0.2", e.lngLat.lng, e.lngLat.lat); // maxX, maxY
+            state.rectangle.updateCoordinate("0.3", state.startPoint[0], e.lngLat.lat); // minX,maxY
+            state.rectangle.updateCoordinate("0.4", state.startPoint[0], state.startPoint[1]); //minX,minY - ending point (equals to starting point)
+        }
+    },
+    // Whenever a user clicks on a key while focused on the map, it will be sent here
+    onKeyUp: function (state, e) {
+        if (e.keyCode === 27)
+            return this.changeMode("simple_select");
+    },
+    onStop: function (state) {
+        MapboxDraw.modes.draw_line_string.onStop.call(this, state);
+        // check to see if we've deleted this feature
+        if (this.getFeature(state.rectangle.id) === undefined)
+            return;
+        //remove last added coordinate
+        state.rectangle.removeCoordinate("0.4");
+        if (state.rectangle.isValid()) {
+            this.map.fire("draw.create", {
+                features: [state.rectangle.toGeoJSON()],
+            });
+        }
+        else {
+            this.deleteFeature([state.rectangle.id], { silent: true });
+            this.changeMode("simple_select", {}, { silent: true });
+        }
+    },
+    toDisplayFeatures: function (state, geojson, display) {
+        console.log(state);
+        const isActivePolygon = geojson.properties.id === state.rectangle.id;
+        geojson.properties.active = isActivePolygon ? "true" : "false";
+        if (!isActivePolygon)
+            return display(geojson);
+        // Only render the rectangular polygon if it has the starting point
+        if (!state.startPoint)
+            return;
+        display(geojson);
+        // create custom feature for the current pointer position
+        if (state.showLength) {
+            display(getLength({
+                type: "Feature",
+                geometry: {
+                    type: "LineString",
+                    coordinates: [
+                        geojson.geometry.coordinates[0][0],
+                        geojson.geometry.coordinates[0][1],
+                    ],
+                },
+            }, { parent: state.rectangle.id, anchor: "bottom" }));
+            display(getLength({
+                type: "Feature",
+                geometry: {
+                    type: "LineString",
+                    coordinates: [
+                        geojson.geometry.coordinates[0][1],
+                        geojson.geometry.coordinates[0][2],
+                    ],
+                },
+            }, { parent: state.rectangle.id, anchor: "left" }));
+        }
+        state.showArea && display(getArea(geojson, { parent: state.rectangle.id }));
+        return null;
+    },
+    onTrash: function (state) {
+        this.deleteFeature([state.rectangle.id], { silent: true });
+        this.changeMode("simple_select");
+    },
+};
+export default RectangleMode;

package/dist/source/components/Draw/modes/rectangle_assisted.js

@@ -0,0 +1,233 @@
+const doubleClickZoom = {
+    enable: (ctx) => {
+        setTimeout(() => {
+            // First check we've got a map and some context.
+            if (!ctx.map ||
+                !ctx.map.doubleClickZoom ||
+                !ctx._ctx ||
+                !ctx._ctx.store ||
+                !ctx._ctx.store.getInitialConfigValue)
+                return;
+            if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom"))
+                return;
+            ctx.map.doubleClickZoom.enable();
+        }, 0);
+    },
+    disable(ctx) {
+        setTimeout(() => {
+            if (!ctx.map || !ctx.map.doubleClickZoom)
+                return;
+            ctx.map.doubleClickZoom.disable();
+        }, 0);
+    },
+};
+const RectangleAssistedMode = {
+    onSetup: function (opts) {
+        const rectangle = this.newFeature({
+            type: "Feature",
+            properties: {},
+            geometry: {
+                type: "Polygon",
+                coordinates: [[]],
+            },
+        });
+        this.addFeature(rectangle);
+        this.clearSelectedFeatures();
+        doubleClickZoom.disable(this);
+        this.updateUIClasses({
+            mouse: "add",
+        });
+        this.setActionableState({
+            trash: true,
+        });
+        return {
+            rectangle,
+            currentVertexPosition: 0,
+        };
+    },
+    onTap: function (state, e) {
+        this.onClick(state, e);
+    },
+    onClick: function (state, e) {
+        if (state.currentVertexPosition === 2) {
+            const getpXY3 = this.calculatepXY3(state, e, false);
+            if (getpXY3) {
+                state.rectangle.updateCoordinate(`0.${state.currentVertexPosition + 1}`, getpXY3[0], getpXY3[1]);
+            }
+            this.updateUIClasses({
+                mouse: "pointer",
+            });
+            return this.changeMode("simple_select", {
+                featuresId: state.rectangle.id,
+            });
+        }
+        else {
+            state.rectangle.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
+            state.currentVertexPosition++;
+            state.rectangle.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
+        }
+    },
+    onMouseMove: function (state, e) {
+        state.rectangle.updateCoordinate("0." + state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
+        if (state.currentVertexPosition && state.currentVertexPosition > 0) {
+            this.calculateOrientedAnglePolygon(state);
+        }
+        if (state.currentVertexPosition === 2) {
+            const getpXY3 = this.calculatepXY3(state, e, true);
+            if (getpXY3) {
+                state.rectangle.updateCoordinate("0." + (state.currentVertexPosition + 1), getpXY3[0], getpXY3[1]);
+            }
+        }
+    },
+    deegrees2meters(px) {
+        //gist from https://gist.github.com/springmeyer/871897
+        const x = (px[0] * 20037508.34) / 180;
+        let y = Math.log(Math.tan(((90 + px[1]) * Math.PI) / 360)) / (Math.PI / 180);
+        y = (y * 20037508.34) / 180;
+        return [x, y];
+    },
+    meters2degress(px) {
+        //gist from https://gist.github.com/springmeyer/871897
+        const lon = (px[0] * 180) / 20037508.34;
+        const lat = (Math.atan(Math.exp((px[1] * Math.PI) / 20037508.34)) * 360) / Math.PI -
+            90;
+        return [lon, lat];
+    },
+    calculateOrientedAnglePolygon: function (state) {
+        const pXY0 = state.rectangle.getCoordinate("0.0");
+        const pXY0_3857 = this.deegrees2meters(pXY0);
+        const pXY1 = state.rectangle.getCoordinate("0.1");
+        const pXY1_3857 = this.deegrees2meters(pXY1);
+        const angleStdGraus = (Math.atan2(pXY1_3857[1] - pXY0_3857[1], pXY1_3857[0] - pXY0_3857[0]) *
+            180) /
+            Math.PI;
+        let angleSudGraus = -1.0 * (angleStdGraus + 90);
+        const angle = angleSudGraus < 0 ? angleSudGraus + 360 : angleSudGraus;
+        state.angle = parseFloat(angle.toFixed(2));
+    },
+    calculatepXY3: function (state, e, tmp) {
+        const pXY0 = state.rectangle.getCoordinate("0.0");
+        const pXY0_3857 = this.deegrees2meters(pXY0);
+        const pXY1 = state.rectangle.getCoordinate("0.1");
+        const pXY1_3857 = this.deegrees2meters(pXY1);
+        let pXY2_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
+        const mouse_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
+        if (pXY0_3857[0] === pXY1_3857[0]) {
+            pXY2_3857 = [mouse_3857[0], pXY1_3857[1]];
+        }
+        else if (pXY0_3857[1] === pXY1_3857[1]) {
+            pXY2_3857 = [pXY1_3857[0], mouse_3857[1]];
+        }
+        else {
+            const vector1_3857 = (pXY1_3857[1] - pXY0_3857[1]) / (pXY1_3857[0] - pXY0_3857[0]);
+            const vector2_3857 = -1.0 / vector1_3857;
+            if (Math.abs(vector2_3857) < 1) {
+                pXY2_3857[1] =
+                    vector2_3857 * (mouse_3857[0] - pXY1_3857[0]) + pXY1_3857[1];
+            }
+            else {
+                pXY2_3857[0] =
+                    pXY1_3857[0] + (pXY2_3857[1] - pXY1_3857[1]) / vector2_3857;
+            }
+        }
+        const vector_3857 = [
+            pXY1_3857[0] - pXY0_3857[0],
+            pXY1_3857[1] - pXY0_3857[1],
+        ];
+        const pXY3_3857 = [
+            pXY2_3857[0] - vector_3857[0],
+            pXY2_3857[1] - vector_3857[1],
+        ];
+        const pXY2G = this.meters2degress(pXY2_3857);
+        const pXY3G = this.meters2degress(pXY3_3857);
+        state.rectangle.updateCoordinate("0.2", pXY2G[0], pXY2G[1]);
+        state.rectangle.updateCoordinate("0.3", pXY3G[0], pXY3G[1]);
+        return pXY3G;
+    },
+    onKeyUp: function (state, e) {
+        if (e.keyCode === 27)
+            return this.changeMode("simple_select");
+    },
+    onStop: function (state) {
+        doubleClickZoom.enable(this);
+        this.updateUIClasses({
+            mouse: "none",
+        });
+        this.activateUIButton();
+        // check to see if we've deleted this feature
+        if (this.getFeature(state.rectangle.id) === undefined)
+            return;
+        //remove last added coordinate
+        state.rectangle.removeCoordinate("0.4");
+        if (state.rectangle.isValid()) {
+            this.map.fire("draw.create", {
+                features: [state.rectangle.toGeoJSON()],
+            });
+        }
+        else {
+            this.deleteFeature([state.rectangle.id], {
+                silent: true,
+            });
+            this.changeMode("simple_select", {}, {
+                silent: true,
+            });
+        }
+    },
+    toDisplayFeatures: function (state, geojson, display) {
+        const isActivePolygon = geojson.properties.id === state.rectangle.id;
+        geojson.properties.active = isActivePolygon ? "true" : "false";
+        geojson.properties.angle = state.angle;
+        geojson.angle = state.angle;
+        if (!isActivePolygon)
+            return display(geojson);
+        const coordinateCount = geojson.geometry.coordinates[0].length;
+        if (coordinateCount < 3) {
+            const coordinates = geojson.geometry.coordinates[0][0];
+            const vertexPoint = {
+                type: "Feature",
+                properties: geojson.properties,
+                angle: state.angle,
+                geometry: {
+                    coordinates: geojson.geometry.coordinates[0][0],
+                    type: "Point",
+                },
+            };
+            if (coordinates) {
+                display(vertexPoint);
+            }
+            return;
+        }
+        if (coordinateCount >= 3 && coordinateCount <= 4) {
+            const lineCoordinates = [
+                [
+                    geojson.geometry.coordinates[0][0][0],
+                    geojson.geometry.coordinates[0][0][1],
+                ],
+                [
+                    geojson.geometry.coordinates[0][1][0],
+                    geojson.geometry.coordinates[0][1][1],
+                ],
+            ];
+            display({
+                type: "Feature",
+                properties: geojson.properties,
+                angle: state.angle,
+                geometry: {
+                    coordinates: lineCoordinates,
+                    type: "LineString",
+                },
+            });
+            if (coordinateCount === 3) {
+                return;
+            }
+        }
+        return display(geojson);
+    },
+    onTrash: function (state) {
+        this.deleteFeature([state.rectangle.id], {
+            silent: true,
+        });
+        this.changeMode("simple_select");
+    },
+};
+export default RectangleAssistedMode;

package/dist/source/components/Layer/index.jsx

@@ -38,8 +38,8 @@ const updateStyle = (oldStyle) => {
 };
 export const Layer = (props) => {
     const [ctx] = useMapContext();
-    const sourceId = props.style?.source || useSourceId();
-    props.id = props.id || props.customLayer?.id || createUniqueId();
+    const sourceId = props.sourceId || props.style?.source || useSourceId();
+    const layerId = props.id || props.customLayer?.id || createUniqueId();
     const debug = (text, value) => {
         (ctx.map.debug || ctx.map.debugEvents) &&
             console.debug("%c[MapGL]", "color: #10b981", text, value || "");
@@ -47,7 +47,7 @@ export const Layer = (props) => {
     // Add Layer
     ctx.map.addLayer(props.customLayer || {
         ...updateStyle(props.style),
-        id: props.id,
+        id: layerId,
         source: sourceId,
         slot: props.slot || "",
         metadata: {
@@ -56,19 +56,19 @@ export const Layer = (props) => {
     }, props.beforeType
         ? ctx.map.getStyle().layers.find((l) => l.type === props.beforeType)?.id
         : props.beforeId);
-    ctx.map.layerIdList.push(props.id);
+    ctx.map.layerIdList.push(layerId);
     if (props.customLayer)
         ctx.map.fire("load");
-    debug("Add Layer:", props.id);
+    debug("Add Layer:", layerId);
     // Hook up events
     layerEvents.forEach((item) => {
         if (props[item]) {
             const event = item.slice(2).toLowerCase();
-            ctx.map.on(event, props.id, (evt) => {
+            ctx.map.on(event, layerId, (evt) => {
                 evt.clickOnLayer = true;
                 props[item](evt);
                 ctx.map.debugEvent &&
-                    debug(`Layer '${event}' event on '${props.id}':`, evt);
+                    debug(`Layer '${event}' event on '${layerId}':`, evt);
             });
         }
     });
@@ -78,22 +78,22 @@ export const Layer = (props) => {
         if (style === prev)
             return;
         if (style.layout !== prev?.layout)
-            diff(style.layout, prev?.layout).forEach(([key, value]) => ctx.map.setLayoutProperty(props.id, key, value, { validate: false }));
+            diff(style.layout, prev?.layout).forEach(([key, value]) => ctx.map.setLayoutProperty(layerId, key, value, { validate: false }));
         if (style.paint !== prev?.paint)
-            diff(style.paint, prev?.paint).forEach(([key, value]) => ctx.map.setPaintProperty(props.id, key, value, { validate: false }));
+            diff(style.paint, prev?.paint).forEach(([key, value]) => ctx.map.setPaintProperty(layerId, key, value, { validate: false }));
         if (style.minzoom !== prev?.minzoom || style.maxzoom !== prev?.maxzoom)
-            ctx.map.setLayerZoomRange(props.id, style.minzoom, style.maxzoom);
+            ctx.map.setLayerZoomRange(layerId, style.minzoom, style.maxzoom);
         if (style.filter !== prev?.filter)
-            ctx.map.setFilter(props.id, style.filter, { validate: false });
-        debug("Update Layer Style:", props.id);
+            ctx.map.setFilter(layerId, style.filter, { validate: false });
+        debug("Update Layer Style:", layerId);
         return style;
     }, updateStyle(props.style));
     // Update Visibility
     createEffect((prev) => {
         if (props.visible === prev)
             return;
-        ctx.map.setLayoutProperty(props.id, "visibility", props.visible ? "visible" : "none", { validate: false });
-        debug(`Update Visibility (${props.id}):`, props.visible.toString());
+        ctx.map.setLayoutProperty(layerId, "visibility", props.visible ? "visible" : "none", { validate: false });
+        debug(`Update Visibility (${layerId}):`, props.visible.toString());
         return props.visible;
     }, props.visible);
     // Update Filter
@@ -101,8 +101,8 @@ export const Layer = (props) => {
         if (!props.filter)
             return;
         !ctx.map.isStyleLoaded() && (await ctx.map.once("styledata"));
-        ctx.map.setFilter(props.id, props.filter);
-        debug(`Update Filter (${props.id}):`, props.filter);
+        ctx.map.setFilter(layerId, props.filter);
+        debug(`Update Filter (${layerId}):`, props.filter);
     });
     // Update Feature State
     createEffect(async () => {
@@ -120,6 +120,6 @@ export const Layer = (props) => {
         }, props.featureState.state);
     });
     //Remove Layer
-    onCleanup(() => ctx.map?.getLayer(props.id) && ctx.map?.removeLayer(props.id));
+    onCleanup(() => ctx.map?.getLayer(layerId) && ctx.map?.removeLayer(layerId));
     return props.children;
 };