Compare commits
No commits in common. "18b7abdfd5e22e15677e5634b75a20d67d55b2d5" and "cec871fb70c2f7c11a71a78d3b90bd8f842d640f" have entirely different histories.
18b7abdfd5
...
cec871fb70
@ -4,11 +4,9 @@ import { usePopup } from '@/hooks/usePopup'
|
|||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
import { currentObjectState } from '@/store/canvasAtom'
|
||||||
import { useGrid } from '@/hooks/common/useGrid'
|
import { useGrid } from '@/hooks/common/useGrid'
|
||||||
import { gridColorState } from '@/store/gridAtom'
|
|
||||||
import { gridDisplaySelector } from '@/store/settingAtom'
|
|
||||||
const GRID_PADDING = 5
|
|
||||||
export default function GridCopy(props) {
|
export default function GridCopy(props) {
|
||||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
const { id, pos = contextPopupPosition } = props
|
const { id, pos = contextPopupPosition } = props
|
||||||
@ -17,40 +15,10 @@ export default function GridCopy(props) {
|
|||||||
const [length, setLength] = useState('0')
|
const [length, setLength] = useState('0')
|
||||||
const [arrow, setArrow] = useState(null)
|
const [arrow, setArrow] = useState(null)
|
||||||
const currentObject = useRecoilValue(currentObjectState)
|
const currentObject = useRecoilValue(currentObjectState)
|
||||||
const canvas = useRecoilValue(canvasState)
|
const { copy } = useGrid()
|
||||||
const gridColor = useRecoilValue(gridColorState)
|
|
||||||
const isGridDisplay = useRecoilValue(gridDisplaySelector)
|
|
||||||
const handleApply = () => {
|
const handleApply = () => {
|
||||||
copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
|
copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
|
||||||
}
|
}
|
||||||
|
|
||||||
const copy = (object, length) => {
|
|
||||||
const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
|
|
||||||
const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
|
|
||||||
const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
|
|
||||||
const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
|
|
||||||
|
|
||||||
const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
|
|
||||||
stroke: gridColor,
|
|
||||||
strokeWidth: 1,
|
|
||||||
selectable: true,
|
|
||||||
lockMovementX: true,
|
|
||||||
lockMovementY: true,
|
|
||||||
lockRotation: true,
|
|
||||||
lockScalingX: true,
|
|
||||||
lockScalingY: true,
|
|
||||||
strokeDashArray: [5, 2],
|
|
||||||
opacity: 0.3,
|
|
||||||
padding: GRID_PADDING,
|
|
||||||
direction: object.direction,
|
|
||||||
visible: isGridDisplay,
|
|
||||||
name: object.name,
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas.add(line)
|
|
||||||
canvas.setActiveObject(line)
|
|
||||||
canvas.renderAll()
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||||
<WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
|
<WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { contextPopupPositionState } from '@/store/popupAtom'
|
|||||||
import { useCanvas } from '@/hooks/useCanvas'
|
import { useCanvas } from '@/hooks/useCanvas'
|
||||||
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useGrid } from '@/hooks/common/useGrid'
|
||||||
import { useSwal } from '@/hooks/useSwal'
|
import { useSwal } from '@/hooks/useSwal'
|
||||||
import { set } from 'react-hook-form'
|
import { set } from 'react-hook-form'
|
||||||
|
|
||||||
@ -16,6 +17,7 @@ export default function GridMove(props) {
|
|||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
const { swalFire } = useSwal()
|
const { swalFire } = useSwal()
|
||||||
|
const { move } = useGrid()
|
||||||
const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
|
const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
|
||||||
const [isAll, setIsAll] = useState(false)
|
const [isAll, setIsAll] = useState(false)
|
||||||
const [verticalSize, setVerticalSize] = useState('0')
|
const [verticalSize, setVerticalSize] = useState('0')
|
||||||
@ -67,16 +69,6 @@ export default function GridMove(props) {
|
|||||||
handleClose()
|
handleClose()
|
||||||
}
|
}
|
||||||
|
|
||||||
const move = (object, x, y) => {
|
|
||||||
object.set({
|
|
||||||
...object,
|
|
||||||
x1: object.direction === 'vertical' ? object.x1 + x : 0,
|
|
||||||
x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
|
|
||||||
y1: object.direction === 'vertical' ? 0 : object.y1 + y,
|
|
||||||
y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
closePopup(id)
|
closePopup(id)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -105,16 +105,6 @@ export default function GridOption(props) {
|
|||||||
initEvent()
|
initEvent()
|
||||||
}, [gridOptions])
|
}, [gridOptions])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
setAdsorptionPointAddMode(false)
|
|
||||||
setTempGridMode(false)
|
|
||||||
setTimeout(() => {
|
|
||||||
initEvent()
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const dotLineGridProps = {
|
const dotLineGridProps = {
|
||||||
id: dotLineId,
|
id: dotLineId,
|
||||||
setIsShow: setShowDotLineGridModal,
|
setIsShow: setShowDotLineGridModal,
|
||||||
|
|||||||
@ -6,22 +6,16 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|||||||
import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
|
import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
|
import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
|
||||||
import { adsorptionPointAddModeState, canGridOptionSeletor, tempGridModeState } from '@/store/canvasAtom'
|
import { canGridOptionSeletor } from '@/store/canvasAtom'
|
||||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||||
import { useTempGrid } from '@/hooks/useTempGrid'
|
|
||||||
import { settingModalGridOptionsState } from '@/store/settingAtom'
|
|
||||||
import { useEvent } from '@/hooks/useEvent'
|
|
||||||
|
|
||||||
export default function SettingModal01(props) {
|
export default function SettingModal01(props) {
|
||||||
const { id } = props
|
const { id } = props
|
||||||
const [buttonAct, setButtonAct] = useState(1)
|
const [buttonAct, setButtonAct] = useState(1)
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
|
const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
|
||||||
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
|
|
||||||
const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
|
|
||||||
const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
|
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -77,22 +71,9 @@ export default function SettingModal01(props) {
|
|||||||
setButtonAct(num)
|
setButtonAct(num)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onClose = () => {
|
|
||||||
setTempGridMode(false)
|
|
||||||
setAdsorptionPointAddMode(false)
|
|
||||||
setGridOptions((prev) => {
|
|
||||||
const newSettingOptions = [...prev]
|
|
||||||
newSettingOptions[0].selected = false
|
|
||||||
newSettingOptions[2].selected = false
|
|
||||||
return [...newSettingOptions]
|
|
||||||
})
|
|
||||||
|
|
||||||
closePopup(id, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
|
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
|
||||||
<WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={onClose} />
|
<WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
|
||||||
<WithDraggable.Body>
|
<WithDraggable.Body>
|
||||||
<div className="modal-btn-wrap">
|
<div className="modal-btn-wrap">
|
||||||
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
|
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
|
||||||
|
|||||||
@ -1362,11 +1362,10 @@ export default function StuffDetail() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (params?.receiveUser !== '') {
|
if (params?.receiveUser !== '') {
|
||||||
if (checkLength(params?.receiveUser.trim()) > 40) {
|
if (checkLength(params?.receiveUser.trim()) > 10) {
|
||||||
return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
|
return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//로그인이 2차점인데 otherSaleStoreId가 없으면 알럿
|
//로그인이 2차점인데 otherSaleStoreId가 없으면 알럿
|
||||||
if (session.storeLvl !== '1') {
|
if (session.storeLvl !== '1') {
|
||||||
if (params.saleStoreLevel === '1') {
|
if (params.saleStoreLevel === '1') {
|
||||||
@ -1436,15 +1435,20 @@ export default function StuffDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 전각20자 (반각40자)
|
|
||||||
*/
|
|
||||||
const checkLength = (value) => {
|
const checkLength = (value) => {
|
||||||
let fullWidthLength = value.replace(/[^\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
|
let str = new String(value)
|
||||||
let halfWidthLength = value.replace(/[\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
|
let _byte = 0
|
||||||
|
if (str.length !== 0) {
|
||||||
let totalLength = fullWidthLength * 2 + halfWidthLength
|
for (let i = 0; i < str.length; i++) {
|
||||||
return totalLength
|
let str2 = str.charAt(i)
|
||||||
|
if (encodeURIComponent(str2).length > 4) {
|
||||||
|
_byte += 2
|
||||||
|
} else {
|
||||||
|
_byte++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return _byte
|
||||||
}
|
}
|
||||||
// 임시저장
|
// 임시저장
|
||||||
const onTempSave = async () => {
|
const onTempSave = async () => {
|
||||||
@ -1494,7 +1498,7 @@ export default function StuffDetail() {
|
|||||||
|
|
||||||
// 담당자 자리수 체크
|
// 담당자 자리수 체크
|
||||||
if (params?.receiveUser !== '') {
|
if (params?.receiveUser !== '') {
|
||||||
if (checkLength(params?.receiveUser.trim()) > 40) {
|
if (checkLength(params?.receiveUser.trim()) > 10) {
|
||||||
return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
|
return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -66,11 +66,6 @@ export default function FindAddressPop(props) {
|
|||||||
zipcode: watch('zipNo'),
|
zipcode: watch('zipNo'),
|
||||||
}
|
}
|
||||||
|
|
||||||
if (params.zipcode.length < 7) {
|
|
||||||
swalFire({ text: getMessage('stuff.addressPopup.error.message1'), type: 'alert', icon: 'warning' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsGlobalLoading(true)
|
setIsGlobalLoading(true)
|
||||||
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
|
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
@ -90,20 +85,15 @@ export default function FindAddressPop(props) {
|
|||||||
}
|
}
|
||||||
// 주소적용 클릭
|
// 주소적용 클릭
|
||||||
const applyAddress = () => {
|
const applyAddress = () => {
|
||||||
if (!isNotEmptyArray(gridProps.gridData)) {
|
if (prefId == null) {
|
||||||
swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (gridProps.gridData[0].zipcode == '') {
|
|
||||||
swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
|
swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
|
||||||
} else {
|
} else {
|
||||||
//검색결과 무조건 1:1
|
|
||||||
props.zipInfo({
|
props.zipInfo({
|
||||||
zipNo: gridProps.gridData[0].zipcode,
|
zipNo: zipNo,
|
||||||
address1: gridProps.gridData[0].address1,
|
address1: address1,
|
||||||
address2: gridProps.gridData[0].address2,
|
address2: address2,
|
||||||
address3: gridProps.gridData[0].address3,
|
address3: address3,
|
||||||
prefId: gridProps.gridData[0].prefcode,
|
prefId: prefId,
|
||||||
})
|
})
|
||||||
|
|
||||||
//팝업닫기
|
//팝업닫기
|
||||||
|
|||||||
@ -153,18 +153,18 @@ export function useGrid() {
|
|||||||
const move = (object, x, y) => {
|
const move = (object, x, y) => {
|
||||||
object.set({
|
object.set({
|
||||||
...object,
|
...object,
|
||||||
x1: object.direction === 'vertical' ? object.x1 + x : -1500,
|
x1: object.direction === 'vertical' ? object.x1 + x : 0,
|
||||||
x2: object.direction === 'vertical' ? object.x1 + x : 2500,
|
x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
|
||||||
y1: object.direction === 'vertical' ? -1500 : object.y1 + y,
|
y1: object.direction === 'vertical' ? 0 : object.y1 + y,
|
||||||
y2: object.direction === 'vertical' ? 2500 : object.y1 + y,
|
y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const copy = (object, length) => {
|
const copy = (object, length) => {
|
||||||
const lineStartX = object.direction === 'vertical' ? object.x1 + length : -1500
|
const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
|
||||||
const lineEndX = object.direction === 'vertical' ? object.x2 + length : 2500
|
const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
|
||||||
const lineStartY = object.direction === 'vertical' ? -1500 : object.y1 + length
|
const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
|
||||||
const lineEndY = object.direction === 'vertical' ? 2500 : object.y1 + length
|
const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
|
||||||
|
|
||||||
const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
|
const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
|
||||||
stroke: gridColor,
|
stroke: gridColor,
|
||||||
|
|||||||
@ -449,7 +449,7 @@ export const useEstimateController = (planNo, flag) => {
|
|||||||
icon: 'warning',
|
icon: 'warning',
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
if (checkLength(copyReceiveUser.trim()) > 40) {
|
if (checkLength(copyReceiveUser.trim()) > 10) {
|
||||||
return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
|
return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -489,15 +489,20 @@ export const useEstimateController = (planNo, flag) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 전각20자 (반각40자)
|
|
||||||
*/
|
|
||||||
const checkLength = (value) => {
|
const checkLength = (value) => {
|
||||||
let fullWidthLength = value.replace(/[^\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
|
let str = new String(value)
|
||||||
let halfWidthLength = value.replace(/[\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
|
let _byte = 0
|
||||||
|
if (str.length !== 0) {
|
||||||
let totalLength = fullWidthLength * 2 + halfWidthLength
|
for (let i = 0; i < str.length; i++) {
|
||||||
return totalLength
|
let str2 = str.charAt(i)
|
||||||
|
if (encodeURIComponent(str2).length > 4) {
|
||||||
|
_byte += 2
|
||||||
|
} else {
|
||||||
|
_byte++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return _byte
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -33,7 +33,6 @@ import { usePopup } from '@/hooks/usePopup'
|
|||||||
import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
|
import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
|
||||||
import Big from 'big.js'
|
import Big from 'big.js'
|
||||||
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
|
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
|
||||||
import { useObject } from '@/hooks/useObject'
|
|
||||||
|
|
||||||
//외벽선 그리기
|
//외벽선 그리기
|
||||||
export function useOuterLineWall(id, propertiesId) {
|
export function useOuterLineWall(id, propertiesId) {
|
||||||
@ -58,7 +57,6 @@ export function useOuterLineWall(id, propertiesId) {
|
|||||||
const { addLine, removeLine } = useLine()
|
const { addLine, removeLine } = useLine()
|
||||||
const { tempGridMode } = useTempGrid()
|
const { tempGridMode } = useTempGrid()
|
||||||
const { addPolygonByLines } = usePolygon()
|
const { addPolygonByLines } = usePolygon()
|
||||||
const { handleSelectableObjects } = useObject()
|
|
||||||
|
|
||||||
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
|
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
|
||||||
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
|
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
|
||||||
@ -93,16 +91,18 @@ export function useOuterLineWall(id, propertiesId) {
|
|||||||
const isFix = useRef(false)
|
const isFix = useRef(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (adsorptionPointAddMode || tempGridMode) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
addCanvasMouseEventListener('mouse:down', mouseDown)
|
addCanvasMouseEventListener('mouse:down', mouseDown)
|
||||||
addDocumentEventListener('contextmenu', document, (e) => {
|
addDocumentEventListener('contextmenu', document, (e) => {
|
||||||
handleRollback()
|
handleRollback()
|
||||||
})
|
})
|
||||||
handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
|
|
||||||
|
|
||||||
clear()
|
clear()
|
||||||
return () => {
|
return () => {
|
||||||
initEvent()
|
initEvent()
|
||||||
handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
|
|
||||||
|
|
||||||
canvas
|
canvas
|
||||||
.getObjects()
|
.getObjects()
|
||||||
|
|||||||
@ -38,32 +38,28 @@ import { roofDisplaySelector } from '@/store/settingAtom'
|
|||||||
import { useRoofFn } from '@/hooks/common/useRoofFn'
|
import { useRoofFn } from '@/hooks/common/useRoofFn'
|
||||||
import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
|
import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
|
||||||
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
|
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
|
||||||
import { useObject } from '@/hooks/useObject'
|
|
||||||
|
|
||||||
// 배치면 그리기
|
// 배치면 그리기
|
||||||
export function usePlacementShapeDrawing(id) {
|
export function usePlacementShapeDrawing(id) {
|
||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
const roofDisplay = useRecoilValue(roofDisplaySelector)
|
const roofDisplay = useRecoilValue(roofDisplaySelector)
|
||||||
const {
|
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseLine } =
|
||||||
initEvent,
|
useEvent()
|
||||||
addCanvasMouseEventListener,
|
|
||||||
addDocumentEventListener,
|
|
||||||
removeAllMouseEventListeners,
|
|
||||||
removeAllDocumentEventListeners,
|
|
||||||
removeMouseLine,
|
|
||||||
} = useEvent()
|
|
||||||
// const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
|
// const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
|
||||||
// useContext(EventContext)
|
// useContext(EventContext)
|
||||||
const { getIntersectMousePoint } = useMouse()
|
const { getIntersectMousePoint } = useMouse()
|
||||||
const { addLine, removeLine } = useLine()
|
const { addLine, removeLine } = useLine()
|
||||||
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
|
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
|
||||||
|
const { tempGridMode } = useTempGrid()
|
||||||
const { setSurfaceShapePattern } = useRoofFn()
|
const { setSurfaceShapePattern } = useRoofFn()
|
||||||
const { changeSurfaceLineType } = useSurfaceShapeBatch({})
|
const { changeSurfaceLineType } = useSurfaceShapeBatch({})
|
||||||
const { handleSelectableObjects } = useObject()
|
|
||||||
|
|
||||||
|
const canvasSetting = useRecoilValue(canvasSettingState)
|
||||||
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
|
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
|
||||||
const adsorptionRange = useRecoilValue(adsorptionRangeState)
|
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
|
||||||
const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
|
const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
|
||||||
|
const adsorptionRange = useRecoilValue(adsorptionRangeState)
|
||||||
|
const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
|
||||||
|
|
||||||
const length1Ref = useRef(null)
|
const length1Ref = useRef(null)
|
||||||
const length2Ref = useRef(null)
|
const length2Ref = useRef(null)
|
||||||
@ -91,17 +87,16 @@ export function usePlacementShapeDrawing(id) {
|
|||||||
const globalPitch = useRecoilValue(globalPitchState)
|
const globalPitch = useRecoilValue(globalPitchState)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (adsorptionPointAddMode || tempGridMode) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
addCanvasMouseEventListener('mouse:down', mouseDown)
|
addCanvasMouseEventListener('mouse:down', mouseDown)
|
||||||
addDocumentEventListener('contextmenu', document, (e) => {
|
addDocumentEventListener('contextmenu', document, (e) => {
|
||||||
handleRollback()
|
handleRollback()
|
||||||
})
|
})
|
||||||
handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
|
|
||||||
clear()
|
clear()
|
||||||
return () => {
|
}, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
|
||||||
initEvent()
|
|
||||||
handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
|
|
||||||
}
|
|
||||||
}, [verticalHorizontalMode, points, adsorptionRange, adsorptionPointMode])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPoints([])
|
setPoints([])
|
||||||
@ -127,6 +122,7 @@ export function usePlacementShapeDrawing(id) {
|
|||||||
}, [type])
|
}, [type])
|
||||||
|
|
||||||
const clear = () => {
|
const clear = () => {
|
||||||
|
addCanvasMouseEventListener('mouse:move', mouseMove)
|
||||||
setLength1(0)
|
setLength1(0)
|
||||||
setLength2(0)
|
setLength2(0)
|
||||||
|
|
||||||
@ -182,6 +178,79 @@ export function usePlacementShapeDrawing(id) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
mouseMove
|
||||||
|
*/
|
||||||
|
const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
||||||
|
const roofAdsorptionPoints = useRef([])
|
||||||
|
const intersectionPoints = useRef([])
|
||||||
|
const { getAdsorptionPoints } = useAdsorptionPoint()
|
||||||
|
|
||||||
|
const mouseMove = (e) => {
|
||||||
|
removeMouseLine()
|
||||||
|
const pointer = canvas.getPointer(e.e)
|
||||||
|
const roofsPoints = roofs.map((roof) => roof.points).flat()
|
||||||
|
roofAdsorptionPoints.current = [...roofsPoints]
|
||||||
|
|
||||||
|
const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
|
||||||
|
const otherAdsorptionPoints = []
|
||||||
|
|
||||||
|
auxiliaryLines.forEach((line1) => {
|
||||||
|
auxiliaryLines.forEach((line2) => {
|
||||||
|
if (line1 === line2) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const intersectionPoint = calculateIntersection(line1, line2)
|
||||||
|
if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
otherAdsorptionPoints.push(intersectionPoint)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let innerLinePoints = []
|
||||||
|
canvas
|
||||||
|
.getObjects()
|
||||||
|
.filter((obj) => obj.innerLines)
|
||||||
|
.forEach((polygon) => {
|
||||||
|
polygon.innerLines.forEach((line) => {
|
||||||
|
innerLinePoints.push({ x: line.x1, y: line.y1 })
|
||||||
|
innerLinePoints.push({ x: line.x2, y: line.y2 })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const adsorptionPoints = [
|
||||||
|
...getAdsorptionPoints(),
|
||||||
|
...roofAdsorptionPoints.current,
|
||||||
|
...otherAdsorptionPoints,
|
||||||
|
...intersectionPoints.current,
|
||||||
|
...innerLinePoints,
|
||||||
|
]
|
||||||
|
|
||||||
|
let arrivalPoint = { x: pointer.x, y: pointer.y }
|
||||||
|
let adsorptionPoint = findClosestPoint(pointer, adsorptionPoints)
|
||||||
|
|
||||||
|
if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) <= adsorptionRange) {
|
||||||
|
arrivalPoint = { ...adsorptionPoint }
|
||||||
|
}
|
||||||
|
const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
|
||||||
|
stroke: 'red',
|
||||||
|
strokeWidth: 1,
|
||||||
|
selectable: false,
|
||||||
|
name: 'mouseLine',
|
||||||
|
})
|
||||||
|
|
||||||
|
const verticalLine = new fabric.Line([arrivalPoint.x, -1 * canvas.height, arrivalPoint.x, 2 * canvas.height], {
|
||||||
|
stroke: 'red',
|
||||||
|
strokeWidth: 1,
|
||||||
|
selectable: false,
|
||||||
|
name: 'mouseLine',
|
||||||
|
})
|
||||||
|
canvas?.add(horizontalLine, verticalLine)
|
||||||
|
canvas?.renderAll()
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
canvas
|
canvas
|
||||||
?.getObjects()
|
?.getObjects()
|
||||||
|
|||||||
@ -8,7 +8,6 @@ import { useDotLineGrid } from '@/hooks/useDotLineGrid'
|
|||||||
import { useTempGrid } from '@/hooks/useTempGrid'
|
import { useTempGrid } from '@/hooks/useTempGrid'
|
||||||
import { gridColorState } from '@/store/gridAtom'
|
import { gridColorState } from '@/store/gridAtom'
|
||||||
import { gridDisplaySelector } from '@/store/settingAtom'
|
import { gridDisplaySelector } from '@/store/settingAtom'
|
||||||
import { POLYGON_TYPE } from '@/common/common'
|
|
||||||
|
|
||||||
export function useEvent() {
|
export function useEvent() {
|
||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
@ -22,8 +21,6 @@ export function useEvent() {
|
|||||||
const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
|
const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
|
||||||
const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
|
const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
|
||||||
const { tempGridModeStateLeftClickEvent, tempGridMode } = useTempGrid()
|
const { tempGridModeStateLeftClickEvent, tempGridMode } = useTempGrid()
|
||||||
const roofAdsorptionPoints = useRef([])
|
|
||||||
const intersectionPoints = useRef([])
|
|
||||||
|
|
||||||
const textMode = useRecoilValue(textModeState)
|
const textMode = useRecoilValue(textModeState)
|
||||||
|
|
||||||
@ -100,52 +97,14 @@ export function useEvent() {
|
|||||||
|
|
||||||
const defaultMouseMoveEvent = (e) => {
|
const defaultMouseMoveEvent = (e) => {
|
||||||
removeMouseLine()
|
removeMouseLine()
|
||||||
const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
||||||
// 가로선
|
// 가로선
|
||||||
const pointer = canvas.getPointer(e.e)
|
const pointer = canvas.getPointer(e.e)
|
||||||
|
|
||||||
|
const adsorptionPoints = getAdsorptionPoints()
|
||||||
|
|
||||||
let arrivalPoint = { x: pointer.x, y: pointer.y }
|
let arrivalPoint = { x: pointer.x, y: pointer.y }
|
||||||
|
|
||||||
if (adsorptionPointMode) {
|
if (adsorptionPointMode) {
|
||||||
const roofsPoints = roofs.map((roof) => roof.points).flat()
|
|
||||||
roofAdsorptionPoints.current = [...roofsPoints]
|
|
||||||
|
|
||||||
const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
|
|
||||||
const otherAdsorptionPoints = []
|
|
||||||
|
|
||||||
auxiliaryLines.forEach((line1) => {
|
|
||||||
auxiliaryLines.forEach((line2) => {
|
|
||||||
if (line1 === line2) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const intersectionPoint = calculateIntersection(line1, line2)
|
|
||||||
if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
otherAdsorptionPoints.push(intersectionPoint)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
let innerLinePoints = []
|
|
||||||
canvas
|
|
||||||
.getObjects()
|
|
||||||
.filter((obj) => obj.innerLines)
|
|
||||||
.forEach((polygon) => {
|
|
||||||
polygon.innerLines.forEach((line) => {
|
|
||||||
innerLinePoints.push({ x: line.x1, y: line.y1 })
|
|
||||||
innerLinePoints.push({ x: line.x2, y: line.y2 })
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const adsorptionPoints = [
|
|
||||||
...getAdsorptionPoints(),
|
|
||||||
...roofAdsorptionPoints.current,
|
|
||||||
...otherAdsorptionPoints,
|
|
||||||
...intersectionPoints.current,
|
|
||||||
...innerLinePoints,
|
|
||||||
]
|
|
||||||
|
|
||||||
if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
|
if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
|
||||||
const closestLine = getClosestLineGrid(pointer)
|
const closestLine = getClosestLineGrid(pointer)
|
||||||
|
|
||||||
@ -398,7 +357,6 @@ export function useEvent() {
|
|||||||
removeDocumentEvent,
|
removeDocumentEvent,
|
||||||
removeMouseEvent,
|
removeMouseEvent,
|
||||||
removeMouseLine,
|
removeMouseLine,
|
||||||
defaultMouseMoveEvent,
|
|
||||||
initEvent,
|
initEvent,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,17 +12,5 @@ export function useObject() {
|
|||||||
canvas.remove(item)
|
canvas.remove(item)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
return { deleteObject }
|
||||||
const handleSelectableObjects = (targetNames = [], bool) => {
|
|
||||||
if (!canvas) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const selectableObjects = canvas.getObjects().filter((obj) => targetNames.includes(obj.name))
|
|
||||||
selectableObjects.forEach((obj) => {
|
|
||||||
obj.selectable = bool
|
|
||||||
})
|
|
||||||
canvas.renderAll()
|
|
||||||
}
|
|
||||||
|
|
||||||
return { deleteObject, handleSelectableObjects }
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -732,7 +732,7 @@
|
|||||||
"stuff.detail.tooltip.surfaceType": "塩害地域の定義は各メーカーの設置マニュアルをご確認ください",
|
"stuff.detail.tooltip.surfaceType": "塩害地域の定義は各メーカーの設置マニュアルをご確認ください",
|
||||||
"stuff.detail.tempSave.message0": "一時保存されました。 物件番号を取得するには、保存ボタンを押して下さい。,",
|
"stuff.detail.tempSave.message0": "一時保存されました。 物件番号を取得するには、保存ボタンを押して下さい。,",
|
||||||
"stuff.detail.tempSave.message1": "一時保存されました。物件番号を取得するには、必須項目をすべて入力してください。",
|
"stuff.detail.tempSave.message1": "一時保存されました。物件番号を取得するには、必須項目をすべて入力してください。",
|
||||||
"stuff.detail.tempSave.message2": "担当者名は全角20文字(半角40文字)以下で入力してください.",
|
"stuff.detail.tempSave.message2": "担当者名は10桁以下で入力してください。",
|
||||||
"stuff.detail.tempSave.message3": "二次販売店を選択してください。",
|
"stuff.detail.tempSave.message3": "二次販売店を選択してください。",
|
||||||
"stuff.detail.confirm.message1": "販売店情報を変更すると、設計依頼文書番号が削除されます。変更しますか?",
|
"stuff.detail.confirm.message1": "販売店情報を変更すると、設計依頼文書番号が削除されます。変更しますか?",
|
||||||
"stuff.detail.delete.message1": "仕様が確定したものは削除できません。",
|
"stuff.detail.delete.message1": "仕様が確定したものは削除できません。",
|
||||||
|
|||||||
@ -733,7 +733,7 @@
|
|||||||
"stuff.detail.tooltip.surfaceType": "염해지역 정의는 각 메이커의 설치 매뉴얼을 확인해주십시오",
|
"stuff.detail.tooltip.surfaceType": "염해지역 정의는 각 메이커의 설치 매뉴얼을 확인해주십시오",
|
||||||
"stuff.detail.tempSave.message0": "임시저장 되었습니다. 물건번호를 획득하려면 저장버튼을 눌러주십시오.",
|
"stuff.detail.tempSave.message0": "임시저장 되었습니다. 물건번호를 획득하려면 저장버튼을 눌러주십시오.",
|
||||||
"stuff.detail.tempSave.message1": "임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.",
|
"stuff.detail.tempSave.message1": "임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.",
|
||||||
"stuff.detail.tempSave.message2": "담당자이름은 전각20자(반각40자) 이하로 입력해 주십시오.",
|
"stuff.detail.tempSave.message2": "담당자이름은 10자리 이하로 입력해 주십시오.",
|
||||||
"stuff.detail.tempSave.message3": "2차 판매점을 선택해주세요.",
|
"stuff.detail.tempSave.message3": "2차 판매점을 선택해주세요.",
|
||||||
"stuff.detail.confirm.message1": "판매점 정보를 변경하면 설계의뢰 문서번호가 삭제됩니다. 변경하시겠습니까?",
|
"stuff.detail.confirm.message1": "판매점 정보를 변경하면 설계의뢰 문서번호가 삭제됩니다. 변경하시겠습니까?",
|
||||||
"stuff.detail.delete.message1": "사양이 확정된 물건은 삭제할 수 없습니다.",
|
"stuff.detail.delete.message1": "사양이 확정된 물건은 삭제할 수 없습니다.",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user