@soomo/text-annotator 3.0.0-staging.28 → 3.0.0-staging.29

package/dist/src/highlight/canvas/canvasRenderer.d.ts

@@ -1,4 +1,4 @@
-import { TextAnnotatorState } from 'src/state';
 import { ViewportState } from '@annotorious/core';
+import { TextAnnotatorState } from '../../state';
 
 export declare const createCanvasRenderer: (container: HTMLElement, state: TextAnnotatorState, viewport: ViewportState) => import('../baseRenderer').Renderer;

package/dist/text-annotator.css

@@ -1 +1 @@
-.r6o-highlight-layer{position:fixed;top:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none}.r6o-highlight-layer.bg{z-index:1;mix-blend-mode:multiply}.r6o-annotatable .r6o-span-highlight-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.r6o-annotatable .r6o-span-highlight-layer.hidden{display:none}.r6o-annotatable .r6o-span-highlight-layer .r6o-annotation{position:absolute;display:block;border-width:0;border-style:solid}html,body{overscroll-behavior-y:none}.r6o-annotatable{-webkit-tap-highlight-color:transparent}.r6o-annotatable,.r6o-annotatable *{position:relative}.hovered *{cursor:pointer}*::selection,::selection{background:#0080ff2e}::-moz-selection{background:#0080ff2e}
+.r6o-canvas-highlight-layer{position:fixed;top:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none}.r6o-canvas-highlight-layer.bg{mix-blend-mode:multiply;z-index:1}.r6o-annotatable .r6o-span-highlight-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.r6o-annotatable .r6o-span-highlight-layer.hidden{display:none}.r6o-annotatable .r6o-span-highlight-layer .r6o-annotation{position:absolute;display:block;border-width:0;border-style:solid}.r6o-annotation{box-sizing:content-box}.r6o-presence-layer{left:0;position:fixed;top:0;bottom:0;width:100vw;pointer-events:none}html,body{overscroll-behavior-y:none}.r6o-annotatable{-webkit-tap-highlight-color:transparent}.r6o-annotatable,.r6o-annotatable *{position:relative}.hovered *{cursor:pointer}*::selection,::selection{background:#0080ff2e}::-moz-selection{background:#0080ff2e}

package/dist/text-annotator.es.js

@@ -239,7 +239,7 @@ const P = {
   t.addEventListener("pointermove", l);
   const p = (B = !1) => {
     h && h.clear();
-    const M = de(t), { minX: b, minY: x, maxX: A, maxY: C } = M, R = u ? i.getIntersecting(b, x, A, C).filter(({ annotation: _ }) => u(_)) : i.getIntersecting(b, x, A, C), O = r.selected.map(({ id: _ }) => _), H = R.map(({ annotation: _, rects: qt }) => {
+    const M = de(t), { minX: b, minY: x, maxX: A, maxY: S } = M, R = u ? i.getIntersecting(b, x, A, S).filter(({ annotation: _ }) => u(_)) : i.getIntersecting(b, x, A, S), O = r.selected.map(({ id: _ }) => _), H = R.map(({ annotation: _, rects: qt }) => {
       const jt = O.includes(_.id), Gt = _.id === s.current;
       return { annotation: _, rects: qt, state: { selected: jt, hover: Gt } };
     });
@@ -258,14 +258,14 @@ const P = {
     i.recalculatePositions(), h && h.reset(), p();
   });
   window.addEventListener("resize", y);
-  const S = new ResizeObserver(y);
-  S.observe(t);
-  const L = { attributes: !0, childList: !0, subtree: !0 }, E = new MutationObserver((B) => {
+  const E = new ResizeObserver(y);
+  E.observe(t);
+  const L = { attributes: !0, childList: !0, subtree: !0 }, C = new MutationObserver((B) => {
     B.every((b) => b.target === t || t.contains(b.target)) || p(!0);
   });
-  return E.observe(document.body, L), {
+  return C.observe(document.body, L), {
     destroy: () => {
-      t.removeEventListener("pointermove", l), o.destroy(), i.unobserve(g), d(), document.removeEventListener("scroll", a), window.removeEventListener("resize", y), S.disconnect(), E.disconnect();
+      t.removeEventListener("pointermove", l), o.destroy(), i.unobserve(g), d(), document.removeEventListener("scroll", a), window.removeEventListener("resize", y), E.disconnect(), C.disconnect();
     },
     redraw: p,
     setStyle: w,
@@ -275,7 +275,7 @@ const P = {
   };
 }, he = () => {
   const t = document.createElement("canvas");
-  return t.width = window.innerWidth, t.height = window.innerHeight, t.className = "r6o-highlight-layer bg", t;
+  return t.width = window.innerWidth, t.height = window.innerHeight, t.className = "r6o-canvas-highlight-layer bg", t;
 }, fe = (t, e) => {
   t.width = window.innerWidth, t.height = window.innerHeight;
 }, pe = (t) => {
@@ -290,20 +290,20 @@ const P = {
       const { annotation: { target: { created: a } } } = g, { annotation: { target: { created: y } } } = d;
       return a.getTime() - y.getTime();
     }).forEach((g) => {
-      var S;
-      const d = h ? typeof h == "function" ? h(g.annotation, g.state) : h : (S = g.state) != null && S.selected ? ot : P, a = m && m.paint(g, u) || d, y = g.rects.map(({ x: L, y: E, width: T, height: B }) => ({
+      var E;
+      const d = h ? typeof h == "function" ? h(g.annotation, g.state) : h : (E = g.state) != null && E.selected ? ot : P, a = m && m.paint(g, u) || d, y = g.rects.map(({ x: L, y: C, width: T, height: B }) => ({
         x: L + w,
-        y: E + f,
+        y: C + f,
         width: T,
         height: B
       }));
       if (n.fillStyle = a.fill, n.globalAlpha = a.fillOpacity || 1, y.forEach(
-        ({ x: L, y: E, width: T, height: B }) => n.fillRect(L, E, T, B)
+        ({ x: L, y: C, width: T, height: B }) => n.fillRect(L, C, T, B)
       ), a.underlineColor) {
         n.globalAlpha = 1, n.strokeStyle = a.underlineColor, n.lineWidth = a.underlineThickness ?? 1;
         const L = a.underlineOffset ?? 0;
-        y.forEach(({ x: E, y: T, width: B, height: M }) => {
-          n.beginPath(), n.moveTo(E, T + M + L), n.lineTo(E + B, T + M + L), n.stroke();
+        y.forEach(({ x: C, y: T, width: B, height: M }) => {
+          n.beginPath(), n.moveTo(C, T + M + L), n.lineTo(C + B, T + M + L), n.stroke();
         });
       }
     });
@@ -527,7 +527,7 @@ const Le = (t, e) => {
           const g = Le(v, f), d = Kt(w, c, u, h, g);
           if (p) {
             const a = document.createElement("span");
-            a.className = "r6o-annotation", a.dataset.annotation = w.annotation.id, a.style.left = `${v.x}px`, a.style.top = `${v.y}px`, a.style.width = `${v.width}px`, a.style.height = `${v.height}px`, a.style.backgroundColor = Y((d == null ? void 0 : d.fill) || P.fill).alpha((d == null ? void 0 : d.fillOpacity) === void 0 ? P.fillOpacity : d.fillOpacity).toHex(), d.underlineStyle && (a.style.borderStyle = d.underlineStyle), d.underlineColor && (a.style.borderColor = d.underlineColor), d.underlineThickness && (a.style.borderBottomWidth = `${d.underlineThickness}px`), d.underlineOffset && (a.style.height = `${v.height + d.underlineOffset}px`), e.appendChild(a);
+            a.className = "r6o-annotation", a.dataset.annotation = w.annotation.id, a.style.left = `${v.x}px`, a.style.top = `${v.y}px`, a.style.width = `${v.width}px`, a.style.height = `${v.height}px`, a.style.backgroundColor = Y((d == null ? void 0 : d.fill) || P.fill).alpha((d == null ? void 0 : d.fillOpacity) === void 0 ? P.fillOpacity : d.fillOpacity).toHex(), d.underlineStyle && (a.style.borderStyle = d.underlineStyle), d.underlineColor && (a.style.borderColor = d.underlineColor), d.underlineThickness && (a.style.borderBottomWidth = `${d.underlineThickness}px`), d.underlineOffset && (a.style.paddingBottom = `${d.underlineOffset}px`), e.appendChild(a);
           }
         });
       }), n = s;
@@ -784,39 +784,39 @@ const We = (t, e) => {
       },
       state: [...t.values()]
     };
-    n.forEach((C) => {
-      We(C, A) && C.onChange(A);
+    n.forEach((S) => {
+      We(S, A) && S.onChange(A);
     });
   }, s = (b, x = N.LOCAL) => {
     if (t.get(b.id))
       throw Error(`Cannot add annotation ${b.id} - exists already`);
     t.set(b.id, b), b.bodies.forEach((A) => e.set(A.id, b.id)), r(x, { created: [b] });
   }, c = (b, x) => {
-    const A = typeof b == "string" ? x : b, C = typeof b == "string" ? b : b.id, R = t.get(C);
+    const A = typeof b == "string" ? x : b, S = typeof b == "string" ? b : b.id, R = t.get(S);
     if (R) {
       const O = Pt(R, A);
-      return C === A.id ? t.set(C, A) : (t.delete(C), t.set(A.id, A)), R.bodies.forEach((H) => e.delete(H.id)), A.bodies.forEach((H) => e.set(H.id, A.id)), O;
+      return S === A.id ? t.set(S, A) : (t.delete(S), t.set(A.id, A)), R.bodies.forEach((H) => e.delete(H.id)), A.bodies.forEach((H) => e.set(H.id, A.id)), O;
     } else
-      console.warn(`Cannot update annotation ${C} - does not exist`);
+      console.warn(`Cannot update annotation ${S} - does not exist`);
   }, u = (b, x = N.LOCAL, A = N.LOCAL) => {
-    const C = je(x) ? A : x, R = c(b, x);
-    R && r(C, { updated: [R] });
+    const S = je(x) ? A : x, R = c(b, x);
+    R && r(S, { updated: [R] });
   }, h = (b, x = N.LOCAL) => {
-    const A = b.reduce((C, R) => {
+    const A = b.reduce((S, R) => {
       const O = c(R);
-      return O ? [...C, O] : C;
+      return O ? [...S, O] : S;
     }, []);
     A.length > 0 && r(x, { updated: A });
   }, m = (b, x = N.LOCAL) => {
     const A = t.get(b.annotation);
     if (A) {
-      const C = {
+      const S = {
         ...A,
         bodies: [...A.bodies, b]
       };
-      t.set(A.id, C), e.set(b.id, C.id), r(x, { updated: [{
+      t.set(A.id, S), e.set(b.id, S.id), r(x, { updated: [{
         oldValue: A,
-        newValue: C,
+        newValue: S,
         bodiesCreated: [b]
       }] });
     } else
@@ -826,17 +826,17 @@ const We = (t, e) => {
     t.clear(), e.clear(), r(b, { deleted: x });
   }, f = (b, x = !0, A = N.LOCAL) => {
     if (x) {
-      const C = [...t.values()];
+      const S = [...t.values()];
       t.clear(), e.clear(), b.forEach((R) => {
         t.set(R.id, R), R.bodies.forEach((O) => e.set(O.id, R.id));
-      }), r(A, { created: b, deleted: C });
+      }), r(A, { created: b, deleted: S });
     } else {
-      const C = b.reduce((R, O) => {
+      const S = b.reduce((R, O) => {
         const H = t.get(O.id);
         return H ? [...R, H] : R;
       }, []);
-      if (C.length > 0)
-        throw Error(`Bulk insert would overwrite the following annotations: ${C.map((R) => R.id).join(", ")}`);
+      if (S.length > 0)
+        throw Error(`Bulk insert would overwrite the following annotations: ${S.map((R) => R.id).join(", ")}`);
       b.forEach((R) => {
         t.set(R.id, R), R.bodies.forEach((O) => e.set(O.id, R.id));
       }), r(A, { created: b });
@@ -844,30 +844,30 @@ const We = (t, e) => {
   }, w = (b) => {
     const x = typeof b == "string" ? b : b.id, A = t.get(x);
     if (A)
-      return t.delete(x), A.bodies.forEach((C) => e.delete(C.id)), A;
+      return t.delete(x), A.bodies.forEach((S) => e.delete(S.id)), A;
     console.warn(`Attempt to delete missing annotation: ${x}`);
   }, v = (b, x = N.LOCAL) => {
     const A = w(b);
     A && r(x, { deleted: [A] });
   }, g = (b, x = N.LOCAL) => {
-    const A = b.reduce((C, R) => {
+    const A = b.reduce((S, R) => {
       const O = w(R);
-      return O ? [...C, O] : C;
+      return O ? [...S, O] : S;
     }, []);
     A.length > 0 && r(x, { deleted: A });
   }, d = (b) => {
     const x = t.get(b.annotation);
     if (x) {
-      const A = x.bodies.find((C) => C.id === b.id);
+      const A = x.bodies.find((S) => S.id === b.id);
       if (A) {
         e.delete(A.id);
-        const C = {
+        const S = {
           ...x,
           bodies: x.bodies.filter((R) => R.id !== b.id)
         };
-        return t.set(x.id, C), {
+        return t.set(x.id, S), {
           oldValue: x,
-          newValue: C,
+          newValue: S,
           bodiesDeleted: [A]
         };
       } else
@@ -878,41 +878,41 @@ const We = (t, e) => {
     const A = d(b);
     A && r(x, { updated: [A] });
   }, y = (b, x = N.LOCAL) => {
-    const A = b.map((C) => d(C)).filter(Boolean);
+    const A = b.map((S) => d(S)).filter(Boolean);
     A.length > 0 && r(x, { updated: A });
-  }, S = (b) => {
+  }, E = (b) => {
     const x = t.get(b);
     return x ? { ...x } : void 0;
   }, L = (b) => {
     const x = e.get(b);
     if (x) {
-      const A = S(x).bodies.find((C) => C.id === b);
+      const A = E(x).bodies.find((S) => S.id === b);
       if (A)
         return A;
       console.error(`Store integrity error: body ${b} in index, but not in annotation`);
     } else
       console.warn(`Attempt to retrieve missing body: ${b}`);
-  }, E = (b, x) => {
+  }, C = (b, x) => {
     if (b.annotation !== x.annotation)
       throw "Annotation integrity violation: annotation ID must be the same when updating bodies";
     const A = t.get(b.annotation);
     if (A) {
-      const C = A.bodies.find((O) => O.id === b.id), R = {
+      const S = A.bodies.find((O) => O.id === b.id), R = {
         ...A,
-        bodies: A.bodies.map((O) => O.id === C.id ? x : O)
+        bodies: A.bodies.map((O) => O.id === S.id ? x : O)
       };
-      return t.set(A.id, R), C.id !== x.id && (e.delete(C.id), e.set(x.id, R.id)), {
+      return t.set(A.id, R), S.id !== x.id && (e.delete(S.id), e.set(x.id, R.id)), {
         oldValue: A,
         newValue: R,
-        bodiesUpdated: [{ oldBody: C, newBody: x }]
+        bodiesUpdated: [{ oldBody: S, newBody: x }]
       };
     } else
       console.warn(`Attempt to add body to missing annotation ${b.annotation}`);
   }, T = (b, x, A = N.LOCAL) => {
-    const C = E(b, x);
-    C && r(A, { updated: [C] });
+    const S = C(b, x);
+    S && r(A, { updated: [S] });
   }, B = (b, x = N.LOCAL) => {
-    const A = b.map((C) => E({ id: C.id, annotation: C.annotation }, C)).filter(Boolean);
+    const A = b.map((S) => C({ id: S.id, annotation: S.annotation }, S)).filter(Boolean);
     r(x, { updated: A });
   }, M = (b) => {
     const x = t.get(b.annotation);
@@ -945,13 +945,13 @@ const We = (t, e) => {
     bulkUpdateAnnotation: h,
     bulkUpdateBodies: B,
     bulkUpdateTargets: (b, x = N.LOCAL) => {
-      const A = b.map((C) => M(C)).filter(Boolean);
+      const A = b.map((S) => M(S)).filter(Boolean);
       A.length > 0 && r(x, { updated: A });
     },
     clear: p,
     deleteAnnotation: v,
     deleteBody: a,
-    getAnnotation: S,
+    getAnnotation: E,
     getBody: L,
     observe: o,
     unobserve: i,
@@ -1036,8 +1036,8 @@ const Qe = 250, Je = (t) => {
     u.has(v) && setTimeout(() => {
       u.get(v).forEach((a) => {
         if (n) {
-          const y = Array.isArray(g) ? g.map((L) => n.serialize(L)) : n.serialize(g), S = d ? d instanceof PointerEvent ? d : n.serialize(d) : void 0;
-          a(y, S);
+          const y = Array.isArray(g) ? g.map((L) => n.serialize(L)) : n.serialize(g), E = d ? d instanceof PointerEvent ? d : n.serialize(d) : void 0;
+          a(y, E);
         } else
           a(g, d);
       });
@@ -1075,13 +1075,13 @@ const Qe = 250, Je = (t) => {
       ...a.bodiesDeleted || [],
       ...a.bodiesUpdated || []
     ].length > 0).forEach(({ oldValue: a, newValue: y }) => {
-      const S = h.find((L) => L.id === a.id) || a;
-      h = h.map((L) => L.id === a.id ? y : L), f("updateAnnotation", y, S);
+      const E = h.find((L) => L.id === a.id) || a;
+      h = h.map((L) => L.id === a.id ? y : L), f("updateAnnotation", y, E);
     });
   }, { origin: N.LOCAL }), i.observe((v) => {
     if (h) {
       const g = new Set(h.map((a) => a.id)), d = (v.changes.updated || []).filter(({ newValue: a }) => g.has(a.id)).map(({ newValue: a }) => a);
-      d.length > 0 && (h = h.map((a) => d.find((S) => S.id === a.id) || a));
+      d.length > 0 && (h = h.map((a) => d.find((E) => E.id === a.id) || a));
     }
   }, { origin: N.REMOTE });
   const w = (v) => (g) => {
@@ -1576,19 +1576,19 @@ function Ut(t, e, n, o, i) {
 const Cn = (t, e) => {
   const n = new yn(), o = /* @__PURE__ */ new Map(), i = (d, a) => {
     const y = d.selector.flatMap((L) => {
-      const E = $([L]) ? L.range : Dt(L, e).range;
-      return Array.from(E.getClientRects());
-    }), S = ce(y).map(({ left: L, top: E, right: T, bottom: B }) => new DOMRect(L - a.left, E - a.top, T - L, B - E));
-    return S.map((L) => {
-      const { x: E, y: T, width: B, height: M } = L;
+      const C = $([L]) ? L.range : Dt(L, e).range;
+      return Array.from(C.getClientRects());
+    }), E = ce(y).map(({ left: L, top: C, right: T, bottom: B }) => new DOMRect(L - a.left, C - a.top, T - L, B - C));
+    return E.map((L) => {
+      const { x: C, y: T, width: B, height: M } = L;
       return {
-        minX: E,
+        minX: C,
         minY: T,
-        maxX: E + B,
+        maxX: C + B,
         maxY: T + M,
         annotation: {
           id: d.annotation,
-          rects: S
+          rects: E
         }
       };
     });
@@ -1604,28 +1604,28 @@ const Cn = (t, e) => {
     u(d), c(d);
   }, m = (d, a = !0) => {
     a && s();
-    const y = e.getBoundingClientRect(), S = d.map((E) => ({ target: E, rects: i(E, y) }));
-    S.forEach(({ target: E, rects: T }) => o.set(E.annotation, T));
-    const L = S.flatMap(({ rects: E }) => E);
+    const y = e.getBoundingClientRect(), E = d.map((C) => ({ target: C, rects: i(C, y) }));
+    E.forEach(({ target: C, rects: T }) => o.set(C.annotation, T));
+    const L = E.flatMap(({ rects: C }) => C);
     n.load(L);
   }, l = (d, a, y = !1) => {
-    const S = n.search({
+    const E = n.search({
       minX: d,
       minY: a,
       maxX: d,
       maxY: a
-    }), L = (E) => E.annotation.rects.reduce((T, B) => T + B.width * B.height, 0);
-    return S.length > 0 ? (S.sort((E, T) => L(E) - L(T)), y ? S.map((E) => E.annotation.id) : [S[0].annotation.id]) : [];
+    }), L = (C) => C.annotation.rects.reduce((T, B) => T + B.width * B.height, 0);
+    return E.length > 0 ? (E.sort((C, T) => L(C) - L(T)), y ? E.map((C) => C.annotation.id) : [E[0].annotation.id]) : [];
   }, p = (d) => {
     const a = f(d);
     if (a.length === 0)
       return;
-    let y = a[0].left, S = a[0].top, L = a[0].right, E = a[0].bottom;
+    let y = a[0].left, E = a[0].top, L = a[0].right, C = a[0].bottom;
     for (let T = 1; T < a.length; T++) {
       const B = a[T];
-      y = Math.min(y, B.left), S = Math.min(S, B.top), L = Math.max(L, B.right), E = Math.max(E, B.bottom);
+      y = Math.min(y, B.left), E = Math.min(E, B.top), L = Math.max(L, B.right), C = Math.max(C, B.bottom);
     }
-    return new DOMRect(y, S, L - y, E - S);
+    return new DOMRect(y, E, L - y, C - E);
   }, f = (d) => {
     const a = o.get(d);
     return a ? a[0].annotation.rects : [];
@@ -1636,9 +1636,9 @@ const Cn = (t, e) => {
     getAt: l,
     getAnnotationBounds: p,
     getAnnotationRects: f,
-    getIntersecting: (d, a, y, S) => {
-      const L = n.search({ minX: d, minY: a, maxX: y, maxY: S }), E = new Set(L.map((T) => T.annotation.id));
-      return Array.from(E).map((T) => ({
+    getIntersecting: (d, a, y, E) => {
+      const L = n.search({ minX: d, minY: a, maxX: y, maxY: E }), C = new Set(L.map((T) => T.annotation.id));
+      return Array.from(C).map((T) => ({
         annotation: t.getAnnotation(T),
         rects: f(T)
       })).filter((T) => !!T.annotation);
@@ -1655,7 +1655,7 @@ const Cn = (t, e) => {
     const d = rt(v, t), a = $(d.target.selector);
     return a && n.addAnnotation(d, g), a;
   }, u = (v, g = !0, d = N.LOCAL) => {
-    const a = v.map((S) => rt(S, t)), y = a.filter((S) => !$(S.target.selector));
+    const a = v.map((E) => rt(E, t)), y = a.filter((E) => !$(E.target.selector));
     return y.length > 0 ? (console.warn("Could not revive all targets for these annotations:", y), n.bulkAddAnnotation(a, g, d), y) : (n.bulkAddAnnotation(a, g, d), []);
   }, h = (v, g = N.LOCAL) => {
     const d = v.map((y) => rt(y, t)), a = d.filter((y) => !$(y.target.selector));
@@ -1669,14 +1669,14 @@ const Cn = (t, e) => {
     const d = v.map((a) => it(a, t));
     n.bulkUpdateTargets(d, g);
   }, p = (v, g, d) => {
-    const a = o.getAt(v, g, !!d).map((S) => n.getAnnotation(S)), y = d ? a.filter(d) : a;
+    const a = o.getAt(v, g, !!d).map((E) => n.getAnnotation(E)), y = d ? a.filter(d) : a;
     return y.length > 0 ? y[0] : void 0;
   }, f = (v, g, d, a = 5) => {
     const y = o.getAnnotationRects(v);
     if (y.length !== 0) {
       if (g && d) {
-        const S = y.find(({ top: L, right: E, bottom: T, left: B }) => g >= B - a && g <= E + a && d >= L - a && d <= T + a);
-        if (S) return S;
+        const E = y.find(({ top: L, right: C, bottom: T, left: B }) => g >= B - a && g <= C + a && d >= L - a && d <= T + a);
+        if (E) return E;
       }
       return o.getAnnotationBounds(v);
     }
@@ -1703,7 +1703,7 @@ const Cn = (t, e) => {
   };
 }, Bn = () => {
   const t = document.createElement("canvas");
-  t.width = 2 * window.innerWidth, t.height = 2 * window.innerHeight, t.className = "r6o-highlight-layer presence";
+  t.width = 2 * window.innerWidth, t.height = 2 * window.innerHeight, t.className = "r6o-presence-layer";
   const e = t.getContext("2d");
   return e.scale(2, 2), e.translate(0.5, 0.5), t;
 }, Tn = (t, e, n = {}) => {
@@ -1726,8 +1726,8 @@ const Cn = (t, e) => {
       if (w) {
         const { height: v } = l.rects[0], g = l.rects[0].x + p.left, d = l.rects[0].y + p.top;
         i.fillStyle = w.appearance.color, i.fillRect(g - 2, d - 2.5, 2, v + 5);
-        const a = i.measureText(w.appearance.label), y = a.width + 6, S = a.actualBoundingBoxAscent + a.actualBoundingBoxDescent + 8, L = a.fontBoundingBoxAscent ? 8 : 6.5;
-        return i.fillRect(g - 2, d - 2.5 - S, y, S), i.fillStyle = "#fff", i.fillText(w.appearance.label, g + 1, d - L), {
+        const a = i.measureText(w.appearance.label), y = a.width + 6, E = a.actualBoundingBoxAscent + a.actualBoundingBoxDescent + 8, L = a.fontBoundingBoxAscent ? 8 : 6.5;
+        return i.fillRect(g - 2, d - 2.5 - E, y, E), i.fillStyle = "#fff", i.fillText(w.appearance.label, g + 1, d - L), {
           fill: w.appearance.color,
           fillOpacity: f ? 0.45 : 0.18
         };
@@ -1771,9 +1771,9 @@ const Cn = (t, e) => {
   const c = (a) => s = a, { store: u, selection: h } = e;
   let m, l = !1, p;
   const f = (a) => {
-    var S;
+    var E;
     if (!l) return;
-    !((S = a.target.parentElement) != null && S.closest(D)) ? m = {
+    !((E = a.target.parentElement) != null && E.closest(D)) ? m = {
       annotation: Ht(),
       selector: [],
       creator: i,
@@ -1791,13 +1791,13 @@ const Cn = (t, e) => {
     if (a.timeStamp - ((p == null ? void 0 : p.timeStamp) || a.timeStamp) < 1e3 && !m && f(p), y.isCollapsed || !l || !m) return;
     const L = y.getRangeAt(0);
     if (re(L)) return;
-    const E = Zt(L.cloneRange());
-    (E.length !== m.selector.length || E.some((b, x) => {
+    const C = Zt(L.cloneRange());
+    (C.length !== m.selector.length || C.some((b, x) => {
       var A;
       return b.toString() !== ((A = m.selector[x]) == null ? void 0 : A.quote);
     })) && (m = {
       ...m,
-      selector: E.map((b) => le(b, t, o)),
+      selector: C.map((b) => le(b, t, o)),
       updated: /* @__PURE__ */ new Date()
     }, u.getAnnotation(m.annotation) ? u.updateTarget(m, N.LOCAL) : (h.clear(), u.addAnnotation({
       id: m.annotation,
@@ -1807,22 +1807,22 @@ const Cn = (t, e) => {
   });
   n && document.addEventListener("selectionchange", w);
   const v = (a) => {
-    const { target: y, timeStamp: S, offsetX: L, offsetY: E, type: T } = a;
-    p = { ...a, target: y, timeStamp: S, offsetX: L, offsetY: E, type: T }, l = a.button === 0;
+    const { target: y, timeStamp: E, offsetX: L, offsetY: C, type: T } = a;
+    p = { ...a, target: y, timeStamp: E, offsetX: L, offsetY: C, type: T }, l = a.button === 0;
   };
   t.addEventListener("pointerdown", v);
   const g = (a) => {
-    var E;
-    if (!!((E = a.target.parentElement) != null && E.closest(D)) || !l)
+    var C;
+    if (!!((C = a.target.parentElement) != null && C.closest(D)) || !l)
       return;
-    const S = () => {
+    const E = () => {
       const { x: T, y: B } = t.getBoundingClientRect(), M = u.getAt(a.clientX - T, a.clientY - B, s);
       if (M) {
         const { selected: b } = h;
         (b.length !== 1 || b[0].id !== M.id) && h.clickSelect(M.id, a);
       } else h.isEmpty() || h.clear();
     }, L = a.timeStamp - p.timeStamp;
-    document.getSelection().isCollapsed && L < 300 ? (m = void 0, S()) : m && h.clickSelect(m.annotation, a);
+    document.getSelection().isCollapsed && L < 300 ? (m = void 0, E()) : m && h.clickSelect(m.annotation, a);
   };
   return document.addEventListener("pointerup", g), {
     destroy: () => {
@@ -1846,13 +1846,13 @@ const Cn = (t, e) => {
   p.setUser(h);
   const f = nn(o, c, n.adapter), w = () => h, v = (E) => {
     l.setFilter(E), p.setFilter(E);
-  }, g = (E) => l.setStyle(E), d = (E) => {
+  }, g = (E) => {
     h = E, p.setUser(E);
-  }, a = (E) => {
+  }, d = (E) => {
     E && (l.setPainter(Tn(t, E, n.presence)), E.on("selectionChange", () => l.redraw()));
-  }, y = (E) => {
+  }, a = (E) => {
     E ? i.setSelected(E) : i.clear();
-  }, S = (E) => l.setVisible(E);
+  };
   return {
     ...f,
     destroy: () => {
@@ -1861,12 +1861,13 @@ const Cn = (t, e) => {
     element: t,
     getUser: w,
     setFilter: v,
-    setStyle: g,
+    setStyle: l.setStyle.bind(l),
+    redraw: l.redraw.bind(l),
     redraw: l.redraw.bind(l),
-    setUser: d,
-    setSelected: y,
-    setPresenceProvider: a,
-    setVisible: S,
+    setUser: g,
+    setSelected: a,
+    setPresenceProvider: d,
+    setVisible: l.setVisible.bind(l),
     on: u.on,
     off: u.off,
     scrollIntoView: Rn(t, s),