@bivy/bivy 0.19.4-staging.1 → 0.19.4-staging.2

package/dist/apps/annotate.js

@@ -16,6 +16,29 @@ export function readElementScrolls(input) {
         return { selector: raw.selector, x: raw.x, y: raw.y };
     });
 }
+const MAX_NOTES = 20;
+/** Notes from the client (untrusted shape): numbered, bounded, with strokes. */
+export function readNotes(input) {
+    if (input === undefined)
+        return [];
+    if (!Array.isArray(input) || !input.length || input.length > MAX_NOTES)
+        throw new Error(`A message carries 1 to ${MAX_NOTES} notes.`);
+    return input.map((raw, index) => {
+        const note = raw;
+        if (!Number.isInteger(note?.n) || note.n < 1 || note.n > MAX_NOTES)
+            throw new Error("Invalid note number.");
+        if (note.words !== undefined && typeof note.words !== "string")
+            throw new Error("Invalid note text.");
+        const selectors = Array.isArray(note.selectors) ? note.selectors.filter((s) => typeof s === "string" && !!s && s.length <= 300).slice(0, 8) : [];
+        return { n: index + 1, words: typeof note.words === "string" ? note.words.trim().slice(0, 2000) : "", selectors, strokes: readStrokes(raw.strokes) };
+    });
+}
+/** Where a note's number sits: the top-left of everything it covers. */
+export function noteAnchor(note) {
+    const xs = note.strokes.flatMap((stroke) => stroke.points.map(([x]) => x));
+    const ys = note.strokes.flatMap((stroke) => stroke.points.map(([, y]) => y));
+    return { x: Math.min(...xs), y: Math.min(...ys) };
+}
 const MAX_STROKES = 50;
 const MAX_POINTS = 10_000;
 /** Validates strokes from the client (untrusted shape): bounded, finite. */
@@ -62,10 +85,57 @@ const HALO = tokenColor("annotate-halo", "#ffffff");
 /** Mark width in CSS pixels, and its halo on each side. */
 const WIDTH = 4;
 const HALO_WIDTH = 1.5;
+/** A note's number, in CSS pixels: the pill's half-height, and the digits. */
+const PIP = { radius: 11, height: 12, width: 6, gap: 3, stroke: 1.6 };
+/** Seven-segment digits, drawn rather than typeset: the picture has to carry
+ * the numbers, and a PNG writer has no font. Adding a glyph is adding a row.
+ *
+ *      aaa
+ *     f   b
+ *      ggg
+ *     e   c
+ *      ddd
+ */
+const SEGMENTS = {
+    "0": "abcdef", "1": "bc", "2": "abged", "3": "abgcd", "4": "fgbc",
+    "5": "afgcd", "6": "afgecd", "7": "abc", "8": "abcdefg", "9": "abcdfg",
+};
+function digit(glyph, x, y, w, h) {
+    const middle = y + h / 2;
+    const lines = {
+        a: [[x, y], [x + w, y]], b: [[x + w, y], [x + w, middle]], c: [[x + w, middle], [x + w, y + h]],
+        d: [[x, y + h], [x + w, y + h]], e: [[x, middle], [x, y + h]], f: [[x, y], [x, middle]], g: [[x, middle], [x + w, middle]],
+    };
+    return [...(SEGMENTS[glyph] ?? "")].map((name) => lines[name]);
+}
+/** Cuts out the part of a picture a pin is about, with room around it so the
+ * mark is read in its surroundings rather than in isolation. `scale` maps CSS
+ * pixels to image pixels. Returns the whole picture when the cut would be
+ * empty or nearly all of it. */
+export function crop(png, region, scale, padding = 24) {
+    const image = decodePng(png);
+    const { width, height, channels } = image;
+    const pad = padding * scale;
+    const left = Math.max(0, Math.floor((region.x - padding) * scale));
+    const top = Math.max(0, Math.floor((region.y - padding) * scale));
+    const right = Math.min(width, Math.ceil((region.x + region.width) * scale + pad));
+    const bottom = Math.min(height, Math.ceil((region.y + region.height) * scale + pad));
+    const w = right - left, h = bottom - top;
+    if (w < 8 || h < 8 || (w >= width * 0.9 && h >= height * 0.9))
+        return png;
+    const rgb = Buffer.alloc(w * h * 3);
+    for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+            const from = ((y + top) * width + (x + left)) * channels;
+            image.pixels.copy(rgb, (y * w + x) * 3, from, from + 3);
+        }
+    }
+    return encodePng(w, h, rgb);
+}
 /** Draws marks onto a PNG. `scale` maps CSS pixels to image pixels;
  * `offset` (CSS px) is subtracted first — the scroll position the picture
  * was taken at. Halos go under every mark first, so crossings stay clean. */
