ack/kokkoja-rel
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kokkoja as of 2026-10-10: the teacher's requests, the Session window, notices, the QR code, the license

Browse Source
This commit is contained in:
ack committed 2026-10-10 19:01:20 +02:00
1 parent 95c80d04c9
commit 1d087af633
32 files changed
+4917 -890
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/js/text_editor.js
+164 -83
View File
@@ -1,15 +1,19 @@
// @ts-check
/**
* Editing a text block: a real text field laid over the page, so that
* umlauts, dead keys and selection work as they do everywhere, with
* handles for moving the block and changing its width.
* umlauts, dead keys and selection work as they do everywhere. Moving a
* block and resizing a text rectangle are done by a hold of the pen, as
* for images (main.js), not by handles here (2026-10-08).
*
* While a block is being edited the renderer leaves it out, and the field
* shows it; everyone else sees it drawn, updated at every keystroke.
*/
import { randomId } from './crypto.js';
import { LEFT_GAP, LINE_HEIGHT, TOP_GAP, layoutText } from './text_layout.js';
import { textBounds } from './page_model.js';
import { TEXT_FRAME_WIDTH, TEXT_MARK } from './page_file.js';
import { HOLD_MS, HOLD_SLACK_PX } from './pen_input.js';
import { LEFT_GAP, LINE_HEIGHT, TOP_GAP, baselineOf, fontMetrics, layoutText } from './text_layout.js';
/** @typedef {import('./page_model.js').TextBlock} TextBlock */
/** @typedef {import('./page_model.js').TextFont} TextFont */
@@ -18,6 +22,7 @@ import { LEFT_GAP, LINE_HEIGHT, TOP_GAP, layoutText } from './text_layout.js';
/** A block without a width is shown at least this wide, in page units. */
const LEAST_FIELD_WIDTH = 300;
export class TextEditor {
/**
* @param {HTMLElement} pageElement
@@ -25,6 +30,13 @@ export class TextEditor {
* @param {object} target
* @param {(block: TextBlock) => void} target.setText The block changed.
* @param {(id: string) => void} target.removeText The block was left empty.
* @param {(clientX: number, clientY: number) => boolean} [target.beginHold]
* The pen rested on the field for HOLD_MS: a hold, as on the page
* (Andy, 2026-10-09: the box being typed in can be moved without
* stopping). Then the pen's movement goes to holdMove, and holdEnd
* when it lifts.
* @param {(clientX: number, clientY: number) => void} [target.holdMove]
* @param {() => void} [target.holdEnd]
*/
constructor(pageElement, renderer, target) {
this.pageElement = pageElement;
@@ -38,6 +50,7 @@ export class TextEditor {
this.field.spellcheck = false;
this.field.hidden = true;
this.field.addEventListener('input', () => this.changed());
this.watchForHold();
this.field.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
event.preventDefault();
@@ -45,95 +58,111 @@ export class TextEditor {
}
});
this.corner = this.makeHandle('text_handle corner', 'Move the text');
this.edge = this.makeHandle('text_edge', 'Move the text');
this.end = this.makeHandle('text_handle end', 'Change the width');
/** Shows the top edge while it is being dragged out. */
/** Free text's corner mark while it is being edited (the renderer leaves the block out then). */
this.mark = document.createElement('div');
this.mark.className = 'text_mark';
this.mark.hidden = true;
/** Shows a rectangle while it is being dragged open. */
this.preview = document.createElement('div');
this.preview.className = 'text_preview';
this.preview.className = 'rect_preview';
this.preview.hidden = true;
this.pageElement.append(this.field, this.edge, this.corner, this.end, this.preview);
this.pageElement.append(this.field, this.mark, this.preview);
}
/**
* Show where the top edge of a new block would run, from (x0, y0) to
* (x1, y0), while the pointer is dragging.
* A press that rests on the field becomes a hold that moves the block,
* as a hold on the page would; a press that moves at once selects text
* as in any field.
*/
watchForHold() {
const field = this.field;
/** @type {ReturnType<typeof setTimeout> | null} */
let timer = null;
let holding = false;
let pointer = -1;
let pressX = 0;
let pressY = 0;
const cancel = () => {
if (timer !== null) clearTimeout(timer);
timer = null;
};
field.addEventListener('pointerdown', (event) => {
if (!this.target.beginHold || (event.pointerType === 'mouse' && event.button !== 0)) return;
pointer = event.pointerId;
pressX = event.clientX;
pressY = event.clientY;
cancel();
timer = setTimeout(() => {
timer = null;
if (!this.target.beginHold?.(pressX, pressY)) return;
holding = true;
field.setPointerCapture(pointer);
}, HOLD_MS);
});
field.addEventListener('pointermove', (event) => {
if (event.pointerId !== pointer) return;
if (holding) {
event.preventDefault();
this.target.holdMove?.(event.clientX, event.clientY);
} else if (timer !== null && Math.hypot(event.clientX - pressX, event.clientY - pressY) > HOLD_SLACK_PX) {
cancel();
}
});
const finish = (/** @type {PointerEvent} */ event) => {
if (event.pointerId !== pointer) return;
cancel();
pointer = -1;
if (holding) {
holding = false;
this.target.holdEnd?.();
field.focus();
}
};
field.addEventListener('pointerup', finish);
field.addEventListener('pointercancel', finish);
}
/**
* Show the rectangle being dragged open, from (x0, y0) to (x1, y1).
* @param {number} x0
* @param {number} y0
* @param {number} x1
* @param {number} y1
*/
showPreview(x0, y0, x1) {
showPreview(x0, y0, x1, y1) {
const scale = this.renderer.cssPixelsPerUnit;
const page = this.renderer.page;
this.preview.hidden = false;
this.preview.style.left = `${(Math.min(x0, x1) - page.left) * scale}px`;
this.preview.style.top = `${(y0 - page.top) * scale}px`;
this.preview.style.top = `${(Math.min(y0, y1) - page.top) * scale}px`;
this.preview.style.width = `${Math.abs(x1 - x0) * scale}px`;
this.preview.style.height = `${Math.abs(y1 - y0) * scale}px`;
}
hidePreview() {
this.preview.hidden = true;
}
/**
* @param {string} className
* @param {string} help
* @returns {HTMLElement}
*/
makeHandle(className, help) {
const handle = document.createElement('div');
handle.className = className;
handle.hidden = true;
handle.setAttribute('data-help', help);
const widening = className.includes('end');
handle.addEventListener('pointerdown', (event) => {
if (!this.block) return;
event.preventDefault();
event.stopPropagation();
handle.setPointerCapture(event.pointerId);
const [startX, startY] = this.renderer.pageFromClient(event.clientX, event.clientY);
const { x, y, width } = this.block;
const move = (/** @type {PointerEvent} */ e) => {
if (!this.block) return;
const [nowX, nowY] = this.renderer.pageFromClient(e.clientX, e.clientY);
if (widening) {
this.block.width = Math.max(100, Math.round((width ?? 0) + nowX - startX));
} else {
this.block.x = Math.round(x + nowX - startX);
this.block.y = Math.round(y + nowY - startY);
}
this.changed();
};
const finish = () => {
handle.removeEventListener('pointermove', move);
handle.removeEventListener('pointerup', finish);
handle.removeEventListener('pointercancel', finish);
this.field.focus();
};
handle.addEventListener('pointermove', move);
handle.addEventListener('pointerup', finish);
handle.addEventListener('pointercancel', finish);
});
return handle;
}
/** @returns {boolean} */
get editing() {
return this.block !== null;
}
/**
* Start a new block.
* Start a new block: free text, or a text rectangle with a width and a
* height.
* @param {number} x
* @param {number} y
* @param {number | null} width
* @param {number | null} height
* @param {{color: string, size: number, font: TextFont}} style
*/
begin(x, y, width, style) {
begin(x, y, width, height, style) {
this.stop();
/** @type {TextBlock} */
const block = {
id: randomId(), x: Math.round(x), y: Math.round(y), width, text: '', lines: [''],
id: randomId(), x: Math.round(x), y: Math.round(y), width,
height: width === null ? null : height, text: '', lines: [''],
size: style.size, font: style.font, color: style.color, boxWidth: 0, boxHeight: 0,
};
Object.assign(block, layoutText('', width, style.size, style.font));
@@ -163,6 +192,8 @@ export class TextEditor {
this.layout();
this.target.setText(block); // Redrawn without this block.
this.field.focus();
// The cursor at the end of the text (Andy, 2026-10-09).
this.field.setSelectionRange(block.text.length, block.text.length);
}
/** Finish editing. An empty block is removed. */
@@ -172,58 +203,108 @@ export class TextEditor {
this.block = null;
this.renderer.editingText = null;
this.field.hidden = true;
this.mark.hidden = true;
this.field.value = '';
for (const handle of [this.corner, this.edge, this.end]) handle.hidden = true;
if (block.text.trim() === '') this.target.removeText(block.id);
else this.target.setText(block);
}
/**
* The page was replaced under the editor: leave off without sending
* anything, since the block already reached the page it belonged to at
* every keystroke, and that page is being kept. Finishing normally
* would put the block on the new page.
* @returns {TextBlock | null} The block that was being edited.
*/
discard() {
const block = this.block;
if (!block) return null;
this.block = null;
this.renderer.editingText = null;
this.field.hidden = true;
this.mark.hidden = true;
this.field.value = '';
return block;
}
/** The text, position or width changed: lay it out and tell the page. */
changed() {
const block = this.block;
if (!block) return;
block.text = this.field.value;
Object.assign(block, layoutText(block.text, block.width, block.size, block.font));
// A text rectangle grows downward by lines when the text needs more.
if (block.height !== null && block.boxHeight > block.height) block.height = Math.ceil(block.boxHeight);
this.layout();
this.target.setText(block);
}
/** Place the field and the handles over the block, at the present zoom. */
/** Place the field over the block, at the present zoom. */
layout() {
const block = this.block;
if (!block) return;
const scale = this.renderer.cssPixelsPerUnit;
const page = this.renderer.page;
const left = (block.x - page.left) * scale;
const top = (block.y - page.top) * scale;
// Everything on whole device pixels, placed as the canvas places the
// drawn block (renderer.js drawText): the same pixels in both, so that
// nothing moves when editing ends (Andy, 2026-10-09).
const dpr = window.devicePixelRatio || 1;
/** @param {number} px CSS pixels. @returns {number} The nearest whole device pixel, in CSS pixels. */
const whole = (px) => Math.round(px * dpr) / dpr;
const left = whole((block.x - page.left) * scale);
const top = whole((block.y - page.top) * scale);
const isRect = block.height !== null;
const fieldWidth = (block.width ?? Math.max(LEAST_FIELD_WIDTH, block.boxWidth + block.size)) * scale;
const style = this.field.style;
this.field.classList.toggle('rect', isRect);
style.left = `${left}px`;
style.top = `${top}px`;
// A little wider than the block, so that the field never wraps a line
// earlier than the layout did.
style.width = `${fieldWidth - block.size * LEFT_GAP * scale + 2}px`;
style.paddingTop = `${block.size * TOP_GAP * scale}px`;
style.paddingLeft = `${block.size * LEFT_GAP * scale}px`;
// The text's left edge and its first baseline, where the canvas draws
// them; the lines a whole number of pixels apart.
const textLeft = whole((block.x + block.size * LEFT_GAP - page.left) * scale);
const firstBaseline = whole((block.y + baselineOf(block.size, block.font, 0) - page.top) * scale);
const lineHeight = whole(block.size * LINE_HEIGHT * scale);
const { ascent, descent } = fontMetrics(block.size, block.font);
// In a line box the baseline lies half the leading and the ascent down.
const baselineInLine = (lineHeight - (ascent + descent) * scale) / 2 + ascent * scale;
// A box's field is exactly the box, on whole pixels, and draws the
// frame as an outline inside its edge, which takes no room, at the
// width the canvas draws it.
const frame = Math.max(1, Math.round(TEXT_FRAME_WIDTH * scale * dpr)) / dpr;
style.outlineWidth = isRect ? `${frame}px` : '0';
style.outlineOffset = `${-frame}px`;
const padTop = firstBaseline - top - baselineInLine;
style.paddingTop = `${padTop}px`;
style.paddingLeft = `${textLeft - left}px`;
// Room below the last line, or the field scrolls by a few pixels to
// keep the cursor in view and the text jumps.
const slack = (LINE_HEIGHT - 1) / 2 * block.size * scale + 1;
style.paddingBottom = `${slack}px`;
style.font = `${block.size * scale}px ${block.font}`;
style.lineHeight = String(LINE_HEIGHT);
style.lineHeight = `${lineHeight}px`;
style.color = block.color;
style.whiteSpace = block.width === null ? 'pre' : 'pre-wrap';
// Exactly as tall as the lines: no spare line below the text.
style.height = `${block.lines.length * block.size * LINE_HEIGHT * scale}px`;
this.corner.hidden = false;
this.corner.style.left = `${left}px`;
this.corner.style.top = `${top}px`;
const hasWidth = block.width !== null;
this.edge.hidden = !hasWidth;
this.end.hidden = !hasWidth;
if (hasWidth) {
this.edge.style.left = `${left}px`;
this.edge.style.top = `${top}px`;
this.edge.style.width = `${fieldWidth}px`;
this.end.style.left = `${left + fieldWidth}px`;
this.end.style.top = `${top}px`;
if (isRect) {
const bounds = textBounds(block);
// The canvas strokes the far lines on the pixel at the edge itself,
// so the field reaches one pixel past it.
style.boxSizing = 'border-box';
style.width = `${whole((bounds.left + bounds.width - page.left) * scale) - left + 1 / dpr}px`;
style.height = `${Math.max(block.lines.length * lineHeight + padTop + slack,
whole((bounds.top + bounds.height - page.top) * scale) - top + 1 / dpr)}px`;
} else {
style.boxSizing = 'content-box';
// A little wider than the block, so that the field never wraps a
// line earlier than the layout did.
style.width = `${fieldWidth - (textLeft - left) + 2}px`;
style.height = `${block.lines.length * lineHeight}px`;
}
this.field.scrollTop = 0;
this.mark.hidden = isRect;
this.mark.style.left = `${left}px`;
this.mark.style.top = `${top}px`;
this.mark.style.width = `${whole(TEXT_MARK * scale)}px`;
this.mark.style.height = `${whole(TEXT_MARK * scale)}px`;
this.mark.style.borderWidth = `${Math.max(1, Math.round(TEXT_FRAME_WIDTH * scale * dpr)) / dpr}px`;
}
}