wehub-resource-sync
1250 lines
44 KiB
TypeScript
1250 lines
44 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import { render } from '@testing-library/react';
|
|
import { fireEvent } from '@testing-library/dom';
|
|
import type { Slide } from '@openmaic/dsl';
|
|
import { EditableSlideCanvas } from '../../src/editing/EditableSlideCanvas';
|
|
import { useViewportSize } from '../../src/hooks/useViewportSize';
|
|
import { getLineElementPath } from '../../src/utils/element';
|
|
|
|
// Mock the shared viewport-fit hook so we can force a non-zero centering
|
|
// offset. In jsdom the real hook reports container size 0 -> offset 0, which
|
|
// is why the scale-1 gesture tests below cannot catch letterboxing bugs.
|
|
vi.mock('../../src/hooks/useViewportSize', () => ({
|
|
useViewportSize: vi.fn(),
|
|
}));
|
|
|
|
const slide = {
|
|
id: 's',
|
|
viewportSize: 1000,
|
|
viewportRatio: 0.5625,
|
|
elements: [
|
|
{
|
|
id: 'a',
|
|
type: 'text',
|
|
left: 100,
|
|
top: 100,
|
|
width: 200,
|
|
height: 80,
|
|
rotate: 0,
|
|
content: 'x',
|
|
defaultFontName: 'a',
|
|
defaultColor: '#000',
|
|
lineHeight: 1,
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
|
|
function findHit(container: HTMLElement) {
|
|
return container.querySelector('[data-element-id="a"]') as HTMLElement;
|
|
}
|
|
|
|
function findLineHit(container: HTMLElement) {
|
|
return container.querySelector('[data-hit-kind="line"]') as unknown as SVGPathElement;
|
|
}
|
|
|
|
describe('EditableSlideCanvas', () => {
|
|
beforeEach(() => {
|
|
// Default: no centering offset (matches jsdom's zero-size container), so
|
|
// the existing gesture tests run exactly as before.
|
|
vi.mocked(useViewportSize).mockReturnValue({
|
|
viewportStyles: { left: 0, top: 0, width: 1000, height: 562 },
|
|
fitScale: 1,
|
|
});
|
|
});
|
|
|
|
it('offsets the interaction overlay by SlideCanvas centering offset', () => {
|
|
// Letterboxed container: slide is centered with a 160px left gutter, so
|
|
// an element rendered by SlideCanvas sits at left = 160 + el.left*scale.
|
|
vi.mocked(useViewportSize).mockReturnValue({
|
|
viewportStyles: { left: 160, top: 0, width: 1000, height: 562 },
|
|
fitScale: 1,
|
|
});
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: ['a'], primaryId: 'a' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
// Hit target must include the +160 centering offset (el.left=100 -> 260px),
|
|
// otherwise pointer-down hit-testing misses the rendered element.
|
|
const hit = findHit(container);
|
|
expect(hit.style.left).toBe('260px');
|
|
|
|
// SelectionOverlay is unchanged; its border sits inside a positioning
|
|
// container that carries the centering offset (left: 160px).
|
|
const border = container.querySelector('[data-selection-border]') as HTMLElement;
|
|
expect(border.parentElement?.style.left).toBe('160px');
|
|
});
|
|
|
|
it('a click (no move) emits onSelectionChange only', () => {
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerUp(hit, { clientX: 0, clientY: 0 });
|
|
// Selection happens once (on pointer-down); a plain click emits nothing more.
|
|
expect(onSel).toHaveBeenCalledTimes(1);
|
|
expect(onSel).toHaveBeenCalledWith(
|
|
expect.objectContaining({ elementIds: ['a'], primaryId: 'a' }),
|
|
);
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('auto-fits when scale is omitted: overlay positions use fitScale', () => {
|
|
// scale omitted -> canvasScale falls back to the hook's fitScale (0.5 here).
|
|
vi.mocked(useViewportSize).mockReturnValue({
|
|
viewportStyles: { left: 0, top: 0, width: 1000, height: 562 },
|
|
fitScale: 0.5,
|
|
});
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
selection={{ elementIds: ['a'], primaryId: 'a' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
// el.left=100 at fitScale 0.5 -> 50px; el.width=200 -> 100px.
|
|
expect(hit.style.left).toBe('50px');
|
|
expect(hit.style.width).toBe('100px');
|
|
});
|
|
|
|
it('is inert without callbacks: no interactive hit node is rendered', () => {
|
|
const { container } = render(<EditableSlideCanvas slide={slide} scale={1} />);
|
|
expect(container.querySelector('[data-element-id]')).toBeNull();
|
|
});
|
|
|
|
it('a selected line shows endpoint handles (not a bbox border); the box keeps its border', () => {
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
...(slide as unknown as { elements: unknown[] }).elements,
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: ['a', 'line1'], primaryId: 'line1' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
// Box element still hit-testable; line element has no draggable hit node
|
|
// (its blocker is an inert SVG path, not a data-element-id move target).
|
|
expect(container.querySelector('[data-element-id="a"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-element-id="line1"]')).toBeNull();
|
|
// The selected line's chrome is its endpoint handles, NOT a bbox border.
|
|
expect(container.querySelector('[data-line-handle="start"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-line-handle="end"]')).not.toBeNull();
|
|
// Only the box element gets a selection border (the line does not).
|
|
expect(container.querySelectorAll('[data-selection-border]')).toHaveLength(1);
|
|
});
|
|
|
|
it('a selected line renders start+end handles at correct scaled screen positions', () => {
|
|
// Letterboxed container so the centering offset is exercised too.
|
|
vi.mocked(useViewportSize).mockReturnValue({
|
|
viewportStyles: { left: 160, top: 40, width: 1000, height: 562 },
|
|
fitScale: 1,
|
|
});
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 20,
|
|
start: [0, 0],
|
|
end: [50, 30],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={0.5}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const start = container.querySelector('[data-line-handle="start"]') as HTMLElement;
|
|
const end = container.querySelector('[data-line-handle="end"]') as HTMLElement;
|
|
// start: left = 160 + (10+0)*0.5 = 165; top = 40 + (20+0)*0.5 = 50.
|
|
expect(start.style.left).toBe('165px');
|
|
expect(start.style.top).toBe('50px');
|
|
// end: left = 160 + (10+50)*0.5 = 190; top = 40 + (20+30)*0.5 = 65.
|
|
expect(end.style.left).toBe('190px');
|
|
expect(end.style.top).toBe('65px');
|
|
// No ctrl handles for a straight line.
|
|
expect(container.querySelector('[data-line-handle="ctrl"]')).toBeNull();
|
|
});
|
|
|
|
it('dragging the end handle emits exactly one element.update for the line', () => {
|
|
const onCh = vi.fn();
|
|
const onSel = vi.fn();
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const end = container.querySelector('[data-line-handle="end"]') as Element;
|
|
fireEvent.pointerDown(end, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(end, { clientX: 40, clientY: 30 });
|
|
fireEvent.pointerUp(end, { clientX: 40, clientY: 30 });
|
|
// Exactly one reshape intent, targeting the line, of type element.update.
|
|
expect(onCh).toHaveBeenCalledTimes(1);
|
|
const intents = onCh.mock.calls[0][0];
|
|
expect(intents).toHaveLength(1);
|
|
expect(intents[0].type).toBe('element.update');
|
|
expect(intents[0].id).toBe('line1');
|
|
expect(intents[0].props).toBeTruthy();
|
|
// A handle grab EDITS; it must never re-select. onSelectionChange stays
|
|
// untouched across the whole reshape (down/move/up).
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('a selected curve line renders a ctrl handle whose drag emits one element.update', () => {
|
|
// F4: a `curve` line exposes a single control handle (`ctrl`). Dragging it
|
|
// reshapes the curve, emitting exactly one element.update — and, like every
|
|
// handle grab, never re-selects.
|
|
const onCh = vi.fn();
|
|
const onSel = vi.fn();
|
|
const curveSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 0,
|
|
top: 0,
|
|
start: [0, 0],
|
|
end: [100, 0],
|
|
curve: [50, 80],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={curveSlide}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const ctrl = container.querySelector('[data-line-handle="ctrl"]') as Element;
|
|
expect(ctrl).not.toBeNull();
|
|
fireEvent.pointerDown(ctrl, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(ctrl, { clientX: 20, clientY: -30 });
|
|
fireEvent.pointerUp(ctrl, { clientX: 20, clientY: -30 });
|
|
expect(onCh).toHaveBeenCalledTimes(1);
|
|
const intents = onCh.mock.calls[0][0];
|
|
expect(intents).toHaveLength(1);
|
|
expect(intents[0].type).toBe('element.update');
|
|
expect(intents[0].id).toBe('line1');
|
|
expect(intents[0].props.curve).toBeTruthy();
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('a locked selected line renders no handles', () => {
|
|
const lockedLine = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
lock: true,
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lockedLine}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
expect(container.querySelector('[data-line-handle]')).toBeNull();
|
|
});
|
|
|
|
it('FIX A: select-only mount (no onElementsChange) shows the highlight but NO line handles', () => {
|
|
// Line handles are gated on EDITABILITY (onElementsChange), not generic
|
|
// interactivity: the reshape gesture no-ops without a mutation channel, so
|
|
// a select-only mount must NOT show draggable handles that cannot commit.
|
|
// Selection feedback (the highlight stroke) still renders.
|
|
const onSel = vi.fn();
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={onSel}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
// No editability -> NO handles at all.
|
|
expect(container.querySelector('[data-line-handle]')).toBeNull();
|
|
// But the selection highlight is still shown (feedback).
|
|
const highlight = container.querySelector(
|
|
'[data-hit-kind="line-highlight"]',
|
|
) as unknown as SVGPathElement;
|
|
expect(highlight).not.toBeNull();
|
|
expect(highlight.getAttribute('stroke')).not.toBe('transparent');
|
|
});
|
|
|
|
it('a line renders an inert SVG-path blocker mirroring getLineElementPath (straight) and consumes stroke pointer-downs', () => {
|
|
// R2/P2: the blocker is now an SVG <path> whose `d` is the SAME path the v1
|
|
// renderer draws (getLineElementPath). `pointer-events: stroke` makes only
|
|
// the fat transparent stroke a hit target, so it covers the visible line
|
|
// (every path shape) and NOT the empty bbox: a pointer-down on the stroke
|
|
// consumes without selecting/moving the box beneath, while an off-stroke
|
|
// bbox click still reaches the box below.
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const lineOverBox = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0], // box 'a'
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 100,
|
|
top: 100,
|
|
start: [0, 0],
|
|
end: [100, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineOverBox}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
|
|
// The blocker is the SVG path, inert (no data-element-id), with `d` equal to
|
|
// the renderer's path and a stroke-only hit region.
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as SVGPathElement;
|
|
expect(blocker).not.toBeNull();
|
|
expect(blocker.getAttribute('data-element-id')).toBeNull();
|
|
expect(blocker.tagName.toLowerCase()).toBe('path');
|
|
expect(blocker.getAttribute('d')).toBe('M0,0 L100,50');
|
|
expect(blocker.getAttribute('pointer-events')).toBe('stroke');
|
|
expect(blocker.getAttribute('fill')).toBe('none');
|
|
// Grab band (canvas units): max(10, width*scale)=max(10,2)=10 at scale 1.
|
|
expect(blocker.getAttribute('stroke-width')).toBe('10');
|
|
|
|
// A pointer-down on the stroke blocker selects the LINE (selectable but not
|
|
// draggable) and consumes the pointer, so the box beneath is neither moved
|
|
// nor selected — the selection lands on the line, never the box.
|
|
fireEvent.pointerDown(blocker as unknown as Element, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(blocker as unknown as Element, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(blocker as unknown as Element, { clientX: 30, clientY: 20 });
|
|
expect(onSel).toHaveBeenCalledTimes(1);
|
|
expect(onSel).toHaveBeenCalledWith(
|
|
expect.objectContaining({ elementIds: ['line1'], primaryId: 'line1' }),
|
|
);
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
|
|
// A pointer-down in the line's bbox but away from the stroke still reaches
|
|
// the box: its own hit target is present and drives a move.
|
|
const boxHit = container.querySelector('[data-element-id="a"]') as HTMLElement;
|
|
expect(boxHit).not.toBeNull();
|
|
fireEvent.pointerDown(boxHit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(boxHit, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(boxHit, { clientX: 30, clientY: 20 });
|
|
expect(onCh).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('a pointer-down on a line selects it via onSelectionChange but emits no element.update (selectable, not draggable)', () => {
|
|
// Regression: lines regressed to unselectable because the blocker only
|
|
// stopped propagation. It must now select the line on
|
|
// pointer-down (parity with box elements) while staying drag-inert: no
|
|
// working copy, no move intent, ever.
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as Element;
|
|
fireEvent.pointerDown(blocker, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(blocker, { clientX: 40, clientY: 30 });
|
|
fireEvent.pointerUp(blocker, { clientX: 40, clientY: 30 });
|
|
// Selected once, on pointer-down (box-element parity); never draggable.
|
|
expect(onSel).toHaveBeenCalledTimes(1);
|
|
expect(onSel).toHaveBeenCalledWith(
|
|
expect.objectContaining({ elementIds: ['line1'], primaryId: 'line1' }),
|
|
);
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('the line blocker still consumes the pointer when onSelectionChange is absent', () => {
|
|
// Even with no selection callback, the blocker must block fall-through: a
|
|
// pointer-down over a line that overlaps a box must not move the box.
|
|
const onCh = vi.fn();
|
|
const lineOverBox = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0], // box 'a'
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 100,
|
|
top: 100,
|
|
start: [0, 0],
|
|
end: [100, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineOverBox}
|
|
scale={1}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as Element;
|
|
fireEvent.pointerDown(blocker, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(blocker, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(blocker, { clientX: 30, clientY: 20 });
|
|
// Blocker consumed the pointer; the box beneath never moved.
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('a non-straight line blocker uses the real getLineElementPath (covers the curve, not just the chord)', () => {
|
|
// P2: for curve/broken/cubic lines the drawn stroke bends away from the
|
|
// start->end chord; a chord-only blocker leaves the visible curve
|
|
// click-through. The blocker must reuse getLineElementPath so its `d`
|
|
// traces the identical bent path the renderer draws.
|
|
const curved = {
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 0,
|
|
top: 0,
|
|
start: [0, 0],
|
|
curve: [50, 80],
|
|
end: [100, 0],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
};
|
|
const curvedSlide = { ...slide, elements: [curved] } as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={curvedSlide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as SVGPathElement;
|
|
expect(blocker).not.toBeNull();
|
|
const d = blocker.getAttribute('d');
|
|
// Exactly the path the renderer draws (a quadratic curve), NOT a straight chord.
|
|
expect(d).toBe(getLineElementPath(curved as never));
|
|
expect(d).toContain('Q');
|
|
expect(d).not.toBe('M0,0 L100,0');
|
|
});
|
|
|
|
it('the blocker grab band scales with el.width*canvasScale (min 10px screen)', () => {
|
|
// P3: a wider rendered stroke (large el.width, or zoomed canvas) must widen
|
|
// the grab band so its outer pixels are still covered. stroke-width is in
|
|
// canvas units inside a scale(canvasScale) svg, so screen band =
|
|
// stroke-width*canvasScale = max(10, el.width*canvasScale).
|
|
const mkLine = (id: string, width: number) => ({
|
|
id,
|
|
type: 'line',
|
|
left: 0,
|
|
top: 0,
|
|
start: [0, 0],
|
|
end: [100, 0],
|
|
width,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
});
|
|
|
|
// At scale 1: thin(2) clamps to the 10px min; thick(40) yields a wider band.
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={{ ...slide, elements: [mkLine('thin', 2), mkLine('thick', 40)] } as unknown as Slide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const bands = Array.from(container.querySelectorAll('[data-hit-kind="line"]')).map((b) =>
|
|
parseFloat(b.getAttribute('stroke-width') || '0'),
|
|
);
|
|
expect(bands[0]).toBe(10); // thin clamped to the 10px minimum
|
|
expect(bands[1]).toBe(40); // thick -> wider band
|
|
expect(bands[1]).toBeGreaterThan(bands[0]);
|
|
|
|
// Under zoom the 10px SCREEN minimum is preserved: at scale 0.5 a thin line
|
|
// has canvas stroke-width 20 so its on-screen band is 20*0.5 = 10.
|
|
const { container: c2 } = render(
|
|
<EditableSlideCanvas
|
|
slide={{ ...slide, elements: [mkLine('thin', 2)] } as unknown as Slide}
|
|
scale={0.5}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const swZoom = parseFloat(
|
|
(c2.querySelector('[data-hit-kind="line"]') as Element).getAttribute('stroke-width') || '0',
|
|
);
|
|
expect(swZoom).toBe(20);
|
|
expect(swZoom * 0.5).toBe(10); // screen band == 10px min
|
|
});
|
|
|
|
it('F1: a selected line paints a visible highlight (separate path); every blocker stays transparent', () => {
|
|
// A selected line must show selection chrome in EVERY state. The hit
|
|
// geometry and visual chrome are now split into two paths: the blocker is
|
|
// ALWAYS transparent; a separate highlight path (accent stroke) is added
|
|
// only when the line is selected — feedback even where handles are not
|
|
// (read-only/locked).
|
|
const mkLine = (id: string) => ({
|
|
id,
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
});
|
|
const twoLines = {
|
|
...slide,
|
|
elements: [mkLine('sel'), mkLine('unsel')],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={twoLines}
|
|
scale={1}
|
|
selection={{ elementIds: ['sel'], primaryId: 'sel' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
// Both lines render a blocker path; ALL blockers are transparent.
|
|
const blockers = Array.from(
|
|
container.querySelectorAll('[data-hit-kind="line"]'),
|
|
) as unknown as SVGPathElement[];
|
|
expect(blockers).toHaveLength(2);
|
|
expect(blockers.every((p) => p.getAttribute('stroke') === 'transparent')).toBe(true);
|
|
// Exactly one visible highlight path (the selected line), on its own node.
|
|
const highlights = Array.from(
|
|
container.querySelectorAll('[data-hit-kind="line-highlight"]'),
|
|
) as unknown as SVGPathElement[];
|
|
expect(highlights).toHaveLength(1);
|
|
expect(highlights[0].getAttribute('stroke')).not.toBe('transparent');
|
|
expect(highlights[0].getAttribute('stroke')).toBeTruthy();
|
|
});
|
|
|
|
it('FIX B: selecting a thin line does NOT shrink its hit band; highlight is non-interactive', () => {
|
|
// Regression: when the blocker was ALSO the visual chrome, selecting a thin
|
|
// line switched its stroke-width from the fat grab band to the thin
|
|
// highlight width, shrinking the `pointer-events: stroke` hit region so
|
|
// clicks fell through to a box beneath — a click-through that only appeared
|
|
// once the line was selected. With the split, the blocker's hit band is
|
|
// identical selected vs. unselected, and the highlight never hit-tests.
|
|
const mkLine = (id: string) => ({
|
|
id,
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2, // thin: grab band clamps to the 10px min
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
});
|
|
// Unselected reference blocker.
|
|
const { container: cUnsel } = render(
|
|
<EditableSlideCanvas
|
|
slide={{ ...slide, elements: [mkLine('l')] } as unknown as Slide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const unselBlocker = cUnsel.querySelector(
|
|
'[data-hit-kind="line"]',
|
|
) as unknown as SVGPathElement;
|
|
const unselPe = unselBlocker.getAttribute('pointer-events');
|
|
const unselSw = unselBlocker.getAttribute('stroke-width');
|
|
expect(unselPe).toBe('stroke');
|
|
expect(unselSw).toBe('10'); // fat grab band
|
|
|
|
// Selected: the blocker's hit band must be UNCHANGED.
|
|
const { container: cSel } = render(
|
|
<EditableSlideCanvas
|
|
slide={{ ...slide, elements: [mkLine('l')] } as unknown as Slide}
|
|
scale={1}
|
|
selection={{ elementIds: ['l'], primaryId: 'l' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
const selBlocker = cSel.querySelector('[data-hit-kind="line"]') as unknown as SVGPathElement;
|
|
expect(selBlocker.getAttribute('pointer-events')).toBe(unselPe); // still 'stroke'
|
|
expect(selBlocker.getAttribute('stroke-width')).toBe(unselSw); // still the fat band, not shrunk
|
|
expect(selBlocker.getAttribute('stroke')).toBe('transparent'); // blocker is never the chrome
|
|
|
|
// The highlight is a separate, purely-visual path: never hit-tests.
|
|
const selHighlight = cSel.querySelector(
|
|
'[data-hit-kind="line-highlight"]',
|
|
) as unknown as SVGPathElement;
|
|
expect(selHighlight).not.toBeNull();
|
|
expect(selHighlight.getAttribute('pointer-events')).toBe('none');
|
|
expect(selHighlight.getAttribute('stroke')).not.toBe('transparent');
|
|
});
|
|
|
|
it('F1: a locked selected line still shows the highlight (feedback) but no handles', () => {
|
|
const lockedLine = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
lock: true,
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lockedLine}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
// Highlight present (selection feedback) even though the line is locked...
|
|
const highlight = container.querySelector(
|
|
'[data-hit-kind="line-highlight"]',
|
|
) as unknown as SVGPathElement;
|
|
expect(highlight).not.toBeNull();
|
|
expect(highlight.getAttribute('stroke')).not.toBe('transparent');
|
|
// ...but a locked line is not reshapeable, so no handles.
|
|
expect(container.querySelector('[data-line-handle]')).toBeNull();
|
|
});
|
|
|
|
it('F1: a selected line in a read-only mount (no callbacks) still shows the highlight', () => {
|
|
// No selection/mutation callbacks -> the interaction layer is inert, but a
|
|
// selected line must STILL show its highlight. Its blocker path renders
|
|
// with a visible stroke and pointer-events disabled (never captures).
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
/>,
|
|
);
|
|
// The highlight path renders with a visible stroke; it is purely visual.
|
|
const highlight = container.querySelector(
|
|
'[data-hit-kind="line-highlight"]',
|
|
) as unknown as SVGPathElement;
|
|
expect(highlight).not.toBeNull();
|
|
expect(highlight.getAttribute('stroke')).not.toBe('transparent');
|
|
expect(highlight.getAttribute('pointer-events')).toBe('none');
|
|
// Inert: the blocker in a read-only mount never captures the pointer.
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as SVGPathElement;
|
|
expect(blocker).not.toBeNull();
|
|
expect(blocker.getAttribute('pointer-events')).toBe('none');
|
|
// No handles/hit targets in a read-only mount.
|
|
expect(container.querySelector('[data-line-handle]')).toBeNull();
|
|
expect(container.querySelector('[data-element-id]')).toBeNull();
|
|
});
|
|
|
|
it('select-only host (no onElementsChange): no live movement during drag; pointer-up selects', () => {
|
|
// R3: with only onSelectionChange, the working copy must NOT follow the
|
|
// pointer during pointermove (nothing can commit, so a live drag would just
|
|
// snap back). The element stays put; pointer-up selects it.
|
|
const onSel = vi.fn();
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(hit, { clientX: 30, clientY: 20 });
|
|
// No live movement: the rendered element position is unchanged mid-drag.
|
|
expect(findHit(container).style.left).toBe('100px');
|
|
expect(findHit(container).style.top).toBe('100px');
|
|
fireEvent.pointerUp(hit, { clientX: 30, clientY: 20 });
|
|
// Selection happened once (on pointer-down); no update channel to emit to.
|
|
expect(onSel).toHaveBeenCalledTimes(1);
|
|
expect(onSel).toHaveBeenCalledWith(
|
|
expect.objectContaining({ elementIds: ['a'], primaryId: 'a' }),
|
|
);
|
|
});
|
|
|
|
it('select-only host leaves box and line hit layers touch-pan friendly while preserving tap selection', () => {
|
|
// Touch suppression belongs to edit gestures, not selection. A select-only
|
|
// mount still exposes hit layers for tap-select, but native touch panning
|
|
// must survive when there is no mutation channel to commit a drag.
|
|
const onSel = vi.fn();
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0],
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
|
|
const boxHit = findHit(container);
|
|
const lineHit = findLineHit(container);
|
|
expect(boxHit.style.touchAction).toBe('');
|
|
expect(lineHit.style.touchAction).toBe('');
|
|
|
|
fireEvent.pointerDown(boxHit, { clientX: 0, clientY: 0 });
|
|
expect(onSel).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({ elementIds: ['a'], primaryId: 'a' }),
|
|
);
|
|
fireEvent.pointerDown(lineHit, { clientX: 0, clientY: 0 });
|
|
expect(onSel).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({ elementIds: ['line1'], primaryId: 'line1' }),
|
|
);
|
|
});
|
|
|
|
it('editable host suppresses touch panning on box and line hit layers', () => {
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0],
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
|
|
expect(findHit(container).style.touchAction).toBe('none');
|
|
expect(findLineHit(container).style.touchAction).toBe('none');
|
|
});
|
|
|
|
it('a drag emits exactly one element.update intent on pointer-up', () => {
|
|
const onCh = vi.fn();
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: ['a'], primaryId: 'a' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(hit, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(hit, { clientX: 30, clientY: 20 });
|
|
expect(onCh).toHaveBeenCalledTimes(1);
|
|
expect(onCh).toHaveBeenCalledWith([
|
|
{ type: 'element.update', id: 'a', props: { left: 130, top: 120 } },
|
|
]);
|
|
});
|
|
|
|
it('a diagonal move past the threshold on both axes commits a drag (Euclidean)', () => {
|
|
// dx=dy=1.9 -> neither axis exceeds 2 (old per-axis check would misclassify
|
|
// as a click), but hypot ≈ 2.69 > 2 so it must commit a drag intent.
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: ['a'], primaryId: 'a' }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(hit, { clientX: 1.9, clientY: 1.9 });
|
|
fireEvent.pointerUp(hit, { clientX: 1.9, clientY: 1.9 });
|
|
expect(onCh).toHaveBeenCalledTimes(1);
|
|
expect(onCh).toHaveBeenCalledWith([
|
|
{ type: 'element.update', id: 'a', props: { left: 101.9, top: 101.9 } },
|
|
]);
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('fills its container: outer wrapper is width/height 100% (style can override)', () => {
|
|
const { container } = render(
|
|
<EditableSlideCanvas slide={slide} scale={1} onSelectionChange={vi.fn()} />,
|
|
);
|
|
const outer = container.firstChild as HTMLElement;
|
|
expect(outer.style.width).toBe('100%');
|
|
expect(outer.style.height).toBe('100%');
|
|
|
|
// A consumer `style` still wins (merged AFTER the fill defaults).
|
|
const { container: c2 } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
onSelectionChange={vi.fn()}
|
|
style={{ height: '400px' }}
|
|
/>,
|
|
);
|
|
expect((c2.firstChild as HTMLElement).style.height).toBe('400px');
|
|
expect((c2.firstChild as HTMLElement).style.width).toBe('100%');
|
|
});
|
|
|
|
it('with only onSelectionChange, a >2px drag still selects and emits no update', () => {
|
|
const onSel = vi.fn();
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(hit, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(hit, { clientX: 30, clientY: 20 });
|
|
// No mutation callback -> a drag-classified gesture falls back to selection.
|
|
expect(onSel).toHaveBeenCalledTimes(1);
|
|
expect(onSel).toHaveBeenCalledWith(
|
|
expect.objectContaining({ elementIds: ['a'], primaryId: 'a' }),
|
|
);
|
|
});
|
|
|
|
it('pointercancel reverts the working copy and leaves the hook ready for a new gesture', () => {
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: ['a'], primaryId: 'a' }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(hit, { clientX: 30, clientY: 0 });
|
|
expect(findHit(container).style.left).toBe('130px'); // live drag moved it
|
|
fireEvent.pointerCancel(hit, { clientX: 30, clientY: 0 });
|
|
// Cancelled: working copy reverts, no intent, no selection change.
|
|
expect(findHit(container).style.left).toBe('100px');
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
|
|
// The hook is ready again: a fresh gesture is NOT ignored.
|
|
fireEvent.pointerDown(hit, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(hit, { clientX: 40, clientY: 0 });
|
|
fireEvent.pointerUp(hit, { clientX: 40, clientY: 0 });
|
|
expect(onCh).toHaveBeenCalledTimes(1);
|
|
expect(onCh).toHaveBeenCalledWith([
|
|
{ type: 'element.update', id: 'a', props: { left: 140, top: 100 } },
|
|
]);
|
|
});
|
|
|
|
it('locked element: no interactive move hit target is rendered', () => {
|
|
const lockedSlide = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0],
|
|
{
|
|
id: 'locked1',
|
|
type: 'text',
|
|
left: 300,
|
|
top: 300,
|
|
width: 100,
|
|
height: 50,
|
|
rotate: 0,
|
|
content: 'y',
|
|
defaultFontName: 'a',
|
|
defaultColor: '#000',
|
|
lineHeight: 1,
|
|
lock: true,
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lockedSlide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
/>,
|
|
);
|
|
// Unlocked element still hit-testable; locked element has no hit node.
|
|
expect(container.querySelector('[data-element-id="a"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-element-id="locked1"]')).toBeNull();
|
|
});
|
|
|
|
it('a locked element overlapping an unlocked one blocks the pointer instead of falling through', () => {
|
|
// Regression: a locked element used to be skipped entirely from the hit
|
|
// layer, so a pointer-down over
|
|
// its (visually on-top) area fell through to whatever unlocked element's
|
|
// hit target happened to occupy the same region underneath — moving/
|
|
// selecting the WRONG element. The locked element now gets an inert
|
|
// blocker at the same stacking position (same map order) so it consumes
|
|
// the pointer instead.
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const overlappingLockedSlide = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0], // 'a': left 100 top 100 w200 h80
|
|
{
|
|
id: 'locked1',
|
|
type: 'text',
|
|
left: 100,
|
|
top: 100,
|
|
width: 200,
|
|
height: 80,
|
|
rotate: 0,
|
|
content: 'y',
|
|
defaultFontName: 'a',
|
|
defaultColor: '#000',
|
|
lineHeight: 1,
|
|
lock: true,
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={overlappingLockedSlide}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
|
|
// Both elements share identical screen geometry. `locked1` is later in
|
|
// the elements array, so it is later in DOM/stacking order too — mirror
|
|
// real overlapping-sibling hit-testing by dispatching to whichever hit
|
|
// node currently ends up on top there. Pre-fix that's still `a`'s own hit
|
|
// div (the locked element renders no hit node at all); post-fix it's the
|
|
// locked blocker.
|
|
const hitLayerNodes = container.querySelectorAll(
|
|
'[data-element-id], [data-hit-kind="blocker"]',
|
|
);
|
|
const topmost = hitLayerNodes[hitLayerNodes.length - 1] as HTMLElement;
|
|
|
|
fireEvent.pointerDown(topmost, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(topmost, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(topmost, { clientX: 30, clientY: 20 });
|
|
|
|
// The locked blocker must consume the gesture: the unlocked element `a`
|
|
// beneath it is neither moved (no `element.update`) nor selected.
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('a locked line blocks fall-through but is not selectable (emits no onSelectionChange)', () => {
|
|
// F2: a locked line, like a locked box, is inert — it consumes the pointer
|
|
// (blocks fall-through to an overlapped box beneath) but must NOT select.
|
|
const onSel = vi.fn();
|
|
const onCh = vi.fn();
|
|
const lockedLineOverBox = {
|
|
...slide,
|
|
elements: [
|
|
(slide as unknown as { elements: unknown[] }).elements[0], // box 'a'
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 100,
|
|
top: 100,
|
|
start: [0, 0],
|
|
end: [100, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
lock: true,
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lockedLineOverBox}
|
|
scale={1}
|
|
selection={{ elementIds: [] }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={onCh}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as Element;
|
|
expect(blocker).not.toBeNull();
|
|
fireEvent.pointerDown(blocker, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerMove(blocker, { clientX: 30, clientY: 20 });
|
|
fireEvent.pointerUp(blocker, { clientX: 30, clientY: 20 });
|
|
// Locked: blocked the pointer (box beneath neither moved nor selected) and
|
|
// did not select the line itself.
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
expect(onCh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('re-clicking an already-sole-selected line does not re-emit onSelectionChange', () => {
|
|
// F3: mirror the box `alreadySolePrimary` guard — when the line is already
|
|
// the sole primary selection, a further pointer-down must not re-emit.
|
|
const onSel = vi.fn();
|
|
const lineSlide = {
|
|
...slide,
|
|
elements: [
|
|
{
|
|
id: 'line1',
|
|
type: 'line',
|
|
left: 10,
|
|
top: 10,
|
|
start: [0, 0],
|
|
end: [50, 50],
|
|
width: 2,
|
|
style: 'solid',
|
|
color: '#333',
|
|
points: ['', ''],
|
|
},
|
|
],
|
|
} as unknown as Slide;
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={lineSlide}
|
|
scale={1}
|
|
selection={{ elementIds: ['line1'], primaryId: 'line1' }}
|
|
onSelectionChange={onSel}
|
|
onElementsChange={vi.fn()}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const blocker = container.querySelector('[data-hit-kind="line"]') as unknown as Element;
|
|
fireEvent.pointerDown(blocker, { clientX: 0, clientY: 0 });
|
|
fireEvent.pointerUp(blocker, { clientX: 0, clientY: 0 });
|
|
// Already sole primary -> no redundant re-emit.
|
|
expect(onSel).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('ignores a foreign pointerId; only the active pointer drives the gesture', () => {
|
|
const { container } = render(
|
|
<EditableSlideCanvas
|
|
slide={slide}
|
|
scale={1}
|
|
selection={{ elementIds: ['a'], primaryId: 'a' }}
|
|
onSelectionChange={vi.fn()}
|
|
onElementsChange={vi.fn()}
|
|
snapping={false}
|
|
/>,
|
|
);
|
|
const hit = findHit(container);
|
|
fireEvent.pointerDown(hit, { pointerId: 1, clientX: 0, clientY: 0 });
|
|
// A second pointer's move must be ignored (no cross-contamination).
|
|
fireEvent.pointerMove(hit, { pointerId: 2, clientX: 50, clientY: 50 });
|
|
expect(findHit(container).style.left).toBe('100px'); // unmoved
|
|
// The active pointer still drives the working copy.
|
|
fireEvent.pointerMove(hit, { pointerId: 1, clientX: 30, clientY: 0 });
|
|
expect(findHit(container).style.left).toBe('130px');
|
|
});
|
|
});
|