@heycar/heycars-map 0.9.0 → 0.9.1

package/dist/index.cjs

@@ -9,7 +9,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Vue = require("vue");
 const style = "";
 const name = "@heycar/heycars-map";
-const version = "0.9.0";
+const version = "0.9.1";
 const type = "module";
 const scripts = {
   dev: "vite -c vite.config.dev.ts",
@@ -1113,6 +1113,48 @@ const assertAngle = (angle) => {
 const isLatLngLiteral = (value) => {
   return value != null && typeof value === "object" && Number.isFinite(value.lat) && Number.isFinite(value.lng);
 };
+function defered() {
+  const defer = {};
+  const promise = new Promise((resolve, reject) => {
+    defer.state = "pending";
+    defer.resolve = async (value) => {
+      try {
+        const result = await value;
+        defer.state = "fulfilled";
+        return resolve(result);
+      } catch (err) {
+        defer.state = "rejected";
+        reject(err);
+      }
+    };
+    defer.reject = (reason) => {
+      defer.state = "rejected";
+      return reject(reason);
+    };
+  });
+  return Object.assign(promise, defer);
+}
+const pausableSleep = (milliSeconds) => {
+  const sleepDefered = defered();
+  let id = setTimeout(sleepDefered.resolve, milliSeconds);
+  let isPaused = false;
+  const pause = () => {
+    if (isPaused || sleepDefered.state === "fulfilled")
+      return;
+    console.log("pause");
+    isPaused = true;
+    clearTimeout(id);
+  };
+  const restart = () => {
+    if (sleepDefered.state === "fulfilled")
+      return;
+    console.log("restart");
+    isPaused = false;
+    clearTimeout(id);
+    id = setTimeout(sleepDefered.resolve, milliSeconds);
+  };
+  return { sleepPromise: sleepDefered, pause, restart };
+};
 const vec2lnglat = ([lng, lat]) => ({
   lng: Number(lng),
   lat: Number(lat)
@@ -3147,6 +3189,36 @@ const useMapFitView = (props) => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap" ? useGmapFitView(props) : useAmapFitView(props);
 };
+const useAmapTouchEvent = () => {
+  const mapRef = useAmap();
+  const addMapEventListener = (name2, handler) => {
+    var _a;
+    return (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.on(name2, handler);
+  };
+  const removeMapEventListener = (name2, handler) => {
+    var _a;
+    return (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.off(name2, handler);
+  };
+  return { addMapEventListener, removeMapEventListener };
+};
+const useGmapTouchEvent = () => {
+  const mapRef = useGmap();
+  const addMapEventListener = (name2, handler) => {
+    var _a;
+    const container = (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.getDiv();
+    return container == null ? void 0 : container.addEventListener(name2, handler);
+  };
+  const removeMapEventListener = (name2, handler) => {
+    var _a;
+    const container = (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.getDiv();
+    return container == null ? void 0 : container.removeEventListener(name2, handler);
+  };
+  return { addMapEventListener, removeMapEventListener };
+};
+const useMapTouchEvent = () => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapTouchEvent() : useAmapTouchEvent();
+};
 defineSetup(function FitView(props, {
   slots
 }) {
@@ -3199,7 +3271,7 @@ function createFittableRegisterOverlay(registerOverlay) {
     setFitView
   };
 }
-const KeyedFitView = defineSetup(function KeyedFitView2(props, {
+defineSetup(function KeyedFitView(props, {
   slots
 }) {
   const mapMountedPromise = useMapMountedPromise();
@@ -3220,6 +3292,48 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
     return Vue.h("div", [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
   };
 });
+const InterruptableIntervalFitView = defineSetup(function InterruptableIntervalFitView2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const mapMountedPromise = useMapMountedPromise();
+  const {
+    addMapEventListener,
+    removeMapEventListener
+  } = useMapTouchEvent();
+  Vue.watch(() => 0, async (_1, _2, onCleanup) => {
+    await mapMountedPromise;
+    let skip = false;
+    let pause;
+    let restart;
+    let sleepPromise;
+    const handleTouchStartOrMove = () => pause();
+    const handleTouchEnd = () => restart();
+    addMapEventListener("touchstart", handleTouchStartOrMove);
+    addMapEventListener("touchmove", handleTouchStartOrMove);
+    addMapEventListener("touchend", handleTouchEnd);
+    onCleanup(() => {
+      skip = true;
+      removeEventListener("touchstart", handleTouchStartOrMove);
+      removeMapEventListener("touchmove", handleTouchStartOrMove);
+      removeMapEventListener("touchend", handleTouchEnd);
+    });
+    while (!skip) {
+      ({
+        pause,
+        restart,
+        sleepPromise
+      } = pausableSleep(props.interval));
+      await sleepPromise;
+      console.log("InterruptableIntervalFitView setFitView");
+      registerOverlay.setFitView();
+    }
+  }, {
+    immediate: true,
+    flush: "post"
+  });
+  return () => null;
+});
 const imgEndPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI3Mi4zMzklIiB5MT0iNTAlIiB4Mj0iMCUiIHkyPSI1MCUiIGlkPSJwcmVmaXhfX2EiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjg0NDciIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY4QjRBIiBvZmZzZXQ9IjUwLjU5NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZBOTVBIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAzMC4yMTVjMi4xMzQgMCAzLjg2My0uODkzIDMuODYzLTEuOTk1IDAtMS4xLTEuNzMtMS45OTQtMy44NjMtMS45OTQtMi4xMzQgMC0zLjg2My44OTMtMy44NjMgMS45OTQgMCAxLjEwMiAxLjczIDEuOTk1IDMuODYzIDEuOTk1eiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyNy4wMDZjMi4xMjggMC0uOS0zLjc0MyA1LjYyMS02LjY0M0MxOS44NDIgMTguNDUzIDIyIDE0Ljk1MyAyMiAxMC45NSAyMiA0LjkwMiAxNy4wNzUgMCAxMSAwUzAgNC45MDIgMCAxMC45NWMwIDMuOTE4IDIuMDY4IDcuMzU2IDUuMTc3IDkuMjlDMTEuNzUgMjMuMjg0IDkuMDYgMjcuMDA3IDExIDI3LjAwN3oiIHN0cm9rZT0iI0ZGRiIgZmlsbD0idXJsKCNwcmVmaXhfX2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSIvPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVNlbWlib2xkLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9IjUwMCIgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxLjIxNSkiPjx0c3BhbiB4PSI1IiB5PSIxNS40NDkiPue7iDwvdHNwYW4+PC90ZXh0PjwvZz48L3N2Zz4=";
 const imgStartPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEyOS41OTklIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjMzZBOEZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4NzFGMSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTIgMzAuMjE1YzEuOTUgMCAzLjUzMi0uODE2IDMuNTMyLTEuODIzIDAtMS4wMDctMS41ODEtMS44MjMtMy41MzItMS44MjMtMS45NSAwLTMuNTMyLjgxNi0zLjUzMiAxLjgyMyAwIDEuMDA3IDEuNTgxIDEuODIzIDMuNTMyIDEuODIzeiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyN2MyLjEyOCAwLS45LTMuNzQyIDUuNjIxLTYuNjQxIDMuMjIxLTEuOTEgNS4zNzktNS40MSA1LjM3OS05LjQxMkMyMiA0LjkwMSAxNy4wNzUgMCAxMSAwUzAgNC45MDEgMCAxMC45NDdjMCAzLjkxOCAyLjA2OCA3LjM1NSA1LjE3NyA5LjI5QzExLjc1IDIzLjI3NyA5LjA2IDI3IDExIDI3eiIgc3Ryb2tlPSIjRkZGIiBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS4yMTUpIi8+PHRleHQgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iNTAwIiBmaWxsPSIjRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSI+PHRzcGFuIHg9IjUiIHk9IjE1LjYyNCI+6LW3PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==";
 const StartEndPoint_css_ts_vanilla = "";
@@ -6142,10 +6256,9 @@ const ConditionalFittablePassengerCircle = defineSetup(function ConditionalFitta
         "size": "small",
         "registerOverlay": registerOverlay
       }
-    }), Vue.h(KeyedFitView, {
+    }), Vue.h(FitViewOnce, {
       "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(position)
+        "registerOverlay": registerOverlay
       }
     })]);
   };
@@ -7394,6 +7507,7 @@ const WaveCircle = defineSetup(function WaveCircle2(props) {
 const PASSENGER_DISTANCE_MAX = 2e3;
 const PASSENGER_DISTANCE_MIN = 10;
 const CAR_DISTANCE_MIN = 100;
+const AUTO_FIT_VIEW_INTERVAL = 15e3;
 const carDurationWithinMinDistance = (distance) => Math.floor(distance / 5);
 const SectionDispatching = defineSetup(function SectionDispatching2(props) {
   return () => {
@@ -7424,6 +7538,11 @@ const SectionDispatching = defineSetup(function SectionDispatching2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7489,10 +7608,19 @@ const SectionConfirmed = defineSetup(function SectionConfirmed2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionDriverStartService = defineSetup(function SectionDriverStartService2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   const {
     apiMapDistance
   } = useMapGeometry();
@@ -7503,8 +7631,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
       carAngle,
       passengerPosition,
       passengerAngle,
-      renderTitle,
-      registerOverlay
+      renderTitle
     } = props;
     const from = place2point(fromPlace);
     const passengerDistance = passengerPosition ? apiMapDistance(passengerPosition, from) : void 0;
@@ -7538,7 +7665,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
           distance,
           duration
         }) => {
-          var _a, _b;
+          var _a;
           spaceLog("angleDifference", "carPosition, routeAngle, driverAngle = ", carPosition, angle, carAngle);
           return [Vue.h(DrivingLine, {
             "attrs": {
@@ -7552,12 +7679,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
                 distance,
                 duration
               }),
-              "registerOverlay": registerOverlay
-            }
-          }), Vue.h(KeyedFitView, {
-            "attrs": {
-              "registerOverlay": registerOverlay,
-              "fitViewKey": JSON.stringify((_b = path[0]) != null ? _b : carPosition)
+              "registerOverlay": fittableRegistryOverlay
             }
           })];
         }
@@ -7570,12 +7692,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
           distance: carDistance,
           duration: carDurationWithinMinDistance(carDistance)
         }),
-        "registerOverlay": registerOverlay
-      }
-    }), Vue.h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], !!passengerPosition && passengerDistance && passengerDistance < PASSENGER_DISTANCE_MAX && passengerDistance > PASSENGER_DISTANCE_MIN && Vue.h(WalkingRoute, {
       "attrs": {
@@ -7593,6 +7710,11 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7670,10 +7792,19 @@ const SectionBookDispatched = defineSetup(function SectionBookDispatched2(props)
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   const {
     apiMapDistance
   } = useMapGeometry();
@@ -7684,8 +7815,7 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
       carAngle,
       passengerPosition,
       passengerAngle,
-      title,
-      registerOverlay
+      title
     } = props;
     const from = place2point(fromPlace);
     const passengerDistance = passengerPosition ? apiMapDistance(passengerPosition, from) : void 0;
@@ -7713,12 +7843,7 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
         "position": carPosition,
         "angle": carAngle,
         "title": title,
-        "registerOverlay": registerOverlay
-      }
-    }), Vue.h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], Vue.h(StartEndPoint, {
       "attrs": {
@@ -7736,17 +7861,25 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionInService = defineSetup(function SectionInService2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   return () => {
     const {
       to: toPlace,
       carPosition,
       carAngle,
-      renderTitle,
-      registerOverlay
+      renderTitle
     } = props;
     const to = place2point(toPlace);
     const {
@@ -7763,7 +7896,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
           distance,
           duration
         }) => {
-          var _a, _b;
+          var _a;
           spaceLog("angleDifference", "carPosition, routeAngle, driverAngle = ", carPosition, angle, carAngle);
           return [Vue.h(DrivingLine, {
             "attrs": {
@@ -7777,12 +7910,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
                 distance,
                 duration
               }),
-              "registerOverlay": registerOverlay
-            }
-          }), Vue.h(KeyedFitView, {
-            "attrs": {
-              "registerOverlay": registerOverlay,
-              "fitViewKey": JSON.stringify((_b = path[0]) != null ? _b : carPosition)
+              "registerOverlay": fittableRegistryOverlay
             }
           })];
         }
@@ -7795,12 +7923,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
           distance: carDistance,
           duration: carDurationWithinMinDistance(carDistance)
         }),
