From f36d770dc1898b0a26b74b66e4a4d95bccb993c3 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 2 Aug 2024 16:28:03 +0900 Subject: [PATCH] =?UTF-8?q?=EC=95=88=EC=93=B0=EB=8A=94=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 45 +++++--------- src/components/fabric/QPolygon.js | 4 -- src/components/fabric/QRect.js | 98 ------------------------------- src/hooks/useCanvas.js | 18 +++++- src/hooks/useMode.js | 24 +------- 5 files changed, 31 insertions(+), 158 deletions(-) delete mode 100644 src/components/fabric/QRect.js 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) => {