solid-map-gl 1.13.0 → 2.0.0

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

@@ -1,135 +0,0 @@
-import { onCleanup, createSignal, createEffect, untrack, } from 'solid-js';
-import { useMapContext } from '../MapProvider';
-const PATTERN = {
-    diagonal_l: { size: 20, path: 'M20 0 0 20M-10 10 10-10M10 30 30 10' },
-    diagonal_r: { size: 20, path: 'M0 0 20 20M30 10 10-10M10 30-10 10' },
-    horizontal: { size: 14, path: 'M7 0V20' },
-    vertical: { size: 14, path: 'M0 7H20' },
-    cross: { size: 18, path: 'M9 0V18M0 9H18' },
-    hash: { size: 30, path: 'M15 0 30 15 15 30 0 15Z' },
-    chevron_h: { size: 20, path: 'M-5 5 0 10 10 0 20 10 25 5M0 30 10 20 20 30' },
-    chevron_v: { size: 20, path: 'M5-5 10 0 0 10 10 20 5 25M25 15 20 10 25 5' },
-    square: { size: 20, path: 'M8 8H12V12H8Z', fill: true },
-    hex: { size: 50, path: 'M0 0V50L50 25ZM50 0V50L0 25ZM25 0V50' },
-    circle: {
-        size: 25,
-        path: 'M8 10A2.5 2.5 0 118.01 10M18 15A2.5 2.5 0 1018.01 15',
-        fill: true,
-    },
-};
-export const patternList = Object.keys(PATTERN);
-export const MGL_Image = props => {
-    const [ctx] = useMapContext();
-    const [size, setSize] = createSignal({ width: 0, height: 0 });
-    const debug = (text, value) => {
-        ctx.map.debug &&
-            console.debug('%c[MapGL]', 'color: #10b981', text, value || '');
-    };
-    // Remove Image
-    onCleanup(() => {
-        ctx.map?.hasImage(props.id) && ctx.map?.removeImage(props.id);
-        debug('Remove Image:', props.id);
-    });
-    // Add or Update Image
-    createEffect(() => {
-        if (!props.id)
-            throw new Error('Image - ID is required');
-        if (!props.source && !props.pattern)
-            throw new Error('Image - Image or Pattern is required');
-        const ops = props.pattern
-            ? { pixelRatio: 2, ...props.options }
-            : props.options;
-        _loadImage(props.source || _createPattern(props.pattern), data => {
-            const { width, height } = data;
-            if (ctx.map && !ctx.map.hasImage(props.id))
-                ctx.map.addImage(props.id, data, ops);
-            if (!props.pattern &&
-                untrack(() => width === size().width && height === size().height)) {
-                ctx.map.updateImage(props.id, data);
-                ctx.map.triggerRepaint();
-            }
-            else {
-                ctx.map.removeImage(props.id);
-                ctx.map.addImage(props.id, data, ops);
-            }
-            setSize({ width, height });
-            debug('Add Image:', props.id);
-            ctx.map.on('style.load', () => {
-                if (ctx.map.hasImage(props.id))
-                    return;
-                ctx.map.addImage(props.id, data, ops);
-                debug('Re-Add Image:', props.id);
-            });
-        });
-    });
-    // Load Image / SVG
-    const _loadImage = (image, callback) => {
-        if (typeof image == 'string' && image?.trimStart().startsWith('<svg')) {
-            image = new DOMParser().parseFromString(image, 'image/svg+xml')
-                .childNodes[0];
-        }
-        if (image instanceof SVGElement) {
-            props.options?.fill && image.setAttribute('fill', props.options.fill);
-            props.options?.stroke &&
-                image.setAttribute('stroke', props.options.stroke);
-            image = new XMLSerializer().serializeToString(image);
-        }
-        if (typeof image !== 'string')
-            return callback(image);
-        ctx.map.loadImage(image, async (error, imageData) => {
-            if (error) {
-                if (typeof image == 'string' && image?.trimEnd().endsWith('.svg')) {
-                    image = await (await fetch(image)).text();
-                    image = new DOMParser().parseFromString(image, 'image/svg+xml')
-                        .childNodes[0];
-                    image.setAttribute('fill', props.options.fill);
-                    image.setAttribute('stroke', props.options.stroke);
-                    image.setAttribute('transform', props.options.transform);
-                    image = new XMLSerializer().serializeToString(image);
-                }
-                const img = new Image();
-                img.crossOrigin = 'Anonymous';
-                img.onload = () => {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = Math.max(img.width, 50);
-                    canvas.height = Math.max(img.height, 50);
-                    const ctx = canvas.getContext('2d');
-                    ctx.imageSmoothingEnabled = true;
-                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-                    return callback(ctx.getImageData(0, 0, canvas.width, canvas.height));
-                };
-                img.src = image.trimStart().startsWith('<svg')
-                    ? 'data:image/svg+xml;charset=utf-8,' + image
-                    : image;
-            }
-            else {
-                return callback(imageData);
-            }
-        });
-    };
-    const _createPattern = pattern => {
-        const p = PATTERN[pattern.type];
-        return {
-            width: p.size,
-            height: p.size,
-            data: new Uint8Array(p.size * p.size * 4),
-            onAdd: function () {
-                let canvas = document.createElement('canvas');
-                canvas.width = canvas.height = p.size;
-                this.ctx = canvas.getContext('2d', { willReadFrequently: true });
-            },
-            render: function () {
-                this.ctx.fillStyle = pattern.background || 'transparent';
-                this.ctx.fillRect(0, 0, this.width, this.height);
-                this.ctx.strokeStyle = this.ctx.fillStyle = pattern.color || 'black';
-                this.ctx.lineWidth = pattern.lineWith || 1;
-                this.ctx.stroke(new Path2D(p.path));
-                if (p.fill)
-                    this.ctx.fill(new Path2D(p.path));
-                this.data = this.ctx.getImageData(0, 0, this.width, this.height).data;
-                return true;
-            },
-        };
-    };
-    return null;
-};

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

