diff --git a/cvat-ui/src/components/labels-editor/skeleton-configurator.tsx b/cvat-ui/src/components/labels-editor/skeleton-configurator.tsx index 18b2c34a696c..197ef7b271e1 100644 --- 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; private svgRef: React.RefObject; - 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 { - 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 {