@soomo/text-annotator 3.0.0-staging.2 → 3.0.0-staging.4

package/dist/src/TextAnnotator.d.ts

@@ -1,10 +1,12 @@
 import { TextAnnotatorOptions } from './TextAnnotatorOptions';
 import { TextAnnotation } from './model';
 import { TextAnnotatorState } from './state';
+import { HighlightStyleExpression } from './highlight';
 import { Annotator } from '@annotorious/core';
 
 export interface TextAnnotator<E extends unknown = TextAnnotation> extends Annotator<TextAnnotation, E> {
     element: HTMLElement;
+    setStyle(style: HighlightStyleExpression | undefined): void;
     scrollIntoView(annotation: TextAnnotation): boolean;
     state: TextAnnotatorState;
 }

package/dist/src/highlight/baseRenderer.d.ts

@@ -7,7 +7,7 @@ import { Filter, ViewportState } from '@annotorious/core';
 
 export interface RendererImplementation {
     destroy(): void;
-    redraw(highlights: Highlight[], bounds: ViewportBounds, style?: HighlightStyleExpression, painter?: HighlightPainter, force?: boolean): void;
+    redraw(highlights: Highlight[], bounds: ViewportBounds, style?: HighlightStyleExpression, painter?: HighlightPainter, lazy?: boolean): void;
     setVisible(visible: boolean): void;
 }
 export interface Renderer {

package/dist/src/utils/splitAnnotatableRanges.d.ts

@@ -1,3 +1,4 @@
+export declare const NOT_ANNOTATABLE_CLASS = "not-annotatable";
 export declare const NOT_ANNOTATABLE_SELECTOR = ".not-annotatable";
 /**
  * Splits a DOM Range into one or more ranges that span annotatable content only.

package/dist/text-annotator.es.js

@@ -1,4 +1,4 @@
-const D = {
+const H = {
   fill: "rgb(0, 128, 255)",
   fillOpacity: 0.18
 }, dt = {
@@ -6,22 +6,22 @@ const D = {
   fillOpacity: 0.45
 }, zt = (t, e, n, o, i) => {
   var s;
-  const r = n ? typeof n == "function" ? n(t.annotation, t.state, i) : n : (s = t.state) != null && s.selected ? dt : D;
+  const r = n ? typeof n == "function" ? n(t.annotation, t.state, i) : n : (s = t.state) != null && s.selected ? dt : H;
   return o && o.paint(t, e) || r;
 }, ut = (t, e = 10) => {
   let n;
   return (...o) => {
     clearTimeout(n), n = setTimeout(() => t.apply(void 0, o), e);
   };
-}, Rt = "not-annotatable", H = `.${Rt}`, Ft = (t) => {
+}, Rt = "not-annotatable", X = `.${Rt}`, Ft = (t) => {
   var n;
   const e = t.commonAncestorContainer;
-  return e instanceof HTMLElement ? !e.closest(H) : !((n = e.parentElement) != null && n.closest(H));
+  return e instanceof HTMLElement ? !e.closest(X) : !((n = e.parentElement) != null && n.closest(X));
 }, Wt = function* (t) {
   const e = document.createNodeIterator(
     t.commonAncestorContainer,
     NodeFilter.SHOW_ELEMENT,
-    (o) => o instanceof HTMLElement && o.classList.contains(Rt) && t.intersectsNode(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+    (o) => o instanceof HTMLElement && o.classList.contains(Rt) && !o.parentElement.closest(X) && t.intersectsNode(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
   );
   let n;
   for (; n = e.nextNode(); )
@@ -42,10 +42,10 @@ const D = {
   return e.length > 0 ? e : [t];
 }, lt = (t) => {
   const e = t.cloneContents();
-  return e.querySelectorAll(H).forEach((n) => n.remove()), e;
+  return e.querySelectorAll(X).forEach((n) => n.remove()), e;
 }, xn = (t) => {
   const e = t.cloneContents();
-  return e.querySelectorAll(H).forEach((n) => n.remove()), e;
+  return e.querySelectorAll(X).forEach((n) => n.remove()), e;
 }, gt = (t, e) => {
   const n = document.createNodeIterator(e);
   let o = 0, i = n.nextNode();
@@ -182,7 +182,7 @@ const D = {
     NodeFilter.SHOW_TEXT,
     (m) => {
       var g;
-      return (g = m.parentElement) != null && g.closest(H) ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+      return (g = m.parentElement) != null && g.closest(X) ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
     }
   );
   let s = 0;
@@ -245,10 +245,10 @@ const D = {
   }, x = (p) => {
     a = p, m();
   }, y = (p) => {
-    u = p, m();
+    u = p, m(!1);
   }, w = () => m();
   i.observe(w);
-  const c = r.subscribe(() => m()), d = () => m();
+  const c = r.subscribe(() => m()), d = () => m(!0);
   document.addEventListener("scroll", d, { capture: !0, passive: !0 });
   const f = ut(() => {
     i.recalculatePositions(), h && h.reset(), m();
@@ -287,7 +287,7 @@ const D = {
     const { top: g, left: x } = u;
     a.forEach((y) => {
       var f;
-      const w = h ? typeof h == "function" ? h(y.annotation, y.state) : h : (f = y.state) != null && f.selected ? dt : D, c = v && v.paint(y, u) || w, d = y.rects.map(({ x: b, y: E, width: L, height: B }) => ({
+      const w = h ? typeof h == "function" ? h(y.annotation, y.state) : h : (f = y.state) != null && f.selected ? dt : H, c = v && v.paint(y, u) || w, d = y.rects.map(({ x: b, y: E, width: L, height: B }) => ({
         x: b + x,
         y: E + g,
         width: L,
@@ -445,7 +445,7 @@ var ce = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, Y = function(t) {
   return t instanceof Et ? t : new Et(t);
 };
 const me = (t) => [
-  `background-color:${V((t == null ? void 0 : t.fill) || D.fill).alpha((t == null ? void 0 : t.fillOpacity) === void 0 ? D.fillOpacity : t.fillOpacity).toHex()}`,
+  `background-color:${V((t == null ? void 0 : t.fill) || H.fill).alpha((t == null ? void 0 : t.fillOpacity) === void 0 ? H.fillOpacity : t.fillOpacity).toHex()}`,
   t != null && t.underlineThickness ? "text-decoration:underline" : void 0,
   t != null && t.underlineColor ? `text-decoration-color:${t.underlineColor}` : void 0,
   t != null && t.underlineOffset ? `text-underline-offset:${t.underlineOffset}px` : void 0,
@@ -467,7 +467,7 @@ const me = (t) => [
       Array.from(e).filter((l) => !h.has(l));
       const v = r.map((l) => {
         var x;
-        const m = a ? typeof a == "function" ? a(l.annotation, l.state) : a : (x = l.state) != null && x.selected ? dt : D, g = u && u.paint(l, s) || m;
+        const m = a ? typeof a == "function" ? a(l.annotation, l.state) : a : (x = l.state) != null && x.selected ? dt : H, g = u && u.paint(l, s) || m;
         return `::highlight(_${l.annotation.id}) { ${me(g)} }`;
       });
       t.innerHTML = v.join(`
@@ -517,7 +517,7 @@ const we = (t, e) => {
       e.remove();
     },
     redraw: (s, a, u, h, v) => {
-      if (ct(n, s) && !v)
+      if (ct(n, s) && v)
         return;
       e.innerHTML = "";
       const m = s.reduce((g, { rects: x }) => [...g, ...x], []);
@@ -525,7 +525,7 @@ const we = (t, e) => {
         const x = g.rects.map((y) => {
           const w = document.createElement("span");
           w.className = "r6o-annotation", w.dataset.annotation = g.annotation.id, w.style.left = `${y.x}px`, w.style.top = `${y.y}px`, w.style.width = `${y.width}px`, w.style.height = `${y.height}px`;
-          const c = we(y, m), d = zt(g, a, u, h, c), f = V((d == null ? void 0 : d.fill) || D.fill).alpha((d == null ? void 0 : d.fillOpacity) === void 0 ? D.fillOpacity : d.fillOpacity).toHex();
+          const c = we(y, m), d = zt(g, a, u, h, c), f = V((d == null ? void 0 : d.fill) || H.fill).alpha((d == null ? void 0 : d.fillOpacity) === void 0 ? H.fillOpacity : d.fillOpacity).toHex();
           return w.style.backgroundColor = f, d.underlineStyle && (w.style.borderStyle = d.underlineStyle), d.underlineColor && (w.style.borderColor = d.underlineColor), d.underlineThickness && (w.style.borderBottomWidth = `${d.underlineThickness}px`), d.underlineOffset && (w.style.paddingBottom = `${d.underlineOffset}px`), e.appendChild(w), w;
         });
         return { id: g.annotation.id, spans: x };
@@ -566,7 +566,7 @@ function Vt(t, e, n) {
   return Se(o);
 }
 var Lt = Object.prototype.hasOwnProperty;
-function X(t, e) {
+function D(t, e) {
   var n, o;
   if (t === e)
     return !0;
@@ -577,14 +577,14 @@ function X(t, e) {
       return t.toString() === e.toString();
     if (n === Array) {
       if ((o = t.length) === e.length)
-        for (; o-- && X(t[o], e[o]); )
+        for (; o-- && D(t[o], e[o]); )
           ;
       return o === -1;
     }
     if (!n || typeof t == "object") {
       o = 0;
       for (n in t)
-        if (Lt.call(t, n) && ++o && !Lt.call(e, n) || !(n in e) || !X(t[n], e[n]))
+        if (Lt.call(t, n) && ++o && !Lt.call(e, n) || !(n in e) || !D(t[n], e[n]))
           return !1;
       return Object.keys(e).length === o;
     }
@@ -693,8 +693,8 @@ const Oe = (t, e) => {
   return t.bodies.filter((o) => !n.has(o.id));
 }, Ne = (t, e) => e.bodies.map((n) => {
   const o = t.bodies.find((i) => i.id === n.id);
-  return { newBody: n, oldBody: o && !X(o, n) ? o : void 0 };
-}).filter(({ oldBody: n }) => n).map(({ oldBody: n, newBody: o }) => ({ oldBody: n, newBody: o })), Ve = (t, e) => !X(t.target, e.target), Ut = (t, e) => {
+  return { newBody: n, oldBody: o && !D(o, n) ? o : void 0 };
+}).filter(({ oldBody: n }) => n).map(({ oldBody: n, newBody: o }) => ({ oldBody: n, newBody: o })), Ve = (t, e) => !D(t.target, e.target), Ut = (t, e) => {
   const n = Oe(t, e), o = Ie(t, e), i = Ne(t, e);
   return {
     oldValue: t,
@@ -1013,7 +1013,7 @@ const De = 250, He = (t) => {
     const { selected: c } = r, d = (c || []).map(({ id: f }) => i.getAnnotation(f));
     d.forEach((f) => {
       const b = h.find((E) => E.id === f.id);
-      (!b || !X(b, f)) && x("updateAnnotation", f, b);
+      (!b || !D(b, f)) && x("updateAnnotation", f, b);
     }), h = h.map((f) => d.find(({ id: E }) => E === f.id) || f);
   };
   r.subscribe(({ selected: c }) => {
@@ -1023,13 +1023,13 @@ const De = 250, He = (t) => {
       else if (h.length > 0 && c.length === 0)
         h.forEach((d) => {
           const f = i.getAnnotation(d.id);
-          f && !X(f, d) && x("updateAnnotation", f, d);
+          f && !D(f, d) && x("updateAnnotation", f, d);
         }), h = [];
       else {
         const d = new Set(h.map((b) => b.id)), f = new Set(c.map(({ id: b }) => b));
         h.filter((b) => !f.has(b.id)).forEach((b) => {
           const E = i.getAnnotation(b.id);
-          E && !X(E, b) && x("updateAnnotation", E, b);
+          E && !D(E, b) && x("updateAnnotation", E, b);
         }), h = [
           // Remove annotations that were deselected
           ...h.filter((b) => f.has(b.id)),
@@ -1751,7 +1751,7 @@ const gn = (t, e) => {
     var c;
     if (!u)
       return;
-    !((c = y.target.parentElement) != null && c.closest(H)) ? s = {
+    !((c = y.target.parentElement) != null && c.closest(X)) ? s = {
       annotation: Vt(),
       selector: [],
       creator: r,
@@ -1787,7 +1787,7 @@ const gn = (t, e) => {
   t.addEventListener("pointerdown", m);
   const g = (y) => {
     var f;
-    if (!!((f = y.target.parentElement) != null && f.closest(H)) || !u)
+    if (!!((f = y.target.parentElement) != null && f.closest(X)) || !u)
       return;
     const c = () => {
       const { x: b, y: E } = t.getBoundingClientRect(), L = o.getAt(y.clientX - b, y.clientY - E);
@@ -1816,7 +1816,7 @@ const gn = (t, e) => {
   const h = e.renderer === "CSS_HIGHLIGHTS" ? CSS.highlights ? "CSS_HIGHLIGHTS" : Tt : e.renderer || Tt, v = h === "SPANS" ? ye(t, n, i) : h === "CSS_HIGHLIGHTS" ? ve(t, n, i) : h === "CANVAS" ? le(t, n, i) : void 0;
   if (!v)
     throw `Unknown renderer implementation: ${h}`;
-  console.log(`Using ${h} renderer`), e.style && v.setStyle(e.style);
+  console.debug(`Using ${h} renderer`), e.style && v.setStyle(e.style);
   const l = wn(t, n, e.offsetReferenceSelector);
   return l.setUser(u), {
     ...Fe(n, s, e.adapter),
@@ -1834,7 +1834,7 @@ const gn = (t, e) => {
       E ? o.setSelected(E) : o.clear();
     },
     setPresenceProvider: (E) => {
-      E && (v.setPainter(bn(t, E, e.presence)), E.on("selectionChange", () => v.redraw(!0)));
+      E && (v.setPainter(bn(t, E, e.presence)), E.on("selectionChange", () => v.redraw()));
     },
     setVisible: (E) => v.setVisible(E),
     on: a.on,
@@ -1845,8 +1845,9 @@ const gn = (t, e) => {
 };
 export {
   dt as DEFAULT_SELECTED_STYLE,
-  D as DEFAULT_STYLE,
-  H as NOT_ANNOTATABLE_SELECTOR,
+  H as DEFAULT_STYLE,
+  Rt as NOT_ANNOTATABLE_CLASS,
+  X as NOT_ANNOTATABLE_SELECTOR,
   R as Origin,
   An as W3CTextFormat,
   le as createCanvasRenderer,