@@ -1,125 +0,0 @@
-import { onCleanup, createEffect, createUniqueId } from "solid-js";
-import { useMapContext } from "../MapProvider";
-import { useSourceId } from "../Source";
-import { layerEvents } from "../../events";
-import { baseStyle, layoutStyles } from "../../styles";
-const diff = (newProps = {}, prevProps = {}) => {
-    const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
-    return [...keys].reduce((acc, key) => {
-        const value = newProps[key];
-        if (value !== prevProps[key]) {
-            acc.push([key, value]);
-        }
-        return acc;
-    }, []);
-};
-const newKey = (key, type) => (key.startsWith(type) || key.startsWith("icon") || key.startsWith("text")
-    ? ""
-    : type + "-") + key.replace(/[A-Z]/g, (s) => "-" + s.toLowerCase());
-const updateStyle = (oldStyle) => {
-    if (!oldStyle)
-        return;
-    let layout = {};
-    let paint = {};
-    let style = {};
-    Object.entries(oldStyle).forEach(([key, value]) => {
-        if (baseStyle.includes(key))
-            style[key] = value;
-        else {
-            const nk = newKey(key, oldStyle.type);
-            layoutStyles.includes(nk) ? (layout[nk] = value) : (paint[nk] = value);
-        }
-    });
-    if (oldStyle.paint)
-        Object.entries(oldStyle.paint).forEach(([key, value]) => (paint[newKey(key, oldStyle.type)] = value));
-    if (oldStyle.layout)
-        Object.entries(oldStyle.layout).forEach(([key, value]) => (layout[newKey(key, oldStyle.type)] = value));
-    return { ...style, paint, layout };
-};
-export const Layer = (props) => {
-    const [ctx] = useMapContext();
-    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 || "");
-    };
-    // Add Layer
-    ctx.map.addLayer(props.customLayer || {
-        ...updateStyle(props.style),
-        id: layerId,
-        source: sourceId,
-        slot: props.slot || "",
-        metadata: {
-            smg: { beforeType: props.beforeType, beforeId: props.beforeId },
-        },
-    }, props.beforeType
-        ? ctx.map.getStyle().layers.find((l) => l.type === props.beforeType)?.id
-        : props.beforeId);
-    ctx.map.layerIdList.push(layerId);
-    if (props.customLayer)
-        ctx.map.fire("load");
-    debug("Add Layer:", layerId);
-    // Hook up events
-    layerEvents.forEach((item) => {
-        if (props[item]) {
-            const event = item.slice(2).toLowerCase();
-            ctx.map.on(event, layerId, (evt) => {
-                evt.clickOnLayer = true;
-                props[item](evt);
-                ctx.map.debugEvent &&
-                    debug(`Layer '${event}' event on '${layerId}':`, evt);
-            });
-        }
-    });
-    // Update Style
-    createEffect((prev) => {
-        const style = updateStyle(props.style);
-        if (style === prev)
-            return;
-        if (style.layout !== prev?.layout)
-            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(layerId, key, value, { validate: false }));
-        if (style.minzoom !== prev?.minzoom || style.maxzoom !== prev?.maxzoom)
-            ctx.map.setLayerZoomRange(layerId, style.minzoom, style.maxzoom);
-        if (style.filter !== prev?.filter)
-            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(layerId, "visibility", props.visible ? "visible" : "none", { validate: false });
-        debug(`Update Visibility (${layerId}):`, props.visible.toString());
-        return props.visible;
-    }, props.visible);
-    // Update Filter
-    createEffect(async () => {
-        if (!props.filter)
-            return;
-        !ctx.map.isStyleLoaded() && (await ctx.map.once("styledata"));
-        ctx.map.setFilter(layerId, props.filter);
-        debug(`Update Filter (${layerId}):`, props.filter);
-    });
-    // Update Feature State
-    createEffect(async () => {
-        if (!props.featureState || props.featureState.id === null)
-            return;
-        !ctx.map.isStyleLoaded() && (await ctx.map.once("styledata"));
-        ctx.map.removeFeatureState({
-            source: sourceId,
-            sourceLayer: props.style["source-layer"],
-        });
-        ctx.map.setFeatureState({
-            source: sourceId,
-            sourceLayer: props.style["source-layer"],
-            id: props.featureState.id,
-        }, props.featureState.state);
-    });
-    //Remove Layer
-    onCleanup(() => ctx.map?.getLayer(layerId) && ctx.map?.removeLayer(layerId));
-    return props.children;
-};

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

