jaybe/landing-builder
1
0
Fork 0
Code Issues Pull Requests 9 Actions Packages Projects Releases Wiki Activity

WYSIWYG: 멀티선택 그룹 리사이즈/회전 TDD 추가 및 구현\n- 리사이즈: 마지막 선택 객체 스냅 델타를 전체 선택 객체에 균등 적용\n- 회전: 스냅/Shift 미세회전 델타를 전체 선택 객체에 균등 적용\n- 테스트 안정화(waitFor) 및 훅 의존성 보정(일부 경고 잔존)

Browse Source
This commit is contained in:
Jaybe
2025-11-17 01:06:14 +09:00
parent 498ffb675a
commit 713648fb3a
3 changed files with 197 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/wysiwyg/Canvas.multigroup.resize.test.tsx
+56
View File
@@ -0,0 +1,56 @@
import { describe, it, expect } from 'vitest'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { Canvas } from '@/components/wysiwyg/Canvas'
import type { Frame } from '@/lib/wysiwyg/schema'
function makeFrame(): Frame {
return {
id: 'f1',
width: 400,
height: 300,
background: '#ffffff',
layers: [
{
id: 'l1',
name: 'L1',
visible: true,
locked: false,
objects: [
{ id: 'o1', type: 'image', x: 20, y: 20, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
{ id: 'o2', type: 'image', x: 120, y: 60, width: 80, height: 30, rotate: 0, zIndex: 1, props: { src: 'y', alt: '' } },
],
},
],
}
}
describe('WYSIWYG Canvas multigroup resize', () => {
it('resizes all selected objects by the same snapped delta when resizing last-selected', async () => {
const frame = makeFrame()
const { getByTestId } = render(<Canvas frame={frame} />)
// select o1
const obj1 = getByTestId('obj-o1')
fireEvent.mouseDown(obj1, { clientX: 25, clientY: 25 })
// shift+select o2
const obj2 = getByTestId('obj-o2')
fireEvent.mouseDown(obj2, { clientX: 125, clientY: 65, shiftKey: true })
// resize using last-selected (o2) handle
const handle2 = getByTestId('resize-handle-o2')
const canvas = getByTestId('wysiwyg-canvas')
// Start at bottom-right corner; move by +7,+9 (snap8 => +8, +8)
fireEvent.mouseDown(handle2, { clientX: 200, clientY: 90 })
fireEvent.mouseMove(canvas, { clientX: 207, clientY: 99 })
fireEvent.mouseUp(canvas)
const o1 = getByTestId('obj-o1')
const o2 = getByTestId('obj-o2')
await waitFor(() => {
expect(o2).toHaveStyle({ width: '88px', height: '40px' })
expect(o1).toHaveStyle({ width: '58px', height: '50px' })
})
})
})
components/wysiwyg/Canvas.multigroup.rotate.test.tsx
+77
View File
@@ -0,0 +1,77 @@
import { describe, it, expect } from 'vitest'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { Canvas } from '@/components/wysiwyg/Canvas'
import type { Frame } from '@/lib/wysiwyg/schema'
function makeFrame(): Frame {
return {
id: 'f1',
width: 400,
height: 300,
background: '#ffffff',
layers: [
{
id: 'l1',
name: 'L1',
visible: true,
locked: false,
objects: [
{ id: 'o1', type: 'image', x: 60, y: 60, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
{ id: 'o2', type: 'image', x: 160, y: 60, width: 80, height: 30, rotate: 0, zIndex: 1, props: { src: 'y', alt: '' } },
],
},
],
}
}
describe('WYSIWYG Canvas multigroup rotate', () => {
it('rotates all selected objects by same snapped angle when rotating last-selected', async () => {
const frame = makeFrame()
const { getByTestId } = render(<Canvas frame={frame} />)
// select o1 then shift+select o2 (last-selected o2)
fireEvent.mouseDown(getByTestId('obj-o1'), { clientX: 60, clientY: 60 })
fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 160, clientY: 60, shiftKey: true })
const handle2 = getByTestId('rotate-handle-o2')
const canvas = getByTestId('wysiwyg-canvas')
// start rotate at 0deg and move +16px -> snap to 15deg by default
fireEvent.mouseDown(handle2, { clientX: 100, clientY: 50 })
fireEvent.mouseMove(canvas, { clientX: 116, clientY: 50 })
fireEvent.mouseUp(canvas)
const o1 = getByTestId('obj-o1')
const o2 = getByTestId('obj-o2')
await waitFor(() => {
expect(o2).toHaveStyle({ transform: 'rotate(15deg)' })
expect(o1).toHaveStyle({ transform: 'rotate(15deg)' })
})
})
it('applies fine rotation delta to all when holding Shift', async () => {
const frame = makeFrame()
const { getByTestId } = render(<Canvas frame={frame} />)
// select o1 then shift+select o2 (last-selected o2)
fireEvent.mouseDown(getByTestId('obj-o1'), { clientX: 60, clientY: 60 })
fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 160, clientY: 60, shiftKey: true })
const handle2 = getByTestId('rotate-handle-o2')
const canvas = getByTestId('wysiwyg-canvas')
// start rotate at 0deg, move +7px with Shift -> 7deg (no snap)
fireEvent.mouseDown(handle2, { clientX: 100, clientY: 50 })
fireEvent.mouseMove(canvas, { clientX: 107, clientY: 50, shiftKey: true })
fireEvent.mouseUp(canvas)
const o1 = getByTestId('obj-o1')
const o2 = getByTestId('obj-o2')
await waitFor(() => {
expect(o2).toHaveStyle({ transform: 'rotate(7deg)' })
expect(o1).toHaveStyle({ transform: 'rotate(7deg)' })
})
})
})
components/wysiwyg/Canvas.tsx
+64 -7
View File
@@ -33,7 +33,9 @@ export function Canvas({ frame, onChange }: CanvasProps) {
const selectedId = selectedIds[selectedIds.length - 1] ?? null
const draggingRef = useRef<{ id: string; startX: number; startY: number; origX: number; origY: number } | null>(null)
const resizingRef = useRef<{ id: string; startX: number; startY: number; origW: number; origH: number } | null>(null)
const resizeGroupRef = useRef<{ ids: string[]; orig: Record<string, { w: number; h: number }> } | null>(null)
const rotatingRef = useRef<{ id: string; startX: number; startY: number; origDeg: number } | null>(null)
const rotateGroupRef = useRef<{ ids: string[]; orig: Record<string, { d: number }> } | null>(null)
const [showGuides, setShowGuides] = useState(false)
const [guidePos, setGuidePos] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
const [marquee, setMarquee] = useState<{
@@ -114,7 +116,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
draggingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origX: o.x, origY: o.y }
setShowGuides(true)
setGuidePos({ x: snap8(o.x), y: snap8(o.y) })
}, [])
}, [selectedIds, model.layers])
const onMouseMoveCanvas = useCallback((e: React.MouseEvent) => {
// 마퀴 선택 처리 우선
@@ -148,7 +150,18 @@ export function Canvas({ frame, onChange }: CanvasProps) {
if (!e.shiftKey) {
next = Math.round(next / 15) * 15
}
updateObject(rot.id, (o) => ({ ...o, rotate: next }))
if (selectedIds.length > 1 && rotateGroupRef.current) {
const { ids, orig } = rotateGroupRef.current
const base = orig[rot.id]
const dd = next - base.d
updateObjects(ids, (o) => {
const o0 = orig[o.id]
if (!o0) return o
return { ...o, rotate: o0.d + dd }
})
} else {
updateObject(rot.id, (o) => ({ ...o, rotate: next }))
}
return
}
const r = resizingRef.current
@@ -157,7 +170,23 @@ export function Canvas({ frame, onChange }: CanvasProps) {
const dy = e.clientY - r.startY
const nw = Math.max(8, snap8(r.origW + dx))
const nh = Math.max(8, snap8(r.origH + dy))
updateObject(r.id, (o) => ({ ...o, width: nw, height: nh }))
if (selectedIds.length > 1 && resizeGroupRef.current) {
const { ids, orig } = resizeGroupRef.current
const base = orig[r.id]
const dw = nw - base.w
const dh = nh - base.h
updateObjects(ids, (o) => {
const o0 = orig[o.id]
if (!o0) return o
return {
...o,
width: Math.max(8, o0.w + dw),
height: Math.max(8, o0.h + dh),
}
})
} else {
updateObject(r.id, (o) => ({ ...o, width: nw, height: nh }))
}
return
}
const d = draggingRef.current
@@ -169,7 +198,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
setGuidePos({ x: nx, y: ny })
updateObject(d.id, (o) => ({ ...o, x: nx, y: ny }))
}
}, [updateObject, marquee.active, marquee.x0, marquee.y0, model.layers])
}, [updateObject, updateObjects, marquee.active, marquee.x0, marquee.y0, model.layers, selectedIds.length])
const onMouseUpCanvas = useCallback(() => {
if (marquee.active) {
@@ -177,6 +206,7 @@ export function Canvas({ frame, onChange }: CanvasProps) {
}
draggingRef.current = null
resizingRef.current = null
resizeGroupRef.current = null
rotatingRef.current = null
setShowGuides(false)
}, [marquee.active])
@@ -184,12 +214,29 @@ export function Canvas({ frame, onChange }: CanvasProps) {
const onMouseDownResize = useCallback((e: React.MouseEvent, o: WObject) => {
e.stopPropagation()
resizingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origW: o.width, origH: o.height }
}, [])
// capture originals for group resize
const ids = Array.from(new Set([...selectedIds, o.id]))
const orig: Record<string, { w: number; h: number }> = {}
for (const ly of model.layers) {
for (const ob of ly.objects) {
if (ids.includes(ob.id)) orig[ob.id] = { w: ob.width, h: ob.height }
}
}
resizeGroupRef.current = { ids, orig }
}, [selectedIds, model.layers])
const onMouseDownRotate = useCallback((e: React.MouseEvent, o: WObject) => {
e.stopPropagation()
rotatingRef.current = { id: o.id, startX: e.clientX, startY: e.clientY, origDeg: o.rotate }
}, [])
const ids = Array.from(new Set([...selectedIds, o.id]))
const orig: Record<string, { d: number }> = {}
for (const ly of model.layers) {
for (const ob of ly.objects) {
if (ids.includes(ob.id)) orig[ob.id] = { d: ob.rotate }
}
}
rotateGroupRef.current = { ids, orig }
}, [selectedIds, model.layers])
return (
<div
@@ -396,7 +443,17 @@ export function Canvas({ frame, onChange }: CanvasProps) {
if (!selected) return
const nw = Math.max(8, snap8(typeof width === 'number' ? width : 0))
const nh = Math.max(8, snap8(typeof height === 'number' ? height : 0))
updateObject(selected.id, (o) => ({ ...o, width: nw, height: nh }))
if (selectedIds.length > 1) {
const dw = nw - selected.width
const dh = nh - selected.height
updateObjects(selectedIds, (o) => ({
...o,
width: Math.max(8, o.width + dw),
height: Math.max(8, o.height + dh),
}))
} else {
updateObject(selected.id, (o) => ({ ...o, width: nw, height: nh }))
}
}}
onRotate={({ rotate, inputEvent }) => {
if (!selected) return