@reearth/core 0.0.7-alpha.11 → 0.0.7-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.11",
+  "version": "0.0.7-alpha.13",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",
@@ -32,6 +32,13 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "1.1.1",
+    "@radix-ui/react-select": "2.1.1",
+    "@radix-ui/react-separator": "1.1.0",
+    "@radix-ui/react-switch": "1.1.0",
+    "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-icons": "1.3.0",
+    "@radix-ui/react-slot": "1.1.0",
     "@reearth/cesium-mvt-imagery-provider": "1.5.4",
     "@rot1024/use-transition": "1.0.0",
     "@seznam/compose-react-refs": "1.0.6",
@@ -61,8 +68,11 @@
     "react-error-boundary": "4.0.11",
     "react-nl2br": "1.0.4",
     "react-use": "17.5.0",
-    "resium": "1.18.1",
+    "resium": "1.18.2",
     "suspend-react": "0.1.3",
+    "tailwind-merge": "2.5.2",
+    "tailwindcss": "3.4.10",
+    "tailwindcss-animate": "1.0.7",
     "tiny-invariant": "1.3.3",
     "use-callback-ref": "1.3.2",
     "use-custom-compare": "1.4.0",
@@ -91,17 +101,22 @@
     "@types/pbf": "3.0.5",
     "@types/react": "18.3.0",
     "@types/react-dom": "18.3.0",
+    "@types/scheduler": "0.23.0",
     "@types/uuid": "9.0.8",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "@vitejs/plugin-react": "4.2.1",
+    "autoprefixer": "10.4.20",
     "cesium": "1.118.0",
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.1.1",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.6",
     "eslint-plugin-storybook": "0.8.0",
     "jsdom": "22.1.0",
+    "postcss": "8.4.41",
     "prettier": "3.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/engines/Cesium/Feature/utils.tsx

@@ -17,15 +17,16 @@ import {
   GroundPrimitive,
 } from "cesium";
 import md5 from "js-md5";
-import { isEqual, pick } from "lodash-es";
+import { pick } from "lodash-es";
 import {
   ComponentProps,
   ComponentType,
   ForwardedRef,
   forwardRef,
+  useCallback,
   useLayoutEffect,
   useMemo,
-  useRef,
+  useState,
 } from "react";
 import { type CesiumComponentRef, Entity } from "resium";
 
@@ -86,19 +87,11 @@ function EntityExtComponent(
   }: ComponentProps<typeof Entity> & Tag,
   ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
 ) {
-  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
-  const entityRef = useRef<CesiumEntity | undefined>(r?.current?.cesiumElement);
+  const [entity, setEntity] = useState<CesiumComponentRef<CesiumEntity> | null>(null);
 
   useLayoutEffect(() => {
-    // Note: Sketch feature's tag cannot be attached properly when first load
-    // The cesiumElement is undefined when attach, and doesn't have a chance to attach again.
-    // Root cause is still not clear.
-    // Here we add r.current as a dependency and check cesiumElement instead.
-    if (entityRef.current !== undefined && isEqual(entityRef.current, r.current?.cesiumElement))
-      return;
-    entityRef.current = r.current?.cesiumElement;
-
-    attachTag(r.current?.cesiumElement, {
+    if (!entity?.cesiumElement) return;
+    attachTag(entity.cesiumElement, {
       layerId: layerId || props.id,
       featureId,
       draggable,
@@ -106,7 +99,6 @@ function EntityExtComponent(
       legacyLocationPropertyKey,
       hideIndicator,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     draggable,
     featureId,
@@ -115,10 +107,12 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
-    r.current,
+    entity,
   ]);
 
-  return <Entity ref={composeRefs(ref, r)} {...props} />;
+  const handleRef = useCallback((r: CesiumComponentRef<CesiumEntity>) => setEntity(r), []);
+
+  return <Entity ref={composeRefs(ref, handleRef)} {...props} />;
 }
 
 export function attachTag(

package/src/engines/Cesium/common.ts

@@ -36,7 +36,7 @@ import {
   CameraEventType,
   KeyboardEventModifier,
 } from "cesium";
-import { useCallback, MutableRefObject } from "react";
+import { MutableRefObject, useMemo } from "react";
 
 import type { Camera, Clock } from "..";
 import { ClassificationType } from "../../mantle";
@@ -48,7 +48,7 @@ import type {
   OverideKeyboardEventModifier,
   ScreenSpaceCameraControllerOptions,
 } from "../../types";
-import { tweenInterval, useCanvas, useImage, LatLngHeight } from "../../utils";
+import { tweenInterval, useImage, LatLngHeight } from "../../utils";
 
 import { DEFAULT_SCREEN_SPACE_CAMERA_ASSIGNMENTS } from "./constants";
 
@@ -56,8 +56,7 @@ export const layerIdField = `__reearth_layer_id`;
 
 const defaultImageSize = 50;
 
-export const drawIcon = (
-  c: HTMLCanvasElement,
+const drawIcon = (
   image: HTMLImageElement | undefined,
   w: number,
   h: number,
@@ -68,6 +67,7 @@ export const drawIcon = (
   shadowOffsetX = 0,
   shadowOffsetY = 0,
 ) => {
+  const c = document.createElement("canvas");
   const ctx = c.getContext("2d");
   if (!image || !ctx) return;
 
@@ -104,6 +104,7 @@ export const drawIcon = (
   }
 
   ctx.restore();
+  return c.toDataURL();
 };
 
 export const useIcon = ({
@@ -138,13 +139,11 @@ export const useIcon = ({
       ? Math.floor(img.height * imageSize)
       : Math.floor((w / img.width) * img.height);
 
-  const draw = useCallback(
-    (can: HTMLCanvasElement) =>
-      drawIcon(can, img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
+  const canvas = useMemo(
+    () => drawIcon(img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
     [crop, h, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, w],
   );
-  const canvas = useCanvas(draw);
-  return [canvas, w, h];
+  return [canvas ?? "", w, h];
 };
 
 export const ho = (o: "left" | "center" | "right" | undefined): HorizontalOrigin | undefined =>

package/src/utils/image.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 export const useImage = (src?: string): HTMLImageElement | undefined => {
   const imgRef = useRef<HTMLImageElement>();
@@ -23,13 +23,3 @@ export const useImage = (src?: string): HTMLImageElement | undefined => {
 
   return img;
 };
-
-export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
-  const can = useMemo(() => document.createElement("canvas"), []);
-  const [data, setData] = useState<string>("");
-  useEffect(() => {
-    cb(can);
-    setData(can.toDataURL());
-  }, [can, cb]);
-  return data;
-};