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

라인속성 작업 추가

Browse Source
This commit is contained in:
yjnoh 2024-11-11 16:31:45 +09:00
parent ed67cbd614
commit 8ed58b1618
8 changed files with 181 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/common/common.js
View File

@ -61,6 +61,8 @@ export const LINE_TYPE = {
DEFAULT: 'default',
EAVES: 'eaves',
GABLE: 'gable',
GABLE_LEFT: 'gableLeft', //케라바 왼쪽
GABLE_RIGHT: 'gableRight', //케라바 오른쪽
WALL: 'wall',
HIPANDGABLE: 'hipAndGable',
JERKINHEAD: 'jerkinhead',
@ -76,28 +78,19 @@ export const LINE_TYPE = {
GABLE: 'gable',
VALLEY: 'valley',
VERGE: 'verge',
ONESIDE_FLOW_RIDGE: 'onesideFlowRidge', //한쪽흐름 용마루
YOSEMUNE: 'yosemune', //요세무네
VALLEY: 'valley', //골짜기
L_ABANDON_VALLEY: 'lAbandonValley', //l의버림계곡
MANSARD: 'mansard', //맨사드
WALL_COLLECTION: 'wallCollection', //벽취합
WALL_COLLECTION_TYPE: 'wallCollectionType', //벽취합(형)
WALL_COLLECTION_FLOW: 'wallCollectionFlow', //벽취합(흐름)
WALL_COLLECTION_FLOW_LEFT: 'wallCollectionFlowLeft', //벽취합(흐름 왼쪽)
WALL_COLLECTION_FLOW_RIGHT: 'wallCollectionFlowRight', //벽취합(흐름 오른쪽)
},
}
export const LineType = {
EAVES: 'eaves', // 처마
RIDGE: 'ridge', // 용마루....
YOSEMUNE: 'yosemune', //요세무네
ONESIDE_FLOW_RIDGE: 'onesideFlowRidge', //한쪽흐름 용마루
WALL_COLLECTION: 'wallCollection', //벽취합
WALL_COLLECTION_TYPE: 'wallCollectionType', //벽취합(형)
WALL_COLLECTION_FLOW: 'wallCollectionFlow', //벽취합(흐름)
WALL_COLLECTION_FLOW_LEFT: 'wallCollectionFlowLeft', //벽취합(흐름 왼쪽)
WALL_COLLECTION_FLOW_RIGHT: 'wallCollectionFlowRight', //벽취합(흐름 오른쪽)
KERABA: 'keraba', //케라바
KERABA_LEFT: 'kerabaLeft', //케라바 왼쪽
KERABA_RIGHT: 'kerabaRight', //케라바 오른쪽
VALLEY: 'valley', //골짜기
L_ABANDON_VALLEY: 'lAbandonValley', //l의버림계곡
MANSARD: 'mansard', //맨사드
NO_SETTING: 'noSetting', //설정없음
}
// 오브젝트 배치 > 개구배치, 그림자배치
export const BATCH_TYPE = {
OPENING: 'opening',
@ -162,6 +155,8 @@ export const SAVE_KEY = [
'planeSize',
'actualSize',
'surfaceId',
'lines',
'offset',
'arrow',
]

4
src/components/auth/Login.jsx
View File

@ -83,7 +83,7 @@ export default function Login() {
///////////////////////////////////////////////////////////
// 임시 로그인 처리
setSession({
userId: 'NEW016610',
userId: 'NEW0166102',
saleStoreId: null,
name: null,
mail: null,
@ -101,7 +101,7 @@ export default function Login() {
custCd: '100000',
})
setSessionState({
userId: 'NEW016610',
userId: 'NEW0166102',
saleStoreId: null,
name: null,
mail: null,

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

@ -191,6 +191,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
line.endPoint = nextPoint
this.lines.push(line)
})
// }
},
// 보조선 그리기

46
src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
View File

@ -6,48 +6,54 @@ import { usePopup } from '@/hooks/usePopup'
import { useState, useEffect } from 'react'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
export default function LinePropertySetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, target } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty } = useSurfaceShapeBatch()
const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch()
const { initEvent } = useEvent()
const properties = [
{ name: getMessage('eaves.line'), value: 'eaves' },
{ name: getMessage('ridge'), value: 'ridge' },
{ name: getMessage('oneside.flow.ridge'), value: 'onesideFlowRidge' },
{ name: getMessage('gable'), value: 'gable' },
{ name: getMessage('gable.left'), value: 'gableLeft' },
{ name: getMessage('gable.right'), value: 'gableRight' },
{ name: getMessage('yosemune'), value: 'yosemune' },
{ name: getMessage('valley'), value: 'valley' },
{ name: getMessage('l.abandon.valley'), value: 'lAbandonValley' },
{ name: getMessage('mansard'), value: 'mansard' },
{ name: getMessage('wall.merge'), value: 'wallCollection' },
{ name: getMessage('wall.merge.type'), value: 'wallCollectionType' },
{ name: getMessage('wall.merge.flow'), value: 'wallCollectionFlow' },
{ name: getMessage('wall.merge.flow.left'), value: 'wallCollectionFlowLeft' },
{ name: getMessage('wall.merge.flow.right'), value: 'wallCollectionFlowRight' },
{ name: getMessage('no.setting'), value: 'noSetting' },
{ name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES },
{ name: getMessage('ridge'), value: LINE_TYPE.SUBLINE.RIDGE },
{ name: getMessage('oneside.flow.ridge'), value: LINE_TYPE.SUBLINE.ONESIDE_FLOW_RIDGE },
{ name: getMessage('gable'), value: LINE_TYPE.WALLLINE.GABLE },
{ name: getMessage('gable.left'), value: LINE_TYPE.WALLLINE.GABLE_LEFT },
{ name: getMessage('gable.right'), value: LINE_TYPE.WALLLINE.GABLE_RIGHT },
{ name: getMessage('yosemune'), value: LINE_TYPE.SUBLINE.YOSEMUNE },
{ name: getMessage('valley'), value: LINE_TYPE.SUBLINE.YOSEMUNE },
{ name: getMessage('l.abandon.valley'), value: LINE_TYPE.SUBLINE.L_ABANDON_VALLEY },
{ name: getMessage('mansard'), value: LINE_TYPE.SUBLINE.MANSARD },
{ name: getMessage('wall.merge'), value: LINE_TYPE.SUBLINE.WALL_COLLECTION },
{ name: getMessage('wall.merge.type'), value: LINE_TYPE.SUBLINE.WALL_COLLECTION_TYPE },
{ name: getMessage('wall.merge.flow'), value: LINE_TYPE.SUBLINE.WALL_COLLECTION_FLOW },
{ name: getMessage('wall.merge.flow.left'), value: LINE_TYPE.SUBLINE.WALL_COLLECTION_FLOW_LEFT },
{ name: getMessage('wall.merge.flow.right'), value: LINE_TYPE.SUBLINE.WALL_COLLECTION_FLOW_RIGHT },
{ name: getMessage('no.setting'), value: LINE_TYPE.WALLLINE.DEFAULT },
]
const [selectedProperty, setSelectedProperty] = useState(null)
useEffect(() => {
changeSurfaceLinePropertyEvent(target)
changeSurfaceLinePropertyEvent()
return () => {
initEvent()
}
}, [])
const handleClosePopup = () => {
closePopup(id)
changeSurfaceLinePropertyReset(target)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
<button className="modal-close" onClick={() => handleClosePopup()}>
닫기
</button>
</div>
@ -79,7 +85,7 @@ export default function LinePropertySetting(props) {
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty)}>
<button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty, target)}>
{getMessage('modal.common.save')}
</button>
</div>

