CTT
/
libmonoformat
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ts-editor): resize display support

Browse Source
main
flop 4 days ago
parent faeb89fb42
commit 395e5efa54
3 changed files with 48 additions and 18 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      ts-editor/index.html
  2. 15
      ts-editor/src/browser.ts
  3. 39
      ts-editor/style.css

12
ts-editor/index.html
Unescape View File

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

15
ts-editor/src/browser.ts
Unescape View File

@ -26,7 +26,7 @@ import {
} from "libmonoformat"; } from "libmonoformat";
const W = 120, H = 60; let W = 120, H = 60;
// --- State ------------------------------------------------------------------- // --- State -------------------------------------------------------------------
let file: MonoDisplayFile = new MonoDisplayFile([]); 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 ----------------------------------------------------------------- // --- Helpers -----------------------------------------------------------------
function newSec(): MonoFormatElementsAlways { function newSec(): MonoFormatElementsAlways {
return { return {
@ -425,7 +433,8 @@ function triggerPreview() {
function buildPreview() { function buildPreview() {
if (!(window as any)._mdDriver) if (!(window as any)._mdDriver)
(window as any)._mdDriver = new MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 }); (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 ----------------------------------------------------------- // --- Load / Export -----------------------------------------------------------
@ -933,7 +942,7 @@ async function clearAll() {
} }
// Expose globals referenced by topbar inline handlers // 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) => { // window.addEventListener("beforeunload", (e) => {
// if (isDirty) e.preventDefault(); // if (isDirty) e.preventDefault();

39
ts-editor/style.css
Unescape View File

@ -11,7 +11,7 @@
--bg-input: #0a0a0a; --bg-input: #0a0a0a;
--bg-canvas: #000; --bg-canvas: #000;
--bg-xhover: #1e1010; --bg-xhover: #1e1010;
--bg-overlay: rgba(0,0,0,.6); --bg-overlay: rgba(0, 0, 0, .6);
--bd: #2a2a2a; --bd: #2a2a2a;
--bd-inner: #1e1e1e; --bd-inner: #1e1e1e;
--bd-deep: #1c1c1c; --bd-deep: #1c1c1c;
@ -49,7 +49,7 @@
--bg-input: #fff; --bg-input: #fff;
--bg-canvas: #fff; --bg-canvas: #fff;
--bg-xhover: #ffe8e8; --bg-xhover: #ffe8e8;
--bg-overlay: rgba(0,0,0,.4); --bg-overlay: rgba(0, 0, 0, .4);
--bd: #d0d0d0; --bd: #d0d0d0;
--bd-inner: #ddd; --bd-inner: #ddd;
--bd-deep: #e0e0e0; --bd-deep: #e0e0e0;
@ -87,7 +87,7 @@
--bg-input: #fff; --bg-input: #fff;
--bg-canvas: #fff; --bg-canvas: #fff;
--bg-xhover: #ffe8e8; --bg-xhover: #ffe8e8;
--bg-overlay: rgba(0,0,0,.4); --bg-overlay: rgba(0, 0, 0, .4);
--bd: #d0d0d0; --bd: #d0d0d0;
--bd-inner: #ddd; --bd-inner: #ddd;
--bd-deep: #e0e0e0; --bd-deep: #e0e0e0;
@ -252,7 +252,8 @@ body {
gap: 5px; gap: 5px;
margin-top: 6px margin-top: 6px
} }
#demo-btns > div {
#demo-btns>div {
display: contents; display: contents;
} }
@ -263,17 +264,20 @@ canvas.pixel-editor {
max-width: 100%; max-width: 100%;
border: 1px solid var(--bd-inner); border: 1px solid var(--bd-inner);
} }
.anim-editor { .anim-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
.anim-frame-tabs { .anim-frame-tabs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 3px; gap: 3px;
align-items: center; align-items: center;
} }
.anim-frame-tab { .anim-frame-tab {
display: flex; display: flex;
align-items: center; align-items: center;
@ -285,10 +289,12 @@ canvas.pixel-editor {
font-size: 11px; font-size: 11px;
user-select: none; user-select: none;
} }
.anim-frame-tab.active { .anim-frame-tab.active {
border-color: var(--accent, #EC0); border-color: var(--accent, #EC0);
color: var(--accent, #EC0); color: var(--accent, #EC0);
} }
.x-btn-sm { .x-btn-sm {
background: none; background: none;
border: none; border: none;
@ -299,7 +305,10 @@ canvas.pixel-editor {
line-height: 1; line-height: 1;
opacity: 0.6; opacity: 0.6;
} }
.x-btn-sm:hover { opacity: 1; }
.x-btn-sm:hover {
opacity: 1;
}
#sec-meta { #sec-meta {
background: var(--bg-sunken); background: var(--bg-sunken);
@ -681,10 +690,24 @@ select.meta-val {
background: var(--bg-active) background: var(--bg-active)
} }
#mob-add-section { display: none; } #mob-add-section {
display: none;
}
canvas.pixel-editor { canvas.pixel-editor {
touch-action: none; /* belt-and-suspenders alongside preventDefault */ touch-action: none;
/* belt-and-suspenders alongside preventDefault */
-webkit-user-select: none; -webkit-user-select: none;
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;
}

Write Preview
Loading…
Cancel
Save