Canvas 그리그 설정 수정
This commit is contained in:
changkyu choi
parent
9f695fbd79
commit
3a2657c1ea
@ -8,6 +8,8 @@ import { onlyNumberInputChange } from '@/util/input-utils'
|
||||
import { fabric } from 'fabric'
|
||||
import { gridColorState } from '@/store/gridAtom'
|
||||
import { settingModalGridOptionsState } from '@/store/settingAtom'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
|
||||
const TYPE = {
|
||||
DOT: 'DOT',
|
||||
@ -16,6 +18,7 @@ const TYPE = {
|
||||
|
||||
export default function DotLineGrid(props) {
|
||||
// const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const [close, setClose] = useState(false)
|
||||
const { setShowDotLineGridModal } = props
|
||||
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
|
||||
@ -27,6 +30,8 @@ export default function DotLineGrid(props) {
|
||||
const interval = useRecoilValue(dotLineIntervalSelector)
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
const { swalFire } = useSwal()
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@ -46,6 +51,12 @@ export default function DotLineGrid(props) {
|
||||
]
|
||||
const [selectOption, setSelectOption] = useState(SelectOption[0])
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('DotLineGrid useEffect 실행')
|
||||
fetchGridSettings()
|
||||
}, [objectNo])
|
||||
|
||||
const HandleClickClose = () => {
|
||||
// setClose(true)
|
||||
// setTimeout(() => {
|
||||
@ -64,118 +75,177 @@ export default function DotLineGrid(props) {
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
// 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
|
||||
canvas
|
||||
?.getObjects()
|
||||
.filter((obj) => obj.name === 'lineGrid')
|
||||
.forEach((obj) => canvas?.remove(obj))
|
||||
canvas
|
||||
?.getObjects()
|
||||
.filter((obj) => obj.name === 'dotGrid')
|
||||
.forEach((obj) => canvas?.remove(obj))
|
||||
// Canvas Grid Setting 조회 및 초기화
|
||||
const fetchGridSettings = async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
|
||||
|
||||
const horizontalInterval = interval.horizontalInterval
|
||||
const verticalInterval = interval.verticalInterval
|
||||
|
||||
if (dotLineGridSetting.DOT) {
|
||||
const circle = new fabric.Circle({
|
||||
radius: 2,
|
||||
fill: 'red',
|
||||
strokeWidth: 0.7,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
selectable: false,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockRotation: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
})
|
||||
|
||||
const patternSourceCanvas = new fabric.StaticCanvas(null, {
|
||||
width: horizontalInterval,
|
||||
height: verticalInterval,
|
||||
})
|
||||
|
||||
patternSourceCanvas.add(circle)
|
||||
|
||||
circle.set({
|
||||
left: patternSourceCanvas.width / 2,
|
||||
top: patternSourceCanvas.height / 2,
|
||||
})
|
||||
|
||||
patternSourceCanvas.renderAll()
|
||||
|
||||
const pattern = new fabric.Pattern({
|
||||
source: patternSourceCanvas.getElement(),
|
||||
repeat: 'repeat',
|
||||
})
|
||||
|
||||
const backgroundPolygon = new fabric.Polygon(
|
||||
[
|
||||
{ x: 0, y: 0 },
|
||||
{ x: canvas.width, y: 0 },
|
||||
{ x: canvas.width, y: canvas.height },
|
||||
{ x: 0, y: canvas.height },
|
||||
],
|
||||
{
|
||||
fill: pattern,
|
||||
selectable: false,
|
||||
name: 'dotGrid',
|
||||
const patternData = {
|
||||
INTERVAL: {
|
||||
type: res.gridType,
|
||||
horizontalInterval: res.gridHorizon,
|
||||
verticalInterval: res.gridVertical,
|
||||
ratioInterval: res.gridRatio,
|
||||
},
|
||||
)
|
||||
dimension: res.gridDimen,
|
||||
DOT: res.dotGridDisplay,
|
||||
LINE: res.lineGridDisplay,
|
||||
}
|
||||
|
||||
canvas.add(backgroundPolygon)
|
||||
backgroundPolygon.sendToBack()
|
||||
canvas.renderAll()
|
||||
const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
|
||||
|
||||
// dimension 값에 맞는 옵션을 선택
|
||||
setSelectOption(matchedOption)
|
||||
|
||||
// 서버에서 받은 데이터로 상태 업데이트
|
||||
setDotLineGridSettingState(patternData)
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
if (dotLineGridSetting.LINE) {
|
||||
for (let i = 0; i < canvas.height / verticalInterval + 1; i++) {
|
||||
const horizontalLine = new fabric.Line(
|
||||
[0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2],
|
||||
{
|
||||
stroke: gridColor,
|
||||
strokeWidth: 1,
|
||||
selectable: true,
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const patternData = {
|
||||
objectNo,
|
||||
dotGridDisplay: dotLineGridSetting.DOT,
|
||||
lineGridDisplay: dotLineGridSetting.LINE,
|
||||
gridType: dotLineGridSetting.INTERVAL.type,
|
||||
gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval,
|
||||
gridVertical: dotLineGridSetting.INTERVAL.verticalInterval,
|
||||
gridRatio: dotLineGridSetting.INTERVAL.ratioInterval,
|
||||
gridDimen: dotLineGridSetting.INTERVAL.dimension,
|
||||
}
|
||||
|
||||
// HTTP POST 요청 보내기
|
||||
await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
|
||||
swalFire({ text: getMessage(res.returnMessage) })
|
||||
|
||||
// 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
|
||||
canvas
|
||||
?.getObjects()
|
||||
.filter((obj) => obj.name === 'lineGrid')
|
||||
.forEach((obj) => canvas?.remove(obj))
|
||||
canvas
|
||||
?.getObjects()
|
||||
.filter((obj) => obj.name === 'dotGrid')
|
||||
.forEach((obj) => canvas?.remove(obj))
|
||||
|
||||
//const horizontalInterval = interval.horizontalInterval
|
||||
//const verticalInterval = interval.verticalInterval
|
||||
|
||||
if (patternData.dotGridDisplay) {
|
||||
const circle = new fabric.Circle({
|
||||
radius: 2,
|
||||
fill: 'red',
|
||||
strokeWidth: 0.7,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
selectable: false,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockRotation: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
name: 'lineGrid',
|
||||
strokeDashArray: [5, 2],
|
||||
opacity: 0.3,
|
||||
direction: 'horizontal',
|
||||
},
|
||||
)
|
||||
canvas.add(horizontalLine)
|
||||
}
|
||||
})
|
||||
|
||||
for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) {
|
||||
const verticalLine = new fabric.Line(
|
||||
[i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height],
|
||||
{
|
||||
stroke: gridColor,
|
||||
strokeWidth: 1,
|
||||
selectable: true,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockRotation: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
name: 'lineGrid',
|
||||
strokeDashArray: [5, 2],
|
||||
opacity: 0.3,
|
||||
direction: 'vertical',
|
||||
},
|
||||
)
|
||||
canvas.add(verticalLine)
|
||||
}
|
||||
const patternSourceCanvas = new fabric.StaticCanvas(null, {
|
||||
width: patternData.gridHorizon,
|
||||
height: patternData.gridVertical,
|
||||
})
|
||||
|
||||
patternSourceCanvas.add(circle)
|
||||
|
||||
circle.set({
|
||||
left: patternSourceCanvas.width / 2,
|
||||
top: patternSourceCanvas.height / 2,
|
||||
})
|
||||
|
||||
patternSourceCanvas.renderAll()
|
||||
|
||||
const pattern = new fabric.Pattern({
|
||||
source: patternSourceCanvas.getElement(),
|
||||
repeat: 'repeat',
|
||||
})
|
||||
|
||||
const backgroundPolygon = new fabric.Polygon(
|
||||
[
|
||||
{ x: 0, y: 0 },
|
||||
{ x: canvas.width, y: 0 },
|
||||
{ x: canvas.width, y: canvas.height },
|
||||
{ x: 0, y: canvas.height },
|
||||
],
|
||||
{
|
||||
fill: pattern,
|
||||
selectable: false,
|
||||
name: 'dotGrid',
|
||||
},
|
||||
)
|
||||
|
||||
canvas.add(backgroundPolygon)
|
||||
backgroundPolygon.sendToBack()
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
if (patternData.lineGridDisplay) {
|
||||
for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
|
||||
const horizontalLine = new fabric.Line(
|
||||
[
|
||||
0,
|
||||
i * patternData.gridVertical - patternData.gridVertical / 2,
|
||||
canvas.width,
|
||||
i * patternData.gridVertical - patternData.gridVertical / 2,
|
||||
],
|
||||
{
|
||||
stroke: gridColor,
|
||||
strokeWidth: 1,
|
||||
selectable: true,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockRotation: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
name: 'lineGrid',
|
||||
strokeDashArray: [5, 2],
|
||||
opacity: 0.3,
|
||||
direction: 'horizontal',
|
||||
},
|
||||
)
|
||||
canvas.add(horizontalLine)
|
||||
}
|
||||
|
||||
for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
|
||||
const verticalLine = new fabric.Line(
|
||||
[
|
||||
i * patternData.gridHorizon - patternData.gridHorizon / 2,
|
||||
0,
|
||||
i * patternData.gridHorizon - patternData.gridHorizon / 2,
|
||||
canvas.height,
|
||||
],
|
||||
{
|
||||
stroke: gridColor,
|
||||
strokeWidth: 1,
|
||||
selectable: true,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockRotation: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
name: 'lineGrid',
|
||||
strokeDashArray: [5, 2],
|
||||
opacity: 0.3,
|
||||
direction: 'vertical',
|
||||
},
|
||||
)
|
||||
canvas.add(verticalLine)
|
||||
}
|
||||
}
|
||||
|
||||
canvas.renderAll()
|
||||
})
|
||||
} catch (error) {
|
||||
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
||||
}
|
||||
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
const handleRadioChange = (e) => {
|
||||
|
||||
@ -18,6 +18,7 @@ export default function GridOption(props) {
|
||||
const [color, setColor] = useColor(gridColor)
|
||||
|
||||
useEffect(() => {
|
||||
console.log('GridOption useEffect 실행')
|
||||
setGridColor(color.hex)
|
||||
}, [color])
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user