graview 0.1.66 → 0.1.68

package/dist/preview/chunk.ZBVYD4OX.js

@@ -1,90 +0,0 @@
-import{a as k,b as A,c as L,d as _,e as E,r as B,s as V,t as H,u as N,v as q}from"./chunk.OJGHDWI6.js";import"./chunk.6HY6ZGEE.js";import"./chunk.FQLNBIQ5.js";import"./chunk.AJZBJBMO.js";var W=["drawElementImageToTexture","copyElementImageToTexture"],S=null,P=(r,e)=>r==="texture"?{texture:e}:{destination:{texture:e}};function Z(){return typeof globalThis>"u"?void 0:globalThis}function v(r,e){let t=[],n=Z(),o=!!(n?.navigator&&"gpu"in n.navigator);o||t.push("navigator.gpu is absent \u2014 WebGPU is unavailable.");let i=r??n?.GPUQueue?.prototype??void 0,a=null;if(i){for(let d of W)if(typeof i[d]=="function"){a=d;break}}a||t.push("No element-capture method on GPUQueue. Run Chromium 147+ with --enable-blink-features=CanvasDrawElement.");let c=e??n?.HTMLCanvasElement?.prototype??void 0,l=typeof c?.updateElementGeometry=="function";l||t.push("canvas.updateElementGeometry is absent \u2014 geometry cannot be reported.");let p=typeof c?.requestPaint=="function";p||t.push("canvas.requestPaint is absent \u2014 there is no capture-safe moment to hook.");let w=!1,h="unknown";if(typeof document<"u"){let d=document.createElement("canvas");w="layoutSubtree"in d||typeof d.captureElementImage=="function","layoutSubtree"in d?h="no":typeof d.captureElementImage=="function"&&(h="yes")}return{available:a!==null,captureMethod:a,geometrySync:l,hitTestFollowsGeometry:l?h:"no",layoutSubtree:w,paintEvents:p,webgpu:o,usable:o&&a!==null,notes:t}}var g=class extends Error{constructor(t){super(`HTML-in-Canvas is unavailable:
-  ${t.notes.join(`
-  `)}`);this.capabilities=t;this.name="PlatformUnavailableError"}};function G(r,e,t){let n=r;for(let o of W){let i=n[o];if(typeof i=="function"){if(S){i.call(n,{source:e},P(S,t));return}try{i.call(n,{source:e},P("texture",t)),S="texture"}catch(a){if(!(a instanceof TypeError)||!/texture/i.test(a.message))throw a;i.call(n,{source:e},P("destination",t)),S="destination"}return}}throw new g(v(r))}function M(r,e=!0){e?r.setAttribute("drawable",""):r.removeAttribute("drawable")}function F(r){let e=r.changedElements;return e?new Set(Array.from(e)):null}function ee(r,e){let t=r;if(typeof t.captureElementImage!="function")throw new g(v(void 0,r));return t.captureElementImage(e)}function O(r,e,t){let n=r;if(typeof n.updateElementGeometry!="function")throw new g(v(void 0,r));n.updateElementGeometry(e,t)}function te(r,e){r.clearElementGeometry?.(e)}function m(r){r.requestPaint?.()}function D(r,e=!0){let t=r;e?t.setAttribute("content","drawable"):t.removeAttribute("content"),"layoutSubtree"in t?t.layoutSubtree=e:e?t.setAttribute("layoutsubtree",""):t.removeAttribute("layoutsubtree")}var I=`
-struct Plane {
-  // x, y, width, height in canvas pixels, after the plane transform.
-  rect: vec4f,
-  // blur radius in texels, contrast falloff 0..1, shadow strength (cast by
-  // the view's own panel, so unused here), and the view's own opacity \u2014 which is how a node entering or leaving the scene
-  // fades rather than popping.
-  style: vec4f,
-  // canvas size in pixels, and the ground color's rgb packed as xyz.
-  canvas: vec4f,
-  ground: vec4f,
-}
-
-@group(0) @binding(0) var<uniform> plane: Plane;
-@group(0) @binding(1) var view_texture: texture_2d<f32>;
-@group(0) @binding(2) var view_sampler: sampler;
-
-struct VertexOut {
-  @builtin(position) position: vec4f,
-  @location(0) uv: vec2f,
-}
-
-@vertex
-fn vs_main(@builtin(vertex_index) index: u32) -> VertexOut {
-  // Two triangles, no vertex buffer: the quad is entirely a function of the
-  // plane rect, so nothing has to be uploaded per frame except the uniform.
-  var corners = array<vec2f, 6>(
-    vec2f(0.0, 0.0), vec2f(1.0, 0.0), vec2f(0.0, 1.0),
-    vec2f(0.0, 1.0), vec2f(1.0, 0.0), vec2f(1.0, 1.0),
-  );
-  let corner = corners[index];
-  let pixel = plane.rect.xy + corner * plane.rect.zw;
-  // Canvas pixels to clip space, y down.
-  let ndc = vec2f(
-    pixel.x / plane.canvas.x * 2.0 - 1.0,
-    1.0 - pixel.y / plane.canvas.y * 2.0,
-  );
-  var out: VertexOut;
-  out.position = vec4f(ndc, 0.0, 1.0);
-  out.uv = corner;
-  return out;
-}
-
-fn blurred(uv: vec2f, radius: f32) -> vec4f {
-  if (radius <= 0.0) {
-    return textureSample(view_texture, view_sampler, uv);
-  }
-  let size = vec2f(textureDimensions(view_texture, 0));
-  let step = radius / size;
-  var sum = vec4f(0.0);
-  var weight = 0.0;
-  // A 9-tap kernel: enough to read as depth-of-field at plane scale, cheap
-  // enough to run on every capture every frame.
-  for (var y = -1; y <= 1; y = y + 1) {
-    for (var x = -1; x <= 1; x = x + 1) {
-      let offset = vec2f(f32(x), f32(y)) * step;
-      let w = select(1.0, 2.0, x == 0 && y == 0);
-      sum = sum + textureSample(view_texture, view_sampler, uv + offset) * w;
-      weight = weight + w;
-    }
-  }
-  return sum / weight;
-}
-
-@fragment
-fn fs_main(in: VertexOut) -> @location(0) vec4f {
-  let radius = plane.style.x;
-  let falloff = plane.style.y;
-  let opacity = plane.style.w;
-
-  let color = blurred(in.uv, radius);
-
-  // Recession dims the view toward whatever is under it \u2014 the ground \u2014 by
-  // the same share the DOM path's \`opacity\` does (\`recededOpacity\`), and
-  // the plane's shadow is the view's own panel, captured with it. Mixing
-  // toward a fixed ground color and darkening the quad's edges here drew a
-  // different picture from the DOM path's: gray bands down a light card,
-  // and haze of the wrong color in the other scheme.
-  let alpha = opacity * (1.0 - falloff * 0.55);
-
-  // A capture arrives with STRAIGHT alpha and the canvas composites
-  // premultiplied, so the color is multiplied by its own alpha here, once.
-  // Without it a panel's soft shadow \u2014 dark at a low alpha \u2014 came out
-  // lighter than the ground it fell on.
-  let a = color.a * alpha;
-  return vec4f(color.rgb * a, a);
-}
-`;var j=64,T=256,z=T/4,Q=64,b=class{constructor(e,t,n={}){this.canvas=e;this.deps=t;this.options=n;D(e,!0),this.blur=n.blur??!0,this.scheme=n.scheme??"dark",this.capabilities=v(t.gpu.device.gpu.queue,e);let o=n.platformHandlesHitTesting??this.capabilities.hitTestFollowsGeometry==="yes";this.router=new N(e,{platformHandlesHitTesting:o}),e.setAttribute("data-graview-hit",o?"platform":"router")}views=new Map;idOf=new WeakMap;resources=new Map;capturedAt={};uniforms=null;staging=new Float32Array(0);slotCount=0;nextSlot=0;freeSlots=[];reported=new Map;router;pipeline=null;sampler=null;frame=0;detachRouter=null;connectors=[];lastPlan=null;lastPlacements=[];blur;scheme;capabilities;attach(){return this.detachRouter=this.router.attach(),()=>this.detach()}detach(){this.detachRouter?.(),this.detachRouter=null}reconcile(e){let t=new Map(e.map(n=>[n.id,n]));for(let n of[...this.views.keys()])t.has(n)||this.remove(n);for(let n of e){let o=this.views.get(n.id);if(!o){this.add(n);continue}let i=o.width!==n.width||o.height!==n.height,a=o.element!==n.element||(o.dom??!1)!==(n.dom??!1);a&&this.track(n);let c=(o.opacity??1)!==(n.opacity??1),l=o.dirty||n.dirty===!0||i||a||c;this.views.set(n.id,{...n,dirty:l}),(a||i)&&delete this.capturedAt[n.id]}}add(e){if(!e.dom&&e.element.parentElement!==this.canvas)throw new Error(`View "${e.id}" must be an immediate child of the scene canvas \u2014 the capture API rejects deeper descendants. Nest inside a view, never between views.`);this.track(e),this.views.set(e.id,{...e,dirty:!0})}track(e){this.idOf.set(e.element,e.id),e.dom||M(e.element)}remove(e){let t=this.resources.get(e);t?.texture.destroy(),t&&this.freeSlots.push(t.slot),this.resources.delete(e),this.reported.delete(e),this.views.delete(e),delete this.capturedAt[e]}setBlur(e){this.blur=e}setScheme(e){this.scheme=e}setConnectors(e){this.connectors=e}invalidate(e){let t=this.views.get(e);t&&this.views.set(e,{...t,dirty:!0})}all(){return[...this.views.values()]}plan(){return this.lastPlan}placements(){return this.lastPlacements}deviceForProbe(){return this.deps.gpu.device.gpu}scheduleFrame(){m(this.canvas)}paint(e){return this.render(F(e))}render(e){let t=this.deps.gpu.device.gpu,n=t.queue;this.frame+=1;let o=this.canvas.width,i=this.canvas.height,a;if(e){a=new Set;for(let u of e){let s=this.idOf.get(u);s!==void 0&&a.add(s)}}let c=a?new Set(a):null,l=V([...this.views.values()],this.connectors,{canvasWidth:o,canvasHeight:i,capturedAt:this.capturedAt,captureBudget:this.options.captureBudget??B,scheme:this.scheme,...a?{changed:a}:{},...this.options.connectorOverrides?{connectorOverrides:this.options.connectorOverrides}:{}});this.lastPlan=l;let p=[];for(let u of l.captures){let s=this.views.get(u.viewId);if(!s)continue;let y=this.ensureResources(t,s);try{G(n,s.element,y.texture)}catch(f){if(!(f instanceof DOMException&&f.name==="InvalidStateError"))throw f;this.capturedAt[s.id]===void 0&&p.push(s.id),s.dirty||this.views.set(s.id,{...s,dirty:!0});continue}this.capturedAt[s.id]=this.frame,this.views.set(s.id,{...s,dirty:!1}),a?.delete(s.id)}for(let u of[...a??[],...l.deferred]){let s=this.views.get(u);s&&!s.dirty&&this.views.set(u,{...s,dirty:!0})}let w=t.createCommandEncoder({label:"graview-compositor"}),h=w.beginRenderPass({colorAttachments:[{view:this.deps.surface.context.getCurrentTexture().createView(),clearValue:this.options.transparent?{r:0,g:0,b:0,a:0}:this.groundColor(),loadOp:"clear",storeOp:"store"}]});h.setPipeline(this.ensurePipeline(t));let d=this.options.ground??[.957,.949,.933],U=[],x=-1;for(let u of l.draws){if(p.includes(u.viewId))continue;let s=this.resources.get(u.viewId);!s||!this.views.has(u.viewId)||(Y(this.staging,s.slot*z,u,o,i,d,this.blur),s.slot>x&&(x=s.slot),U.push(s))}x>=0&&this.uniforms&&n.writeBuffer(this.uniforms,0,this.staging.buffer,0,(x+1)*T);for(let u of U)h.setBindGroup(0,this.ensureBindGroup(t,u)),h.draw(6);let C=[];for(let u of l.placements){let s=this.views.get(u.viewId);s&&C.push({element:s.element,transform:u.transform,width:u.width,height:u.height,depth:u.depth})}if(h.end(),n.submit([w.finish()]),this.capabilities.geometrySync){let u=[];for(let s of[...l.geometry,...l.offCanvas]){let y=this.views.get(s.viewId);if(!y)continue;let f=s.transform.join(",");this.reported.get(s.viewId)!==f&&u.push({element:y.element,id:s.viewId,key:f,transform:s.transform})}for(let{element:s,id:y,key:f,transform:K}of u.slice(0,Q))O(this.canvas,s,{canvasTransform:E(K)}),this.reported.set(y,f);u.length>Q&&m(this.canvas)}return this.lastPlacements=C,this.router.setPlacements(C),p.length===0?{...l,missed:p,changed:c}:{...l,draws:l.draws.filter(u=>!p.includes(u.viewId)),missed:p,changed:c}}groundColor(){let[e,t,n]=this.options.ground??[.957,.949,.933];return{r:e,g:t,b:n,a:1}}ensurePipeline(e){if(this.pipeline)return this.pipeline;let t=e.createShaderModule({code:I,label:"graview-compositor"});return this.pipeline=e.createRenderPipeline({layout:"auto",vertex:{module:t,entryPoint:"vs_main"},fragment:{module:t,entryPoint:"fs_main",targets:[{format:navigator.gpu.getPreferredCanvasFormat(),blend:{color:{srcFactor:"one",dstFactor:"one-minus-src-alpha"},alpha:{srcFactor:"one",dstFactor:"one-minus-src-alpha"}}}]},primitive:{topology:"triangle-list"}}),this.pipeline}ensureResources(e,t){let n=Math.max(1,Math.ceil(t.width)),o=Math.max(1,Math.ceil(t.height)),i=this.resources.get(t.id);if(i&&i.width===n&&i.height===o)return i;i?.texture.destroy();let a=i?.slot??this.takeSlot(e),l={texture:e.createTexture({size:[n,o],format:"rgba8unorm",usage:GPUTextureUsage.COPY_DST|GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.RENDER_ATTACHMENT,label:`graview-view-${t.id}`}),width:n,height:o,bindGroup:null,slot:a};return this.resources.set(t.id,l),l}takeSlot(e){let t=this.freeSlots.pop();if(t!==void 0)return t;let n=this.nextSlot++;if(n>=this.slotCount){let o=Math.max(64,this.slotCount*2);this.uniforms?.destroy(),this.uniforms=e.createBuffer({size:o*T,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST,label:"graview-planes"});let i=new Float32Array(o*z);i.set(this.staging),this.staging=i,this.slotCount=o;for(let a of this.resources.values())a.bindGroup=null}return n}ensureBindGroup(e,t){return t.bindGroup||(this.sampler??=e.createSampler({magFilter:"linear",minFilter:"linear",addressModeU:"clamp-to-edge",addressModeV:"clamp-to-edge"}),t.bindGroup=e.createBindGroup({layout:this.ensurePipeline(e).getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.uniforms,offset:t.slot*T,size:j}},{binding:1,resource:t.texture.createView()},{binding:2,resource:this.sampler}]})),t.bindGroup}dispose(){this.detach(),this.canvas.removeAttribute("data-graview-hit");for(let e of[...this.resources.keys()])this.remove(e);this.uniforms?.destroy(),this.uniforms=null}};function ne(r,e,t,n,o=!0){let i=new Float32Array(j/4);return Y(i,0,r,e,t,n,o),i}function Y(r,e,t,n,o,i,a){r[e]=t.transform[12],r[e+1]=t.transform[13],r[e+2]=t.width,r[e+3]=t.height,r[e+4]=a?t.blur:0,r[e+5]=t.style.falloff,r[e+6]=t.style.shadow,r[e+7]=t.opacity,r[e+8]=n,r[e+9]=o,r[e+10]=0,r[e+11]=0,r[e+12]=i[0],r[e+13]=i[1],r[e+14]=i[2],r[e+15]=1}var re=3,$=4,X=1500,J=q*.75;function ie(r={}){let e=new WeakMap;return t=>{let n=e.get(t.canvas);(!n||n.disposed)&&(n=new R(t.canvas,r),e.set(t.canvas,n)),n.show(t);let o=n;return()=>o.release()}}var R=class{constructor(e,t){this.canvas=e;this.options=t;this.observer=typeof MutationObserver>"u"?null:new MutationObserver(()=>{this.stale=!0,m(this.canvas)}),this.observer?.observe(e,{childList:!0}),this.start()}disposed=!1;scene=null;compositor=null;ownDevice=null;stale=!0;onDom=new Set;lateFor=new Map;releasing=null;waiting=null;firstFrames=[];gone=!1;observer;onPaint=e=>this.paint(e);show(e){if(this.releasing&&clearTimeout(this.releasing),this.releasing=null,this.scene=e,this.stale=!0,this.compositor?.setBlur(e.blur??!0),e.scheme&&this.compositor?.setScheme(e.scheme),this.gone){e.fallBack?.();return}m(this.canvas)}release(){this.releasing&&clearTimeout(this.releasing),this.releasing=setTimeout(()=>this.dispose(),0)}async start(){try{let e=this.options.gpu;if(!e){let o=await navigator.gpu?.requestAdapter();if(!o)throw new Error("No WebGPU adapter.");let i=await o.requestDevice();this.ownDevice=i,i.lost.then(()=>{this.disposed||this.fallBack()}),e={device:{gpu:i}}}if(this.disposed)return;let t=e.device.gpu;if(!v(t.queue,this.canvas).usable)throw new Error("No element capture.");let n=this.canvas.getContext("webgpu");if(!n)throw new Error("No WebGPU context on the scene canvas.");n.configure({device:t,format:navigator.gpu.getPreferredCanvasFormat(),alphaMode:"premultiplied"}),this.compositor=new b(this.canvas,{gpu:e,surface:{context:n}},{transparent:!0,...this.options,blur:this.scene?.blur??this.options.blur??!0,...this.scene?.scheme?{scheme:this.scene.scheme}:{}}),this.compositor.attach(),this.canvas.addEventListener("paint",this.onPaint),this.stale=!0,this.waiting=setTimeout(()=>this.fallBack(),X),m(this.canvas)}catch{this.fallBack()}}fallBack(){if(this.gone)return;this.gone=!0,this.waiting&&clearTimeout(this.waiting),this.waiting=null,this.canvas.removeEventListener("paint",this.onPaint),this.compositor?.dispose(),this.compositor=null;let e=this.scene;e&&(e.fallBack?e.fallBack():e.drawOnDom?.(new Set(e.layout.nodes.map(t=>t.id))))}checkFirstFrame(e){let t=this.firstFrames;if(!t||(this.waiting&&clearTimeout(this.waiting),this.waiting=null,t.push(e),t.length<$))return;let n=[...t].sort((o,i)=>o-i)[Math.floor(t.length/2)];this.firstFrames=null,n>J&&this.fallBack()}paint(e){let t=this.compositor,n=this.scene;if(!t||!n)return;let o=performance.now(),i;try{this.stale&&(this.stale=!1,t.reconcile(this.views(n))),i=t.paint(e)}catch{this.fallBack();return}if(this.checkFirstFrame(performance.now()-o),this.gone)return;this.options.onFrame?.(i,t);let a=!1,c=new Set(i.deferred);for(let l of[...this.lateFor.keys()])c.has(l)||this.lateFor.delete(l);for(let l of c){if(i.changed&&!i.changed.has(l))continue;let p=(this.lateFor.get(l)??0)+1;this.lateFor.set(l,p),p>=re&&!this.onDom.has(l)&&(this.onDom.add(l),this.lateFor.delete(l),a=!0)}a&&n.drawOnDom?.(new Set(this.onDom)),(i.deferred.length>0||i.missed.length>0)&&m(this.canvas)}views(e){let t=new Map;for(let a of this.canvas.children){let c=a.getAttribute("data-graview-view");c!==null&&t.set(c,a)}let n=new Set,o=[];for(let a of H(e.layout,e.dirty).views){n.add(a.id);let c=t.get(a.id)??e.hostOf(a.id);c&&o.push({...a,element:c,...c.parentElement===this.canvas?{}:{dom:!0}})}let i=!1;for(let a of this.onDom)n.has(a)||(this.onDom.delete(a),i=!0);return i&&e.drawOnDom?.(new Set(this.onDom)),o}dispose(){this.disposed=!0,this.waiting&&clearTimeout(this.waiting),this.waiting=null,this.observer?.disconnect(),this.canvas.removeEventListener("paint",this.onPaint),this.compositor?.dispose(),this.compositor=null,this.ownDevice?.destroy(),this.ownDevice=null}};export{I as COMPOSITOR_WGSL,b as Compositor,$ as FIRST_FRAMES,J as FIRST_FRAME_BUDGET_MS,X as FIRST_PAINT_WAIT_MS,A as IDENTITY,g as PlatformUnavailableError,ie as attachGpu,G as captureElement,ee as captureElementImage,F as changedElementsOf,te as clearElementGeometry,v as detectCapabilities,k as isAffine,M as markDrawable,ne as packUniform,_ as perspectiveProbeMatrix,L as planeTransform,m as requestPaint,D as setLayoutSubtree,E as toDOMMatrix,O as updateElementGeometry};