-export function composite(png, strokes, map) {
+export function composite(png, strokes, map, badges = []) {
     const image = decodePng(png);
     const { width, height, channels } = image;
     const rgb = Buffer.alloc(width * height * 3);
@@ -103,5 +173,19 @@ export function composite(png, strokes, map) {
         trace(path, r + HALO_WIDTH * map.scale, HALO);
     for (const path of paths)
         trace(path, r, INK);
+    // The numbers last, over the marks, so a note and the thing it is about stay
+    // paired in the picture as well as in the words.
+    for (const badge of badges) {
+        const glyphs = [...String(badge.n)];
+        const [pw, ph, gap, pr] = [PIP.width, PIP.height, PIP.gap, PIP.radius].map((v) => v * map.scale);
+        const span = glyphs.length * pw + (glyphs.length - 1) * gap;
+        const [cx, cy] = toImage([badge.x, badge.y]);
+        // A traced line of radius `pr` is a pill: a disc at each end, filled between.
+        trace([[cx - span / 2, cy], [cx + span / 2, cy]], pr, INK);
+        glyphs.forEach((glyph, index) => {
+            for (const segment of digit(glyph, cx - span / 2 + index * (pw + gap), cy - ph / 2, pw, ph))
+                trace(segment, PIP.stroke * map.scale, HALO);
+        });
+    }
     return encodePng(width, height, rgb);
 }

package/dist/apps/inspector.js

@@ -83,7 +83,10 @@ function startPointing(){
   document.documentElement.append(layer,box);
   addEventListener('keydown',key,true);
 }
-for(const type of ['pointerdown','keydown'])addEventListener(type,e=>{if(!layer&&!(host&&e.composedPath?.().includes(host)))interacted=true;},true);
+// "before" keeps the value this event changed, so a press that turns out to be
+// a mark (not use of the app) can put it back.
+let interactedBefore=false;
+for(const type of ['pointerdown','keydown'])addEventListener(type,e=>{if(!layer&&!(host&&e.composedPath?.().includes(host))){interactedBefore=interacted;interacted=true;}},true);
 // Draw (in the shell, over this page): where the page is, what state it holds
 // that a fresh browser on the machine wouldn't, and what's under each mark.
 const signals=()=>{
@@ -135,13 +138,86 @@ addEventListener('message',e=>{
   }
   else if(d.type==='bivy:draw')post(drawState());
   else if(d.type==='bivy:scroll'){scrollBy({left:n(d.dx),top:n(d.dy),behavior:'instant'});post({type:'scrolled',scroll:{x:Math.round(scrollX),y:Math.round(scrollY)}});}
+  // Where the reader was before they took a new version. The page may still be
+  // laying out (or fetching what makes it long enough), so try again briefly.
+  else if(d.type==='bivy:restore'){
+    const panels=Array.isArray(d.elementScrolls)?d.elementScrolls.slice(0,50):[];
+    const put=()=>{
+      scrollTo({left:n(d.scroll?.x),top:n(d.scroll?.y),behavior:'instant'});
+      for(const p of panels){try{document.querySelector(p.selector)?.scrollTo({left:n(p.x),top:n(p.y),behavior:'instant'});}catch{}}
+    };
+    for(const ms of [0,150,500])setTimeout(put,ms);
+  }
   else if(d.type==='bivy:marks'&&d.rect)post({type:'marked',id:n(d.id),elements:marked({x:n(d.rect.x),y:n(d.rect.y),width:n(d.rect.width),height:n(d.rect.height)})});
 });
-addEventListener('message',e=>{
-  if(!framed||e.origin!==SHELL||e.source!==parent||e.data?.type!=='bivy:point')return;
-  // Held: the layer goes when the finger lifts (see up).
-  if(e.data.on)startPointing();else if(!held)stop();
-});
+// Marking, started from inside the app: a long press on what's wrong. A tap is
+// left alone, so the app stays usable; so are presses on a field or on text the
+// reader is selecting, where a long press already means something to them.
+// Once it fires, the rest of the gesture is swallowed here — the shell's marking
+// layer cannot receive a gesture that began in this document — and its points
+// are streamed to the shell.
+if(framed){
+  let hold=null,armed=true;
+  const page=e=>[Math.round(e.clientX+scrollX),Math.round(e.clientY+scrollY)];
+  // A long press already means something where the reader is typing or selecting.
+  const theirs=el=>{
+    for(let n=el;n&&n.nodeType===1;n=n.parentElement)if(/^(input|textarea|select)$/.test(n.localName)||n.isContentEditable)return true;
+    return getSelection?.()?.isCollapsed===false;
+  };
+  const clear=()=>{clearTimeout(hold?.timer);hold=null;};
+  /** A clear layer so nothing new reaches the app while a mark is being made.
+   * It cannot take this gesture's events (the app's element already has them,
+   * which is what the swallowing below is for), but it stops everything else. */
+  const cover=()=>{
+    stop();
+    layer=document.createElement('div');
+    layer.setAttribute('aria-hidden','true');
+    Object.assign(layer.style,{position:'fixed',inset:0,zIndex:2147483646,cursor:'crosshair',background:'transparent',touchAction:'none',userSelect:'none',webkitUserSelect:'none',webkitTouchCallout:'none'});
+    layer.addEventListener('contextmenu',e=>e.preventDefault());
+    document.documentElement.append(layer);
+  };
+  const begin=()=>{
+    const start=hold;if(!start)return;
+    // The press was marking, not using the app: the picture is still faithful.
+    interacted=start.before;
+    hold={marking:true,id:start.id};
+    cover();
+    const el=under({clientX:start.client[0],clientY:start.client[1]});
+    const r=el&&el.getBoundingClientRect();
+    post(Object.assign(drawState(),{type:'mark-start',point:start.point,
+      element:el?{selector:selector(el),tag:el.localName,text:(el.innerText||el.getAttribute('aria-label')||el.getAttribute('alt')||'').trim().replace(/\\s+/g,' ').slice(0,120),
+        rect:{x:Math.round(r.left+scrollX),y:Math.round(r.top+scrollY),width:Math.round(r.width),height:Math.round(r.height)}}:undefined}));
+  };
+  addEventListener('pointerdown',e=>{
+    if(!armed||hold?.marking||layer||(host&&e.composedPath?.().includes(host))||!e.isPrimary||theirs(e.target))return;
+    clear();
+    hold={id:e.pointerId,client:[e.clientX,e.clientY],point:page(e),before:interactedBefore,timer:setTimeout(begin,450)};
+  },true);
+  addEventListener('pointermove',e=>{
+    if(!hold||e.pointerId!==hold.id)return;
+    if(hold.marking){post({type:'mark-move',point:page(e)});return;}
+    if(Math.hypot(e.clientX-hold.client[0],e.clientY-hold.client[1])>10)clear();
+  },true);
+  for(const type of ['pointerup','pointercancel'])addEventListener(type,e=>{
+    if(!hold||e.pointerId!==hold.id)return;
+    const marking=hold.marking;clear();
+    if(!marking)return;
+    stop();post({type:'mark-end'});
+  },true);
+  // Scrolling is never a mark, however still the finger was.
+  addEventListener('scroll',()=>{if(hold&&!hold.marking)clear();},true);
+  // Hiding Bivy's controls means "let me use the app": an app with its own
+  // long press (a canvas, a map) gets it back, and showing them arms it again.
+  addEventListener('message',e=>{
+    if(e.origin!==SHELL||e.source!==parent||e.data?.type!=='bivy:arm')return;
+    armed=e.data.on!==false;
+    if(!armed&&hold&&!hold.marking)clear();
+  });
+  // The app must not act on the gesture it already owns: no click on release,
+  // no scroll, no selection, no callout.
+  for(const type of ['click','auxclick','dblclick','contextmenu','mousedown','mouseup','touchstart','touchmove','touchend','selectstart'])
+    addEventListener(type,e=>{if(hold?.marking){e.preventDefault();e.stopPropagation();}},{capture:true,passive:false});
+}
 if(REVIEWER&&!framed){
   // A shadow root keeps the app's CSS off these controls (and ours off the app).
   host=document.createElement('bivy-review');