gistda-sphere-react 1.0.0

package/src/components/Marker.tsx

@@ -0,0 +1,204 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type {
+  Icon,
+  Location,
+  MarkerOptions,
+  PopupOptions,
+  Range,
+  SphereMarker,
+} from "../types";
+
+export interface MarkerProps {
+  position: Location;
+  icon?: Icon;
+  title?: string;
+  detail?: string;
+  popup?: PopupOptions;
+  visibleRange?: Range;
+  clickable?: boolean;
+  draggable?: boolean;
+  zIndex?: number;
+  rotate?: number;
+  onClick?: (marker: SphereMarker) => void;
+  onDrag?: (marker: SphereMarker) => void;
+  onDrop?: (marker: SphereMarker, location: Location) => void;
+  onHover?: (marker: SphereMarker) => void;
+  onLeave?: (marker: SphereMarker) => void;
+}
+
+export interface MarkerRef {
+  getMarker(): SphereMarker | null;
+  togglePopup(show?: boolean): void;
+  setPosition(location: Location, animate?: boolean): void;
+  setRotation(angle: number): void;
+}
+
+export const Marker = forwardRef<MarkerRef, MarkerProps>(function Marker(
+  {
+    position,
+    icon,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    clickable,
+    draggable,
+    zIndex,
+    rotate,
+    onClick,
+    onDrag,
+    onDrop,
+    onHover,
+    onLeave,
+  },
+  ref
+) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const markerRef = useRef<SphereMarker | null>(null);
+  const callbacksRef = useRef({ onClick, onDrag, onDrop, onHover, onLeave });
+
+  useEffect(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop, onHover, onLeave };
+  }, [onClick, onDrag, onDrop, onHover, onLeave]);
+
+  useEffect(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+
+    const options: MarkerOptions = {};
+
+    if (icon) {
+      options.icon = icon;
+    }
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (popup) {
+      options.popup = popup;
+    }
+    if (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+    if (typeof rotate === "number") {
+      options.rotate = rotate;
+    }
+
+    const marker = new sphere.Marker(position, options);
+    markerRef.current = marker;
+
+    map.Overlays.add(marker);
+
+    const handleOverlayClick = (data: {
+      overlay: SphereMarker;
+      location: Location;
+    }) => {
+      if (data.overlay === marker) {
+        callbacksRef.current.onClick?.(marker);
+      }
+    };
+
+    const handleOverlayDrag = (overlay: SphereMarker) => {
+      if (overlay === marker) {
+        callbacksRef.current.onDrag?.(marker);
+      }
+    };
+
+    const handleOverlayDrop = (overlay: SphereMarker) => {
+      if (overlay === marker) {
+        const newLocation = marker.location() as Location;
+        callbacksRef.current.onDrop?.(marker, newLocation);
+      }
+    };
+
+    const handleOverlayHover = (overlay: SphereMarker) => {
+      if (overlay === marker) {
+        callbacksRef.current.onHover?.(marker);
+      }
+    };
+
+    const handleOverlayLeave = (overlay: SphereMarker) => {
+      if (overlay === marker) {
+        callbacksRef.current.onLeave?.(marker);
+      }
+    };
+
+    map.Event.bind("overlayClick", handleOverlayClick);
+    map.Event.bind("overlayDrag", handleOverlayDrag);
+    map.Event.bind("overlayDrop", handleOverlayDrop);
+    map.Event.bind("overlayHover", handleOverlayHover);
+    map.Event.bind("overlayLeave", handleOverlayLeave);
+
+    return () => {
+      map.Event.unbind("overlayClick", handleOverlayClick);
+      map.Event.unbind("overlayDrag", handleOverlayDrag);
+      map.Event.unbind("overlayDrop", handleOverlayDrop);
+      map.Event.unbind("overlayHover", handleOverlayHover);
+      map.Event.unbind("overlayLeave", handleOverlayLeave);
+      map.Overlays.remove(marker);
+      markerRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    position,
+    icon,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    clickable,
+    draggable,
+    zIndex,
+    rotate,
+  ]);
+
+  useEffect(() => {
+    if (markerRef.current && position) {
+      markerRef.current.location(position, false);
+    }
+  }, [position]);
+
+  useEffect(() => {
+    if (markerRef.current && typeof rotate === "number") {
+      markerRef.current.update({ rotate });
+    }
+  }, [rotate]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getMarker: () => markerRef.current,
+      togglePopup: (show?: boolean) => {
+        markerRef.current?.pop(show);
+      },
+      setPosition: (location: Location, animate = false) => {
+        markerRef.current?.location(location, animate);
+      },
+      setRotation: (angle: number) => {
+        markerRef.current?.update({ rotate: angle });
+      },
+    }),
+    []
+  );
+
+  return null;
+});
+
+export default Marker;

