73 lines
1.9 KiB
JavaScript
73 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'
|
|
|
|
const GRID_PADDING = 5
|
|
export function useTempGrid() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const gridColor = useRecoilValue(gridColorState)
|
|
const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
|
|
const isGridDisplay = useRecoilValue(gridDisplaySelector)
|
|
const tempGridModeStateLeftClickEvent = (e) => {
|
|
//임의 그리드 모드일 경우
|
|
let pointer = canvas.getPointer(e.e)
|
|
|
|
const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], {
|
|
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()
|
|
}
|
|
|
|
const tempGridRightClickEvent = (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
//임의 그리드 모드일 경우
|
|
let pointer = { x: e.offsetX, y: e.offsetY }
|
|
|
|
const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
|
|
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,
|
|
name: 'tempGrid',
|
|
visible: isGridDisplay,
|
|
direction: 'horizontal',
|
|
})
|
|
|
|
canvas.add(tempGrid)
|
|
|
|
canvas.renderAll()
|
|
}
|
|
|
|
return {
|
|
tempGridModeStateLeftClickEvent,
|
|
tempGridRightClickEvent,
|
|
tempGridMode,
|
|
setTempGridMode,
|
|
}
|
|
}
|