feat(ts-editor): resize display support

4 days ago · 395e5efa54
parent faeb89fb42
commit 395e5efa54
3 changed files with 48 additions and 18 deletions
--- a/ts-editor/index.html
+++ b/ts-editor/index.html
@ -11,7 +11,6 @@
 </head>

 <body>
-
  <div id="topbar">
    <span class="app-name">MonoDisplay</span>
    <div class="tb-sep"></div>
@ -53,10 +52,13 @@
    <div class="tb-sep"></div>
    <button class="tb-btn" id="theme-toggle" onclick="cycleTheme()">⊙ auto</button>
  </div>
-
  <div id="main">
    <div id="left">
-      <span class="pv-label">preview · 120 × 60</span>
+      <span class="pv-label">preview · <select onchange="changeDisplayLayout()">
+          <option>120 × 60</option>
+          <option>120 × 40</option>
+        </select></span>
+      </span>
      <div id="display-box">
        <canvas id="canvas_root" width="120" height="60"></canvas>
      </div>
@ -88,7 +90,6 @@
        </div>
      </div>
    </div>
-
    <div id="right">
      <div id="right-hdr">
        <span class="rh-title">sections</span>
@ -104,15 +105,12 @@
      </div>
    </div>
  </div>
-
-  <!-- confirm dialog -->
  <div id="confirm-overlay">
    <div id="confirm-box">
      <div id="confirm-msg"></div>
      <div id="confirm-btns"></div>
    </div>
  </div>
-
  <script src="./public/mono-display.js"></script>
 </body>

--- a/ts-editor/src/browser.ts
+++ b/ts-editor/src/browser.ts
@ -26,7 +26,7 @@ import {
 } from "libmonoformat";


-const W = 120, H = 60;
+let W = 120, H = 60;

 // --- State -------------------------------------------------------------------
 let file: MonoDisplayFile = new MonoDisplayFile([]);
@ -185,6 +185,14 @@ async function guardDirty(): Promise<boolean> {
  );
 }

+function changeDisplayLayout() {
+  const sel = document.querySelector('.pv-label select') as HTMLSelectElement;
+  const [w, h] = sel.value.split('×').map(s => parseInt(s.trim()));
+  W = w as number;
+  H = h as number;
+  ((window as any)._mdDriver as MonoDisplayDriver).setSize(W, H);
+}
+
 // --- Helpers -----------------------------------------------------------------
 function newSec(): MonoFormatElementsAlways {
  return {
@ -425,7 +433,8 @@ function triggerPreview() {
 function buildPreview() {
  if (!(window as any)._mdDriver)
    (window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 });
-  (window as any)._mdDriver.load(() => Promise.resolve(file.toBuffer()));
+  ((window as any)._mdDriver as MonoDisplayDriver).load(() => Promise.resolve(file.toBuffer()));
+  ((window as any)._mdDriver as MonoDisplayDriver).setSize(W, H);
 }

 // --- Load / Export -----------------------------------------------------------
@ -933,7 +942,7 @@ async function clearAll() {
 }

 // Expose globals referenced by topbar inline handlers
-Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme });
+Object.assign(window, { loadBin, exportBin, addSection, clearAll, cycleTheme, changeDisplayLayout });

 // window.addEventListener("beforeunload", (e) => {
 //   if (isDirty) e.preventDefault();
--- a/ts-editor/style.css
+++ b/ts-editor/style.css
@ -11,7 +11,7 @@
  --bg-input: #0a0a0a;
  --bg-canvas: #000;
  --bg-xhover: #1e1010;
-  --bg-overlay: rgba(0,0,0,.6);
+  --bg-overlay: rgba(0, 0, 0, .6);
  --bd: #2a2a2a;
  --bd-inner: #1e1e1e;
  --bd-deep: #1c1c1c;
@ -49,7 +49,7 @@
    --bg-input: #fff;
    --bg-canvas: #fff;
    --bg-xhover: #ffe8e8;
-    --bg-overlay: rgba(0,0,0,.4);
+    --bg-overlay: rgba(0, 0, 0, .4);
    --bd: #d0d0d0;
    --bd-inner: #ddd;
    --bd-deep: #e0e0e0;
@ -87,7 +87,7 @@
  --bg-input: #fff;
  --bg-canvas: #fff;
  --bg-xhover: #ffe8e8;
-  --bg-overlay: rgba(0,0,0,.4);
+  --bg-overlay: rgba(0, 0, 0, .4);
  --bd: #d0d0d0;
  --bd-inner: #ddd;
  --bd-deep: #e0e0e0;
@ -252,7 +252,8 @@ body {
  gap: 5px;
  margin-top: 6px
 }
-#demo-btns > div {
+
+#demo-btns>div {
  display: contents;
 }

@ -263,17 +264,20 @@ canvas.pixel-editor {
  max-width: 100%;
  border: 1px solid var(--bd-inner);
 }
+
 .anim-editor {
  display: flex;
  flex-direction: column;
  gap: 4px;
 }
+
 .anim-frame-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
 }
+
 .anim-frame-tab {
  display: flex;
  align-items: center;
@ -285,10 +289,12 @@ canvas.pixel-editor {
  font-size: 11px;
  user-select: none;
 }
+
 .anim-frame-tab.active {
  border-color: var(--accent, #EC0);
  color: var(--accent, #EC0);
 }
+
 .x-btn-sm {
  background: none;
  border: none;
@ -299,7 +305,10 @@ canvas.pixel-editor {
  line-height: 1;
  opacity: 0.6;
 }
-.x-btn-sm:hover { opacity: 1; }
+
+.x-btn-sm:hover {
+  opacity: 1;
+}

 #sec-meta {
  background: var(--bg-sunken);
@ -681,10 +690,24 @@ select.meta-val {
  background: var(--bg-active)
 }

-#mob-add-section { display: none; }
+#mob-add-section {
+  display: none;
+}

 canvas.pixel-editor {
-  touch-action: none;   /* belt-and-suspenders alongside preventDefault */
+  touch-action: none;
+  /* belt-and-suspenders alongside preventDefault */
  -webkit-user-select: none;
  user-select: none;
 }
+
+.pv-label select {
+  background: var(--bg-input);
+  color: var(--ac);
+  border: 1px solid var(--bd-inner);
+  border-radius: 3px;
+  padding: 1px 14px;
+  font-family: monospace;
+  font-size: 10px;
+  letter-spacing: .1em;
+}