@bitalltech-maplibre/core 1.0.3 → 1.0.5

package/dist/index.esm.js

@@ -293,6 +293,273 @@ const createBeamGeometry = (options) => {
     }
   };
 };
+const EMPTY_FEATURE_COLLECTION = {
+  type: "FeatureCollection",
+  features: []
+};
+const createFeature$1 = (geometry, properties) => ({
+  type: "Feature",
+  geometry,
+  properties
+});
+const asOpacity = (value, fallback) => Math.max(0, Math.min(1, value ?? fallback));
+const createRadarPowerFeatures = (radar) => {
+  var _a;
+  if (radar.visible === false) {
+    return [];
+  }
+  const color = radar.color ?? "#38ff4a";
+  const ringColor = radar.ringColor ?? color;
+  const ringCount = Math.max(0, Math.floor(radar.ringCount ?? 4));
+  const coreRadius = Math.max(20, radar.coreRadius ?? Math.min(160, radar.radius * 0.035));
+  const features = [];
+  if (radar.fillOpacity && radar.fillOpacity > 0) {
+    features.push(
+      createFeature$1(createCirclePolygon(radar.center, radar.radius), {
+        radarId: radar.id,
+        kind: "fill",
+        color: radar.fillColor ?? color,
+        opacity: asOpacity(radar.fillOpacity, 0)
+      })
+    );
+  }
+  for (let index = ringCount; index >= 1; index -= 1) {
+    const distance = radar.radius * index / ringCount;
+    features.push(
+      createFeature$1(createCircleLine(radar.center, distance), {
+        radarId: radar.id,
+        kind: "ring",
+        color: ringColor,
+        opacity: asOpacity(radar.ringOpacity, 0.95),
+        width: Math.max(0, radar.ringWidth ?? 2)
+      })
+    );
+    if (radar.showDistanceLabels !== false) {
+      const text = ((_a = radar.distanceLabelFormatter) == null ? void 0 : _a.call(radar, distance, index)) ?? `${Math.round(distance)}`;
+      [
+        { bearing: 0, textAnchor: "bottom" },
+        { bearing: 90, textAnchor: "left" },
+        { bearing: 180, textAnchor: "top" },
+        { bearing: 270, textAnchor: "right" }
+      ].forEach((label) => {
+        features.push(
+          createFeature$1(
+            {
+              type: "Point",
+              coordinates: getDestination(radar.center, distance, label.bearing)
+            },
+            {
+              radarId: radar.id,
+              kind: "distance-label",
+              text,
+              textAnchor: label.textAnchor,
+              color: radar.distanceLabelColor ?? ringColor,
+              opacity: asOpacity(radar.distanceLabelOpacity, 0.92),
+              haloColor: radar.distanceLabelHaloColor ?? "rgba(15, 23, 42, 0.42)",
+              size: radar.distanceLabelSize ?? 12
+            }
+          )
+        );
+      });
+    }
+  }
+  if (radar.showCrosshair !== false) {
+    features.push(
+      createFeature$1(
+        {
+          type: "LineString",
+          coordinates: [
+            getDestination(radar.center, radar.radius, 180),
+            getDestination(radar.center, radar.radius, 0)
+          ]
+        },
+        {
+          radarId: radar.id,
+          kind: "crosshair",
+          color: radar.crosshairColor ?? ringColor,
+          opacity: asOpacity(radar.crosshairOpacity, 0.5),
+          width: Math.max(0, radar.crosshairWidth ?? 1.4)
+        }
+      ),
+      createFeature$1(
+        {
+          type: "LineString",
+          coordinates: [
+            getDestination(radar.center, radar.radius, 270),
+            getDestination(radar.center, radar.radius, 90)
+          ]
+        },
+        {
+          radarId: radar.id,
+          kind: "crosshair",
+          color: radar.crosshairColor ?? ringColor,
+          opacity: asOpacity(radar.crosshairOpacity, 0.5),
+          width: Math.max(0, radar.crosshairWidth ?? 1.4)
+        }
+      )
+    );
+  }
+  features.push(
+    createFeature$1(createCirclePolygon(radar.center, coreRadius), {
+      radarId: radar.id,
+      kind: "core",
+      color: radar.coreColor ?? color,
+      opacity: asOpacity(radar.fillOpacity, 0)
+    })
+  );
+  return features;
+};
+const createRadarPowerData = (radars) => ({
+  type: "FeatureCollection",
+  features: radars.flatMap(createRadarPowerFeatures)
+});
+const createLayerDefinitions = (id) => {
+  const source = `${id}-source`;
+  const layers = [
+    {
+      id: `${id}-fill`,
+      type: "fill",
+      source,
+      filter: ["==", ["get", "kind"], "fill"],
+      paint: {
+        "fill-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "fill-opacity": ["coalesce", ["get", "opacity"], 0]
+      }
+    },
+    {
+      id: `${id}-core`,
+      type: "fill",
+      source,
+      filter: ["==", ["get", "kind"], "core"],
+      paint: {
+        "fill-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "fill-opacity": ["coalesce", ["get", "opacity"], 0]
+      }
+    },
+    {
+      id: `${id}-ring`,
+      type: "line",
+      source,
+      filter: ["==", ["get", "kind"], "ring"],
+      paint: {
+        "line-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "line-opacity": ["coalesce", ["get", "opacity"], 0.95],
+        "line-width": ["coalesce", ["get", "width"], 2]
+      }
+    },
+    {
+      id: `${id}-crosshair`,
+      type: "line",
+      source,
+      filter: ["==", ["get", "kind"], "crosshair"],
+      paint: {
+        "line-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "line-opacity": ["coalesce", ["get", "opacity"], 0.5],
+        "line-width": ["coalesce", ["get", "width"], 1.4]
+      }
+    },
+    {
+      id: `${id}-labels`,
+      type: "symbol",
+      source,
+      filter: ["==", ["get", "kind"], "distance-label"],
+      layout: {
+        "text-field": ["get", "text"],
+        "text-size": ["coalesce", ["get", "size"], 12],
+        "text-anchor": ["get", "textAnchor"],
+        "text-allow-overlap": true,
+        "text-ignore-placement": true
+      },
+      paint: {
+        "text-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "text-opacity": ["coalesce", ["get", "opacity"], 0.92],
+        "text-halo-color": ["coalesce", ["get", "haloColor"], "rgba(15, 23, 42, 0.42)"],
+        "text-halo-width": 1
+      }
+    }
+  ];
+  return {
+    source,
+    layers
+  };
+};
+const removeLayerIfExists$1 = (map, id) => {
+  if (map.getLayer(id)) {
+    map.removeLayer(id);
+  }
+};
+const removeSourceIfExists$1 = (map, id) => {
+  if (map.getSource(id)) {
+    map.removeSource(id);
+  }
+};
+const addRadarPowerGroup = (map, options) => {
+  const { source, layers } = createLayerDefinitions(options.id);
+  let radars = [...options.radars ?? []];
+  let removed = false;
+  map.addSource(source, {
+    type: "geojson",
+    data: EMPTY_FEATURE_COLLECTION
+  });
+  layers.forEach((layer) => {
+    map.addLayer(layer, options.beforeId);
+  });
+  const sourceRef = map.getSource(source);
+  const layerIds = layers.map((layer) => layer.id);
+  const setGroupVisibility = (visible) => {
+    layerIds.forEach((layerId) => {
+      if (map.getLayer(layerId)) {
+        map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+      }
+    });
+  };
+  const setData = (nextRadars) => {
+    if (removed) return;
+    radars = nextRadars.map((radar) => ({ ...radar }));
+    sourceRef.setData(createRadarPowerData(radars));
+  };
+  if (radars.length > 0) {
+    setData(radars);
+  }
+  if (options.visible === false) {
+    setGroupVisibility(false);
+  }
+  return {
+    id: options.id,
+    sourceId: source,
+    layerIds,
+    setData,
+    updateRadar(id, nextOptions) {
+      const index = radars.findIndex((radar) => radar.id === id);
+      if (index < 0 || removed) return;
+      radars[index] = { ...radars[index], ...nextOptions, id };
+      sourceRef.setData(createRadarPowerData(radars));
+    },
+    setRadarVisible(id, visible) {
+      const radar = radars.find((item) => item.id === id);
+      if (!radar || removed) return;
+      radar.visible = visible;
+      sourceRef.setData(createRadarPowerData(radars));
+    },
+    removeRadar(id) {
+      if (removed) return;
+      radars = radars.filter((radar) => radar.id !== id);
+      sourceRef.setData(createRadarPowerData(radars));
+    },
+    show() {
+      if (!removed) setGroupVisibility(true);
+    },
+    hide() {
+      if (!removed) setGroupVisibility(false);
+    },
+    remove() {
+      if (removed) return;
+      removed = true;
+      [...layerIds].reverse().forEach((layerId) => removeLayerIfExists$1(map, layerId));
+      removeSourceIfExists$1(map, source);
+    }
+  };
+};
 const createFeature = (geometry, properties) => ({
   type: "Feature",
   geometry,
@@ -549,87 +816,6 @@ const createPulseMarkerRender = (options) => {
     }
   };
 };
