clipwise 0.6.0 → 0.7.0

package/dist/compose/frame-worker.js

@@ -240,52 +240,31 @@ async function applyDeviceFrame(frameBuffer, config, frameWidth, frameHeight, dp
 
 // src/effects/cursor.ts
 import sharp2 from "sharp";
-function buildCursorSvg(size, color) {
-  const s = size;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 24 24" shape-rendering="geometricPrecision">
-    <path d="M4 0 L4 22 L10 16 L16 24 L20 22 L14 14 L22 14 Z"
-          fill="${color}" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
-  </svg>`;
-}
-function buildClickRippleSvg(radius, color, progress) {
-  const currentRadius = radius * progress;
-  const opacity = Math.max(0, 1 - progress);
-  const size = Math.ceil(radius * 2 + 4);
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" shape-rendering="geometricPrecision">
-    <circle cx="${size / 2}" cy="${size / 2}" r="${currentRadius}"
-            fill="none" stroke="${color}" stroke-width="2"
-            opacity="${opacity.toFixed(3)}"/>
-    <circle cx="${size / 2}" cy="${size / 2}" r="${currentRadius * 0.6}"
-            fill="${color}" opacity="${(opacity * 0.4).toFixed(3)}"/>
-  </svg>`;
-}
-async function renderCursor(frameBuffer, position, config, frameWidth, frameHeight, dpr = 1) {
-  if (!config.enabled) return frameBuffer;
+function buildCursorOverlay(position, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled) return null;
   const size = Math.round(config.size * dpr);
   const cursorSvg = buildCursorSvg(size, config.color);
-  const cursorBuffer = Buffer.from(cursorSvg);
   const tipOffsetX = Math.round(4 / 24 * size);
   const px = Math.round(position.x * dpr);
   const py = Math.round(position.y * dpr);
   const left = Math.max(0, Math.min(px - tipOffsetX, frameWidth - size));
   const top = Math.max(0, Math.min(py, frameHeight - size));
-  return sharp2(frameBuffer).composite([{ input: cursorBuffer, left, top }]).png().toBuffer();
+  return { input: Buffer.from(cursorSvg), left, top };
 }
-async function renderClickEffect(frameBuffer, position, config, progress, frameWidth, frameHeight, dpr = 1) {
-  if (!config.enabled || !config.clickEffect) return frameBuffer;
+function buildClickRippleOverlay(position, config, progress, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || !config.clickEffect) return null;
   const radius = config.clickRadius * dpr;
   const clampedProgress = Math.max(0, Math.min(1, progress));
   const rippleSvg = buildClickRippleSvg(radius, config.clickColor, clampedProgress);
-  const rippleBuffer = Buffer.from(rippleSvg);
   const rippleSize = Math.ceil(radius * 2 + 4);
   const px = Math.round(position.x * dpr);
   const py = Math.round(position.y * dpr);
   const left = Math.max(0, Math.min(px - Math.round(rippleSize / 2), frameWidth - rippleSize));
   const top = Math.max(0, Math.min(py - Math.round(rippleSize / 2), frameHeight - rippleSize));
-  return sharp2(frameBuffer).composite([{ input: rippleBuffer, left, top }]).png().toBuffer();
+  return { input: Buffer.from(rippleSvg), left, top };
 }
-async function renderCursorHighlight(frameBuffer, position, config, frameWidth, frameHeight, dpr = 1) {
-  if (!config.enabled || !config.highlight) return frameBuffer;
+function buildHighlightOverlay(position, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || !config.highlight) return null;
   const r = config.highlightRadius * dpr;
   const size = Math.ceil(r * 2 + 4);
   const cx = size / 2;
@@ -304,12 +283,10 @@ async function renderCursorHighlight(frameBuffer, position, config, frameWidth,
   const py = Math.round(position.y * dpr);
   const left = Math.max(0, Math.min(px - Math.round(cx), frameWidth - size));
   const top = Math.max(0, Math.min(py - Math.round(cy), frameHeight - size));
-  return sharp2(frameBuffer).composite([{ input: Buffer.from(highlightSvg), left, top }]).png().toBuffer();
+  return { input: Buffer.from(highlightSvg), left, top };
 }
-async function renderCursorTrail(frameBuffer, positions, config, frameWidth, frameHeight, dpr = 1) {
-  if (!config.enabled || !config.trail || positions.length < 2) {
-    return frameBuffer;
-  }
+function buildTrailOverlay(positions, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || !config.trail || positions.length < 2) return null;
   const segments = [];
   for (let i = 1; i < positions.length; i++) {
     const opacity = i / positions.length * 0.6;
@@ -325,7 +302,26 @@ async function renderCursorTrail(frameBuffer, positions, config, frameWidth, fra
   const trailSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision">
     ${segments.join("\n    ")}
   </svg>`;
-  return sharp2(frameBuffer).composite([{ input: Buffer.from(trailSvg), left: 0, top: 0 }]).png().toBuffer();
+  return { input: Buffer.from(trailSvg), left: 0, top: 0 };
+}
+function buildCursorSvg(size, color) {
+  const s = size;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 24 24" shape-rendering="geometricPrecision">
+    <path d="M4 0 L4 22 L10 16 L16 24 L20 22 L14 14 L22 14 Z"
+          fill="${color}" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
+  </svg>`;
+}
+function buildClickRippleSvg(radius, color, progress) {
+  const currentRadius = radius * progress;
+  const opacity = Math.max(0, 1 - progress);
+  const size = Math.ceil(radius * 2 + 4);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" shape-rendering="geometricPrecision">
+    <circle cx="${size / 2}" cy="${size / 2}" r="${currentRadius}"
+            fill="none" stroke="${color}" stroke-width="2"
+            opacity="${opacity.toFixed(3)}"/>
+    <circle cx="${size / 2}" cy="${size / 2}" r="${currentRadius * 0.6}"
+            fill="${color}" opacity="${(opacity * 0.4).toFixed(3)}"/>
+  </svg>`;
 }
 
 // src/effects/zoom.ts
@@ -639,73 +635,87 @@ async function composeFrame(frame, effects, output, context) {
     cursorTrail: context?.cursorTrail ?? []
   };
   const frameOffset = getFrameOffset(effects.deviceFrame, dpr);
-  const withFrameOffset = (pos) => ({
+  const sl = context?.staticLayers;
+  const preZoomOverlays = [];
+  const hasBrowserChrome = effects.deviceFrame.enabled && effects.deviceFrame.type === "browser" && sl?.browserChromePng;
+  const extTop = hasBrowserChrome ? sl.browserChromeHeight : 0;
+  const extWidth = width;
+  const extHeight = height + extTop;
+  if (hasBrowserChrome) {
+    preZoomOverlays.push({ input: sl.browserChromePng, left: 0, top: 0 });
+  }
+  const withExtFrameOffset = (pos) => ({
     x: pos.x + frameOffset.left / Math.max(1, dpr),
     y: pos.y + frameOffset.top / Math.max(1, dpr)
   });
-  if (effects.deviceFrame.enabled) {
-    const sl2 = ctx.staticLayers;
-    if (sl2?.browserChromePng && effects.deviceFrame.type === "browser") {
-      buffer = await sharp7(buffer).extend({
-        top: sl2.browserChromeHeight,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        background: { r: 0, g: 0, b: 0, alpha: 0 }
-      }).composite([{ input: sl2.browserChromePng, left: 0, top: 0 }]).png().toBuffer();
-    } else {
-      buffer = await applyDeviceFrame(buffer, effects.deviceFrame, width, height, dpr);
-    }
-    const meta2 = await sharp7(buffer).metadata();
-    width = meta2.width ?? width;
-    height = meta2.height ?? height;
-  }
   if (effects.cursor.enabled && effects.cursor.highlight && frame.cursorPosition) {
-    buffer = await renderCursorHighlight(
-      buffer,
-      withFrameOffset(frame.cursorPosition),
+    const overlay = buildHighlightOverlay(
+      withExtFrameOffset(frame.cursorPosition),
       effects.cursor,
-      width,
-      height,
+      extWidth,
+      extHeight,
       dpr
     );
+    if (overlay) preZoomOverlays.push(overlay);
   }
   if (effects.cursor.enabled && effects.cursor.trail && ctx.cursorTrail.length >= 2) {
-    buffer = await renderCursorTrail(
-      buffer,
-      ctx.cursorTrail.map(withFrameOffset),
+    const overlay = buildTrailOverlay(
+      ctx.cursorTrail.map(withExtFrameOffset),
       effects.cursor,
-      width,
-      height,
+      extWidth,
+      extHeight,
       dpr
     );
+    if (overlay) preZoomOverlays.push(overlay);
   }
   if (effects.cursor.enabled && frame.cursorPosition) {
-    buffer = await renderCursor(
-      buffer,
-      withFrameOffset(frame.cursorPosition),
+    const overlay = buildCursorOverlay(
+      withExtFrameOffset(frame.cursorPosition),
       effects.cursor,
-      width,
-      height,
+      extWidth,
+      extHeight,
       dpr
     );
+    if (overlay) preZoomOverlays.push(overlay);
   }
   if (effects.cursor.enabled && effects.cursor.clickEffect && frame.clickPosition) {
     const progress = ctx.clickProgress ?? frame.clickProgress ?? 0.5;
-    buffer = await renderClickEffect(
-      buffer,
-      withFrameOffset(frame.clickPosition),
+    const overlay = buildClickRippleOverlay(
+      withExtFrameOffset(frame.clickPosition),
       effects.cursor,
       progress,
-      width,
-      height,
+      extWidth,
+      extHeight,
       dpr
     );
+    if (overlay) preZoomOverlays.push(overlay);
+  }
+  if (hasBrowserChrome || preZoomOverlays.length > 0) {
+    let pipeline = sharp7(buffer);
+    if (hasBrowserChrome) {
+      pipeline = pipeline.extend({
+        top: extTop,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: { r: 0, g: 0, b: 0, alpha: 0 }
+      });
+    }
+    if (preZoomOverlays.length > 0) {
+      pipeline = pipeline.composite(preZoomOverlays);
+    }
+    buffer = await pipeline.png().toBuffer();
+    width = extWidth;
+    height = extHeight;
+  } else if (effects.deviceFrame.enabled) {
+    buffer = await applyDeviceFrame(buffer, effects.deviceFrame, width, height, dpr);
+    const devMeta = await sharp7(buffer).metadata();
+    width = devMeta.width ?? width;
+    height = devMeta.height ?? height;
   }
   const scale = ctx.zoomScale;
   if (effects.zoom.enabled && scale > 1) {
-    const followCursor = effects.zoom.autoZoom.followCursor;
-    const rawFocus = followCursor ? frame.cursorPosition ?? frame.clickPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 } : frame.clickPosition ?? frame.cursorPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 };
+    const rawFocus = ctx.focusOverride ?? (effects.zoom.autoZoom.followCursor ? frame.cursorPosition ?? frame.clickPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 } : frame.clickPosition ?? frame.cursorPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 });
     const offset = getFrameOffset(effects.deviceFrame, dpr);
     const focusPoint = {
       x: rawFocus.x * dpr + offset.left,
@@ -724,7 +734,6 @@ async function composeFrame(frame, effects, output, context) {
       dpr
     );
   }
-  const sl = ctx.staticLayers;
   if (sl) {
     const padding = effects.background.padding;
     const contentWidth = output.width - padding * 2;