mobility-toolbox-js 2.0.0-beta.67 → 2.0.0-beta.69

package/mbt.js

@@ -33998,7 +33998,6 @@ uniform ${i3} ${o3} u_${a3};
     close() {
       if (this.websocket && (this.open || this.connecting)) {
         this.websocket.onclose = () => {
-          this.websocket = void 0;
         };
         this.websocket.close();
         this.messagesOnOpen = [];
@@ -34787,7 +34786,8 @@ uniform ${i3} ${o3} u_${a3};
       noInterpolate = false,
       hoverVehicleId,
       selectedVehicleId,
-      filter
+      filter,
+      getScreenPixel = (pixel, viewStat) => (viewStat.zoom || 0) < 12 ? pixel.map((coord) => Math.floor(coord)) : pixel
     } = options;
     const context = canvas2.getContext("2d");
     context?.clearRect(0, 0, canvas2.width, canvas2.height);
@@ -34802,12 +34802,8 @@ uniform ${i3} ${o3} u_${a3};
     }
     let hoverVehicleImg;
     let hoverVehiclePx;
-    let hoverVehicleWidth;
-    let hoverVehicleHeight;
     let selectedVehicleImg;
     let selectedVehiclePx;
-    let selectedVehicleWidth;
-    let selectedVehicleHeight;
     const renderedTrajectories = [];
     for (let i = trajectories.length - 1; i >= 0; i -= 1) {
       const trajectory = trajectories[i];
@@ -34833,30 +34829,25 @@ uniform ${i3} ${o3} u_${a3};
       if (!vehicleImg) {
         continue;
       }
-      const imgWidth = vehicleImg.width;
-      const imgHeight = vehicleImg.height;
       if (hoverVehicleId !== id && selectedVehicleId !== id) {
-        context?.drawImage(vehicleImg, px[0] - imgWidth / 2, px[1] - imgHeight / 2, imgWidth, imgHeight);
+        const [x, y] = getScreenPixel([px[0] - vehicleImg.width / 2, px[1] - vehicleImg.height / 2], viewState);
+        context?.drawImage(vehicleImg, x, y);
       }
       if (hoverVehicleId && hoverVehicleId === id) {
         hoverVehicleImg = vehicleImg;
         hoverVehiclePx = px;
-        hoverVehicleWidth = imgWidth;
-        hoverVehicleHeight = imgHeight;
       }
       if (selectedVehicleId && selectedVehicleId === id) {
         selectedVehicleImg = vehicleImg;
         selectedVehiclePx = px;
-        selectedVehicleWidth = imgWidth;
-        selectedVehicleHeight = imgHeight;
       }
       renderedTrajectories.push(trajectory);
     }