-const addPulseMarker = (map, options) => createManagedEffect(map, options, createPulseMarkerRender);
-const createBreathingCircleData = (options, phase = 0) => {
-  const baseRadius = Math.max(1, options.radius ?? 90);
-  const minRadius = Math.max(1, options.minRadius ?? baseRadius * 0.78);
-  const maxRadius = Math.max(
-    minRadius,
-    options.maxRadius ?? baseRadius * 1.22
-  );
-  const progress = (1 - Math.cos(phase * Math.PI * 2)) / 2;
-  const currentRadius = minRadius + (maxRadius - minRadius) * progress;
-  const fillOpacity = options.fillOpacity ?? 0.28;
-  const minFillOpacity = options.minFillOpacity ?? fillOpacity * 0.46;
-  const strokeOpacity = options.strokeOpacity ?? 0.82;
-  const minStrokeOpacity = options.minStrokeOpacity ?? strokeOpacity * 0.38;
-  const inverseProgress = 1 - progress;
-  const features = [
-    createFeature(createCirclePolygon(options.center, currentRadius), {
-      kind: "breathing-fill",
-      opacity: minFillOpacity + (fillOpacity - minFillOpacity) * inverseProgress
-    })
-  ];
-  if ((options.strokeWidth ?? 2) > 0) {
-    features.push(
-      createFeature(createCircleLine(options.center, currentRadius), {
-        kind: "breathing-stroke",
-        opacity: minStrokeOpacity + (strokeOpacity - minStrokeOpacity) * inverseProgress
-      })
-    );
-  }
-  return createFeatureCollection(features);
-};
-const createBreathingCircleRender = (options) => {
-  const color = options.color || "#1677ff";
-  const fillColor = options.fillColor || color;
-  const strokeColor = options.strokeColor || color;
-  const strokeWidth = Math.max(0, options.strokeWidth ?? 2);
-  return {
-    data: createBreathingCircleData(options),
-    layers: [
-      {
-        id: `${options.id}-breathing-fill`,
-        type: "fill",
-        filter: ["==", ["get", "kind"], "breathing-fill"],
-        paint: {
-          "fill-color": fillColor,
-          "fill-opacity": ["coalesce", ["get", "opacity"], options.fillOpacity ?? 0.28]
-        }
-      },
-      {
-        id: `${options.id}-breathing-stroke`,
-        type: "line",
-        filter: ["==", ["get", "kind"], "breathing-stroke"],
-        layout: {
-          "line-cap": "round",
-          "line-join": "round"
-        },
-        paint: {
-          "line-color": strokeColor,
-          "line-opacity": ["coalesce", ["get", "opacity"], options.strokeOpacity ?? 0.82],
-          "line-width": strokeWidth
-        }
-      }
-    ],
-    startAnimation({ getOptions, setData }) {
-      const duration = Math.max(400, getOptions().duration ?? 1800);
-      const startTime = performance.now();
-      let frameId = 0;
-      const tick = (timestamp) => {
-        const currentOptions = getOptions();
-        const phase = (timestamp - startTime) % duration / duration;
-        setData(createBreathingCircleData(currentOptions, phase));
-        frameId = requestAnimationFrame(tick);
-      };
-      frameId = requestAnimationFrame(tick);
-      return () => {
-        cancelAnimationFrame(frameId);
-      };
-    }
-  };
-};
-const addBreathingCircle = (map, options) => createManagedEffect(map, options, createBreathingCircleRender);
 const createRingPulseEffectData = (options, phase = 0) => {
   const baseRadius = Math.max(16, options.radius ?? 110);
   const pulseScale = Math.max(0, options.pulseScale ?? 0.16);
@@ -719,7 +905,85 @@ const createRingPulseMarkerRender = (options) => {
     }
   };
 };
