@heycar/heycars-map 0.6.1 → 0.6.3

package/dist/components/Gmap/Gmap.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="google.maps" />
 import type { SetMap } from "../../hooks/useHeycarMap";
+import { UseResizeObserverProps } from "../../hooks/useResizeObserver";
 import type { MapEventHandler } from "../../types/mapHelper";
 export interface GmapProps extends google.maps.MapOptions {
     mapRef?: SetMap<google.maps.Map>;
     onDragStart?: MapEventHandler<google.maps.Map>;
     onDragEnd?: MapEventHandler<google.maps.Map>;
     onZoom_change?: MapEventHandler<google.maps.Map>;
+    onResize?: UseResizeObserverProps["onChange"];
 }
-export declare const Gmap: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<GmapProps>, 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<GmapProps, Required<GmapProps>>, "dragStart" | "dragEnd" | "zoom_change", GmapProps, {}>;
+export declare const Gmap: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<GmapProps>, 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<GmapProps, Required<GmapProps>>, "resize" | "dragStart" | "dragEnd" | "zoom_change", GmapProps, {}>;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,9 @@
+import { ShallowRef } from "vue-demi";
+export interface UseResizeObserverProps {
+    elementRef: ShallowRef<HTMLDivElement>;
+    onChange?: (props: {
+        width: number;
+        height: number;
+    }) => any;
+}
+export declare const useResizeObserver: (props: UseResizeObserverProps) => void;

package/dist/index.cjs

@@ -1095,17 +1095,16 @@ const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView2(prop
   const markerRef = Vue.shallowRef();
   const mapRef = useGmap();
   const handleClick = (name) => emit(name, { target: markerRef.value });
-  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   Vue.onMounted(() => {
     const { registerOverlay: registerOverlay2, ...markerViewProps } = props;
     markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...markerViewProps });
-    markerRef.value.addListener;
   });
   Vue.onUnmounted(() => {
     if (!markerRef.value)
       return;
     markerRef.value.map = null;
   });
+  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   Vue.watchPostEffect(() => {
     const map = mapRef == null ? void 0 : mapRef.value;
     if (!map || !markerRef.value)
@@ -1978,10 +1977,30 @@ const useMapEventSource = () => {
   };
   return { executeMapApi };
 };
+const useResizeObserver = (props) => {
+  const { elementRef, onChange } = props;
+  const resizeObserver = new ResizeObserver(([entry]) => {
+    var _a, _b;
+    const { contentBoxSize, contentRect } = entry;
+    const width = (_a = contentBoxSize == null ? void 0 : contentBoxSize[0].inlineSize) != null ? _a : contentRect.width;
+    const height = (_b = contentBoxSize == null ? void 0 : contentBoxSize[0].blockSize) != null ? _b : contentRect.height;
+    onChange == null ? void 0 : onChange({ width, height });
+  });
+  Vue.watchPostEffect((onCleanup) => {
+    const element = elementRef.value;
+    if (element)
+      resizeObserver.observe(element);
+    onCleanup(() => {
+      if (element)
+        resizeObserver.unobserve(element);
+    });
+  });
+};
 const Gmap_css_ts_vanilla = "";
 var gmap = "_7anfuo0";
 const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
   const setMap = props.mapRef;
+  const { onResize } = props;
   const options = Vue.computed(() => {
     const { mapRef: mapRef2, onDragStart, onDragEnd, onZoom_change, ...options2 } = props;
     return options2;
@@ -1992,6 +2011,7 @@ const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
   const { executeMapApi } = useMapEventSource();
   const handleDrag = (name) => emit(name, { target: mapRef.value });
   provideGmap(mapRef);
+  useResizeObserver({ elementRef, onChange: onResize });
   Vue.watchPostEffect(() => {
     if (mapRef.value || !elementRef.value)
       return;
@@ -2097,17 +2117,15 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
             "mapId": gmapId,
             "center": center ? vec2lnglat(center) : void 0,
             "zoom": zoom,
-            "disableDefaultUI": touchEnable,
+            "disableDefaultUI": true,
+            "clickableIcons": false,
             "disableDoubleClickZoom": touchEnable,
             "gestureHandling": touchEnable ? "auto" : "none",
-            "keyboardShortcuts": touchEnable,
-            "rotateControl": false,
-            "zoomControl": touchEnable,
-            "scaleControl": touchEnable,
-            "panControl": touchEnable
+            "keyboardShortcuts": touchEnable
           },
           "on": {
-            "dragEnd": gmapHandleDargEnd
+            "dragEnd": gmapHandleDargEnd,
+            "resize": handleResize
           }
         }, [children]);
       default:
@@ -2253,10 +2271,10 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
   return () => {
     const vw = window.innerWidth * 0.01;
     const repeat = 10 * vw;
-    const strokeWidth = 2.5 * vw;
-    const borderWidth = 0.35 * vw;
-    const dirStrokeWeight = 0.75 * vw;
-    const outlineWidth = 1 * vw;
+    const strokeWidth = 1.25 * vw * 0.65;
+    const borderWidth = 0.175 * vw * 0.65;
+    const dirStrokeWeight = 0.375 * vw * 0.65;
+    const outlineWidth = 0.45 * vw * 0.65;
     const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
     const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
     const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
@@ -2293,7 +2311,7 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
             path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
             strokeColor: "white",
             strokeWeight: dirStrokeWeight,
-            scale: 3
+            scale: 0.7
           },
           repeat: `${repeat}px`
         }]
