diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 93cc12d2..449f7c5f 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -2,11 +2,10 @@ import { useCanvas } from '@/hooks/useCanvas'
import { useEffect, useState } from 'react'
import { Mode, useMode } from '@/hooks/useMode'
import { Button } from '@nextui-org/react'
-import QRect from '@/components/fabric/QRect'
import RangeSlider from './ui/RangeSlider'
import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, fontSizeState, roofMaterialState, roofState, sortedPolygonArray } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { getCanvasState, insertCanvasState } from '@/lib/canvas'
import { calculateIntersection } from '@/util/canvas-util'
@@ -60,22 +59,6 @@ export default function Roof2() {
changeMode(canvas, mode)
}, [canvas, mode])
- const makeRect = () => {
- if (canvas) {
- const rect = new QRect({
- left: 100,
- top: 100,
- fill: 'transparent',
- stroke: 'black',
- width: 400,
- height: 100,
- fontSize: fontSize,
- })
-
- canvas?.add(rect)
- }
- }
-
const makeLine = () => {
if (canvas) {
const line = new QLine([50, 50, 200, 50], {
@@ -265,7 +248,7 @@ export default function Roof2() {
{ x: 675, y: 275 },
{ x: 450, y: 850 },
]
- const polygon = new QPolygon(type2, {
+ const polygon = new QPolygon(type1, {
fill: 'transparent',
stroke: 'black',
strokeWidth: 1,
@@ -451,28 +434,34 @@ export default function Roof2() {
const createRoofRack = () => {
const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
- roofs.forEach((roof) => {
+ roofs.forEach((roof, index) => {
let maxLengthLine = roof.lines.reduce((acc, cur) => {
return acc.length > cur.length ? acc : cur
})
const offsetPolygonPoint = offsetPolygon(roof.points, -20, 0)
- const newPoly = new QPolygon(offsetPolygonPoint, {
+ const trestlePoly = new QPolygon(offsetPolygonPoint, {
fill: 'transparent',
stroke: 'red',
strokeWidth: 1,
selectable: true,
fontSize: fontSize,
- name: 'wall',
+ name: 'trestle',
+ lockMovementX: true, // X 축 이동 잠금
+ lockMovementY: true, // Y 축 이동 잠금
+ lockRotation: true, // 회전 잠금
+ lockScalingX: true, // X 축 크기 조정 잠금
+ lockScalingY: true, // Y 축 크기 조정 잠금
+ idx: index,
})
- canvas?.add(newPoly)
+ canvas?.add(trestlePoly)
if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
- newPoly.fillCell({ width: 100, height: 50, padding: 10 })
+ trestlePoly.fillCell({ width: 100, height: 50, padding: 10 })
} else {
- newPoly.fillCell({ width: 50, height: 100, padding: 10 })
+ trestlePoly.fillCell({ width: 50, height: 100, padding: 10 })
}
})
}
@@ -515,9 +504,6 @@ export default function Roof2() {
-
@@ -534,9 +520,6 @@ export default function Roof2() {
축소
현재 줌 : {zoom}%
-
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 13dcdd5f..7defdaa2 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -255,10 +255,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
name: 'cell',
})
- rect.on('mousedown', () => {
- rect.set({ fill: 'red' })
- })
-
drawCellsArray.push(rect) //배열에 넣어서 반환한다
this.canvas.add(rect)
}
diff --git a/src/components/fabric/QRect.js b/src/components/fabric/QRect.js
deleted file mode 100644
index ad6c8ae9..00000000
--- a/src/components/fabric/QRect.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { fabric } from 'fabric'
-export default class QRect extends fabric.Rect {
- #text = []
- #viewLengthText
- #fontSize
- type = 'QRect'
- constructor(option) {
- if (!option.fontSize) {
- throw new Error('Font size is required.')
- }
- super(option)
- this.#fontSize = option.fontSize
- this.#init(option)
- this.#addControl()
- }
-
- #init(option) {
- this.#viewLengthText = option.viewLengthText ?? true
- }
-
- setViewLengthText(bool) {
- this.#viewLengthText = bool
- this.#addLengthText()
- }
-
- setFontSize(fontSize) {
- this.#fontSize = fontSize
- this.#addLengthText()
- }
-
- #addControl() {
- this.on('removed', () => {
- if (this.#text.length > 0) {
- this.#text.forEach((text) => {
- this.canvas.remove(text)
- })
- this.#text = []
- }
- })
-
- this.on('added', () => {
- this.#addLengthText()
- })
-
- this.on('modified', (e) => {
- this.#addLengthText()
- })
-
- this.on('scaling', (e) => {
- this.#addLengthText()
- })
-
- this.on('moving', () => {
- this.#addLengthText()
- })
- }
- #addLengthText() {
- if (this.#text.length > 0) {
- this.#text.forEach((text) => {
- this.canvas.remove(text)
- })
- this.#text = []
- }
-
- if (!this.#viewLengthText) {
- return
- }
-
- const scaleX = this.scaleX
- const scaleY = this.scaleY
-
- const lines = [
- {
- start: { x: this.left, y: this.top },
- end: { x: this.left + this.width * scaleX, y: this.top },
- },
- {
- start: { x: this.left, y: this.top + this.height * scaleY },
- end: { x: this.left, y: this.top },
- },
- ]
-
- lines.forEach((line) => {
- const dx = line.end.x - line.start.x
- const dy = line.end.y - line.start.y
- const length = Math.sqrt(dx * dx + dy * dy)
-
- const text = new fabric.Text(length.toFixed(0), {
- left: (line.start.x + line.end.x) / 2,
- top: (line.start.y + line.end.y) / 2,
- fontSize: this.#fontSize,
- selectable: false,
- })
- this.#text.push(text)
- this.canvas.add(text)
- })
- }
-}
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 21e5e2cb..77f261cc 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -5,7 +5,6 @@ import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/can
import { useRecoilState } from 'recoil'
import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
-import QRect from '@/components/fabric/QRect'
import { QPolygon } from '@/components/fabric/QPolygon'
import { defineQLine } from '@/util/qline-utils'
import { defineQPloygon } from '@/util/qpolygon-utils'
@@ -65,6 +64,7 @@ export function useCanvas(id) {
if (canvas) {
initialize()
canvas?.on('object:added', onChange)
+ canvas?.on('object:added', addEventOnObject)
canvas?.on('object:modified', onChange)
canvas?.on('object:removed', onChange)
canvas?.on('mouse:move', drawMouseLines)
@@ -93,6 +93,21 @@ export function useCanvas(id) {
canvas?.off('mouse:down', handleMouseDown)
}
+ const addEventOnObject = (e) => {
+ const target = e.target
+ if (target.name === 'cell') {
+ target.on('mousedown', () => {
+ target.set({ fill: 'red' })
+ })
+ }
+
+ if (target.name === 'trestle') {
+ target.on('mousedown', () => {
+ target.set({ strokeWidth: 5 })
+ })
+ }
+ }
+
/**
* 마우스 포인터의 가이드라인을 제거합니다.
*/
@@ -116,7 +131,6 @@ export function useCanvas(id) {
fabric.QPolygon = QPolygon
QPolygon.prototype.canvas = canvas
QLine.prototype.canvas = canvas
- QRect.prototype.canvas = canvas
defineQLine()
defineQPloygon()
}
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 1862a981..61c1a0a7 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1,5 +1,4 @@
import { useEffect, useRef, useState } from 'react'
-import QRect from '@/components/fabric/QRect'
import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
import { useRecoilState } from 'recoil'
@@ -615,27 +614,6 @@ export function useMode() {
rect.set({ width: Math.abs(origX - pointer.x) })
rect.set({ height: Math.abs(origY - pointer.y) })
})
-
- canvas.on('mouse:up', function (o) {
- const pointer = canvas.getPointer(o.e)
- const qRect = new QRect({
- left: origX,
- top: origY,
- originX: 'left',
- originY: 'top',
- width: pointer.x - origX,
- height: pointer.y - origY,
- angle: 0,
- viewLengthText: true,
- fill: 'transparent',
- stroke: 'black',
- transparentCorners: false,
- fontSize: fontSize,
- })
- canvas.remove(rect)
- canvas.add(qRect)
- isDown = false
- })
}
/**
@@ -1114,7 +1092,7 @@ export function useMode() {
*벽 지붕 외곽선 생성 polygon을 입력받아 만들기
*/
const handleOuterlinesTest2 = (polygon, offset = 71) => {
- const offsetPoints = offsetPolygon(polygon.points, 50)
+ const offsetPoints = offsetPolygon(polygon.points, offset)
const roof = makePolygon(
offsetPoints.map((point) => {