2
src/hooks/common/useCommonUtils.js
View File

@ -710,7 +710,7 @@ export function useCommonUtils() {
canvas?.remove(centerLine, ...extendLine, ...arrows, textObj)
const reGroup = new fabric.Group(reGroupObj, {
name: 'dimensionLine',
name: 'dimensionGroup',
selectable: true,
lineDirection: originLineDirection,
groupId: id,

113
src/hooks/surface/useSurfaceShapeBatch.js
View File

@ -894,70 +894,75 @@ export function useSurfaceShapeBatch() {
})
}
const changeSurfaceLinePropertyEvent = (roof) => {
const changeSurfaceLinePropertyEvent = () => {
let tmpLines = []
roof.set({
selectable: false,
})
canvas.discardActiveObject()
roof.lines.forEach((obj, index) => {
const tmpLine = new QLine([obj.x1, obj.y1, obj.x2, obj.y2], {
...obj,
stroke: 'rgb(3, 255, 0)',
strokeWidth: 8,
selectable: true,
name: 'lineProperty',
index: index,
const roof = canvas.getActiveObject()
if (roof) {
roof.set({
selectable: false,
})
tmpLines.push(tmpLine)
canvas.add(tmpLine)
})
addCanvasMouseEventListener('mouse:down', (e) => {
const selectedLine = e.target
if (selectedLine) {
selectedLine.set({
stroke: 'red',
name: 'selectedLineProperty',
roof.lines.forEach((obj, index) => {
const tmpLine = new QLine([obj.x1, obj.y1, obj.x2, obj.y2], {
...obj,
stroke: 'rgb(3, 255, 0)',
strokeWidth: 8,
selectable: true,
name: 'lineProperty',
lineIndex: index,
})
tmpLines.forEach((line) => {
if (line.index !== selectedLine.index) {
tmpLines.push(tmpLine)
canvas.add(tmpLine)
})
addCanvasMouseEventListener('mouse:down', (e) => {
const selectedLine = e.target
if (selectedLine && selectedLine.name !== 'roof') {
tmpLines.forEach((line) => {
line.set({
stroke: 'rgb(3, 255, 0)',
name: 'lineProperty',
})
}
})
} else {
tmpLines.forEach((line) => {
line.set({
stroke: 'rgb(3, 255, 0)',
name: 'lineProperty',
})
})
}
})
selectedLine.set({
stroke: 'red',
name: 'selectedLineProperty',
})
} else {
tmpLines.forEach((line) => {
line.set({
stroke: 'rgb(3, 255, 0)',
name: 'lineProperty',
})
})
}
})
canvas.renderAll()
canvas.renderAll()
}
canvas.discardActiveObject()
}
const changeSurfaceLineProperty = (property) => {
console.log(property)
const changeSurfaceLineProperty = (property, roof) => {
if (!property) {
swalFire({ text: getMessage('modal.line.property.change'), icon: 'error' })
return
}
const selectedLine = canvas.getActiveObjects()
if (selectedLine && selectedLine[0].name === 'selectedLineProperty') {
const selectedLine = canvas.getActiveObjects()[0] //배열로 떨어짐 한개만 선택가능
if (selectedLine && selectedLine.name === 'selectedLineProperty') {
swalFire({
text: getMessage('modal.line.property.change.confirm'),
type: 'confirm',
confirmFn: () => {
selectedLine.set({
const lineIndex = selectedLine.lineIndex
roof.lines[lineIndex].attributes = {
...roof.lines[lineIndex].attributes,
type: property.value,
})
}
canvas.renderAll()
},
})
} else {
@ -965,6 +970,29 @@ export function useSurfaceShapeBatch() {
}
}
const changeSurfaceLinePropertyReset = (roof) => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'lineProperty' || obj.name === 'selectedLineProperty')
lines.forEach((line) => {
canvas.remove(line)
})
if (roof) {
roof.set({
selectable: true,
})
}
canvas?.renderAll()
}
const changeSurfaceFlowDirection = (roof, direction, orientation) => {
roof.set({
direction: direction,
})
drawDirectionArrow(roof)
canvas?.renderAll()
}
return {
applySurfaceShape,
deleteAllSurfacesAndObjects,
@ -973,5 +1001,6 @@ export function useSurfaceShapeBatch() {
surfaceShapeActualSize,
changeSurfaceLinePropertyEvent,
changeSurfaceLineProperty,
changeSurfaceLinePropertyReset,
}
}

11
src/hooks/useCanvas.js
View File

@ -109,11 +109,22 @@ export function useCanvas(id) {
OBJECT_PROTOTYPE.forEach((type) => {
type.toObject = function (propertiesToInclude) {
let source = {}
for (let key in this) {
if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
source.key = this[key]
}
}
//QLine에 커스텀 어트리뷰트 넣기
if (this.type === 'QLine') {
this.attributes.type = this.attributes.type || 'default'
source.attributes = {
...this.attributes,
type: this.attributes.type,
}
}
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
}
})

60
src/hooks/useContextMenu.js
View File

@ -165,6 +165,59 @@ export function useContextMenu() {
],
])
break
case MENU.BATCH_CANVAS.SLOPE_SETTING:
case MENU.BATCH_CANVAS.BATCH_DRAWING:
case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
case MENU.BATCH_CANVAS.OBJECT_BATCH:
case MENU.BATCH_CANVAS.ALL_REMOVE:
case MENU.BATCH_CANVAS.DEFAULT:
setContextMenu([
[
{
id: 'sizeEdit',
name: getMessage('contextmenu.size.edit'),
component: <SizeSetting id={popupId} target={currentObject} />,
},
{
id: 'remove',
shortcut: ['d', 'D'],
name: `${getMessage('contextmenu.remove')}(D)`,
},
{
id: 'move',
shortcut: ['m', 'M'],
name: `${getMessage('contextmenu.move')}(M)`,
},
{
id: 'copy',
shortcut: ['c', 'C'],
name: `${getMessage('contextmenu.copy')}(C)`,
},
{
id: 'imageSizeEdit',
name: getMessage('modal.image.size.setting'),
component: <ImageSizeSetting id={popupId} />,
},
],
[
{
id: 'roofMaterialEdit',
name: getMessage('contextmenu.roof.material.edit'),
component: <RoofAllocationSetting id={popupId} />,
},
{
id: 'linePropertyEdit',
name: getMessage('contextmenu.line.property.edit'),
component: <LinePropertySetting id={popupId} />,
},
{
id: 'flowDirectionEdit',
name: getMessage('contextmenu.flow.direction.edit'),
component: <FlowDirectionSetting id={popupId} target={currentObject} />,
},
],
])
break
default:
setContextMenu([])
break
@ -207,6 +260,8 @@ export function useContextMenu() {
}, [currentContextMenu])
useEffect(() => {
console.log(currentObject)
if (currentObject?.name) {
switch (currentObject.name) {
case 'triangleDormer':
@ -252,11 +307,6 @@ export function useContextMenu() {
case 'roof':
setContextMenu([
[
{
id: 'surfaceShapeActualSize',
name: '면형상 실측',
fn: () => surfaceShapeActualSize(),
},
{
id: 'sizeEdit',
name: '사이즈 변경',