gistda-sphere-react 1.0.0

package/src/__tests__/useTags.test.tsx

@@ -0,0 +1,179 @@
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SphereProvider, useSphereContext } from "../context/SphereContext";
+import { TAG_CATEGORIES, useTags } from "../hooks/useTags";
+import { createMockSphereApi } from "./setup";
+
+describe("useTags", () => {
+  const { mockSphere, mockMap } = createMockSphereApi();
+  const map = mockMap as any;
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    vi.clearAllMocks();
+
+    map.Tags = {
+      set: vi.fn(),
+      add: vi.fn(),
+      remove: vi.fn(),
+      clear: vi.fn(),
+      list: vi.fn().mockReturnValue(["อาหารไทย", "ธนาคาร"]),
+      size: vi.fn().mockReturnValue(2),
+      enablePopup: vi.fn(),
+      language: vi.fn(),
+    };
+  });
+
+  function MapRegistrar({ mapInstance }: { mapInstance: any }) {
+    const { registerMap } = useSphereContext();
+    useEffect(() => {
+      registerMap(mapInstance);
+    }, [mapInstance, registerMap]);
+    return null;
+  }
+
+  function createWrapper() {
+    return function Wrapper({ children }: { children: ReactNode }) {
+      return (
+        <SphereProvider apiKey="test-key">
+          <MapRegistrar mapInstance={map} />
+          {children}
+        </SphereProvider>
+      );
+    };
+  }
+
+  describe("tag operations", () => {
+    it("delegates add to Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.add("อาหารไทย");
+
+      expect(map.Tags.add).toHaveBeenCalledWith("อาหารไทย", undefined);
+    });
+
+    it("delegates set to Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.set("ธนาคาร", { source: "default" });
+
+      expect(map.Tags.set).toHaveBeenCalledWith("ธนาคาร", {
+        source: "default",
+      });
+    });
+
+    it("delegates remove to Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.remove("อาหารไทย");
+
+      expect(map.Tags.remove).toHaveBeenCalledWith("อาหารไทย");
+    });
+
+    it("delegates clear to Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.clear();
+
+      expect(map.Tags.clear).toHaveBeenCalled();
+    });
+  });
+
+  describe("tag queries", () => {
+    it("returns list from Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.list()).toEqual(["อาหารไทย", "ธนาคาร"]);
+    });
+
+    it("returns size from Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.size()).toBe(2);
+    });
+  });
+
+  describe("tag settings", () => {
+    it("delegates enablePopup to Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.enablePopup(true);
+
+      expect(map.Tags.enablePopup).toHaveBeenCalledWith(true);
+    });
+
+    it("delegates setLanguage to Tags API", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setLanguage("en");
+
+      expect(map.Tags.language).toHaveBeenCalledWith("en");
+    });
+  });
+
+  describe("TAG_CATEGORIES constant", () => {
+    it("has Food & Dining category with Thai tag IDs", () => {
+      const foodCategory = TAG_CATEGORIES.find(
+        (c) => c.name === "Food & Dining"
+      );
+      expect(foodCategory).toBeDefined();
+      expect(foodCategory?.tags[0]?.id).toBe("อาหารไทย");
+    });
+
+    it("has Services category", () => {
+      const servicesCategory = TAG_CATEGORIES.find(
+        (c) => c.name === "Services"
+      );
+      expect(servicesCategory).toBeDefined();
+      expect(servicesCategory?.tags[0]?.id).toBe("ธนาคาร");
+    });
+
+    it("has Tourism category", () => {
+      const tourismCategory = TAG_CATEGORIES.find((c) => c.name === "Tourism");
+      expect(tourismCategory).toBeDefined();
+    });
+  });
+
+  describe("when map is not ready", () => {
+    function createNotReadyWrapper() {
+      return function Wrapper({ children }: { children: ReactNode }) {
+        return <SphereProvider apiKey="test-key">{children}</SphereProvider>;
+      };
+    }
+
+    it("returns empty list when map is not ready", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createNotReadyWrapper(),
+      });
+
+      expect(result.current.list()).toEqual([]);
+    });
+
+    it("returns 0 size when map is not ready", () => {
+      const { result } = renderHook(() => useTags(), {
+        wrapper: createNotReadyWrapper(),
+      });
+
+      expect(result.current.size()).toBe(0);
+    });
+  });
+});

package/src/components/Circle.tsx

