gistda-sphere-react 1.0.0

package/src/components/Popup.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type { Location, PopupOptions, Size, SpherePopup } from "../types";
+
+export interface PopupProps {
+  position: Location;
+  title?: string;
+  detail?: string;
+  loadDetail?: (element: HTMLElement) => void;
+  html?: string;
+  loadHtml?: (element: HTMLElement) => void;
+  size?: Size;
+  closable?: boolean;
+  onClose?: (popup: SpherePopup) => void;
+}
+
+export interface PopupRef {
+  getPopup(): SpherePopup | null;
+  setPosition(location: Location): void;
+  setTitle(title: string): void;
+  setDetail(detail: string): void;
+  getElement(): HTMLElement | null;
+}
+
+export const Popup = forwardRef<PopupRef, PopupProps>(function Popup(
+  {
+    position,
+    title,
+    detail,
+    loadDetail,
+    html,
+    loadHtml,
+    size,
+    closable = true,
+    onClose,
+  },
+  ref
+) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const popupRef = useRef<SpherePopup | null>(null);
+  const onCloseRef = useRef(onClose);
+
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+
+    const options: PopupOptions = {
+      closable,
+    };
+
+    if (title) {
+      options.title = title;
+    }
+    if (detail) {
+      options.detail = detail;
+    }
+    if (loadDetail) {
+      options.loadDetail = loadDetail;
+    }
+    if (html) {
+      options.html = html;
+    }
+    if (loadHtml) {
+      options.loadHtml = loadHtml;
+    }
+    if (size) {
+      options.size = size;
+    }
+
+    const popup = new sphere.Popup(position, options);
+    popupRef.current = popup;
+
+    map.Overlays.add(popup);
+
+    const handlePopupClose = (closedPopup: SpherePopup) => {
+      if (closedPopup === popup) {
+        onCloseRef.current?.(popup);
+      }
+    };
+
+    map.Event.bind("popupClose", handlePopupClose);
+
+    return () => {
+      map.Event.unbind("popupClose", handlePopupClose);
+      map.Overlays.remove(popup);
+      popupRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    position,
+    title,
+    detail,
+    loadDetail,
+    html,
+    loadHtml,
+    size,
+    closable,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getPopup: () => popupRef.current,
+      setPosition: (location: Location) => {
+        popupRef.current?.location(location);
+      },
+      setTitle: (newTitle: string) => {
+        popupRef.current?.title(newTitle);
+      },
+      setDetail: (newDetail: string) => {
+        popupRef.current?.detail(newDetail);
+      },
+      getElement: () => popupRef.current?.element() ?? null,
+    }),
+    []
+  );
+
+  return null;
+});
+
+export default Popup;

package/src/components/Rectangle.tsx

