qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

선택 셀 지우기 추가

Browse Source
This commit is contained in:
hyojun.choi 2024-08-05 12:18:07 +09:00
parent 79df68e395
commit 4c76449789
5 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Roof2.jsx
View File

@ -249,7 +249,7 @@ export default function Roof2() {
{ x: 675, y: 275 },
{ x: 450, y: 850 },
]
const polygon = new QPolygon(type1, {
const polygon = new QPolygon(type2, {
fill: 'transparent',
stroke: 'black',
strokeWidth: 1,
@ -259,9 +259,7 @@ export default function Roof2() {
})
canvas?.add(polygon)
handleOuterlinesTest2(polygon)
// const lines = togglePolygonLine(polygon)
// togglePolygonLine(lines[0])
handleOuterlinesTest2(polygon, 50)
}
const rotateShape = () => {
@ -433,6 +431,14 @@ export default function Roof2() {
makeRoofPatternPolygon(roofStyle)
}
const deleteCell = () => {
const selectedCells = canvas?.getObjects().filter((obj) => obj.name === 'cell' && obj.selected)
selectedCells.forEach((cell) => {
canvas?.remove(cell)
})
}
return (
<>
{canvas && (
@ -539,6 +545,9 @@ export default function Roof2() {
<Button className="m-1 p-2" onClick={createRoofRack}>
지붕가대
</Button>
<Button className="m-1 p-2" onClick={deleteCell}>
선택 셀 지우기
</Button>
<Button className="m-1 p-2" color={`${showControl ? 'primary' : 'default'}`} onClick={handleShowController}>
canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}
</Button>

35
src/components/fabric/QPolygon.js
View File

@ -14,6 +14,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
ridges: [],
connectRidges: [],
cells: [],
parentId: null,
initialize: function (points, options, canvas) {
// 소수점 전부 제거
points.forEach((point) => {
@ -21,6 +22,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
point.y = Math.round(point.y)
})
options.sort = options.sort ?? true
options.parentId = options.parentId ?? null
if (!options.sort && points.length <= 8) {
points = sortedPointLessEightPoint(points)
} else {
@ -150,7 +153,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
},
addLengthText() {
let points = this.points
let points = this.getCurrentPoints()
points.forEach((start, i) => {
const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === i)
@ -201,7 +204,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.canvas = canvas
},
fillCell(cell = { width: 50, height: 100, padding: 10 }) {
const points = this.points
const points = this.getCurrentPoints()
const minX = Math.min(...points.map((p) => p.x))
const maxX = Math.max(...points.map((p) => p.x))
@ -256,6 +259,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
opacity: 0.8,
name: 'cell',
idx: idx,
parentId: this.id,
})
idx++
@ -330,24 +334,15 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
return minDistance
},
getCurrentPoints() {
const scaleX = this.scaleX
const scaleY = this.scaleY
const left = this.left
const top = this.top
// 시작점
const point = this.points[0]
const movingX = left - point.x * scaleX
const movingY = top - point.y * scaleY
return this.points.map((point) => {
return {
x: point.x * scaleX + movingX,
y: point.y * scaleY + movingY,
}
})
const pathOffset = this.get('pathOffset')
const matrix = this.calcTransformMatrix()
return this.get('points')
.map(function (p) {
return new fabric.Point(p.x - pathOffset.x, p.y - pathOffset.y)
})
.map(function (p) {
return fabric.util.transformPoint(p, matrix)
})
},
setWall: function (wall) {
this.wall = wall

18
src/hooks/useCanvas.js
View File

@ -97,13 +97,27 @@ export function useCanvas(id) {
const target = e.target
if (target.name === 'cell') {
target.on('mousedown', () => {
target.set({ fill: 'red' })
if (target.get('selected')) {
target.set({ selected: false })
target.set({ fill: '#BFFD9F' })
} else {
target.set({ selected: true })
target.set({ fill: 'red' })
}
canvas?.renderAll()
})
}
if (target.name === 'trestle') {
target.on('mousedown', () => {
target.set({ strokeWidth: 5 })
if (target.get('selected')) {
target.set({ strokeWidth: 1 })
target.set({ selected: false })
} else {
target.set({ strokeWidth: 5 })
target.set({ selected: true })
}
canvas?.renderAll()
})
}
}

1
src/hooks/useMode.js
View File

@ -3389,6 +3389,7 @@ export function useMode() {
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
idx: index,
parentId: roof.id,
})
canvas?.add(trestlePoly)

8
src/util/qpolygon-utils.js
View File

@ -533,7 +533,7 @@ export const dividePolygon = (polygon) => {
const newPolygon = new QPolygon(polygonPoints, {
fontSize: polygon.fontSize,
id: polygon.id,
parentId: polygon.id,
name: 'roof',
selectable: false,
stroke: 'black',
@ -578,7 +578,7 @@ export const dividePolygon = (polygon) => {
const newPolygon = new QPolygon(polygonPoints, {
fontSize: polygon.fontSize,
id: polygon.id,
parentId: polygon.id,
name: 'roof',
selectable: false,
stroke: 'black',
@ -596,7 +596,7 @@ export const dividePolygon = (polygon) => {
const newPolygon = new QPolygon(polygonPoints, {
fontSize: polygon.fontSize,
id: polygon.id,
parentId: polygon.id,
name: 'roof',
selectable: false,
stroke: 'black',
@ -671,7 +671,7 @@ export const dividePolygon = (polygon) => {
const newPolygon = new QPolygon(polygonPoints, {
fontSize: polygon.fontSize,
id: polygon.id,
parentId: polygon.id,
name: 'roof',
selectable: false,
stroke: 'black',