import { useRecoilValue } from 'recoil' import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState, pitchTextSelector, showAngleUnitSelector, } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util' export const useLine = () => { const canvas = useRecoilValue(canvasState) const fontSize = useRecoilValue(fontSizeState) const fontFamily = useRecoilValue(fontFamilyState) const currentAngleType = useRecoilValue(currentAngleTypeSelector) const pitchText = useRecoilValue(pitchTextSelector) const angleUnit = useRecoilValue(showAngleUnitSelector) const addLine = (points = [], options) => { const line = new QLine(points, { ...options, fontSize: fontSize, fontFamily: fontFamily, }) if (line.length < 1) { return null } canvas?.add(line) return line } const hideLine = (line) => { line.set({ visible: false, }) canvas ?.getObjects() .find((obj) => obj.parent === line) .set({ visible: false, }) canvas?.renderAll() } const showLine = (line) => { line.set({ visible: true, }) canvas ?.getObjects() .find((obj) => obj.parent === line) .set({ visible: true, }) canvas?.renderAll() } const removeLine = (line) => { removeLineText(line) canvas?.remove(line) canvas?.renderAll() } const removeLineText = (line) => { canvas?.remove(canvas?.getObjects().find((obj) => obj.parent === line)) } const getLengthByLine = (line) => { const scaleX = line.scaleX const scaleY = line.scaleY const x1 = line.left const y1 = line.top const x2 = line.left + line.width * scaleX const y2 = line.top + line.height * scaleY const dx = x2 - x1 const dy = y2 - y1 return Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10 } const addPitchText = (line) => { removePitchText(line) const { startPoint, endPoint, direction, attributes } = line const { offset, onlyOffset = false } = attributes if (offset === 0) { return } let left, top const textStr = currentAngleType === ANGLE_TYPE.SLOPE ? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${!onlyOffset && attributes.pitch ? '-∠' + attributes.pitch + angleUnit : ''}` : `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${!onlyOffset && attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) + angleUnit : ''}` if (direction === 'top') { left = (startPoint.x + endPoint.x) / 2 top = (startPoint.y + endPoint.y) / 2 - 50 } else if (direction === 'bottom') { left = (startPoint.x + endPoint.x) / 2 top = (startPoint.y + endPoint.y) / 2 - 50 } else if (direction === 'left') { left = (startPoint.x + endPoint.x) / 2 + 50 top = (startPoint.y + endPoint.y) / 2 - 30 } else if (direction === 'right') { left = (startPoint.x + endPoint.x) / 2 + 50 top = (startPoint.y + endPoint.y) / 2 - 30 } if (!attributes.pitch) { return } const text = new fabric.Text(`${textStr}`, { left, top, fontSize: 20, originText: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}`, fill: 'black', name: 'pitchText', parentId: line.id, pitch: attributes.pitch, }) canvas.add(text) } const removePitchText = (line) => { const { id } = line const pitchText = canvas.getObjects().filter((obj) => obj.name === 'pitchText' && obj.parentId === id) // 기존 pitchText가 있으면 삭제 if (pitchText.length > 0) { canvas.remove(pitchText) } } const addPitchTextsByOuterLines = () => { canvas .getObjects() .filter((obj) => obj.name === 'outerLine') .forEach((line) => { addPitchText(line) }) } return { addLine, removeLine, hideLine, showLine, addPitchText, removePitchText, addPitchTextsByOuterLines, } }