@@ -0,0 +1,194 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type {
+  Bound,
+  GeometryOptions,
+  LineStyleType,
+  Location,
+  PopupOptions,
+  Range,
+  Size,
+  SphereRectangle,
+} from "../types";
+
+export interface RectangleProps {
+  position: Location;
+  size: Size | Location;
+  title?: string;
+  detail?: string;
+  popup?: PopupOptions;
+  visibleRange?: Range;
+  lineWidth?: number;
+  lineColor?: string;
+  fillColor?: string;
+  lineStyle?: LineStyleType;
+  clickable?: boolean;
+  draggable?: boolean;
+  editable?: boolean;
+  zIndex?: number;
+  onClick?: (rectangle: SphereRectangle) => void;
+  onDrag?: (rectangle: SphereRectangle) => void;
+  onDrop?: (rectangle: SphereRectangle) => void;
+}
+
+export interface RectangleRef {
+  getRectangle(): SphereRectangle | null;
+  togglePopup(show?: boolean, location?: Location): void;
+  getBound(): Bound | null;
+  getArea(language?: string): number | string | null;
+  updateStyle(options: Partial<GeometryOptions>): void;
+}
+
+export const Rectangle = forwardRef<RectangleRef, RectangleProps>(
+  function Rectangle(
+    {
+      position,
+      size,
+      title,
+      detail,
+      popup,
+      visibleRange,
+      lineWidth,
+      lineColor,
+      fillColor,
+      lineStyle,
+      clickable,
+      draggable,
+      editable,
+      zIndex,
+      onClick,
+      onDrag,
+      onDrop,
+    },
+    ref
+  ) {
+    const { map, isReady } = useMapContext();
+    const { sphere } = useSphereContext();
+    const rectangleRef = useRef<SphereRectangle | null>(null);
+    const callbacksRef = useRef({ onClick, onDrag, onDrop });
+
+    useEffect(() => {
+      callbacksRef.current = { onClick, onDrag, onDrop };
+    }, [onClick, onDrag, onDrop]);
+
+    useEffect(() => {
+      if (!(isReady && map && sphere)) {
+        return;
+      }
+
+      const options: GeometryOptions = {};
+
+      if (title) {
+        options.title = title;
+      }
+      if (detail) {
+        options.detail = detail;
+      }
+      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 (typeof clickable === "boolean") {
+        options.clickable = clickable;
+      }
+      if (typeof draggable === "boolean") {
+        options.draggable = draggable;
+      }
+      if (typeof editable === "boolean") {
+        options.editable = editable;
+      }
+      if (typeof zIndex === "number") {
+        options.zIndex = zIndex;
+      }
+
+      const rectangle = new sphere.Rectangle(position, size, options);
+      rectangleRef.current = rectangle;
+
+      map.Overlays.add(rectangle);
+
+      const handleOverlayClick = (data: { overlay: SphereRectangle }) => {
+        if (data.overlay === rectangle) {
+          callbacksRef.current.onClick?.(rectangle);
+        }
+      };
+
+      const handleOverlayDrag = (overlay: SphereRectangle) => {
+        if (overlay === rectangle) {
+          callbacksRef.current.onDrag?.(rectangle);
+        }
+      };
+
+      const handleOverlayDrop = (overlay: SphereRectangle) => {
+        if (overlay === rectangle) {
+          callbacksRef.current.onDrop?.(rectangle);
+        }
+      };
+
+      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(rectangle);
+        rectangleRef.current = null;
+      };
+    }, [
+      isReady,
+      map,
+      sphere,
+      position,
+      size,
+      title,
+      detail,
+      popup,
+      visibleRange,
+      lineWidth,
+      lineColor,
+      fillColor,
+      lineStyle,
+      clickable,
+      draggable,
+      editable,
+      zIndex,
+    ]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getRectangle: () => rectangleRef.current,
+        togglePopup: (show?: boolean, location?: Location) => {
+          rectangleRef.current?.pop(show, location);
+        },
+        getBound: () => rectangleRef.current?.bound() ?? null,
+        getArea: (language?: string) =>
+          rectangleRef.current?.size(language) ?? null,
+        updateStyle: (options: Partial<GeometryOptions>) => {
+          rectangleRef.current?.update(options);
+        },
+      }),
+      []
+    );
+
+    return null;
+  }
+);
+
+export default Rectangle;

package/src/components/SphereMap.tsx

