diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index b2586724..1cd24f15 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -274,7 +274,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { this.cells = drawCellsArray return drawCellsArray }, - fillCellABType(cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1 }) { + fillCellABType( + cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1, isCellCenter: false }, + ) { const points = this.points const minX = Math.min(...points.map((p) => p.x)) //왼쪽 @@ -451,9 +453,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { } else { // centerWidth = 0 //나중에 중간 정렬 이면 어쩌구 함수 만들어서 넣음 if (['left', 'right'].includes(cell.wallDirection)) { - centerWidth = 0 + centerWidth = cell.isCellCenter ? centerWidth : 0 } else if (['top', 'bottom'].includes(cell.wallDirection)) { - centerHeight = 0 + centerHeight = cell.isCellCenter ? centerHeight : 0 } if (cell.wallDirection === 'left') { @@ -528,7 +530,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { type: 'cellRect', }) - var group = new fabric.Group([rect, text], { + const group = new fabric.Group([rect, text], { left: startXPos, top: startYPos, }) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 1782dde8..349b5149 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -74,6 +74,7 @@ export function useMode() { const [roofStyle, setRoofStyle] = useState(1) //기본 지붕 패턴 const [templateCenterLine, setTemplateCenterLine] = useState([]) const compass = useRecoilValue(compassState) + const [isCellCenter, setIsCellCenter] = useState(false) useEffect(() => { // 이벤트 리스너 추가 @@ -4060,18 +4061,10 @@ export function useMode() { if (templateType === 2) { //셀이 그려져야할 기준 방향 //A타입 - if (parallelPoint === 0 || parallelPoint === 5) { - referenceDirection = 'top' - } else { - referenceDirection = 'bottom' - } + referenceDirection = parallelPoint === 0 || parallelPoint === 5 ? 'top' : 'bottom' } else if (templateType === 3) { //B타입 - if (parallelPoint === 0 || parallelPoint === 1) { - referenceDirection = 'left' - } else { - referenceDirection = 'right' - } + referenceDirection = parallelPoint === 0 || parallelPoint === 1 ? 'left' : 'right' } } @@ -4137,34 +4130,8 @@ export function useMode() { const wallDirection = polygon.wallDirection - // //A템플릿 타입 - // if (templateType === 2) { - // if (compass === 90) { - // if (wallDirection === 'right') { - // alert('선택할 수 없는 방향입니다.') - // return - // } - // } else if (compass === 270) { - // if (wallDirection === 'left') { - // alert('선택할 수 없는 방향입니다.') - // return - // } - // } - // } else if (templateType === 3) { - // if (compass === 0) { - // if (wallDirection === 'top') { - // alert('선택할 수 없는 방향입니다.') - // return - // } - // } else if (compass === 180) { - // if (wallDirection === 'bottom') { - // alert('선택할 수 없는 방향입니다.') - // return - // } - // } - // } - const invalidDirections = { + //반대편으로 작성 2: { 90: 'right', 270: 'left', @@ -4233,7 +4200,6 @@ export function useMode() { } if (drewRoofCells.length > 0) { - //리코일에 if (confirm('패널이 초기화 됩니다.')) { drewRoofCells.forEach((cells, index) => { cells.drawCells.forEach((cell) => { @@ -4245,7 +4211,7 @@ export function useMode() { } } - const inputCellSize = { width: 172, height: 113 } //추후 입력받는 값으로 변경 + const inputCellSize = { width: 172, height: 70 } //추후 입력받는 값으로 변경 const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고 if (templateType === 2) { @@ -4260,10 +4226,9 @@ export function useMode() { wallDirection: polygon.wallDirection, referenceDirection: polygon.referenceDirection, startIndex: polygon.startIndex, + isCellCenter: isCellCenter, }) drawCellsArray.push({ roofIndex: polygon.idx, drawCells: drawCells }) - - // toggleSelection(polygon) //선택 후 셀그리면 지우려고 했는데 방위 땜에 삭제 }) setDrewRoofCells(drawCellsArray)