Get rid of resize observer

cvat-ai · Jul 27, 2023 · 9ce45be · 9ce45be
1 parent 9808140
commit 9ce45be
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/cvat-ui/src/components/labels-editor/skeleton-configurator.tsx b/cvat-ui/src/components/labels-editor/skeleton-configurator.tsx
@@ -55,7 +55,7 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
 
     private canvasRef: React.RefObject<HTMLCanvasElement>;
     private svgRef: React.RefObject<SVGSVGElement>;
-    private canvasResizeObserver: ResizeObserver;
+    private resizeListener: EventListener;
     private nodeCounter: number;
     private elementCounter: number;
     private draggableElement: SVGElement | null;
@@ -77,30 +77,30 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
         this.elementCounter = 0;
         this.draggableElement = null;
         this.labels = {};
-        this.canvasResizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-            const [canvasEntry] = entries;
-            (canvasEntry.target as HTMLCanvasElement).style.height = `${canvasEntry.target.clientWidth}px`;
-            (canvasEntry.target as HTMLCanvasElement).height = canvasEntry.target.clientWidth;
-            (canvasEntry.target as HTMLCanvasElement).width = canvasEntry.target.clientWidth;
-            if (this.svgRef.current) {
-                (this.svgRef.current as SVGSVGElement).style.width = `${canvasEntry.target.clientWidth}px`;
-                (this.svgRef.current as SVGSVGElement).style.height = `${canvasEntry.target.clientWidth}px`;
+        this.resizeListener = () => {
+            const canvas = this.canvasRef.current;
+            const svg = this.svgRef.current;
+            if (canvas && svg) {
+                const { clientWidth } = canvas;
+                canvas.style.height = `${clientWidth}px`;
+                canvas.height = clientWidth;
+                canvas.width = clientWidth;
+                svg.style.width = `${clientWidth}px`;
+                svg.style.height = `${clientWidth}px`;
             }
             this.setCanvasBackground();
-        });
+        };
     }
 
     public componentDidMount(): void {
-        const { canvasRef, svgRef } = this;
+        const { svgRef } = this;
         const { label } = this.props;
-        const canvas = canvasRef.current;
         const svg = svgRef.current;
 
-        if (canvas) {
-            this.canvasResizeObserver.observe(canvas);
-        }
-
+        window.addEventListener('resize', this.resizeListener);
         window.document.addEventListener('mouseup', this.onDocumentMouseUp);
+        window.dispatchEvent(new Event('resize'));
+
         if (svg) {
             svg.setAttribute('viewBox', '0 0 100 100');
             svg.addEventListener('mousedown', this.onSVGClick);
@@ -164,7 +164,7 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
         }
 
         window.document.removeEventListener('mouseup', this.onDocumentMouseUp);
-        this.canvasResizeObserver.disconnect();
+        window.removeEventListener('resize', this.resizeListener);
     }
 
     private onDocumentMouseUp = (): void => {