-const addRingPulseMarker = (map, options) => createManagedEffect(map, options, createRingPulseMarkerRender);
+const createBreathingCircleData = (options, phase = 0) => {
+  const baseRadius = Math.max(1, options.radius ?? 90);
+  const minRadius = Math.max(1, options.minRadius ?? baseRadius * 0.78);
+  const maxRadius = Math.max(
+    minRadius,
+    options.maxRadius ?? baseRadius * 1.22
+  );
+  const progress = (1 - Math.cos(phase * Math.PI * 2)) / 2;
+  const currentRadius = minRadius + (maxRadius - minRadius) * progress;
+  const fillOpacity = options.fillOpacity ?? 0.28;
+  const minFillOpacity = options.minFillOpacity ?? fillOpacity * 0.46;
+  const strokeOpacity = options.strokeOpacity ?? 0.82;
+  const minStrokeOpacity = options.minStrokeOpacity ?? strokeOpacity * 0.38;
+  const inverseProgress = 1 - progress;
+  const features = [
+    createFeature(createCirclePolygon(options.center, currentRadius), {
+      kind: "breathing-fill",
+      opacity: minFillOpacity + (fillOpacity - minFillOpacity) * inverseProgress
+    })
+  ];
+  if ((options.strokeWidth ?? 2) > 0) {
+    features.push(
+      createFeature(createCircleLine(options.center, currentRadius), {
+        kind: "breathing-stroke",
+        opacity: minStrokeOpacity + (strokeOpacity - minStrokeOpacity) * inverseProgress
+      })
+    );
+  }
+  return createFeatureCollection(features);
+};
+const createBreathingCircleRender = (options) => {
+  const color = options.color || "#1677ff";
+  const fillColor = options.fillColor || color;
+  const strokeColor = options.strokeColor || color;
+  const strokeWidth = Math.max(0, options.strokeWidth ?? 2);
+  return {
+    data: createBreathingCircleData(options),
+    layers: [
+      {
+        id: `${options.id}-breathing-fill`,
+        type: "fill",
+        filter: ["==", ["get", "kind"], "breathing-fill"],
+        paint: {
+          "fill-color": fillColor,
+          "fill-opacity": ["coalesce", ["get", "opacity"], options.fillOpacity ?? 0.28]
+        }
+      },
+      {
+        id: `${options.id}-breathing-stroke`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "breathing-stroke"],
+        layout: {
+          "line-cap": "round",
+          "line-join": "round"
+        },
+        paint: {
+          "line-color": strokeColor,
+          "line-opacity": ["coalesce", ["get", "opacity"], options.strokeOpacity ?? 0.82],
+          "line-width": strokeWidth
+        }
+      }
+    ],
+    startAnimation({ getOptions, setData }) {
+      const duration = Math.max(400, getOptions().duration ?? 1800);
+      const startTime = performance.now();
+      let frameId = 0;
+      const tick = (timestamp) => {
+        const currentOptions = getOptions();
+        const phase = (timestamp - startTime) % duration / duration;
+        setData(createBreathingCircleData(currentOptions, phase));
+        frameId = requestAnimationFrame(tick);
+      };
+      frameId = requestAnimationFrame(tick);
+      return () => {
+        cancelAnimationFrame(frameId);
+      };
+    }
+  };
+};
 const clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
 const parseColor = (color) => {
   const value = color.trim();
@@ -948,7 +1212,6 @@ const createSectorScanRender = (options) => {
     } : void 0
   };
 };