package/src/components/Polygon.tsx

@@ -0,0 +1,223 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type {
+  Bound,
+  GeometryOptions,
+  LineStyleType,
+  Location,
+  MarkerOptions,
+  PopupOptions,
+  Range,
+  SpherePolygon,
+} from "../types";
+
+export interface PolygonProps {
+  positions: Location[];
+  title?: string;
+  detail?: string;
+  label?: string;
+  labelOptions?: MarkerOptions;
+  popup?: PopupOptions;
+  visibleRange?: Range;
+  lineWidth?: number;
+  lineColor?: string;
+  fillColor?: string;
+  lineStyle?: LineStyleType;
+  pivot?: Location;
+  clickable?: boolean;
+  draggable?: boolean;
+  pointer?: boolean;
+  zIndex?: number;
+  editable?: boolean;
+  onClick?: (polygon: SpherePolygon) => void;
+  onDrag?: (polygon: SpherePolygon) => void;
+  onDrop?: (polygon: SpherePolygon) => void;
+}
+
+export interface PolygonRef {
+  getPolygon(): SpherePolygon | null;
+  togglePopup(show?: boolean, location?: Location): void;
+  getPivot(): Location | null;
+  getCentroid(): Location | null;
+  getBound(): Bound | null;
+  getArea(language?: string): number | string | null;
+  rotate(angle: number): void;
+  updateStyle(options: Partial<GeometryOptions>): void;
+  toGeoJSON(): object | null;
+}
+
+export const Polygon = forwardRef<PolygonRef, PolygonProps>(function Polygon(
+  {
+    positions,
+    title,
+    detail,
+    label,
+    labelOptions,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    pivot,
+    clickable,
+    draggable,
+    pointer,
+    zIndex,
+    editable,
+    onClick,
+    onDrag,
+    onDrop,
+  },
+  ref,
+) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const polygonRef = useRef<SpherePolygon | null>(null);
+  const callbacksRef = useRef({ onClick, onDrag, onDrop });
+
+  useEffect(() => {
+    callbacksRef.current = { onClick, onDrag, onDrop };
+  }, [onClick, onDrag, onDrop]);
+
+  useEffect(() => {
+    if (!(isReady && map && sphere) || positions.length < 3) {
+      return;
+    }
+
+    const options: GeometryOptions = {};
+
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (label) {
+      options.label = label;
+    }
+    if (labelOptions) {
+      options.labelOptions = labelOptions;
+    }
+    if (popup) {
+      options.popup = popup;
+    }
+    if (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof lineWidth === "number") {
+      options.lineWidth = lineWidth;
+    }
+    if (lineColor) {
+      options.lineColor = lineColor;
+    }
+    if (fillColor) {
+      options.fillColor = fillColor;
+    }
+    if (lineStyle) {
+      options.lineStyle = lineStyle;
+    }
+    if (pivot) {
+      options.pivot = pivot;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof pointer === "boolean") {
+      options.pointer = pointer;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+    if (typeof editable === "boolean") {
+      options.editable = editable;
+    }
+
+    const polygon = new sphere.Polygon(positions, options);
+    polygonRef.current = polygon;
+
+    map.Overlays.add(polygon);
+
+    const handleOverlayClick = (data: { overlay: SpherePolygon }) => {
+      if (data.overlay === polygon) {
+        callbacksRef.current.onClick?.(polygon);
+      }
+    };
+
+    const handleOverlayDrag = (overlay: SpherePolygon) => {
+      if (overlay === polygon) {
+        callbacksRef.current.onDrag?.(polygon);
+      }
+    };
+
+    const handleOverlayDrop = (overlay: SpherePolygon) => {
+      if (overlay === polygon) {
+        callbacksRef.current.onDrop?.(polygon);
+      }
+    };
+
+    map.Event.bind("overlayClick", handleOverlayClick);
+    map.Event.bind("overlayDrag", handleOverlayDrag);
+    map.Event.bind("overlayDrop", handleOverlayDrop);
+
+    return () => {
+      map.Event.unbind("overlayClick", handleOverlayClick);
+      map.Event.unbind("overlayDrag", handleOverlayDrag);
+      map.Event.unbind("overlayDrop", handleOverlayDrop);
+      map.Overlays.remove(polygon);
+      polygonRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    positions,
+    title,
+    detail,
+    label,
+    labelOptions,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    pivot,
+    clickable,
+    draggable,
+    pointer,
+    zIndex,
+    editable,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getPolygon: () => polygonRef.current,
+      togglePopup: (show?: boolean, location?: Location) => {
+        polygonRef.current?.pop(show, location);
+      },
+      getPivot: () => polygonRef.current?.pivot() ?? null,
+      getCentroid: () => polygonRef.current?.centroid() ?? null,
+      getBound: () => polygonRef.current?.bound() ?? null,
+      getArea: (language?: string) =>
+        polygonRef.current?.size(language) ?? null,
+      rotate: (angle: number) => {
+        polygonRef.current?.rotate(angle);
+      },
+      updateStyle: (options: Partial<GeometryOptions>) => {
+        polygonRef.current?.update(options);
+      },
+      toGeoJSON: () => polygonRef.current?.toJSON() ?? null,
+    }),
+    [],
+  );
+
+  return null;
+});
+
+export default Polygon;