-    if (selectedVehicleImg && selectedVehiclePx && selectedVehicleWidth && selectedVehicleHeight) {
-      context?.drawImage(selectedVehicleImg, selectedVehiclePx[0] - selectedVehicleWidth / 2, selectedVehiclePx[1] - selectedVehicleHeight / 2, selectedVehicleWidth, selectedVehicleHeight);
+    if (selectedVehicleImg && selectedVehiclePx) {
+      context?.drawImage(selectedVehicleImg, Math.floor(selectedVehiclePx[0] - selectedVehicleImg.width / 2), Math.floor(selectedVehiclePx[1] - selectedVehicleImg.height / 2));
     }
-    if (hoverVehicleImg && hoverVehiclePx && hoverVehicleWidth && hoverVehicleHeight) {
-      context?.drawImage(hoverVehicleImg, hoverVehiclePx[0] - hoverVehicleWidth / 2, hoverVehiclePx[1] - hoverVehicleHeight / 2, hoverVehicleWidth, hoverVehicleHeight);
+    if (hoverVehicleImg && hoverVehiclePx) {
+      context?.drawImage(hoverVehicleImg, Math.floor(hoverVehiclePx[0] - hoverVehicleImg.width / 2), Math.floor(hoverVehiclePx[1] - hoverVehicleImg.height / 2));
     }
     return {
       renderedTrajectories
@@ -36095,24 +36086,24 @@ uniform ${i3} ${o3} u_${a3};
     return cacheDelayBg[key];
   };
   var cacheDelayText = {};
-  var getDelayTextCanvas = (width, text, fontSize, font, delayColor, delayOutlineColor = "#000", pixelRatio = 1) => {
-    const key = `${width}, ${text}, ${font}, ${delayColor}, ${delayOutlineColor}, ${pixelRatio}`;
+  var getDelayTextCanvas = (text, fontSize, font, delayColor, delayOutlineColor = "#000", pixelRatio = 1) => {
+    const key = `${text}, ${font}, ${delayColor}, ${delayOutlineColor}, ${pixelRatio}`;
     if (!cacheDelayText[key]) {
-      const canvas2 = createCanvas_default(width, fontSize + 8 * pixelRatio);
+      const canvas2 = createCanvas_default(Math.ceil(text.length * fontSize), Math.ceil(fontSize + 8 * pixelRatio));
       if (canvas2) {
         const ctx = canvas2.getContext("2d");
         if (!ctx) {
           return null;
         }
+        ctx.font = font;
         ctx.textAlign = "left";
         ctx.textBaseline = "middle";
         ctx.font = font;
         ctx.fillStyle = delayColor;
         ctx.strokeStyle = delayOutlineColor;
         ctx.lineWidth = 1.5 * pixelRatio;
-        const delayText = text;
-        ctx.strokeText(delayText, 0, fontSize);
-        ctx.fillText(delayText, 0, fontSize);
+        ctx.strokeText(text, 0, fontSize);
+        ctx.fillText(text, 0, fontSize);
         cacheDelayText[key] = canvas2;
       }
     }
@@ -36246,52 +36237,58 @@ uniform ${i3} ${o3} u_${a3};
       const margin = 1 * pixelRatio;
       const radiusDelay = radius + 2;
       const markerSize = radius * 2;
-      const size = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+      const size = radiusDelay * 2 + margin * 2;
       const origin = size / 2;
-      const canvas2 = createCanvas_default(size, size);
+      let delayBg = null;
+      if (isDisplayStrokeAndDelay && delay !== null) {
+        delayBg = getDelayBgCanvas(origin, radiusDelay, getDelayColor2(delay, cancelled));
+      }
+      let delayText = null;
+      let fontSize = 0;
+      if (isDisplayStrokeAndDelay && (hover || (delay || 0) >= delayDisplay || cancelled)) {
+        fontSize = Math.max(cancelled ? 19 : 14, Math.min(cancelled ? 19 : 17, radius * 1.2)) * pixelRatio;
+        const text = getDelayText2(delay, cancelled);
+        if (text) {
+          delayText = getDelayTextCanvas(text, fontSize, `bold ${fontSize}px arial, sans-serif`, getDelayColor2(delay, cancelled, true), delayOutlineColor, pixelRatio);
+        }
+      }
+      let circleFillColor;
+      if (useDelayStyle) {
+        circleFillColor = getDelayColor2(delay, cancelled);
+      } else {
+        circleFillColor = color || getBgColor2(type);
+      }
+      const hasStroke = isDisplayStrokeAndDelay || hover || selected;
+      const hasDash = !!isDisplayStrokeAndDelay && !!useDelayStyle && delay === null && operatorProvidesRealtime === "yes";
+      const circle = getCircleCanvas(origin, radius, circleFillColor, hasStroke, hasDash, pixelRatio);
+      const width = size + (delayText?.width || 0) * 2;
+      const height = size;
+      const canvas2 = createCanvas_default(width, height);
       if (canvas2) {
         const ctx = canvas2.getContext("2d");
         if (!ctx) {
           return null;
         }
-        if (isDisplayStrokeAndDelay && delay !== null) {
-          const delayBg = getDelayBgCanvas(origin, radiusDelay, getDelayColor2(delay, cancelled));
-          if (delayBg) {
-            ctx.drawImage(delayBg, 0, 0);
-          }
+        const originX = delayText?.width || 0;
+        if (delayBg) {
+          ctx.drawImage(delayBg, originX, 0);
         }
-        if (isDisplayStrokeAndDelay && (hover || (delay || 0) >= delayDisplay || cancelled)) {
-          const fontSize = Math.max(cancelled ? 19 : 14, Math.min(cancelled ? 19 : 17, radius * 1.2)) * pixelRatio;
-          const text = getDelayText2(delay, cancelled);
-          if (text) {
-            const textWidth = text.length * fontSize;
-            const delayText = getDelayTextCanvas(textWidth, text, fontSize, `bold ${fontSize}px arial, sans-serif`, getDelayColor2(delay, cancelled, true), delayOutlineColor, pixelRatio);
-            if (delayText) {
-              ctx.drawImage(delayText, origin + radiusDelay + margin, origin - fontSize);
-            }
-          }
-        }
-        let circleFillColor;
-        if (useDelayStyle) {
-          circleFillColor = getDelayColor2(delay, cancelled);
-        } else {
-          circleFillColor = color || getBgColor2(type);
-        }
-        const hasStroke = isDisplayStrokeAndDelay || hover || selected;
-        const hasDash = !!isDisplayStrokeAndDelay && !!useDelayStyle && delay === null && operatorProvidesRealtime === "yes";
-        const circle = getCircleCanvas(origin, radius, circleFillColor, hasStroke, hasDash, pixelRatio);
         if (circle) {
-          ctx.drawImage(circle, 0, 0);
+          ctx.drawImage(circle, originX, 0);
         }
-        if (isDisplayText && ctx) {
-          const fontSize = Math.max(radius, 10);
-          const textSize = getTextSize2(ctx, markerSize, name, fontSize);
+        let circleText = null;
+        if (isDisplayText) {
+          const fontSize2 = Math.max(radius, 10);
+          const textSize = getTextSize2(ctx, markerSize, name, fontSize2);
           const textColor2 = !useDelayStyle ? textColor || getTextColor2(type) : "#000000";
           const hasStroke2 = !!useDelayStyle && delay === null && operatorProvidesRealtime === "yes";
-          const text = getTextCanvas(name, origin, textSize, textColor2, circleFillColor, hasStroke2, pixelRatio);
-          if (text) {
-            ctx.drawImage(text, 0, 0);
-          }
+          circleText = getTextCanvas(name, origin, textSize, textColor2, circleFillColor, hasStroke2, pixelRatio);
+        }
+        if (circleText) {
+          ctx.drawImage(circleText, originX, 0);
+        }
+        if (delayText) {
+          ctx.drawImage(delayText, originX + Math.ceil(origin + radiusDelay) + margin, Math.ceil(origin - fontSize));
         }
         cache2[key] = canvas2;
       }
@@ -49161,7 +49158,25 @@ uniform ${i3} ${o3} u_${a3};
           "funicular",
           "coach"
         ];
-        this.motsByZoom = options.motsByZoom || [allMots];
+        const onlyRail = ["rail"];
+        const withoutCable = ["tram", "subway", "rail", "bus"];
+        this.motsByZoom = options.motsByZoom || [
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          onlyRail,
+          withoutCable,
+          withoutCable,
+          allMots,
+          allMots,
+          allMots,
+          allMots
+        ];
         this.getMotsByZoom = (zoom) => {
           return options.getMotsByZoom && options.getMotsByZoom(zoom, this.motsByZoom) || this.motsByZoom[zoom] || this.motsByZoom[this.motsByZoom.length - 1];
         };
@@ -49232,11 +49247,13 @@ uniform ${i3} ${o3} u_${a3};
           time,
           live,
           canvas: canvas2,
-          styleOptions
+          styleOptions,
+          mode
         } = options;
         let currCanvas = canvas2;
         let currSpeed = speed || 1;
         let currTime = time || new Date();
+        let currMode = mode || RealtimeModes.TOPOGRAPHIC;
         let currStyle = style || realtimeDefaultStyle_default;
         super.defineProperties(options);
         Object.defineProperties(this, {
@@ -49252,6 +49269,19 @@ uniform ${i3} ${o3} u_${a3};
               currCanvas = cnvas;
             }
           },
+          mode: {
+            get: () => currMode,
+            set: (newMode) => {
+              if (newMode === currMode) {
+                return;
+              }
+              currMode = newMode;
+              if (this.api?.wsApi?.open) {
+                this.stop();
+                this.start();
+              }
+            }
+          },
           style: {
             get: () => currStyle,
             set: (newStyle) => {
@@ -49448,14 +49478,6 @@ uniform ${i3} ${o3} u_${a3};
         }
         this.api.bbox = bbox;
       }
-      setMode(mode) {
-        if (this.mode === mode) {
-          return;
-        }
-        this.mode = mode;
-        this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, void 0, this.isUpdateBboxOnMoveEnd);
-        this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, void 0, this.isUpdateBboxOnMoveEnd);
-      }
       getRefreshTimeInMs(zoom = 0) {
         const roundedZoom = zoom !== void 0 ? Math.round(zoom) : -1;
         const timeStep = this.getRenderTimeIntervalByZoom(roundedZoom) || 25;
@@ -49523,7 +49545,7 @@ uniform ${i3} ${o3} u_${a3};
       }
       purgeTrajectory(trajectory, extent, zoom) {
         const { type, bounds } = trajectory.properties;
-        if (!intersects(extent, bounds) || this.mots && !this.mots.includes(type) || type !== "rail" && zoom < 9) {
+        if (!intersects(extent, bounds) || this.mots && !this.mots.includes(type)) {
           this.removeTrajectory(trajectory);
           return true;
         }
@@ -49791,7 +49813,9 @@ uniform ${i3} ${o3} u_${a3};
     }
     hasFeatureInfoAtCoordinate(coordinate) {
       if (this.map && this.canvas) {
-        const context = this.canvas.getContext("2d");
+        const context = this.canvas.getContext("2d", {
+          willReadFrequently: true
+        });
         const pixel = this.map.getPixelFromCoordinate(coordinate);
         return !!context?.getImageData(pixel[0] * (this.pixelRatio || 1), pixel[1] * (this.pixelRatio || 1), 1, 1).data[3];
       }
@@ -49831,6 +49855,13 @@ uniform ${i3} ${o3} u_${a3};
       return super.getRefreshTimeInMs(this.map.getView().getZoom());
     }
     getFeatureInfoAtCoordinate(coordinate, options = {}) {
+      if (!this.map || !this.map.getView()) {
+        return Promise.resolve({
+          layer: this,
+          features: [],
+          coordinate
+        });
+      }
       const resolution = this.map.getView().getResolution();
       return super.getFeatureInfoAtCoordinate(coordinate, {
         resolution,
@@ -49847,6 +49878,12 @@ uniform ${i3} ${o3} u_${a3};
     }
     onZoomEnd() {
       super.onZoomEnd();
+      if (this.visible && this.isUpdateBboxOnMoveEnd) {
+        this.setBbox();
+      }
+      if (this.visible && this.isUpdateBboxOnMoveEnd && this.userClickInteractions && this.selectedVehicleId) {
+        this.highlightTrajectory(this.selectedVehicleId);
+      }
     }
     onFeatureHover(features, layer, coordinate) {
       super.onFeatureHover(features, layer, coordinate);
@@ -50713,7 +50750,7 @@ uniform ${i3} ${o3} u_${a3};
         center: fromLonLat([center.lng, center.lat]),
         extent: bounds,
         resolution: res,
-        zoom: this.map.getZoom(),
+        zoom: this.getOlZoom(),
         rotation: -(this.map.getBearing() * Math.PI) / 180,
         pixelRatio: this.pixelRatio
       };
@@ -50737,7 +50774,7 @@ uniform ${i3} ${o3} u_${a3};
       }
     }
     purgeTrajectory(trajectory, extent, zoom) {
-      return super.purgeTrajectory(trajectory, extent || this.getMercatorExtent(), zoom || Math.floor(this.map.getZoom() + 1));
+      return super.purgeTrajectory(trajectory, extent || this.getMercatorExtent(), zoom || Math.floor(this.getOlZoom()));
     }
     setBbox(extent, zoom) {
       let newExtent = extent;