mobility-toolbox-js 2.0.0-beta.66 → 2.0.0-beta.68

package/mbt.js

@@ -33944,7 +33944,7 @@ uniform ${i3} ${o3} u_${a3};
     defineProperties() {
       Object.defineProperties(this, {
         closed: {
-          get: () => !!(this.websocket && this.websocket.readyState === this.websocket.CLOSED)
+          get: () => !!(!this.websocket || this.websocket.readyState === this.websocket.CLOSED)
         },
         closing: {
           get: () => !!(this.websocket && this.websocket.readyState === this.websocket.CLOSING)
@@ -33978,7 +33978,11 @@ uniform ${i3} ${o3} u_${a3};
     connect(url, onOpen = () => {
     }) {
       if (this.websocket && !this.closed) {
-        this.websocket.close();
+        if (!this.closing && this.websocket.url !== url) {
+          this.websocket.close();
+        } else if (this.connecting) {
+          return;
+        }
       }
       this.websocket = new WebSocket(url);
       if (!this.open) {
@@ -33992,10 +33996,11 @@ uniform ${i3} ${o3} u_${a3};
       }
     }
     close() {
-      if (this.websocket) {
-        this.websocket.onclose = null;
+      if (this.websocket && (this.open || this.connecting)) {
+        this.websocket.onclose = () => {
+          this.websocket = void 0;
+        };
         this.websocket.close();
-        this.websocket = void 0;
         this.messagesOnOpen = [];
       }
     }
@@ -34249,7 +34254,6 @@ uniform ${i3} ${o3} u_${a3};
       });
     }
     open() {
-      this.close();
       this.wsApi.connect(this.url, this.onOpen);
       if (this.wsApi.websocket) {
         this.wsApi.websocket.onclose = () => {
@@ -34783,7 +34787,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);
@@ -34798,12 +34803,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];
@@ -34829,30 +34830,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
@@ -36091,24 +36087,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;
       }
     }
@@ -36242,52 +36238,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);
-          }
-        }
-        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 originX = delayText?.width || 0;
+        if (delayBg) {
+          ctx.drawImage(delayBg, originX, 0);
         }
-        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;
       }
@@ -49157,7 +49159,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];
         };
@@ -49519,7 +49539,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;
         }
@@ -49787,7 +49807,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];
       }
@@ -49843,6 +49865,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);
@@ -50709,7 +50737,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
       };
@@ -50733,7 +50761,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;