@vectojs/core 1.4.0 → 1.5.0

package/README.md

@@ -112,6 +112,31 @@ This projection is intentionally thin. Applications still own accessible names,
 focus order, contrast, and correct control semantics. See the
 [accessibility guide](https://vectojs.org/learn/accessibility/).
 
+## Static content projection
+
+Canvas-rendered text can opt into browser-native find, translation, selection, and copy without
+turning the application into a DOM layout. Override `getContentProjection()` on the owning Entity;
+the Scene creates a transparent, position-synchronized mirror while the VMT remains authoritative:
+
+```ts
+class SelectableLabel extends Entity {
+  getContentProjection() {
+    return {
+      text: 'Selectable canvas text',
+      font: '18px Inter',
+      lineHeight: 24,
+      selectable: true,
+    };
+  }
+}
+```
+
+`selectable` controls whether the mirror receives pointer input. The Scene keeps projection order
+aligned with VMT order, removes descendant mirrors with their subtree, and hides mirrors fully
+outside the viewport or a `clipChildren` ancestor. Tooling can inspect the currently materialized
+node with `scene.getContentElement(entityId)`. Virtualized or non-materialized off-viewport text is
+not searchable until the application brings it into the active scene.
+
 ## Performance model
 
 Useful levers include on-demand rendering, viewport culling, spatial hashing, prepared text layout,

package/dist/index.js

@@ -549,6 +549,12 @@ var Scene = (_class2 = class _Scene {
       this.activePortalsThisFrame.delete(node.id);
       this.activePortalsPrevFrame.delete(node.id);
     }
+    const contentEl = this.contentElements.get(node.id);
+    if (contentEl) {
+      contentEl.remove();
+      this.contentElements.delete(node.id);
+      this.a11yNeedsReorder = true;
+    }
     const el = this.a11yElements.get(node.id);
     if (el) {
       if (el === this.focusedA11yElement) {
@@ -588,11 +594,6 @@ var Scene = (_class2 = class _Scene {
    * @param entity - The subtree whose shadow nodes should be removed.
    */
   detachA11y(entity) {
-    const contentEl = this.contentElements.get(entity.id);
-    if (contentEl) {
-      contentEl.remove();
-      this.contentElements.delete(entity.id);
-    }
     this.removeA11yRecursively(entity);
   }
   /**
@@ -1028,6 +1029,7 @@ var Scene = (_class2 = class _Scene {
       if (el) {
         el.remove();
         this.contentElements.delete(node.id);
+        this.a11yNeedsReorder = true;
       }
       return;
     }
@@ -1052,6 +1054,7 @@ var Scene = (_class2 = class _Scene {
       );
       this.a11yRoot.appendChild(el);
       this.contentElements.set(node.id, el);
+      this.a11yNeedsReorder = true;
     }
     if (el.textContent !== projection.text) el.textContent = projection.text;
     const font = _nullishCoalesce(projection.font, () => ( ""));
@@ -1078,6 +1081,7 @@ var Scene = (_class2 = class _Scene {
     el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
     let visible = true;
     if (node.width > 0 && node.height > 0) {
+      const worldCorners = [];
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -1087,12 +1091,29 @@ var Scene = (_class2 = class _Scene {
         const ly = i & 2 ? node.height : 0;
         const wx = a * lx + c * ly + e;
         const wy = b * lx + d * ly + f;
+        worldCorners.push({ x: wx, y: wy });
         if (wx < minX) minX = wx;
         if (wx > maxX) maxX = wx;
         if (wy < minY) minY = wy;
         if (wy > maxY) maxY = wy;
       }
       visible = maxX >= 0 && minX <= this.width && maxY >= 0 && minY <= this.height;
+      for (let ancestor = node.parent; visible && ancestor; ancestor = ancestor.parent) {
+        if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
+        let localMinX = Infinity;
+        let localMinY = Infinity;
+        let localMaxX = -Infinity;
+        let localMaxY = -Infinity;
+        for (const corner of worldCorners) {
+          const local = ancestor.worldToLocal(corner.x, corner.y);
+          if (!local) continue;
+          localMinX = Math.min(localMinX, local.x);
+          localMinY = Math.min(localMinY, local.y);
+          localMaxX = Math.max(localMaxX, local.x);
+          localMaxY = Math.max(localMaxY, local.y);
+        }
+        visible = localMaxX >= 0 && localMinX <= ancestor.width && localMaxY >= 0 && localMinY <= ancestor.height;
+      }
     }
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
@@ -1640,6 +1661,10 @@ var Scene = (_class2 = class _Scene {
   getA11yElement(entityId) {
     return this.a11yElements.get(entityId);
   }
+  /** Gets the static-content DOM projection for an entity ID, when materialized. */
+  getContentElement(entityId) {
+    return this.contentElements.get(entityId);
+  }
   /**
    * Gets the root entity of the scene.
    */

package/dist/index.mjs

@@ -549,6 +549,12 @@ var Scene = class _Scene {
       this.activePortalsThisFrame.delete(node.id);
       this.activePortalsPrevFrame.delete(node.id);
     }
+    const contentEl = this.contentElements.get(node.id);
+    if (contentEl) {
+      contentEl.remove();
+      this.contentElements.delete(node.id);
+      this.a11yNeedsReorder = true;
+    }
     const el = this.a11yElements.get(node.id);
     if (el) {
       if (el === this.focusedA11yElement) {
@@ -588,11 +594,6 @@ var Scene = class _Scene {
    * @param entity - The subtree whose shadow nodes should be removed.
    */
   detachA11y(entity) {
-    const contentEl = this.contentElements.get(entity.id);
-    if (contentEl) {
-      contentEl.remove();
-      this.contentElements.delete(entity.id);
-    }
     this.removeA11yRecursively(entity);
   }
   /**
@@ -1028,6 +1029,7 @@ var Scene = class _Scene {
       if (el) {
         el.remove();
         this.contentElements.delete(node.id);
+        this.a11yNeedsReorder = true;
       }
       return;
     }
@@ -1052,6 +1054,7 @@ var Scene = class _Scene {
       );
       this.a11yRoot.appendChild(el);
       this.contentElements.set(node.id, el);
+      this.a11yNeedsReorder = true;
     }
     if (el.textContent !== projection.text) el.textContent = projection.text;
     const font = projection.font ?? "";
@@ -1078,6 +1081,7 @@ var Scene = class _Scene {
     el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
     let visible = true;
     if (node.width > 0 && node.height > 0) {
+      const worldCorners = [];
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -1087,12 +1091,29 @@ var Scene = class _Scene {
         const ly = i & 2 ? node.height : 0;
         const wx = a * lx + c * ly + e;
         const wy = b * lx + d * ly + f;
+        worldCorners.push({ x: wx, y: wy });
         if (wx < minX) minX = wx;
         if (wx > maxX) maxX = wx;
         if (wy < minY) minY = wy;
         if (wy > maxY) maxY = wy;
       }
       visible = maxX >= 0 && minX <= this.width && maxY >= 0 && minY <= this.height;
+      for (let ancestor = node.parent; visible && ancestor; ancestor = ancestor.parent) {
+        if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
+        let localMinX = Infinity;
+        let localMinY = Infinity;
+        let localMaxX = -Infinity;
+        let localMaxY = -Infinity;
+        for (const corner of worldCorners) {
+          const local = ancestor.worldToLocal(corner.x, corner.y);
+          if (!local) continue;
+          localMinX = Math.min(localMinX, local.x);
+          localMinY = Math.min(localMinY, local.y);
+          localMaxX = Math.max(localMaxX, local.x);
+          localMaxY = Math.max(localMaxY, local.y);
+        }
+        visible = localMaxX >= 0 && localMinX <= ancestor.width && localMaxY >= 0 && localMinY <= ancestor.height;
+      }
     }
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
@@ -1640,6 +1661,10 @@ var Scene = class _Scene {
   getA11yElement(entityId) {
     return this.a11yElements.get(entityId);
   }
+  /** Gets the static-content DOM projection for an entity ID, when materialized. */
+  getContentElement(entityId) {
+    return this.contentElements.get(entityId);
+  }
   /**
    * Gets the root entity of the scene.
    */

package/dist/tree/Scene.d.ts

@@ -330,6 +330,8 @@ export declare class Scene {
      * Gets the accessibility DOM element projected for the given entity ID.
      */
     getA11yElement(entityId: string): HTMLElement | undefined;
+    /** Gets the static-content DOM projection for an entity ID, when materialized. */
+    getContentElement(entityId: string): HTMLElement | undefined;
     /**
      * Gets the root entity of the scene.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "publishConfig": {
     "access": "public"
   },