diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 93e7ff65..f67c0e68 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -221,6 +221,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { //센터 정렬시에 쓴다 체크박스가 존재함 TODO: if문 추가해서 정렬해야함 let tmpWidth = (boundingBoxWidth - (rectWidth + cell.padding) * cols) / 2 + const drawCellsArray = [] //그려진 셀의 배열 + for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { const rectLeft = minX + i * (rectWidth + cell.padding) + tmpWidth @@ -248,14 +250,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { lockRotation: true, // 회전 잠금 lockScalingX: true, // X 축 크기 조정 잠금 lockScalingY: true, // Y 축 크기 조정 잠금 - opacity: 0.6, + opacity: 0.8, }) - + drawCellsArray.push(rect) //배열에 넣어서 반환한다 this.canvas.add(rect) } } } this.canvas?.renderAll() + return drawCellsArray }, inPolygon(point) { const vertices = this.getCurrentPoints() diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 563dd65a..c60fba2b 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -5,6 +5,7 @@ import { useRecoilState } from 'recoil' import { canvasSizeState, + drewRoofCellsState, fontSizeState, roofPolygonArrayState, roofPolygonPatternArrayState, @@ -25,10 +26,9 @@ export const Mode = { PATTERNB: 'patternb', TEXTBOX: 'textbox', DRAW_RECT: 'drawRect', - ROOF_PATTERN: 'roofPattern', - MODULE: 'module', - ROOF_TRESTLE: 'roofTrestle', - FILL_CELLS: 'fillCells', + ROOF_PATTERN: 'roofPattern', //지붕패턴 모드 + ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드 + FILL_CELLS: 'fillCells', //태양광셀 모드 DEFAULT: 'default', } @@ -57,6 +57,7 @@ export function useMode() { const [canvasSize] = useRecoilState(canvasSizeState) const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([]) + const [drewRoofCells, setDrewRoofCells] = useRecoilState(drewRoofCellsState) useEffect(() => { // 이벤트 리스너 추가 @@ -3178,23 +3179,27 @@ export function useMode() { canvas?.renderAll() } + /** + * 지붕 패턴 생성 로직 + * @param roofStyle + */ const makeRoofPatternPolygon = (roofStyle) => { if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) { alert('객체가 비어있습니다.') return } - //내부 선 점선으로 변경 + //내부 선 점선으로 변경 추후에 다시 되돌리는 로직 필요 roofPolygonPattern.lines.forEach((line, index) => { line.line.set('strokeDashArray', [10, 5, 2, 5]) line.line.set('stroke', 'blue') line.line.set('strokeWidth', 1) }) - var ratio = window.devicePixelRatio || 1 + const ratio = window.devicePixelRatio || 1 - let inputPatternSize = { width: 30, height: 20 } //임시 사이즈 - let patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해 + const inputPatternSize = { width: 30, height: 20 } //임시 사이즈 + const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해 if (templateType === 2) { //세로형이면 width height를 바꿈 @@ -3250,6 +3255,7 @@ export function useMode() { let polygonArray = [] + //패턴 폴리곤을 생성 후 배열에 담음 roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => { const drawPolygon = new QPolygon(patternPolygon, commonOption) canvas.add(drawPolygon) @@ -3259,9 +3265,13 @@ export function useMode() { }) canvas?.renderAll() + //지붕 폴리곤 recoil에 담음 setRoofPolygonArray(polygonArray) } + /** + * 가대 생성 로직 + */ const makeRoofTrestle = () => { if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) { alert('객체가 비어있습니다.') @@ -3282,8 +3292,13 @@ export function useMode() { strokeWidth: 3, } + /** + * 지붕가대 생성 후 가대 선택 이벤트를 추가하는 로직 + * @param polygon + */ function toggleSelection(polygon) { if (polygon.strokeWidth === defualtStrokeStyle.strokeWidth) { + //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄 polygon.set({ stroke: selectedStrokeStyle.stroke, strokeWidth: selectedStrokeStyle.strokeWidth, @@ -3292,6 +3307,7 @@ export function useMode() { canvas.discardActiveObject() // 객체의 활성 상태 해제 selectedAreaArray.push(polygon) } else { + //선택후 재선택하면 선택안됨으로 변경 polygon.set({ stroke: defualtStrokeStyle.stroke, strokeWidth: defualtStrokeStyle.strokeWidth, @@ -3299,6 +3315,7 @@ export function useMode() { }) canvas.discardActiveObject() // 객체의 활성 상태 해제 + //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함 const removeIndex = polygon.customIndex const removeArrayIndex = selectedAreaArray.findIndex((x) => x.customIndex === removeIndex) selectedAreaArray.splice(removeArrayIndex, 1) @@ -3306,6 +3323,7 @@ export function useMode() { canvas?.renderAll() } + //외각선을 안쪽으로 그려 가대선을 그린다. polygons.forEach((polygon, index) => { const trestlePolygon = handleOuterlinesTest(polygon, -12) trestlePolygon.setViewLengthText(false) //얘는 set으로 안먹는다... @@ -3319,25 +3337,45 @@ export function useMode() { lockScalingX: true, lockScalingY: true, bringToFront: true, - customIndex: polygon.customIndex, + customIndex: polygon.customIndex, //가대 폴리곤의 임시 인덱스를 넣어줌 }) + /** + * 가대 선택 이벤트 + */ trestlePolygon.on('mousedown', function () { - const customIndex = polygon.get('customIndex') toggleSelection(trestlePolygon) }) }) setSelectedCellRoofArray(selectedAreaArray) } + /** + * 가대 선택 후 셀 채우기 + */ const makeRoofFillCells = () => { - // const selectedCellRoofs = selectedCellRoofArray + const drawCellsArray = [] + if (selectedCellRoofArray.length === 0) { + //배열에 선택된 가대 셀이 없으면 리턴 alert('선택된 영역이 없습니다.') setMode(Mode.DEFAULT) //default 모드로 변경 return } + if (drewRoofCells.length > 0) { + //리코일에 + if (confirm('패널이 초기화 됩니다.')) { + drewRoofCells.forEach((cells, index) => { + cells.drawCells.forEach((cell) => { + canvas?.remove(cell) + }) + }) + setDrewRoofCells([]) + canvas?.renderAll() + } + } + const inputCellSize = { width: 172, height: 113 } const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고 @@ -3346,8 +3384,11 @@ export function useMode() { } selectedCellRoofArray.forEach((polygon, index) => { - polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 }) + const drawCells = polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 }) + drawCellsArray.push({ roofIndex: polygon.customIndex, drawCells: drawCells }) }) + + setDrewRoofCells(drawCellsArray) setMode(Mode.DEFAULT) //default 모드로 변경 } diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index c51a7061..6491dc2d 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -53,3 +53,10 @@ export const templateTypeState = atom({ default: 1, //1:모임지붕, 2:A타입, 3:B타입 dangerouslyAllowMutability: true, }) + +//셀 그린 이후에 생성하는 state +export const drewRoofCellsState = atom({ + key: 'drewRoofCells', + default: [], + dangerouslyAllowMutability: true, +})