Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev
This commit is contained in:
commit
e51f0b1dcb
@ -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()
|
||||
|
||||
@ -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 모드로 변경
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user