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

dev #502

Merged
ysCha merged 10 commits from dev into prd-deploy 2025-12-19 09:20:45 +09:00
Conversation 0 Commits 10 Files Changed 5 +1075 -899
6 changed files with 1075 additions and 899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 50376446d0 - Show all commits

19
src/components/floor-plan/modal/basic/step/Module.jsx
View File

@ -11,6 +11,7 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController' import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
import { isObjectNotEmpty } from '@/util/common-utils' import { isObjectNotEmpty } from '@/util/common-utils'
import { normalizeDecimal} from '@/util/input-utils' import { normalizeDecimal} from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Module({ setTabNum }) { export default function Module({ setTabNum }) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
@ -185,11 +186,23 @@ export default function Module({ setTabNum }) {
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="outline-form"> <div className="outline-form">
<div className="grid-select mr10"> <div className="grid-select mr10">
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={inputInstallHeight}*/}
{/* onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={inputInstallHeight} value={inputInstallHeight}
onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))} onChange={(value) => setInputInstallHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">m</span> <span className="thin">m</span>

74
src/components/floor-plan/modal/basic/step/Orientation.jsx
View File

@ -10,6 +10,7 @@ import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { useCommonCode } from '@/hooks/common/useCommonCode' import { useCommonCode } from '@/hooks/common/useCommonCode'
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import { normalizeDecimal} from '@/util/input-utils' import { normalizeDecimal} from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export const Orientation = forwardRef((props, ref) => { export const Orientation = forwardRef((props, ref) => {
const { getMessage } = useMessage() const { getMessage } = useMessage()
@ -436,13 +437,26 @@ export const Orientation = forwardRef((props, ref) => {
<label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label> <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
</div> </div>
<div className="input-grid mr10" style={{ width: '60px' }}> <div className="input-grid mr10" style={{ width: '60px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={inputCompasDeg}*/}
{/* readOnly={!hasAnglePassivity}*/}
{/* placeholder={0}*/}
{/* onChange={(e) => checkDegree(e.target.value)}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={inputCompasDeg} value={inputCompasDeg}
readOnly={!hasAnglePassivity} readOnly={!hasAnglePassivity}
placeholder={0} onChange={(value) => setInputCompasDeg(value)}
onChange={(e) => checkDegree(e.target.value)} options={{
allowNegative: true,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">°</span> <span className="thin">°</span>
@ -533,7 +547,19 @@ export const Orientation = forwardRef((props, ref) => {
<div className="outline-form mt15"> <div className="outline-form mt15">
<span>{getMessage('modal.module.basic.setting.module.placement.area')}</span> <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
<div className="input-grid mr10" style={{ width: '60px' }}> <div className="input-grid mr10" style={{ width: '60px' }}>
<input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} /> {/*<input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={inputMargin}
onChange={(value) => setInputMargin(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div> </div>
<span className="thin">m</span> <span className="thin">m</span>
</div> </div>
@ -561,11 +587,23 @@ export const Orientation = forwardRef((props, ref) => {
<div className="outline-form"> <div className="outline-form">
<span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span> <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
<div className="input-grid mr10"> <div className="input-grid mr10">
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={inputInstallHeight}*/}
{/* onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={inputInstallHeight} value={inputInstallHeight}
onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))} onChange={(value) => handleChangeInstallHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">m</span> <span className="thin">m</span>
@ -589,11 +627,23 @@ export const Orientation = forwardRef((props, ref) => {
<div className="outline-form"> <div className="outline-form">
<span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span> <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
<div className="input-grid mr10"> <div className="input-grid mr10">
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={inputVerticalSnowCover}*/}
{/* onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={inputVerticalSnowCover} value={inputInstallHeight}
onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))} onChange={(value) => handleChangeVerticalSnowCover(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">cm</span> <span className="thin">cm</span>

61
src/components/floor-plan/modal/basic/step/Trestle.jsx
View File

@ -10,6 +10,7 @@ import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useStat
import { useRecoilState, useRecoilValue } from 'recoil' import { useRecoilState, useRecoilValue } from 'recoil'
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import { normalizeDigits } from '@/util/input-utils' import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const Trestle = forwardRef((props, ref) => { const Trestle = forwardRef((props, ref) => {
const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
@ -885,12 +886,24 @@ const Trestle = forwardRef((props, ref) => {
<div className="outline-form mr15"> <div className="outline-form mr15">
<span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span> <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
<div className="input-grid mr10"> <div className="input-grid mr10">
<input {/*<input*/}
type="number" {/* type="number"*/}
{/* className="input-origin block"*/}
{/* value={eavesMargin ?? 0}*/}
{/* // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}*/}
{/* onChange={(e) => setEavesMargin(+e.target.value)}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={eavesMargin ?? 0} value={eavesMargin ?? 0}
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })} onChange={(value) => setEavesMargin(value)}
onChange={(e) => setEavesMargin(+e.target.value)} options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">mm</span> <span className="thin">mm</span>
@ -898,12 +911,24 @@ const Trestle = forwardRef((props, ref) => {
<div className="outline-form mr15"> <div className="outline-form mr15">
<span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span> <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
<div className="input-grid mr10"> <div className="input-grid mr10">
<input {/*<input*/}
type="number" {/* type="number"*/}
{/* className="input-origin block"*/}
{/* value={ridgeMargin ?? 0}*/}
{/* // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}*/}
{/* onChange={(e) => setRidgeMargin(+e.target.value)}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={ridgeMargin ?? 0} value={ridgeMargin ?? 0}
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })} onChange={(value) => setRidgeMargin(value)}
onChange={(e) => setRidgeMargin(+e.target.value)} options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">mm</span> <span className="thin">mm</span>
@ -911,12 +936,24 @@ const Trestle = forwardRef((props, ref) => {
<div className="outline-form "> <div className="outline-form ">
<span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span> <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
<div className="input-grid mr10"> <div className="input-grid mr10">
<input {/*<input*/}
type="number" {/* type="number"*/}
{/* className="input-origin block"*/}
{/* value={kerabaMargin ?? 0}*/}
{/* // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}*/}
{/* onChange={(e) => setKerabaMargin(+e.target.value)}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block" className="input-origin block"
value={kerabaMargin ?? 0} value={kerabaMargin ?? 0}
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })} onChange={(value) => setKerabaMargin(value)}
onChange={(e) => setKerabaMargin(+e.target.value)} options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="thin">mm</span> <span className="thin">mm</span>

108
src/components/management/StuffDetail.jsx
View File

@ -23,6 +23,7 @@ import { QcastContext } from '@/app/QcastProvider'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu' import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { useSwal } from '@/hooks/useSwal' import { useSwal } from '@/hooks/useSwal'
import { sanitizeIntegerInputEvent } from '@/util/input-utils' import { sanitizeIntegerInputEvent } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function StuffDetail() { export default function StuffDetail() {
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState) const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
@ -1204,8 +1205,10 @@ export default function StuffDetail() {
} }
// 저장 // 저장
const onValid = async () => { const onValid = async (actionType) => {
const formData = form.getValues() const formData = form.getValues();
if(actionType !== 'save') return false
console.log('Action type:', actionType); // 'save' 또는 'tempSave'
let errors = {} let errors = {}
let fieldNm let fieldNm
@ -1715,7 +1718,7 @@ export default function StuffDetail() {
<button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}> <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
{getMessage('stuff.detail.btn.tempSave')} {getMessage('stuff.detail.btn.tempSave')}
</button> </button>
<button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}> <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
{getMessage('stuff.detail.btn.save')} {getMessage('stuff.detail.btn.save')}
</button> </button>
<button <button
@ -2113,13 +2116,25 @@ export default function StuffDetail() {
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="input-wrap mr10" style={{ width: '200px' }}> <div className="input-wrap mr10" style={{ width: '200px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-light"*/}
{/* onInput={handleKeyUp}*/}
{/* onBlur={handleBlur}*/}
{/* value={form.watch('verticalSnowCover') || ''}*/}
{/* {...register('verticalSnowCover')}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-light" className="input-light"
onInput={handleKeyUp}
onBlur={handleBlur}
value={form.watch('verticalSnowCover') || ''} value={form.watch('verticalSnowCover') || ''}
{...register('verticalSnowCover')} onChange={()=>{}}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="mr10">cm</span> <span className="mr10">cm</span>
@ -2173,13 +2188,25 @@ export default function StuffDetail() {
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="input-wrap mr10" style={{ width: '200px' }}> <div className="input-wrap mr10" style={{ width: '200px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-light"*/}
{/* onInput={handleKeyUp}*/}
{/* onBlur={handleBlur}*/}
{/* value={form.watch('installHeight') || ''}*/}
{/* {...register('installHeight')}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-light" className="input-light"
onInput={handleKeyUp}
onBlur={handleBlur}
value={form.watch('installHeight') || ''} value={form.watch('installHeight') || ''}
{...register('installHeight')} onChange={()=>{}}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span>m</span> <span>m</span>
@ -2216,7 +2243,7 @@ export default function StuffDetail() {
<button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}> <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
{getMessage('stuff.detail.btn.tempSave')} {getMessage('stuff.detail.btn.tempSave')}
</button> </button>
<button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}> <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
{getMessage('stuff.detail.btn.save')} {getMessage('stuff.detail.btn.save')}
</button> </button>
<button <button
@ -2253,7 +2280,7 @@ export default function StuffDetail() {
> >
{getMessage('stuff.detail.btn.moveList')} {getMessage('stuff.detail.btn.moveList')}
</button> </button>
<button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}> <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
{getMessage('stuff.detail.btn.save')} {getMessage('stuff.detail.btn.save')}
</button> </button>
<button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}> <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
@ -2267,7 +2294,7 @@ export default function StuffDetail() {
<button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}> <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
{getMessage('stuff.detail.btn.tempSave')} {getMessage('stuff.detail.btn.tempSave')}
</button> </button>
<button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}> <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
{getMessage('stuff.detail.btn.save')} {getMessage('stuff.detail.btn.save')}
</button> </button>
<button <button
@ -2685,13 +2712,25 @@ export default function StuffDetail() {
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="input-wrap mr10" style={{ width: '200px' }}> <div className="input-wrap mr10" style={{ width: '200px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-light"*/}
{/* onInput={handleKeyUp}*/}
{/* onBlur={handleBlur}*/}
{/* value={form.watch('verticalSnowCover') || ''}*/}
{/* {...register('verticalSnowCover')}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-light" className="input-light"
onInput={handleKeyUp}
onBlur={handleBlur}
value={form.watch('verticalSnowCover') || ''} value={form.watch('verticalSnowCover') || ''}
{...register('verticalSnowCover')} onChange={()=>{}}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span className="mr10">cm</span> <span className="mr10">cm</span>
@ -2748,13 +2787,26 @@ export default function StuffDetail() {
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div className="input-wrap mr10" style={{ width: '200px' }}> <div className="input-wrap mr10" style={{ width: '200px' }}>
<input {/*<input*/}
type="text" {/* type="text"*/}
{/* className="input-light"*/}
{/* onInput={handleKeyUp}*/}
{/* onBlur={handleBlur}*/}
{/* value={form.watch('installHeight') || ''}*/}
{/* {...register('installHeight')}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-light" className="input-light"
onInput={handleKeyUp}
onBlur={handleBlur}
value={form.watch('installHeight') || ''} value={form.watch('installHeight') || ''}
{...register('installHeight')} onChange={()=>{}}
options={{
allowNegative: false,
allowDecimal: false
}}
/> />
</div> </div>
<span>m</span> <span>m</span>
@ -2835,7 +2887,7 @@ export default function StuffDetail() {
> >
{getMessage('stuff.detail.btn.moveList')} {getMessage('stuff.detail.btn.moveList')}
</button> </button>
<button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}> <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
{getMessage('stuff.detail.btn.save')} {getMessage('stuff.detail.btn.save')}
</button> </button>
<button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}> <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
@ -2849,7 +2901,7 @@ export default function StuffDetail() {
<button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}> <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
{getMessage('stuff.detail.btn.tempSave')} {getMessage('stuff.detail.btn.tempSave')}
</button> </button>
<button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}> <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
{getMessage('stuff.detail.btn.save')} {getMessage('stuff.detail.btn.save')}
</button> </button>
<button <button

21
src/util/qpolygon-utils.js
View File

@ -2957,11 +2957,12 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
ridgePoint.x2 += pointVector.x * offset ridgePoint.x2 += pointVector.x * offset
ridgePoint.y2 += pointVector.y * offset ridgePoint.y2 += pointVector.y * offset
} }
}
} else { } else {
ridgePoint.x2 += pointVector.x * offset ridgePoint.x2 += pointVector.x * offset
ridgePoint.y2 += pointVector.y * offset ridgePoint.y2 += pointVector.y * offset
} }
} // }
} else if (drivePoint) { } else if (drivePoint) {
ridgePoint.x2 = drivePoint.x ridgePoint.x2 = drivePoint.x
ridgePoint.y2 = drivePoint.y ridgePoint.y2 = drivePoint.y
@ -3398,8 +3399,18 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
default: default:
break break
} }
if (oppLine.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
if (drivePoint) {
point[2] = drivePoint.x
point[3] = drivePoint.y
} else {
point[2] += pointVector.x * offset point[2] += pointVector.x * offset
point[3] += pointVector.y * offset point[3] += pointVector.y * offset
}
} else {
point[2] += pointVector.x * offset
point[3] += pointVector.y * offset
}
} else if (drivePoint) { } else if (drivePoint) {
point[2] = drivePoint.x point[2] = drivePoint.x
point[3] = drivePoint.y point[3] = drivePoint.y
@ -4316,8 +4327,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
const intersect = lineIntersection(currLine.start, currLine.end, nextLine.start, nextLine.end, canvas) const intersect = lineIntersection(currLine.start, currLine.end, nextLine.start, nextLine.end, canvas)
if (intersect) { if (intersect) {
const checkCircle = new fabric.Circle({ left: intersect.x, top: intersect.y, radius: 5, fill: 'blue', parentId: roofId, name: 'check' }) /*const checkCircle = new fabric.Circle({ left: intersect.x, top: intersect.y, radius: 5, fill: 'blue', parentId: roofId, name: 'check' })
canvas.add(checkCircle).renderAll() canvas.add(checkCircle).renderAll()*/
let distance1 = Math.sqrt(Math.pow(intersect.x - currLine.start.x, 2) + Math.pow(intersect.y - currLine.start.y, 2)) let distance1 = Math.sqrt(Math.pow(intersect.x - currLine.start.x, 2) + Math.pow(intersect.y - currLine.start.y, 2))
let distance2 = Math.sqrt(Math.pow(intersect.x - nextLine.start.x, 2) + Math.pow(intersect.y - nextLine.start.y, 2)) let distance2 = Math.sqrt(Math.pow(intersect.x - nextLine.start.x, 2) + Math.pow(intersect.y - nextLine.start.y, 2))
let point = [currLine.start.x, currLine.start.y, intersect.x, intersect.y] let point = [currLine.start.x, currLine.start.y, intersect.x, intersect.y]
@ -4799,6 +4810,9 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
allLinesPoints.filter((p) => almostEqual(p.x, line.start.x) && almostEqual(p.y, line.start.y)).length < 3 && allLinesPoints.filter((p) => almostEqual(p.x, line.start.x) && almostEqual(p.y, line.start.y)).length < 3 &&
allLinesPoints.filter((p) => almostEqual(p.x, line.end.x) && almostEqual(p.y, line.end.y)).length === 0 allLinesPoints.filter((p) => almostEqual(p.x, line.end.x) && almostEqual(p.y, line.end.y)).length === 0
) { ) {
if (line.type === TYPES.RIDGE && baseLines.length === 4 && (startOnLine || endOnLine)) {
innerLines.push(drawRidgeLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
} else {
if (startOnLine && endOnLine) { if (startOnLine && endOnLine) {
if (line.degree === 0) { if (line.degree === 0) {
innerLines.push(drawRoofLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode)) innerLines.push(drawRoofLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
@ -4809,6 +4823,7 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
} }
} }
} }
}
}) })
} }

