From 9c0c74128757bea24ec14d28808e4f04a374488b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= <43837214+Minsiki@users.noreply.github.com> Date: Tue, 18 Feb 2025 18:18:50 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../placementSurface/PlacementSurface.jsx | 47 +++++++++++++------ .../PlacementSurfaceSetting.jsx | 6 +-- src/hooks/surface/useSurfaceShapeBatch.js | 31 ++++++++++-- 3 files changed, 64 insertions(+), 20 deletions(-) diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx index c06386b5..a4722bff 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx @@ -11,23 +11,42 @@ const PlacementSurface = forwardRef((props, refs) => { const num = ['①', '②', '③', '④', '⑤'] const getImageUrl = () => { + // re_는 normal의 y축 대칭 이미지 + const imageName = id < 10 ? '0' + id : id + let imageRotate = 0 if (xInversion && !yInversion) { - return `/static/images/canvas/shape/re_${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg` + if (rotate % 2 === 0 || rotate < 0) { + imageRotate = Math.abs(rotate % 4) + } else { + if (rotate < 0) { + imageRotate = Math.abs((rotate - 2) % 4) + } else { + imageRotate = Math.abs((rotate + 2) % 4) + } + } + } else if (xInversion && yInversion) { + imageRotate = Math.abs((rotate + 4) % 4) + } else if (xInversion !== yInversion && rotate < 0) { + imageRotate = Math.abs(rotate) + } else if (!xInversion && yInversion) { + if (rotate % 2 === 0 || rotate < 0) { + imageRotate = Math.abs(rotate % 4) + } else { + if (rotate < 0) { + imageRotate = Math.abs((rotate + 2) % 4) + } else { + imageRotate = Math.abs((rotate - 2) % 4) + } + } + } else { + imageRotate = (rotate + 4) % 4 } - - if (!xInversion && yInversion) { - return `/static/images/canvas/shape/re_${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg` + const rotateType = imageRotate % 4 !== 0 ? (imageRotate % 4) * 90 + 'deg' : 'normal' + if (xInversion !== yInversion) { + return `/static/images/canvas/shape/re_${rotateType}/plane_tab${imageName}.svg` + } else { + return `/static/images/canvas/shape/${rotateType}/plane_tab${imageName}.svg` } - - if (xInversion && yInversion) { - return `/static/images/canvas/shape/${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg` - } - - if (rotate < 0) { - return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs((rotate + 4) * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg` - } - - return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs(rotate * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg` } const azimuthButton = (direction, e) => { diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx index 58ab430a..967d849e 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx @@ -239,12 +239,11 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } }) applySurfaceShape(surfaceRefs, selectedType, id) } - const handleRotate = () => {} - const handleInversion = (type) => { if (type === 'x') { + const x = xInversion setXInversion(!xInversion) - setRotate(xInversion ? rotate + 2 : rotate - 2) + setRotate(x ? rotate + 2 : rotate - 2) // setXInversion(!xInversion) } else if (type === 'y') { // setRotate(rotate + 2) @@ -295,6 +294,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
+ {/* */} {/* */} diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js index 298ef982..6f7d1dfa 100644 --- a/src/hooks/surface/useSurfaceShapeBatch.js +++ b/src/hooks/surface/useSurfaceShapeBatch.js @@ -101,15 +101,40 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { lockScalingX: true, // X 축 크기 조정 잠금 lockScalingY: true, // Y 축 크기 조정 잠금 name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP, - flipX: xInversion !== yInversion ? yInversion : false, - flipY: xInversion !== yInversion ? xInversion : false, - angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate), + flipX: xInversion !== yInversion, + // angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate), + // angle: rotate, originX: 'center', originY: 'center', pitch: globalPitch, } obj = new QPolygon(points, options) + let imageRotate = 0 + if (xInversion && !yInversion) { + if (rotate % 180 === 0 || rotate < 0) { + imageRotate = Math.abs(rotate % 360) + } else { + imageRotate = Math.abs((rotate - 180) % 4) + } + } else if (xInversion && yInversion) { + imageRotate = Math.abs((rotate + 360) % 360) + } else if (xInversion !== yInversion && rotate < 0) { + imageRotate = Math.abs(rotate) + } else if (!xInversion && yInversion) { + if (rotate % 180 === 0 || rotate < 0) { + imageRotate = Math.abs(rotate % 360) + } else { + if (rotate < 0) { + imageRotate = Math.abs((rotate + 180) % 360) + } else { + imageRotate = Math.abs((rotate - 180) % 360) + } + } + } else { + imageRotate = (rotate + 360) % 360 + } + obj.set({ angle: imageRotate }) obj.setCoords() //좌표 변경 적용 canvas?.add(obj)