onMovedCheck(movedDuringPressRef.current)}
+ />
+ );
+};
+
+// index가 없는 플러그인 2개 선택 시나리오 — 그룹 bounds 오인 회귀 검증용
+const PluginPairHarness = () => {
+ const { handlePointerDown } = useSelectionDrag({
+ enabled: true,
+ zoom: 1,
+ startX: 0,
+ startY: 0,
+ elementId: 'plugin-a',
+ elementWidth: 100,
+ elementHeight: 100,
+ elementType: 'plugin',
+ selectedElements: [
+ { id: 'plugin-a', type: 'plugin' },
+ { id: 'plugin-b', type: 'plugin' },
+ ],
+ getOtherElements: () => [
+ {
+ id: 'plugin-b',
+ left: 200,
+ top: 0,
+ right: 300,
+ bottom: 100,
+ centerX: 250,
+ centerY: 50,
+ width: 100,
+ height: 100,
+ },
+ ],
+ });
+
+ return
;
+};
+
+interface MovingPluginPairHarnessProps {
+ getOtherElements: () => ElementBounds[];
+ onMultiDrag: (dx: number, dy: number) => void;
+}
+
+const MovingPluginPairHarness = ({
+ getOtherElements,
+ onMultiDrag,
+}: MovingPluginPairHarnessProps) => {
+ const { handlePointerDown } = useSelectionDrag({
+ enabled: true,
+ zoom: 1,
+ startX: 0,
+ startY: 0,
+ elementId: 'plugin-a',
+ elementWidth: 100,
+ elementHeight: 100,
+ elementType: 'plugin',
+ selectedElements: [
+ { id: 'plugin-a', type: 'plugin' },
+ { id: 'plugin-b', type: 'plugin' },
+ ],
+ getOtherElements,
+ onMultiDrag,
+ });
+
+ return (
+
+ );
+};
+
+describe('useSelectionDrag', () => {
+ let host: HTMLDivElement;
+ let root: Root;
+ let rafCallbacks: Map
;
+ let nextRafId: number;
+ let onClick: Mock<() => void>;
+ let onMovedCheck: Mock<(moved: boolean) => void>;
+ let onMultiDragStart: Mock<() => void>;
+ let onMultiDrag: Mock<(dx: number, dy: number) => void>;
+ let onMultiDragEnd: Mock<() => void>;
+
+ const renderHarness = async () => {
+ await act(async () => {
+ root.render(
+ ,
+ );
+ });
+ return host.querySelector('[data-testid="selection-drag"]')!;
+ };
+
+ const pointerEvent = (type: string, init: PointerEventInit = {}) =>
+ new PointerEvent(type, {
+ bubbles: true,
+ cancelable: true,
+ button: 0,
+ pointerId: 1,
+ pointerType: 'mouse',
+ isPrimary: true,
+ ...init,
+ });
+
+ const flushRaf = () => {
+ const callbacks = [...rafCallbacks.values()];
+ rafCallbacks.clear();
+ callbacks.forEach((callback) => callback(performance.now()));
+ };
+
+ beforeEach(() => {
+ globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+ host = document.createElement('div');
+ document.body.appendChild(host);
+ root = createRoot(host);
+ rafCallbacks = new Map();
+ nextRafId = 1;
+ vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+ const id = nextRafId++;
+ rafCallbacks.set(id, callback);
+ return id;
+ });
+ vi.spyOn(window, 'cancelAnimationFrame').mockImplementation((id) => {
+ rafCallbacks.delete(id);
+ });
+ onClick = vi.fn();
+ onMovedCheck = vi.fn();
+ onMultiDragStart = vi.fn();
+ onMultiDrag = vi.fn();
+ onMultiDragEnd = vi.fn();
+ clearGuides.mockClear();
+ setDraggingOrResizing.mockClear();
+ releaseDragSession();
+ });
+
+ afterEach(async () => {
+ await act(async () => root.unmount());
+ host.remove();
+ document.body.innerHTML = '';
+ vi.restoreAllMocks();
+ });
+
+ it('moves on the first valid snapped delta without a 5px threshold', async () => {
+ const element = await renderHarness();
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown'));
+ element.dispatchEvent(pointerEvent('pointermove', { clientX: 3 }));
+ flushRaf();
+ element.dispatchEvent(pointerEvent('pointerup', { clientX: 3 }));
+ });
+ element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+
+ expect(onMultiDragStart).toHaveBeenCalledTimes(1);
+ expect(onMultiDrag).toHaveBeenCalledTimes(1);
+ expect(onMultiDrag).toHaveBeenCalledWith(5, 0);
+ expect(onMultiDragEnd).toHaveBeenCalledTimes(1);
+ expect(onMovedCheck).toHaveBeenCalledWith(true);
+ });
+
+ it('keeps pointerdown uncanceled so compatibility click remains available', async () => {
+ const element = await renderHarness();
+ const down = pointerEvent('pointerdown');
+
+ await act(async () => {
+ element.dispatchEvent(down);
+ element.dispatchEvent(pointerEvent('pointerup'));
+ element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ });
+
+ expect(down.defaultPrevented).toBe(false);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('ignores an additional press during the owned pointer session', async () => {
+ const element = await renderHarness();
+ const setPointerCapture = vi.spyOn(element, 'setPointerCapture');
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown', { pointerId: 1 }));
+ element.dispatchEvent(pointerEvent('pointerdown', { pointerId: 2 }));
+ element.dispatchEvent(pointerEvent('pointerup', { pointerId: 1 }));
+ });
+
+ expect(setPointerCapture).toHaveBeenCalledTimes(1);
+ expect(onMultiDragStart).toHaveBeenCalledTimes(1);
+ expect(onMultiDragEnd).toHaveBeenCalledTimes(1);
+ });
+
+ it('completes once across duplicate terminal signals', async () => {
+ const element = await renderHarness();
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown'));
+ element.dispatchEvent(pointerEvent('pointerup'));
+ element.dispatchEvent(pointerEvent('lostpointercapture'));
+ window.dispatchEvent(new Event('blur'));
+ });
+
+ expect(onMultiDragEnd).toHaveBeenCalledTimes(1);
+ expect(
+ setDraggingOrResizing.mock.calls.filter(([value]) => value === false),
+ ).toHaveLength(1);
+ });
+
+ it('keeps the double-click guard across the second stationary press', async () => {
+ const element = await renderHarness();
+
+ // 첫 press 드래그 → 두 번째 정지 press → dblclick: 가드 유지돼야 함
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown'));
+ element.dispatchEvent(pointerEvent('pointermove', { clientX: 7 }));
+ flushRaf();
+ element.dispatchEvent(pointerEvent('pointerup', { clientX: 7 }));
+ element.dispatchEvent(pointerEvent('pointerdown', { clientX: 7 }));
+ element.dispatchEvent(pointerEvent('pointerup', { clientX: 7 }));
+ });
+ element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+
+ expect(onMovedCheck).toHaveBeenLastCalledWith(true);
+ });
+
+ it('keeps other plugins distinct in group bounds without index collision', async () => {
+ await act(async () => {
+ root.render();
+ });
+ const element = host.querySelector(
+ '[data-testid="plugin-drag"]',
+ )!;
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown'));
+ element.dispatchEvent(pointerEvent('pointermove', { clientX: 7 }));
+ flushRaf();
+ element.dispatchEvent(pointerEvent('pointerup', { clientX: 7 }));
+ });
+
+ const groupCall = vi
+ .mocked(calculateGroupBounds)
+ .mock.calls.at(-1)?.[0] as Array<{ id: string }>;
+ expect(groupCall).toHaveLength(2);
+ expect(groupCall.map((bounds) => bounds.id).sort()).toEqual([
+ 'plugin-a',
+ 'plugin-b',
+ ]);
+ });
+
+ it('keeps selected group bounds based on drag-start positions across frames', async () => {
+ let pluginBLeft = 200;
+ const getOtherElements = vi.fn(() => [
+ {
+ id: 'plugin-b',
+ left: pluginBLeft,
+ top: 0,
+ right: pluginBLeft + 100,
+ bottom: 100,
+ centerX: pluginBLeft + 50,
+ centerY: 50,
+ width: 100,
+ height: 100,
+ },
+ ]);
+ const updateStorePosition = vi.fn((dx: number) => {
+ pluginBLeft += dx;
+ });
+
+ await act(async () => {
+ root.render(
+ ,
+ );
+ });
+ const element = host.querySelector(
+ '[data-testid="moving-plugin-drag"]',
+ )!;
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown'));
+ element.dispatchEvent(pointerEvent('pointermove', { clientX: 5 }));
+ flushRaf();
+ });
+ const firstFrameBounds = vi
+ .mocked(calculateGroupBounds)
+ .mock.calls.at(-1)?.[0];
+ expect(
+ firstFrameBounds?.find((bounds) => bounds.id === 'plugin-b')?.left,
+ ).toBe(205);
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointermove', { clientX: 10 }));
+ flushRaf();
+ element.dispatchEvent(pointerEvent('pointerup', { clientX: 10 }));
+ });
+ const secondFrameBounds = vi
+ .mocked(calculateGroupBounds)
+ .mock.calls.at(-1)?.[0];
+ expect(
+ secondFrameBounds?.find((bounds) => bounds.id === 'plugin-b')?.left,
+ ).toBe(210);
+ expect(updateStorePosition).toHaveBeenNthCalledWith(1, 5, 0);
+ expect(updateStorePosition).toHaveBeenNthCalledWith(2, 5, 0);
+ });
+
+ it('ignores non-primary pointers', async () => {
+ const element = await renderHarness();
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown', { isPrimary: false }));
+ });
+
+ expect(onMultiDragStart).not.toHaveBeenCalled();
+ });
+
+ it('rejects a concurrent session from another hook instance', async () => {
+ const element = await renderHarness();
+
+ // 두 번째 인스턴스 — 별도 루트에 렌더해 교차 인스턴스 소유권 검증
+ const host2 = document.createElement('div');
+ document.body.appendChild(host2);
+ const root2 = createRoot(host2);
+ const onMultiDragStart2 = vi.fn();
+ await act(async () => {
+ root2.render(
+ ,
+ );
+ });
+ const element2 = host2.querySelector(
+ '[data-testid="selection-drag"]',
+ )!;
+
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerdown', { pointerId: 1 }));
+ element2.dispatchEvent(pointerEvent('pointerdown', { pointerId: 2 }));
+ });
+ expect(onMultiDragStart).toHaveBeenCalledTimes(1);
+ expect(onMultiDragStart2).not.toHaveBeenCalled();
+
+ // 첫 세션이 끝나면 소유권이 풀려 다른 인스턴스가 시작 가능
+ await act(async () => {
+ element.dispatchEvent(pointerEvent('pointerup', { pointerId: 1 }));
+ element2.dispatchEvent(pointerEvent('pointerdown', { pointerId: 3 }));
+ });
+ expect(onMultiDragStart2).toHaveBeenCalledTimes(1);
+
+ await act(async () => {
+ element2.dispatchEvent(pointerEvent('pointerup', { pointerId: 3 }));
+ root2.unmount();
+ });
+ host2.remove();
+ });
+});
diff --git a/src/renderer/hooks/Grid/useSelectionDrag.ts b/src/renderer/hooks/Grid/useSelectionDrag.ts
new file mode 100644
index 00000000..0abd9030
--- /dev/null
+++ b/src/renderer/hooks/Grid/useSelectionDrag.ts
@@ -0,0 +1,306 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import type React from 'react';
+import { useGridSelectionStore } from '@stores/grid/useGridSelectionStore';
+import { useSmartGuidesStore } from '@stores/grid/useSmartGuidesStore';
+import { useSettingsStore } from '@stores/useSettingsStore';
+import {
+ calculateBounds,
+ calculateGroupBounds,
+ calculateSnapPoints,
+ type ElementBounds,
+} from '@utils/grid/smartGuides';
+import { tryAcquireDragSession, releaseDragSession } from './dragSession';
+
+interface SelectedElementLike {
+ id: string;
+ type?: string;
+ index?: number;
+}
+
+interface UseSelectionDragOptions {
+ enabled: boolean;
+ zoom: number;
+ startX: number;
+ startY: number;
+ elementId: string;
+ elementWidth: number;
+ elementHeight: number;
+ elementType: string;
+ elementIndex?: number;
+ selectedElements: SelectedElementLike[];
+ getOtherElements: (excludeId: string) => ElementBounds[];
+ getSelectedElementIds?: (element: SelectedElementLike) => string[];
+ onMultiDragStart?: () => void;
+ onMultiDrag?: (dx: number, dy: number) => void;
+ onMultiDragEnd?: () => void;
+}
+
+interface UseSelectionDragReturn {
+ handlePointerDown: (event: React.PointerEvent) => void;
+ movedDuringPressRef: RefObject;
+}
+
+// movedDuringPressRef는 "이번 또는 직전 press에서 실이동 발생"을 뜻한다 —
+// dblclick은 두 press의 합성이므로 직전 press까지 봐야
+// 드래그(복귀 포함) 직후의 빠른 재클릭이 편집 진입으로 새지 않는다
+export const useSelectionDrag = ({
+ enabled,
+ zoom,
+ startX,
+ startY,
+ elementId,
+ elementWidth,
+ elementHeight,
+ elementType,
+ elementIndex,
+ selectedElements,
+ getOtherElements,
+ getSelectedElementIds = (element) => [element.id],
+ onMultiDragStart,
+ onMultiDrag,
+ onMultiDragEnd,
+}: UseSelectionDragOptions): UseSelectionDragReturn => {
+ const movedDuringPressRef = useRef(false);
+ const lastPressMovedRef = useRef(false);
+ const activePointerIdRef = useRef(null);
+ const activeCleanupRef = useRef<(() => void) | null>(null);
+
+ const beginPointerDrag = (
+ event: React.PointerEvent | PointerEvent,
+ dragTarget: HTMLElement,
+ ) => {
+ if (!enabled || event.button !== 0 || activePointerIdRef.current !== null) {
+ return;
+ }
+ // primary 포인터만 + 전역 소유권 — 다른 요소 인스턴스와의 동시 세션 차단
+ if (!event.isPrimary) return;
+ if (!tryAcquireDragSession()) return;
+
+ event.stopPropagation();
+
+ const pointerId = event.pointerId;
+ const startClientX = event.clientX;
+ const startClientY = event.clientY;
+ const previousUserSelect = dragTarget.style.userSelect;
+ const selectedIds = new Set(
+ selectedElements.flatMap((element) => getSelectedElementIds(element)),
+ );
+ // 선택 요소는 시작 좌표를 고정 — 프레임별 최신 store 좌표에 누적 delta를
+ // 다시 더하면 다중 드래그 그룹 bounds가 매 프레임 벌어짐
+ const selectedStartBounds = new Map();
+ if (selectedElements.length > 1) {
+ getOtherElements(elementId).forEach((bounds) => {
+ if (selectedIds.has(bounds.id)) {
+ selectedStartBounds.set(bounds.id, bounds);
+ }
+ });
+ }
+ let lastSnappedDeltaX = 0;
+ let lastSnappedDeltaY = 0;
+ let rafId: number | null = null;
+ let dragEnded = false;
+
+ activePointerIdRef.current = pointerId;
+ movedDuringPressRef.current = lastPressMovedRef.current;
+ lastPressMovedRef.current = false;
+ dragTarget.setPointerCapture(pointerId);
+ dragTarget.style.userSelect = 'none';
+
+ useSmartGuidesStore.getState().clearGuides();
+ useGridSelectionStore.getState().setDraggingOrResizing(true);
+ onMultiDragStart?.();
+
+ const handlePointerMove = (moveEvent: PointerEvent) => {
+ if (dragEnded || moveEvent.pointerId !== activePointerIdRef.current) {
+ return;
+ }
+ if (rafId !== null) return;
+
+ rafId = requestAnimationFrame(() => {
+ rafId = null;
+ if (dragEnded) return;
+
+ const rawDeltaX = (moveEvent.clientX - startClientX) / zoom;
+ const rawDeltaY = (moveEvent.clientY - startClientY) / zoom;
+ const newX = startX + rawDeltaX;
+ const newY = startY + rawDeltaY;
+ const gridSettings = useSettingsStore.getState().gridSettings;
+ const alignmentGuidesEnabled = gridSettings?.alignmentGuides !== false;
+ const spacingGuidesEnabled = gridSettings?.spacingGuides !== false;
+ const otherElements = getOtherElements(elementId);
+ const nonSelectedElements = otherElements.filter(
+ (element) => !selectedIds.has(element.id),
+ );
+ const draggedBounds = calculateBounds(
+ newX,
+ newY,
+ elementWidth,
+ elementHeight,
+ elementId,
+ );
+
+ let groupBounds: ElementBounds | null = null;
+ if (selectedElements.length > 1) {
+ const selectedBounds = selectedElements
+ .map((selectedElement) => {
+ // index 보조 비교는 index가 실재할 때만 — 플러그인처럼 index가 없는
+ // 요소끼리 undefined === undefined로 전부 현재 요소로 오인되는 것 방지
+ const isCurrentElement =
+ selectedElement.id === elementId ||
+ (elementIndex !== undefined &&
+ selectedElement.type === elementType &&
+ selectedElement.index === elementIndex);
+ if (isCurrentElement) return draggedBounds;
+
+ const found = getSelectedElementIds(selectedElement)
+ .map((id) => selectedStartBounds.get(id))
+ .find(
+ (bounds): bounds is ElementBounds => bounds !== undefined,
+ );
+ if (!found) return null;
+ return calculateBounds(
+ found.left + rawDeltaX,
+ found.top + rawDeltaY,
+ found.width,
+ found.height,
+ found.id,
+ );
+ })
+ .filter((bounds): bounds is ElementBounds => bounds !== null);
+ groupBounds = calculateGroupBounds(selectedBounds);
+ }
+
+ const snapTargetBounds =
+ selectedElements.length > 1 && groupBounds
+ ? groupBounds
+ : draggedBounds;
+ const snapResult = alignmentGuidesEnabled
+ ? calculateSnapPoints(
+ snapTargetBounds,
+ nonSelectedElements,
+ undefined,
+ {
+ groupBounds,
+ disableSpacing: !spacingGuidesEnabled,
+ },
+ )
+ : null;
+
+ let finalX: number;
+ let finalY: number;
+ if (snapResult?.didSnapX) {
+ finalX =
+ selectedElements.length > 1 && groupBounds
+ ? newX + snapResult.snappedX - groupBounds.left
+ : snapResult.snappedX;
+ } else {
+ const snapSize = gridSettings?.gridSnapSize || 5;
+ finalX = Math.round(newX / snapSize) * snapSize;
+ }
+ if (snapResult?.didSnapY) {
+ finalY =
+ selectedElements.length > 1 && groupBounds
+ ? newY + snapResult.snappedY - groupBounds.top
+ : snapResult.snappedY;
+ } else {
+ const snapSize = gridSettings?.gridSnapSize || 5;
+ finalY = Math.round(newY / snapSize) * snapSize;
+ }
+
+ const snappedDeltaX = Math.round(finalX - startX);
+ const snappedDeltaY = Math.round(finalY - startY);
+ const smartGuidesStore = useSmartGuidesStore.getState();
+ if (snapResult && (snapResult.didSnapX || snapResult.didSnapY)) {
+ const displayBounds =
+ selectedElements.length > 1 && groupBounds
+ ? calculateBounds(
+ groupBounds.left +
+ (snapResult.didSnapX
+ ? snapResult.snappedX - groupBounds.left
+ : 0),
+ groupBounds.top +
+ (snapResult.didSnapY
+ ? snapResult.snappedY - groupBounds.top
+ : 0),
+ groupBounds.width,
+ groupBounds.height,
+ 'group',
+ )
+ : calculateBounds(
+ finalX,
+ finalY,
+ elementWidth,
+ elementHeight,
+ elementId,
+ );
+ smartGuidesStore.setDraggedBounds(displayBounds);
+ smartGuidesStore.setActiveGuides(snapResult.guides);
+ smartGuidesStore.setSpacingGuides(
+ spacingGuidesEnabled && snapResult.spacingGuides?.length
+ ? snapResult.spacingGuides
+ : [],
+ );
+ } else {
+ smartGuidesStore.clearGuides();
+ }
+
+ const moveDeltaX = snappedDeltaX - lastSnappedDeltaX;
+ const moveDeltaY = snappedDeltaY - lastSnappedDeltaY;
+ if (moveDeltaX !== 0 || moveDeltaY !== 0) {
+ lastSnappedDeltaX = snappedDeltaX;
+ lastSnappedDeltaY = snappedDeltaY;
+ movedDuringPressRef.current = true;
+ lastPressMovedRef.current = true;
+ onMultiDrag?.(moveDeltaX, moveDeltaY);
+ }
+ });
+ };
+
+ const finishDrag = () => {
+ if (dragEnded) return;
+ dragEnded = true;
+ activePointerIdRef.current = null;
+ activeCleanupRef.current = null;
+ releaseDragSession();
+
+ if (dragTarget.hasPointerCapture(pointerId)) {
+ dragTarget.releasePointerCapture(pointerId);
+ }
+ if (rafId !== null) {
+ cancelAnimationFrame(rafId);
+ rafId = null;
+ }
+ dragTarget.removeEventListener('pointermove', handlePointerMove);
+ dragTarget.removeEventListener('pointerup', handlePointerEnd);
+ dragTarget.removeEventListener('pointercancel', handlePointerEnd);
+ dragTarget.removeEventListener('lostpointercapture', finishDrag);
+ window.removeEventListener('blur', finishDrag);
+ dragTarget.style.userSelect = previousUserSelect;
+ useSmartGuidesStore.getState().clearGuides();
+ useGridSelectionStore.getState().setDraggingOrResizing(false);
+ onMultiDragEnd?.();
+ };
+
+ const handlePointerEnd = (endEvent: PointerEvent) => {
+ if (endEvent.pointerId !== activePointerIdRef.current) return;
+ finishDrag();
+ };
+
+ activeCleanupRef.current = finishDrag;
+ dragTarget.addEventListener('pointermove', handlePointerMove);
+ dragTarget.addEventListener('pointerup', handlePointerEnd);
+ dragTarget.addEventListener('pointercancel', handlePointerEnd);
+ dragTarget.addEventListener('lostpointercapture', finishDrag);
+ window.addEventListener('blur', finishDrag);
+ };
+
+ const handlePointerDown = (event: React.PointerEvent) => {
+ beginPointerDrag(event, event.currentTarget);
+ };
+
+ useEffect(() => {
+ return () => activeCleanupRef.current?.();
+ }, []);
+
+ return { handlePointerDown, movedDuringPressRef };
+};
diff --git a/src/renderer/hooks/Grid/useSmartGuidesElements.ts b/src/renderer/hooks/Grid/useSmartGuidesElements.ts
index 6f9d4327..7c7fe027 100644
--- a/src/renderer/hooks/Grid/useSmartGuidesElements.ts
+++ b/src/renderer/hooks/Grid/useSmartGuidesElements.ts
@@ -10,127 +10,105 @@ import { usePluginDisplayElementStore } from '@stores/plugin/usePluginDisplayEle
import { calculateBounds, type ElementBounds } from '@utils/grid/smartGuides';
/**
- * 현재 탭의 모든 요소(키 + 플러그인 요소)의 bounds를 반환하는 함수를 제공하는 훅
+ * 특정 요소를 제외한 모든 요소의 bounds를 반환
+ * 드래그 시점에만 호출되므로 최신 스냅샷을 getState()로 읽는다 —
+ * 반응형 구독을 걸면 임의 요소 하나의 변경이 이 훅을 쓰는 모든
+ * 요소(Key·PluginElement·KnobItem·GraphItem)의 리렌더로 번짐
+ * @param excludeIds 제외할 요소의 ID (단일 문자열 또는 문자열 배열)
*/
-export function useSmartGuidesElements() {
- const positions = useKeyStore((state) => state.positions);
- const selectedKeyType = useKeyStore((state) => state.selectedKeyType);
- const statPositions = useStatItemStore((state) => state.positions);
- const graphPositions = useGraphItemStore((state) => state.positions);
- const knobPositions = useKnobItemStore((state) => state.positions);
- const pluginElements = usePluginDisplayElementStore(
- (state) => state.elements,
- );
+const getOtherElementsSnapshot = (
+ excludeIds: string | string[],
+): ElementBounds[] => {
+ const { positions, selectedKeyType } = useKeyStore.getState();
+ const statPositions = useStatItemStore.getState().positions;
+ const graphPositions = useGraphItemStore.getState().positions;
+ const knobPositions = useKnobItemStore.getState().positions;
+ const pluginElements = usePluginDisplayElementStore.getState().elements;
- /**
- * 특정 요소를 제외한 모든 요소의 bounds를 반환
- * @param excludeIds 제외할 요소의 ID (단일 문자열 또는 문자열 배열)
- */
- const getOtherElements = (excludeIds: string | string[]): ElementBounds[] => {
- const bounds: ElementBounds[] = [];
- // 배열로 정규화
- const excludeSet = new Set(
- Array.isArray(excludeIds) ? excludeIds : [excludeIds],
- );
+ const bounds: ElementBounds[] = [];
+ // 배열로 정규화
+ const excludeSet = new Set(
+ Array.isArray(excludeIds) ? excludeIds : [excludeIds],
+ );
- // 키 요소 bounds
- const keyPositions = positions[selectedKeyType] || [];
- keyPositions.forEach((pos, index) => {
- if (pos.hidden) return;
- const id = `key-${index}`;
- if (!excludeSet.has(id)) {
- bounds.push(
- calculateBounds(
- pos.dx,
- pos.dy,
- pos.width || 60,
- pos.height || 60,
- id,
- ),
- );
- }
- });
+ // 키 요소 bounds
+ const keyPositions = positions[selectedKeyType] || [];
+ keyPositions.forEach((pos, index) => {
+ if (pos.hidden) return;
+ const id = `key-${index}`;
+ if (!excludeSet.has(id)) {
+ bounds.push(
+ calculateBounds(pos.dx, pos.dy, pos.width || 60, pos.height || 60, id),
+ );
+ }
+ });
- // 통계 요소 bounds
- const stats = statPositions[selectedKeyType] || [];
- stats.forEach((pos, index) => {
- if (!pos || pos.hidden) return;
- const id = `stat-${index}`;
- if (!excludeSet.has(id)) {
- bounds.push(
- calculateBounds(
- pos.dx,
- pos.dy,
- pos.width || 60,
- pos.height || 60,
- id,
- ),
- );
- }
- });
+ // 통계 요소 bounds
+ const stats = statPositions[selectedKeyType] || [];
+ stats.forEach((pos, index) => {
+ if (!pos || pos.hidden) return;
+ const id = `stat-${index}`;
+ if (!excludeSet.has(id)) {
+ bounds.push(
+ calculateBounds(pos.dx, pos.dy, pos.width || 60, pos.height || 60, id),
+ );
+ }
+ });
- // 그래프 요소 bounds
- const graphs = graphPositions[selectedKeyType] || [];
- graphs.forEach((pos, index) => {
- if (!pos || pos.hidden) return;
- const id = `graph-${index}`;
- if (!excludeSet.has(id)) {
- bounds.push(
- calculateBounds(
- pos.dx,
- pos.dy,
- pos.width || 200,
- pos.height || 100,
- id,
- ),
- );
- }
- });
+ // 그래프 요소 bounds
+ const graphs = graphPositions[selectedKeyType] || [];
+ graphs.forEach((pos, index) => {
+ if (!pos || pos.hidden) return;
+ const id = `graph-${index}`;
+ if (!excludeSet.has(id)) {
+ bounds.push(
+ calculateBounds(
+ pos.dx,
+ pos.dy,
+ pos.width || 200,
+ pos.height || 100,
+ id,
+ ),
+ );
+ }
+ });
- // 노브 요소 bounds
- const knobs = knobPositions[selectedKeyType] || [];
- knobs.forEach((pos, index) => {
- if (!pos || pos.hidden) return;
- const id = `knob-${index}`;
- if (!excludeSet.has(id)) {
- bounds.push(
- calculateBounds(
- pos.dx,
- pos.dy,
- pos.width || 60,
- pos.height || 60,
- id,
- ),
- );
- }
- });
+ // 노브 요소 bounds
+ const knobs = knobPositions[selectedKeyType] || [];
+ knobs.forEach((pos, index) => {
+ if (!pos || pos.hidden) return;
+ const id = `knob-${index}`;
+ if (!excludeSet.has(id)) {
+ bounds.push(
+ calculateBounds(pos.dx, pos.dy, pos.width || 60, pos.height || 60, id),
+ );
+ }
+ });
- // 플러그인 요소 bounds (현재 탭에 속하는 요소만)
- pluginElements.forEach((el) => {
- if (el.hidden) return;
- // tabId가 없으면 모든 탭에 표시되는 요소로 간주
- // tabId가 있으면 현재 선택된 탭과 일치해야 함
- const belongsToCurrentTab = !el.tabId || el.tabId === selectedKeyType;
+ // 플러그인 요소 bounds (현재 탭에 속하는 요소만)
+ pluginElements.forEach((el) => {
+ if (el.hidden) return;
+ // tabId가 없으면 모든 탭에 표시되는 요소로 간주
+ // tabId가 있으면 현재 선택된 탭과 일치해야 함
+ const belongsToCurrentTab = !el.tabId || el.tabId === selectedKeyType;
- if (
- !excludeSet.has(el.fullId) &&
- el.measuredSize &&
- belongsToCurrentTab
- ) {
- bounds.push(
- calculateBounds(
- el.position.x,
- el.position.y,
- el.measuredSize.width,
- el.measuredSize.height,
- el.fullId,
- ),
- );
- }
- });
+ if (!excludeSet.has(el.fullId) && el.measuredSize && belongsToCurrentTab) {
+ bounds.push(
+ calculateBounds(
+ el.position.x,
+ el.position.y,
+ el.measuredSize.width,
+ el.measuredSize.height,
+ el.fullId,
+ ),
+ );
+ }
+ });
- return bounds;
- };
+ return bounds;
+};
- return { getOtherElements };
+// 구독 없는 훅 — 함수 참조 안정
+export function useSmartGuidesElements() {
+ return { getOtherElements: getOtherElementsSnapshot };
}
diff --git a/src/renderer/hooks/overlay/useNoteSystem.ts b/src/renderer/hooks/overlay/useNoteSystem.ts
index a9519a8a..1687b539 100644
--- a/src/renderer/hooks/overlay/useNoteSystem.ts
+++ b/src/renderer/hooks/overlay/useNoteSystem.ts
@@ -42,11 +42,16 @@ interface NoteState {
interface NoteSettings {
speed?: number;
trackHeight?: number;
+ frameLimit?: number;
delayedNoteEnabled?: boolean;
shortNoteThresholdMs?: number;
shortNoteMinLengthPx?: number;
}
+// 셰이더는 travel ≥ trackHeight 시점에 노트를 컬하지만, 프레임 제한 시 uTime(stableTime)이
+// wall clock보다 최대 limiter interval만큼 늦으므로 그만큼만 여유를 두고 정리
+const NOTE_CLEANUP_SLACK_MS = 50;
+
interface UseNoteSystemOptions {
noteEffect: boolean;
noteSettings?: NoteSettings;
@@ -116,6 +121,9 @@ export function useNoteSystem({
const activeNotes = useRef>(new Map());
const flowSpeedRef = useRef(DEFAULT_NOTE_SETTINGS.speed);
const trackHeightRef = useRef(DEFAULT_NOTE_SETTINGS.trackHeight);
+ const frameLimitRef = useRef(0);
+ // 수명 계산에 쓰이는 스칼라만 추적 — 설정 객체 identity 변경만으로 재스케줄 방지
+ const prevCleanupScalarsRef = useRef('');
// 딜레이 기반 단노트 분리용 설정
const delayEnabledRef = useRef(false);
const delayMsRef = useRef(0);
@@ -141,12 +149,23 @@ export function useNoteSystem({
return () => subscribers.current.delete(callback);
};
+ // 프레임 제한이 낮을수록 uTime 지연이 커지므로 슬랙을 limiter interval까지 확장
+ const cleanupSlackPx = (flowSpeed: number): number => {
+ const frameLimit = frameLimitRef.current;
+ const slackMs = Math.max(
+ NOTE_CLEANUP_SLACK_MS,
+ frameLimit > 0 ? 1000 / frameLimit : 0,
+ );
+ return (flowSpeed * slackMs) / 1000;
+ };
+
// In-place 클린업 함수
const runCleanup = (): void => {
const currentTime = performance.now();
const flowSpeed = flowSpeedRef.current;
const trackHeight =
trackHeightRef.current || DEFAULT_NOTE_SETTINGS.trackHeight;
+ const keepDistancePx = trackHeight + cleanupSlackPx(flowSpeed);
const currentNotes = notesRef.current;
const removedNoteIds: string[] = [];
const removedNotes: Note[] = [];
@@ -171,7 +190,7 @@ export function useNoteSystem({
// 완료된 노트가 화면 밖으로 나갔는지 확인
const timeSinceCompletion = currentTime - (note.endTime as number);
const yPosition = (timeSinceCompletion * flowSpeed) / 1000;
- shouldKeep = yPosition < trackHeight + 200;
+ shouldKeep = yPosition < keepDistancePx;
if (!shouldKeep) {
const removedId = note.id;
@@ -237,7 +256,7 @@ export function useNoteSystem({
for (const note of keyNotes) {
if (!note.isActive && note.endTime != null) {
// 이 노트가 화면 밖으로 나갈 시간 계산
- const travelTimeMs = ((trackHeight + 200) * 1000) / flowSpeed;
+ const travelTimeMs = (keepDistancePx * 1000) / flowSpeed;
const cleanupTime = note.endTime + travelTimeMs;
if (cleanupTime < earliestCleanupTime) {
earliestCleanupTime = cleanupTime;
@@ -263,7 +282,8 @@ export function useNoteSystem({
trackHeightRef.current || DEFAULT_NOTE_SETTINGS.trackHeight;
// 이 노트가 화면 밖으로 완전히 사라질 시간 계산
- const travelTimeMs = ((trackHeight + 200) * 1000) / flowSpeed;
+ const travelTimeMs =
+ ((trackHeight + cleanupSlackPx(flowSpeed)) * 1000) / flowSpeed;
const newCleanupTime = finalizedNote.endTime + travelTimeMs;
// 현재 예약된 것보다 더 빨리 실행해야 하는 경우에만 재스케줄
@@ -290,7 +310,20 @@ export function useNoteSystem({
// 단노트 최소 픽셀 길이
shortNoteMinLengthPxRef.current =
Number(settings?.shortNoteMinLengthPx) || 0;
- }, [noteSettings]);
+ frameLimitRef.current = Number(settings?.frameLimit) || 0;
+ // speed/trackHeight/frameLimit 실제 변경 시에만 기존 타이머를 새 수명 기준으로 재계산
+ const cleanupScalars = `${flowSpeedRef.current}/${trackHeightRef.current}/${frameLimitRef.current}`;
+ if (
+ prevCleanupScalarsRef.current !== cleanupScalars &&
+ cleanupTimerRef.current !== null
+ ) {
+ clearTimeout(cleanupTimerRef.current);
+ cleanupTimerRef.current = null;
+ nextCleanupTimeRef.current = Infinity;
+ runCleanup();
+ }
+ prevCleanupScalarsRef.current = cleanupScalars;
+ }, [noteSettings]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
noteEffectEnabled.current = !!noteEffect;
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index f6e17eb8..7dbf1035 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -596,9 +596,6 @@
"soundTrimModal": {
"defaultTitle": "Add Sound",
"editTitle": "Edit Sound",
- "statusDecoding": "Decoding...",
- "statusWaiting": "Waiting for file",
- "statusReady": "Ready",
"nameLabel": "Sound name",
"namePlaceholder": "Sound name",
"decodeError": "Unable to decode the audio file.",
@@ -609,7 +606,6 @@
"saving": "Saving...",
"submit": "Add",
"submitEdit": "Save",
- "cancel": "Cancel",
"statusLoading": "Loading...",
"loadOriginalError": "Unable to load the original audio.",
"saveErrorDefault": "Failed to save the processed sound.",
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index 0c0d1032..3f055d2d 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -596,9 +596,6 @@
"soundTrimModal": {
"defaultTitle": "사운드 추가",
"editTitle": "사운드 편집",
- "statusDecoding": "해석 중...",
- "statusWaiting": "파일 대기",
- "statusReady": "사용 가능",
"nameLabel": "사운드 이름",
"namePlaceholder": "사운드 이름",
"decodeError": "오디오 파일을 해석할 수 없습니다.",
@@ -609,7 +606,6 @@
"saving": "저장 중...",
"submit": "추가하기",
"submitEdit": "저장",
- "cancel": "취소",
"statusLoading": "불러오는 중...",
"loadOriginalError": "원본 오디오를 불러올 수 없습니다.",
"saveErrorDefault": "편집된 사운드를 저장하지 못했습니다.",
diff --git a/src/renderer/locales/ru.json b/src/renderer/locales/ru.json
index 02c24e3c..05f1bc1e 100644
--- a/src/renderer/locales/ru.json
+++ b/src/renderer/locales/ru.json
@@ -596,9 +596,6 @@
"soundTrimModal": {
"defaultTitle": "Добавить звук",
"editTitle": "Редактирование звука",
- "statusDecoding": "Декодирование...",
- "statusWaiting": "Ожидание файла",
- "statusReady": "Готово",
"nameLabel": "Название звука",
"namePlaceholder": "Название звука",
"decodeError": "Не удалось декодировать аудиофайл.",
@@ -609,7 +606,6 @@
"saving": "Сохранение...",
"submit": "Добавить",
"submitEdit": "Сохранить",
- "cancel": "Отмена",
"statusLoading": "Загрузка...",
"loadOriginalError": "Не удалось загрузить исходное аудио.",
"saveErrorDefault": "Не удалось сохранить обработанный звук.",
diff --git a/src/renderer/locales/zh-Hant.json b/src/renderer/locales/zh-Hant.json
index faf3a1f5..487c210c 100644
--- a/src/renderer/locales/zh-Hant.json
+++ b/src/renderer/locales/zh-Hant.json
@@ -596,9 +596,6 @@
"soundTrimModal": {
"defaultTitle": "新增音效",
"editTitle": "編輯音效",
- "statusDecoding": "解析中...",
- "statusWaiting": "等待檔案",
- "statusReady": "可使用",
"nameLabel": "音效名稱",
"namePlaceholder": "音效名稱",
"decodeError": "無法解析音訊檔案。",
@@ -609,7 +606,6 @@
"saving": "儲存中...",
"submit": "新增",
"submitEdit": "儲存",
- "cancel": "取消",
"statusLoading": "載入中...",
"loadOriginalError": "無法載入原始音訊。",
"saveErrorDefault": "無法儲存處理後的音效。",
diff --git a/src/renderer/locales/zh-cn.json b/src/renderer/locales/zh-cn.json
index b4877a0a..5f776fc4 100644
--- a/src/renderer/locales/zh-cn.json
+++ b/src/renderer/locales/zh-cn.json
@@ -596,9 +596,6 @@
"soundTrimModal": {
"defaultTitle": "添加音频",
"editTitle": "编辑音频",
- "statusDecoding": "解析中...",
- "statusWaiting": "等待文件",
- "statusReady": "可用",
"nameLabel": "音频名称",
"namePlaceholder": "音频名称",
"decodeError": "无法解析音频文件。",
@@ -609,7 +606,6 @@
"saving": "保存中...",
"submit": "添加",
"submitEdit": "保存",
- "cancel": "取消",
"statusLoading": "加载中...",
"loadOriginalError": "无法加载原始音频。",
"saveErrorDefault": "无法保存处理后的音频。",
diff --git a/src/renderer/plugins/runtime/api/defineElement.ts b/src/renderer/plugins/runtime/api/defineElement.ts
index 04844f4c..f962b28f 100644
--- a/src/renderer/plugins/runtime/api/defineElement.ts
+++ b/src/renderer/plugins/runtime/api/defineElement.ts
@@ -463,7 +463,10 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
referenceElement: target as HTMLElement,
onColorChange: (newColor) => {
// 스와치(버튼 자체) 미리보기 업데이트
- target.style.backgroundColor = newColor;
+ target.style.setProperty(
+ '--dmn-color-swatch-color',
+ newColor,
+ );
},
onColorChangeComplete: (newColor) => {
wrappedChange(newColor);
@@ -482,10 +485,15 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
// 패널 ColorInput과 동일한 스와치 단독 버튼
componentHtml = `
+ >
+
+
+
+
+
`;
} else if (schema.type === 'string' || schema.type === 'number') {
const strVal = String(value);
diff --git a/src/renderer/plugins/runtime/api/defineSettings.ts b/src/renderer/plugins/runtime/api/defineSettings.ts
index 56f59476..899eedba 100644
--- a/src/renderer/plugins/runtime/api/defineSettings.ts
+++ b/src/renderer/plugins/runtime/api/defineSettings.ts
@@ -317,7 +317,10 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
referenceElement: target as HTMLElement,
onColorChange: (newColor) => {
// 스와치(버튼 자체) 미리보기 업데이트
- target.style.backgroundColor = newColor;
+ target.style.setProperty(
+ '--dmn-color-swatch-color',
+ newColor,
+ );
},
onColorChangeComplete: (newColor) => {
commitSettingValue(key, newColor);
@@ -336,10 +339,15 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
// 패널 ColorInput과 동일한 스와치 단독 버튼
componentHtml = `
+ >
+
+
+
+
+
`;
} else if (schema.type === 'string' || schema.type === 'number') {
const strVal = String(value);
diff --git a/src/renderer/stores/grid/useGridSelectionStore.ts b/src/renderer/stores/grid/useGridSelectionStore.ts
index ea455877..428a097b 100644
--- a/src/renderer/stores/grid/useGridSelectionStore.ts
+++ b/src/renderer/stores/grid/useGridSelectionStore.ts
@@ -197,7 +197,24 @@ export const useGridSelectionStore = create((set, get) => ({
},
setSelectedElements: (elements) => {
- set({ selectedElements: elements, selectedGroupIds: [] });
+ set((state) => {
+ // 논리적으로 같은 선택이면 참조를 유지해 구독자 리렌더 방지
+ const same =
+ state.selectedElements.length === elements.length &&
+ state.selectedElements.every((el, i) => {
+ const next = elements[i];
+ return (
+ el.type === next.type &&
+ el.id === next.id &&
+ el.index === next.index
+ );
+ });
+ if (same && state.selectedGroupIds.length === 0) return {};
+ return {
+ selectedElements: same ? state.selectedElements : elements,
+ selectedGroupIds: [],
+ };
+ });
},
setFullSelection: (elements, groupIds) => {
diff --git a/src/renderer/stores/signals/noteBuffer.ts b/src/renderer/stores/signals/noteBuffer.ts
index bcd14a39..e72aee16 100644
--- a/src/renderer/stores/signals/noteBuffer.ts
+++ b/src/renderer/stores/signals/noteBuffer.ts
@@ -106,6 +106,14 @@ type ResolvedTrackLayout = TrackLayoutInput & {
const clampPercentToUnit = (value: number) =>
Math.min(Math.max(value / 100, 0), 1);
+// 트랙의 실효 글로우 크기 — 캔버스 crop bounds 계산에서도 동일 규칙 사용
+export const resolvedGlowSize = (
+ layout: Pick,
+): number => {
+ if (!(layout.noteGlowEnabled ?? false)) return 0;
+ return Math.min(Math.max(layout.noteGlowSize ?? 20, 0), 50);
+};
+
const resolveTrackLayout = (layout: TrackLayoutInput): ResolvedTrackLayout => {
const baseOpacityPercent =
layout.noteOpacity != null && Number.isFinite(layout.noteOpacity)
@@ -122,8 +130,7 @@ const resolveTrackLayout = (layout: TrackLayoutInput): ResolvedTrackLayout => {
: baseOpacityPercent;
const glowEnabled = layout.noteGlowEnabled ?? false;
- const rawGlowSize = layout.noteGlowSize ?? 20;
- const glowSize = glowEnabled ? Math.min(Math.max(rawGlowSize, 0), 50) : 0;
+ const glowSize = resolvedGlowSize(layout);
const baseGlowOpacityPercent =
layout.noteGlowOpacity != null && Number.isFinite(layout.noteGlowOpacity)
diff --git a/src/renderer/styles/main.css b/src/renderer/styles/main.css
index 14dd204f..0d2977d1 100644
--- a/src/renderer/styles/main.css
+++ b/src/renderer/styles/main.css
@@ -8,32 +8,88 @@ body {
color: var(--ui-fg);
}
+/* 플러그인 색상 스와치 */
+.dmn-color-swatch-button {
+ position: relative;
+ padding: 0;
+ border: 0;
+ overflow: visible;
+}
+
+.dmn-color-swatch-surface {
+ position: absolute;
+ inset: 0;
+ display: block;
+ overflow: hidden;
+ border-radius: inherit;
+ background: var(--ui-checker-pattern) center / var(--ui-checker-size-sm)
+ var(--ui-checker-size-sm) repeat;
+}
+
+.dmn-color-swatch-color,
+.dmn-color-swatch-ring {
+ position: absolute;
+ inset: 0;
+ display: block;
+ border-radius: inherit;
+ pointer-events: none;
+}
+
+.dmn-color-swatch-color {
+ background-color: var(--dmn-color-swatch-color, transparent);
+}
+
+.dmn-color-swatch-ring {
+ box-shadow: inset 0 0 0 1px var(--ui-line);
+}
+
/* 커스텀 커서 미리보기 */
body.dmn-custom-cursor,
body.dmn-custom-cursor * {
cursor: none !important;
}
+/* 캔버스 아이템 드래그 커서 — 호버 무변화, 잡는 동안만 grabbing (전 요소 동일 정책) */
+.dmn-grabbable {
+ cursor: default;
+}
+
+.dmn-grabbable:active {
+ cursor: -webkit-grabbing;
+ cursor: grabbing;
+}
+
/* ===== 글래스 백드롭 ===== */
/* 글래스 백드롭 — 블러에 밝기·채도 클램프를 결합.
- 블러 반경은 매 프레임 면적×반경 비례로 재필터되는 비용 다이얼 —
- 어두운 틴트 아래서 큰 반경은 체감 차이 없이 비용만 늘어 16px 상한 유지.
- 글래스 체감은 반경이 아니라 틴트 알파·클램프 완화·채도 부스트가 만든다 */
+ 비용 지배 요인은 반경이 아니라 표면 수·면적·아래 damage(재필터 트리거) —
+ Skia가 큰 반경을 저해상도 다운샘플로 처리해 반경 비용은 평탄화됨.
+ 글래스는 일시 표면(모달·팝업) 전용 유지, 표면 자체에 transform 애니메이션 금지 */
.backdrop-glass {
- -webkit-backdrop-filter: blur(16px) brightness(var(--ui-glass-backdrop-dim))
+ -webkit-backdrop-filter: blur(32px) brightness(var(--ui-glass-backdrop-dim))
saturate(var(--ui-glass-backdrop-sat));
- backdrop-filter: blur(16px) brightness(var(--ui-glass-backdrop-dim))
+ backdrop-filter: blur(32px) brightness(var(--ui-glass-backdrop-dim))
saturate(var(--ui-glass-backdrop-sat));
}
.backdrop-glass-popup {
- -webkit-backdrop-filter: blur(12px) brightness(var(--ui-glass-backdrop-dim))
+ -webkit-backdrop-filter: blur(24px) brightness(var(--ui-glass-backdrop-dim))
saturate(var(--ui-glass-backdrop-sat));
- backdrop-filter: blur(12px) brightness(var(--ui-glass-backdrop-dim))
+ backdrop-filter: blur(24px) brightness(var(--ui-glass-backdrop-dim))
saturate(var(--ui-glass-backdrop-sat));
}
+/* 스크림 프로스트 — 검은 딤 + 은은한 전화면 블러 (디자인 개편 전 레시피 복원).
+ 틴트는 유틸리티가 아니라 여기서 소유 — 딤·블러 레시피 단일 소스.
+ 전화면 재필터라 반경은 최소 유지, 블러 키프레임 보간 금지가 최적화의 핵심 —
+ 블러는 첫 프레임부터 상수, 틴트만 페이드. Windows에서 모달 연 채
+ 키 연타 프레임 실측이 유지 조건 */
+.backdrop-glass-scrim {
+ background: rgba(0, 0, 0, 0.75);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+}
+
/* 포지셔닝 보정 — 이미 fixed/absolute인 표면은 :where(0 특이도)라 그대로 유지 */
:where(.backdrop-glass, .backdrop-glass-popup) {
position: relative;
@@ -66,6 +122,12 @@ body.dmn-custom-cursor * {
--ui-glass-dim: rgba(12, 12, 14, 0.94);
}
+ /* 스크림은 블러만 끄고 알파 딤으로 폴백 */
+ .backdrop-glass-scrim {
+ -webkit-backdrop-filter: none;
+ backdrop-filter: none;
+ }
+
/* 루미노시티 캡은 블러 없는 표면에서 무의미 — 블렌드 패스도 함께 제거 */
.backdrop-glass::after,
.backdrop-glass-popup::after {
@@ -334,53 +396,15 @@ body.dmn-custom-cursor * {
animation: modalScrim var(--ui-duration-fast) var(--ui-ease-out) both;
}
-/* ===== ColorPicker ===== */
-
-.rcp-saturation {
- border-radius: 8px !important;
- cursor: pointer !important;
- box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.25) !important;
-}
-
-.rcp-saturation-cursor {
- height: 10px !important;
- width: 10px !important;
- transform: translate(-50%, -50%) !important;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.7) !important;
- border: 2px solid white !important;
- border-radius: 100% !important;
-}
-
-.rcp-hue {
- border-radius: 8px !important;
- cursor: pointer !important;
- height: 10px !important;
- box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.25) !important;
-}
-
-.rcp-hue-cursor {
- height: 10px !important;
- width: 10px !important;
- transform: translate(-50%, 0%) !important;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.7) !important;
- border: 2px solid white !important;
- border-radius: 100% !important;
-}
-
-.rcp-alpha {
- border-radius: 8px !important;
- cursor: pointer !important;
- height: 10px !important;
- box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.25) !important;
+/* 스테이지 콘텐츠 등장 — 비동기 준비(파형 디코드 등)를 마친 콘텐츠의 한 박자 페이드 */
+@keyframes stageContentIn {
+ from {
+ opacity: 0;
+ }
}
-.rcp-alpha-cursor {
- height: 10px !important;
- width: 10px !important;
- transform: translate(-50%, 0%) !important;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.7) !important;
- border: 2px solid white !important;
- border-radius: 100% !important;
+.animate-stage-in {
+ animation: stageContentIn var(--ui-duration-fast) var(--ui-ease-out) both;
}
/* ===== 코드 에디터 ===== */
@@ -510,6 +534,7 @@ body.dmn-custom-cursor * {
.tooltip-fade-in,
.animate-modal-scale > *,
.animate-modal-scrim,
+ .animate-stage-in,
.animate-pulse {
animation: none;
}
diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css
index 5483469c..5b76b712 100644
--- a/src/renderer/styles/tokens.css
+++ b/src/renderer/styles/tokens.css
@@ -17,10 +17,12 @@
/* 불투명 웰 — 코드 에디터처럼 배경이 흔들리면 안 되는 표면 전용 */
--ui-bg-inset-solid: #101013;
- /* 글래스 표면 — 스모크 재질. 팝업·패널 0.72, 모달은 가독 우선 0.78, 캔버스 크롬 0.6
+ /* 글래스 표면 — 스모크 재질. 팝업·패널 0.72, 캔버스 크롬 0.6
알파 ↓ = 배경 투과 ↑ (글래스 체감의 1차 다이얼). 분리는 그림자 토큰의 인셋 링+상단 하이라이트가 담당, 보더 금지 */
--ui-glass: rgba(14, 14, 17, 0.72);
- --ui-glass-heavy: rgba(14, 14, 17, 0.78);
+ /* 모달·시트·피커용 — 중앙 모달은 스크림(.backdrop-glass-scrim 딤+블러)이 뒤에 겹쳐
+ 실효 밀도는 스크림×틴트. 스크림 알파와 함께 조절할 것 */
+ --ui-glass-heavy: rgba(14, 14, 17, 0.45);
/* 캔버스 상주 크롬용 — 배경보다 한 톤 어두운 스모크 */
--ui-glass-dim: rgba(12, 12, 14, 0.6);
/* 사이드 패널용 */
@@ -32,11 +34,11 @@
--ui-glass-dim-solid: rgba(12, 12, 14, 0.94);
/* 글래스 백드롭 클램프 — 틴트 전에 배경 밝기를 누르고, 죽은 채도는 보상
dim ↓ = 밝은 배경 투과 억제. 과하게 누르면 투과 변화 자체가 죽어 글래스가 안 읽힘 / sat = 색기운 유지량 */
- --ui-glass-backdrop-dim: 0.55;
+ --ui-glass-backdrop-dim: 0.8;
--ui-glass-backdrop-sat: 1.5;
/* 루미노시티 캡 — 투과 결과의 휘도를 어두운 쪽으로 강제 (색조는 유지)
0 = 끔, 1 = 완전 캡. 필터와 독립 동작하는 2차 안전망 */
- --ui-glass-backdrop-lum: 0.35;
+ --ui-glass-backdrop-lum: 0.1;
/* 캡의 기준 휘도 — 글래스 틴트와 같은 근흑색 */
--ui-glass-backdrop-lum-tint: #0e0e11;
@@ -46,6 +48,17 @@
/* 캔버스/스테이지 보조 격자선 — 메이저(--ui-line)보다 한 톤 흐림 */
--ui-line-faint: rgba(255, 255, 255, 0.06);
+ /* 투명 색상 체커 */
+ --ui-checker-pattern: conic-gradient(
+ #666 0.25turn,
+ #999 0.25turn 0.5turn,
+ #666 0.5turn 0.75turn,
+ #999 0.75turn
+ );
+ --ui-checker-size: 8px;
+ /* 소형 스와치(11~23px)용 — 8px 타일은 2×2칸이라 깨진 텍스처로 읽힘 */
+ --ui-checker-size-sm: 4px;
+
/* 크롬 필 — 반투명 화이트 오버레이 상태 래더 (idle → hover → active) */
--ui-fill: rgba(255, 255, 255, 0.08);
--ui-fill-hover: rgba(255, 255, 255, 0.11);
diff --git a/src/renderer/utils/color/colorPaletteStorage.ts b/src/renderer/utils/color/colorPaletteStorage.ts
index f99bd14d..cade8003 100644
--- a/src/renderer/utils/color/colorPaletteStorage.ts
+++ b/src/renderer/utils/color/colorPaletteStorage.ts
@@ -13,7 +13,7 @@ const STORAGE_KEYS: Record = {
gradient: 'dmnote-color-palette-gradient',
};
-const MAX_PALETTE_SIZE = 5;
+const MAX_PALETTE_SIZE = 7;
export const loadPalette = (type: PaletteType): PaletteColor[] => {
try {
diff --git a/src/renderer/utils/color/colorUtils.test.ts b/src/renderer/utils/color/colorUtils.test.ts
index 4b43abcb..e2779684 100644
--- a/src/renderer/utils/color/colorUtils.test.ts
+++ b/src/renderer/utils/color/colorUtils.test.ts
@@ -4,6 +4,8 @@ import {
normalizeColorInput,
parseHexColor,
rgbToHsv,
+ hsvToRgb,
+ hsvToColorObject,
toColorObject,
toCssRgba,
toRgbHexColor,
@@ -113,6 +115,60 @@ describe('rgbToHsv', () => {
});
});
+describe('hsvToRgb', () => {
+ it('빨간색 변환', () => {
+ const rgb = hsvToRgb(0, 100, 100);
+ expect(rgb).toEqual({ r: 255, g: 0, b: 0, a: 1 });
+ });
+
+ it('h=360은 h=0과 동일', () => {
+ expect(hsvToRgb(360, 100, 100)).toEqual(hsvToRgb(0, 100, 100));
+ });
+
+ it('무채색은 s=0', () => {
+ const rgb = hsvToRgb(210, 0, 50);
+ expect(rgb.r).toBe(rgb.g);
+ expect(rgb.g).toBe(rgb.b);
+ });
+
+ it('rgbToHsv 왕복 보존', () => {
+ const cases: [number, number, number][] = [
+ [255, 0, 0],
+ [0, 128, 255],
+ [12, 200, 89],
+ [183, 150, 255],
+ ];
+ for (const [r, g, b] of cases) {
+ const hsv = rgbToHsv(r, g, b);
+ const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+ expect(rgb.r).toBe(r);
+ expect(rgb.g).toBe(g);
+ expect(rgb.b).toBe(b);
+ }
+ });
+
+ it('알파값 전달', () => {
+ expect(hsvToRgb(0, 100, 100, 0.5).a).toBe(0.5);
+ });
+});
+
+describe('hsvToColorObject', () => {
+ it('hex는 대문자 6자리, hsv는 그대로 보존', () => {
+ const color = hsvToColorObject({ h: 270, s: 0, v: 100, a: 1 });
+ expect(color.hex).toBe('#FFFFFF');
+ // s=0이어도 hue 소실 없음
+ expect(color.hsv.h).toBe(270);
+ });
+
+ it('범위 밖 값은 클램프', () => {
+ const color = hsvToColorObject({ h: 400, s: 120, v: -5, a: 2 });
+ expect(color.hsv.h).toBe(360);
+ expect(color.hsv.s).toBe(100);
+ expect(color.hsv.v).toBe(0);
+ expect(color.hsv.a).toBe(1);
+ });
+});
+
describe('toColorObject', () => {
it('hex 문자열에서 ColorObject 생성', () => {
const result = toColorObject('#00FF00');
diff --git a/src/renderer/utils/color/colorUtils.ts b/src/renderer/utils/color/colorUtils.ts
index 29461a78..9ad3f527 100644
--- a/src/renderer/utils/color/colorUtils.ts
+++ b/src/renderer/utils/color/colorUtils.ts
@@ -127,6 +127,47 @@ const rgbToHsv = (
};
};
+const hsvToRgb = (
+ h: number,
+ s: number,
+ v: number,
+ a: number = 1,
+): { r: number; g: number; b: number; a: number } => {
+ const sn = s / 100;
+ const vn = v / 100;
+ const sector = Math.floor((h % 360) / 60);
+ const f = (h % 360) / 60 - sector;
+ const p = vn * (1 - sn);
+ const q = vn * (1 - sn * f);
+ const t = vn * (1 - sn * (1 - f));
+
+ const index = ((sector % 6) + 6) % 6;
+ const r = [vn, q, p, p, t, vn][index] * 255;
+ const g = [t, vn, vn, q, p, p][index] * 255;
+ const b = [p, p, t, vn, vn, q][index] * 255;
+
+ return { r: Math.round(r), g: Math.round(g), b: Math.round(b), a };
+};
+
+// HSV 값으로 ColorObject 생성 — 전달된 hsv를 그대로 보존해
+// 드래그 중 s=0/v=0에서 hue가 소실되지 않음
+const hsvToColorObject = (hsv: {
+ h: number;
+ s: number;
+ v: number;
+ a: number;
+}): ColorObject => {
+ const h = clamp(hsv.h, 0, 360);
+ const s = clamp(hsv.s, 0, 100);
+ const v = clamp(hsv.v, 0, 100);
+ const a = clamp(hsv.a, 0, 1);
+ const rgb = hsvToRgb(h, s, v, a);
+ const hex = `#${[rgb.r, rgb.g, rgb.b]
+ .map((channel) => channel.toString(16).padStart(2, '0'))
+ .join('')}`.toUpperCase();
+ return { hex, rgb, hsv: { h, s, v, a } };
+};
+
const parseHexColor = (value: string): ColorObject | null => {
const normalized = value.startsWith('#') ? value : `#${value}`;
const hexBody = normalized.slice(1);
@@ -214,6 +255,31 @@ const hexWithAlphaPercent = (hex: string, percent: number): string => {
return `rgba(${parsed.rgb.r}, ${parsed.rgb.g}, ${parsed.rgb.b}, ${a})`;
};
+// hex 외 CSS 색 문자열(named, hsl, rgb 등)을 캔버스 fillStyle 정규화로 해석
+let cssColorCtx: CanvasRenderingContext2D | null | undefined;
+
+const parseCssColor = (value: string): ColorObject | null => {
+ if (!(window.CSS?.supports?.('color', value) ?? false)) {
+ return null;
+ }
+ if (cssColorCtx === undefined) {
+ cssColorCtx = document.createElement('canvas').getContext('2d');
+ }
+ if (!cssColorCtx) return null;
+
+ cssColorCtx.fillStyle = value;
+ const normalized = cssColorCtx.fillStyle;
+ if (normalized.startsWith('#')) {
+ return parseHexColor(normalized);
+ }
+ const rgba = parseRgbaString(normalized);
+ if (!rgba) return null;
+ const hex = `#${[rgba.r, rgba.g, rgba.b]
+ .map((channel) => channel.toString(16).padStart(2, '0'))
+ .join('')}`.toUpperCase();
+ return { hex, rgb: rgba, hsv: rgbToHsv(rgba.r, rgba.g, rgba.b, rgba.a) };
+};
+
const toColorObject = (
value: string | Partial | null | undefined,
): ColorObject | null => {
@@ -222,7 +288,7 @@ const toColorObject = (
}
if (typeof value === 'string') {
- return parseHexColor(value);
+ return parseHexColor(value) ?? parseCssColor(value);
}
if (typeof value === 'object' && value.hex) {
@@ -317,6 +383,8 @@ export {
buildGradient,
parseHexColor,
rgbToHsv,
+ hsvToRgb,
+ hsvToColorObject,
toColorObject,
toCssRgba,
parseAlphaPercent,
diff --git a/src/renderer/utils/keyStatsService.ts b/src/renderer/utils/keyStatsService.ts
index b8c3c20e..ef97f896 100644
--- a/src/renderer/utils/keyStatsService.ts
+++ b/src/renderer/utils/keyStatsService.ts
@@ -38,6 +38,9 @@ class KeyStatsService {
private currentMode = '';
private keyCounters: KeyCounters = {};
+ // 마지막 통지 스냅샷 — 유휴 틱의 동일 값 재통지 방지
+ private lastNotified: KeyStatsPayload | null = null;
+
// 현재 눌린 키 추적 (홀드 방지)
private pressedKeys: Set = new Set();
@@ -218,6 +221,19 @@ class KeyStatsService {
const stats = this.getCurrentStats();
+ // 값이 전부 그대로면 통지 생략 (신규 구독자는 subscribe에서 즉시 1회 수신)
+ const last = this.lastNotified;
+ if (
+ last &&
+ last.kps === stats.kps &&
+ last.kpsAvg === stats.kpsAvg &&
+ last.kpsMax === stats.kpsMax &&
+ last.total === stats.total
+ ) {
+ return;
+ }
+ this.lastNotified = stats;
+
this.listeners.forEach((listener) => {
try {
listener(stats);
@@ -304,6 +320,7 @@ class KeyStatsService {
this.kpsSum = 0;
this.kpsCount = 0;
this.pressedKeys.clear();
+ this.lastNotified = null;
// total은 카운터에서 계산되므로 리셋하지 않음
}