@@ -0,0 +1,315 @@
+import {
+  type CSSProperties,
+  forwardRef,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { MapProvider } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type {
+  Bound,
+  FilterType,
+  FlyToOptions,
+  Location,
+  MapOptions,
+  Range,
+  SphereMap as SphereMapInstance,
+} from "../types";
+
+export interface SphereMapProps {
+  children?: ReactNode;
+  zoom?: number;
+  zoomRange?: Range;
+  center?: Location;
+  language?: string;
+  input?: boolean;
+  lastView?: boolean;
+  ui?: "Full" | "Mobile" | "None";
+  filter?: FilterType;
+  rotate?: number;
+  pitch?: number;
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+  onReady?: (map: SphereMapInstance) => void;
+  onZoom?: (zoom: number) => void;
+  onLocation?: (location: Location) => void;
+  onClick?: (location: Location) => void;
+  onDoubleClick?: (location: Location) => void;
+  onRotate?: (angle: number) => void;
+  onPitch?: (angle: number) => void;
+  onDrag?: () => void;
+  onDrop?: () => void;
+  onIdle?: () => void;
+  onMouseMove?: (location: Location) => void;
+  onError?: (error: Error) => void;
+}
+
+export interface SphereMapRef {
+  getMap(): SphereMapInstance | null;
+  setZoom(zoom: number, animate?: boolean): void;
+  setCenter(location: Location, animate?: boolean): void;
+  setBound(bound: Bound, options?: object): void;
+  goTo(target: FlyToOptions, animate?: boolean): void;
+  setRotate(angle: number, animate?: boolean): void;
+  setPitch(angle: number): void;
+  setFilter(filter: FilterType): void;
+  resize(): void;
+  repaint(): void;
+}
+
+export const SphereMap = forwardRef<SphereMapRef, SphereMapProps>(
+  function SphereMap(
+    {
+      children,
+      zoom = 7,
+      zoomRange,
+      center,
+      language = "th",
+      input = true,
+      lastView = false,
+      ui,
+      filter,
+      rotate,
+      pitch,
+      className,
+      style,
+      id,
+      onReady,
+      onZoom,
+      onLocation,
+      onClick,
+      onDoubleClick,
+      onRotate,
+      onPitch,
+      onDrag,
+      onDrop,
+      onIdle,
+      onMouseMove,
+      onError,
+    },
+    ref
+  ) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const mapRef = useRef<SphereMapInstance | null>(null);
+    const [isReady, setIsReady] = useState(false);
+    const { sphere, isLoaded, registerMap, unregisterMap } = useSphereContext();
+
+    const callbacksRef = useRef({
+      onReady,
+      onZoom,
+      onLocation,
+      onClick,
+      onDoubleClick,
+      onRotate,
+      onPitch,
+      onDrag,
+      onDrop,
+      onIdle,
+      onMouseMove,
+      onError,
+    });
+
+    useEffect(() => {
+      callbacksRef.current = {
+        onReady,
+        onZoom,
+        onLocation,
+        onClick,
+        onDoubleClick,
+        onRotate,
+        onPitch,
+        onDrag,
+        onDrop,
+        onIdle,
+        onMouseMove,
+        onError,
+      };
+    });
+
+    const initialPropsRef = useRef({
+      zoom,
+      zoomRange,
+      center,
+      language,
+      input,
+      lastView,
+      ui,
+      filter,
+      rotate,
+      pitch,
+    });
+
+    useEffect(() => {
+      if (!(isLoaded && sphere && containerRef.current)) {
+        return;
+      }
+
+      const initialProps = initialPropsRef.current;
+
+      try {
+        const options: MapOptions = {
+          placeholder: containerRef.current,
+          zoom: initialProps.zoom,
+          language: initialProps.language,
+          input: initialProps.input,
+          lastView: initialProps.lastView,
+        };
+
+        if (initialProps.zoomRange) {
+          options.zoomRange = initialProps.zoomRange;
+        }
+
+        if (initialProps.center) {
+          options.location = initialProps.center;
+        }
+
+        if (initialProps.ui) {
+          options.ui = initialProps.ui;
+        }
+
+        const map = new sphere.Map(options);
+        mapRef.current = map;
+
+        map.Event.bind("ready", () => {
+          setIsReady(true);
+          registerMap(map);
+
+          if (initialProps.filter && window.sphere) {
+            map.enableFilter(window.sphere.Filter[initialProps.filter]);
+          }
+
+          if (typeof initialProps.rotate === "number") {
+            map.rotate(initialProps.rotate, false);
+          }
+
+          if (typeof initialProps.pitch === "number") {
+            map.pitch(initialProps.pitch);
+          }
+
+          callbacksRef.current.onReady?.(map);
+        });
+
+        map.Event.bind("zoom", () => {
+          const currentZoom = map.zoom() as number;
+          callbacksRef.current.onZoom?.(currentZoom);
+        });
+
+        map.Event.bind("location", () => {
+          const currentLocation = map.location() as Location;
+          callbacksRef.current.onLocation?.(currentLocation);
+        });
+
+        map.Event.bind("click", (location: Location) => {
+          callbacksRef.current.onClick?.(location);
+        });
+
+        map.Event.bind("doubleClick", (location: Location) => {
+          callbacksRef.current.onDoubleClick?.(location);
+        });
+
+        map.Event.bind("rotate", () => {
+          const angle = map.rotate() as number;
+          callbacksRef.current.onRotate?.(angle);
+        });
+
+        map.Event.bind("pitch", () => {
+          const angle = map.pitch() as number;
+          callbacksRef.current.onPitch?.(angle);
+        });
+
+        map.Event.bind("drag", () => {
+          callbacksRef.current.onDrag?.();
+        });
+
+        map.Event.bind("drop", () => {
+          callbacksRef.current.onDrop?.();
+        });
+
+        map.Event.bind("idle", () => {
+          callbacksRef.current.onIdle?.();
+        });
+
+        map.Event.bind("mousemove", (location: Location) => {
+          callbacksRef.current.onMouseMove?.(location);
+        });
+
+        map.Event.bind("error", (error: Error) => {
+          callbacksRef.current.onError?.(error);
+        });
+      } catch (error) {
+        callbacksRef.current.onError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
+
+      return () => {
+        unregisterMap();
+        mapRef.current = null;
+        setIsReady(false);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoaded, sphere, registerMap, unregisterMap]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getMap: () => mapRef.current,
+        setZoom: (newZoom: number, animate = true) => {
+          mapRef.current?.zoom(newZoom, animate);
+        },
+        setCenter: (location: Location, animate = true) => {
+          mapRef.current?.location(location, animate);
+        },
+        setBound: (bound: Bound, options?: object) => {
+          mapRef.current?.bound(bound, options);
+        },
+        goTo: (target: FlyToOptions, animate = true) => {
+          mapRef.current?.goTo(target, animate);
+        },
+        setRotate: (angle: number, animate = true) => {
+          mapRef.current?.rotate(angle, animate);
+        },
+        setPitch: (angle: number) => {
+          mapRef.current?.pitch(angle);
+        },
+        setFilter: (newFilter: FilterType) => {
+          if (mapRef.current && window.sphere) {
+            mapRef.current.enableFilter(window.sphere.Filter[newFilter]);
+          }
+        },
+        resize: () => {
+          mapRef.current?.resize();
+        },
+        repaint: () => {
+          mapRef.current?.repaint();
+        },
+      }),
+      []
+    );
+
+    const containerStyle: CSSProperties = {
+      width: "100%",
+      height: "100%",
+      ...style,
+    };
+
+    return (
+      <div
+        className={className}
+        id={id}
+        ref={containerRef}
+        style={containerStyle}
+      >
+        <MapProvider isReady={isReady} map={mapRef.current}>
+          {isReady && children}
+        </MapProvider>
+      </div>
+    );
+  }
+);
+
+export default SphereMap;

