gistda-sphere-react 1.0.0 → 1.0.1

package/README.md

@@ -43,8 +43,6 @@ A React wrapper for the [GISTDA Sphere Map API](https://sphere.gistda.or.th/). B
 npm install gistda-sphere-react
 ```
 
-**Peer dependencies:** React 18+ and ReactDOM 18+
-
 ## Quick Start
 
 ```tsx

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+import { Ref, ReactNode, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface Location {
     lon: number;
@@ -463,9 +463,19 @@ declare global {
     }
 }
 
+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;
+}
 interface CircleProps {
     center: Location;
     radius: number;
+    ref?: Ref<CircleRef>;
     title?: string;
     detail?: string;
     popup?: PopupOptions;
@@ -481,19 +491,16 @@ interface CircleProps {
     onDrag?: (circle: SphereCircle) => void;
     onDrop?: (circle: SphereCircle) => void;
 }
-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;
-}
-declare const Circle: react.ForwardRefExoticComponent<CircleProps & react.RefAttributes<CircleRef>>;
+declare function Circle({ center, radius, ref, title, detail, popup, visibleRange, lineWidth, lineColor, fillColor, lineStyle, clickable, draggable, zIndex, onClick, onDrag, onDrop, }: CircleProps): null;
 
+interface DotRef {
+    getDot(): SphereDot | null;
+    setPosition(location: Location): void;
+    getPosition(): Location | null;
+}
 interface DotProps {
     position: Location;
+    ref?: Ref<DotRef>;
     title?: string;
     detail?: string;
     visibleRange?: Range;
@@ -506,12 +513,7 @@ interface DotProps {
     onDrag?: (dot: SphereDot) => void;
     onDrop?: (dot: SphereDot, location: Location) => void;
 }
-interface DotRef {
-    getDot(): SphereDot | null;
-    setPosition(location: Location): void;
-    getPosition(): Location | null;
-}
-declare const Dot: react.ForwardRefExoticComponent<DotProps & react.RefAttributes<DotRef>>;
+declare function Dot({ position, ref, title, detail, visibleRange, lineWidth, lineColor, clickable, draggable, zIndex, onClick, onDrag, onDrop, }: DotProps): null;
 
 interface LayerProps {
     name?: string;
@@ -538,8 +540,15 @@ interface LayerProps {
 }
 declare function Layer({ name, preset, isBase, type, url, zoomRange, source, opacity, zIndex, bound, attribution, extraQuery, id, format, srs, tileMatrixPrefix, styles, version, refresh, zoomOffset, beforeId, }: LayerProps): null;
 
+interface MarkerRef {
+    getMarker(): SphereMarker | null;
+    togglePopup(show?: boolean): void;
+    setPosition(location: Location, animate?: boolean): void;
+    setRotation(angle: number): void;
+}
 interface MarkerProps {
     position: Location;
+    ref?: Ref<MarkerRef>;
     icon?: Icon;
     title?: string;
     detail?: string;
@@ -555,16 +564,22 @@ interface MarkerProps {
     onHover?: (marker: SphereMarker) => void;
     onLeave?: (marker: SphereMarker) => void;
 }
-interface MarkerRef {
-    getMarker(): SphereMarker | null;
-    togglePopup(show?: boolean): void;
-    setPosition(location: Location, animate?: boolean): void;
-    setRotation(angle: number): void;
-}
-declare const Marker: react.ForwardRefExoticComponent<MarkerProps & react.RefAttributes<MarkerRef>>;
+declare function Marker({ position, ref, icon, title, detail, popup, visibleRange, clickable, draggable, zIndex, rotate, onClick, onDrag, onDrop, onHover, onLeave, }: MarkerProps): null;
 
+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;
+}
 interface PolygonProps {
     positions: Location[];
+    ref?: Ref<PolygonRef>;
     title?: string;
     detail?: string;
     label?: string;
@@ -585,21 +600,21 @@ interface PolygonProps {
     onDrag?: (polygon: SpherePolygon) => void;
     onDrop?: (polygon: SpherePolygon) => void;
 }
-interface PolygonRef {
-    getPolygon(): SpherePolygon | null;
+declare function Polygon({ positions, ref, title, detail, label, labelOptions, popup, visibleRange, lineWidth, lineColor, fillColor, lineStyle, pivot, clickable, draggable, pointer, zIndex, editable, onClick, onDrag, onDrop, }: PolygonProps): null;
+
+interface PolylineRef {
+    getPolyline(): SpherePolyline | null;
     togglePopup(show?: boolean, location?: Location): void;
     getPivot(): Location | null;
     getCentroid(): Location | null;
     getBound(): Bound | null;
-    getArea(language?: string): number | string | null;
+    getLength(language?: string): number | string | null;
     rotate(angle: number): void;
     updateStyle(options: Partial<GeometryOptions>): void;
-    toGeoJSON(): object | null;
 }
-declare const Polygon: react.ForwardRefExoticComponent<PolygonProps & react.RefAttributes<PolygonRef>>;
-
 interface PolylineProps {
     positions: Location[];
+    ref?: Ref<PolylineRef>;
     title?: string;
     detail?: string;
     label?: string;
@@ -618,20 +633,18 @@ interface PolylineProps {
     onDrag?: (polyline: SpherePolyline) => void;
     onDrop?: (polyline: SpherePolyline) => void;
 }
-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;
-}
-declare const Polyline: react.ForwardRefExoticComponent<PolylineProps & react.RefAttributes<PolylineRef>>;
+declare function Polyline({ positions, ref, title, detail, label, labelOptions, popup, visibleRange, lineWidth, lineColor, lineStyle, pivot, clickable, draggable, pointer, zIndex, onClick, onDrag, onDrop, }: PolylineProps): null;
 
+interface PopupRef {
+    getPopup(): SpherePopup | null;
+    setPosition(location: Location): void;
+    setTitle(title: string): void;
+    setDetail(detail: string): void;
+    getElement(): HTMLElement | null;
+}
 interface PopupProps {
     position: Location;
+    ref?: Ref<PopupRef>;
     title?: string;
     detail?: string;
     loadDetail?: (element: HTMLElement) => void;
@@ -641,18 +654,19 @@ interface PopupProps {
     closable?: boolean;
     onClose?: (popup: SpherePopup) => void;
 }
-interface PopupRef {
-    getPopup(): SpherePopup | null;
-    setPosition(location: Location): void;
-    setTitle(title: string): void;
-    setDetail(detail: string): void;
-    getElement(): HTMLElement | null;
-}
-declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<PopupRef>>;
+declare function Popup({ position, ref, title, detail, loadDetail, html, loadHtml, size, closable, onClose, }: PopupProps): null;
 
+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;
+}
 interface RectangleProps {
     position: Location;
     size: Size | Location;
+    ref?: Ref<RectangleRef>;
     title?: string;
     detail?: string;
     popup?: PopupOptions;
@@ -669,17 +683,23 @@ interface RectangleProps {
     onDrag?: (rectangle: SphereRectangle) => void;
     onDrop?: (rectangle: SphereRectangle) => void;
 }
-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;
-}
-declare const Rectangle: react.ForwardRefExoticComponent<RectangleProps & react.RefAttributes<RectangleRef>>;
+declare function Rectangle({ position, size, ref, title, detail, popup, visibleRange, lineWidth, lineColor, fillColor, lineStyle, clickable, draggable, editable, zIndex, onClick, onDrag, onDrop, }: RectangleProps): null;
 
+interface SphereMapRef {
+    getMap(): SphereMap$1 | 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;
+}
 interface SphereMapProps {
     children?: ReactNode;
+    ref?: Ref<SphereMapRef>;
     zoom?: number;
     zoomRange?: Range;
     center?: Location;
@@ -706,19 +726,7 @@ interface SphereMapProps {
     onMouseMove?: (location: Location) => void;
     onError?: (error: Error) => void;
 }
-interface SphereMapRef {
-    getMap(): SphereMap$1 | 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;
-}
-declare const SphereMap: react.ForwardRefExoticComponent<SphereMapProps & react.RefAttributes<SphereMapRef>>;
+declare function SphereMap({ children, ref, zoom, zoomRange, center, language, input, lastView, ui, filter, rotate, pitch, className, style, id, onReady, onZoom, onLocation, onClick, onDoubleClick, onRotate, onPitch, onDrag, onDrop, onIdle, onMouseMove, onError, }: SphereMapProps): react_jsx_runtime.JSX.Element;
 
 interface MapContextValue {
     map: SphereMap$1 | null;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+import { Ref, ReactNode, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface Location {
     lon: number;
@@ -463,9 +463,19 @@ declare global {
     }
 }
 
+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;
+}
 interface CircleProps {
     center: Location;
     radius: number;
+    ref?: Ref<CircleRef>;
     title?: string;
     detail?: string;
     popup?: PopupOptions;
@@ -481,19 +491,16 @@ interface CircleProps {
     onDrag?: (circle: SphereCircle) => void;
     onDrop?: (circle: SphereCircle) => void;
 }
-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;
-}
-declare const Circle: react.ForwardRefExoticComponent<CircleProps & react.RefAttributes<CircleRef>>;
+declare function Circle({ center, radius, ref, title, detail, popup, visibleRange, lineWidth, lineColor, fillColor, lineStyle, clickable, draggable, zIndex, onClick, onDrag, onDrop, }: CircleProps): null;
 
+interface DotRef {
+    getDot(): SphereDot | null;
+    setPosition(location: Location): void;
+    getPosition(): Location | null;
+}
 interface DotProps {
     position: Location;
+    ref?: Ref<DotRef>;
     title?: string;
     detail?: string;
     visibleRange?: Range;
@@ -506,12 +513,7 @@ interface DotProps {
     onDrag?: (dot: SphereDot) => void;
     onDrop?: (dot: SphereDot, location: Location) => void;
 }
-interface DotRef {
-    getDot(): SphereDot | null;
-    setPosition(location: Location): void;
-    getPosition(): Location | null;
-}
-declare const Dot: react.ForwardRefExoticComponent<DotProps & react.RefAttributes<DotRef>>;
+declare function Dot({ position, ref, title, detail, visibleRange, lineWidth, lineColor, clickable, draggable, zIndex, onClick, onDrag, onDrop, }: DotProps): null;
 
 interface LayerProps {
     name?: string;
@@ -538,8 +540,15 @@ interface LayerProps {
 }
 declare function Layer({ name, preset, isBase, type, url, zoomRange, source, opacity, zIndex, bound, attribution, extraQuery, id, format, srs, tileMatrixPrefix, styles, version, refresh, zoomOffset, beforeId, }: LayerProps): null;
 
+interface MarkerRef {
+    getMarker(): SphereMarker | null;
+    togglePopup(show?: boolean): void;
+    setPosition(location: Location, animate?: boolean): void;
+    setRotation(angle: number): void;
+}
 interface MarkerProps {
     position: Location;
+    ref?: Ref<MarkerRef>;
     icon?: Icon;
     title?: string;
     detail?: string;
@@ -555,16 +564,22 @@ interface MarkerProps {
     onHover?: (marker: SphereMarker) => void;
     onLeave?: (marker: SphereMarker) => void;
 }
-interface MarkerRef {
-    getMarker(): SphereMarker | null;
-    togglePopup(show?: boolean): void;
-    setPosition(location: Location, animate?: boolean): void;
-    setRotation(angle: number): void;
-}
-declare const Marker: react.ForwardRefExoticComponent<MarkerProps & react.RefAttributes<MarkerRef>>;
+declare function Marker({ position, ref, icon, title, detail, popup, visibleRange, clickable, draggable, zIndex, rotate, onClick, onDrag, onDrop, onHover, onLeave, }: MarkerProps): null;
 
+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;
+}
 interface PolygonProps {
     positions: Location[];
+    ref?: Ref<PolygonRef>;
     title?: string;
     detail?: string;
     label?: string;
@@ -585,21 +600,21 @@ interface PolygonProps {
     onDrag?: (polygon: SpherePolygon) => void;
     onDrop?: (polygon: SpherePolygon) => void;
 }
-interface PolygonRef {
-    getPolygon(): SpherePolygon | null;
+declare function Polygon({ positions, ref, title, detail, label, labelOptions, popup, visibleRange, lineWidth, lineColor, fillColor, lineStyle, pivot, clickable, draggable, pointer, zIndex, editable, onClick, onDrag, onDrop, }: PolygonProps): null;
+
+interface PolylineRef {
+    getPolyline(): SpherePolyline | null;
     togglePopup(show?: boolean, location?: Location): void;
     getPivot(): Location | null;
     getCentroid(): Location | null;
     getBound(): Bound | null;
-    getArea(language?: string): number | string | null;
+    getLength(language?: string): number | string | null;
     rotate(angle: number): void;
     updateStyle(options: Partial<GeometryOptions>): void;
-    toGeoJSON(): object | null;
 }
-declare const Polygon: react.ForwardRefExoticComponent<PolygonProps & react.RefAttributes<PolygonRef>>;
-
 interface PolylineProps {
     positions: Location[];
+    ref?: Ref<PolylineRef>;
     title?: string;
     detail?: string;
     label?: string;
@@ -618,20 +633,18 @@ interface PolylineProps {
     onDrag?: (polyline: SpherePolyline) => void;
     onDrop?: (polyline: SpherePolyline) => void;
 }
-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;
-}
-declare const Polyline: react.ForwardRefExoticComponent<PolylineProps & react.RefAttributes<PolylineRef>>;
+declare function Polyline({ positions, ref, title, detail, label, labelOptions, popup, visibleRange, lineWidth, lineColor, lineStyle, pivot, clickable, draggable, pointer, zIndex, onClick, onDrag, onDrop, }: PolylineProps): null;
 
+interface PopupRef {
+    getPopup(): SpherePopup | null;
+    setPosition(location: Location): void;
+    setTitle(title: string): void;
+    setDetail(detail: string): void;
+    getElement(): HTMLElement | null;
+}
 interface PopupProps {
     position: Location;
+    ref?: Ref<PopupRef>;
     title?: string;
     detail?: string;
     loadDetail?: (element: HTMLElement) => void;
@@ -641,18 +654,19 @@ interface PopupProps {
     closable?: boolean;
     onClose?: (popup: SpherePopup) => void;
 }
-interface PopupRef {
-    getPopup(): SpherePopup | null;
-    setPosition(location: Location): void;
-    setTitle(title: string): void;
-    setDetail(detail: string): void;
-    getElement(): HTMLElement | null;
-}
-declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<PopupRef>>;
+declare function Popup({ position, ref, title, detail, loadDetail, html, loadHtml, size, closable, onClose, }: PopupProps): null;
 
+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;
+}
 interface RectangleProps {
     position: Location;
     size: Size | Location;
+    ref?: Ref<RectangleRef>;
     title?: string;
     detail?: string;
     popup?: PopupOptions;
@@ -669,17 +683,23 @@ interface RectangleProps {
     onDrag?: (rectangle: SphereRectangle) => void;
     onDrop?: (rectangle: SphereRectangle) => void;
 }
-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;
-}
-declare const Rectangle: react.ForwardRefExoticComponent<RectangleProps & react.RefAttributes<RectangleRef>>;
+declare function Rectangle({ position, size, ref, title, detail, popup, visibleRange, lineWidth, lineColor, fillColor, lineStyle, clickable, draggable, editable, zIndex, onClick, onDrag, onDrop, }: RectangleProps): null;
 
+interface SphereMapRef {
+    getMap(): SphereMap$1 | 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;
+}
 interface SphereMapProps {
     children?: ReactNode;
+    ref?: Ref<SphereMapRef>;
     zoom?: number;
     zoomRange?: Range;
     center?: Location;
@@ -706,19 +726,7 @@ interface SphereMapProps {
     onMouseMove?: (location: Location) => void;
     onError?: (error: Error) => void;
 }
-interface SphereMapRef {
-    getMap(): SphereMap$1 | 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;
-}
-declare const SphereMap: react.ForwardRefExoticComponent<SphereMapProps & react.RefAttributes<SphereMapRef>>;
+declare function SphereMap({ children, ref, zoom, zoomRange, center, language, input, lastView, ui, filter, rotate, pitch, className, style, id, onReady, onZoom, onLocation, onClick, onDoubleClick, onRotate, onPitch, onDrag, onDrop, onIdle, onMouseMove, onError, }: SphereMapProps): react_jsx_runtime.JSX.Element;
 
 interface MapContextValue {
     map: SphereMap$1 | null;