@@ -0,0 +1,189 @@
+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,
+  SphereCircle,
+} from "../types";
+
+export interface CircleProps {
+  center: Location;
+  radius: number;
+  title?: string;
+  detail?: string;
+  popup?: PopupOptions;
+  visibleRange?: Range;
+  lineWidth?: number;
+  lineColor?: string;
+  fillColor?: string;
+  lineStyle?: LineStyleType;
+  clickable?: boolean;
+  draggable?: boolean;
+  zIndex?: number;
+  onClick?: (circle: SphereCircle) => void;
+  onDrag?: (circle: SphereCircle) => void;
+  onDrop?: (circle: SphereCircle) => void;
+}
+
+export interface CircleRef {
+  getCircle(): SphereCircle | null;
+  togglePopup(show?: boolean, location?: Location): void;
+  getCenter(): Location | null;
+  getBound(): Bound | null;
+  getArea(language?: string): number | string | null;
+  getRadius(language?: string): number | string | null;
+  updateStyle(options: Partial<GeometryOptions>): void;
+}
+
+export const Circle = forwardRef<CircleRef, CircleProps>(function Circle(
+  {
+    center,
+    radius,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    clickable,
+    draggable,
+    zIndex,
+    onClick,
+    onDrag,
+    onDrop,
+  },
+  ref
+) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const circleRef = useRef<SphereCircle | 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 zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+
+    const circle = new sphere.Circle(center, radius, options);
+    circleRef.current = circle;
+
+    map.Overlays.add(circle);
+
+    const handleOverlayClick = (data: { overlay: SphereCircle }) => {
+      if (data.overlay === circle) {
+        callbacksRef.current.onClick?.(circle);
+      }
+    };
+
+    const handleOverlayDrag = (overlay: SphereCircle) => {
+      if (overlay === circle) {
+        callbacksRef.current.onDrag?.(circle);
+      }
+    };
+
+    const handleOverlayDrop = (overlay: SphereCircle) => {
+      if (overlay === circle) {
+        callbacksRef.current.onDrop?.(circle);
+      }
+    };
+
+    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(circle);
+      circleRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    center,
+    radius,
+    title,
+    detail,
+    popup,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    fillColor,
+    lineStyle,
+    clickable,
+    draggable,
+    zIndex,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getCircle: () => circleRef.current,
+      togglePopup: (show?: boolean, location?: Location) => {
+        circleRef.current?.pop(show, location);
+      },
+      getCenter: () => (circleRef.current?.location() as Location) ?? null,
+      getBound: () => circleRef.current?.bound() ?? null,
+      getArea: (language?: string) => circleRef.current?.size(language) ?? null,
+      getRadius: (language?: string) =>
+        circleRef.current?.radius(language) ?? null,
+      updateStyle: (options: Partial<GeometryOptions>) => {
+        circleRef.current?.update(options);
+      },
+    }),
+    []
+  );
+
+  return null;
+});
+
+export default Circle;

package/src/components/Dot.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type { GeometryOptions, Location, Range, SphereDot } from "../types";
+
+export interface DotProps {
+  position: Location;
+  title?: string;
+  detail?: string;
+  visibleRange?: Range;
+  lineWidth?: number;
+  lineColor?: string;
+  clickable?: boolean;
+  draggable?: boolean;
+  zIndex?: number;
+  onClick?: (dot: SphereDot) => void;
+  onDrag?: (dot: SphereDot) => void;
+  onDrop?: (dot: SphereDot, location: Location) => void;
+}
+
+export interface DotRef {
+  getDot(): SphereDot | null;
+  setPosition(location: Location): void;
+  getPosition(): Location | null;
+}
+
+export const Dot = forwardRef<DotRef, DotProps>(function Dot(
+  {
+    position,
+    title,
+    detail,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    clickable,
+    draggable,
+    zIndex,
+    onClick,
+    onDrag,
+    onDrop,
+  },
+  ref
+) {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const dotRef = useRef<SphereDot | 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 (visibleRange) {
+      options.visibleRange = visibleRange;
+    }
+    if (typeof lineWidth === "number") {
+      options.lineWidth = lineWidth;
+    }
+    if (lineColor) {
+      options.lineColor = lineColor;
+    }
+    if (typeof clickable === "boolean") {
+      options.clickable = clickable;
+    }
+    if (typeof draggable === "boolean") {
+      options.draggable = draggable;
+    }
+    if (typeof zIndex === "number") {
+      options.zIndex = zIndex;
+    }
+
+    const dot = new sphere.Dot(position, options);
+    dotRef.current = dot;
+
+    map.Overlays.add(dot);
+
+    const handleOverlayClick = (data: { overlay: SphereDot }) => {
+      if (data.overlay === dot) {
+        callbacksRef.current.onClick?.(dot);
+      }
+    };
+
+    const handleOverlayDrag = (overlay: SphereDot) => {
+      if (overlay === dot) {
+        callbacksRef.current.onDrag?.(dot);
+      }
+    };
+
+    const handleOverlayDrop = (overlay: SphereDot) => {
+      if (overlay === dot) {
+        const newLocation = dot.location() as Location;
+        callbacksRef.current.onDrop?.(dot, newLocation);
+      }
+    };
+
+    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(dot);
+      dotRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    position,
+    title,
+    detail,
+    visibleRange,
+    lineWidth,
+    lineColor,
+    clickable,
+    draggable,
+    zIndex,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getDot: () => dotRef.current,
+      setPosition: (location: Location) => {
+        dotRef.current?.location(location);
+      },
+      getPosition: () => (dotRef.current?.location() as Location) ?? null,
+    }),
+    []
+  );
+
+  return null;
+});
+
+export default Dot;

