오각형 도머 크기변경, 이동 기능 추가
This commit is contained in:
yjnoh
parent
e0cf50beec
commit
223bf2dddf
@ -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 (
|
||||
|
||||
@ -38,7 +38,7 @@ const PentagonDormer = forwardRef((props, refs) => {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '60px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
@ -60,7 +60,7 @@ const PentagonDormer = forwardRef((props, refs) => {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '60px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} />
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -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()
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user