infinity map and canvas height width problem resolved

img-mapper · Feb 13, 2023 · e432d6f · e432d6f
1 parent 75b7eb7
commit e432d6f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-img-mapper",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "React Component to highlight interactive zones in images",
   "keywords": [
     "react",

diff --git a/src/ImageMapper.tsx b/src/ImageMapper.tsx
@@ -45,6 +45,7 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
   const [map, setMap] = useState<Map>(mapProp);
   const [storedMap, setStoredMap] = useState<Map>(map);
   const [isRendered, setRendered] = useState<boolean>(false);
+  const [renderCount, setRenderCount] = useState<number>(1);
   const [imgRef, setImgRef] = useState<HTMLImageElement>(null);
   const container = useRef<Container>(null);
   const img = useRef<HTMLImageElement>(null);
@@ -53,11 +54,18 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
   const isInitialMount = useRef<boolean>(true);
 
   useEffect(() => {
-    initCanvas(true);
-    ctx.current = canvas.current.getContext('2d');
-    updateCacheMap();
-    setRendered(true);
-  }, []);
+    if (!isRendered && renderCount) {
+      if (img.current && img.current.complete) {
+        initCanvas(true);
+        ctx.current = canvas.current.getContext('2d');
+        updateCacheMap();
+        setRendered(true);
+        setRenderCount(0);
+      } else {
+        setRenderCount(prev => prev + 1);
+      }
+    }
+  }, [img, isRendered, renderCount]);
 
   useEffect(() => {
     if (isInitialMount.current) {