@heycar/heycars-map 0.3.7 → 0.3.8

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

@@ -1,453 +0,0 @@
-import { ref, watch } from "vue-demi";
-import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
-import { useGeoLocation } from "../../hooks/useGeoLocation";
-import { MapMountedProps, onMapMounted } from "../../hooks/useMap";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import type { MROP } from "../../hooks/useOverlay";
-import { defineLagecySetup, defineSetup } from "../../types/helper";
-import type { DriverStatus, Place, Point } from "../../types/interface";
-import { place2point } from "../../utils/transform";
-import { DrivingLine } from "../DrivingLine";
-import { DrivingRoute, DrivingRouteRenderProps } from "../DrivingRoute";
-import { PassengerCircle } from "../PassengerCircle";
-import { PlaceCircle } from "../PlaceCircle";
-import { StartEndPoint } from "../StartEndPoint";
-import { TaxiCar } from "../TaxiCar";
-import { WalkingLine } from "../WalkingLine";
-import { WalkingRoute } from "../WalkingRoute";
-import { WaveCircle } from "../WaveCircle";
-
-const STATUS_NEED_CAR_POSITION: DriverStatus[] = [
-  "book-driverStartService",
-  "dispatched",
-  "driverStartService",
-  "inService",
-  "driverArrived",
-];
-
-type SectionDispatchingProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    title: string;
-    from: Place;
-  };
-const SectionDispatching = defineSetup((props: SectionDispatchingProps, { emit }) => {
-  useMapLog(props, "SectionDispatching");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { from: fromPlace, title, registerOverlay } = props;
-    const from = place2point(fromPlace);
-    return (
-      <div>
-        <StartEndPoint
-          type="start"
-          position={from}
-          title={title}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <WaveCircle position={from} log={props.log} />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
-      </div>
-    );
-  };
-});
-
-type SectionDriverStartServiceProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    passengerPosition: Point;
-    carPosition: Point;
-    from: Place;
-    renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
-  };
-const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps, { emit }) => {
-  useMapLog(props, "SectionDriverStartService");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { from: fromPlace, carPosition, passengerPosition, renderTitle, registerOverlay } = props;
-    const from = place2point(fromPlace);
-    return (
-      <div>
-        <StartEndPoint
-          type="start"
-          position={from}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
-        <DrivingRoute
-          from={carPosition}
-          to={from}
-          log={props.log}
-          render={({ path, distance, duration }) => [
-            <DrivingLine path={path} log={props.log} />,
-            <TaxiCar
-              position={carPosition}
-              title={renderTitle({ distance, duration })}
-              log={props.log}
-            />,
-          ]}
-        />
-        <WalkingRoute
-          from={passengerPosition}
-          to={from}
-          log={props.log}
-          render={({ path }) => <WalkingLine path={path} log={props.log} />}
-        />
-        <PassengerCircle
-          position={passengerPosition}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-      </div>
-    );
-  };
-});
-
-type SectionBookDispatchedProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    passengerPosition: Point;
-    from: Place;
-    // @example 司机位置将在临近出发时间展示
-    title: string;
-  };
-const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps, { emit }) => {
-  useMapLog(props, "SectionBookDispatched");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { from: fromPlace, passengerPosition, title, registerOverlay } = props;
-    const from = place2point(fromPlace);
-    return (
-      <div>
-        <StartEndPoint
-          type="start"
-          position={from}
-          title={title}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
-        <PassengerCircle
-          position={passengerPosition}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-      </div>
-    );
-  };
-});
-
-type SectionDriverArrivedProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    from: Place;
-    carPosition: Point;
-    passengerPosition: Point;
-    // @example 司机已等待 *00:35*
-    title: string;
-  };
-const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps, { emit }) => {
-  useMapLog(props, "SectionDriverArrived");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { from: fromPlace, carPosition, passengerPosition, title, registerOverlay } = props;
-    const from = place2point(fromPlace);
-    return (
-      <div>
-        <TaxiCar
-          position={carPosition}
-          title={title}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <StartEndPoint
-          type="start"
-          position={from}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
-        <WalkingRoute
-          from={passengerPosition}
-          to={from}
-          log={props.log}
-          render={({ path }) => <WalkingLine path={path} />}
-        />
-        <PassengerCircle
-          position={passengerPosition}
-          size="small"
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-      </div>
-    );
-  };
-});
-
-type SectionInServiceProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    to: Place;
-    carPosition: Point;
-    renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
-  };
-const SectionInService = defineSetup((props: SectionInServiceProps, { emit }) => {
-  useMapLog(props, "SectionInService");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { to: toPlace, carPosition, renderTitle, registerOverlay } = props;
-    const to = place2point(toPlace);
-    return (
-      <div>
-        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} log={props.log} />
-        <PlaceCircle
-          position={carPosition}
-          label="'WebSter Dental Plaza'"
-          hideIcon
-          log={props.log}
-        />
-        <DrivingRoute
-          from={carPosition}
-          to={to}
-          log={props.log}
-          render={({ path, distance, duration }) => [
-            <DrivingLine path={path} log={props.log} />,
-            <TaxiCar
-              position={carPosition}
-              title={renderTitle({ distance, duration })}
-              registerOverlay={registerOverlay}
-              log={props.log}
-            />,
-          ]}
-        />
-      </div>
-    );
-  };
-});
-
-type SectionCanceledProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    from: Place;
-    to: Place;
-  };
-const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
-  useMapLog(props, "SectionCanceled");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { from: fromPlace, to: toPlace, registerOverlay } = props;
-    const from = place2point(fromPlace);
-    const to = place2point(toPlace);
-    return (
-      <div>
-        <StartEndPoint
-          type="start"
-          position={from}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} log={props.log} />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
-        <PlaceCircle position={to} label={toPlace.name} hideIcon log={props.log} />
-      </div>
-    );
-  };
-});
-
-export type SectionEndServiceProps = MROP &
-  MapLogProps &
-  MapMountedProps & {
-    from: Place;
-    to: Place;
-  };
-export const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
-  useMapLog(props, "SectionEndService");
-  onMapMounted(() => emit("mapMounted"));
-  return () => {
-    const { from: fromPlace, to: toPlace, registerOverlay } = props;
-    const from = place2point(fromPlace);
-    const to = place2point(toPlace);
-    return (
-      <div>
-        <StartEndPoint
-          type="start"
-          position={from}
-          registerOverlay={registerOverlay}
-          log={props.log}
-        />
-        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} log={props.log} />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
-        <PlaceCircle position={to} label={toPlace.name} hideIcon log={props.log} />
-        <DrivingRoute
-          from={from}
-          to={to}
-          render={({ path }) => <DrivingLine path={path} done log={props.log} />}
-          log={props.log}
-        />
-      </div>
-    );
-  };
-});
-
-export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
-  Required<MROP> &
-  MapLogProps & {
-    from: Place;
-    to: Place;
-    // @example 正在为您搜索附近司机
-    dispatchingTitle: string;
-    bookDispatchingTitle: string;
-    bookDispatchedTitle: string;
-    driverArrivedTitle: string;
-    driverStatus: DriverStatus;
-    interval: number;
-    renderStartSerivceTitle: (titleProps: { distance: number; duration: number }) => string;
-    renderInServiceTitle: (titleProps: { distance: number; duration: number }) => string;
-    getDriverPosition: () => Promise<Point>;
-  };
-export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServiceMapProps) => {
-  useMapLog(props, "BusinessTaxiServiceMap");
-  const {
-    from,
-    interval,
-    registerOverlay,
-    mapRef,
-    getDriverPosition,
-    renderStartSerivceTitle,
-    renderInServiceTitle,
-  } = props;
-  const { setFitView } = registerOverlay;
-  const { geoPosition } = useGeoLocation({ geoDefaultPosition: place2point(from) });
-  const carPositionRef = ref<Point>(place2point(props.from));
-  watch(
-    () => props.driverStatus,
-    (status, _, onCleanup) => {
-      if (!STATUS_NEED_CAR_POSITION.includes(status)) return;
-      const timer = setInterval(() => {
-        getDriverPosition().then((pos) => (carPositionRef.value = pos));
-      }, interval);
-      onCleanup(() => clearInterval(timer));
-    },
-    { immediate: true }
-  );
-  return () => {
-    const {
-      driverStatus,
-      from,
-      to,
-      dispatchingTitle,
-      bookDispatchingTitle,
-      bookDispatchedTitle,
-      driverArrivedTitle,
-    } = props;
-    const carPosition = carPositionRef.value;
-    return (
-      <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef} log={props.log}>
-        {driverStatus === "dispatching" ? (
-          <SectionDispatching
-            from={from}
-            title={dispatchingTitle}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : driverStatus === "book-dispatching" ? (
-          <SectionDispatching
-            from={from}
-            title={bookDispatchingTitle}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : driverStatus === "dispatched" ||
-          driverStatus === "driverStartService" ||
-          driverStatus === "book-driverStartService" ? (
-          <SectionDriverStartService
-            from={from}
-            carPosition={carPosition}
-            passengerPosition={geoPosition.value}
-            renderTitle={renderStartSerivceTitle}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : driverStatus === "book-dispatched" ? (
-          <SectionBookDispatched
-            from={from}
-            passengerPosition={geoPosition.value}
-            title={bookDispatchedTitle}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : driverStatus === "inService" ? (
-          <SectionInService
-            to={to}
-            carPosition={carPosition}
-            renderTitle={renderInServiceTitle}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : driverStatus === "driverArrived" ? (
-          <SectionDriverArrived
-            from={from}
-            carPosition={carPosition}
-            passengerPosition={geoPosition.value}
-            title={driverArrivedTitle}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : driverStatus === "canceled" || driverStatus === "canceling" ? (
-          <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} log={props.log} />
-        ) : driverStatus === "endService" ||
-          driverStatus === "completed" ||
-          driverStatus === "banlanceRefund" ||
-          driverStatus === "waitBanlanceRefund" ||
-          driverStatus === "rechargePayed" ||
-          driverStatus === "waitRechargePay" ||
-          driverStatus === "payed" ||
-          driverStatus === "waitpay" ||
-          driverStatus === "refund" ||
-          driverStatus === "confirmed" ? (
-          <SectionEndService
-            from={from}
-            to={to}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        ) : (
-          // 匹配不到就显示灰色路线
-          <SectionEndService
-            from={from}
-            to={to}
-            registerOverlay={registerOverlay}
-            onMapMounted={setFitView}
-            log={props.log}
-          />
-        )}
-      </HeycarMap>
-    );
-  };
-}).props([
-  "log",
-  "bookDispatchedTitle",
-  "bookDispatchingTitle",
-  "dispatchingTitle",
-  "driverArrivedTitle",
-  "driverStatus",
-  "fallback",
-  "from",
-  "getDriverPosition",
-  "interval",
-  "loading",
-  "mapRef",
-  "renderInServiceTitle",
-  "renderStartSerivceTitle",
-  "to",
-  "registerOverlay",
-]);

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

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

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

@@ -1,10 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const drivingPath = style({
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  outlineWidth: "10px",
-  outlineStyle: "dashed",
-  outlineColor: "red",
-  outlineOffset: [2, 2],
-});

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

@@ -1,135 +0,0 @@
-import { computed } from "vue-demi";
-import { AmapPolyline } from "../../components/AmapPolyline";
-import { GmapPolyline } from "../../components/GmapPolyline";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { useMapSupplier } from "../../hooks/useMapSupplier";
-import { createElement, defineSetup } from "../../types/helper";
-import { vec2lnglat } from "../../utils/transform";
-
-export interface DrivingLineProps extends MapLogProps {
-  done?: boolean;
-  path: [number, number][];
-}
-export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLineProps) {
-  useMapLog(props, "ADrivingLine");
-  return () => {
-    const vw = window.innerWidth * 0.01;
-    const strokeWidth = 2.5 * vw;
-    const borderWidth = 0.35 * vw;
-    const dirWidth = 0.6 * vw;
-    const outlineWidth = 1 * vw;
-    const dashLength = 0.75 * vw;
-    const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
-    const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
-    const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
-    return (
-      <div>
-        <AmapPolyline
-          path={props.path}
-          strokeWeight={strokeWidth + 2 * borderWidth + 2 * outlineWidth}
-          strokeOpacity={1}
-          strokeColor={strokeColorOuter}
-          lineJoin={"round"}
-          lineCap={"round"}
-        />
-        <AmapPolyline
-          path={props.path}
-          strokeWeight={strokeWidth + 2 * borderWidth}
-          strokeOpacity={1}
-          strokeColor={strokeColorBorder}
-          lineJoin={"round"}
-          lineCap={"round"}
-          strokeStyle={"dashed"}
-          strokeDasharray={[dashLength, dashLength * 0.5]}
-        />
-        <AmapPolyline
-          path={props.path}
-          strokeWeight={strokeWidth}
-          strokeOpacity={1}
-          strokeColor={strokeColorInner}
-          lineJoin={"round"}
-          lineCap={"round"}
-        />
-        <AmapPolyline
-          showDir
-          path={props.path}
-          strokeWeight={strokeWidth + 2 * dirWidth}
-          strokeOpacity={1}
-          strokeColor={"transparent"}
-          lineJoin={"round"}
-          lineCap={"round"}
-        />
-      </div>
-    );
-  };
-});
-
-export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLineProps) {
-  useMapLog(props, "ADrivingLine");
-  const pathRef = computed(() => props.path.map(vec2lnglat));
-  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 strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
-    const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
-    const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
-    return (
-      <div>
-        <GmapPolyline
-          path={pathRef.value}
-          strokeWeight={strokeWidth + 2 * borderWidth + 2 * outlineWidth}
-          strokeOpacity={1}
-          strokeColor={strokeColorOuter}
-        />
-        <GmapPolyline
-          path={pathRef.value}
-          icons={[
-            {
-              icon: {
-                path: `M 0,-0.5 0,0.5`,
-                strokeWeight: strokeWidth + 2 * borderWidth,
-                strokeColor: strokeColorBorder,
-                fillColor: strokeColorBorder,
-                scale: 1,
-              },
-              repeat: `${strokeWidth}px`,
-              offset: `${strokeWidth / 2}px`,
-            },
-          ]}
-        />
-        <GmapPolyline
-          path={pathRef.value}
-          strokeWeight={strokeWidth}
-          strokeOpacity={1}
-          strokeColor={strokeColorInner}
-          icons={[
-            {
-              icon: {
-                path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
-                strokeColor: "white",
-                strokeWeight: dirStrokeWeight,
-                // todo: 3 maybe not responsive
-                scale: 3,
-              },
-              repeat: `${repeat}px`,
-            },
-          ]}
-        />
-      </div>
-    );
-  };
-});
-
-export const DrivingLine = defineSetup(function DrivingLine(props: DrivingLineProps) {
-  const payload = useMapSupplier();
-  return () => {
-    if (!props.path.length) return null;
-    return createElement(payload.supplier === "gmap" ? GDrivingLine : ADrivingLine, {
-      attrs: props,
-    });
-  };
-});

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

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

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