-        "registerOverlay": registerOverlay
-      }
-    }), Vue.h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], Vue.h(StartEndPoint, {
       "attrs": {
@@ -7818,6 +7941,11 @@ const SectionInService = defineSetup(function SectionInService2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7858,6 +7986,11 @@ const SectionCanceled = defineSetup(function SectionCanceled2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7911,6 +8044,11 @@ const SectionEndService = defineSetup(function SectionEndService2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });

package/dist/index.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 import Vue, { defineComponent, h, computed, inject, provide, watch, onMounted, onUnmounted, watchPostEffect, shallowRef, ref, watchEffect, reactive, toRefs, toRef } from "vue";
 const style = "";
 const name = "@heycar/heycars-map";
-const version = "0.9.0";
+const version = "0.9.1";
 const type = "module";
 const scripts = {
   dev: "vite -c vite.config.dev.ts",
@@ -1111,6 +1111,48 @@ const assertAngle = (angle) => {
 const isLatLngLiteral = (value) => {
   return value != null && typeof value === "object" && Number.isFinite(value.lat) && Number.isFinite(value.lng);
 };
+function defered() {
+  const defer = {};
+  const promise = new Promise((resolve, reject) => {
+    defer.state = "pending";
+    defer.resolve = async (value) => {
+      try {
+        const result = await value;
+        defer.state = "fulfilled";
+        return resolve(result);
+      } catch (err) {
+        defer.state = "rejected";
+        reject(err);
+      }
+    };
+    defer.reject = (reason) => {
+      defer.state = "rejected";
+      return reject(reason);
+    };
+  });
+  return Object.assign(promise, defer);
+}
+const pausableSleep = (milliSeconds) => {
+  const sleepDefered = defered();
+  let id = setTimeout(sleepDefered.resolve, milliSeconds);
+  let isPaused = false;
+  const pause = () => {
+    if (isPaused || sleepDefered.state === "fulfilled")
+      return;
+    console.log("pause");
+    isPaused = true;
+    clearTimeout(id);
+  };
+  const restart = () => {
+    if (sleepDefered.state === "fulfilled")
+      return;
+    console.log("restart");
+    isPaused = false;
+    clearTimeout(id);
+    id = setTimeout(sleepDefered.resolve, milliSeconds);
+  };
+  return { sleepPromise: sleepDefered, pause, restart };
+};
 const vec2lnglat = ([lng, lat]) => ({
   lng: Number(lng),
   lat: Number(lat)
@@ -3145,6 +3187,36 @@ const useMapFitView = (props) => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap" ? useGmapFitView(props) : useAmapFitView(props);
 };
+const useAmapTouchEvent = () => {
+  const mapRef = useAmap();
+  const addMapEventListener = (name2, handler) => {
+    var _a;
+    return (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.on(name2, handler);
+  };
+  const removeMapEventListener = (name2, handler) => {
+    var _a;
+    return (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.off(name2, handler);
+  };
+  return { addMapEventListener, removeMapEventListener };
+};
+const useGmapTouchEvent = () => {
+  const mapRef = useGmap();
+  const addMapEventListener = (name2, handler) => {
+    var _a;
+    const container = (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.getDiv();
+    return container == null ? void 0 : container.addEventListener(name2, handler);
+  };
+  const removeMapEventListener = (name2, handler) => {
+    var _a;
+    const container = (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.getDiv();
+    return container == null ? void 0 : container.removeEventListener(name2, handler);
+  };
+  return { addMapEventListener, removeMapEventListener };
+};
+const useMapTouchEvent = () => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapTouchEvent() : useAmapTouchEvent();
+};
 defineSetup(function FitView(props, {
   slots
 }) {
@@ -3197,7 +3269,7 @@ function createFittableRegisterOverlay(registerOverlay) {
     setFitView
   };
 }
-const KeyedFitView = defineSetup(function KeyedFitView2(props, {
+defineSetup(function KeyedFitView(props, {
   slots
 }) {
   const mapMountedPromise = useMapMountedPromise();
@@ -3218,6 +3290,48 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
     return h("div", [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
   };
 });
+const InterruptableIntervalFitView = defineSetup(function InterruptableIntervalFitView2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const mapMountedPromise = useMapMountedPromise();
+  const {
+    addMapEventListener,
+    removeMapEventListener
+  } = useMapTouchEvent();
+  watch(() => 0, async (_1, _2, onCleanup) => {
+    await mapMountedPromise;
+    let skip = false;
+    let pause;
+    let restart;
+    let sleepPromise;
+    const handleTouchStartOrMove = () => pause();
+    const handleTouchEnd = () => restart();
+    addMapEventListener("touchstart", handleTouchStartOrMove);
+    addMapEventListener("touchmove", handleTouchStartOrMove);
+    addMapEventListener("touchend", handleTouchEnd);
+    onCleanup(() => {
+      skip = true;
+      removeEventListener("touchstart", handleTouchStartOrMove);
+      removeMapEventListener("touchmove", handleTouchStartOrMove);
+      removeMapEventListener("touchend", handleTouchEnd);
+    });
+    while (!skip) {
+      ({
+        pause,
+        restart,
+        sleepPromise
+      } = pausableSleep(props.interval));
+      await sleepPromise;
+      console.log("InterruptableIntervalFitView setFitView");
+      registerOverlay.setFitView();
+    }
+  }, {
+    immediate: true,
+    flush: "post"
+  });
+  return () => null;
+});
 const imgEndPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI3Mi4zMzklIiB5MT0iNTAlIiB4Mj0iMCUiIHkyPSI1MCUiIGlkPSJwcmVmaXhfX2EiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjg0NDciIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY4QjRBIiBvZmZzZXQ9IjUwLjU5NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZBOTVBIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAzMC4yMTVjMi4xMzQgMCAzLjg2My0uODkzIDMuODYzLTEuOTk1IDAtMS4xLTEuNzMtMS45OTQtMy44NjMtMS45OTQtMi4xMzQgMC0zLjg2My44OTMtMy44NjMgMS45OTQgMCAxLjEwMiAxLjczIDEuOTk1IDMuODYzIDEuOTk1eiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyNy4wMDZjMi4xMjggMC0uOS0zLjc0MyA1LjYyMS02LjY0M0MxOS44NDIgMTguNDUzIDIyIDE0Ljk1MyAyMiAxMC45NSAyMiA0LjkwMiAxNy4wNzUgMCAxMSAwUzAgNC45MDIgMCAxMC45NWMwIDMuOTE4IDIuMDY4IDcuMzU2IDUuMTc3IDkuMjlDMTEuNzUgMjMuMjg0IDkuMDYgMjcuMDA3IDExIDI3LjAwN3oiIHN0cm9rZT0iI0ZGRiIgZmlsbD0idXJsKCNwcmVmaXhfX2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSIvPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVNlbWlib2xkLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9IjUwMCIgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxLjIxNSkiPjx0c3BhbiB4PSI1IiB5PSIxNS40NDkiPue7iDwvdHNwYW4+PC90ZXh0PjwvZz48L3N2Zz4=";
 const imgStartPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEyOS41OTklIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjMzZBOEZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4NzFGMSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTIgMzAuMjE1YzEuOTUgMCAzLjUzMi0uODE2IDMuNTMyLTEuODIzIDAtMS4wMDctMS41ODEtMS44MjMtMy41MzItMS44MjMtMS45NSAwLTMuNTMyLjgxNi0zLjUzMiAxLjgyMyAwIDEuMDA3IDEuNTgxIDEuODIzIDMuNTMyIDEuODIzeiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyN2MyLjEyOCAwLS45LTMuNzQyIDUuNjIxLTYuNjQxIDMuMjIxLTEuOTEgNS4zNzktNS40MSA1LjM3OS05LjQxMkMyMiA0LjkwMSAxNy4wNzUgMCAxMSAwUzAgNC45MDEgMCAxMC45NDdjMCAzLjkxOCAyLjA2OCA3LjM1NSA1LjE3NyA5LjI5QzExLjc1IDIzLjI3NyA5LjA2IDI3IDExIDI3eiIgc3Ryb2tlPSIjRkZGIiBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS4yMTUpIi8+PHRleHQgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iNTAwIiBmaWxsPSIjRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSI+PHRzcGFuIHg9IjUiIHk9IjE1LjYyNCI+6LW3PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==";
 const StartEndPoint_css_ts_vanilla = "";
@@ -6140,10 +6254,9 @@ const ConditionalFittablePassengerCircle = defineSetup(function ConditionalFitta
         "size": "small",
         "registerOverlay": registerOverlay
       }
-    }), h(KeyedFitView, {
+    }), h(FitViewOnce, {
       "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(position)
+        "registerOverlay": registerOverlay
       }
     })]);
   };
@@ -7392,6 +7505,7 @@ const WaveCircle = defineSetup(function WaveCircle2(props) {
 const PASSENGER_DISTANCE_MAX = 2e3;
 const PASSENGER_DISTANCE_MIN = 10;
 const CAR_DISTANCE_MIN = 100;
+const AUTO_FIT_VIEW_INTERVAL = 15e3;
 const carDurationWithinMinDistance = (distance) => Math.floor(distance / 5);
 const SectionDispatching = defineSetup(function SectionDispatching2(props) {
   return () => {
@@ -7422,6 +7536,11 @@ const SectionDispatching = defineSetup(function SectionDispatching2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7487,10 +7606,19 @@ const SectionConfirmed = defineSetup(function SectionConfirmed2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionDriverStartService = defineSetup(function SectionDriverStartService2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   const {
     apiMapDistance
   } = useMapGeometry();
@@ -7501,8 +7629,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
       carAngle,
       passengerPosition,
       passengerAngle,
-      renderTitle,
-      registerOverlay
+      renderTitle
     } = props;
     const from = place2point(fromPlace);
     const passengerDistance = passengerPosition ? apiMapDistance(passengerPosition, from) : void 0;
@@ -7536,7 +7663,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
           distance,
           duration
         }) => {
-          var _a, _b;
+          var _a;
           spaceLog("angleDifference", "carPosition, routeAngle, driverAngle = ", carPosition, angle, carAngle);
           return [h(DrivingLine, {
             "attrs": {
@@ -7550,12 +7677,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
                 distance,
                 duration
               }),
-              "registerOverlay": registerOverlay
-            }
-          }), h(KeyedFitView, {
-            "attrs": {
-              "registerOverlay": registerOverlay,
-              "fitViewKey": JSON.stringify((_b = path[0]) != null ? _b : carPosition)
+              "registerOverlay": fittableRegistryOverlay
             }
           })];
         }
@@ -7568,12 +7690,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
           distance: carDistance,
           duration: carDurationWithinMinDistance(carDistance)
         }),
-        "registerOverlay": registerOverlay
-      }
-    }), h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], !!passengerPosition && passengerDistance && passengerDistance < PASSENGER_DISTANCE_MAX && passengerDistance > PASSENGER_DISTANCE_MIN && h(WalkingRoute, {
       "attrs": {
@@ -7591,6 +7708,11 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7668,10 +7790,19 @@ const SectionBookDispatched = defineSetup(function SectionBookDispatched2(props)
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   const {
     apiMapDistance
   } = useMapGeometry();
@@ -7682,8 +7813,7 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
       carAngle,
       passengerPosition,
       passengerAngle,
-      title,
-      registerOverlay
+      title
     } = props;
     const from = place2point(fromPlace);
     const passengerDistance = passengerPosition ? apiMapDistance(passengerPosition, from) : void 0;
@@ -7711,12 +7841,7 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
         "position": carPosition,
         "angle": carAngle,
         "title": title,
-        "registerOverlay": registerOverlay
-      }
-    }), h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], h(StartEndPoint, {
       "attrs": {
@@ -7734,17 +7859,25 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionInService = defineSetup(function SectionInService2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   return () => {
     const {
       to: toPlace,
       carPosition,
       carAngle,
-      renderTitle,
-      registerOverlay
+      renderTitle
     } = props;
     const to = place2point(toPlace);
     const {
@@ -7761,7 +7894,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
           distance,
           duration
         }) => {
-          var _a, _b;
+          var _a;
           spaceLog("angleDifference", "carPosition, routeAngle, driverAngle = ", carPosition, angle, carAngle);
           return [h(DrivingLine, {
             "attrs": {
@@ -7775,12 +7908,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
                 distance,
                 duration
               }),
-              "registerOverlay": registerOverlay
-            }
-          }), h(KeyedFitView, {
-            "attrs": {
-              "registerOverlay": registerOverlay,
-              "fitViewKey": JSON.stringify((_b = path[0]) != null ? _b : carPosition)
+              "registerOverlay": fittableRegistryOverlay
             }
           })];
         }
@@ -7793,12 +7921,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
           distance: carDistance,
           duration: carDurationWithinMinDistance(carDistance)
         }),
-        "registerOverlay": registerOverlay
-      }
-    }), h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], h(StartEndPoint, {
       "attrs": {
@@ -7816,6 +7939,11 @@ const SectionInService = defineSetup(function SectionInService2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7856,6 +7984,11 @@ const SectionCanceled = defineSetup(function SectionCanceled2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7909,6 +8042,11 @@ const SectionEndService = defineSetup(function SectionEndService2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });

package/dist/src/business-components/FitView/FitView.d.ts

@@ -15,4 +15,8 @@ export type KeyedFitViewProps = Required<MROP> & {
     fitViewKey: string;
 };
 export declare const KeyedFitView: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<KeyedFitViewProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<KeyedFitViewProps, Required<KeyedFitViewProps>>, never, KeyedFitViewProps, {} | {}>;
+export type InterruptableIntervalFitViewProps = Required<MROP> & {
+    interval: number;
+};
+export declare const InterruptableIntervalFitView: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<InterruptableIntervalFitViewProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<InterruptableIntervalFitViewProps, Required<InterruptableIntervalFitViewProps>>, never, InterruptableIntervalFitViewProps, {} | {}>;
 export {};

package/dist/src/hooks/useMapTouchEvent.d.ts

@@ -0,0 +1,15 @@
+type AddMapEventListener = (name: "touchstart" | "touchmove" | "touchend", handler: (e: TouchEvent) => void) => void;
+type RemoveMapEventListener = (name: "touchstart" | "touchmove" | "touchend", handler: (e: TouchEvent) => void) => void;
+export declare const useAmapTouchEvent: () => {
+    addMapEventListener: AddMapEventListener;
+    removeMapEventListener: RemoveMapEventListener;
+};
+export declare const useGmapTouchEvent: () => {
+    addMapEventListener: AddMapEventListener;
+    removeMapEventListener: RemoveMapEventListener;
+};
+export declare const useMapTouchEvent: () => {
+    addMapEventListener: AddMapEventListener;
+    removeMapEventListener: RemoveMapEventListener;
+};
+export {};

package/dist/src/utils/helper.d.ts

@@ -4,3 +4,19 @@ export declare const sleep: (milliSeconds: number) => Promise<unknown>;
 export declare const assertPoint: (point: unknown) => void;
 export declare const assertAngle: (angle: unknown) => void;
 export declare const isLatLngLiteral: (value: any) => boolean;
+interface Defered<T> extends Promise<T> {
+    state: "pending" | "fulfilled" | "rejected";
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: any) => void;
+}
+export declare function defered<T>(): Defered<T>;
+export declare const resettableSleep: (milliSeconds: number) => {
+    sleepPromise: Defered<void>;
+    reset: () => void;
+};
+export declare const pausableSleep: (milliSeconds: number) => {
+    sleepPromise: Defered<void>;
+    pause: () => void;
+    restart: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",