buninu-browser 0.3.0 → 0.5.0

package/lib/qml/canvas-dom.js

@@ -0,0 +1,115 @@
+/** Local-QML-only drawImage(Element) adapter. No DOM mutation or encoded images. */
+import { buildDisplayList } from '../paint/display-list.js';
+
+const documents = new WeakSet();
+const snapshots = new WeakMap();
+export function enableQmlDomImages(document) { documents.add(document); }
+export function hasQmlDomImages(document) { return documents.has(document); }
+export function qmlTextureVisibilityChanged(records) {
+  return records.some(record => record.type === 'attributes' && record.attributeName === 'data-qml-source-hidden');
+}
+
+/** Suppress only main-scene painting; layout and hit testing remain intact. */
+export function filterQmlTextureSources(list, tree, captureRoot = null) {
+  const hidden = new Set();
+  function visit(node, suppressed = false) {
+    suppressed ||= node.domNode !== captureRoot && node.domNode?.hasAttribute?.('data-qml-source-hidden');
+    if (suppressed) hidden.add(node.id);
+    for (const child of node.children ?? []) visit(child, suppressed);
+  }
+  visit(tree.root);
+  if (!hidden.size) return list;
+  // The original list is frozen; create fresh descriptors for changed items.
+  const descriptors = Object.getOwnPropertyDescriptors(list);
+  descriptors.items = { value: list.items.filter(item => !hidden.has(item.nodeId)), enumerable: true };
+  return Object.create(Object.getPrototypeOf(list), descriptors);
+}
+
+/** Extract laid-out content, retaining internal stacking/clips but not ancestors. */
+export function subtreeDisplayList(element, { tree, layout, resources, backgroundResource, scrollOffsetOf }) {
+  let root = [...tree.nodesById.values()].find(node => node.domNode === element);
+  const box = root && layout.boxes.find(box => box.nodeId === root.id && !box.inline);
+  if (!root || !box) throw new DOMException('DOM image source needs a connected, laid-out box.', 'InvalidStateError');
+  // Qt texture roots are captured opaque and without their placement transform.
+  if (element.hasAttribute?.('data-qml-texture-source'))
+    root = { ...root, style: { ...root.style, opacity: 1, transform: null, visibility: 'visible' } };
+  const nodesById = new Map();
+  const visit = node => { nodesById.set(node.id, node); for (const child of node.children ?? []) visit(child); };
+  visit(root);
+  // A synthetic parent keeps the source's own overflow clip, which the painter
+  // ordinarily skips for its document root. Ancestor effects are not imported.
+  const isolatedTree = { root: { id: Symbol('qml-image-root'), children: [root] }, nodesById };
+  const boxes = layout.boxes.filter(entry => nodesById.has(entry.nodeId));
+  const fragments = layout.fragments.map(fragment => ({ ...fragment,
+    runs: fragment.runs.filter(run => nodesById.has(run.nodeId)),
+  })).filter(fragment => fragment.runs.length);
+  // A selected layer can have an ancestor stacking context with no selected
+  // boxes. Keep that context's ordering metadata, never its painted content.
+  const layers = new Set();
+  for (const entry of [...boxes, ...fragments]) {
+    for (let layer = entry.layer; layer && layer.order !== 0; layer = layer.parent) layers.add(layer);
+  }
+  for (const layer of layers) fragments.push({ layer, runs: [] });
+  let list = buildDisplayList({ ...layout, boxes, fragments }, isolatedTree,
+    resources, backgroundResource, scrollOffsetOf);
+  // Snapshot coordinates do not scroll with the page viewport. Fixed items
+  // already carry their laid-out positions and must not receive its offset.
+  if (list.items.some(item => item.fixed)) {
+    const images = list.images;
+    list = { ...list, items: list.items.map(item => item.fixed ? { ...item, fixed: false } : item) };
+    Object.defineProperty(list, 'images', { value: images });
+  }
+  list = filterQmlTextureSources(list, isolatedTree, element);
+  return { list, box, nodesById };
+}
+
+export function captureQmlDomImage(element, options) {
+  const { document, kit, resources, canvasResource, isOriginClean, paint } = options;
+  if (element?.nodeType !== 1 || element.ownerDocument !== document || !element.isConnected) {
+    throw new DOMException('DOM image source must belong to this QML document.', 'InvalidStateError');
+  }
+  // Refresh only nested canvas resources; no whole-page raster is needed.
+  for (const node of options.tree.nodesById.values()) {
+    if (node.tagName !== 'CANVAS' || !element.contains(node.domNode)) continue;
+    const bitmap = canvasResource(node.domNode);
+    if (bitmap) resources.set(node.domNode, bitmap);
+    else resources.delete(node.domNode);
+  }
+  const { list, box, nodesById } = subtreeDisplayList(element, options);
+  const width = Math.ceil(box.width), height = Math.ceil(box.height);
+  if (!(width > 0 && height > 0) || width > 8192 || height > 8192 || width * height > 16777216) {
+    throw new DOMException('DOM image dimensions exceed the snapshot limit.', 'InvalidStateError');
+  }
+  // Frame resources are controlled by another document. This internal feature
+  // deliberately does not capture frames or browser-owned UI.
+  if ([...nodesById.values()].some(node => node.domNode?.tagName === 'IFRAME')) {
+    throw new DOMException('DOM images cannot contain frames.', 'NotSupportedError');
+  }
+  const originClean = list.images.every(isOriginClean);
+  const surface = kit.MakeSurface(width, height);
+  if (!surface) throw new DOMException('Cannot allocate DOM image.', 'InvalidStateError');
+  try {
+    surface.getCanvas().clear(kit.TRANSPARENT);
+    paint(surface.getCanvas(), list, { x: box.x, y: box.y, width, height }, 1);
+    surface.flush();
+    const image = surface.makeImageSnapshot();
+    if (!image) throw new DOMException('Cannot snapshot DOM image.', 'InvalidStateError');
+    const resource = { image, width, height, originClean };
+    snapshots.set(resource, { element, image });
+    return resource;
+  } finally { surface.dispose(); }
+}
+
+/** Consume ephemeral sources even if drawImage rejects its arguments. */
+export function drawQmlDomImage(resource, target, context, args) {
+  const snapshot = resource && snapshots.get(resource);
+  if (!snapshot) return false;
+  snapshots.delete(resource);
+  try {
+    if (snapshot.element.contains(target)) {
+      throw new DOMException('DOM image source contains the destination canvas.', 'InvalidStateError');
+    }
+    context.drawImage(snapshot.image, ...args.slice(1));
+    return true;
+  } finally { snapshot.image.delete(); }
+}

