solid-map-gl 1.11.3 → 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/Layer3D/index.jsx

@@ -1,5 +1,21 @@
 import { onCleanup, createUniqueId, createSignal, onMount, createContext, useContext, } from "solid-js";
 import { useMapContext } from "../MapProvider";
+const deg2rad = (degrees) => {
+    return (degrees * Math.PI) / 180;
+};
+const latLng2Mercator = (lat, lng, altitude) => {
+    const R = 6378137.0; // earth radius in meters
+    const x = R * deg2rad(lng);
+    const y = R * Math.log(Math.tan(Math.PI / 4 + deg2rad(lat) / 2));
+    return [x, y, altitude];
+};
+const latLng2Cartesian = ({ lat, lng }, altitude = 0) => {
+    const R = 6378137.0; // earth radius in meters
+    const x = R * Math.cos(deg2rad(lat)) * Math.cos(deg2rad(lng));
+    const y = R * Math.cos(deg2rad(lat)) * Math.sin(deg2rad(lng));
+    const z = altitude; // + R * Math.sin(deg2rad(lat));
+    return { x, y, z };
+};
 const LayerContext = createContext();
 export const useScene = () => useContext(LayerContext);
 export const Layer3D = (props) => {
@@ -38,20 +54,37 @@ export const Layer3D = (props) => {
                     const engine = new BABYLON.Engine(gl, true, {
                         useHighPrecisionMatrix: true,
                     }, true);
+                    // this.index = 0;
                     this.scene = new BABYLON.Scene(engine);
                     this.scene.autoClear = false;
-                    this.scene.autoClearDepthAndStencil = false;
+                    // this.scene.autoClearDepthAndStencil = false;
                     // this.scene.detachControl();
                     this.scene.preventDefaultOnPointerDown = false;
                     this.scene.preventDefaultOnPointerUp = false;
-                    this.scene.beforeRender = () => engine.wipeCaches(true);
-                    this.scene.activeCamera = new BABYLON.UniversalCamera("Camera", BABYLON.Vector3.Zero(), this.scene);
+                    // this.scene.beforeRender = () => engine.wipeCaches(true);
+                    const camera = new BABYLON.UniversalCamera("Camera", BABYLON.Vector3.Zero());
+                    camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
+                    camera.inertia = 0;
+                    // this.scene.activeCamera.setTarget(new BABYLON.Vector3(-1, 0, 0));
+                    // this.scene.activeCamera.rotationQuaternion =
+                    //   BABYLON.Quaternion.Identity();
+                    // this.scene.activeCamera.updateUpVectorFromRotation = true;
+                    // this.scene.activeCamera.noRotationConstraint = true;
+                    // this.scene.activeCamera.inputs.addMouseWheel();
                     // this.scene.activeCamera.setTarget(BABYLON.Vector3.Zero());
-                    // this.camera.inputs.addMouseWheel()
-                    // this.scene.activeCamera.attachControl(gl, true);
+                    // setTimeout(() => {
+                    //   this.scene.activeCamera.setPosition(
+                    //     new BABYLON.Vector3(100, 100, 100),
+                    //   );
+                    // }, 2000);
+                    // this.scene.activeCamera.attachControl(gl.canvas, true);
                     this.scene.ambientColor = new BABYLON.Color3(1, 1, 1);
                     if (props.defaultLight)
                         new BABYLON.HemisphericLight("Light", new BABYLON.Vector3(100, 10, 0), this.scene);
+                    // this.scene.root_node = new BABYLON.TransformNode("rootNode");
+                    // this.scene.root_node.lookAt(BABYLON.Vector3.Down());
+                    // this.scene.root_node.addRotation(0, 0, Math.PI / 2);
+                    // const axis = new BABYLON.AxesViewer(this.scene, 100);
                 }
                 else {
                     this.camera = new THREE.Camera();
@@ -74,12 +107,194 @@ export const Layer3D = (props) => {
             },
             render(gl, matrix) {
                 if (props.babylon) {
-                    this.scene.activeCamera.freezeProjectionMatrix(props.disableProjectionMatrix
-                        ? BABYLON.Matrix.FromArray(matrix)
-                        : worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)));
-                    // const { x, y, z } = this.map.getFreeCameraOptions().position;
-                    // this.scene.activeCamera.setPosition(new BABYLON.Vector3(x, y, z));
-                    // console.log(this.scene.activeCamera);
+                    this.scene.activeCamera.freezeProjectionMatrix(
+                    // props.disableProjectionMatrix
+                    //   ? BABYLON.Matrix.FromArray(matrix)
+                    worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)));
+                    // this.scene.activeCamera.position =
+                    //   BABYLON.Vector3.TransformCoordinates(
+                    //     new BABYLON.Vector3(),
+                    //     worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)).invert(),
+                    //   );
+                    // this.scene.activeCamera.rotation.z = matrix[0];
+                    // this.scene.activeCamera.rotation.x = matrix[1];
+                    // this.scene.activeCamera.rotation.y = matrix[2];
+                    // console.log(this.scene.activeCamera.getProjectionMatrix(), matrix);
+                    // const m = matrix;
+                    // const transform = BABYLON.Matrix.FromArray(matrix);
+                    // console.log(transform);
+                    //
+                    // const center = this.map.getCenter();
+                    // const zoom = this.map.getZoom();
+                    // const scale = Math.pow(2, zoom);
+                    // const centerX = center.lng * scale;
+                    // const centerZ = center.lat * scale;
+                    // this.scene.activeCamera.position.x = centerX;
+                    // this.scene.activeCamera.position.z = centerZ;
+                    // this.scene.activeCamera.getWorldMatrix().copyFrom(transform);
+                    const pitch = this.map.getPitch() * (Math.PI / 180);
+                    const bearing = this.map.getBearing() * (Math.PI / 180);
+                    // this.scene.activeCamera.rotation.x = Math.asin(pitch);
+                    // this.scene.activeCamera.rotation.y = Math.atan(bearing / pitch);
+                    // this.scene.activeCamera.rotation.z = -bearing;
+                    // this.scene.activeCamera
+                    //   .getWorldMatrix()
+                    //   .invertToRef(this.scene.activeCamera.getViewMatrix());
+                    // const cameraMatrix = BABYLON.Matrix.FromArray(matrix); //.invert();
+                    // const scaling = BABYLON.Vector3.Zero(),
+                    //   rotation = BABYLON.Vector3.Zero(),
+                    //   transform = BABYLON.Vector3.Zero();
+                    // cameraMatrix.decompose(scaling, rotation, transform);
+                    // const scaling2 = BABYLON.Vector3.Zero(),
+                    //   rotation2 = BABYLON.Vector3.Zero(),
+                    //   transform2 = BABYLON.Vector3.Zero();
+                    // worldMatrix.decompose(scaling2, rotation2, transform2);
+                    // const lng2 =
+                    //   props.origin[0] -
+                    //   this.map.getFreeCameraOptions().position.toLngLat().lng;
+                    // const lat2 =
+                    //   props.origin[1] -
+                    //   this.map.getFreeCameraOptions().position.toLngLat().lat;
+                    //
+                    // const pos = this.map.getFreeCameraOptions().position.toLngLat();
+                    // const orient = this.map.getFreeCameraOptions().orientation;
+                    // const camPos = latLng2Cartesian(
+                    //   this.map.getFreeCameraOptions().position.toLngLat(),
+                    //   this.map.getFreeCameraOptions().position.toAltitude(),
+                    // );
+                    // const orgPos = latLng2Cartesian({
+                    //   lng: props.origin[0],
+                    //   lat: props.origin[1],
+                    // });
+                    // const o = this.map.getFreeCameraOptions().orientation;
+                    // const orient = latLng2Cartesian(
+                    //   new window.MapLib.MercatorCoordinate(
+                    //     ...this.map.getFreeCameraOptions().orientation,
+                    //   ).toLngLat(),
+                    // );
+                    // console
+                    //   .log
+                    // this.map.getFreeCameraOptions().orientation,
+                    // this.map.getFreeCameraOptions().position.toLngLat(),
+                    //   orgX,
+                    //   camX,
+                    // camPos,
+                    // orgPos,
+                    // x,
+                    // this.scene.activeCamera.minZ,
+                    // this.scene.activeCamera.maxZ,
+                    // this.map.getFreeCameraOptions(),
+                    // this.map.getFreeCameraOptions().position.toAltitude(),
+                    // camPos.z,
+                    // orgPos.z,
+                    // camPos.z - orgPos.z,
+                    // this.scene.activeCamera.rotationQuaternion,
+                    // matrix,
+                    // camPos.z - orgPos.z,
+                    // camPos.x - orgPos.x,
+                    // camPos.y - orgPos.y,
+                    // camPos.z - orgPos.z,
+                    // this.index,
+                    // orient,
+                    // orient.x - orgPos.x,
+                    // new BABYLON.Vector3(...orient),
+                    // camY,
+                    // camZ,
+                    // pos.lng,
+                    // x2,
+                    // y2,
+                    // z2,
+                    // transform,
+                    // matrix,
+                    // cameraMatrix._m,
+                    // cameraMatrix,
+                    // new mapboxgl.MercatorCoordinate(
+                    //   transform.x,
+                    //   transform.y,
+                    //   transform.z,
+                    // ).toLngLat(),
+                    // worldOriginMercator.toLngLat(),
+                    // this.map.getFreeCameraOptions().position.toLngLat(),
+                    // this.map.getFreeCameraOptions().orientation,
+                    // BABYLON.Quaternion.FromArray(
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // ),
+                    // this.scene.activeCamera.rotationQuaternion,
+                    // BABYLON.Vector3.FromArray(
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // ),
+                    // ();
+                    // this.scene.activeCamera.freezeProjectionMatrix(
+                    //   props.disableProjectionMatrix
+                    //     ? BABYLON.Matrix.FromArray(matrix)
+                    //     : worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)),
+                    // );
+                    //
+                    // const { x, y } = this.map.project(
+                    //   new mapboxgl.MercatorCoordinate(pos.x, pos.y, pos.z).toLngLat(),
+                    // );
+                    // this.scene.activeCamera.position.y = 0; //-(camPos.x - orgPos.x);
+                    // this.scene.activeCamera.position.x = 0; //-(camPos.y - orgPos.y);
+                    // this.scene.activeCamera.position.z = -camPos.z; // - orgPos.z;
+                    // console.log(this.scene.activeCamera.position);
+                    // const [x, y, z, w] = this.map.getFreeCameraOptions().orientation;
+                    // let rotation_y = Math.atan(z / x);
+                    // if (x < 0) rotation_y += Math.PI;
+                    // rotation_y = Math.PI / 2 - rotation_y;
+                    // const rotation_x = Math.asin(-y);
+                    // const camera_up_before_rotatez = new BABYLON.Vector3(
+                    //   -Math.cos(rotation_y),
+                    //   0,
+                    //   Math.sin(rotation_y),
+                    // );
+                    // const rotation_z = Math.acos(
+                    //   camera_up.x * camera_up_before_rotatez.x +
+                    //     camera_up.y * camera_up_before_rotatez.y +
+                    //     camera_up.z * camera_up_before_rotatez.z,
+                    // );
+                    // rotation_z = Math.PI / 2 - rotation_z;
+                    // if (camera_up.y < 0) rotation_z = Math.PI - rotation_z;
+                    //
+                    // this.scene.activeCamera.rotation.x = rotation_x;
+                    // this.scene.activeCamera.rotation.y = rotation_y;
+                    // this.scene.activeCamera.rotationQuaternion =
+                    //   // BABYLON.Quaternion.Identity();
+                    //   // BABYLON.Quaternion.FromEulerAngles(1, 0, 0);
+                    //   BABYLON.Quaternion.FromArray([-x, y, -z, w]);
+                    // this.scene.activeCamera.alpha = -z;
+                    // this.scene.activeCamera.alpha = -z;
+                    // this.scene.activeCamera.radius = x; //Math.PI / 2 + this.index;
+                    // this.scene.activeCamera.radius = y;
+                    // this.index += 0.001;
+                    // BABYLON.Quaternion.RotationYawPitchRoll(-1, 1, -1);
+                    // BABYLON.Vector3.Zero();
+                    // BABYLON.Vector3.FromArray(
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // );
+                    // this.scene.activeCamera.setTarget(
+                    //   BABYLON.Vector3.Zero(),
+                    //   // new BABYLON.Vector3(
+                    //   //   orient.x - orgPos.x,
+                    //   //   0, // orient.y - orgPos.y,
+                    //   //   0, // orient.z - orgPos.z,
+                    //   // ),
+                    // );
+                    // const o2 = this.map.project(
+                    //   new mapboxgl.MercatorCoordinate(
+                    //     orient[0],
+                    //     orient[1],
+                    //     orient[2],
+                    //   ).toLngLat(),
+                    // );
+                    // this.camera.setTarget(new BABYLON.Vector3(o2.x, o2.y, o2.z));
+                    // console.log(
+                    //   this.map.getCamera(),
+                    //   this.map.project(
+                    //     new mapboxgl.MercatorCoordinate(pos.x, pos.y, pos.z).toLngLat(),
+                    //   ),
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // );
+                    // console.log(this.scene.activeCamera.position);
                     // this.camera.position = BABYLON.Vector3.TransformCoordinates(
                     //   new BABYLON.Vector3(x, y, z),
                     //   this.scene.activeCamera.getProjectionMatrix().clone().invert(),

