@heycar/heycars-map 0.3.6 → 0.3.8

package/src/business-components/PassengerCircle/PassengerCircle.css.ts

@@ -1,21 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-
-export const passengerCircle = recipe({
-  base: {
-    display: "flex",
-  },
-  variants: {
-    size: {
-      small: {
-        width: "4.53vw",
-        height: "4.53vw",
-        marginBottom: "-2.265vw",
-      },
-      large: {
-        width: "16.27vw",
-        height: "16.27vw",
-        marginBottom: "-8.135vw",
-      },
-    },
-  },
-});

package/src/business-components/PassengerCircle/PassengerCircle.tsx

@@ -1,69 +0,0 @@
-import { computed } from "vue";
-import imgPassengerCircle from "../../assets/icons/svg/passenger-circle.svg";
-import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
-import { AmapMarker } from "../../components/AmapMarker";
-import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { useMapSupplier } from "../../hooks/useMapSupplier";
-import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
-import { createElement, defineSetup } from "../../types/helper";
-import { createDom } from "../../utils/dom";
-import { vec2lnglat } from "../../utils/transform";
-
-import * as css from "./PassengerCircle.css";
-
-interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
-  position: [number, number];
-  size?: "small" | "large";
-}
-export const APassengerCircle = defineSetup(function APassengerCircle(
-  props: PassengerCircleProps<AmapOverlay>
-) {
-  useMapLog(props, "APassengerCircle");
-  const contentRef = computed(() => {
-    const { size = "large" } = props;
-    const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
-    return `
-        <img src="${src}" class="${css.passengerCircle({ size })}">
-      `;
-  });
-  return () => {
-    return (
-      <AmapMarker
-        position={props.position}
-        content={contentRef.value}
-        anchor={"bottom-center"}
-        registerOverlay={props.registerOverlay}
-      />
-    );
-  };
-});
-
-export const GPassengerCircle = defineSetup(function GPassengerCircle(
-  props: PassengerCircleProps<GmapOverlay>
-) {
-  useMapLog(props, "GPassengerCircle");
-  const contentRef = computed(() => {
-    const { size = "large" } = props;
-    const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
-    return createDom("img", { class: css.passengerCircle({ size }), src });
-  });
-  return () => (
-    <GmapAdvancedMarkerView
-      position={vec2lnglat(props.position)}
-      content={contentRef.value}
-      registerOverlay={props.registerOverlay}
-    />
-  );
-});
-
-export const PassengerCircle = defineSetup(function PassengerCircle(
-  props: PassengerCircleProps<AmapOverlay> | PassengerCircleProps<GmapOverlay>
-) {
-  const payload = useMapSupplier();
-  return () => {
-    return createElement(payload.supplier === "gmap" ? GPassengerCircle : APassengerCircle, {
-      attrs: props,
-    });
-  };
-});

package/src/business-components/PassengerCircle/index.ts

@@ -1 +0,0 @@
-export * from "./PassengerCircle";

package/src/business-components/PickupPoints/PickupPoints.tsx

@@ -1,38 +0,0 @@
-import { reactive, toRef } from "vue-demi";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { usePointsLabelDirection } from "../../hooks/usePlacesLabelDirection";
-import { defineSetup } from "../../types/helper";
-import type { Place } from "../../types/interface";
-import { place2point } from "../../utils/transform";
-import { PlaceCircle } from "../PlaceCircle";
-
-export interface PickupPointsProps extends MapLogProps {
-  places: Place[];
-  renderLabel?: (place: Place) => string | undefined;
-  onClick?: (value: Place) => any;
-}
-export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps, { emit }) {
-  useMapLog(props, "PickupPoints");
-  const { renderLabel } = props;
-  const directions = usePointsLabelDirection(
-    reactive({ places: toRef(props, "places"), heightLimit: 9, widthLimit: 32 })
-  );
-  return () => {
-    return (
-      <div>
-        {props.places.map((place, idx) => {
-          const direction = directions.value[idx];
-          const label = renderLabel ? renderLabel(place) : place.name;
-          return (
-            <PlaceCircle
-              position={place2point(place)}
-              label={label}
-              textAlign={direction}
-              onClick={() => emit("click", place)}
-            />
-          );
-        })}
-      </div>
-    );
-  };
-});