@@ -2608,6 +2626,7 @@ const useGmapFitView = (props) => {
       return;
     const vw = window.innerWidth / 100;
     const [top, right, bottom, left] = (_a = props.padding) != null ? _a : [0, 0, 0, 0];
+    spaceLog("setFitView", "overlayGroup = ", overlayGroup);
     executeMapApi(
       () => map.fitBounds(overlayGroup.getBound(), {
         top: top * vw,

package/dist/index.js

@@ -1093,17 +1093,16 @@ const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView2(prop
   const markerRef = shallowRef();
   const mapRef = useGmap();
   const handleClick = (name) => emit(name, { target: markerRef.value });
-  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   onMounted(() => {
     const { registerOverlay: registerOverlay2, ...markerViewProps } = props;
     markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...markerViewProps });
-    markerRef.value.addListener;
   });
   onUnmounted(() => {
     if (!markerRef.value)
       return;
     markerRef.value.map = null;
   });
+  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   watchPostEffect(() => {
     const map = mapRef == null ? void 0 : mapRef.value;
     if (!map || !markerRef.value)
@@ -1976,10 +1975,30 @@ const useMapEventSource = () => {
   };
   return { executeMapApi };
 };
+const useResizeObserver = (props) => {
+  const { elementRef, onChange } = props;
+  const resizeObserver = new ResizeObserver(([entry]) => {
+    var _a, _b;
+    const { contentBoxSize, contentRect } = entry;
+    const width = (_a = contentBoxSize == null ? void 0 : contentBoxSize[0].inlineSize) != null ? _a : contentRect.width;
+    const height = (_b = contentBoxSize == null ? void 0 : contentBoxSize[0].blockSize) != null ? _b : contentRect.height;
+    onChange == null ? void 0 : onChange({ width, height });
+  });
+  watchPostEffect((onCleanup) => {
+    const element = elementRef.value;
+    if (element)
+      resizeObserver.observe(element);
+    onCleanup(() => {
+      if (element)
+        resizeObserver.unobserve(element);
+    });
+  });
+};
 const Gmap_css_ts_vanilla = "";
 var gmap = "_7anfuo0";
 const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
   const setMap = props.mapRef;
+  const { onResize } = props;
   const options = computed(() => {
     const { mapRef: mapRef2, onDragStart, onDragEnd, onZoom_change, ...options2 } = props;
     return options2;
@@ -1990,6 +2009,7 @@ const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
   const { executeMapApi } = useMapEventSource();
   const handleDrag = (name) => emit(name, { target: mapRef.value });
   provideGmap(mapRef);
+  useResizeObserver({ elementRef, onChange: onResize });
   watchPostEffect(() => {
     if (mapRef.value || !elementRef.value)
       return;
@@ -2095,17 +2115,15 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
             "mapId": gmapId,
             "center": center ? vec2lnglat(center) : void 0,
             "zoom": zoom,
-            "disableDefaultUI": touchEnable,
+            "disableDefaultUI": true,
+            "clickableIcons": false,
             "disableDoubleClickZoom": touchEnable,
             "gestureHandling": touchEnable ? "auto" : "none",
-            "keyboardShortcuts": touchEnable,
-            "rotateControl": false,
-            "zoomControl": touchEnable,
-            "scaleControl": touchEnable,
-            "panControl": touchEnable
+            "keyboardShortcuts": touchEnable
           },
           "on": {
-            "dragEnd": gmapHandleDargEnd
+            "dragEnd": gmapHandleDargEnd,
+            "resize": handleResize
           }
         }, [children]);
       default:
@@ -2251,10 +2269,10 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
   return () => {
     const vw = window.innerWidth * 0.01;
     const repeat = 10 * vw;
-    const strokeWidth = 2.5 * vw;
-    const borderWidth = 0.35 * vw;
-    const dirStrokeWeight = 0.75 * vw;
-    const outlineWidth = 1 * vw;
+    const strokeWidth = 1.25 * vw * 0.65;
+    const borderWidth = 0.175 * vw * 0.65;
+    const dirStrokeWeight = 0.375 * vw * 0.65;
+    const outlineWidth = 0.45 * vw * 0.65;
     const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
     const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
     const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
@@ -2291,7 +2309,7 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
             path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
             strokeColor: "white",
             strokeWeight: dirStrokeWeight,
-            scale: 3
+            scale: 0.7
           },
           repeat: `${repeat}px`
         }]
@@ -2606,6 +2624,7 @@ const useGmapFitView = (props) => {
       return;
     const vw = window.innerWidth / 100;
     const [top, right, bottom, left] = (_a = props.padding) != null ? _a : [0, 0, 0, 0];
+    spaceLog("setFitView", "overlayGroup = ", overlayGroup);
     executeMapApi(
       () => map.fitBounds(overlayGroup.getBound(), {
         top: top * vw,

package/dist/style.css

@@ -117,6 +117,12 @@
 }
 ._7anfuo1 {
   position: relative;
+}
+a[title*="Google"]>div>img[alt="Google"], .gmnoprint {
+  display: none;
+}
+._7anfuo0 [class*="marker-view"] {
+  will-change: unset !important;
 }._4a4ovk0 {
   margin-bottom: -0.4vw;
   display: flex;
@@ -198,6 +204,7 @@
 }
 .fhyw85 {
   margin-bottom: -2.265vw;
+  width: max-content;
 }
 .fhyw86 {
   margin-right: calc(50% - 2.265vw);

package/package.json

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

package/todo.md

@@ -106,3 +106,12 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 - 5500
 - 5524
+
+  0.6.3
+
+- 5623
+- 5625
+- 5550
+- 5546
+- 5541
+- 5540