63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import { canvasState, tempGridModeState } from '@/store/canvasAtom'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { gridColorState } from '@/store/gridAtom'
|
|
import { gridDisplaySelector } from '@/store/settingAtom'
|
|
import { useMouse } from '@/hooks/useMouse'
|
|
|
|
const GRID_PADDING = 5
|
|
export function useTempGrid() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const gridColor = useRecoilValue(gridColorState)
|
|
const isGridDisplay = useRecoilValue(gridDisplaySelector)
|
|
const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
|
|
const { getIntersectMousePoint } = useMouse()
|
|
const getVisibleBounds = () => {
|
|
const currentZoom = canvas.getZoom()
|
|
const vt = canvas.viewportTransform
|
|
const visibleLeft = -vt[4] / currentZoom
|
|
const visibleTop = -vt[5] / currentZoom
|
|
const visibleRight = visibleLeft + canvas.getWidth() / currentZoom
|
|
const visibleBottom = visibleTop + canvas.getHeight() / currentZoom
|
|
const padding = 500
|
|
return {
|
|
left: visibleLeft - padding,
|
|
top: visibleTop - padding,
|
|
right: visibleRight + padding,
|
|
bottom: visibleBottom + padding,
|
|
}
|
|
}
|
|
|
|
const tempGridModeStateLeftClickEvent = (e) => {
|
|
//임의 그리드 모드일 경우
|
|
let pointer = getIntersectMousePoint(e)
|
|
const bounds = getVisibleBounds()
|
|
|
|
const tempGrid = new fabric.Line([pointer.x, bounds.top, pointer.x, bounds.bottom], {
|
|
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: 'vertical',
|
|
visible: isGridDisplay,
|
|
name: 'tempGrid',
|
|
})
|
|
|
|
canvas.add(tempGrid)
|
|
|
|
canvas.renderAll()
|
|
}
|
|
|
|
return {
|
|
tempGridModeStateLeftClickEvent,
|
|
tempGridMode,
|
|
setTempGridMode,
|
|
}
|
|
}
|