package/src/business-components/PickupPoints/index.ts

@@ -1 +0,0 @@
-export * from "./PickupPoints";

package/src/business-components/PlaceCircle/PlaceCircle.css.ts

@@ -1,76 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const placeCircleLayout = recipe({
-  base: {
-    display: "flex",
-    alignItems: "center",
-  },
-  variants: {
-    textAlign: {
-      left: {
-        flexDirection: "row-reverse",
-      },
-      right: {},
-    },
-  },
-});
-
-export const amapPlaceIconLayout = recipe({
-  variants: {
-    textAlign: {
-      left: {
-        marginRight: "-2.265vw",
-      },
-      right: {
-        marginLeft: "-2.265vw",
-      },
-    },
-  },
-});
-
-export const gmapPlaceIconLayout = recipe({
-  base: {
-    marginBottom: "-2.265vw",
-  },
-  variants: {
-    textAlign: {
-      left: {
-        marginRight: "calc(50% - 2.265vw)",
-      },
-      right: {
-        marginLeft: "calc(50% - 2.265vw)",
-      },
-    },
-  },
-});
-
-export const placeIcon = recipe({
-  base: {
-    display: "flex",
-    width: "4.53vw",
-    height: "4.53vw",
-  },
-  variants: {
-    hideIcon: {
-      true: {
-        opacity: 0,
-      },
-      false: {},
-    },
-  },
-});
-
-export const label = style({
-  display: "-webkit-box",
-  fontSize: "3.2vw",
-  fontFamily: "PingFangSC-Semibold, PingFang SC",
-  fontWeight: 600,
-  color: "#243E66",
-  lineHeight: "4.53vw",
-  width: "max-content",
-  maxWidth: "32vw",
-  WebkitLineClamp: 2,
-  WebkitBoxOrient: "vertical",
-  overflow: "hidden",
-});

package/src/business-components/PlaceCircle/PlaceCircle.tsx