package/lib/qml/canvas.js

@@ -0,0 +1,76 @@
+// QML lifecycle adapter; all pixels and drawing commands use HTML Canvas 2D.
+export function createQmlCanvas(api) {
+  const {effect, untrack, emit, cleanup} = api;
+  function make(v, type, element) {
+    if (type !== 'Canvas') return;
+    const canvas = document.createElement('canvas');
+    canvas.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none';
+    element.appendChild(canvas);
+    let frame, disposed = false, ready = false;
+    const callbacks = new Set();
+    Object.assign(v, {available:false, contextType:'2d', canvasSize:{width:0,height:0}});
+    const images=new Map();
+    v.loadImage=url=>{
+      url=String(url);if(images.has(url))return;
+      const image=document.createElement('img'),entry={image,status:'loading'};
+      images.set(url,entry);
+      entry.loaded=()=>{if(disposed||images.get(url)!==entry||!image.naturalWidth||!image.naturalHeight)return;entry.status='loaded';emit(v,'onImageLoaded');};
+      image.addEventListener('load',entry.loaded);
+      entry.failed=()=>{if(disposed||images.get(url)!==entry)return;entry.status='error';};
+      image.addEventListener('error',entry.failed);
+      image.style.display='none';element.appendChild(image);image.src=url;
+    };
+    v.unloadImage=url=>{const entry=images.get(String(url));if(entry){entry.image.removeEventListener('load',entry.loaded);entry.image.removeEventListener('error',entry.failed);entry.image.remove();images.delete(String(url));}};
+    v.isImageLoaded=url=>images.get(String(url))?.status==='loaded';
+    v.isImageLoading=url=>images.get(String(url))?.status==='loading';
+    v.isImageError=url=>images.get(String(url))?.status==='error';
+    const context = canvas.getContext('2d');
+    // QML Context2D.reset resets state and pixels. Reuse HTML canvas's
+    // dimension-reset behavior when the underlying 2D implementation lacks it.
+    const qmlContext = new Proxy(context, {
+      get(target, key) {
+        if (key === 'reset' && typeof target.reset !== 'function') return () => {canvas.width = canvas.width;};
+        if(key==='createImageData')return (...args)=>{
+          if(args.length!==1||typeof args[0]!=='string')return target.createImageData(...args);
+          const entry=images.get(args[0]);if(entry?.status!=='loaded')return null;
+          const tmp=document.createElement('canvas');tmp.width=entry.image.naturalWidth;tmp.height=entry.image.naturalHeight;
+          try{const ctx=tmp.getContext('2d');ctx.drawImage(entry.image,0,0);return ctx.getImageData(0,0,tmp.width,tmp.height);}
+          finally{tmp.width=tmp.height=1;}
+        };
+        const value = target[key];
+        return typeof value === 'function' ? value.bind(target) : value;
+      },
+      set(target, key, value) {target[key]=(key==='fillStyle'||key==='strokeStyle') && value && typeof value==='object' && 'r' in value ? api.cssColor(value) : value;return true;},
+    });
+    v.getContext = type => type === '2d' ? qmlContext : null;
+    Object.defineProperty(v, 'context', {get:()=>v.contextType === '2d' && v.available ? v.getContext('2d') : null});
+    v.requestPaint = () => {
+      if (disposed || frame !== undefined) return;
+      frame = requestAnimationFrame(() => {
+        frame = undefined;
+        if (disposed || !ready) return;
+        untrack(() => {
+          emit(v, 'onPaint', {x:0,y:0,width:canvas.width,height:canvas.height});
+          emit(v, 'onPainted');
+        });
+      });
+    };
+    v.markDirty = () => v.requestPaint();
+    v.requestAnimationFrame = callback => {
+      if (disposed) return 0;
+      const id = requestAnimationFrame(time => {callbacks.delete(id);if (!disposed) callback(time);});
+      callbacks.add(id);
+      return id;
+    };
+    v.cancelRequestAnimationFrame = id => {callbacks.delete(id);cancelAnimationFrame(id);};
+    effect(() => {
+      const w = Math.max(0,Math.ceil(v.canvasSize.width || v.width));
+      const h = Math.max(0,Math.ceil(v.canvasSize.height || v.height));
+      if (canvas.width !== w) canvas.width = w;
+      if (canvas.height !== h) canvas.height = h;
+      untrack(() => {ready=true;v.available=true;v.requestPaint();});
+    });
+    cleanup(() => {disposed=true;for(const url of images.keys())v.unloadImage(url);cancelAnimationFrame(frame);for (const id of callbacks) cancelAnimationFrame(id);callbacks.clear();});
+  }
+  return {make};
+}