diff --git a/frontend/src/components/ImageCanvas/CommentLabel.tsx b/frontend/src/components/ImageCanvas/CommentLabel.tsx index 32b544b..f684b4d 100644 --- a/frontend/src/components/ImageCanvas/CommentLabel.tsx +++ b/frontend/src/components/ImageCanvas/CommentLabel.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Group, Rect, Text, Image } from 'react-konva'; import { CommentResponse } from '@/types'; import useImage from 'use-image'; @@ -7,6 +7,7 @@ import deleteIconSrc from '@/assets/icons/delete.svg'; import toggleUpIconSrc from '@/assets/icons/chevron-up.svg'; import toggleDownIconSrc from '@/assets/icons/chevron-down.svg'; import Konva from 'konva'; +import { TRANSFORM_CHANGE_STR } from '@/constants'; interface CommentLabelProps { stage: Konva.Stage; @@ -48,6 +49,23 @@ export default function CommentLabel({ toggleComment(comment.id); }; + useEffect(() => { + const transformEvents = TRANSFORM_CHANGE_STR.join(' '); + + stage?.on(transformEvents, () => { + if (!groupRef.current) return; + + groupRef.current?.scale({ + x: 1 / stage.getAbsoluteScale().x, + y: 1 / stage.getAbsoluteScale().y, + }); + }); + + return () => { + stage?.off(transformEvents); + }; + }, [stage]); + return ( stage && (