Add mouse click events for web displays
This commit is contained in:
parent
204d29a69e
commit
c0bde58ac4
2
TODO.md
2
TODO.md
|
@ -1,6 +1,6 @@
|
||||||
# TODO
|
# TODO
|
||||||
|
|
||||||
- Add click events
|
- Add click events for ansi display
|
||||||
- Fix resizing on web_div display
|
- Fix resizing on web_div display
|
||||||
- Prevent ctrl+c on web display
|
- Prevent ctrl+c on web display
|
||||||
- Optimize drawing to display, by allowing sequences of characters with the same
|
- Optimize drawing to display, by allowing sequences of characters with the same
|
||||||
|
|
1
config/fmt.flags
Normal file
1
config/fmt.flags
Normal file
|
@ -0,0 +1 @@
|
||||||
|
--ignore=web-demo/textui.js
|
5
demo.ts
5
demo.ts
|
@ -17,6 +17,11 @@ const config: Partial<UIConfig> = {
|
||||||
ui.drawing.color(1, 0).text(key, { x, y: 7 });
|
ui.drawing.color(1, 0).text(key, { x, y: 7 });
|
||||||
x += key.length + 1;
|
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);
|
const ui = new TextUI(display, config);
|
||||||
await ui.init();
|
await ui.init();
|
||||||
|
|
16
mod.ts
16
mod.ts
|
@ -2,18 +2,13 @@ import { AnsiTerminalDisplay } from "./ansi.ts";
|
||||||
import { UIConfig } from "./config.ts";
|
import { UIConfig } from "./config.ts";
|
||||||
import { Display } from "./display.ts";
|
import { Display } from "./display.ts";
|
||||||
import { TextUI } from "./ui.ts";
|
import { TextUI } from "./ui.ts";
|
||||||
import {
|
import { CanvasTerminalDisplay, DivTerminalDisplay } from "./web.ts";
|
||||||
CanvasTerminalDisplay,
|
|
||||||
DivTerminalDisplay,
|
|
||||||
PreTerminalDisplay,
|
|
||||||
} from "./web.ts";
|
|
||||||
|
|
||||||
export { TextUI };
|
export { TextUI };
|
||||||
|
|
||||||
export const UI_DISPLAY_TYPES = {
|
export const UI_DISPLAY_TYPES = {
|
||||||
autodetect: undefined,
|
autodetect: undefined,
|
||||||
ansi: AnsiTerminalDisplay,
|
ansi: AnsiTerminalDisplay,
|
||||||
web_pre: PreTerminalDisplay,
|
|
||||||
web_div: DivTerminalDisplay,
|
web_div: DivTerminalDisplay,
|
||||||
web_canvas: CanvasTerminalDisplay,
|
web_canvas: CanvasTerminalDisplay,
|
||||||
dummy: Display,
|
dummy: Display,
|
||||||
|
@ -26,8 +21,15 @@ export async function createTextUI(
|
||||||
if (display_type == "autodetect") {
|
if (display_type == "autodetect") {
|
||||||
if (typeof (window as any).document != "undefined") {
|
if (typeof (window as any).document != "undefined") {
|
||||||
display_type = "web_canvas";
|
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";
|
display_type = "ansi";
|
||||||
|
} else {
|
||||||
|
const message = "Cannot initialize display";
|
||||||
|
if (typeof alert == "function") {
|
||||||
|
alert(message);
|
||||||
|
}
|
||||||
|
throw new Error(message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,11 @@ export async function demo(display_type) {
|
||||||
ui.drawing.color(1, 0).text(key, { x, y: 7 });
|
ui.drawing.color(1, 0).text(key, { x, y: 7 });
|
||||||
x += key.length + 1;
|
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);
|
}, display_type);
|
||||||
function draw() {
|
function draw() {
|
||||||
ui.drawing.color(2, 0).text("hello", { x: 10, y: 3 });
|
ui.drawing.color(2, 0).text("hello", { x: 10, y: 3 });
|
||||||
|
|
|
@ -1,14 +0,0 @@
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" href="demo.css">
|
|
||||||
<script type="module">
|
|
||||||
import { demo } from "./demo.js";
|
|
||||||
demo("web_pre");
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body></body>
|
|
||||||
|
|
||||||
</html>
|
|
61
web.ts
61
web.ts
|
@ -59,10 +59,6 @@ class WebDisplay extends Display {
|
||||||
async setChar(at: BufferLocation, char: Char): Promise<void> {
|
async setChar(at: BufferLocation, char: Char): Promise<void> {
|
||||||
}
|
}
|
||||||
|
|
||||||
async getKeyStrokes(): Promise<string[]> {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Get the size in pixels of the target area
|
// 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<void> {
|
|
||||||
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<void> {
|
|
||||||
if (this.element) {
|
|
||||||
this.parent.removeChild(this.element);
|
|
||||||
this.element = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
await super.uninit();
|
|
||||||
}
|
|
||||||
|
|
||||||
override async setChar(at: BufferLocation, char: Char): Promise<void> {
|
|
||||||
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
|
// Terminal display using one div per char
|
||||||
//
|
//
|
||||||
|
@ -232,11 +191,9 @@ export class DivTerminalDisplay extends WebDisplay {
|
||||||
div.style.overflow = "hidden";
|
div.style.overflow = "hidden";
|
||||||
this.parent.appendChild(div);
|
this.parent.appendChild(div);
|
||||||
divs.push(div);
|
divs.push(div);
|
||||||
/*div.addEventListener("click", () => {
|
div.addEventListener("click", () => {
|
||||||
if (this.onclick) {
|
this.pushEvent({ click: { x, y } });
|
||||||
this.onclick({ x, y });
|
});
|
||||||
}
|
|
||||||
});*/
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -262,14 +219,14 @@ export class CanvasTerminalDisplay extends WebDisplay {
|
||||||
this.compose = new Canvas(this.document, undefined);
|
this.compose = new Canvas(this.document, undefined);
|
||||||
this.present = new Canvas(this.document, this.parent);
|
this.present = new Canvas(this.document, this.parent);
|
||||||
|
|
||||||
/*this.present.element.addEventListener("click", (ev) => {
|
this.present.element.addEventListener("click", (ev: any) => {
|
||||||
if (this.onclick) {
|
this.pushEvent({
|
||||||
this.onclick({
|
click: {
|
||||||
x: Math.round((ev.offsetX * this.ratio) / this.char_size.x),
|
x: Math.round((ev.offsetX * this.ratio) / this.char_size.x),
|
||||||
y: Math.round((ev.offsetY * this.ratio) / this.char_size.y),
|
y: Math.round((ev.offsetY * this.ratio) / this.char_size.y),
|
||||||
});
|
},
|
||||||
}
|
});
|
||||||
});*/
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
override getTargetSize(): { x: number; y: number } {
|
override getTargetSize(): { x: number; y: number } {
|
||||||
|
|
Loading…
Reference in a new issue