feat: make app workspaces resizable
This commit is contained in:
@@ -36,8 +36,8 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="builder-layout">
|
||||
<section class="scene-workspace" aria-label="장면 편집 화면">
|
||||
<main class="builder-layout" id="builder-layout" data-split-layout>
|
||||
<section class="scene-workspace" id="builder-workspace" aria-label="장면 편집 화면">
|
||||
<div class="workspace-heading">
|
||||
<div>
|
||||
<p class="eyebrow">01 · 입력과 배치</p>
|
||||
@@ -97,7 +97,20 @@
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside class="control-panel" aria-label="장면 파라미터">
|
||||
<div
|
||||
class="split-handle"
|
||||
id="builder-split-handle"
|
||||
role="separator"
|
||||
tabindex="0"
|
||||
aria-label="장면 설정 패널 너비 조절"
|
||||
aria-controls="builder-controls"
|
||||
aria-orientation="vertical"
|
||||
data-split-resizer
|
||||
data-storage-key="micarrsim.builder.control-panel-width"
|
||||
title="드래그하거나 방향키로 너비 조절 · Enter/더블클릭으로 초기화"
|
||||
></div>
|
||||
|
||||
<aside class="control-panel" id="builder-controls" data-split-panel aria-label="장면 파라미터">
|
||||
<div class="runtime-line">
|
||||
<span class="status-chip status-chip--neutral" data-runtime-status>런타임 확인 중…</span>
|
||||
<span class="save-state" id="save-state">기본 장면</span>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { encodeMonoPcm16Wav } from "/packages/acoustics-core/wav.js";
|
||||
import { decodeAudioFile, MAX_DECODED_AUDIO_BYTES } from "/packages/audio-io/browser-audio.js";
|
||||
import { downloadBlob, downloadJson, readJsonFile, sha256File } from "/packages/contracts/io.js";
|
||||
import { validateScene } from "/packages/contracts/validation.js";
|
||||
import { createSplitPane } from "/packages/ui/split-pane.js";
|
||||
import { createAudioRuntime } from "./audio-runtime.js";
|
||||
import { createSceneCanvas } from "./canvas-view.js";
|
||||
import {
|
||||
@@ -51,6 +52,19 @@ const elements = Object.fromEntries(
|
||||
);
|
||||
elements.validationCard = document.querySelector(".validation-card");
|
||||
|
||||
const layoutSplitPane = createSplitPane({
|
||||
container: byId("builder-layout"),
|
||||
separator: byId("builder-split-handle"),
|
||||
panel: byId("builder-controls"),
|
||||
panelSide: "end",
|
||||
storageKey: "micarrsim.builder.control-panel-width",
|
||||
defaultSize: 430,
|
||||
minSize: 360,
|
||||
maxSize: 720,
|
||||
minMainSize: 560,
|
||||
enabledMediaQuery: "(min-width: 1101px)",
|
||||
});
|
||||
|
||||
const state = {
|
||||
scene: null,
|
||||
selectedSourceId: null,
|
||||
@@ -173,12 +187,14 @@ function renderSourceCards() {
|
||||
dot.className = "source-card__dot";
|
||||
const name = document.createElement("strong");
|
||||
name.textContent = source.name;
|
||||
name.title = source.name;
|
||||
heading.append(dot, name);
|
||||
const signal = document.createElement("small");
|
||||
signal.textContent = describeSignal(source.signal);
|
||||
const position = document.createElement("small");
|
||||
const motion = Array.isArray(source.trajectory) ? ` · 이동 ${source.trajectory.length}점` : "";
|
||||
position.textContent = `x ${source.position[0].toFixed(2)} · y ${source.position[1].toFixed(2)} · z ${source.position[2].toFixed(2)} m${motion}`;
|
||||
button.title = [source.name, signal.textContent, position.textContent].join("\n");
|
||||
button.append(heading, signal, position);
|
||||
button.addEventListener("click", () => {
|
||||
state.selectedSourceId = source.id;
|
||||
@@ -369,7 +385,6 @@ function renderAssetList() {
|
||||
const label = document.createElement("span");
|
||||
label.className = "asset-chip__label";
|
||||
label.textContent = `${asset.kind} · ${asset.fileName}`;
|
||||
label.title = `${asset.id}${asset.sha256 ? ` · ${asset.sha256}` : ""}`;
|
||||
const availability = document.createElement("span");
|
||||
availability.className = "asset-chip__state";
|
||||
availability.textContent = state.assetErrors.has(asset.id)
|
||||
@@ -384,6 +399,7 @@ function renderAssetList() {
|
||||
remove.disabled = referenced;
|
||||
remove.title = referenced ? "먼저 이 asset을 사용하는 image/source/ambient를 변경하세요." : `${asset.fileName} 제거`;
|
||||
remove.addEventListener("click", () => removeAsset(asset.id));
|
||||
label.title = [asset.fileName, asset.id, asset.sha256].filter(Boolean).join(" · ");
|
||||
chip.append(label, availability, remove);
|
||||
list.append(chip);
|
||||
}
|
||||
@@ -1048,6 +1064,7 @@ window.addEventListener("beforeunload", (event) => {
|
||||
window.addEventListener("unload", () => {
|
||||
if (state.imageUrl) URL.revokeObjectURL(state.imageUrl);
|
||||
audioRuntime.dispose();
|
||||
layoutSplitPane.destroy();
|
||||
});
|
||||
|
||||
initialize().catch((error) => {
|
||||
|
||||
@@ -79,8 +79,10 @@
|
||||
}
|
||||
|
||||
.builder-layout {
|
||||
--control-panel-width: 430px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
|
||||
grid-template-columns: minmax(0, 1fr) 12px var(--control-panel-width);
|
||||
min-height: calc(100vh - 65px);
|
||||
}
|
||||
|
||||
@@ -230,6 +232,7 @@
|
||||
|
||||
.source-card__heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -244,14 +247,15 @@
|
||||
}
|
||||
|
||||
.source-card strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.source-card small {
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font: 600 0.72rem ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.asset-shelf {
|
||||
@@ -282,16 +286,15 @@
|
||||
max-width: 100%;
|
||||
padding: 8px 9px 8px 11px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
border-radius: 13px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.asset-chip__label {
|
||||
overflow: hidden;
|
||||
max-width: 210px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
max-width: min(320px, 50vw);
|
||||
font-size: 0.74rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.asset-chip__state {
|
||||
@@ -320,6 +323,7 @@
|
||||
.control-panel {
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
min-width: 0;
|
||||
align-self: start;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 65px);
|
||||
@@ -327,6 +331,15 @@
|
||||
border-left: 1px solid var(--line);
|
||||
background: rgb(12 24 21 / 86%);
|
||||
backdrop-filter: blur(18px);
|
||||
container-name: builder-controls;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.builder-layout > .split-handle {
|
||||
position: sticky;
|
||||
top: 59px;
|
||||
height: calc(100vh - 59px);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.runtime-line {
|
||||
@@ -335,8 +348,10 @@
|
||||
}
|
||||
|
||||
.save-state {
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.7rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.control-section,
|
||||
@@ -538,6 +553,10 @@
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.validation-card > :last-child {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.validation-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@@ -550,6 +569,7 @@
|
||||
|
||||
.validation-card strong {
|
||||
font-size: 0.82rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.validation-card p {
|
||||
@@ -557,6 +577,7 @@
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.validation-card.is-valid .validation-dot {
|
||||
@@ -571,7 +592,11 @@
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.builder-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.builder-layout > .split-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
@@ -729,7 +754,6 @@
|
||||
}
|
||||
|
||||
.builder-layout {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
|
||||
min-height: calc(100vh - 59px);
|
||||
}
|
||||
|
||||
@@ -871,8 +895,19 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.builder-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.builder-layout > .split-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
position: static;
|
||||
max-height: none;
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1003,3 +1038,50 @@
|
||||
grid-column: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@container builder-controls (max-width: 440px) {
|
||||
.field-grid--three {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.trajectory-row {
|
||||
grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 30px;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
}
|
||||
|
||||
.trajectory-row__select,
|
||||
.trajectory-row__remove {
|
||||
grid-row: 1 / 3;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.trajectory-row .field:nth-of-type(1) {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.trajectory-row .field:nth-of-type(2) {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.trajectory-row .field:nth-of-type(3) {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.trajectory-row .field:nth-of-type(4) {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.trajectory-row__remove {
|
||||
grid-column: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@container builder-controls (max-width: 340px) {
|
||||
.field-grid--three {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user