@@ -1,52 +0,0 @@
-import { reactive, toRefs, VNodeData } from "vue-demi";
-import {
-  useADrivingRoute,
-  UseDrivingRouteProps,
-  useGDrivingRoute,
-} from "../../hooks/useDrivingRoute";
-import { useAmap, useGmap } from "../../hooks/useMap";
-import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { useMapSupplier } from "../../hooks/useMapSupplier";
-import { createElement, defineSetup, VNodeChild } from "../../types/helper";
-import type { Point } from "../../types/interface";
-
-export type DrivingRouteRenderProps = {
-  path: Point[];
-  angle?: number;
-  distance: number;
-  duration: number;
-};
-export interface DrivingRouteProps extends UseDrivingRouteProps, MapLogProps {
-  render?: (props: DrivingRouteRenderProps) => VNodeChild;
-}
-export const ADrivingRoute = defineSetup(function DrivingRoute(
-  props: DrivingRouteProps,
-  { slots }
-) {
-  useMapLog(props, "ADrivingRoute");
-  const map = useAmap();
-  const { path, distance, duration } = toRefs(useADrivingRoute(props));
-  const angle = useAmapAngle(reactive({ path, map }));
-  return () => <div>{slots.render?.(reactive({ path, angle, distance, duration }))}</div>;
-});
-
-export const GDrivingRoute = defineSetup(function DrivingRoute(
-  props: DrivingRouteProps,
-  { slots }
-) {
-  useMapLog(props, "GDrivingRoute");
-  const map = useGmap();
-  const { path, distance, duration } = toRefs(useGDrivingRoute(props));
-  const angle = useGmapAngle(reactive({ path, map }));
-  return () => <div>{slots.render?.(reactive({ path, angle, distance, duration }))}</div>;
-});
-
-export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps, { slots }) {
-  const { supplier } = useMapSupplier();
-  return () =>
-    createElement(supplier === "gmap" ? GDrivingRoute : ADrivingRoute, {
-      attrs: props,
-      scopedSlots: slots as VNodeData["scopedSlots"],
-    });
-});

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

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

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

