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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.12",
+  "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.",

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;
-};