Babol/micarrsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: harden array builder editing workflows

Browse Source
This commit is contained in:
MasterBabol
2026-08-28 23:10:41 +09:00
parent 3714146df9
commit 122b6cf7be
14 changed files with 1148 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/array-builder/README.md
+5
View File
@@ -59,6 +59,11 @@ Array JSON을 저장하세요.
- **실행 취소:** `Ctrl+Z`, 다시 실행은 `Ctrl+Shift+Z`입니다.
확대·축소와 화면 맞춤은 보기만 바꾸며 저장 좌표에는 영향을 주지 않습니다.
터치 화면에서는 마이크 점에서 시작한 제스처만 위치 드래그로 처리하고, 빈 canvas의 세로
스와이프는 페이지 스크롤로 남겨 둡니다. 추가 도구도 짧은 탭을 놓을 때만 마이크를 만들므로
스크롤하려는 동작으로 채널이 생기지 않습니다.
`JSON 열기`로 다른 배열을 불러온 직후에도 한 번 실행 취소하면 불러오기 전 문서를 복구할 수
있습니다. 다시 실행하면 불러온 배열로 돌아갑니다.
## 보정값 보존
apps/array-builder/canvas-view.js
+110 -12
View File
@@ -5,6 +5,7 @@ const PLOT_BACKGROUND = "#0b1714";
const MAX_PIXEL_RATIO = 3;
const MIN_ZOOM = 0.25;
const MAX_ZOOM = 16;
const TOUCH_GESTURE_THRESHOLD_PX = 6;
const DEFAULT_MARGINS = Object.freeze({ left: 54, right: 22, top: 30, bottom: 46 });
export const ARRAY_CANVAS_TOOLS = Object.freeze(["select", "add"]);
@@ -97,6 +98,26 @@ export function fitArrayViewport(width, height, arrayDefinition, options = {}) {
const centerY = (contentYMin + contentYMax) / 2;
const visibleWidth = plot.width / scale;
const visibleHeight = plot.height / scale;
const fittedValues = [
scale,
1 / scale,
centerX,
centerY,
visibleWidth,
visibleHeight,
centerX - visibleWidth / 2,
centerX + visibleWidth / 2,
centerY - visibleHeight / 2,
centerY + visibleHeight / 2,
];
if (fittedValues.some((value) => !Number.isFinite(value))) {
return fitArrayViewport(
canvasWidth,
canvasHeight,
{ aperture, microphones: [] },
options,
);
}
return {
width: canvasWidth,
@@ -168,6 +189,7 @@ export function hitTestMicrophone(point, microphones, viewport, radiusPx = 12) {
const microphone = microphones[index];
if (!validPosition(microphone?.position)) continue;
const pixel = arrayPositionToCanvas(microphone.position, viewport);
if (!Number.isFinite(pixel.x) || !Number.isFinite(pixel.y)) continue;
const distancePx = Math.hypot(pixel.x - point.x, pixel.y - point.y);
if (distancePx <= maximumDistance && (!best || distancePx < best.distancePx)) {
best = { id: microphone.id, index, microphone, point: pixel, distancePx };
@@ -359,13 +381,14 @@ function drawMicrophones(context, model, viewport, drag) {
const position = drag?.id === microphone.id ? drag.last : microphone.position;
const drawMicrophone = position === microphone.position ? microphone : { ...microphone, position };
const point = arrayPositionToCanvas(position, viewport);
if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return;
const isSelected = microphone.id === selectedId;
const inside = positionInsideAperture(position, arrayDefinition.aperture, model.apertureShape);
const radius = isSelected ? Math.max(7, baseRadius + 2) : baseRadius;
context.fillStyle = inside ? "rgba(101,242,191,.96)" : "rgba(255,184,92,.98)";
context.shadowColor = inside ? "rgba(101,242,191,.7)" : "rgba(255,184,92,.7)";
context.shadowBlur = isSelected ? 16 : 6;
context.shadowBlur = isSelected ? 16 : microphones.length > 256 ? 0 : 6;
context.beginPath();
context.arc(point.x, point.y, radius, 0, Math.PI * 2);
context.fill();
@@ -449,10 +472,9 @@ export function createArrayCanvas(canvas, callbacks = {}) {
let zoom = 1;
let tool = "select";
let drag = null;
let pendingAdd = null;
if (canvas.tabIndex < 0) canvas.tabIndex = 0;
if (canvas.style) canvas.style.touchAction = "none";
function updateCanvasAffordance() {
if (canvas.dataset) {
canvas.dataset.tool = tool;
@@ -492,6 +514,7 @@ export function createArrayCanvas(canvas, callbacks = {}) {
function setTool(nextTool) {
const resolved = normalizedTool(nextTool);
if (resolved === tool) return tool;
if (resolved !== "add") pendingAdd = null;
tool = resolved;
updateCanvasAffordance();
callbacks.onToolChange?.(tool);
@@ -550,14 +573,48 @@ export function createArrayCanvas(canvas, callbacks = {}) {
return eventToCanvasPoint(event, canvas.getBoundingClientRect());
}
function clientPoint(event) {
return {
x: finiteNumber(event?.clientX, 0),
y: finiteNumber(event?.clientY, 0),
};
}
function exceedsTouchThreshold(start, event) {
const current = clientPoint(event);
return Math.hypot(current.x - start.x, current.y - start.y) >
TOUCH_GESTURE_THRESHOLD_PX;
}
function onTouchStart(event) {
if (destroyed || tool !== "select" || !model?.arrayDefinition) return;
const touch = event.changedTouches?.[0] ?? event.touches?.[0];
const currentViewport = ensureViewport();
if (!touch || !currentViewport) return;
const hit = hitTestMicrophone(
pointerPoint(touch),
model.arrayDefinition.microphones,
currentViewport,
);
if (hit) event.preventDefault();
}
function onPointerDown(event) {
if (destroyed || event.button !== 0 || !model?.arrayDefinition) return;
if (drag || pendingAdd) return;
focus();
if (tool === "add") {
const position = constrainedEventPosition(event, 0);
if (position) {
event.preventDefault();
callbacks.onAdd?.(position);
if (event.pointerType === "touch") {
pendingAdd = {
pointerId: event.pointerId,
startClient: clientPoint(event),
};
} else {
event.preventDefault();
callbacks.onAdd?.(position);
}
}
return;
}
@@ -577,15 +634,31 @@ export function createArrayCanvas(canvas, callbacks = {}) {
id: hit.id,
start: [...hit.microphone.position],
last: [...hit.microphone.position],
startClient: clientPoint(event),
pointerType: event.pointerType,
pending: event.pointerType === "touch",
};
canvas.setPointerCapture?.(event.pointerId);
callbacks.onDragStart?.(hit.id);
try {
canvas.setPointerCapture?.(event.pointerId);
} catch {
// Synthetic pointers and interrupted input do not always own capture.
}
if (!drag.pending) callbacks.onDragStart?.(hit.id);
updateCanvasAffordance();
schedule();
}
function onPointerMove(event) {
if (pendingAdd?.pointerId === event.pointerId) {
if (exceedsTouchThreshold(pendingAdd.startClient, event)) pendingAdd = null;
return;
}
if (!drag || event.pointerId !== drag.pointerId) return;
if (drag.pending) {
if (!exceedsTouchThreshold(drag.startClient, event)) return;
drag.pending = false;
callbacks.onDragStart?.(drag.id);
}
const microphone = microphoneById(drag.id);
const position = constrainedEventPosition(event, microphone?.position?.[2] ?? drag.start[2]);
if (!position) return;
@@ -599,17 +672,37 @@ export function createArrayCanvas(canvas, callbacks = {}) {
if (!drag || (event?.pointerId !== undefined && event.pointerId !== drag.pointerId)) return;
const completed = drag;
drag = null;
const position = cancel ? completed.start : completed.last;
if (cancel) callbacks.onDrag?.(completed.id, [...position]);
callbacks.onDragEnd?.(completed.id, [...position]);
if (!completed.pending) {
const position = cancel ? completed.start : completed.last;
if (cancel) callbacks.onDrag?.(completed.id, [...position]);
callbacks.onDragEnd?.(completed.id, [...position]);
}
const pointerId = event?.pointerId ?? completed.pointerId;
if (canvas.hasPointerCapture?.(pointerId)) {
canvas.releasePointerCapture?.(pointerId);
try {
if (canvas.hasPointerCapture?.(pointerId)) {
canvas.releasePointerCapture?.(pointerId);
}
} catch {
// The browser may have released capture before pointercancel/lostcapture.
}
updateCanvasAffordance();
schedule();
}
function finishPendingAdd(event, cancel = false) {
if (!pendingAdd || event?.pointerId !== pendingAdd.pointerId) return false;
const completed = pendingAdd;
pendingAdd = null;
if (!cancel && tool === "add" && !exceedsTouchThreshold(completed.startClient, event)) {
const position = constrainedEventPosition(event, 0);
if (position) {
event.preventDefault();
callbacks.onAdd?.(position);
}
}
return true;
}
function onKeyDown(event) {
if (event.altKey || event.ctrlKey || event.metaKey) return;
const lowerKey = event.key.length === 1 ? event.key.toLowerCase() : event.key;
@@ -649,10 +742,12 @@ export function createArrayCanvas(canvas, callbacks = {}) {
}
function onPointerUp(event) {
if (finishPendingAdd(event, false)) return;
finishDrag(event, false);
}
function onPointerCancel(event) {
if (finishPendingAdd(event, true)) return;
finishDrag(event, true);
}
@@ -665,6 +760,7 @@ export function createArrayCanvas(canvas, callbacks = {}) {
canvas.addEventListener("pointerup", onPointerUp);
canvas.addEventListener("pointercancel", onPointerCancel);
canvas.addEventListener("lostpointercapture", onLostPointerCapture);
canvas.addEventListener("touchstart", onTouchStart, { passive: false });
canvas.addEventListener("keydown", onKeyDown);
let resizeObserver = null;
@@ -698,10 +794,12 @@ export function createArrayCanvas(canvas, callbacks = {}) {
canvas.removeEventListener("pointerup", onPointerUp);
canvas.removeEventListener("pointercancel", onPointerCancel);
canvas.removeEventListener("lostpointercapture", onLostPointerCapture);
canvas.removeEventListener("touchstart", onTouchStart);
canvas.removeEventListener("keydown", onKeyDown);
model = null;
viewport = null;
drag = null;
pendingAdd = null;
},
};
}
apps/array-builder/index.html
+68 -62
View File
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="/apps/array-builder/styles.css" />
</head>
<body>
<a class="skip-link" href="#array-canvas">배열 편집 화면으로 건너뛰기</a>
<div class="app-shell array-builder-shell">
<header class="app-header array-builder-header">
<a class="app-brand" href="/">
@@ -39,6 +40,65 @@
</header>
<main class="array-builder-layout" id="array-builder-layout" data-split-layout>
<section class="array-workspace" id="array-builder-workspace" aria-label="마이크 배열 편집 화면">
<div class="workspace-heading">
<div>
<p class="eyebrow">마이크 배치</p>
<h1>Array 평면 편집</h1>
</div>
<p class="workspace-summary" id="workspace-summary">0.45 × 0.45 m · 12 channels</p>
</div>
<div class="workspace-toolbar" role="toolbar" aria-label="배열 편집 도구">
<div class="toolbar-group" aria-label="편집 도구">
<button class="tool-button is-active" id="select-tool-button" type="button" aria-pressed="true" aria-keyshortcuts="V">선택 <kbd>V</kbd></button>
<button class="tool-button" id="add-tool-button" type="button" aria-pressed="false" aria-keyshortcuts="A">추가 <kbd>A</kbd></button>
</div>
<div class="toolbar-group" aria-label="실행 취소와 다시 실행">
<button class="tool-button" id="undo-button" type="button" aria-keyshortcuts="Control+Z" disabled>실행 취소</button>
<button class="tool-button" id="redo-button" type="button" aria-keyshortcuts="Control+Shift+Z" disabled>다시 실행</button>
</div>
<div class="toolbar-group zoom-tools" aria-label="화면 확대와 맞춤">
<button class="icon-button" id="zoom-out-button" type="button" aria-label="축소" title="축소">−</button>
<button class="tool-button" id="fit-view-button" type="button">화면 맞춤</button>
<button class="icon-button" id="zoom-in-button" type="button" aria-label="확대" title="확대">+</button>
</div>
<div class="snap-controls">
<label class="check-field"><input id="snap-enabled" type="checkbox" checked /><span>격자 스냅</span></label>
<label class="compact-field"><span>간격</span><input id="snap-step" type="number" min="0.1" max="1000" step="0.1" value="5" inputmode="decimal" /><small>mm</small></label>
</div>
</div>
<div class="array-canvas-card">
<canvas
id="array-canvas"
tabindex="0"
aria-label="마이크 어레이 평면 편집 canvas"
aria-describedby="canvas-instructions"
></canvas>
<div class="canvas-instructions" id="canvas-instructions">
<strong>마이크를 클릭하거나 드래그해 위치를 편집하세요.</strong>
<span>추가 도구에서는 빈 공간을 클릭해 새 채널을 만듭니다.</span>
</div>
<div class="selection-status" id="selection-status" role="status" aria-live="polite">선택된 마이크 없음</div>
</div>
<section class="array-statistics" aria-label="배열 요약">
<article class="metric-card"><span>채널</span><strong id="microphone-count">12</strong><small>microphones</small></article>
<article class="metric-card"><span>최소 간격</span><strong id="minimum-spacing">—</strong><small>nearest pair</small></article>
<article class="metric-card"><span>무게중심</span><strong id="array-centroid">—</strong><small>x, y, z</small></article>
<article class="metric-card"><span>보정 채널</span><strong id="calibration-count">0</strong><small>sensitivity / phase / response</small></article>
</section>
<details class="shortcut-help">
<summary>빠른 편집 키</summary>
<div>
<p><kbd>V</kbd> 선택 · <kbd>A</kbd> 추가 · <kbd>Delete</kbd> 선택 삭제</p>
<p><kbd>← ↑ ↓ →</kbd> 위치 미세 조정 · <kbd>Shift</kbd>를 함께 누르면 10배 이동</p>
</div>
</details>
</section>
<aside
class="array-controls"
id="array-builder-controls"
@@ -58,7 +118,7 @@
</div>
</section>
<section class="control-section">
<section class="control-section array-metadata-section">
<div class="section-title"><span>01</span><h2>배열 정보</h2></div>
<label class="field field--wide">
<span>이름</span>
@@ -81,7 +141,7 @@
</label>
</section>
<section class="control-section control-section--primary">
<section class="control-section control-section--primary aperture-section">
<div class="section-title"><span>02</span><h2>크기와 형상</h2></div>
<div class="field-grid">
<label class="field">
@@ -100,7 +160,7 @@
<option value="ellipse">타원</option>
</select>
</label>
<p class="section-note">크기를 바꿔도 기존 마이크 좌표는 자동으로 늘어나거나 줄어들지 않습니다.</p>
<p class="section-note">크기를 바꿔도 기존 좌표는 자동으로 늘어나거나 줄어들지 않습니다. 생성 경계 형상은 편집용이며 JSON에는 최종 좌표와 너비·높이만 저장됩니다.</p>
<div class="button-grid button-grid--two">
<button class="button button--ghost" id="center-microphones-button" type="button">좌표 중앙 정렬</button>
<button class="button button--ghost" id="fit-aperture-button" type="button">좌표에 크기 맞춤</button>
@@ -108,7 +168,7 @@
</div>
</section>
<section class="control-section">
<section class="control-section preset-section">
<div class="section-title"><span>03</span><h2>프리셋 생성</h2></div>
<label class="field field--wide">
<span>배치 방식</span>
@@ -201,6 +261,10 @@
</div>
</div>
</section>
<div class="mobile-save-actions">
<button class="button button--primary button--full" id="mobile-export-button" type="button">Array JSON 저장</button>
</div>
</aside>
<div
@@ -216,64 +280,6 @@
title="드래그하거나 방향키로 너비 조절 · Enter/더블클릭으로 초기화"
></div>
<section class="array-workspace" id="array-builder-workspace" aria-label="마이크 배열 편집 화면">
<div class="workspace-heading">
<div>
<p class="eyebrow">마이크 배치</p>
<h1>Array 평면 편집</h1>
</div>
<p class="workspace-summary" id="workspace-summary">0.45 × 0.45 m · 12 channels</p>
</div>
<div class="workspace-toolbar" role="toolbar" aria-label="배열 편집 도구">
<div class="toolbar-group" aria-label="편집 도구">
<button class="tool-button is-active" id="select-tool-button" type="button" aria-pressed="true" aria-keyshortcuts="V">선택 <kbd>V</kbd></button>
<button class="tool-button" id="add-tool-button" type="button" aria-pressed="false" aria-keyshortcuts="A">추가 <kbd>A</kbd></button>
</div>
<div class="toolbar-group" aria-label="실행 취소와 다시 실행">
<button class="tool-button" id="undo-button" type="button" aria-keyshortcuts="Control+Z" disabled>실행 취소</button>
<button class="tool-button" id="redo-button" type="button" aria-keyshortcuts="Control+Shift+Z" disabled>다시 실행</button>
</div>
<div class="toolbar-group zoom-tools" aria-label="화면 확대와 맞춤">
<button class="icon-button" id="zoom-out-button" type="button" aria-label="축소" title="축소">−</button>
<button class="tool-button" id="fit-view-button" type="button">화면 맞춤</button>
<button class="icon-button" id="zoom-in-button" type="button" aria-label="확대" title="확대">+</button>
</div>
<div class="snap-controls">
<label class="check-field"><input id="snap-enabled" type="checkbox" checked /><span>격자 스냅</span></label>
<label class="compact-field"><span>간격</span><input id="snap-step" type="number" min="0.1" max="1000" step="0.1" value="5" inputmode="decimal" /><small>mm</small></label>
</div>
</div>
<div class="array-canvas-card">
<canvas
id="array-canvas"
tabindex="0"
aria-label="마이크 어레이 평면 편집 canvas"
aria-describedby="canvas-instructions"
></canvas>
<div class="canvas-instructions" id="canvas-instructions">
<strong>마이크를 클릭하거나 드래그해 위치를 편집하세요.</strong>
<span>추가 도구에서는 빈 공간을 클릭해 새 채널을 만듭니다.</span>
</div>
<div class="selection-status" id="selection-status" role="status" aria-live="polite">선택된 마이크 없음</div>
</div>
<section class="array-statistics" aria-label="배열 요약">
<article class="metric-card"><span>채널</span><strong id="microphone-count">12</strong><small>microphones</small></article>
<article class="metric-card"><span>최소 간격</span><strong id="minimum-spacing">—</strong><small>nearest pair</small></article>
<article class="metric-card"><span>무게중심</span><strong id="array-centroid">—</strong><small>x, y, z</small></article>
<article class="metric-card"><span>보정 채널</span><strong id="calibration-count">0</strong><small>sensitivity / phase / response</small></article>
</section>
<details class="shortcut-help">
<summary>빠른 편집 키</summary>
<div>
<p><kbd>V</kbd> 선택 · <kbd>A</kbd> 추가 · <kbd>Delete</kbd> 선택 삭제</p>
<p><kbd>← ↑ ↓ →</kbd> 위치 미세 조정 · <kbd>Shift</kbd>를 함께 누르면 10배 이동</p>
</div>
</details>
</section>
</main>
</div>
apps/array-builder/main.js
+245 -44
View File
@@ -49,7 +49,7 @@ const optionalIds = [
"move-microphone-down-button", "microphone-sensitivity", "microphone-phase",
"frequency-response-summary", "preset-axis", "preset-edge-inset",
"microphone-search", "microphone-selection-empty", "microphone-fields",
"workspace-summary",
"workspace-summary", "canvas-instructions", "mobile-export-button",
];
for (const id of optionalIds) elements[id] = maybeById(id);
elements.validationCard = elements["validation-title"].closest(".validation-card");
@@ -80,14 +80,20 @@ const state = {
history: [],
future: [],
dragSnapshot: null,
importRevision: 0,
baselineSignature: "",
};
const MAX_HISTORY = 50;
const MAX_HISTORY_BYTES = 24 * 1024 * 1024;
const frequencyResponseFingerprintCache = new WeakMap();
const BUILTIN_ARRAY_IDS = new Set([
"rectangular-2x2", "rectangular-4x3", "rectangular-8x6",
"rectangular-16x12", "rectangular-24x16", "rectangular-16x12-compact",
"rectangular-2x2-450mm", "rectangular-4x3-450mm",
"rectangular-8x6-450mm", "rectangular-16x12",
"rectangular-24x16-450mm", "rectangular-16x12-compact",
"rectangular-16x12-large", "fermat-spiral-192",
]);
state.baselineSignature = editableDocumentSignature(state.arrayDefinition);
function finiteInput(element, label, options = {}) {
const value = element.valueAsNumber;
@@ -121,35 +127,152 @@ function selectedMicrophone() {
) ?? null;
}
function cloneArrayForHistory(arrayDefinition) {
return {
...arrayDefinition,
coordinateSystem: { ...arrayDefinition.coordinateSystem },
aperture: { ...arrayDefinition.aperture },
microphones: arrayDefinition.microphones.map((microphone) => ({
...microphone,
position: [...microphone.position],
...(microphone.frequencyResponse === undefined
? {}
: { frequencyResponse: microphone.frequencyResponse }),
})),
};
}
function captureSnapshot() {
return {
arrayDefinition: structuredClone(state.arrayDefinition),
arrayDefinition: cloneArrayForHistory(state.arrayDefinition),
apertureShape: state.apertureShape,
selectedMicrophoneId: state.selectedMicrophoneId,
};
}
function snapshotSignature(snapshot) {
return JSON.stringify(snapshot);
function editableSnapshotSignature(snapshot) {
const arrayDefinition = snapshot.arrayDefinition;
return JSON.stringify({
document: editableDocumentView(arrayDefinition),
apertureShape: snapshot.apertureShape,
selectedMicrophoneId: snapshot.selectedMicrophoneId,
});
}
function fingerprintFrequencyResponse(response) {
if (!Array.isArray(response)) return null;
const cached = frequencyResponseFingerprintCache.get(response);
if (cached) return cached;
const canonical = JSON.stringify(response.map((point) => [
point.frequencyHz,
point.gainDb,
point.phaseDeg ?? null,
]));
let first = 0x811c9dc5;
let second = 0x9e3779b9;
for (let index = 0; index < canonical.length; index += 1) {
const code = canonical.charCodeAt(index);
first = Math.imul(first ^ code, 0x01000193) >>> 0;
second = Math.imul(second ^ code, 0x85ebca6b) >>> 0;
}
const fingerprint =
String(canonical.length) + ":" +
first.toString(16).padStart(8, "0") + ":" +
second.toString(16).padStart(8, "0");
frequencyResponseFingerprintCache.set(response, fingerprint);
return fingerprint;
}
function editableDocumentView(arrayDefinition) {
return {
schemaVersion: arrayDefinition.schemaVersion,
kind: arrayDefinition.kind,
id: arrayDefinition.id,
name: arrayDefinition.name,
description: arrayDefinition.description,
units: arrayDefinition.units,
coordinateSystem: arrayDefinition.coordinateSystem,
aperture: arrayDefinition.aperture,
microphones: arrayDefinition.microphones.map((microphone) => [
microphone.id,
...microphone.position,
microphone.sensitivityDb ?? null,
microphone.phaseOffsetDeg ?? null,
fingerprintFrequencyResponse(microphone.frequencyResponse),
]),
};
}
function editableDocumentSignature(arrayDefinition) {
return JSON.stringify(editableDocumentView(arrayDefinition));
}
function currentSnapshotView() {
return {
arrayDefinition: state.arrayDefinition,
apertureShape: state.apertureShape,
selectedMicrophoneId: state.selectedMicrophoneId,
};
}
function estimatedSnapshotBytes(snapshot) {
const responsePointCount = snapshot.arrayDefinition.microphones.reduce(
(count, microphone) => count + (microphone.frequencyResponse?.length ?? 0),
0,
);
return editableSnapshotSignature(snapshot).length * 4 + responsePointCount * 160;
}
function historyEntry(snapshot, label) {
return { snapshot, label, bytes: estimatedSnapshotBytes(snapshot) };
}
function trimHistoryMemory() {
while (state.history.length > MAX_HISTORY) state.history.shift();
let totalBytes = [...state.history, ...state.future].reduce(
(sum, entry) => sum + (entry.bytes ?? estimatedSnapshotBytes(entry.snapshot)),
0,
);
while (totalBytes > MAX_HISTORY_BYTES && state.history.length > 1) {
totalBytes -= state.history.shift().bytes;
}
while (totalBytes > MAX_HISTORY_BYTES && state.future.length > 1) {
totalBytes -= state.future.shift().bytes;
}
while (
totalBytes > MAX_HISTORY_BYTES &&
state.history.length + state.future.length > 1
) {
const removed = state.history.length
? state.history.shift()
: state.future.shift();
totalBytes -= removed.bytes;
}
}
function refreshDirtyState() {
state.dirty = editableDocumentSignature(state.arrayDefinition) !== state.baselineSignature;
}
function restoreSnapshot(snapshot, message) {
state.arrayDefinition = structuredClone(snapshot.arrayDefinition);
state.arrayDefinition = cloneArrayForHistory(snapshot.arrayDefinition);
state.apertureShape = snapshot.apertureShape;
state.selectedMicrophoneId = snapshot.selectedMicrophoneId;
if (!selectedMicrophone()) {
state.selectedMicrophoneId = state.arrayDefinition.microphones[0]?.id ?? null;
}
state.dirty = true;
refreshDirtyState();
renderAll(message);
}
function recordSnapshot(before, label) {
if (snapshotSignature(before) === snapshotSignature(captureSnapshot())) return false;
state.history.push({ snapshot: before, label });
if (state.history.length > MAX_HISTORY) state.history.shift();
if (editableSnapshotSignature(before) === editableSnapshotSignature(currentSnapshotView())) {
return false;
}
state.history.push(historyEntry(before, label));
state.future.length = 0;
state.dirty = true;
trimHistoryMemory();
refreshDirtyState();
return true;
}
@@ -165,7 +288,11 @@ function showActionError(error) {
if (elements["save-state"]) elements["save-state"].textContent = "적용하지 못함";
elements["validation-title"].textContent = "작업을 적용하지 못했습니다";
elements["validation-message"].textContent = message;
if (elements.validationCard) elements.validationCard.dataset.severity = "error";
if (elements.validationCard) {
elements.validationCard.dataset.severity = "error";
elements.validationCard.classList.add("is-invalid");
elements.validationCard.classList.remove("is-valid", "is-warning");
}
elements["array-builder-workspace"].dataset.actionError = message;
}
@@ -174,6 +301,9 @@ function safely(callback) {
delete elements["array-builder-workspace"].dataset.actionError;
callback();
} catch (error) {
renderDocumentEditor();
syncSelectedEditor();
setNumber(elements["snap-step"], state.snapStepM * 1000);
showActionError(error);
}
}
@@ -183,9 +313,14 @@ function announce(message) {
elements["save-state"].textContent = state.dirty ? message || "저장하지 않은 변경" : message || "저장됨";
elements["save-state"].classList.toggle("is-dirty", state.dirty);
}
if (elements["selection-status"] && message) {
elements["selection-status"].textContent = message;
}
}
function announceSelection(message) {
if (elements["selection-status"]) elements["selection-status"].textContent = message;
}
function dismissCanvasInstructions() {
elements["canvas-instructions"]?.classList.add("is-hidden");
}
function setTool(tool, options = {}) {
@@ -196,6 +331,10 @@ function setTool(tool, options = {}) {
elements["add-tool-button"].setAttribute("aria-pressed", String(state.tool === "add"));
elements["array-canvas"].dataset.tool = state.tool;
canvasView.render(canvasState());
if (options.userInitiated) {
dismissCanvasInstructions();
announceSelection(state.tool === "add" ? "추가 도구 · 빈 곳을 클릭하세요." : "선택 도구");
}
if (options.focus) canvasView.focus();
}
@@ -258,15 +397,29 @@ function selectMicrophone(id, options = {}) {
renderMicrophoneList();
syncSelectedEditor();
canvasView.render(canvasState());
if (state.selectedMicrophoneId) announce(state.selectedMicrophoneId + " 선택");
const selectedButton = [...elements["microphone-list"].querySelectorAll("[data-microphone-id]")]
.find((button) => button.dataset.microphoneId === state.selectedMicrophoneId);
if (options.focusList) selectedButton?.focus();
if (options.scrollList !== false) {
selectedButton?.scrollIntoView?.({ block: "nearest" });
}
announceSelection(
state.selectedMicrophoneId
? state.selectedMicrophoneId + " 선택"
: "선택된 마이크 없음",
);
if (options.focusCanvas) canvasView.focus();
}
const canvasView = createArrayCanvas(elements["array-canvas"], {
onSelect(id) {
selectMicrophone(id);
dismissCanvasInstructions();
selectMicrophone(id, {
scrollList: window.matchMedia("(min-width: 761px)").matches,
});
},
onAdd(position) {
dismissCanvasInstructions();
safely(() => mutate("마이크 추가됨", () => {
const microphone = addMicrophone(
state.arrayDefinition,
@@ -276,6 +429,7 @@ const canvasView = createArrayCanvas(elements["array-canvas"], {
}));
},
onDragStart(id) {
dismissCanvasInstructions();
if (state.dragSnapshot) return;
state.selectedMicrophoneId = id;
state.dragSnapshot = captureSnapshot();
@@ -320,7 +474,7 @@ const canvasView = createArrayCanvas(elements["array-canvas"], {
}));
},
onToolChange(tool) {
setTool(tool);
setTool(tool, { userInitiated: true });
},
onFit() {
canvasView.fit();
@@ -372,11 +526,14 @@ function renderMicrophoneList() {
const query = elements["microphone-search"]?.value.trim().toLowerCase() ?? "";
list.replaceChildren();
state.arrayDefinition.microphones.forEach((microphone, index) => {
if (query && !microphone.id.toLowerCase().includes(query)) return;
const matchesQuery = !query || microphone.id.toLowerCase().includes(query);
if (!matchesQuery && microphone.id !== state.selectedMicrophoneId) return;
const button = document.createElement("button");
button.type = "button";
button.className = "microphone-row";
button.dataset.microphoneId = microphone.id;
button.dataset.searchPinned = String(!matchesQuery);
button.tabIndex = microphone.id === state.selectedMicrophoneId ? 0 : -1;
button.setAttribute("role", "option");
button.setAttribute(
"aria-selected",
@@ -412,9 +569,16 @@ function renderMicrophoneList() {
identity.append(calibration);
}
button.append(channel, identity);
button.addEventListener("click", () => selectMicrophone(microphone.id));
button.addEventListener("click", () => {
dismissCanvasInstructions();
selectMicrophone(microphone.id, { focusList: true });
});
list.append(button);
});
if (!list.querySelector('[tabindex="0"]')) {
const firstButton = list.querySelector("[data-microphone-id]");
if (firstButton) firstButton.tabIndex = 0;
}
if (!list.childElementCount) {
const empty = document.createElement("p");
empty.className = "microphone-list__empty";
@@ -521,6 +685,9 @@ async function validateCurrent() {
state.valid = errors.length === 0;
document.documentElement.dataset.arrayValid = String(state.valid);
elements["export-button"].disabled = !state.valid;
if (elements["mobile-export-button"]) {
elements["mobile-export-button"].disabled = !state.valid;
}
elements.validationCard?.setAttribute(
"data-severity",
errors.length ? "error" : warnings.length ? "warning" : "success",
@@ -603,24 +770,31 @@ function applySelectedPosition() {
}
function presetOptions() {
return {
type: elements["preset-type"].value,
const type = elements["preset-type"].value;
const options = {
type,
aperture: state.arrayDefinition.aperture,
shape: state.apertureShape,
count: integerInput(elements["preset-count"], "마이크 수", 1, 1024),
columns: integerInput(elements["preset-columns"], "Columns", 1, 1024),
rows: integerInput(elements["preset-rows"], "Rows", 1, 1024),
seed: integerInput(elements["preset-seed"], "Seed", -2147483648, 4294967295),
minimumSpacingM: finiteInput(
elements["preset-minimum-spacing"],
"최소 간격",
{ minimum: 0 },
),
edgeInsetM: elements["preset-edge-inset"]
? finiteInput(elements["preset-edge-inset"], "경계 여백", { minimum: 0 })
: 0,
axis: elements["preset-axis"]?.value ?? "x",
};
if (type === "grid") {
options.columns = integerInput(elements["preset-columns"], "Columns", 1, 1024);
options.rows = integerInput(elements["preset-rows"], "Rows", 1, 1024);
} else {
options.count = integerInput(elements["preset-count"], "마이크 수", 1, 1024);
}
if (type === "linear") options.axis = elements["preset-axis"]?.value ?? "x";
if (type === "random") {
options.seed = integerInput(elements["preset-seed"], "Seed", -2147483648, 4294967295);
options.minimumSpacingM = finiteInput(
elements["preset-minimum-spacing"],
"최소 간격",
{ minimum: 0 },
);
}
return options;
}
elements["array-id"].addEventListener("change", () => safely(() => {
@@ -680,8 +854,10 @@ elements["generate-preset-button"].addEventListener("click", () => safely(() =>
);
}));
elements["select-tool-button"].addEventListener("click", () => setTool("select", { focus: true }));
elements["add-tool-button"].addEventListener("click", () => setTool("add", { focus: true }));
elements["select-tool-button"].addEventListener("click", () =>
setTool("select", { focus: true, userInitiated: true }));
elements["add-tool-button"].addEventListener("click", () =>
setTool("add", { focus: true, userInitiated: true }));
elements["fit-view-button"].addEventListener("click", () => canvasView.fit());
elements["zoom-in-button"].addEventListener("click", () => canvasView.zoomBy(1.25));
elements["zoom-out-button"].addEventListener("click", () => canvasView.zoomBy(0.8));
@@ -701,6 +877,7 @@ elements["snap-step"].addEventListener("change", () => safely(() => {
}));
elements["add-microphone-button"].addEventListener("click", () => safely(() => {
dismissCanvasInstructions();
mutate("마이크 추가됨", () => {
const microphone = addMicrophone(state.arrayDefinition, availableManualPosition());
state.selectedMicrophoneId = microphone.id;
@@ -763,6 +940,19 @@ elements["move-microphone-down-button"]?.addEventListener("click", () => safely(
mutate("채널 순서 변경됨", () => moveMicrophone(state.arrayDefinition, microphone.id, 1));
}));
elements["microphone-search"]?.addEventListener("input", renderMicrophoneList);
elements["microphone-list"].addEventListener("keydown", (event) => {
if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
const buttons = [...elements["microphone-list"].querySelectorAll("[data-microphone-id]")];
if (!buttons.length) return;
const focusedIndex = Math.max(0, buttons.indexOf(document.activeElement));
let targetIndex = focusedIndex;
if (event.key === "ArrowUp") targetIndex = Math.max(0, focusedIndex - 1);
else if (event.key === "ArrowDown") targetIndex = Math.min(buttons.length - 1, focusedIndex + 1);
else if (event.key === "Home") targetIndex = 0;
else targetIndex = buttons.length - 1;
event.preventDefault();
selectMicrophone(buttons[targetIndex].dataset.microphoneId, { focusList: true });
});
elements["center-microphones-button"]?.addEventListener("click", () => safely(() => {
mutate("마이크 중심 정렬됨", () => centerMicrophones(state.arrayDefinition));
@@ -789,14 +979,16 @@ elements["clamp-microphones-button"]?.addEventListener("click", () => safely(()
function undo() {
const entry = state.history.pop();
if (!entry) return;
state.future.push({ snapshot: captureSnapshot(), label: entry.label });
state.future.push(historyEntry(captureSnapshot(), entry.label));
trimHistoryMemory();
restoreSnapshot(entry.snapshot, "실행 취소 · " + entry.label);
}
function redo() {
const entry = state.future.pop();
if (!entry) return;
state.history.push({ snapshot: captureSnapshot(), label: entry.label });
state.history.push(historyEntry(captureSnapshot(), entry.label));
trimHistoryMemory();
restoreSnapshot(entry.snapshot, "다시 실행 · " + entry.label);
}
@@ -821,31 +1013,36 @@ window.addEventListener("keydown", (event) => {
elements["array-input"].addEventListener("change", async () => {
const file = elements["array-input"].files?.[0];
if (!file) return;
const importRevision = ++state.importRevision;
try {
const value = await readJsonFile(file);
const issues = await validateArrayDefinition(value);
if (importRevision !== state.importRevision) return;
if (issues.length) {
const details = issues.slice(0, 4).map(
(issue) => issue.path + ": " + issue.message,
).join(" · ");
throw new Error("Array JSON 계약을 만족하지 않습니다. " + details);
}
const previousSnapshot = captureSnapshot();
state.arrayDefinition = prepareArrayForEditing(value);
state.apertureShape = inferApertureShape(value);
state.selectedMicrophoneId = state.arrayDefinition.microphones[0]?.id ?? null;
state.history.length = 0;
state.history = [historyEntry(previousSnapshot, "Array 불러오기")];
state.future.length = 0;
trimHistoryMemory();
state.baselineSignature = editableDocumentSignature(state.arrayDefinition);
state.dirty = false;
canvasView.fit();
renderAll(file.name + " 불러옴");
renderAll(file.name + " 불러옴 · 실행 취소 가능");
} catch (error) {
showActionError(error);
if (importRevision === state.importRevision) showActionError(error);
} finally {
elements["array-input"].value = "";
if (importRevision === state.importRevision) elements["array-input"].value = "";
}
});
elements["export-button"].addEventListener("click", async () => {
async function exportArray() {
await validateCurrent();
if (!state.valid) {
showActionError(new Error("오류를 해결한 뒤 Array JSON을 저장하세요."));
@@ -855,9 +1052,13 @@ elements["export-button"].addEventListener("click", async () => {
state.arrayDefinition,
safeArrayFileStem(state.arrayDefinition) + ".array.json",
);
state.dirty = false;
state.baselineSignature = editableDocumentSignature(state.arrayDefinition);
refreshDirtyState();
announce("Array JSON 저장됨");
});
}
elements["export-button"].addEventListener("click", exportArray);
elements["mobile-export-button"]?.addEventListener("click", exportArray);
window.addEventListener("beforeunload", (event) => {
if (!state.dirty) return;
apps/array-builder/model.js
+71 -29
View File
@@ -63,7 +63,10 @@ function microphoneFromPosition(position, index) {
}
function pointKey(position) {
return position.map((value) => rounded(value).toFixed(COORDINATE_DIGITS)).join(",");
return position.map((value) => {
const number = finiteNumber(value, "좌표");
return Object.is(number, -0) ? "0" : String(number);
}).join(",");
}
function linearValue(index, count, minimum, maximum) {
@@ -218,16 +221,43 @@ function randomPositions(options, bounds, shape) {
const random = createSeededRandom(options.seed ?? 1);
const positions = [];
const keys = new Set();
const maximumAttempts = Math.max(2000, count * 500);
const cellSize = Math.max(minimumSpacing, 10 ** -COORDINATE_DIGITS);
const spatialCells = minimumSpacingSquared > 0 ? new Map() : null;
const cellCoordinates = (position) => [
Math.floor(position[0] / cellSize),
Math.floor(position[1] / cellSize),
];
const cellKey = (x, y) => String(x) + "," + String(y);
const violatesMinimumSpacing = (candidate) => {
if (!spatialCells) return false;
const [cellX, cellY] = cellCoordinates(candidate);
for (let offsetY = -1; offsetY <= 1; offsetY += 1) {
for (let offsetX = -1; offsetX <= 1; offsetX += 1) {
const neighbors = spatialCells.get(cellKey(cellX + offsetX, cellY + offsetY));
if (neighbors?.some(
(position) => squaredDistance(position, candidate) < minimumSpacingSquared,
)) return true;
}
}
return false;
};
const indexPosition = (position) => {
if (!spatialCells) return;
const [cellX, cellY] = cellCoordinates(position);
const key = cellKey(cellX, cellY);
const cell = spatialCells.get(key);
if (cell) cell.push(position);
else spatialCells.set(key, [position]);
};
const maximumAttempts = Math.max(2000, count * 150);
for (let attempt = 0; attempt < maximumAttempts && positions.length < count; attempt += 1) {
const candidate = normalizedPosition(randomCandidate(random, bounds, shape));
const key = pointKey(candidate);
if (keys.has(key)) continue;
if (positions.some((position) => squaredDistance(position, candidate) < minimumSpacingSquared)) {
continue;
}
if (violatesMinimumSpacing(candidate)) continue;
keys.add(key);
positions.push(candidate);
indexPosition(candidate);
}
if (positions.length !== count) {
throw new RangeError(
@@ -302,35 +332,36 @@ export function prepareArrayForEditing(value) {
}
export function inferApertureShape(arrayDefinition) {
const description = String(arrayDefinition?.description ?? "");
if (/circle|circular|ellipse|elliptic|ring|spiral/i.test(description)) return "ellipse";
const aperture = arrayDefinition?.aperture;
const microphones = arrayDefinition?.microphones ?? [];
if (!aperture || microphones.length < 3) return "rectangle";
let maximumNormalizedRadius = 0;
for (const microphone of microphones) {
const position = microphone?.position;
if (!Array.isArray(position)) return "rectangle";
const radius = Math.hypot(
position[0] / (aperture.width / 2),
position[1] / (aperture.height / 2),
);
if (radius > 1.000000001) return "rectangle";
maximumNormalizedRadius = Math.max(maximumNormalizedRadius, radius);
}
return maximumNormalizedRadius >= 0.72 ? "ellipse" : "rectangle";
const shapeWords = [
arrayDefinition?.id,
arrayDefinition?.name,
arrayDefinition?.description,
].filter(Boolean).join(" ");
return /(^|[^a-z])(circle|circular|ellipse|elliptic|ring|spiral)([^a-z]|$)/i.test(shapeWords)
? "ellipse"
: "rectangle";
}
export function nextMicrophoneId(arrayDefinition) {
const used = new Set((arrayDefinition?.microphones ?? []).map((microphone) => microphone.id));
let maximumSuffix = 0;
let maximumSuffix = 0n;
for (const id of used) {
const match = /^mic-(\d+)$/.exec(id);
if (match) maximumSuffix = Math.max(maximumSuffix, Number(match[1]));
if (!match) continue;
const suffix = BigInt(match[1]);
if (suffix > maximumSuffix) maximumSuffix = suffix;
}
let candidate = maximumSuffix + 1;
while (used.has(microphoneId(candidate))) candidate += 1;
return microphoneId(candidate);
let candidate = maximumSuffix + 1n;
for (let attempt = 0; attempt <= used.size; attempt += 1) {
const id = "mic-" + candidate.toString().padStart(3, "0");
if (id.length <= 64 && !used.has(id)) return id;
candidate += 1n;
}
for (let suffix = 1; suffix <= MAX_MICROPHONES + 1; suffix += 1) {
const id = microphoneId(suffix);
if (!used.has(id)) return id;
}
throw new Error("사용 가능한 마이크 ID를 찾을 수 없습니다.");
}
export function addMicrophone(arrayDefinition, position, properties = {}) {
@@ -514,8 +545,19 @@ export function arrayStatistics(arrayDefinition) {
if (microphones.length === 0) {
return { count: 0, centroid: [0, 0, 0], minimumSpacing: null, calibrationCount: 0 };
}
const centroid = [0, 1, 2].map((axis) =>
microphones.reduce((sum, microphone) => sum + microphone.position[axis], 0) / microphones.length);
const centroid = [0, 1, 2].map((axis) => {
const scale = microphones.reduce(
(maximum, microphone) => Math.max(maximum, Math.abs(microphone.position[axis])),
0,
);
if (scale === 0) return 0;
const normalizedSum = microphones.reduce(
(sum, microphone) => sum + microphone.position[axis] / scale,
0,
);
const normalizedMean = Math.max(-1, Math.min(1, normalizedSum / microphones.length));
return normalizedMean * scale;
});
let minimumSpacingSquared = Infinity;
for (let left = 0; left < microphones.length; left += 1) {
for (let right = left + 1; right < microphones.length; right += 1) {
apps/array-builder/styles.css
+69 -10
View File
@@ -3,6 +3,25 @@
overflow-x: clip;
}
.skip-link {
position: fixed;
z-index: 100;
top: 8px;
left: 8px;
padding: 9px 12px;
border-radius: 9px;
color: #06130f;
background: var(--mint);
font-size: 0.72rem;
font-weight: 750;
text-decoration: none;
transform: translateY(-150%);
}
.skip-link:focus {
transform: translateY(0);
}
.array-builder-header {
position: sticky;
z-index: 30;
@@ -116,6 +135,11 @@
clip-path: inset(50%);
}
.file-button:focus-within {
border-color: var(--mint);
outline: 2px solid rgb(101 242 191 / 16%);
}
.array-workflow {
min-width: 0;
margin-left: auto;
@@ -169,6 +193,8 @@
}
.array-controls {
grid-column: 1;
grid-row: 1;
position: sticky;
top: 59px;
min-width: 0;
@@ -185,6 +211,8 @@
}
.array-builder-layout > .split-handle {
grid-column: 2;
grid-row: 1;
position: sticky;
top: 59px;
height: calc(100vh - 59px);
@@ -577,7 +605,13 @@ details > summary::-webkit-details-marker {
padding: 0 10px 10px;
}
.mobile-save-actions {
display: none;
}
.array-workspace {
grid-column: 3;
grid-row: 1;
min-width: 0;
padding: 18px clamp(18px, 2.5vw, 38px) 38px;
}
@@ -857,41 +891,60 @@ body[data-array-tool="add"] #array-canvas,
@media (max-width: 1100px) {
.array-builder-layout {
grid-template-columns: minmax(0, 1fr);
grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
}
.array-builder-layout > .split-handle {
display: none;
}
.array-controls {
grid-column: 1;
}
.array-workspace {
grid-column: 2;
}
.array-controls,
.array-workspace {
width: 100%;
min-width: 0;
}
.array-controls {
position: static;
overflow: visible;
max-height: none;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.microphone-list {
max-height: 360px;
}
}
@media (max-width: 760px) {
.array-builder-layout {
grid-template-columns: minmax(0, 1fr);
}
.array-builder-header {
position: static;
flex-wrap: wrap;
gap: 10px;
}
.array-workspace {
grid-column: 1;
grid-row: 1;
}
.array-controls {
grid-column: 1;
grid-row: 2;
position: static;
overflow: visible;
max-height: none;
border-right: 0;
border-top: 1px solid var(--line);
border-bottom: 0;
}
.array-workflow {
order: 3;
width: 100%;
margin: 0;
}
@@ -935,11 +988,17 @@ body[data-array-tool="add"] #array-canvas,
#array-canvas {
height: 500px;
touch-action: pan-y;
}
.shortcut-help > div {
grid-template-columns: minmax(0, 1fr);
}
.mobile-save-actions {
display: block;
padding: 2px 0 16px;
}
}
@media (max-width: 520px) {
docs/data-contracts.md
+5
View File
@@ -24,6 +24,11 @@ array의 `sensitivityDb`와 `phaseOffsetDeg`는 각 마이크 수신 channel에
주파수는 0–1,000,000 Hz에서 중복 없이 증가해야 하며, dB와 wrapped phase를 구간 선형 보간하고
측정 범위 밖에서는 가까운 끝점을 사용한다.
Array Builder의 사각형/타원 생성 경계, 프리셋 종류, 행·열, random seed·최소 간격·경계 여백,
snap과 zoom은 편집기 상태이며 `micarrsim.array` 계약에 포함되지 않는다. 저장 파일에는
`aperture.width/height`와 최종 `microphones` 좌표·순서만 들어간다. 따라서 다른 도구는
형상 이름을 추론하지 않고 실제 좌표를 배열 geometry의 기준으로 사용해야 한다.
Experiment의 필수 `beamforming.algorithm` enum은 `das`, `das-phat`, `gcc-phat`다. backend와
raw map 계약은 다음과 같다.
docs/execution-plan.md
+17 -5
View File
@@ -37,13 +37,15 @@ CPU 기준 구현과 GPU 결과의 수치 오차가 합의된 허용 범위 안
때만 동일 스키마를 쓰는 별도 CLI를 추가한다. 이 방식은 초기 복잡도를 줄이면서 확장 경로를
남긴다.
두 앱의 책임은 다음과 같이 분리한다.
세 앱의 책임은 다음과 같이 분리한다.
- `array-builder`: aperture 크기와 사각/타원 생성 경계, 격자·선형·둘레·Fermat·seed random
프리셋, 마이크 직접 편집·채널 순서·보정 보존과 표준 Array JSON 내보내기
- `dataset-builder`: 음원 배치, gain/시간 구간/반복 설정, ambient mix, 이미지상의 위치 지정,
seed 고정, 합성 오디오와 ground truth manifest 내보내기
- `acoustic-camera`: manifest와 배열 JSON 읽기, 마이크 신호 전파 합성, steering vector 생성,
DAS 실행, overlay·수치 평가·실험 결과 내보내기
- `acoustics-core`: 두 앱이 공유하는 좌표계, 단위, 구면 감쇠·희소 multipath·마이크 응답,
- `acoustics-core`: 앱들이 공유하는 좌표계, 단위, 구면 감쇠·희소 multipath·마이크 응답,
STFT, 정답 rasterization, 지표, CPU reference와 실측 channel용 streaming localizer
- `webgpu-kernels`: steering/DAS 커널, buffer layout, 장치 한도 검사와 benchmark
@@ -52,7 +54,7 @@ CPU 기준 구현과 GPU 결과의 수치 오차가 합의된 허용 범위 안
JSON Schema를 먼저 고정하고 모든 길이는 m, 시간은 s, 주파수는 Hz, 좌표는 우수 좌표계로
명시한다.
- `array.schema.json`: schema version, 배열 폭·높이, 192개 마이크의 id와 `[x,y,z]`, 선택적
- `array.schema.json`: schema version, 배열 폭·높이, 1–1,024개 마이크의 id와 `[x,y,z]`, 선택적
감도·위상·주파수 응답 보정값
- `scene.schema.json`: 배경 이미지 크기와 실제 평면 변환, 음원별 위치·오디오 참조·시작/종료·
gain, ambient 참조, sample rate, seed, 선택적 자유음장·shoebox 환경
@@ -145,7 +147,7 @@ flattening이 모델 타당성을 훼손하는지 청취 및 spectrum 통계로
- 좌표계·단위·오디오 normalization 결정 기록
- synthetic single-tone scene과 192채널 기준 배열 작성
완료 조건: 예제 JSON이 schema validation을 통과하고 두 앱이 동일 manifest를 읽는다.
완료 조건: 예제 JSON이 schema validation을 통과하고 앱들이 동일 계약을 읽는다.
### 단계 1 — CPU 기준 모델 · 완료
@@ -164,6 +166,15 @@ flattening이 모델 타당성을 훼손하는지 청취 및 spectrum 통계로
완료 조건: 만든 scene을 다시 열었을 때 음원, 위치, 파형, 정답이 동일하다.
### 단계 2A — Array Builder · 완료
- aperture 크기와 사각/타원 생성 경계, 5종 결정론적 프리셋 구현
- canvas 추가·선택·drag, 정밀 좌표·ID·채널 순서 편집과 undo/redo
- 가져온 sensitivity·phase·frequency response 보존과 표준 Array JSON 왕복
- 좌표 중복 오류, 경계 초과 경고, clamp·중앙 정렬·aperture 맞춤
완료 조건: 만든 Array가 계약 검증을 통과하고 Acoustic Camera에서 그대로 불러와진다.
### 단계 3 — WebGPU DAS · 완료
- CPU와 동일한 buffer layout 및 WGSL kernel 구현
@@ -212,7 +223,8 @@ hardware deadline과 정확도는 장치 adapter가 정해진 뒤 별도 측정
## 10. 구현 결과와 다음 백로그
- [x] 설치 없는 ES module workspace와 두 앱 shell
- [x] 설치 없는 ES module workspace와 세 앱 shell
- [x] Array Builder 프리셋·직접 편집·검증·Camera 전달
- [x] array/scene/experiment/result schema와 synthetic fixture
- [x] 좌표·거리·구면 감쇠·분수 지연·STFT 단위 테스트
- [x] CPU DAS golden implementation
tests/integration/README.md
+4
View File
@@ -22,11 +22,15 @@ Unit과 integration test가 같은 페이지에서 실행됩니다. WebGPU 장
- `server.test.js`: 숨김 저장소 경로 차단, GET/HEAD 제한과 보안 response headers
- `builder-ui.test.js`: 파일 선택 한 번으로 오디오 음원 생성, 이미지·오디오 연결, canvas 편집,
trajectory keyframe 편집, Preview WAV/Scene 다운로드, SHA 재연결과 잘못된 import 보존
- `array-builder-ui.test.js`: 프리셋·직접 추가·좌표·보정·채널 편집, undo/redo,
중복 좌표 차단, 표준 Array JSON 저장·재가져오기와 390px layout
- `camera-ui.test.js`: Dedicated Worker CPU/WebGPU 실행, 취소, Result schema, rectangular/Fermat와
DAS/DAS-PHAT 비교, GCC-PHAT CPU·협대역 제약; 이동 예제 로드, 8×8 CPU·2 Hz live map의
Auto→CPU fallback 뒤 공통 analysis plan 재사용, 복수 frame, scrub, 재생 시간 증가와 일시정지
- `workflow-ui.test.js`: Dataset Builder의 Scene JSON과 원본 assets를 Acoustic Camera에 넘겨
Result JSON을 저장하는 end-to-end 흐름
- `split-layout-ui.test.js`: 세 앱 설정 패널의 drag·keyboard 폭 조절, 저장·reset과
좁은 화면 적층
WebGPU adapter가 없는 환경에서는 장치가 필요한 비교 항목을 건너뛰거나 Auto fallback을 검증하므로
CPU-only PASS도 가능합니다. 실제 장치의 scaling과 benchmark JSON 저장은
tests/integration/array-builder-ui.test.js
+421 -1
View File
@@ -1,4 +1,9 @@
import { validateArrayDefinition } from "/packages/contracts/validation.js";
import {
arrayPositionToCanvas,
fitArrayViewport,
} from "/apps/array-builder/canvas-view.js";
import { createArrayDefinition } from "/apps/array-builder/model.js";
function assertNear(actual, expected, tolerance, label) {
assert(
@@ -103,16 +108,116 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
documentObject.querySelector("#array-canvas").getBoundingClientRect().height >= 500,
"canvas dominates the desktop workspace",
);
assert(
!documentObject.querySelector("#canvas-instructions").classList.contains("is-hidden"),
"canvas guidance starts visible",
);
const canvas = documentObject.querySelector("#array-canvas");
const defaultArray = createArrayDefinition();
const initialCanvasRect = canvas.getBoundingClientRect();
const initialViewport = fitArrayViewport(
initialCanvasRect.width,
initialCanvasRect.height,
defaultArray,
);
const firstMicrophonePixel = arrayPositionToCanvas(
defaultArray.microphones[0].position,
initialViewport,
);
const initialFirstPosition = selectedCoordinates(documentObject);
const dragPointerId = 21;
const dispatchDragPointer = (type, offsetX, offsetY, buttons) => {
canvas.dispatchEvent(new windowObject.PointerEvent(type, {
bubbles: true,
cancelable: true,
pointerId: dragPointerId,
pointerType: "mouse",
isPrimary: true,
button: type === "pointermove" ? -1 : 0,
buttons,
clientX: initialCanvasRect.left + firstMicrophonePixel.x + offsetX,
clientY: initialCanvasRect.top + firstMicrophonePixel.y + offsetY,
}));
};
dispatchDragPointer("pointerdown", 0, 0, 1);
dispatchDragPointer("pointermove", 36, -24, 1);
dispatchDragPointer("pointerup", 36, -24, 0);
await nextPaint(windowObject);
const draggedPosition = selectedCoordinates(documentObject);
assert(
draggedPosition[0] !== initialFirstPosition[0] &&
draggedPosition[1] !== initialFirstPosition[1],
"pointer drag changes both array coordinates",
);
assert(
documentObject.querySelector("#canvas-instructions").classList.contains("is-hidden"),
"first canvas edit dismisses the guidance overlay",
);
documentObject.querySelector("#undo-button").click();
assertEqual(
selectedCoordinates(documentObject).join(","),
initialFirstPosition.join(","),
"one undo restores the whole drag",
);
dispatchDragPointer("pointerdown", 0, 0, 1);
dispatchDragPointer("pointermove", 28, -18, 1);
canvas.dispatchEvent(new windowObject.KeyboardEvent("keydown", {
bubbles: true,
cancelable: true,
key: "Escape",
}));
await nextPaint(windowObject);
assertEqual(
selectedCoordinates(documentObject).join(","),
initialFirstPosition.join(","),
"Escape cancels an in-progress drag",
);
const initialApertureWidth = documentObject.querySelector("#aperture-width").value;
dispatchValue(windowObject, documentObject.querySelector("#aperture-width"), 0);
assertEqual(
documentObject.querySelector("#aperture-width").value,
initialApertureWidth,
"rejected aperture input is restored to the active value",
);
assert(
documentObject.querySelector(".validation-card").classList.contains("is-invalid"),
"rejected action has an error visual state",
);
dispatchValue(windowObject, documentObject.querySelector("#preset-count"), "");
dispatchValue(windowObject, documentObject.querySelector("#preset-columns"), 3);
dispatchValue(windowObject, documentObject.querySelector("#preset-rows"), 2);
documentObject.querySelector("#generate-preset-button").click();
await waitFor(() => microphoneCount(documentObject) === 6, "3x2 grid generation");
assertEqual(
documentObject.querySelector("#preset-count").value,
"",
"hidden count does not block grid generation",
);
assertEqual(
microphoneButtons(documentObject).map((button) => button.dataset.microphoneId).join(","),
"mic-001,mic-002,mic-003,mic-004,mic-005,mic-006",
"grid keeps row-major physical channel IDs",
);
assertEqual(
microphoneButtons(documentObject).filter((button) => button.tabIndex === 0).length,
1,
"microphone list has one roving Tab stop",
);
microphoneButtons(documentObject)[0].focus();
microphoneButtons(documentObject)[0].dispatchEvent(new windowObject.KeyboardEvent("keydown", {
bubbles: true,
cancelable: true,
key: "ArrowDown",
}));
assertEqual(
documentObject.activeElement.dataset.microphoneId,
"mic-002",
"ArrowDown selects and focuses the next channel",
);
dispatchValue(windowObject, documentObject.querySelector("#aperture-shape"), "ellipse");
dispatchValue(windowObject, documentObject.querySelector("#preset-type"), "ring");
@@ -158,9 +263,14 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
"reference-channel",
"manual ID edit",
);
documentObject.querySelector("#move-microphone-up-button").click();
assertEqual(
microphoneButtons(documentObject).at(-2).dataset.microphoneId,
"reference-channel",
"channel forward button changes physical order",
);
const beforeNudge = selectedCoordinates(documentObject);
const canvas = documentObject.querySelector("#array-canvas");
canvas.focus();
canvas.dispatchEvent(new windowObject.KeyboardEvent("keydown", {
bubbles: true,
@@ -172,6 +282,80 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
assertNear(afterNudge[0], beforeNudge[0] + 0.005, 1e-9, "keyboard nudge uses snap step");
assertNear(afterNudge[1], beforeNudge[1], 1e-9, "keyboard nudge keeps y");
const touchCanvasRect = canvas.getBoundingClientRect();
const touchViewport = fitArrayViewport(
touchCanvasRect.width,
touchCanvasRect.height,
{
aperture: {
width: Number(documentObject.querySelector("#aperture-width").value),
height: Number(documentObject.querySelector("#aperture-height").value),
},
microphones: [{ id: "selected", position: afterNudge }],
},
);
const selectedTouchPixel = arrayPositionToCanvas(afterNudge, touchViewport);
const dispatchTouchDragPointer = (type, pointerId, offsetX, offsetY, buttons) =>
canvas.dispatchEvent(new windowObject.PointerEvent(type, {
bubbles: true,
cancelable: true,
pointerId,
pointerType: "touch",
isPrimary: true,
button: type === "pointermove" ? -1 : 0,
buttons,
clientX: touchCanvasRect.left + selectedTouchPixel.x + offsetX,
clientY: touchCanvasRect.top + selectedTouchPixel.y + offsetY,
}));
dispatchTouchDragPointer("pointerdown", 22, 0, 0, 1);
const microphoneTouchStart = new windowObject.Event("touchstart", {
bubbles: true,
cancelable: true,
});
Object.defineProperty(microphoneTouchStart, "changedTouches", {
value: [{
clientX: touchCanvasRect.left + selectedTouchPixel.x,
clientY: touchCanvasRect.top + selectedTouchPixel.y,
}],
});
canvas.dispatchEvent(microphoneTouchStart);
assert(microphoneTouchStart.defaultPrevented, "touch on a microphone reserves the drag gesture");
dispatchTouchDragPointer("pointermove", 22, 3, 2, 1);
dispatchTouchDragPointer("pointerup", 22, 3, 2, 0);
await nextPaint(windowObject);
assertEqual(
selectedCoordinates(documentObject).join(","),
afterNudge.join(","),
"touch jitter below the gesture threshold does not move a microphone",
);
const blankTouchStart = new windowObject.Event("touchstart", {
bubbles: true,
cancelable: true,
});
Object.defineProperty(blankTouchStart, "changedTouches", {
value: [{ clientX: touchCanvasRect.left + 3, clientY: touchCanvasRect.top + 3 }],
});
canvas.dispatchEvent(blankTouchStart);
assert(!blankTouchStart.defaultPrevented, "blank canvas touch remains available to page scroll");
dispatchTouchDragPointer("pointerdown", 23, 0, 0, 1);
dispatchTouchDragPointer("pointermove", 23, 24, -18, 1);
dispatchTouchDragPointer("pointerup", 23, 24, -18, 0);
await nextPaint(windowObject);
const touchDraggedPosition = selectedCoordinates(documentObject);
assert(
touchDraggedPosition[0] !== afterNudge[0] && touchDraggedPosition[1] !== afterNudge[1],
"touch movement beyond the threshold drags both coordinates",
);
documentObject.querySelector("#undo-button").click();
assertEqual(
selectedCoordinates(documentObject).join(","),
afterNudge.join(","),
"one undo restores the whole touch drag",
);
documentObject.querySelector("#add-tool-button").click();
const canvasRect = canvas.getBoundingClientRect();
canvas.dispatchEvent(new windowObject.PointerEvent("pointerdown", {
@@ -190,6 +374,44 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
documentObject.querySelector("#remove-microphone-button").click();
await waitFor(() => microphoneCount(documentObject) === 13, "manual delete");
documentObject.querySelector("#add-tool-button").click();
const dispatchTouchAddPointer = (type, pointerId, offsetX, offsetY, buttons) =>
canvas.dispatchEvent(new windowObject.PointerEvent(type, {
bubbles: true,
cancelable: true,
pointerId,
pointerType: "touch",
isPrimary: true,
button: type === "pointermove" ? -1 : 0,
buttons,
clientX: canvasRect.left + canvasRect.width * 0.7 + offsetX,
clientY: canvasRect.top + canvasRect.height * 0.35 + offsetY,
}));
assert(
dispatchTouchAddPointer("pointerdown", 32, 0, 0, 1),
"touch add pointerdown remains available to page scroll",
);
assertEqual(microphoneCount(documentObject), 13, "touch add waits for pointerup");
assert(
dispatchTouchAddPointer("pointermove", 32, 0, 12, 1),
"touch add scroll movement is not canceled",
);
dispatchTouchAddPointer("pointerup", 32, 0, 12, 0);
await nextPaint(windowObject);
assertEqual(microphoneCount(documentObject), 13, "touch scroll intent does not add a microphone");
dispatchTouchAddPointer("pointerdown", 33, 0, 0, 1);
assertEqual(microphoneCount(documentObject), 13, "touch tap still waits while pressed");
dispatchTouchAddPointer("pointermove", 33, 3, 2, 1);
assert(
!dispatchTouchAddPointer("pointerup", 33, 3, 2, 0),
"completed touch add tap prevents its synthetic click",
);
await waitFor(() => microphoneCount(documentObject) === 14, "touch canvas microphone add");
documentObject.querySelector("#select-tool-button").click();
documentObject.querySelector("#remove-microphone-button").click();
await waitFor(() => microphoneCount(documentObject) === 13, "touch-added microphone delete");
const firstButton = microphoneButtons(documentObject)[0];
const secondButton = microphoneButtons(documentObject)[1];
firstButton.click();
@@ -228,6 +450,20 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
assert(calibrated, "edited channel is exported");
assertEqual(calibrated.sensitivityDb, -2.5, "sensitivity is preserved");
assertEqual(calibrated.phaseOffsetDeg, 3.5, "phase is preserved");
assertEqual(
exported.microphones.indexOf(calibrated),
exported.microphones.length - 2,
"export keeps the edited physical channel order",
);
calibrated.frequencyResponse = [
{ frequencyHz: 100, gainDb: -2, phaseDeg: -4 },
{ frequencyHz: 1000, gainDb: 0.5, phaseDeg: 3 },
];
assertEqual(
(await validateArrayDefinition(exported)).length,
0,
"response-enhanced round trip fixture contract",
);
dispatchValue(windowObject, documentObject.querySelector("#array-name"), "Temporary name");
const exportedFile = new windowObject.File(
@@ -240,6 +476,27 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
() => documentObject.querySelector("#array-name").value === exported.name,
"Array round trip import",
);
assert(!documentObject.querySelector("#undo-button").disabled, "valid import is undoable");
documentObject.querySelector("#undo-button").click();
assertEqual(
documentObject.querySelector("#array-name").value,
"Temporary name",
"import undo restores the previous document",
);
assert(
documentObject.querySelector("#save-state").classList.contains("is-dirty"),
"document before imported baseline is dirty",
);
documentObject.querySelector("#redo-button").click();
assertEqual(
documentObject.querySelector("#array-name").value,
exported.name,
"import redo restores the loaded document",
);
assert(
!documentObject.querySelector("#save-state").classList.contains("is-dirty"),
"loaded baseline is clean after redo",
);
microphoneButtons(documentObject).find(
(button) => button.dataset.microphoneId === "reference-channel",
).click();
@@ -248,6 +505,62 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
-2.5,
"import keeps sensitivity",
);
assert(
documentObject.querySelector("#frequency-response-summary").textContent.includes("2개"),
"import exposes preserved frequency-response points",
);
const importedReferenceX = Number(documentObject.querySelector("#microphone-x").value);
dispatchValue(
windowObject,
documentObject.querySelector("#microphone-x"),
importedReferenceX + 0.001,
);
documentObject.querySelector("#export-button").click();
await waitFor(
() => downloads.filter((item) => item.fileName).length === 2,
"edited response Array export",
);
const editedExport = JSON.parse(
await downloads.filter((item) => item.fileName).at(-1).blob.text(),
);
assertEqual(
JSON.stringify(
editedExport.microphones.find(
(microphone) => microphone.id === "reference-channel",
).frequencyResponse,
),
JSON.stringify(calibrated.frequencyResponse),
"position edit preserves every frequency-response value",
);
const responseVariant = structuredClone(editedExport);
responseVariant.microphones.find(
(microphone) => microphone.id === "reference-channel",
).frequencyResponse[0].gainDb -= 1;
const responseVariantFile = new windowObject.File(
[JSON.stringify(responseVariant)],
"response-variant.array.json",
{ type: "application/json" },
);
dispatchFiles(
windowObject,
documentObject.querySelector("#array-input"),
[responseVariantFile],
);
await waitFor(
() => documentObject.querySelector("#save-state").textContent.includes("불러옴"),
"same-length response variant import",
);
documentObject.querySelector("#undo-button").click();
assert(
documentObject.querySelector("#save-state").classList.contains("is-dirty"),
"undo detects changed response values even when the point count is unchanged",
);
documentObject.querySelector("#redo-button").click();
assert(
!documentObject.querySelector("#save-state").classList.contains("is-dirty"),
"response variant baseline is clean after redo",
);
const countBeforeInvalidImport = microphoneCount(documentObject);
const invalidFile = new windowObject.File(
@@ -266,12 +579,109 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
"invalid import preserves current array",
);
const cameraFrame = document.createElement("iframe");
cameraFrame.src = "/apps/acoustic-camera/?integration-test=1&array-builder-handoff=1";
cameraFrame.style.cssText =
"position:fixed;left:-20000px;top:0;width:1400px;height:1000px;border:0";
document.body.append(cameraFrame);
await new Promise((resolve, reject) => {
cameraFrame.addEventListener("load", resolve, { once: true });
cameraFrame.addEventListener(
"error",
() => reject(new Error("Camera handoff iframe load failed")),
{ once: true },
);
});
const cameraWindow = cameraFrame.contentWindow;
const cameraDocument = cameraFrame.contentDocument;
const cameraDownloads = [];
const originalCameraCreate = cameraWindow.URL.createObjectURL.bind(cameraWindow.URL);
const originalCameraRevoke = cameraWindow.URL.revokeObjectURL.bind(cameraWindow.URL);
const originalCameraClick = cameraWindow.HTMLAnchorElement.prototype.click;
cameraWindow.URL.createObjectURL = (blob) => {
const url = "blob:array-camera-test-" + String(cameraDownloads.length + 1);
cameraDownloads.push({ blob, url, fileName: null });
return url;
};
cameraWindow.URL.revokeObjectURL = () => {};
cameraWindow.HTMLAnchorElement.prototype.click = function captureCameraDownload() {
const download = cameraDownloads.find((item) => item.url === this.href);
if (download) download.fileName = this.download;
};
try {
await waitFor(
() => cameraDocument.documentElement.dataset.appReady === "true",
"Camera handoff initialization",
);
const handoffFile = new cameraWindow.File(
[JSON.stringify(editedExport)],
"builder-handoff.array.json",
{ type: "application/json" },
);
dispatchFiles(cameraWindow, cameraDocument.querySelector("#array-input"), [handoffFile]);
await waitFor(
() => cameraDocument.querySelector("#array-preset").value === "custom" &&
cameraDocument.querySelector("#microphone-count").textContent.includes(
String(editedExport.microphones.length),
) &&
cameraDocument.documentElement.dataset.cameraValid === "true",
"Camera custom Array acceptance",
);
assertEqual(
cameraDocument.querySelector("#array-title").textContent,
editedExport.name,
"Camera shows the Builder array name",
);
cameraDocument.querySelector("#export-experiment-button").click();
await waitFor(
() => cameraDownloads.some((item) => item.fileName),
"Camera Experiment export after handoff",
);
const cameraExperiment = JSON.parse(
await cameraDownloads.find((item) => item.fileName).blob.text(),
);
assertEqual(
cameraExperiment.arrayId,
editedExport.id,
"Camera rebinds Experiment to the Builder Array ID",
);
} finally {
cameraWindow.URL.createObjectURL = originalCameraCreate;
cameraWindow.URL.revokeObjectURL = originalCameraRevoke;
cameraWindow.HTMLAnchorElement.prototype.click = originalCameraClick;
cameraFrame.remove();
}
frame.style.width = "390px";
await waitFor(
() => documentObject.querySelector("#array-builder-layout").dataset.splitPaneActive === "false",
"compact Array Builder layout",
);
await nextPaint(windowObject);
const compactWorkspace = documentObject.querySelector("#array-builder-workspace");
const compactControls = documentObject.querySelector("#array-builder-controls");
const compactWorkspaceRect = compactWorkspace.getBoundingClientRect();
const compactControlsRect = compactControls.getBoundingClientRect();
assert(
Boolean(
compactWorkspace.compareDocumentPosition(compactControls) &
windowObject.Node.DOCUMENT_POSITION_FOLLOWING,
),
"compact canvas workspace also precedes settings in DOM order",
);
assert(
compactWorkspaceRect.bottom <= compactControlsRect.top + 1,
"compact canvas workspace appears before the long settings form",
);
assert(
documentObject.querySelector(".array-metadata-section").getBoundingClientRect().top <
documentObject.querySelector(".aperture-section").getBoundingClientRect().top &&
documentObject.querySelector(".aperture-section").getBoundingClientRect().top <
documentObject.querySelector(".preset-section").getBoundingClientRect().top &&
documentObject.querySelector(".preset-section").getBoundingClientRect().top <
documentObject.querySelector(".microphone-section").getBoundingClientRect().top,
"compact controls keep the numbered source and visual order",
);
assert(
documentObject.documentElement.scrollWidth <=
documentObject.documentElement.clientWidth + 1,
@@ -281,6 +691,16 @@ test("Array Builder가 preset·직접 편집·검증·표준 JSON round trip을
documentObject.querySelector("#array-canvas").getBoundingClientRect().height >= 350,
"Array canvas remains usable at 390px",
);
assertEqual(
windowObject.getComputedStyle(documentObject.querySelector("#array-canvas")).touchAction,
"pan-y",
"mobile canvas permits vertical page scrolling",
);
assert(
windowObject.getComputedStyle(documentObject.querySelector("#mobile-export-button")).display
!== "none",
"compact settings end with a visible save action",
);
} finally {
windowObject.URL.createObjectURL = originalCreate;
windowObject.URL.revokeObjectURL = originalRevoke;
tests/integration/split-layout-ui.test.js
+7 -1
View File
@@ -51,6 +51,7 @@ const LAYOUT_CASES = [
defaultGridTracks: 2,
homePanelWidth: 360,
homeGridTracks: 1,
compactWorkspaceFirst: true,
},
];
@@ -444,7 +445,12 @@ async function exerciseSplitLayout(definition) {
const panelRect = mounted.panel.getBoundingClientRect();
const workspaceRect = mounted.workspace.getBoundingClientRect();
if (definition.panelSide === "start") {
if (definition.compactWorkspaceFirst) {
assert(
panelRect.top >= workspaceRect.bottom - 1,
definition.label + " compact workspace precedes the long settings panel",
);
} else if (definition.panelSide === "start") {
assert(
workspaceRect.top >= panelRect.bottom - 1,
definition.label + " compact workspace follows the panel vertically",
tests/unit/README.md
+5
View File
@@ -28,11 +28,16 @@ Unit과 integration module은 같은 browser runner에서 순서대로 실행됩
- `realtime-localizer.test.js`: 기존 CPU DAS와 bit-exact map 동등성, chunk 경계 독립성,
bounded ring/result batch, 취소와 geometry·steering cache 연산 절감
- `builder.test.js`: Builder scene model, source/asset·trajectory 조작, 오디오 크기와 WAV 사전 검증
- `array-builder.test.js`: Array 문서 모델, 격자·선형·둘레·Fermat·seed random 프리셋,
최소 간격, 직접 채널 편집, calibration 보존과 geometry 진단
- `array-builder-canvas.test.js`: 동일 축척 좌표 왕복, y-up 변환, pointer clamp, hit test,
1/2/5 grid와 keyboard nudge
- `evaluation.test.js`: local peak와 검출 감도, truth matching, energy/sidelobe/main-lobe 및 비확률적
beam-spread covariance ellipse
- `camera.test.js`: canonical input hash, workload 추정, 이동 timeline 계획·재생 보간, Result schema 검증
- `webgpu.test.js`: WGSL buffer packing, DAS-PHAT phase normalization, bin/point batching,
장치 한계와 typed CPU fallback 정책
- `split-pane.test.js`: 조절식 설정 패널의 포인터 좌표, 최소·최대 폭과 양쪽 배치
WebGPU unit test 대부분은 실제 GPU 없이 planner와 binary layout을 검증합니다. 실제 GPU 수치 일치는
integration test에서 adapter가 있을 때 수행합니다.
tests/unit/array-builder-canvas.test.js
+41
View File
@@ -86,6 +86,47 @@ test("Array canvas hit test는 반경 안의 가장 가까운 마이크와 채
assertEqual(hitTestMicrophone({ x: 0, y: 0 }, arrayDefinition.microphones, viewport, 2), null, "miss");
});
test("Array canvas hit test는 viewport 변환에서 overflow된 마이크를 건너뛴다", () => {
const viewport = {
plot: { x: 0, y: 0 },
xMin: 0,
yMax: 100,
scale: 2,
};
const microphones = [
{ id: "overflow", position: [Number.MAX_VALUE, 0, 0] },
{ id: "normal", position: [5, 5, 0] },
];
assertEqual(
arrayPositionToCanvas(microphones[0].position, viewport).x,
Infinity,
"fixture overflows after viewport conversion",
);
assertEqual(
hitTestMicrophone({ x: 10, y: 190 }, microphones, viewport, 2)?.id,
"normal",
"finite microphone remains hittable",
);
});
test("Array canvas fit은 극단적인 유한 좌표에서도 aperture fallback viewport를 유지한다", () => {
const arrayDefinition = fixture();
arrayDefinition.microphones[0].position = [-Number.MAX_VALUE, 0, 0];
arrayDefinition.microphones[1].position = [Number.MAX_VALUE, 0, 0];
const viewport = fitArrayViewport(800, 420, arrayDefinition);
for (const [name, value] of Object.entries({
scale: viewport.scale,
metersPerPixel: viewport.metersPerPixel,
xMin: viewport.xMin,
xMax: viewport.xMax,
yMin: viewport.yMin,
yMax: viewport.yMax,
})) {
assert(Number.isFinite(value), name + " remains finite");
}
assert(viewport.xMin < 0 && viewport.xMax > 0, "fallback keeps the aperture around the origin");
});
test("Array canvas grid와 keyboard nudge의 순수 helper가 1/2/5 및 y-up 규칙을 따른다", () => {
const candidates = [niceGridStep(0.008), niceGridStep(0.08), niceGridStep(0.8), niceGridStep(8)];
for (const step of candidates) {
tests/unit/array-builder.test.js
+80 -1
View File
@@ -2,6 +2,7 @@ import {
MAX_MICROPHONES,
addMicrophone,
arrayGeometryIssues,
arrayStatistics,
centerMicrophones,
clampPositionToAperture,
createArrayDefinition,
@@ -9,6 +10,7 @@ import {
generatePresetMicrophones,
inferApertureShape,
moveMicrophone,
nextMicrophoneId,
positionInsideAperture,
removeMicrophone,
replaceMicrophonesWithPreset,
@@ -110,6 +112,45 @@ test("seed random preset은 재현되고 최소 간격과 형상 경계를 지
}
});
test("1,024채널 random preset은 공간 index로 고유 좌표를 빠르게 생성한다", () => {
const startedAt = performance.now();
const microphones = generatePresetMicrophones({
type: "random",
aperture: { width: 0.45, height: 0.45 },
shape: "rectangle",
count: 1024,
seed: 20260828,
minimumSpacingM: 0.002,
});
const elapsedMs = performance.now() - startedAt;
assertEqual(microphones.length, 1024, "maximum random channel count");
assertEqual(
new Set(microphones.map((microphone) => microphone.position.join(","))).size,
1024,
"maximum random positions are unique",
);
assert(elapsedMs < 3000, "maximum random generation stays interactive: " + elapsedMs + " ms");
const failedAt = performance.now();
assertThrows(
() => generatePresetMicrophones({
type: "random",
aperture: { width: 0.45, height: 0.45 },
shape: "rectangle",
count: 1024,
seed: 7,
minimumSpacingM: 0.03,
}),
"배치할 수 없습니다",
"dense maximum random failure",
);
const failedElapsedMs = performance.now() - failedAt;
assert(
failedElapsedMs < 3000,
"impossible maximum random layout fails within a bound: " + failedElapsedMs + " ms",
);
});
test("불가능한 random 조건과 최대 채널 초과는 기존 배열을 보존한다", () => {
const arrayDefinition = createArrayDefinition();
const before = JSON.stringify(arrayDefinition.microphones);
@@ -185,7 +226,7 @@ test("좌표 clamp, 중심 정렬과 aperture 맞춤이 명시적으로 동작
assertNear(arrayDefinition.aperture.height, 0.021, 1e-12, "fitted height");
});
test("설명과 좌표에서 원형 생성 형상을 합리적으로 추론한다", () => {
test("문서의 명시적 형상 단서만으로 타원 생성 경계를 추론한다", () => {
const spiral = createArrayDefinition({
description: "Fermat spiral on circular aperture",
presetType: "spiral",
@@ -194,4 +235,42 @@ test("설명과 좌표에서 원형 생성 형상을 합리적으로 추론한
assertEqual(inferApertureShape(spiral), "ellipse", "description inference");
const grid = createArrayDefinition();
assertEqual(inferApertureShape(grid), "rectangle", "grid inference");
grid.description = "Spring-mounted rectangular array";
assertEqual(inferApertureShape(grid), "rectangle", "word boundary avoids spring false positive");
});
test("매우 큰 유한 좌표에서도 배열 중심 통계가 유한하게 유지된다", () => {
const arrayDefinition = createArrayDefinition({ columns: 2, rows: 1 });
arrayDefinition.microphones[0].position = [Number.MAX_VALUE, Number.MAX_VALUE, 0];
arrayDefinition.microphones[1].position = [Number.MAX_VALUE, -Number.MAX_VALUE, 0];
const statistics = arrayStatistics(arrayDefinition);
assert(Number.isFinite(statistics.centroid[0]), "large x centroid remains finite");
assert(Number.isFinite(statistics.centroid[1]), "large y centroid remains finite");
assertEqual(statistics.centroid[0], Number.MAX_VALUE, "large x centroid");
assertEqual(statistics.centroid[1], 0, "balanced y centroid");
});
test("큰 숫자 suffix ID도 마이크 추가를 멈추지 않고 정확히 증가시킨다", () => {
const arrayDefinition = createArrayDefinition({ columns: 1, rows: 1 });
arrayDefinition.microphones[0].id = "mic-9007199254740992";
assertEqual(
nextMicrophoneId(arrayDefinition),
"mic-9007199254740993",
"BigInt suffix increment",
);
assertEqual(
addMicrophone(arrayDefinition, [0.01, 0, 0]).id,
"mic-9007199254740993",
"manual add uses the safe ID",
);
});
test("고정밀 import 좌표는 실제 값이 다르면 중복으로 오인하지 않는다", () => {
const arrayDefinition = createArrayDefinition({ columns: 2, rows: 1 });
arrayDefinition.microphones[0].position = [0.0000000001, 0, 0];
arrayDefinition.microphones[1].position = [0.0000000002, 0, 0];
assert(
!arrayGeometryIssues(arrayDefinition).some((issue) => issue.severity === "error"),
"distinct high-precision positions",
);
});