@@ -1,22 +0,0 @@
-import { onMapMounted, useMap } from "../../hooks/useMap";
-import { useMapFitView, UseMapFitViewOutput, UseMapFitViewProps } from "../../hooks/useMapFitView";
-import type { AmapOverlay, GmapOverlay, MROP } from "../../hooks/useOverlay";
-import { defineSetup, VNodeChild } from "../../types/helper";
-
-type FitViewRenderProps = UseMapFitViewOutput<AmapOverlay> | UseMapFitViewOutput<GmapOverlay>;
-export interface FitViewProps extends Omit<UseMapFitViewProps, "mapRef"> {
-  render?: (props: FitViewRenderProps) => VNodeChild;
-}
-export const FitView = defineSetup(function FitView(props: FitViewProps, { slots }) {
-  const mapRef = useMap();
-  const ctx = useMapFitView({ ...props, mapRef });
-  return () => <div>{slots.render?.(ctx)}</div>;
-});
-
-export type FitViewOnceProps = Required<MROP>;
-export const FitViewOnce = defineSetup(function FitViewOnce(props: FitViewOnceProps, { slots }) {
-  const { registerOverlay } = props;
-  const { setFitView } = registerOverlay;
-  onMapMounted(setFitView);
-  return () => <div>{slots.default?.()}</div>;
-});

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

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