diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx index af239258..1b20b853 100644 --- a/src/components/floor-plan/modal/object/SizeSetting.jsx +++ b/src/components/floor-plan/modal/object/SizeSetting.jsx @@ -15,7 +15,7 @@ export default function SizeSetting(props) { const { id, pos = contextPopupPosition, target } = props const { getMessage } = useMessage() const { closePopup } = usePopup() - const { reSizeObject } = useObjectBatch() + const { reSizeObjectBatch } = useObjectBatch({}) const widthRef = useRef(null) const heightRef = useRef(null) @@ -30,7 +30,7 @@ export default function SizeSetting(props) { const width = widthRef.current.value const height = heightRef.current.value - reSizeObject(settingTarget, target, width, height) + reSizeObjectBatch(settingTarget, target, width, height) } return ( diff --git a/src/components/floor-plan/modal/object/type/PentagonDormer.jsx b/src/components/floor-plan/modal/object/type/PentagonDormer.jsx index 73f9c5d8..c67a08fc 100644 --- a/src/components/floor-plan/modal/object/type/PentagonDormer.jsx +++ b/src/components/floor-plan/modal/object/type/PentagonDormer.jsx @@ -38,7 +38,7 @@ const PentagonDormer = forwardRef((props, refs) => {
- +
mm
@@ -60,7 +60,7 @@ const PentagonDormer = forwardRef((props, refs) => {
- +
mm
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js index 356c100e..2902e0c3 100644 --- a/src/hooks/common/useCommonUtils.js +++ b/src/hooks/common/useCommonUtils.js @@ -20,7 +20,6 @@ export function useCommonUtils() { const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText')) const commonTextFont = useRecoilValue(fontSelector('commonText')) const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState) - const { addPopup } = usePopup() useEffect(() => { @@ -749,12 +748,14 @@ export function useCommonUtils() { left: originObjLeft, top: originObjTop, }) + obj.fire('modified') } else { // 다른 객체의 경우 left, top 절대 좌표 설정 obj.set({ left: obj.left, top: obj.top, }) + obj.fire('modified') } obj.setCoords() // 좌표 반영 }) @@ -777,12 +778,14 @@ export function useCommonUtils() { left: originObjLeft, top: originObjTop, }) + obj.fire('modified') } else { targetObj.set({ ...targetObj, left: targetObj.left, top: targetObj.top, }) + obj.fire('modified') } targetObj.setCoords() } diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index c55841c6..df9c64ba 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -43,8 +43,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) { // 클릭한 위치에 있는 객체 찾기 const clickedObject = objects.find((obj) => { - console.log(obj) - if (obj.type === 'QPolygon') { const polygon = pointsToTurfPolygon(obj.getCurrentPoints()) const turfPointer = turf.point([pointer.x, pointer.y]) @@ -451,6 +449,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { setSurfaceShapePattern(leftTriangle) setSurfaceShapePattern(rightTriangle) //방향 + drawDirectionArrow(leftTriangle) drawDirectionArrow(rightTriangle) @@ -654,8 +653,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) { pitch: pitch, }) - canvas?.add(leftPentagon) - canvas?.add(rightPentagon) + // canvas?.add(leftPentagon) + // canvas?.add(rightPentagon) //패턴 setSurfaceShapePattern(leftPentagon) @@ -664,6 +663,39 @@ export function useObjectBatch({ isHidden, setIsHidden }) { drawDirectionArrow(leftPentagon) drawDirectionArrow(rightPentagon) + let offsetPolygon + + if (offsetRef > 0) { + canvas?.remove(dormer) + + offsetPolygon = new QPolygon(dormer.points, { + selectable: true, + lockMovementX: true, // X 축 이동 잠금 + lockMovementY: true, // Y 축 이동 잠금 + lockRotation: true, // 회전 잠금 + viewLengthText: true, + name: 'pentagonDormerOffset', + id: id, + fill: 'rgba(255, 255, 255, 0.6)', + stroke: 'black', + strokeWidth: 1, + originX: 'center', + originY: 'center', + fontSize: lengthTextFont.fontSize.value, + fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: lengthTextFont.fontWeight.value, + }) + } + + const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon] + + const objectGroup = new fabric.Group(groupPolygon, { + subTargetCheck: true, + name: dormerName, + id: id, + }) + canvas?.add(objectGroup) + isDown = false initEvent() @@ -826,7 +858,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { return [leftPoints, rightPoints] } - const reSizeObject = (side, target, width, height) => { + const reSizeObjectBatch = (side, target, width, height) => { console.log('reSizeTarget', target) target.getObjects().forEach((obj) => { @@ -889,7 +921,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) { // target.setCoords() canvas.renderAll() - // reGroupObject(target) + reGroupObject(target) } const reGroupObject = (groupObj) => { @@ -905,6 +937,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }) reGroupObjects.push(newObj) canvas.remove(obj) + + if (obj.direction) { + drawDirectionArrow(obj) + } }) const reGroup = new fabric.Group(reGroupObjects, { @@ -917,11 +953,33 @@ export function useObjectBatch({ isHidden, setIsHidden }) { canvas?.remove(groupObj) } + const moveObjectBatch = () => { + const obj = canvas.getActiveObject() + + if (obj) { + obj.set({ + lockMovementX: false, + lockMovementY: false, + }) + + addCanvasMouseEventListener('mouse:up', (e) => { + obj.set({ + lockMovementX: true, + lockMovementY: true, + }) + initEvent() + obj.setCoords() + reGroupObject(obj) + }) + } + } + return { applyOpeningAndShadow, applyDormers, splitDormerTriangle, splitDormerPentagon, - reSizeObject, + reSizeObjectBatch, + moveObjectBatch, } } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index f8dc92b5..79eacd4c 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -21,7 +21,6 @@ import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/Line import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting' import { useCommonUtils } from './common/useCommonUtils' -import { useObjectBatch } from './object/useObjectBatch' import { useMessage } from '@/hooks/useMessage' import { useCanvasEvent } from '@/hooks/useCanvasEvent' import { contextMenuListState, contextMenuState } from '@/store/contextMenu' @@ -33,6 +32,7 @@ import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInse import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove' import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert' import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit' +import { useObjectBatch } from '@/hooks/object/useObjectBatch' export function useContextMenu() { const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴 @@ -49,6 +49,7 @@ export function useContextMenu() { const [cell, setCell] = useState(null) const [column, setColumn] = useState(null) const { handleZoomClear } = useCanvasEvent() + const { moveObjectBatch } = useObjectBatch({}) const currentMenuSetting = () => { switch (currentMenu) { @@ -279,7 +280,7 @@ export function useContextMenu() { id: 'dormerMove', shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, - fn: () => moveObject(), + fn: () => moveObjectBatch(), }, { id: 'dormerCopy', diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index c147e2fe..5a7d3062 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -113,6 +113,12 @@ export const usePolygon = () => { return } + //동일 아이디가 있으면 일단 지우고 다시 그린다 + const existArrow = polygon.canvas.getObjects().filter((obj) => obj.name === 'arrow' && obj.parentId === polygon.id) + if (existArrow.length > 0) { + polygon.canvas.remove(...existArrow) + } + polygon.canvas .getObjects() .filter((obj) => obj.name === 'flowText' && obj.parent === polygon.arrow)