@readium/decorator 1.1.1 → 1.2.0

package/README.md

@@ -87,12 +87,22 @@ class DecorationController {
     registerDecorationObserver(group: string, observer: DecorationObserver): void
     unregisterDecorationObserver(observer: DecorationObserver): void
 
+    // Watches an additional element for resize, so decorations relay out when it resizes
+    // even if the document's own size doesn't change (e.g. a sidebar collapsing and the
+    // reading pane reflowing inside it). Selector is resolved against the Decorator's document.
+    addDecorationResizeTarget(selector: string): void
+    removeDecorationResizeTarget(selector: string): void
+
     destroy(): void
 }
 
 interface DecorationControllerConfig {
     // Named style templates. Register a template here and reference it by ID in decoration styles.
     decorationTemplates?: Record<string, HTMLDecorationTemplate>;
+
+    // CSS selectors to watch for resize from construction, equivalent to calling
+    // addDecorationResizeTarget() for each one right after construction.
+    resizeWatchSelectors?: string[];
 }
 ```
 
@@ -165,7 +175,7 @@ interface IComms {
 | `BuiltinDecorationStyle` | `{ type?, tint?, layout?, width?, enforceContrast?, expand? }` |
 | `HTMLDecorationTemplate` | `{ type: "template", layout, width, element, stylesheet? }` — `element` is a function `(decoration) => string`, resolved to HTML per decoration before rendering |
 | `NamedDecorationStyle` | `{ type: string }` — reference to a style registered in `DecoratorConfig.decorationTemplates` |
-| `DecoratorConfig` | `{ decorationTemplates? }` — same shape as `DecorationControllerConfig` (the latter is a type alias of this) |
+| `DecoratorConfig` | `{ decorationTemplates?, resizeWatchSelectors? }` — same shape as `DecorationControllerConfig` (the latter is a type alias of this) |
 | `DecorationStyleType` | `"highlight" \| "highlightUnderline" \| "underline" \| "strikethrough" \| "outline" \| "textColor" \| "mask" \| "template"` |
 | `DecorationLayout` | `"boxes" \| "bounds"` |
 | `DecorationWidth` | `"wrap" \| "viewport" \| "bounds" \| "page"` |

package/dist/controller/DecorationController.js

@@ -1 +1 @@
-import{supportsDecorationStyle as v,decorationsEqual as _,resolveDecorationForWire as d}from"../styles.js";class p{constructor(o,e={}){this.host=o,this._decorations=new Map,this._activationState=new Map,this._hoverState=new Map,this._observers=new Map,this._hoveredDecorations=new Map,this._config=e,o.on("decoration_activated",a=>{const t=a,r=this._decorations.get(t.group)?.find(i=>i.id===t.decorationId);r&&this._observers.get(t.group)?.forEach(i=>i.onDecorationActivated?.({group:t.group,decoration:r,rect:t.rect,point:t.point}))}),o.on("decoration_pointer_enter",a=>{const t=a,r=this._decorations.get(t.group)?.find(i=>i.id===t.decorationId);r&&(this._hoveredDecorations.set(t.group,r),this._observers.get(t.group)?.forEach(i=>i.onDecorationPointerEnter?.({group:t.group,decoration:r,rect:t.rect,point:t.point})))}),o.on("decoration_pointer_leave",a=>{const t=a,r=this._decorations.get(t.group)?.find(i=>i.id===t.decorationId)??this._hoveredDecorations.get(t.group);this._hoveredDecorations.delete(t.group),r&&this._observers.get(t.group)?.forEach(i=>i.onDecorationPointerLeave?.({group:t.group,decoration:r,rect:t.rect,point:t.point}))})}supportsDecorationStyle(o){return v(o,this._config.decorationTemplates)}applyDecorations(o,e){const a=this._decorations.get(e)??[],t=new Map(a.map(n=>[n.id,n])),r=new Map(o.map(n=>[n.id,n]));for(const[n,s]of t){const c=r.get(n);c?_(s,c)||this.host.send("decorate",{group:e,action:"update",decoration:d(c,this._config.decorationTemplates)}):this.host.send("decorate",{group:e,action:"remove",decoration:{id:n}})}for(const[n,s]of r)t.has(n)||this.host.send("decorate",{group:e,action:"add",decoration:d(s,this._config.decorationTemplates)});this._decorations.set(e,o);const i=this._activationState.get(e);i!==void 0&&this.host.send("decoration_activatable",{group:e,activatable:i});const h=this._hoverState.get(e);h!==void 0&&this.host.send("decoration_hoverable",{group:e,hoverable:h})}registerDecorationObserver(o,e){this._observers.has(o)||this._observers.set(o,new Set),this._observers.get(o).add(e),e.onDecorationActivated&&(this._activationState.set(o,!0),this.host.send("decoration_activatable",{group:o,activatable:!0})),(e.onDecorationPointerEnter||e.onDecorationPointerLeave)&&(this._hoverState.set(o,!0),this.host.send("decoration_hoverable",{group:o,hoverable:!0}))}unregisterDecorationObserver(o){this._observers.forEach((e,a)=>{if(!e.has(o))return;e.delete(o);const t=[...e].some(i=>i.onDecorationActivated);this._activationState.has(a)&&!t&&(this._activationState.delete(a),this.host.send("decoration_activatable",{group:a,activatable:!1}));const r=[...e].some(i=>i.onDecorationPointerEnter||i.onDecorationPointerLeave);this._hoverState.has(a)&&!r&&(this._hoverState.delete(a),this.host.send("decoration_hoverable",{group:a,hoverable:!1}))})}destroy(){this._decorations.clear(),this._activationState.clear(),this._hoverState.clear(),this._observers.clear(),this._hoveredDecorations.clear()}}export{p as DecorationController};
+import{supportsDecorationStyle as v,decorationsEqual as _,resolveDecorationForWire as d}from"../styles.js";class p{constructor(e,o={}){this.host=e,this._decorations=new Map,this._activationState=new Map,this._hoverState=new Map,this._observers=new Map,this._hoveredDecorations=new Map,this._config=o,o.resizeWatchSelectors?.forEach(a=>this.addDecorationResizeTarget(a)),e.on("decoration_activated",a=>{const t=a,r=this._decorations.get(t.group)?.find(i=>i.id===t.decorationId);r&&this._observers.get(t.group)?.forEach(i=>i.onDecorationActivated?.({group:t.group,decoration:r,rect:t.rect,point:t.point}))}),e.on("decoration_pointer_enter",a=>{const t=a,r=this._decorations.get(t.group)?.find(i=>i.id===t.decorationId);r&&(this._hoveredDecorations.set(t.group,r),this._observers.get(t.group)?.forEach(i=>i.onDecorationPointerEnter?.({group:t.group,decoration:r,rect:t.rect,point:t.point})))}),e.on("decoration_pointer_leave",a=>{const t=a,r=this._decorations.get(t.group)?.find(i=>i.id===t.decorationId)??this._hoveredDecorations.get(t.group);this._hoveredDecorations.delete(t.group),r&&this._observers.get(t.group)?.forEach(i=>i.onDecorationPointerLeave?.({group:t.group,decoration:r,rect:t.rect,point:t.point}))})}addDecorationResizeTarget(e){this.host.send("decoration_resize",{action:"watch",selector:e})}removeDecorationResizeTarget(e){this.host.send("decoration_resize",{action:"unwatch",selector:e})}supportsDecorationStyle(e){return v(e,this._config.decorationTemplates)}applyDecorations(e,o){const a=this._decorations.get(o)??[],t=new Map(a.map(s=>[s.id,s])),r=new Map(e.map(s=>[s.id,s]));for(const[s,n]of t){const c=r.get(s);c?_(n,c)||this.host.send("decorate",{group:o,action:"update",decoration:d(c,this._config.decorationTemplates)}):this.host.send("decorate",{group:o,action:"remove",decoration:{id:s}})}for(const[s,n]of r)t.has(s)||this.host.send("decorate",{group:o,action:"add",decoration:d(n,this._config.decorationTemplates)});this._decorations.set(o,e);const i=this._activationState.get(o);i!==void 0&&this.host.send("decoration_activatable",{group:o,activatable:i});const h=this._hoverState.get(o);h!==void 0&&this.host.send("decoration_hoverable",{group:o,hoverable:h})}registerDecorationObserver(e,o){this._observers.has(e)||this._observers.set(e,new Set),this._observers.get(e).add(o),o.onDecorationActivated&&(this._activationState.set(e,!0),this.host.send("decoration_activatable",{group:e,activatable:!0})),(o.onDecorationPointerEnter||o.onDecorationPointerLeave)&&(this._hoverState.set(e,!0),this.host.send("decoration_hoverable",{group:e,hoverable:!0}))}unregisterDecorationObserver(e){this._observers.forEach((o,a)=>{if(!o.has(e))return;o.delete(e);const t=[...o].some(i=>i.onDecorationActivated);this._activationState.has(a)&&!t&&(this._activationState.delete(a),this.host.send("decoration_activatable",{group:a,activatable:!1}));const r=[...o].some(i=>i.onDecorationPointerEnter||i.onDecorationPointerLeave);this._hoverState.has(a)&&!r&&(this._hoverState.delete(a),this.host.send("decoration_hoverable",{group:a,hoverable:!1}))})}destroy(){this._decorations.clear(),this._activationState.clear(),this._hoverState.clear(),this._observers.clear(),this._hoveredDecorations.clear()}}export{p as DecorationController};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/decorator",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "description": "Standalone decoration controller and renderer for HTML content",
   "author": "readium",
@@ -32,7 +32,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@readium/navigator-html-injectables": "2.7.1",
+    "@readium/navigator-html-injectables": "2.8.0",
     "@readium/shared": "2.5.0"
   },
   "devDependencies": {

package/src/controller/DecorationController.ts

@@ -16,6 +16,7 @@ export class DecorationController {
 
     constructor(private readonly host: DirectCommsHost, config: DecorationControllerConfig = {}) {
         this._config = config;
+        config.resizeWatchSelectors?.forEach(selector => this.addDecorationResizeTarget(selector));
         host.on("decoration_activated", (raw) => {
             const ev = raw as DecorationActivatedEvent;
             const decoration = this._decorations.get(ev.group)?.find(d => d.id === ev.decorationId);
@@ -47,6 +48,14 @@ export class DecorationController {
         });
     }
 
+    addDecorationResizeTarget(selector: string): void {
+        this.host.send("decoration_resize", { action: "watch", selector });
+    }
+
+    removeDecorationResizeTarget(selector: string): void {
+        this.host.send("decoration_resize", { action: "unwatch", selector });
+    }
+
     supportsDecorationStyle(styleTypeId: string): boolean {
         return supportsDecorationStyle(styleTypeId, this._config.decorationTemplates);
     }

package/src/styles.ts

@@ -36,6 +36,13 @@ export interface DecoratorConfig {
      * Template-type decoration.
      */
     decorationTemplates?: Record<string, HTMLDecorationTemplate>;
+
+    /**
+     * CSS selectors of additional elements to watch for resize, so decoration overlays are
+     * relaid-out when they resize for reasons that don't affect the document's own size
+     * (e.g. a sidebar collapsing and the reading pane reflowing within a flex/grid layout).
+     */
+    resizeWatchSelectors?: string[];
 }
 
 export const BUILTIN_DECORATION_TYPES = new Set<string>(Object.values(DecorationStyleType));

package/types/src/controller/DecorationController.d.ts

@@ -11,6 +11,8 @@ export declare class DecorationController {
     private _hoveredDecorations;
     private readonly _config;
     constructor(host: DirectCommsHost, config?: DecorationControllerConfig);
+    addDecorationResizeTarget(selector: string): void;
+    removeDecorationResizeTarget(selector: string): void;
     supportsDecorationStyle(styleTypeId: string): boolean;
     applyDecorations(decorations: Decoration[], group: string): void;
     registerDecorationObserver(group: string, observer: DecorationObserver): void;

package/types/src/styles.d.ts

@@ -25,6 +25,12 @@ export interface DecoratorConfig {
      * Template-type decoration.
      */
     decorationTemplates?: Record<string, HTMLDecorationTemplate>;
+    /**
+     * CSS selectors of additional elements to watch for resize, so decoration overlays are
+     * relaid-out when they resize for reasons that don't affect the document's own size
+     * (e.g. a sidebar collapsing and the reading pane reflowing within a flex/grid layout).
+     */
+    resizeWatchSelectors?: string[];
 }
 export declare const BUILTIN_DECORATION_TYPES: Set<string>;
 /**