@@ -1,110 +0,0 @@
-import { computed } from "vue-demi";
-import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
-import { AmapMarker, AmapMarkerProps } from "../../components/AmapMarker";
-import {
-  GmapAdvancedMarkerView,
-  GmapAdvancedMarkerViewProps,
-} from "../../components/GmapAdvancedMarkerView";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { useMapSupplier } from "../../hooks/useMapSupplier";
-import { AnchorType } from "../../types/amap/marker";
-import { createElement, defineSetup } from "../../types/helper";
-import type { Point } from "../../types/interface";
-import { createDom } from "../../utils/dom";
-import { vec2lnglat } from "../../utils/transform";
-import * as css from "./PlaceCircle.css";
-
-export interface PlaceCircleProps extends MapLogProps {
-  position: [number, number];
-  label?: string;
-  textAlign?: "left" | "right";
-  hideIcon?: boolean;
-  onClick?: (value: Point) => any;
-}
-export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps, { emit }) {
-  useMapLog(props, "APlaceCircle");
-  const textAlignRef = computed(() => props.textAlign ?? "right");
-  const contentRef = computed(() => {
-    const { hideIcon = false } = props;
-    return `
-        <div class="${css.placeCircleLayout({ textAlign: textAlignRef.value })}">
-          <img class="${css.placeIcon({ hideIcon })} ${css.amapPlaceIconLayout({
-      textAlign: textAlignRef.value,
-    })}" src="${imgPlaceCircle}">
-          <div class="${css.label}">${props.label}</div>
-        </div>
-      `;
-  });
-  const contentWithoutLabelRef = computed(() => {
-    const { hideIcon = false } = props;
-    return `<img class="${css.placeIcon({ hideIcon })} ${css.amapPlaceIconLayout({
-      textAlign: textAlignRef.value,
-    })}" src="${imgPlaceCircle}">`;
-  });
-  const handleClick: AmapMarkerProps["onClick"] = (e) => {
-    console.log("on amap marker e = ", e);
-    emit("click", props.position);
-  };
-  return () => {
-    return (
-      <AmapMarker
-        position={props.position}
-        content={props.label ? contentRef.value : contentWithoutLabelRef.value}
-        anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
-        onClick={handleClick}
-      />
-    );
-  };
-});
-
-export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps, { emit }) {
-  useMapLog(props, "GPlaceCircle");
-  const textAlignRef = computed(() => props.textAlign ?? "right");
-  const contentRef = computed(() => {
-    const { hideIcon = false } = props;
-    return createDom(
-      "div",
-      {
-        class: `${css.placeCircleLayout({
-          textAlign: textAlignRef.value,
-        })} ${css.gmapPlaceIconLayout({ textAlign: textAlignRef.value })}`,
-      },
-      `
-      <img class="${css.placeIcon({ hideIcon })}" src="${imgPlaceCircle}">
-      <div class="${css.label}">${props.label}</div>
-  `
-    );
-  });
-  const contentWithoutLabelRef = computed(() => {
-    const { hideIcon = false } = props;
-    return createDom("img", {
-      class: `${css.placeIcon({ hideIcon })} ${css.gmapPlaceIconLayout({
-        textAlign: textAlignRef.value,
-      })}`,
-      src: imgPlaceCircle,
-    });
-  });
-  const handleClick: GmapAdvancedMarkerViewProps["onClick"] = (e) => {
-    console.log("on gmap advanced marker view e = ", e);
-    emit("click", props.position);
-  };
-  return () => (
-    <GmapAdvancedMarkerView
-      position={vec2lnglat(props.position)}
-      content={props.label ? contentRef.value : contentWithoutLabelRef.value}
-      onClick={handleClick}
-    />
-  );
-});
-
-export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps, { emit }) {
-  const payload = useMapSupplier();
-  return () => {
-    return createElement(payload.supplier === "gmap" ? GPlaceCircle : APlaceCircle, {
-      attrs: props,
-      on: {
-        click: (value: any) => emit("click", value),
-      },
-    });
-  };
-});

package/src/business-components/PlaceCircle/index.ts

@@ -1 +0,0 @@
-export * from "./PlaceCircle";

package/src/business-components/StartEndPoint/StartEndPoint.css.ts

@@ -1,70 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const pointLayout = style({
-  marginBottom: "-0.4vw",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-});
-
-export const pointInfoBox = style({
-  padding: "1.07vw 2.4vw 1.6vw 2.67vw",
-  background: "#FFFFFF",
-  boxShadow: "0vw 0.53vw 2.4vw 0vw rgba(63,63,63,0.2)",
-  borderRadius: "2.13vw",
-});
-
-export const pointSingleInfoBox = style({
-  padding: "2.67vw 2.67vw 2.4vw 3.2vw",
-  background: "#FFFFFF",
-  boxShadow: "0vw 0vw 2.67vw 0vw rgba(78,85,108,0.15)",
-  borderRadius: "4.8vw",
-  fontSize: "3.2vw",
-  fontFamily: "PingFangSC-Medium, PingFang SC",
-  fontWeight: 500,
-  color: "#1E1E1E",
-  lineHeight: "4.53vw",
-  whiteSpace: "nowrap",
-});
-
-export const pointInfoBoxTitle = style({
-  fontSize: "3.2vw",
-  fontFamily: "PingFangSC-Medium, PingFang SC",
-  fontWeight: 500,
-  color: "#1E1E1E",
-  lineHeight: "4.53vw",
-  whiteSpace: "nowrap",
-});
-
-export const pointInfoBoxDescription = style({
-  fontSize: "2.4vw",
-  fontFamily: "PingFangSC-Regular, PingFang SC",
-  fontWeight: 400,
-  color: "#7E7E7E",
-  lineHeight: "3.47vw",
-  whiteSpace: "nowrap",
-});
-
-export const pointInfoBoxEmphasize = style({
-  color: "#4471FF",
-  fontFamily: "PingFangSC-Medium, PingFang SC",
-  fontWeight: 500,
-});
-
-export const pointIcon = recipe({
-  variants: {
-    type: {
-      start: {
-        marginTop: "1.33vw",
-        width: "6.192vw",
-        height: "7.998vw",
-      },
-      end: {
-        marginTop: "2.4vw",
-        width: "6.192vw",
-        height: "7.998vw",
-      },
-    },
-  },
-});