409
src/util/skeleton-utils.js
View File

@ -608,9 +608,8 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
canvas.renderAll(); canvas.renderAll();
}); });
if((roof.moveUpDown??0 > 0) || (roof.moveFlowLine??0 > 0) ) { //if((roof.moveUpDown??0 > 0) ) {
const getMoveUpDownLine = () => {
// 같은 라인이 없으므로 새 다각형 라인 생성 // 같은 라인이 없으므로 새 다각형 라인 생성
//라인 편집 //라인 편집
// let i = 0 // let i = 0
@ -657,6 +656,20 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
}); });
} }
// function sortCurrentRoofLines(lines) {
// return [...lines].sort((a, b) => {
// const aX = a.x1 ?? a.get('x1')
// const aY = a.y1 ?? a.get('y1')
// const bX = b.x1 ?? b.get('x1')
// const bY = b.y1 ?? b.get('y1')
// if (aX !== bX) return aX - bX
// return aY - bY
// })
// }
// 각 라인 집합 정렬 // 각 라인 집합 정렬
// roofLines의 방향에 맞춰 currentRoofLines의 방향을 조정 // roofLines의 방향에 맞춰 currentRoofLines의 방향을 조정
@ -711,6 +724,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
}); });
}; };
console.log("wallBaseLines", wall.baseLines)
// const sortedWallLines = sortCurrentRoofLines(wall.lines); // const sortedWallLines = sortCurrentRoofLines(wall.lines);
// roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬 // roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬
const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines); const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines);
@ -743,11 +757,11 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
// const roofLine = sortRoofLines[index]; // const roofLine = sortRoofLines[index];
if (roofLine.attributes.wallLine !== wallLine.id || (roofLine.idx - 1) !== index) { if(roofLine.attributes.wallLine !== wallLine.id || (roofLine.idx - 1) !== index ){
console.log("wallLine2::::", wallLine.id) console.log("wallLine2::::", wallLine.id)
console.log('roofLine:::', roofLine.attributes.wallLine) console.log('roofLine:::',roofLine.attributes.wallLine)
console.log("w:::", wallLine.startPoint, wallLine.endPoint) console.log("w:::",wallLine.startPoint, wallLine.endPoint)
console.log("R:::", roofLine.startPoint, roofLine.endPoint) console.log("R:::",roofLine.startPoint, roofLine.endPoint)
console.log("not matching roofLine", roofLine); console.log("not matching roofLine", roofLine);
return false return false
}//roofLines.find(line => line.attributes.wallLineId === wallLine.attributes.wallId); }//roofLines.find(line => line.attributes.wallLineId === wallLine.attributes.wallId);
@ -759,7 +773,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
//roofline 외곽선 설정 //roofline 외곽선 설정
console.log("index::::", index) console.log("index::::", index)
console.log('roofLine:::', roofLine) console.log('roofLine:::',roofLine)
console.log('wallLine', wallLine) console.log('wallLine', wallLine)
console.log('wallBaseLine', wallBaseLine) console.log('wallBaseLine', wallBaseLine)
@ -798,20 +812,17 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
strokeWidth: 4, strokeWidth: 4,
name : 'eaveHelpLine', name : 'eaveHelpLine',
lineName : 'eaveHelpLine', lineName : 'eaveHelpLine',
selectable : true,
visible : true, visible : true,
roofId : roofId, roofId : roofId,
selectable: true,
hoverCursor: 'pointer',
attributes : { attributes : {
type : 'eaveHelpLine', type: 'eaveHelpLine',
isStart: true, isStart : true,
pitch : wallLine.attributes.pitch, pitch: wallLine.attributes.pitch,
} }
}); });
//coordinateText(line) //coordinateText(line)
canvas.add(line) canvas.add(line)
line.bringToFront()
canvas.renderAll(); canvas.renderAll();
return line return line
} }
@ -828,7 +839,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
let isOut = false let isOut = false
//두 포인트가 변경된 라인인 //두 포인트가 변경된 라인인
if (fullyMoved) { if (fullyMoved ) {
//반시계방향향 //반시계방향향
const mLine = getSelectLinePosition(wall, wallBaseLine) const mLine = getSelectLinePosition(wall, wallBaseLine)
@ -836,7 +847,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
if (getOrientation(roofLine) === 'vertical') { if (getOrientation(roofLine) === 'vertical') {
if (['left', 'right'].includes(mLine.position)) { if (['left', 'right'].includes(mLine.position)) {
if (Math.abs(wallLine.x1 - wallBaseLine.x1) < 0.1 || Math.abs(wallLine.x2 - wallBaseLine.x2) < 0.1) { if(Math.abs(wallLine.x1 - wallBaseLine.x1) < 0.1 || Math.abs(wallLine.x2 - wallBaseLine.x2) < 0.1) {
return false return false
} }
const positionType = const positionType =
@ -846,61 +857,61 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const condition = `${mLine.position}_${positionType}`; const condition = `${mLine.position}_${positionType}`;
let isStartEnd = findInteriorPoint(wallBaseLine, sortedBaseLines) let isStartEnd = findInteriorPoint(wallBaseLine, sortedBaseLines)
let sPoint, ePoint; let sPoint, ePoint;
if (condition === 'left_in') { if(condition === 'left_in') {
isIn = true isIn = true
if (isStartEnd.start) { if (isStartEnd.start ) {
newPEnd.y = roofLine.y2; newPEnd.y = roofLine.y2;
newPEnd.x = roofLine.x2; newPEnd.x = roofLine.x2;
const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber() const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
ePoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 }; ePoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
newPStart.y = wallBaseLine.y1 newPStart.y = wallBaseLine.y1
findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_start' }); findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_start' });
const newPointX = Big(roofLine.x1).plus(moveDist).abs().toNumber() const newPointX = Big(roofLine.x1).plus(moveDist).abs().toNumber()
const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber() const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
const pLineY = Big(roofLine.y1).minus(0).abs().toNumber() const pLineY = Big(roofLine.y1).minus(0).abs().toNumber()
let idx = (0 > index - 1) ? roofLines.length : index let idx = (0 > index - 1)?roofLines.length:index
const pLineX = roofLines[idx - 1].x1 const pLineX = roofLines[idx-1].x1
getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue') getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange') getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) { if(Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink') getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
} }
} }
if (isStartEnd.end) { if(isStartEnd.end) {
newPStart.y = roofLine.y1; newPStart.y = roofLine.y1;
newPStart.x = roofLine.x1; newPStart.x = roofLine.x1;
const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber() const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
ePoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 }; ePoint = {x: wallBaseLine.x2, y: wallBaseLine.y2};
newPEnd.y = wallBaseLine.y2 newPEnd.y = wallBaseLine.y2
findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_end' }); findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_end' });
const newPointX = Big(roofLine.x1).plus(moveDist).toNumber() const newPointX = Big(roofLine.x1).plus(moveDist).toNumber()
const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber() const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
const pLineY = Big(roofLine.y2).minus(0).abs().toNumber() const pLineY = Big(roofLine.y2).minus(0).abs().toNumber()
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const pLineX = roofLines[idx + 1].x2 const pLineX = roofLines[idx+1].x2
getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue') getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange') getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange')
if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) { if(Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink') getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
} }
//getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange') //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
} }
} else if (condition === 'left_out') { }else if(condition === 'left_out') {
console.log("left_out::::isStartEnd:::::", isStartEnd); console.log("left_out::::isStartEnd:::::", isStartEnd);
if (isStartEnd.start) { if(isStartEnd.start){
const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber() const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
const aStartY = Big(roofLine.y1).minus(moveDist).abs().toNumber() const aStartY = Big(roofLine.y1).minus(moveDist).abs().toNumber()
@ -910,38 +921,38 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber() const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber()
newPStart.y = aStartY newPStart.y = aStartY
newPEnd.y = roofLine.y2 //Big(roofLine.y2).minus(eLineY).toNumber() newPEnd.y = roofLine.y2 //Big(roofLine.y2).minus(eLineY).toNumber()
let idx = (0 >= index - 1) ? roofLines.length : index let idx = (0 >= index - 1)?roofLines.length:index
const newLine = roofLines[idx - 1]; const newLine = roofLines[idx-1];
if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) { if(Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
if (inLine) { if(inLine){
if (inLine.x1 < inLine.x2) { if(inLine.x1 < inLine.x2) {
getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink') getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
} else { }else{
getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: bStartY, x: wallLine.x2 }, 'pink') getAddLine({ y: inLine.y2, x: inLine.x2 },{ y: bStartY, x: wallLine.x2 }, 'pink')
} }
} }
getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta') getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta')
getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray') getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray')
findPoints.push({ y: aStartY, x: newPStart.x, position: 'left_out_start' }); findPoints.push({ y: aStartY, x: newPStart.x, position: 'left_out_start' });
} else { }else{
const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber() const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
newPStart.y = Big(newPStart.y).minus(cLineY).toNumber(); newPStart.y = Big(newPStart.y).minus(cLineY).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.x1 < inLine.x2) { if(inLine.x1 < inLine.x2) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1},{ y: newPStart.y, x: newPStart.x }, 'purple')
} }
} else { }else {
//newPStart.y = wallLine.y1; //newPStart.y = wallLine.y1;
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber(); const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
newPStart.y = Big(wallBaseLine.y1).minus(rLineM).abs().toNumber(); newPStart.y = Big(wallBaseLine.y1).minus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine) {
if (inLine.x2 > inLine.x1) { if (inLine.x2 > inLine.x1) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { } else {
@ -954,7 +965,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
} }
if (isStartEnd.end) { if(isStartEnd.end){
const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber() const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
const aStartY = Big(roofLine.y2).plus(moveDist).toNumber() const aStartY = Big(roofLine.y2).plus(moveDist).toNumber()
const bStartY = Big(wallLine.y2).plus(moveDist).toNumber() const bStartY = Big(wallLine.y2).plus(moveDist).toNumber()
@ -963,31 +974,31 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber() const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber()
newPEnd.y = aStartY newPEnd.y = aStartY
newPStart.y = roofLine.y1//Big(roofLine.y1).plus(eLineY).toNumber() newPStart.y = roofLine.y1//Big(roofLine.y1).plus(eLineY).toNumber()
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const newLine = roofLines[idx + 1]; const newLine = roofLines[idx+1];
if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) { if(Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
if (inLine) { if(inLine){
if (inLine.x1 < inLine.x2) { if(inLine.x1 < inLine.x2) {
getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink') getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x1 }, 'pink') getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x1 }, 'pink')
} }
} }
getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta') getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta')
getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray') getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray')
findPoints.push({ y: aStartY, x: newPEnd.x, position: 'left_out_end' }); findPoints.push({ y: aStartY, x: newPEnd.x, position: 'left_out_end' });
} else { }else{
const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber() const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
newPEnd.y = Big(newPEnd.y).plus(cLineY).toNumber(); newPEnd.y = Big(newPEnd.y).plus(cLineY).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.x1 < inLine.x2) { if(inLine.x1 < inLine.x2) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPEnd.y, x: newPEnd.x }, 'purple')
} }
} else { }else {
// newPEnd.y = wallLine.y2 // newPEnd.y = wallLine.y2
@ -995,7 +1006,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber(); const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
newPEnd.y = Big(wallBaseLine.y2).plus(rLineM).abs().toNumber(); newPEnd.y = Big(wallBaseLine.y2).plus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine) {
if (inLine.x2 > inLine.x1) { if (inLine.x2 > inLine.x1) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { } else {
@ -1007,60 +1018,60 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
} }
findPoints.push({ y: newPStart.y, x: newPEnd.x, position: 'left_out_end' }); findPoints.push({ y: newPStart.y, x: newPEnd.x, position: 'left_out_end' });
} }
} else if (condition === 'right_in') { }else if(condition === 'right_in') {
if (isStartEnd.start) { if (isStartEnd.start ) {
newPEnd.y = roofLine.y2; newPEnd.y = roofLine.y2;
newPEnd.x = roofLine.x2; newPEnd.x = roofLine.x2;
const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber() const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
ePoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 }; ePoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
newPStart.y = wallBaseLine.y1 newPStart.y = wallBaseLine.y1
findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_start' }); findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_start'});
const newPointX = Big(roofLine.x1).minus(moveDist).abs().toNumber() const newPointX = Big(roofLine.x1).minus(moveDist).abs().toNumber()
const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber() const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
const pLineY = Big(roofLine.y1).minus(0).abs().toNumber() const pLineY = Big(roofLine.y1).minus(0).abs().toNumber()
let idx = (0 >= index - 1) ? roofLines.length : index let idx = (0 >= index - 1)?roofLines.length:index
const pLineX = roofLines[idx - 1].x1 const pLineX = roofLines[idx-1].x1
getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue') getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
//getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange') //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) { if(Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink') getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
} }
} }
if (isStartEnd.end) { if(isStartEnd.end) {
newPStart.y = roofLine.y1; newPStart.y = roofLine.y1;
newPStart.x = roofLine.x1; newPStart.x = roofLine.x1;
const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber() const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
ePoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 }; ePoint = {x: wallBaseLine.x2, y: wallBaseLine.y2};
newPEnd.y = wallBaseLine.y2 newPEnd.y = wallBaseLine.y2
findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_end' }); findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_end' });
const newPointX = Big(roofLine.x1).minus(moveDist).toNumber() const newPointX = Big(roofLine.x1).minus(moveDist).toNumber()
const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber() const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
const pLineY = Big(roofLine.y2).minus(0).abs().toNumber() const pLineY = Big(roofLine.y2).minus(0).abs().toNumber()
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const pLineX = roofLines[idx + 1].x2 const pLineX = roofLines[idx+1].x2
getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue') getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange') getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange')
if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) { if(Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink') getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
} }
getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange') getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
} }
} else if (condition === 'right_out') { }else if(condition === 'right_out') {
console.log("right_out::::isStartEnd:::::", isStartEnd); console.log("right_out::::isStartEnd:::::", isStartEnd);
if (isStartEnd.start) { //x1 inside if (isStartEnd.start ) { //x1 inside
const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber() const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
const aStartY = Big(roofLine.y1).plus(moveDist).abs().toNumber() const aStartY = Big(roofLine.y1).plus(moveDist).abs().toNumber()
const bStartY = Big(wallLine.y1).plus(moveDist).abs().toNumber() const bStartY = Big(wallLine.y1).plus(moveDist).abs().toNumber()
@ -1069,41 +1080,41 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber() const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber()
newPStart.y = aStartY newPStart.y = aStartY
newPEnd.y = roofLine.y2//Big(roofLine.y2).plus(eLineY).toNumber() newPEnd.y = roofLine.y2//Big(roofLine.y2).plus(eLineY).toNumber()
let idx = (0 >= index - 1) ? roofLines.length : index let idx = (0 >= index - 1)?roofLines.length:index
const newLine = roofLines[idx - 1]; const newLine = roofLines[idx-1];
if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) { if(Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
if (inLine) { if(inLine){
if (inLine.x2 < inLine.x1) { if(inLine.x2 < inLine.x1) {
getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink') getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x2 }, 'pink') getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: bStartY, x: wallLine.x2 }, 'pink')
} }
} }
getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta') getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta')
getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray') getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray')
findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_start' }); findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_start' });
} else { }else{
const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber() const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
newPStart.y = Big(newPStart.y).plus(cLineY).toNumber(); newPStart.y = Big(newPStart.y).plus(cLineY).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.x2 < inLine.x1) { if(inLine.x2 < inLine.x1 ) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPStart.y, x: newPStart.x }, 'purple')
} }
} else { }else {
//newPStart.y = wallLine.y1; //newPStart.y = wallLine.y1;
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.x1).minus(roofLine.x1).abs().toNumber(); const rLineM = Big(wallBaseLine.x1).minus(roofLine.x1).abs().toNumber();
newPStart.y = Big(wallBaseLine.y1).plus(rLineM).abs().toNumber(); newPStart.y = Big(wallBaseLine.y1).plus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.x2 > inLine.x1) { if(inLine.x2 > inLine.x1 ) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x } , 'purple')
} }
} }
@ -1113,7 +1124,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
} }
if (isStartEnd.end) { if(isStartEnd.end){
const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber() const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
const aStartY = Big(roofLine.y2).minus(moveDist).abs().toNumber() const aStartY = Big(roofLine.y2).minus(moveDist).abs().toNumber()
const bStartY = Big(wallLine.y2).minus(moveDist).abs().toNumber() const bStartY = Big(wallLine.y2).minus(moveDist).abs().toNumber()
@ -1122,41 +1133,41 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber() const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber()
newPEnd.y = aStartY newPEnd.y = aStartY
newPStart.y = roofLine.y1//Big(roofLine.y1).minus(eLineY).toNumber() newPStart.y = roofLine.y1//Big(roofLine.y1).minus(eLineY).toNumber()
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const newLine = roofLines[idx + 1]; const newLine = roofLines[idx+1];
if (inLine) { if(inLine){
if (inLine.x2 < inLine.x1) { if(inLine.x2 < inLine.x1) {
getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink') getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x1 }, 'pink') getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: bStartY, x: wallLine.x1 }, 'pink')
} }
} }
if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) { if(Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta') getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta')
getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray') getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray')
findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_end' }); findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_end' });
} else { }else{
const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber() const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
newPEnd.y = Big(newPEnd.y).minus(cLineY).toNumber(); newPEnd.y = Big(newPEnd.y).minus(cLineY).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.x2 < inLine.x1) { if(inLine.x2 < inLine.x1) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
} }
} else { }else {
//newPEnd.y = wallLine.y2; //newPEnd.y = wallLine.y2;
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber(); const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
newPEnd.y = Big(wallBaseLine.y2).minus(rLineM).abs().toNumber(); newPEnd.y = Big(wallBaseLine.y2).minus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.x2 > inLine.x1) { if(inLine.x2 > inLine.x1 ) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y2, x: inLine.x2}, { y: newPEnd.y, x: newPEnd.x } , 'purple')
} }
} }
@ -1169,7 +1180,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
} else if (getOrientation(roofLine) === 'horizontal') { //red } else if (getOrientation(roofLine) === 'horizontal') { //red
if (['top', 'bottom'].includes(mLine.position)) { if (['top', 'bottom'].includes(mLine.position)) {
if (Math.abs(wallLine.y1 - wallBaseLine.y1) < 0.1 || Math.abs(wallLine.y2 - wallBaseLine.y2) < 0.1) { if(Math.abs(wallLine.y1 - wallBaseLine.y1) < 0.1 || Math.abs(wallLine.y2 - wallBaseLine.y2) < 0.1) {
return false return false
} }
const positionType = const positionType =
@ -1182,10 +1193,10 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
let sPoint, ePoint; let sPoint, ePoint;
if (condition === 'top_in') { if(condition === 'top_in') {
if (isStartEnd.start) { if (isStartEnd.start ) {
const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber() const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
sPoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 }; sPoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
newPStart.x = wallBaseLine.x1; newPStart.x = wallBaseLine.x1;
@ -1193,12 +1204,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber() const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber()
const pLineX = Big(roofLine.x1).minus(0).abs().toNumber() const pLineX = Big(roofLine.x1).minus(0).abs().toNumber()
let idx = (0 >= index - 1) ? roofLines.length : index let idx = (0 >= index - 1)?roofLines.length:index
const pLineY = roofLines[idx - 1].y1 const pLineY = roofLines[idx-1].y1
getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue') getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'top_in_start' }); findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'top_in_start' });
if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) { if(Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink') getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
} }
@ -1206,7 +1217,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
} }
if (isStartEnd.end) { if(isStartEnd.end){
const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber() const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
sPoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 } sPoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 }
newPEnd.x = wallBaseLine.x2 newPEnd.x = wallBaseLine.x2
@ -1229,10 +1240,10 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
//getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange') //getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange')
} }
} else if (condition === 'top_out') { }else if(condition === 'top_out') {
console.log("top_out isStartEnd:::::::", isStartEnd); console.log("top_out isStartEnd:::::::", isStartEnd);
if (isStartEnd.start) { if (isStartEnd.start ) {
const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber() const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
const aStartX = Big(roofLine.x1).plus(moveDist).toNumber() const aStartX = Big(roofLine.x1).plus(moveDist).toNumber()
const bStartX = Big(wallLine.x1).plus(moveDist).toNumber() const bStartX = Big(wallLine.x1).plus(moveDist).toNumber()
@ -1241,48 +1252,48 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber() const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber()
newPEnd.x = roofLine.x2 //Big(newPEnd.x).plus(eLineX).toNumber() newPEnd.x = roofLine.x2 //Big(newPEnd.x).plus(eLineX).toNumber()
newPStart.x = aStartX newPStart.x = aStartX
let idx = (0 > index - 1) ? roofLines.length : index let idx = (0 > index - 1)?roofLines.length:index
const newLine = roofLines[idx - 1]; const newLine = roofLines[idx-1];
if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) { if(Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
if (inLine) { if(inLine){
if (inLine.y2 > inLine.y1) { if(inLine.y2 > inLine.y1 ) {
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
} else { }else{
getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink') getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
} }
} }
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta')
getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray') getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_start' }); findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_start' });
} else { }else{
const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber() const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber()
newPStart.x = Big(newPStart.x).plus(cLineX).toNumber(); newPStart.x = Big(newPStart.x).plus(cLineX).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.y2 > inLine.y1) { if(inLine.y2 > inLine.y1 ) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x } , 'purple')
} }
} else { }else {
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber(); const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber();
newPStart.x = Big(wallBaseLine.x1).plus(rLineM).abs().toNumber(); newPStart.x = Big(wallBaseLine.x1).plus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.y2 > inLine.y1) { if(inLine.y2 > inLine.y1 ) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x } , 'purple')
} }
} }
} }
} }
} }
if (isStartEnd.end) { if(isStartEnd.end){
const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber() const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
const aStartX = Big(roofLine.x2).minus(moveDist).abs().toNumber() const aStartX = Big(roofLine.x2).minus(moveDist).abs().toNumber()
const bStartX = Big(wallLine.x2).minus(moveDist).abs().toNumber() const bStartX = Big(wallLine.x2).minus(moveDist).abs().toNumber()
@ -1291,52 +1302,52 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber() const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber()
newPStart.x = roofLine.x1;//Big(newPStart.x).minus(eLineX).abs().toNumber() newPStart.x = roofLine.x1;//Big(newPStart.x).minus(eLineX).abs().toNumber()
newPEnd.x = aStartX newPEnd.x = aStartX
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const newLine = roofLines[idx + 1]; const newLine = roofLines[idx+1];
if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) { if(Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
if (inLine) { if(inLine){
if (inLine.y2 > inLine.y1) { if(inLine.y2 > inLine.y1 ){
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
} else { }else{
getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink') getAddLine({ x: inLine.x1, y: inLine.y1 },{ x: bStartX, y: wallLine.y1 }, 'pink')
} }
} }
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta')
getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray') getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_end' }); findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_end' });
} else { }else{
const cLineX = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber() const cLineX = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
newPEnd.x = Big(newPEnd.x).minus(cLineX).toNumber(); newPEnd.x = Big(newPEnd.x).minus(cLineX).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.y2 > inLine.y1) { if(inLine.y2 > inLine.y1 ) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPEnd.y, x: newPEnd.x }, 'purple')
} }
} else { }else {
//newPEnd.x = wallLine.x2; //newPEnd.x = wallLine.x2;
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber(); const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber();
newPEnd.x = Big(wallBaseLine.x2).minus(rLineM).abs().toNumber(); newPEnd.x = Big(wallBaseLine.x2).minus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.y1 > inLine.y2) { if(inLine.y1 > inLine.y2 ) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPEnd.y, x: newPEnd.x } , 'purple')
} }
} }
} }
} }
} }
} else if (condition === 'bottom_in') { }else if(condition === 'bottom_in') {
if (isStartEnd.start) { if (isStartEnd.start ) {
const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber() const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
sPoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 }; sPoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
newPStart.x = wallBaseLine.x1; newPStart.x = wallBaseLine.x1;
@ -1344,21 +1355,21 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber() const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber()
const pLineX = Big(roofLine.x1).minus(0).abs().toNumber() const pLineX = Big(roofLine.x1).minus(0).abs().toNumber()
let idx = (0 > index - 1) ? roofLines.length : index let idx = (0 > index - 1)?roofLines.length:index
const pLineY = roofLines[idx - 1].y1 const pLineY = roofLines[idx-1].y1
getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue') getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_start' }); findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_start' });
if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) { if(Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink') getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
} }
getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange') getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange')
} }
if (isStartEnd.end) { if(isStartEnd.end){
const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber() const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
sPoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 }; sPoint = {x: wallBaseLine.x2, y: wallBaseLine.y2};
newPEnd.x = wallBaseLine.x2; newPEnd.x = wallBaseLine.x2;
@ -1366,21 +1377,21 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const pDist = Big(wallLine.y1).minus(roofLine.y1).abs().toNumber() const pDist = Big(wallLine.y1).minus(roofLine.y1).abs().toNumber()
const pLineX = Big(roofLine.x2).minus(0).abs().toNumber() const pLineX = Big(roofLine.x2).minus(0).abs().toNumber()
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const pLineY = roofLines[idx + 1].y2 const pLineY = roofLines[idx+1].y2
getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: sPoint.x, y: sPoint.y }, 'blue') getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_end' }); findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_end' });
if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) { if(Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green') getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink') getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
} }
getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange') getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange')
} }
} else if (condition === 'bottom_out') { }else if(condition === 'bottom_out') {
console.log("bottom_out isStartEnd:::::::", isStartEnd); console.log("bottom_out isStartEnd:::::::", isStartEnd);
if (isStartEnd.start) { if (isStartEnd.start ) {
const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber() const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
const aStartX = Big(roofLine.x1).minus(moveDist).abs().toNumber() const aStartX = Big(roofLine.x1).minus(moveDist).abs().toNumber()
const bStartX = Big(wallLine.x1).minus(moveDist).abs().toNumber() const bStartX = Big(wallLine.x1).minus(moveDist).abs().toNumber()
@ -1389,42 +1400,42 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber() const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber()
newPEnd.x = roofLine.x2//Big(roofLine.x2).minus(eLineX).toNumber() newPEnd.x = roofLine.x2//Big(roofLine.x2).minus(eLineX).toNumber()
newPStart.x = aStartX newPStart.x = aStartX
let idx = (0 > index - 1) ? roofLines.length : index let idx = (0 > index - 1)?roofLines.length:index
const newLine = roofLines[idx - 1]; const newLine = roofLines[idx-1];
if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) { if(Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
if (inLine) { if(inLine){
if (inLine.y2 < inLine.y1) { if(inLine.y2 < inLine.y1 ) {
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
} else { }else{
getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink') getAddLine({ x: inLine.x1, y: inLine.y1 },{ x: bStartX, y: wallLine.y1 }, 'pink')
} }
} }
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta')
getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray') getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_start' }); findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_start' });
} else { }else{
const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber() const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber()
newPStart.x = Big(newPStart.x).minus(cLineX).toNumber(); newPStart.x = Big(newPStart.x).minus(cLineX).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.y2 < inLine.y1) { if(inLine.y2 < inLine.y1 ) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple')
} }
} else { }else{
//newPStart.x = wallLine.x1; //newPStart.x = wallLine.x1;
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber(); const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber();
newPStart.x = Big(wallBaseLine.x1).minus(rLineM).abs().toNumber(); newPStart.x = Big(wallBaseLine.x1).minus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x }) const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
if (inLine) { if(inLine){
if (inLine.y2 > inLine.y1) { if(inLine.y2 > inLine.y1 ) {
getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple') getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x }, 'purple') getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x } , 'purple')
} }
} }
} }
@ -1432,7 +1443,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
} }
} }
if (isStartEnd.end) { if(isStartEnd.end){
const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber() const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
const aStartX = Big(roofLine.x2).plus(moveDist).toNumber() const aStartX = Big(roofLine.x2).plus(moveDist).toNumber()
const bStartX = Big(wallLine.x2).plus(moveDist).toNumber() const bStartX = Big(wallLine.x2).plus(moveDist).toNumber()
@ -1441,41 +1452,41 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber() const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber()
newPEnd.x = aStartX newPEnd.x = aStartX
newPStart.x = roofLine.x1;//Big(roofLine.x1).plus(eLineX).toNumber() newPStart.x = roofLine.x1;//Big(roofLine.x1).plus(eLineX).toNumber()
let idx = (roofLines.length < index + 1) ? 0 : index let idx = (roofLines.length < index + 1)?0:index
const newLine = roofLines[idx + 1]; const newLine = roofLines[idx + 1];
if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) { if(Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
if (inLine) { if(inLine){
if (inLine.y2 < inLine.y1) { if(inLine.y2 < inLine.y1 ) {
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
} else { }else{
getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink') getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
} }
} }
getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta') getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta')
getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray') getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_end' }); findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_end' });
} else { }else{
const cLineX = Big(wallBaseLine.y2).minus(wallLine.y2).abs().toNumber() const cLineX = Big(wallBaseLine.y2).minus(wallLine.y2).abs().toNumber()
newPEnd.x = Big(newPEnd.x).plus(cLineX).toNumber(); newPEnd.x = Big(newPEnd.x).plus(cLineX).toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.y2 < inLine.y1) { if(inLine.y2 < inLine.y1 ) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPEnd.y, x: newPEnd.x }, 'purple')
} }
} else { }else{
//newPEnd.x = wallLine.x2; //newPEnd.x = wallLine.x2;
//외곽 라인 그리기 //외곽 라인 그리기
const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber(); const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber();
newPEnd.x = Big(wallBaseLine.x2).plus(rLineM).abs().toNumber(); newPEnd.x = Big(wallBaseLine.x2).plus(rLineM).abs().toNumber();
const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x }) const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
if (inLine) { if(inLine){
if (inLine.y1 > inLine.y2) { if(inLine.y1 > inLine.y2 ) {
getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple') getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
} else { }else{
getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple') getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x } , 'purple')
} }
} }
} }
@ -1488,17 +1499,15 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
getAddLine(newPStart, newPEnd, 'red') getAddLine(newPStart, newPEnd, 'red')
//canvas.remove(roofLine) //canvas.remove(roofLine)
} else { }else{
getAddLine(roofLine.startPoint, roofLine.endPoint,) getAddLine(roofLine.startPoint, roofLine.endPoint, )
} }
canvas.renderAll() canvas.renderAll()
}); });
} // }
getMoveUpDownLine()
}
if (findPoints.length > 0) { if (findPoints.length > 0) {
// 모든 점에 대해 라인 업데이트를 누적 // 모든 점에 대해 라인 업데이트를 누적