From c0bde58ac456446cb1a49600007f153d323b1d20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Sun, 29 Aug 2021 23:56:46 +0200 Subject: [PATCH] Add mouse click events for web displays --- TODO.md | 2 +- config/fmt.flags | 1 + demo.ts | 5 ++++ mod.ts | 16 +++++++------ web-demo/demo.js | 5 ++++ web-demo/pre.html | 14 ----------- web.ts | 61 +++++++---------------------------------------- 7 files changed, 30 insertions(+), 74 deletions(-) create mode 100644 config/fmt.flags delete mode 100644 web-demo/pre.html diff --git a/TODO.md b/TODO.md index 85f2b48..9d295e5 100644 --- a/TODO.md +++ b/TODO.md @@ -1,6 +1,6 @@ # TODO -- Add click events +- Add click events for ansi display - Fix resizing on web_div display - Prevent ctrl+c on web display - Optimize drawing to display, by allowing sequences of characters with the same diff --git a/config/fmt.flags b/config/fmt.flags new file mode 100644 index 0000000..02b3a6a --- /dev/null +++ b/config/fmt.flags @@ -0,0 +1 @@ +--ignore=web-demo/textui.js \ No newline at end of file diff --git a/demo.ts b/demo.ts index 416bbea..f1e1369 100755 --- a/demo.ts +++ b/demo.ts @@ -17,6 +17,11 @@ const config: Partial = { ui.drawing.color(1, 0).text(key, { x, y: 7 }); x += key.length + 1; }, + onMouseClick: (loc) => { + const text = `${loc.x}:${loc.y}`; + ui.drawing.color(1, 0).text(text, { x, y: 7 }); + x += text.length + 1; + }, }; const ui = new TextUI(display, config); await ui.init(); diff --git a/mod.ts b/mod.ts index 8e67a47..caf3d1d 100644 --- a/mod.ts +++ b/mod.ts @@ -2,18 +2,13 @@ import { AnsiTerminalDisplay } from "./ansi.ts"; import { UIConfig } from "./config.ts"; import { Display } from "./display.ts"; import { TextUI } from "./ui.ts"; -import { - CanvasTerminalDisplay, - DivTerminalDisplay, - PreTerminalDisplay, -} from "./web.ts"; +import { CanvasTerminalDisplay, DivTerminalDisplay } from "./web.ts"; export { TextUI }; export const UI_DISPLAY_TYPES = { autodetect: undefined, ansi: AnsiTerminalDisplay, - web_pre: PreTerminalDisplay, web_div: DivTerminalDisplay, web_canvas: CanvasTerminalDisplay, dummy: Display, @@ -26,8 +21,15 @@ export async function createTextUI( if (display_type == "autodetect") { if (typeof (window as any).document != "undefined") { display_type = "web_canvas"; - } else { + // TODO if canvas is not available, fall back to div + } else if (typeof (Deno as any) != "undefined") { display_type = "ansi"; + } else { + const message = "Cannot initialize display"; + if (typeof alert == "function") { + alert(message); + } + throw new Error(message); } } diff --git a/web-demo/demo.js b/web-demo/demo.js index a64bd55..7edd325 100644 --- a/web-demo/demo.js +++ b/web-demo/demo.js @@ -14,6 +14,11 @@ export async function demo(display_type) { ui.drawing.color(1, 0).text(key, { x, y: 7 }); x += key.length + 1; }, + onMouseClick: (loc) => { + const text = `${loc.x}:${loc.y}`; + ui.drawing.color(1, 0).text(text, { x, y: 7 }); + x += text.length + 1; + }, }, display_type); function draw() { ui.drawing.color(2, 0).text("hello", { x: 10, y: 3 }); diff --git a/web-demo/pre.html b/web-demo/pre.html deleted file mode 100644 index d213161..0000000 --- a/web-demo/pre.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/web.ts b/web.ts index ad43bf9..a41eba2 100644 --- a/web.ts +++ b/web.ts @@ -59,10 +59,6 @@ class WebDisplay extends Display { async setChar(at: BufferLocation, char: Char): Promise { } - async getKeyStrokes(): Promise { - return []; - } - // // Get the size in pixels of the target area // @@ -134,43 +130,6 @@ class WebDisplay extends Display { } } -// -// Basic terminal display using a single "pre" tag -// -export class PreTerminalDisplay extends WebDisplay { - element: any; - - override async init(): Promise { - await super.init(); - - if (!this.element) { - this.element = this.document.createElement("pre"); - this.parent.appendChild(this.element); - } - - const { w, h } = this.size; - const line = Array(w).fill(" ").join(""); - this.element.textContent = Array(h).fill(line).join("\n"); - } - - override async uninit(): Promise { - if (this.element) { - this.parent.removeChild(this.element); - this.element = null; - } - - await super.uninit(); - } - - override async setChar(at: BufferLocation, char: Char): Promise { - const { w, h } = this.size; - const offset = at.y * (w + 1) + at.x; - const text = this.element.textContent; - this.element.textContent = text.slice(0, offset) + char.ch + - text.slice(offset + 1); - } -} - // // Terminal display using one div per char // @@ -232,11 +191,9 @@ export class DivTerminalDisplay extends WebDisplay { div.style.overflow = "hidden"; this.parent.appendChild(div); divs.push(div); - /*div.addEventListener("click", () => { - if (this.onclick) { - this.onclick({ x, y }); - } - });*/ + div.addEventListener("click", () => { + this.pushEvent({ click: { x, y } }); + }); } } @@ -262,14 +219,14 @@ export class CanvasTerminalDisplay extends WebDisplay { this.compose = new Canvas(this.document, undefined); this.present = new Canvas(this.document, this.parent); - /*this.present.element.addEventListener("click", (ev) => { - if (this.onclick) { - this.onclick({ + this.present.element.addEventListener("click", (ev: any) => { + this.pushEvent({ + click: { x: Math.round((ev.offsetX * this.ratio) / this.char_size.x), y: Math.round((ev.offsetY * this.ratio) / this.char_size.y), - }); - } - });*/ + }, + }); + }); } override getTargetSize(): { x: number; y: number } {