package/src/business-components/StartEndPoint/StartEndPoint.tsx

@@ -1,122 +0,0 @@
-import { computed } from "vue-demi";
-import imgEndPoint from "../../assets/icons/svg/end-point.svg";
-import imgStartPoint from "../../assets/icons/svg/start-point.svg";
-import { AmapMarker } from "../../components/AmapMarker";
-import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { useMapSupplier } from "../../hooks/useMapSupplier";
-import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
-import { createElement, defineSetup } from "../../types/helper";
-import { createDom } from "../../utils/dom";
-import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
-import * as css from "./StartEndPoint.css";
-
-export interface StartEndPointProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
-  type: "start" | "end";
-  position: [number, number];
-  title?: string;
-  description?: string;
-}
-export const AStartEndPoint = defineSetup(function AStartEndPoint(
-  props: StartEndPointProps<AmapOverlay>
-) {
-  useMapLog(props, "AStartEndPoint");
-  const contentRef = computed(() => {
-    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
-    const descriptionRow = !props.description
-      ? ""
-      : decodeAsterisk(props.description)
-          .map((item) =>
-            item.type === "normal"
-              ? item.value
-              : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
-          )
-          .join("");
-    if (!props.description && !props.title)
-      return `<img src="${icon}" class="${css.pointIcon({ type: props.type })}">`;
-    if (!props.description)
-      return `
-        <div class="${css.pointLayout}">
-          <div class="${css.pointSingleInfoBox}">${props.title}</div>
-          <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
-        </div>
-      `;
-    return `
-        <div class="${css.pointLayout}">
-          <div class="${css.pointInfoBox}">
-            <div class="${css.pointInfoBoxTitle}">${props.title ?? ""}</div>
-            <div class="${css.pointInfoBoxDescription}">${descriptionRow}</div>
-          </div>
-          <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
-        </div>
-      `;
-  });
-  return () => (
-    <AmapMarker
-      registerOverlay={props.registerOverlay}
-      position={props.position}
-      content={contentRef.value}
-      anchor={"bottom-center"}
-    />
-  );
-});
-
-export const GStartEndPoint = defineSetup(function GStartEndPoint(
-  props: StartEndPointProps<GmapOverlay>
-) {
-  useMapLog(props, "GStartEndPoint");
-  const contentRef = computed(() => {
-    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
-    const descriptionRow = !props.description
-      ? ""
-      : decodeAsterisk(props.description)
-          .map((item) =>
-            item.type === "normal"
-              ? item.value
-              : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
-          )
-          .join("");
-    if (!props.description && !props.title)
-      return createDom("img", { class: css.pointIcon({ type: props.type }), src: icon });
-    if (!props.description)
-      return createDom(
-        "div",
-        { class: css.pointLayout },
-        `
-          <div class="${css.pointSingleInfoBox}">${props.title}</div>
-          <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
-        `
-      );
-    return createDom(
-      "div",
-      { class: css.pointLayout },
-      `
-        <div class="${css.pointInfoBox}">
-          <div class="${css.pointInfoBoxTitle}">${props.title ?? ""}</div>
-          <div class="${css.pointInfoBoxDescription}">${descriptionRow}</div>
-        </div>
-        <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
-      `
-    );
-  });
-  return () => {
-    return (
-      <GmapAdvancedMarkerView
-        registerOverlay={props.registerOverlay}
-        position={vec2lnglat(props.position)}
-        content={contentRef.value}
-      />
-    );
-  };
-});
-
-export const StartEndPoint = defineSetup(function StartEndPoint(
-  props: StartEndPointProps<AmapOverlay> | StartEndPointProps<GmapOverlay>
-) {
-  const payload = useMapSupplier();
-  return () => {
-    return createElement(payload.supplier === "gmap" ? GStartEndPoint : AStartEndPoint, {
-      attrs: props,
-    });
-  };
-});