@@ -1,330 +0,0 @@
-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) => {
-    const [ctx] = useMapContext();
-    const [scene, setScene] = createSignal(null);
-    onMount(async () => {
-        props.id = props.id || createUniqueId();
-        const worldOriginMercator = window.MapLib.MercatorCoordinate.fromLngLat([props.origin[0] || 0, props.origin[1] || 0], props.origin[2] || 0);
-        const worldScale = worldOriginMercator.meterInMercatorCoordinateUnits();
-        const { x, y, z } = worldOriginMercator;
-        let worldMatrix = null;
-        let BABYLON = null;
-        let THREE = null;
-        if (props.babylon) {
-            BABYLON = await import("@babylonjs/core");
-            worldMatrix = BABYLON.Matrix.Compose(new BABYLON.Vector3(worldScale, worldScale, worldScale), BABYLON.Quaternion.FromEulerAngles(Math.PI / 2, 0, 0), new BABYLON.Vector3(x, y, z));
-        }
-        else {
-            THREE = await import("three");
-            worldMatrix = {
-                translateX: x,
-                translateY: y,
-                translateZ: z,
-                rotateX: Math.PI / 2,
-                rotateY: 0,
-                rotateZ: 0,
-                scale: worldScale,
-            };
-        }
-        ctx.map.addLayer({
-            id: props.id,
-            type: "custom",
-            renderingMode: "3d",
-            onAdd(map, gl) {
-                if (props.babylon) {
-                    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.detachControl();
-                    this.scene.preventDefaultOnPointerDown = false;
-                    this.scene.preventDefaultOnPointerUp = false;
-                    // 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());
-                    // 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();
-                    this.scene = new THREE.Scene();
-                    if (props.defaultLight) {
-                        this.light = new THREE.DirectionalLight(0xffffff);
-                        this.light.position.set(100, 0, 0).normalize();
-                        this.scene.add(this.light);
-                    }
-                    this.renderer = new THREE.WebGLRenderer({
-                        canvas: map.getCanvas(),
-                        context: gl,
-                        antialias: true,
-                    });
-                    this.renderer.autoClear = false;
-                }
-                this.map = map;
-                props.onAdd && props.onAdd(this.scene, this.map, gl);
-                setScene(this.scene);
-            },
-            render(gl, matrix) {
-                if (props.babylon) {
-                    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(),
-                    // );
-                    this.scene.render(false);
-                }
-                else {
-                    const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), worldMatrix.rotateX);
-                    const rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), worldMatrix.rotateY);
-                    const rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), worldMatrix.rotateZ);
-                    const m = new THREE.Matrix4().fromArray(matrix);
-                    const l = new THREE.Matrix4()
-                        .makeTranslation(worldMatrix.translateX, worldMatrix.translateY, worldMatrix.translateZ)
-                        .scale(new THREE.Vector3(worldMatrix.scale, -worldMatrix.scale, worldMatrix.scale))
-                        .multiply(rotationX)
-                        .multiply(rotationY)
-                        .multiply(rotationZ);
-                    this.camera.projectionMatrix = m.multiply(l);
-                    this.renderer.resetState();
-                    this.renderer.render(this.scene, this.camera);
-                }
-                props.onRender && props.onRender(gl, matrix);
-                ctx.map.triggerRepaint();
-            },
-        }, props.beforeId);
-    });
-    onCleanup(() => {
-        ctx.map.getLayer(props.id) && ctx.map.removeLayer(props.id);
-    });
-    return (<LayerContext.Provider value={scene}>
-      {scene() && props.children}
-    </LayerContext.Provider>);
-};

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

@@ -1,10 +0,0 @@
-import { onCleanup, createEffect } from 'solid-js';
-import { useMapContext } from '../MapProvider';
-export const Light = (props) => {
-    const [ctx] = useMapContext();
-    // Add or Update Light Layer
-    createEffect(() => ctx.map.setLight(props.style || {}));
-    // Remove Light Layer
-    onCleanup(() => ctx.map?.setLight(null));
-    return null;
-};