package/src/components/index.ts

@@ -0,0 +1,18 @@
+export type { CircleProps, CircleRef } from "./Circle";
+export { Circle } from "./Circle";
+export type { DotProps, DotRef } from "./Dot";
+export { Dot } from "./Dot";
+export type { LayerProps } from "./Layer";
+export { Layer } from "./Layer";
+export type { MarkerProps, MarkerRef } from "./Marker";
+export { Marker } from "./Marker";
+export type { PolygonProps, PolygonRef } from "./Polygon";
+export { Polygon } from "./Polygon";
+export type { PolylineProps, PolylineRef } from "./Polyline";
+export { Polyline } from "./Polyline";
+export type { PopupProps, PopupRef } from "./Popup";
+export { Popup } from "./Popup";
+export type { RectangleProps, RectangleRef } from "./Rectangle";
+export { Rectangle } from "./Rectangle";
+export type { SphereMapProps, SphereMapRef } from "./SphereMap";
+export { default as Map, SphereMap } from "./SphereMap";

package/src/context/MapContext.tsx

@@ -0,0 +1,41 @@
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+import type { SphereMap } from "../types";
+
+interface MapContextValue {
+  map: SphereMap | null;
+  isReady: boolean;
+}
+
+const MapContext = createContext<MapContextValue | null>(null);
+
+interface MapProviderProps {
+  map: SphereMap | null;
+  isReady: boolean;
+  children: ReactNode;
+}
+
+export function MapProvider({
+  map,
+  isReady,
+  children,
+}: MapProviderProps): ReactNode {
+  const value = useMemo<MapContextValue>(
+    () => ({ map, isReady }),
+    [map, isReady]
+  );
+
+  return <MapContext.Provider value={value}>{children}</MapContext.Provider>;
+}
+
+export function useMapContext(): MapContextValue {
+  const context = useContext(MapContext);
+
+  if (!context) {
+    throw new Error("useMapContext must be used within a SphereMap component");
+  }
+
+  return context;
+}
+
+export { MapContext };
+export type { MapContextValue };