47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
|
|
import { fabric } from 'fabric'
|
|
import { useMouse } from '@/hooks/useMouse'
|
|
import { gridDisplaySelector } from '@/store/settingAtom'
|
|
|
|
export function useAdsorptionPoint() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
|
|
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
|
|
const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
|
|
const isGridDisplay = useRecoilValue(gridDisplaySelector)
|
|
const { getIntersectMousePoint } = useMouse()
|
|
|
|
const getAdsorptionPoints = () => {
|
|
return canvas.getObjects().filter((obj) => obj.visible && obj.name === 'adsorptionPoint')
|
|
}
|
|
|
|
const adsorptionPointAddModeStateEvent = (opt) => {
|
|
//흡착점 모드일 경우
|
|
let pointer = getIntersectMousePoint(opt)
|
|
|
|
const adsorptionPoint = new fabric.Circle({
|
|
radius: 3,
|
|
fill: 'red',
|
|
left: pointer.x - 3,
|
|
top: pointer.y - 3,
|
|
x: pointer.x,
|
|
y: pointer.y,
|
|
selectable: true,
|
|
name: 'adsorptionPoint',
|
|
visible: isGridDisplay,
|
|
})
|
|
canvas.add(adsorptionPoint)
|
|
setAdsorptionPointMode(true)
|
|
canvas.renderAll()
|
|
}
|
|
|
|
return {
|
|
adsorptionPointAddMode,
|
|
adsorptionPointMode,
|
|
adsorptionRange,
|
|
getAdsorptionPoints,
|
|
adsorptionPointAddModeStateEvent,
|
|
}
|
|
}
|