package/dist/types/components/Draw/drawingStyles.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    id: string;
+    type: string;
+    filter: (string | string[])[];
+    layout: {
+        "text-field": string[];
+        "text-anchor": string[];
+        "text-offset": (string | string[] | number[])[];
+        "text-size": number;
+        "text-allow-overlap": boolean;
+        "text-ignore-placement": boolean;
+    };
+    paint: {
+        "text-halo-color": string;
+        "text-halo-width": number;
+        "text-halo-blur": number;
+        "text-color": string;
+    };
+}[];
+export default _default;

package/dist/types/components/Draw/index.d.ts

@@ -1,14 +1,16 @@
-import { VoidComponent } from 'solid-js';
-import type { drawEventTypes } from '../../events';
+import { VoidComponent } from "solid-js";
+import type { drawEventTypes } from "../../events";
 type Props = {
     /** Draw Library */
     lib: any;
     /** Draw Options */
     options?: object;
     /** Draw Control Position */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     /** Draw Control Instance */
     getInstance?: (object: any) => void;
+    showLength?: boolean;
+    showArea?: boolean;
 } & drawEventTypes;
 export declare const Draw: VoidComponent<Props>;
 export {};

package/dist/types/components/Draw/modes/index.d.ts

@@ -0,0 +1,6 @@
+import draw_point from "./point";
+import draw_polygon from "./polygon";
+import draw_line_string from "./line_string";
+import draw_radius from "./radius";
+import draw_rectangle from "./rectangle";
+export { draw_point, draw_polygon, draw_line_string, draw_radius, draw_rectangle, };

package/dist/types/components/Draw/modes/line_string.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/types/components/Draw/modes/multi_point.d.ts

@@ -0,0 +1,2 @@
+declare const MultiPointMode: {};
+export default MultiPointMode;