-const addSectorScan = (map, options) => createManagedEffect(map, options, createSectorScanRender);
 const createDirectionalPulseData = (options, leadingDistance) => {
   const radius = Math.max(40, options.radius);
   const direction = options.direction ?? 270;
@@ -1027,7 +1290,6 @@ const createDirectionalPulseRender = (options) => ({
     };
   } : void 0
 });
-const addDirectionalPulse = (map, options) => createManagedEffect(map, options, createDirectionalPulseRender);
 const hasRadarSweepGradient = (options) => {
   var _a;
   const colors = (_a = options.gradient) == null ? void 0 : _a.colors;
@@ -1206,6 +1468,8 @@ const createRadarSweepData = (options, angleOffset = 0) => {
 const createRadarSweepRender = (options) => {
   const useGradient = hasRadarSweepGradient(options);
   const canvas = useGradient ? createRadarSweepCanvas() : void 0;
+  const rotationSpeed = options.rotationSpeed ?? 36;
+  const animated = rotationSpeed !== 0;
   if (canvas) {
     drawRadarSweepCanvas(canvas, options);
   }
@@ -1237,7 +1501,7 @@ const createRadarSweepRender = (options) => {
             options.center,
             options.radius
           ),
-          animate: true
+          animate: animated
         }
       }
     ] : void 0,