package/src/components/Layer.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useRef } from "react";
+import { useMapContext } from "../context/MapContext";
+import { useSphereContext } from "../context/SphereContext";
+import type {
+  Bound,
+  BuiltInLayer,
+  LayerOptions,
+  LayerType,
+  Range,
+  SphereLayer,
+} from "../types";
+
+export interface LayerProps {
+  name?: string;
+  preset?: BuiltInLayer;
+  isBase?: boolean;
+  type?: LayerType;
+  url?: string;
+  zoomRange?: Range;
+  source?: Range;
+  opacity?: number;
+  zIndex?: number;
+  bound?: Bound;
+  attribution?: string;
+  extraQuery?: string;
+  id?: string;
+  format?: string;
+  srs?: string;
+  tileMatrixPrefix?: string;
+  styles?: string;
+  version?: string;
+  refresh?: number;
+  zoomOffset?: number;
+  beforeId?: string;
+}
+
+export function Layer({
+  name,
+  preset,
+  isBase = false,
+  type,
+  url,
+  zoomRange,
+  source,
+  opacity,
+  zIndex,
+  bound,
+  attribution,
+  extraQuery,
+  id,
+  format,
+  srs,
+  tileMatrixPrefix,
+  styles,
+  version,
+  refresh,
+  zoomOffset,
+  beforeId,
+}: LayerProps): null {
+  const { map, isReady } = useMapContext();
+  const { sphere } = useSphereContext();
+  const layerRef = useRef<SphereLayer | null>(null);
+
+  useEffect(() => {
+    if (!(isReady && map && sphere)) {
+      return;
+    }
+
+    let layer: SphereLayer | null = null;
+
+    if (preset && sphere.Layers[preset]) {
+      layer = sphere.Layers[preset];
+    } else if (name) {
+      const options: LayerOptions = {};
+
+      if (type) {
+        options.type = type;
+      }
+      if (url) {
+        options.url = url;
+      }
+      if (zoomRange) {
+        options.zoomRange = zoomRange;
+      }
+      if (source) {
+        options.source = source;
+      }
+      if (typeof opacity === "number") {
+        options.opacity = opacity;
+      }
+      if (typeof zIndex === "number") {
+        options.zIndex = zIndex;
+      }
+      if (bound) {
+        options.bound = bound;
+      }
+      if (attribution) {
+        options.attribution = attribution;
+      }
+      if (extraQuery) {
+        options.extraQuery = extraQuery;
+      }
+      if (id) {
+        options.id = id;
+      }
+      if (format) {
+        options.format = format;
+      }
+      if (srs) {
+        options.srs = srs;
+      }
+      if (tileMatrixPrefix) {
+        options.tileMatrixPrefix = tileMatrixPrefix;
+      }
+      if (styles) {
+        options.styles = styles;
+      }
+      if (version) {
+        options.version = version;
+      }
+      if (typeof refresh === "number") {
+        options.refresh = refresh;
+      }
+      if (typeof zoomOffset === "number") {
+        options.zoomOffset = zoomOffset;
+      }
+
+      layer = new sphere.Layer(name, options);
+    } else {
+      return;
+    }
+
+    layerRef.current = layer;
+
+    if (isBase) {
+      map.Layers.setBase(layer as SphereLayer);
+    } else {
+      map.Layers.add(layer as SphereLayer, beforeId);
+    }
+
+    return () => {
+      if (!isBase && layerRef.current) {
+        map.Layers.remove(layerRef.current as SphereLayer);
+      }
+      layerRef.current = null;
+    };
+  }, [
+    isReady,
+    map,
+    sphere,
+    name,
+    preset,
+    isBase,
+    type,
+    url,
+    zoomRange,
+    source,
+    opacity,
+    zIndex,
+    bound,
+    attribution,
+    extraQuery,
+    id,
+    format,
+    srs,
+    tileMatrixPrefix,
+    styles,
+    version,
+    refresh,
+    zoomOffset,
+    beforeId,
+  ]);
+
+  return null;
+}
+
+export default Layer;