package/src/business-components/StartEndPoint/index.ts

@@ -1 +0,0 @@
-export * from "./StartEndPoint";

package/src/business-components/TaxiCar/TaxiCar.css.ts

@@ -1,16 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export {
-  pointInfoBoxEmphasize,
-  pointLayout,
-  pointSingleInfoBox,
-} from "../StartEndPoint/StartEndPoint.css";
-
-export const taxiCarLayout = style({});
-
-export const carIcon = style({
-  marginTop: "1.87vw",
-  marginBottom: "-5.5vw",
-  width: "6vw",
-  height: "11vw",
-});

package/src/business-components/TaxiCar/TaxiCar.tsx

@@ -1,93 +0,0 @@
-import { computed } from "vue-demi";
-import imgTaxicar from "../../assets/icons/svg/taxi-car.svg";
-import { AmapMarker } from "../../components/AmapMarker";
-import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { useMapSupplier } from "../../hooks/useMapSupplier";
-import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
-import { createElement, defineSetup } from "../../types/helper";
-import { createDom } from "../../utils/dom";
-import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
-import * as css from "./TaxiCar.css";
-
-export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
-  position: [number, number];
-  angle?: number;
-  title?: string;
-}
-export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOverlay>) {
-  useMapLog(props, "ATaxiCar");
-  const contentRef = computed(() => {
-    const titleRow = !props.title
-      ? ""
-      : decodeAsterisk(props.title)
-          .map((item) =>
-            item.type === "normal"
-              ? item.value
-              : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
-          )
-          .join("");
-    const carStyle = `transform:rotate(${props.angle ?? 0}deg)`;
-    if (!props.title) return `<img src="${imgTaxicar}" class="${css.carIcon}" style="${carStyle}">`;
-    return `
-      <div class="${css.pointLayout}">
-        <div class="${css.pointSingleInfoBox}">${titleRow}</div>
-        <img src="${imgTaxicar}" class="${css.carIcon}" style="${carStyle}">
-      </div>
-      `;
-  });
-  return () => (
-    <AmapMarker
-      position={props.position}
-      content={contentRef.value}
-      anchor={"bottom-center"}
-      registerOverlay={props.registerOverlay}
-    />
-  );
-});
-
-export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps<GmapOverlay>) {
-  useMapLog(props, "GTaxiCar");
-  const contentRef = computed(() => {
-    const titleRow = !props.title
-      ? ""
-      : decodeAsterisk(props.title)
-          .map((item) =>
-            item.type === "normal"
-              ? item.value
-              : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
-          )
-          .join("");
-    const carStyle = `transform:rotate(${props.angle ?? 0}deg)`;
-    if (!props.title)
-      return createDom("img", { class: css.carIcon, src: imgTaxicar, style: carStyle });
-    return createDom(
-      "div",
-      { class: css.pointLayout },
-      `
-        <div class="${css.pointSingleInfoBox}">${titleRow}</div>
-        <img src="${imgTaxicar}" class="${css.carIcon}" style="${carStyle}">
-      `
-    );
-  });
-  return () => {
-    return (
-      <GmapAdvancedMarkerView
-        position={vec2lnglat(props.position)}
-        content={contentRef.value}
-        registerOverlay={props.registerOverlay}
-      />
-    );
-  };
-});
-
-export const TaxiCar = defineSetup(function TaxiCar(
-  props: TaxiCarProps<AmapOverlay> | TaxiCarProps<GmapOverlay>
-) {
-  const payload = useMapSupplier();
-  return () => {
-    return createElement(payload.supplier === "gmap" ? GTaxiCar : ATaxiCar, {
-      attrs: props,
-    });
-  };
-});

package/src/business-components/TaxiCar/index.ts

@@ -1 +0,0 @@
-export * from "./TaxiCar";