줌 상태에 따라 그리드 복사, 이동 시 잘리는 현상 수정
This commit is contained in:
parent
0f2719a2f0
commit
2aca4d22ec
@ -5,9 +5,9 @@ import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useState } from 'react'
|
||||
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
||||
import { useGrid } from '@/hooks/common/useGrid'
|
||||
import { gridColorState } from '@/store/gridAtom'
|
||||
import { gridDisplaySelector } from '@/store/settingAtom'
|
||||
|
||||
const GRID_PADDING = 5
|
||||
export default function GridCopy(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
@ -25,10 +25,10 @@ export default function GridCopy(props) {
|
||||
}
|
||||
|
||||
const copy = (object, length) => {
|
||||
const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
|
||||
const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
|
||||
const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
|
||||
const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
|
||||
const lineStartX = object.direction === 'vertical' ? object.x1 + length : object.x1
|
||||
const lineEndX = object.direction === 'vertical' ? object.x2 + length : object.x2
|
||||
const lineStartY = object.direction === 'vertical' ? object.y1 : object.y1 + length
|
||||
const lineEndY = object.direction === 'vertical' ? object.y2 : object.y1 + length
|
||||
|
||||
const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
|
||||
stroke: gridColor,
|
||||
|
||||
@ -3,11 +3,9 @@ import { useMessage } from '@/hooks/useMessage'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useCanvas } from '@/hooks/useCanvas'
|
||||
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { set } from 'react-hook-form'
|
||||
|
||||
export default function GridMove(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
@ -70,10 +68,10 @@ export default function GridMove(props) {
|
||||
const move = (object, x, y) => {
|
||||
object.set({
|
||||
...object,
|
||||
x1: object.direction === 'vertical' ? object.x1 + x : 0,
|
||||
x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
|
||||
y1: object.direction === 'vertical' ? 0 : object.y1 + y,
|
||||
y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
|
||||
x1: object.direction === 'vertical' ? object.x1 + x : object.x1,
|
||||
x2: object.direction === 'vertical' ? object.x1 + x : object.x2,
|
||||
y1: object.direction === 'vertical' ? object.y1 : object.y1 + y,
|
||||
y2: object.direction === 'vertical' ? object.y2 : object.y1 + y,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@ export function useCanvas(id) {
|
||||
const visibleBottom = visibleTop + canvasHeight / currentZoom
|
||||
|
||||
// tempGrid 라인들을 찾아서 크기 조정
|
||||
const tempGridLines = canvas.getObjects().filter((obj) => ['tempGrid', 'lineGrid'].includes(obj.name))
|
||||
const tempGridLines = canvas.getObjects().filter((obj) => ['tempGrid', 'lineGrid', 'mouseLine'].includes(obj.name))
|
||||
|
||||
tempGridLines.forEach((line) => {
|
||||
if (line.direction === 'vertical') {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user