@@ -1282,7 +1546,7 @@ const createRadarSweepRender = (options) => {
         }
       }
     ],
-    startAnimation({ getOptions, setData }) {
+    startAnimation: animated ? ({ getOptions, setData }) => {
       const startTime = performance.now();
       let frameId = 0;
       const tick = (timestamp) => {
@@ -1291,17 +1555,18 @@ const createRadarSweepRender = (options) => {
         if (canvas) {
           drawRadarSweepCanvas(canvas, currentOptions, angleOffset);
         }
-        setData(createRadarSweepData(currentOptions, angleOffset));
+        if (!useGradient) {
+          setData(createRadarSweepData(currentOptions, angleOffset));
+        }
         frameId = requestAnimationFrame(tick);
       };
       frameId = requestAnimationFrame(tick);
       return () => {
         cancelAnimationFrame(frameId);
       };
-    }
+    } : void 0
   };
 };
-const addRadarSweep = (map, options) => createManagedEffect(map, options, createRadarSweepRender);
 const createDefenceCircleCanvas = () => {
   const canvas = document.createElement("canvas");
   canvas.width = 512;
@@ -1402,7 +1667,6 @@ const createDefenceCircleRender = (options) => {
     ]
   };
 };
-const addDefenceCircle = (map, options) => createManagedEffect(map, options, createDefenceCircleRender);
 const createCountermeasureBeamData = (options, elapsed = 0) => {
   const sourceWidth = Math.max(1, options.sourceWidth ?? 220);
   const targetWidth = Math.max(1, options.targetWidth ?? 45);
@@ -1552,7 +1816,6 @@ const createCountermeasureBeamRender = (options) => {
     }
   };
 };
-const addCountermeasureBeam = (map, options) => createManagedEffect(map, options, createCountermeasureBeamRender);
 const getCoordinationColor = (type) => {
   if (type === "detection") return "#38bdf8";
   if (type === "command") return "#22d3ee";
@@ -1715,7 +1978,6 @@ const createCoordinatedCountermeasureRender = (options) => {
     }
   };
 };
-const addCoordinatedCountermeasure = (map, options) => createManagedEffect(map, options, createCoordinatedCountermeasureRender);
 const createNavigationSpoofingData = (options, elapsed = 0) => {
   const features = [
     createFeature(
@@ -1866,6 +2128,15 @@ const createNavigationSpoofingRender = (options) => {
     }
   };
 };
+const addPulseMarker = (map, options) => createManagedEffect(map, options, createPulseMarkerRender);
+const addBreathingCircle = (map, options) => createManagedEffect(map, options, createBreathingCircleRender);
+const addRingPulseMarker = (map, options) => createManagedEffect(map, options, createRingPulseMarkerRender);
+const addSectorScan = (map, options) => createManagedEffect(map, options, createSectorScanRender);
+const addDirectionalPulse = (map, options) => createManagedEffect(map, options, createDirectionalPulseRender);
+const addRadarSweep = (map, options) => createManagedEffect(map, options, createRadarSweepRender);
+const addDefenceCircle = (map, options) => createManagedEffect(map, options, createDefenceCircleRender);
+const addCountermeasureBeam = (map, options) => createManagedEffect(map, options, createCountermeasureBeamRender);
+const addCoordinatedCountermeasure = (map, options) => createManagedEffect(map, options, createCoordinatedCountermeasureRender);
 const addNavigationSpoofing = (map, options) => createManagedEffect(map, options, createNavigationSpoofingRender);
 const addTargetLock = (map, initialOptions) => {
   const effectId = initialOptions.id;
@@ -3882,17 +4153,11 @@ const resolveStyle = (style, tdtToken) => {
   return style;
 };
 const createMap = (options) => {
-  const { style, tdtToken, projection, ...mapOptions } = options;
-  const map = new maplibregl.Map({
+  const { style, tdtToken, ...mapOptions } = options;
+  return new maplibregl.Map({
     ...mapOptions,
     style: resolveStyle(style, tdtToken)
   });
-  if (projection) {
-    map.on("style.load", () => {
-      map.setProjection({ type: projection });
-    });
-  }
-  return map;
 };
 export {
   BASE_MAP_TYPES,
@@ -3908,6 +4173,7 @@ export {
   addDirectionalPulse,
   addNavigationSpoofing,
   addPulseMarker,
+  addRadarPowerGroup,
   addRadarSweep,
   addRingPulseMarker,
   addSectorScan,