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

Expand replaces Widen: fill the window in both directions

Browse Source 
From the development repository at 3f1da52.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ackandClaude Opus 4.8 committed 2026-10-11 19:43:17 +02:00
1 parent 51e66db9a1
commit cc0b8dbd31
9 files changed
+102 -72
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/index.html
+2 -2
View File
@@ -78,8 +78,8 @@
data-help="Show the whole page in the window. Pressed by the host, it does so on every screen. Ctrl (Command on a Mac) with the scroll wheel, or with a pen stroke up or down, zooms about the pointer.">Fit</button>
<button id="zoom_sheet" type="button"
data-help="Show the page at the scale a new page has: one A4 sheet filling the window. A shrunk page is then seen at its size on the sheet. Pressed by the host, it does so on every screen.">A4</button>
<button id="zoom_widen" type="button" hidden
data-help="Make the page wider, for everyone, until it fills the window at this zoom. Nothing on it moves.">Widen</button>
<button id="zoom_expand" type="button" hidden
data-help="Make the page fill the window, for everyone, at this zoom, in both directions. Nothing on it moves.">Expand</button>
<button id="zoom_shrink" type="button" hidden
data-help="Make the page, for everyone, just large enough for what is on it, with the margin around. Nothing on it moves.">Shrink</button>
<label class="toggle" data-help="Let the page grow when your writing reaches an edge. Off, your writing stops at the edge. Images always get the room they need.">
client/js/main.js
+12 -8
View File
@@ -1027,12 +1027,16 @@ async function enterSession(invitationText, name, notebook) {
renderer.sheetScale();
session.sendViewCommand('sheet');
});
// "Widen" makes the sheet itself wider, until it fills the window at
// the present zoom; nothing on it moves (Andy, 2026-10-08).
element('zoom_widen').addEventListener('click', () => {
const room = renderer.available().width / renderer.cssPixelsPerUnit;
const widened = session.widenPage(room);
if (widened) log(`Page widened to ${session.page.baseWidth / 100} cm`);
// "Expand" makes the sheet itself fill the window at the present zoom,
// in both directions; nothing on it moves (Andy, 2026-10-08 for the
// width, both ways 2026-10-11).
element('zoom_expand').addEventListener('click', () => {
const room = renderer.available();
const expanded = session.expandPage(room.width / renderer.cssPixelsPerUnit,
room.height / renderer.cssPixelsPerUnit);
if (expanded) {
log(`Page expanded to ${session.page.baseWidth / 100} by ${session.page.baseHeight / 100} cm`);
}
});
element('zoom_shrink').addEventListener('click', () => {
if (session.shrinkPage()) {
@@ -1062,7 +1066,7 @@ async function enterSession(invitationText, name, notebook) {
const hideTool = /** @type {HTMLElement} */ (document.querySelector('[data-tool=hide]'));
hideTool.hidden = !session.mayMakePages();
if (hideTool.hidden && tool === 'hide') /** @type {HTMLElement} */ (document.querySelector('[data-tool=pen]')).click();
element('zoom_widen').hidden = !session.mayMakePages();
element('zoom_expand').hidden = !session.mayMakePages();
element('zoom_shrink').hidden = !session.mayMakePages();
}
showHostTools();
@@ -1413,7 +1417,7 @@ function showParticipants(session, renderer) {
// A checkbox with its label to the left, like Extend (Andy, 2026-10-09).
const allowLine = document.createElement('label');
allowLine.className = 'allow_line';
allowLine.setAttribute('data-help', 'Make this participant a co-host: they may then start pages, put images on the page and arrange them, load notebook pages, widen, shrink and hide, as you can.');
allowLine.setAttribute('data-help', 'Make this participant a co-host: they may then start pages, put images on the page and arrange them, load notebook pages, expand, shrink and hide, as you can.');
const allow = document.createElement('input');
allow.type = 'checkbox';
allow.className = 'allow';
client/js/session.js
+30 -21
View File
@@ -479,28 +479,37 @@ export class Session {
}
/**
* Make the sheet wider, for more room to write (Andy, 2026-10-08:
* "Widen" enlarges the page rather than zooming). Everyone's page
* widens; it is a change to the page, so it needs the right to make
* pages, and it ends the chance to take back an image.
* @param {number} width The page's new width, if wider than now.
* @returns {boolean} Whether the page widened.
* Make the sheet fill the window, for more room to write (Andy,
* 2026-10-08 as "Widen", which only grew the width; both ways since
* 2026-10-11, since there is no reason width alone suits anyone).
* Everyone's page grows; it is a change to the page, so it needs the
* right to make pages, and it ends the chance to take back an image.
* @param {number} width The page's new width, if wider than now.
* @param {number} height The page's new height, if taller than now.
* @returns {boolean} Whether the page grew.
*/
widenPage(width) {
expandPage(width, height) {
const page = this.page;
const added = Math.round(width) - page.width;
if (!this.mayMakePages() || page.number === 0 || added <= 0) return false;
// Equally on both sides of the PAGE as it is, writing included (the
// sheet may lie inside a page that writing has grown; measured from
// the sheet, the page came out short, Andy, 2026-10-08): what is on
// the page stays where it is seen. The same whole number of units on
// each side, since the page is centred on the screen: an odd growth
// split 1199 and 1200 moved the page's centre half a unit, a fraction
// of a pixel that showed as a one-pixel move on Olion (2026-10-09).
const half = Math.floor(added / 2);
if (half === 0) return false;
page.baseLeft = page.left - half;
page.baseWidth = page.width + 2 * half;
if (!this.mayMakePages() || page.number === 0) return false;
// Equally on both sides, and top and bottom, of the PAGE as it is,
// writing included (the sheet may lie inside a page that writing has
// grown; measured from the sheet, the page came out short, Andy,
// 2026-10-08): what is on the page stays where it is seen. The same
// whole number of units on each side, since the page is centred on
// the screen: an odd growth split 1199 and 1200 moved the centre half
// a unit, a pixel's fraction that showed as a one-pixel move on Olion
// (2026-10-09). A dimension already filling the window does not grow.
const addLeft = Math.floor((Math.round(width) - page.width) / 2);
const addTop = Math.floor((Math.round(height) - page.height) / 2);
if (addLeft <= 0 && addTop <= 0) return false;
if (addLeft > 0) {
page.baseLeft = page.left - addLeft;
page.baseWidth = page.width + 2 * addLeft;
}
if (addTop > 0) {
page.baseTop = page.top - addTop;
page.baseHeight = page.height + 2 * addTop;
}
page.imagesRevision += 1;
this.send(0, { type: 'page', page: page.descriptor() });
this.extentChanged(true);
@@ -510,7 +519,7 @@ export class Session {
/**
* Make the sheet the smallest that holds everything on the page with
* the margin around it ("Shrink", Andy, 2026-10-08). A change to the
* page like "Widen".
* page like "Expand".
* @returns {boolean} Whether the sheet changed.
*/
shrinkPage() {
client/kokkoja.css
+7 -1
View File
@@ -260,6 +260,11 @@ h2 {
flex: 1;
min-width: 0;
overflow: auto;
/* Centre the page in the desk both ways, so that growing the sheet
("Expand") equally on every side leaves what is on it where it is
seen. margin:auto on an overflowing flex child computes to 0, so a
page larger than the desk still scrolls to every edge. */
display: flex;
padding: 0.5rem;
background: var(--desk);
}
@@ -287,7 +292,8 @@ h2 {
.page {
position: relative;
margin: 0 auto;
flex: none;
margin: auto;
background: white;
box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
touch-action: none;