diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 44deb1a0..4c09868a 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -120,7 +120,44 @@ export default function CircuitTrestleSetting({ id }) { const beforeCapture = (type) => { setCanvasZoom(100) canvas.set({ zoom: 1 }) - canvas.viewportTransform = [1, 0, 0, 1, 0, 0] + + // roof 객체들을 찾아서 중앙점 계산 + const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') + + if (roofs.length > 0) { + // 모든 roof의 x, y 좌표를 수집 + const allPoints = [] + roofs.forEach((roof) => { + if (roof.getCurrentPoints()) { + roof.getCurrentPoints().forEach((point) => { + allPoints.push({ x: point.x, y: point.y }) + }) + } + }) + + if (allPoints.length > 0) { + // 모든 점들의 중앙값 계산 + const minX = Math.min(...allPoints.map((p) => p.x)) + const maxX = Math.max(...allPoints.map((p) => p.x)) + const minY = Math.min(...allPoints.map((p) => p.y)) + const maxY = Math.max(...allPoints.map((p) => p.y)) + + const centerX = (minX + maxX) / 2 + const centerY = (minY + maxY) / 2 + + // 캔버스 중앙으로 이동하기 위한 오프셋 계산 + const canvasWidth = canvas.getWidth() + const canvasHeight = canvas.getHeight() + const offsetX = canvasWidth / 2 - centerX + const offsetY = canvasHeight / 2 - centerY + + canvas.viewportTransform = [1, 0, 0, 1, offsetX, offsetY] + } else { + canvas.viewportTransform = [1, 0, 0, 1, 0, 0] + } + } else { + canvas.viewportTransform = [1, 0, 0, 1, 0, 0] + } const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE) const circuitNumberTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber') @@ -139,40 +176,9 @@ export default function CircuitTrestleSetting({ id }) { // roof polygon들의 중간점 계산 const roofPolygons = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) let x, y - x = 0 //canvas.width / 2 - y = 1000 //canvas.height / 2 - - /*if (roofPolygons.length > 0) { - let minX = Infinity, - minY = Infinity, - maxX = -Infinity, - maxY = -Infinity - - roofPolygons.forEach((obj) => { - const boundingRect = obj.getBoundingRect() - minX = Math.min(minX, boundingRect.left) - minY = Math.min(minY, boundingRect.top) - maxX = Math.max(maxX, boundingRect.left + boundingRect.width) - maxY = Math.max(maxY, boundingRect.top + boundingRect.height) - }) - - x = (minX + maxX) / 2 - y = (minY + maxY) / 2 - } else { - // roof polygon이 없으면 기본 중앙점 사용 - x = canvas.width / 2 - y = canvas.height / 2 - } - - if (x > 1600) { - x = 0 - y = 0 - } - if (y > 1600) { - x = 0 - y = 0 - }*/ - + x = canvas.width / 2 + y = canvas.height / 2 + canvas.zoomToPoint(new fabric.Point(x, y), 0.4) changeFontSize('lengthText', '28') changeFontSize('circuitNumber', '28')