@ev-ry/fx 0.1.0-rc.1 → 0.1.0-rc.3

package/src/dom-svg-surface.js

@@ -1,42 +1,44 @@
-import {revealOpacity} from './dom-reveal.js';
-import {attachImageSurface} from './dom-image-surface.js';
-function snapshot(element){
-  if(element.querySelector('script,foreignObject,use,image,text,animate,animateTransform,animateMotion'))throw Error('Unsupported SVG content');
-  const view=element.ownerDocument.defaultView,clone=element.cloneNode(true),nodes=[element,...element.querySelectorAll('*')],copies=[clone,...clone.querySelectorAll('*')];
-  for(let i=0;i<nodes.length;i++){
-    const css=view.getComputedStyle(nodes[i]),copy=copies[i];
-    if(css.filter!=='none'||css.clipPath!=='none'||css.maskImage!=='none'||css.transform!=='none'&&!nodes[i].hasAttribute('transform'))throw Error('Unsupported SVG geometry');
-    copy.removeAttribute('class');copy.removeAttribute('style');
-    for(const prop of ['fill','stroke','stroke-width','stroke-linecap','stroke-linejoin','stroke-miterlimit','stroke-dasharray','stroke-dashoffset','fill-rule','fill-opacity','stroke-opacity','opacity','color','paint-order','vector-effect','display']){const value=prop==='opacity'&&i===0&&revealOpacity.has(element)?revealOpacity.get(element):css.getPropertyValue(prop);if(/url\(/i.test(value))throw Error('SVG paint references unsupported');if(value)copy.style.setProperty(prop,value);}
-  }
-  clone.querySelectorAll('style').forEach(e=>e.remove());clone.setAttribute('xmlns','http://www.w3.org/2000/svg');const r=element.getBoundingClientRect();clone.setAttribute('width',r.width);clone.setAttribute('height',r.height);return new view.XMLSerializer().serializeToString(clone);
-}
-export function attachSVGSurface(element,THREE,options={}){
-  if(element?.localName!=='svg'||!element.parentElement)throw TypeError('A mounted SVG is required');
-  const document=element.ownerDocument,view=document.defaultView,parent=element.parentElement,oldVisibility=element.style.visibility;
-  const image=document.createElement('img');image.alt='';image.setAttribute('aria-hidden','true');Object.assign(image.style,{position:'absolute',pointerEvents:'none',opacity:'0'});parent.append(image);
-  let disposed=false,revision=0,timer=null,reason=null,xml='',surface,resolve;const ready=new Promise(r=>resolve=r);
-  function restore(){if(element.style.visibility==='hidden')element.style.visibility=oldVisibility;}
-  function present(state){
-    if(disposed)return;
-    if(state.mode==='mesh'||state.reason==='hidden after exit'){if(element.style.visibility!=='hidden')element.style.visibility='hidden';}else restore();
-    reason=state.reason;
-    if(state.mode==='mesh'||state.reason)resolve(state);
-  }
-  async function refresh(){if(disposed)return;const token=++revision;clearTimeout(timer);
-    try{const next=snapshot(element),r=element.getBoundingClientRect(),p=parent.getBoundingClientRect();if(!(r.width>0&&r.height>0))throw Error('SVG not visible');
-      Object.assign(image.style,{left:(r.left-p.left-parent.clientLeft+parent.scrollLeft)+'px',top:(r.top-p.top-parent.clientTop+parent.scrollTop)+'px',width:r.width+'px',height:r.height+'px'});
-      if(next!==xml){xml=next;restore();image.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(xml);}
-      if(!surface)surface=attachImageSurface(image,THREE,{...options,onPresentation:present});
-      await surface.refresh();if(disposed||token!==revision)return;
-      const settle=()=>{if(disposed||token!==revision)return;const s=surface.stats();if(s.mode==='mesh'||s.reason)present(s);else timer=setTimeout(settle,16);};settle();
-    }catch(error){reason=error.message;xml='';surface?.destroy();surface=null;restore();resolve({mode:'native',reason});}
-  }
-  const styleKey=()=>element.style.cssText.replace(/(?:^|;)\s*visibility\s*:[^;]*/g,'');let lastStyle=styleKey();
-  const observer=new view.MutationObserver(records=>{const next=styleKey();if(records.some(r=>r.target!==element||r.attributeName!=='style')||next!==lastStyle){lastStyle=next;refresh();}});
-  observer.observe(element,{subtree:true,attributes:true,childList:true,characterData:true});for(let a=parent;a;a=a.parentElement)observer.observe(a,{attributes:true,attributeFilter:['class','style']});
-  const resize=new view.ResizeObserver(refresh);resize.observe(element);refresh();
-  return {element,ready,refresh,cancel:()=>surface?.cancel(),play(phase='enter'){if(!['enter','exit'].includes(phase))throw TypeError('Expected enter or exit');if(phase==='enter'&&surface?.stats().image?.source)element.style.visibility='hidden';surface?.play(phase);},update(next){options={...options,...next};surface?.update(next);},stats:()=>({...surface?.stats(),disposed,reason:reason||surface?.stats().reason,mode:reason?'native':surface?.stats().mode||'native'}),destroy(){if(disposed)return;disposed=true;revision++;clearTimeout(timer);observer.disconnect();resize.disconnect();surface?.destroy();image.remove();restore();resolve({mode:'native',reason:'destroyed'});}};
+import {revealOpacity} from './dom-reveal.js';
+import {attachImageSurface} from './dom-image-surface.js';
+function snapshot(element){
+  if(element.querySelector('script,foreignObject,use,image,text,animate,animateTransform,animateMotion'))throw Error('Unsupported SVG content');
+  const view=element.ownerDocument.defaultView,clone=element.cloneNode(true),nodes=[element,...element.querySelectorAll('*')],copies=[clone,...clone.querySelectorAll('*')];
+  for(let i=0;i<nodes.length;i++){
+    const css=view.getComputedStyle(nodes[i]),copy=copies[i];
+    if(css.filter!=='none'||css.clipPath!=='none'||css.maskImage!=='none'||css.transform!=='none'&&!nodes[i].hasAttribute('transform'))throw Error('Unsupported SVG geometry');
+    copy.removeAttribute('class');copy.removeAttribute('style');
+    for(const prop of ['fill','stroke','stroke-width','stroke-linecap','stroke-linejoin','stroke-miterlimit','stroke-dasharray','stroke-dashoffset','fill-rule','fill-opacity','stroke-opacity','opacity','color','paint-order','vector-effect','display']){const value=prop==='opacity'&&i===0&&revealOpacity.has(element)?revealOpacity.get(element):css.getPropertyValue(prop);if(/url\(/i.test(value))throw Error('SVG paint references unsupported');if(value)copy.style.setProperty(prop,value);}
+  }
+  clone.querySelectorAll('style').forEach(e=>e.remove());clone.setAttribute('xmlns','http://www.w3.org/2000/svg');const r=element.getBoundingClientRect();clone.setAttribute('width',r.width);clone.setAttribute('height',r.height);return new view.XMLSerializer().serializeToString(clone);
+}
+export function attachSVGSurface(element,THREE,options={}){
+  if(element?.localName!=='svg'||!element.parentElement)throw TypeError('A mounted SVG is required');
+  const document=element.ownerDocument,view=document.defaultView,parent=element.parentElement,oldVisibility=element.style.visibility;
+  const image=document.createElement('img');image.alt='';image.setAttribute('aria-hidden','true');Object.assign(image.style,{position:'absolute',pointerEvents:'none',opacity:'0'});parent.append(image);
+  let disposed=false,revision=0,timer=null,reason=null,xml='',surface,resolve;const ready=new Promise(r=>resolve=r);
+  function restore(){if(element.style.visibility==='hidden')element.style.visibility=oldVisibility;}
+  function present(state){
+    if(disposed)return;
+    // The image adapter exposes native pixels before its settled mesh finishes
+    // fading. An explicit hidden:false must win over the remaining mesh mode.
+    if(state.hidden??(state.mode==='mesh'||state.reason==='hidden after exit')){if(element.style.visibility!=='hidden')element.style.visibility='hidden';}else restore();
+    reason=state.reason;
+    if(state.mode==='mesh'||state.reason)resolve(state);
+  }
+  async function refresh(){if(disposed)return;const token=++revision;clearTimeout(timer);
+    try{const next=snapshot(element),r=element.getBoundingClientRect(),p=parent.getBoundingClientRect();if(!(r.width>0&&r.height>0))throw Error('SVG not visible');
+      Object.assign(image.style,{left:(r.left-p.left-parent.clientLeft+parent.scrollLeft)+'px',top:(r.top-p.top-parent.clientTop+parent.scrollTop)+'px',width:r.width+'px',height:r.height+'px'});
+      if(next!==xml){xml=next;if(!surface)restore();image.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(xml);}
+      if(!surface)surface=attachImageSurface(image,THREE,{...options,onPresentation:present});
+      await surface.refresh();if(disposed||token!==revision)return;
+      const settle=()=>{if(disposed||token!==revision)return;const s=surface.stats();if(s.mode==='mesh'||s.reason)present(s);else timer=setTimeout(settle,16);};settle();
+    }catch(error){xml='';surface?.destroy();surface=null;restore();reason=error.message;resolve({mode:'native',reason});}
+  }
+  const styleKey=()=>element.style.cssText.replace(/(?:^|;)\s*visibility\s*:[^;]*/g,'');let lastStyle=styleKey();
+  const observer=new view.MutationObserver(records=>{const next=styleKey();if(records.some(r=>r.target!==element||r.attributeName!=='style')||next!==lastStyle){lastStyle=next;refresh();}});
+  observer.observe(element,{subtree:true,attributes:true,childList:true,characterData:true});for(let a=parent;a;a=a.parentElement)observer.observe(a,{attributes:true,attributeFilter:['class','style']});
+  const resize=new view.ResizeObserver(refresh);resize.observe(element);refresh();
+  return {element,ready,refresh,cancel:()=>surface?.cancel(),play(phase='enter'){if(!['enter','exit'].includes(phase))throw TypeError('Expected enter or exit');if(phase==='enter'&&surface?.stats().image?.source)element.style.visibility='hidden';surface?.play(phase);},update(next){options={...options,...next};surface?.update(next);},stats:()=>({...surface?.stats(),disposed,reason:reason||surface?.stats().reason,mode:reason?'native':surface?.stats().mode||'native'}),destroy(){if(disposed)return;disposed=true;revision++;clearTimeout(timer);observer.disconnect();resize.disconnect();surface?.destroy();image.remove();restore();resolve({mode:'native',reason:'destroyed'});}};
 }
 
 

package/src/dom-text-fingerprint.js

@@ -1,27 +1,27 @@
-// Validate native layout with whole-node line boxes before the expensive
-// per-grapheme placement pass. Coordinates are relative to the slot, so page
-// scrolling does not invalidate text geometry. Node identity matters: identical
-// replacement markup still needs fresh run references.
-const fields=['display','visibility','fontFamily','fontSize','fontWeight','fontStyle','fontStretch','fontFeatureSettings','fontVariationSettings','fontKerning','fontVariant','fontOpticalSizing','lineHeight','direction','unicodeBidi','whiteSpace','letterSpacing','wordSpacing','verticalAlign','textAlign','textIndent','textTransform','textDecorationLine','writingMode','textOrientation','wordBreak','overflowWrap','hyphens','tabSize','opacity','transform','overflowX','overflowY','color'];
-export function createDOMTextFingerprint(element,canvas){
-  const document=element.ownerDocument,window=document.defaultView,ids=new WeakMap();let sequence=0;
-  const id=node=>{if(!ids.has(node))ids.set(node,++sequence);return ids.get(node);};
-  return ()=>{
-    const box=element.getBoundingClientRect(),left=box.left+element.clientLeft,top=box.top+element.clientTop;
-    const parts=[element.isConnected,element.clientWidth||box.width,element.clientHeight||box.height,element.clientLeft,element.clientTop];
-    function visit(node){
-      if(node===canvas)return;
-      if(node.nodeType===3){
-        const range=document.createRange();range.selectNodeContents(node);
-        parts.push(['text',id(node),node.data,[...range.getClientRects()].map(r=>[r.left-left,r.top-top,r.width,r.height])]);return;
-      }
-      if(node.nodeType!==1)return;
-      const style=window.getComputedStyle(node);
-      parts.push(['element',id(node),node.localName,node.isContentEditable,fields.map(name=>style[name])]);
-      for(const pseudo of ['::before','::after']){const css=window.getComputedStyle(node,pseudo);parts.push([css.display,css.content]);}
-      for(const child of node.childNodes)visit(child);
-      parts.push('end');
-    }
-    visit(element);return JSON.stringify(parts);
-  };
-}
+// Validate native layout with whole-node line boxes before the expensive
+// per-grapheme placement pass. Coordinates are relative to the slot, so page
+// scrolling does not invalidate text geometry. Node identity matters: identical
+// replacement markup still needs fresh run references.
+const fields=['display','visibility','fontFamily','fontSize','fontWeight','fontStyle','fontStretch','fontFeatureSettings','fontVariationSettings','fontKerning','textRendering','fontVariant','fontOpticalSizing','lineHeight','direction','unicodeBidi','whiteSpace','letterSpacing','wordSpacing','verticalAlign','textAlign','textIndent','textTransform','textDecorationLine','writingMode','textOrientation','wordBreak','overflowWrap','hyphens','tabSize','opacity','transform','overflowX','overflowY','color'];
+export function createDOMTextFingerprint(element,canvas){
+  const document=element.ownerDocument,window=document.defaultView,ids=new WeakMap();let sequence=0;
+  const id=node=>{if(!ids.has(node))ids.set(node,++sequence);return ids.get(node);};
+  return ()=>{
+    const box=element.getBoundingClientRect(),left=box.left+element.clientLeft,top=box.top+element.clientTop;
+    const parts=[element.isConnected,element.clientWidth||box.width,element.clientHeight||box.height,element.clientLeft,element.clientTop];
+    function visit(node){
+      if(node===canvas)return;
+      if(node.nodeType===3){
+        const range=document.createRange();range.selectNodeContents(node);
+        parts.push(['text',id(node),node.data,[...range.getClientRects()].map(r=>[r.left-left,r.top-top,r.width,r.height])]);return;
+      }
+      if(node.nodeType!==1)return;
+      const style=window.getComputedStyle(node);
+      parts.push(['element',id(node),node.localName,node.isContentEditable,fields.map(name=>style[name])]);
+      for(const pseudo of ['::before','::after']){const css=window.getComputedStyle(node,pseudo);parts.push([css.display,css.content]);}
+      for(const child of node.childNodes)visit(child);
+      parts.push('end');
+    }
+    visit(element);return JSON.stringify(parts);
+  };
+}

package/src/dom-text-paint-mask.js

@@ -0,0 +1,24 @@
+// Hide native text without hiding the canvas or changing layout/raster colors.
+// This temporary owner covers cold rich text before its measured runs exist.
+export function createTextPaintMask(element,canvas){
+  const document=element.ownerDocument,window=document.defaultView,styles=new Map();
+  function hold(){
+    const parents=new Set(),walker=document.createTreeWalker(element,window.NodeFilter.SHOW_TEXT);
+    while(walker.nextNode())if(walker.currentNode.data.trim()&&!canvas?.contains(walker.currentNode))parents.add(walker.currentNode.parentElement);
+    for(const node of parents){
+      let values=styles.get(node);if(!values){values=new Map();styles.set(node,values);}
+      for(const [name,value] of [['-webkit-text-fill-color','transparent'],['text-shadow','none']]){
+        if(!values.has(name))values.set(name,[node.style.getPropertyValue(name),node.style.getPropertyPriority(name),value]);
+        if(node.style.getPropertyValue(name)!==value||node.style.getPropertyPriority(name)!=='important')node.style.setProperty(name,value,'important');
+      }
+    }
+  }
+  function release(){
+    for(const [node,values] of styles)for(const [name,[original,priority,owned]] of values){
+      if(node.style.getPropertyValue(name)!==owned||node.style.getPropertyPriority(name)!=='important')continue;
+      if(original)node.style.setProperty(name,original,priority);else node.style.removeProperty(name);
+    }
+    styles.clear();
+  }
+  return {hold,release};
+}