package/src/components/Polyline.tsx

@@ -0,0 +1,211 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type {
+  Bound,
+  GeometryOptions,
+  LineStyleType,
+  Location,
+  MarkerOptions,
+  PopupOptions,
+  Range,
+  SpherePolyline,
+} from "../types";
+
+export interface PolylineProps {
+  positions: Location[];
+  title?: string;
+  detail?: string;
+  label?: string;
+  labelOptions?: MarkerOptions;
+  popup?: PopupOptions;
+  visibleRange?: Range;
+  lineWidth?: number;
+  lineColor?: string;
+  lineStyle?: LineStyleType;
+  pivot?: Location;
+  clickable?: boolean;
+  draggable?: boolean;
+  pointer?: boolean;
+  zIndex?: number;
+  onClick?: (polyline: SpherePolyline) => void;
+  onDrag?: (polyline: SpherePolyline) => void;
+  onDrop?: (polyline: SpherePolyline) => void;
+}
+
+export interface PolylineRef {
+  getPolyline(): SpherePolyline | null;
+  togglePopup(show?: boolean, location?: Location): void;
+  getPivot(): Location | null;
+  getCentroid(): Location | null;
+  getBound(): Bound | null;
+  getLength(language?: string): number | string | null;
+  rotate(angle: number): void;
+  updateStyle(options: Partial<GeometryOptions>): void;
+}
+
+export const Polyline = forwardRef<PolylineRef, PolylineProps>(
+  function Polyline(
+    {
+      positions,
+      title,
+      detail,
+      label,
+      labelOptions,
+      popup,
+      visibleRange,
+      lineWidth,
+      lineColor,
+      lineStyle,
+      pivot,
+      clickable,
+      draggable,
+      pointer,
+      zIndex,
+      onClick,
+      onDrag,
+      onDrop,
+    },
+    ref
+  ) {
+    const { map, isReady } = useMapContext();
+    const { sphere } = useSphereContext();
+    const polylineRef = useRef<SpherePolyline | null>(null);
+    const callbacksRef = useRef({ onClick, onDrag, onDrop });
+
+    useEffect(() => {
+      callbacksRef.current = { onClick, onDrag, onDrop };
+    }, [onClick, onDrag, onDrop]);
+
+    useEffect(() => {
+      if (!(isReady && map && sphere) || positions.length < 2) {
+        return;
+      }
+
+      const options: GeometryOptions = {};
+
+      if (title) {
+        options.title = title;
+      }
+      if (detail) {
+        options.detail = detail;
+      }
+      if (label) {
+        options.label = label;
+      }
+      if (labelOptions) {
+        options.labelOptions = labelOptions;
+      }
+      if (popup) {
+        options.popup = popup;
+      }
+      if (visibleRange) {
+        options.visibleRange = visibleRange;
+      }
+      if (typeof lineWidth === "number") {
+        options.lineWidth = lineWidth;
+      }
+      if (lineColor) {
+        options.lineColor = lineColor;
+      }
+      if (lineStyle) {
+        options.lineStyle = lineStyle;
+      }
+      if (pivot) {
+        options.pivot = pivot;
+      }
+      if (typeof clickable === "boolean") {
+        options.clickable = clickable;
+      }
+      if (typeof draggable === "boolean") {
+        options.draggable = draggable;
+      }
+      if (typeof pointer === "boolean") {
+        options.pointer = pointer;
+      }
+      if (typeof zIndex === "number") {
+        options.zIndex = zIndex;
+      }
+
+      const polyline = new sphere.Polyline(positions, options);
+      polylineRef.current = polyline;
+
+      map.Overlays.add(polyline);
+
+      const handleOverlayClick = (data: { overlay: SpherePolyline }) => {
+        if (data.overlay === polyline) {
+          callbacksRef.current.onClick?.(polyline);
+        }
+      };
+
+      const handleOverlayDrag = (overlay: SpherePolyline) => {
+        if (overlay === polyline) {
+          callbacksRef.current.onDrag?.(polyline);
+        }
+      };
+
+      const handleOverlayDrop = (overlay: SpherePolyline) => {
+        if (overlay === polyline) {
+          callbacksRef.current.onDrop?.(polyline);
+        }
+      };
+
+      map.Event.bind("overlayClick", handleOverlayClick);
+      map.Event.bind("overlayDrag", handleOverlayDrag);
+      map.Event.bind("overlayDrop", handleOverlayDrop);
+
+      return () => {
+        map.Event.unbind("overlayClick", handleOverlayClick);
+        map.Event.unbind("overlayDrag", handleOverlayDrag);
+        map.Event.unbind("overlayDrop", handleOverlayDrop);
+        map.Overlays.remove(polyline);
+        polylineRef.current = null;
+      };
+    }, [
+      isReady,
+      map,
+      sphere,
+      positions,
+      title,
+      detail,
+      label,
+      labelOptions,
+      popup,
+      visibleRange,
+      lineWidth,
+      lineColor,
+      lineStyle,
+      pivot,
+      clickable,
+      draggable,
+      pointer,
+      zIndex,
+    ]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getPolyline: () => polylineRef.current,
+        togglePopup: (show?: boolean, location?: Location) => {
+          polylineRef.current?.pop(show, location);
+        },
+        getPivot: () => polylineRef.current?.pivot() ?? null,
+        getCentroid: () => polylineRef.current?.centroid() ?? null,
+        getBound: () => polylineRef.current?.bound() ?? null,
+        getLength: (language?: string) =>
+          polylineRef.current?.size(language) ?? null,
+        rotate: (angle: number) => {
+          polylineRef.current?.rotate(angle);
+        },
+        updateStyle: (options: Partial<GeometryOptions>) => {
+          polylineRef.current?.update(options);
+        },
+      }),
+      []
+    );
+
+    return null;
+  }
+);
+
+export default Polyline;