@godscene/visualizer 1.7.11

package/dist/es/component/player/playback-controls.mjs

@@ -0,0 +1,4 @@
+function shouldRestartPlaybackFromBeginning(currentFrame, effectiveEndFrame) {
+    return effectiveEndFrame > 0 && currentFrame >= effectiveEndFrame;
+}
+export { shouldRestartPlaybackFromBeginning };

package/dist/es/component/player/report-download.mjs

@@ -0,0 +1,61 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+const DEFAULT_REPORT_FILE_NAME = 'midscene_report.html';
+function triggerReportDownload(options) {
+    return _async_to_generator(function*() {
+        const { content, defaultFileName = DEFAULT_REPORT_FILE_NAME, onDownloadReport, documentRef, urlRef, blobFactory, scheduleRevoke } = options;
+        if (onDownloadReport) return void (yield onDownloadReport({
+            content,
+            defaultFileName
+        }));
+        const activeDocument = null != documentRef ? documentRef : globalThis.document;
+        if (!activeDocument) throw new Error('Report download requires a document context.');
+        const activeUrl = null != urlRef ? urlRef : globalThis.URL;
+        if (!(null == activeUrl ? void 0 : activeUrl.createObjectURL) || !(null == activeUrl ? void 0 : activeUrl.revokeObjectURL)) throw new Error('Report download requires URL.createObjectURL support.');
+        const createBlob = null != blobFactory ? blobFactory : (parts, blobOptions)=>new Blob(parts, blobOptions);
+        const blob = createBlob([
+            content
+        ], {
+            type: 'text/html'
+        });
+        const url = activeUrl.createObjectURL(blob);
+        const anchor = activeDocument.createElement('a');
+        anchor.href = url;
+        anchor.download = defaultFileName;
+        anchor.style.display = 'none';
+        activeDocument.body.appendChild(anchor);
+        try {
+            anchor.click();
+        } finally{
+            activeDocument.body.removeChild(anchor);
+            (null != scheduleRevoke ? scheduleRevoke : (callback)=>setTimeout(callback, 0))(()=>{
+                activeUrl.revokeObjectURL(url);
+            });
+        }
+    })();
+}
+export { DEFAULT_REPORT_FILE_NAME, triggerReportDownload };

package/dist/es/component/player/scenes/StepScene.mjs

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { mouseLoading } from "../../../utils/index.mjs";
+import { getCenterHighlightBox } from "../../../utils/highlight-element.mjs";
+import { deriveFrameState, shouldRenderCursor } from "./derive-frame-state.mjs";
+import { getPlaybackViewport } from "./playback-layout.mjs";
+import { resolvePointerLayout, resolveSpinnerLayout } from "./pointer-layout.mjs";
+const POINTER_PHASE = 0.375;
+const CROSSFADE_FRAMES = 10;
+const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: compHeight, fps })=>{
+    const { scriptFrames, imageWidth: baseImgW, imageHeight: baseImgH } = frameMap;
+    const state = useMemo(()=>deriveFrameState(scriptFrames, frame, baseImgW, baseImgH, fps), [
+        scriptFrames,
+        frame,
+        baseImgW,
+        baseImgH,
+        fps
+    ]);
+    if (!state.img) return null;
+    const { img, imageWidth: imgW, imageHeight: imgH, prevImg, camera, prevCamera, insights, spinning: spinningPointer, spinningElapsedMs, currentPointerImg, pointerVisible, title, subTitle, frameInScript, imageChanged, pointerMoved, rawProgress } = state;
+    const pT = autoZoom ? pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress : 1;
+    const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
+    const pointerLeft = prevCamera.pointerLeft + (camera.pointerLeft - prevCamera.pointerLeft) * pT;
+    const pointerTop = prevCamera.pointerTop + (camera.pointerTop - prevCamera.pointerTop) * pT;
+    const cameraLeft = autoZoom ? prevCamera.left + (camera.left - prevCamera.left) * cT : 0;
+    const cameraTop = autoZoom ? prevCamera.top + (camera.top - prevCamera.top) * cT : 0;
+    const cameraWidth = autoZoom ? prevCamera.width + (camera.width - prevCamera.width) * cT : imgW;
+    const { offsetX, offsetY, contentWidth, contentHeight } = getPlaybackViewport(compWidth, compHeight, imgW, imgH);
+    const zoom = imgW / cameraWidth;
+    const tx = contentWidth / imgW * -cameraLeft;
+    const ty = contentHeight / imgH * -cameraTop;
+    const transformStyle = `scale(${zoom}) translate(${tx}px, ${ty}px)`;
+    const camH = imgH / imgW * cameraWidth;
+    const ptrX = (pointerLeft - cameraLeft) / cameraWidth * contentWidth;
+    const ptrY = (pointerTop - cameraTop) / camH * contentHeight;
+    const showCursor = shouldRenderCursor(pointerVisible, camera, prevCamera, imgW, imgH);
+    const pointerLayout = resolvePointerLayout(imgW);
+    const spinnerLayout = resolveSpinnerLayout(pointerLayout);
+    const resScale = pointerLayout.scale;
+    const crossfadeAlpha = imageChanged ? Math.min(frameInScript / CROSSFADE_FRAMES, 1) : 1;
+    const spinRotation = spinningPointer ? (Math.sin(spinningElapsedMs / 500 - Math.PI / 2) + 1) / 2 * Math.PI * 2 : 0;
+    const renderInsightOverlays = ()=>{
+        if (0 === insights.length) return null;
+        return insights.map((insight, idx)=>{
+            const overlays = [];
+            if (insight.highlightElement) {
+                const highlightBox = getCenterHighlightBox(insight.highlightElement);
+                overlays.push(/*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        left: highlightBox.left,
+                        top: highlightBox.top,
+                        width: highlightBox.width,
+                        height: highlightBox.height,
+                        background: 'rgba(253, 89, 7, 0.4)',
+                        border: `${2 * resScale}px solid #fd5907`,
+                        boxShadow: `${2 * resScale}px ${2 * resScale}px ${+resScale}px rgba(51, 51, 51, 0.3)`,
+                        opacity: insight.alpha,
+                        pointerEvents: 'none'
+                    }
+                }, `highlight-${idx}`));
+            }
+            if (insight.searchArea) {
+                const rect = insight.searchArea;
+                overlays.push(/*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        background: 'rgba(2, 131, 145, 0.4)',
+                        border: `${2 * resScale}px solid #028391`,
+                        boxShadow: `${2 * resScale}px ${2 * resScale}px ${+resScale}px rgba(51, 51, 51, 0.3)`,
+                        opacity: insight.alpha,
+                        pointerEvents: 'none'
+                    }
+                }, `search-${idx}`));
+            }
+            return overlays;
+        });
+    };
+    const renderContentArea = (w, h)=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                width: w,
+                height: h,
+                position: 'relative',
+                overflow: 'hidden'
+            },
+            children: [
+                imageChanged && prevImg && crossfadeAlpha < 1 && /*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        width: w,
+                        height: h,
+                        overflow: 'hidden',
+                        opacity: 1 - crossfadeAlpha
+                    },
+                    children: /*#__PURE__*/ jsx("img", {
+                        alt: "",
+                        src: prevImg,
+                        style: {
+                            width: w,
+                            height: h,
+                            transformOrigin: '0 0',
+                            transform: transformStyle
+                        }
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        position: 'absolute',
+                        width: w,
+                        height: h,
+                        overflow: 'hidden',
+                        opacity: imageChanged ? crossfadeAlpha : 1
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("img", {
+                            alt: "",
+                            src: img,
+                            style: {
+                                width: w,
+                                height: h,
+                                transformOrigin: '0 0',
+                                transform: transformStyle
+                            }
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            style: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: w,
+                                height: h,
+                                transformOrigin: '0 0',
+                                transform: transformStyle,
+                                pointerEvents: 'none'
+                            },
+                            children: renderInsightOverlays()
+                        })
+                    ]
+                }),
+                spinningPointer && /*#__PURE__*/ jsx("img", {
+                    alt: "",
+                    src: mouseLoading,
+                    style: {
+                        position: 'absolute',
+                        left: ptrX - spinnerLayout.centerOffset,
+                        top: ptrY - spinnerLayout.centerOffset,
+                        width: spinnerLayout.size,
+                        height: spinnerLayout.size,
+                        transform: `rotate(${spinRotation}rad)`,
+                        transformOrigin: 'center center',
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
+                    }
+                }),
+                showCursor && !spinningPointer && /*#__PURE__*/ jsx("img", {
+                    alt: "",
+                    src: currentPointerImg,
+                    style: {
+                        position: 'absolute',
+                        left: ptrX - pointerLayout.hotspotX,
+                        top: ptrY - pointerLayout.hotspotY,
+                        width: pointerLayout.width,
+                        height: pointerLayout.height,
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
+                    }
+                })
+            ]
+        });
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: '#000'
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            style: {
+                position: 'absolute',
+                left: offsetX,
+                top: offsetY,
+                width: contentWidth,
+                height: contentHeight,
+                overflow: 'hidden'
+            },
+            children: renderContentArea(contentWidth, contentHeight)
+        })
+    });
+};
+export { StepsTimeline };

package/dist/es/component/player/scenes/derive-frame-state.mjs

@@ -0,0 +1,229 @@
+import { mousePointer } from "../../../utils/index.mjs";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function derive_frame_state_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else derive_frame_state_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function createDefaultCameraState(imageWidth, imageHeight) {
+    return {
+        left: 0,
+        top: 0,
+        width: imageWidth,
+        pointerLeft: Math.round(imageWidth / 2),
+        pointerTop: Math.round(imageHeight / 2)
+    };
+}
+function updateImage(acc, sf, baseW, baseH) {
+    if (!sf.img) return;
+    if (acc.img && sf.img !== acc.img) {
+        acc.prevImg = acc.img;
+        acc.imageChanged = true;
+    }
+    const nextImgW = sf.imageWidth || baseW;
+    const nextImgH = sf.imageHeight || baseH;
+    const dimensionsChanged = acc.imgW !== nextImgW || acc.imgH !== nextImgH;
+    acc.img = sf.img;
+    acc.imgW = nextImgW;
+    acc.imgH = nextImgH;
+    if (dimensionsChanged) {
+        const resetCamera = createDefaultCameraState(nextImgW, nextImgH);
+        acc.camera = _object_spread({}, resetCamera);
+        acc.prevCamera = _object_spread({}, resetCamera);
+        acc.pointerMoved = false;
+    }
+}
+function checkPointerMoved(prev, cur) {
+    return Math.abs(prev.pointerLeft - cur.pointerLeft) > 1 || Math.abs(prev.pointerTop - cur.pointerTop) > 1;
+}
+function shouldRenderCursor(pointerVisible, camera, prevCamera, imageWidth, imageHeight) {
+    const centerX = Math.round(imageWidth / 2);
+    const centerY = Math.round(imageHeight / 2);
+    return pointerVisible || Math.abs(camera.pointerLeft - centerX) > 1 || Math.abs(camera.pointerTop - centerY) > 1 || Math.abs(prevCamera.pointerLeft - centerX) > 1 || Math.abs(prevCamera.pointerTop - centerY) > 1;
+}
+function handleImg(acc, sf, frame, baseW, baseH) {
+    updateImage(acc, sf, baseW, baseH);
+    const sfEnd = sf.startFrame + sf.durationInFrames;
+    if (sf.cameraTarget) {
+        acc.prevCamera = _object_spread({}, acc.camera);
+        acc.camera = _object_spread({}, sf.cameraTarget);
+        acc.pointerMoved = checkPointerMoved(acc.prevCamera, acc.camera);
+    } else if (frame >= sfEnd) {
+        acc.pointerMoved = false;
+        acc.imageChanged = false;
+    }
+    acc.spinning = false;
+}
+function handleInsight(acc, sf, frame, baseW, baseH) {
+    updateImage(acc, sf, baseW, baseH);
+    const alreadyAdded = acc.insights.some((ai)=>ai.highlightElement === sf.highlightElement && ai.searchArea === sf.searchArea);
+    if (!alreadyAdded) acc.insights.push({
+        highlightElement: sf.highlightElement,
+        searchArea: sf.searchArea,
+        alpha: 1
+    });
+    if (sf.cameraTarget && void 0 !== sf.insightPhaseFrames) {
+        const cameraStartFrame = sf.startFrame + sf.insightPhaseFrames;
+        if (frame >= cameraStartFrame) {
+            acc.prevCamera = _object_spread({}, acc.camera);
+            acc.camera = _object_spread({}, sf.cameraTarget);
+            const cameraFrameIn = frame - cameraStartFrame;
+            const cameraDur = sf.cameraPhaseFrames || 1;
+            acc.rawProgress = Math.min(cameraFrameIn / cameraDur, 1);
+            acc.pointerMoved = checkPointerMoved(acc.prevCamera, acc.camera);
+        }
+    }
+    acc.spinning = false;
+}
+function handleClearInsight(acc, sf, frame) {
+    const sfEnd = sf.startFrame + sf.durationInFrames;
+    const alpha = 1 - acc.rawProgress;
+    acc.insights = acc.insights.map((ai)=>_object_spread_props(_object_spread({}, ai), {
+            alpha
+        }));
+    if (frame >= sfEnd) acc.insights = [];
+    acc.spinning = false;
+}
+function handleSpinningPointer(acc, fps) {
+    acc.spinning = true;
+    acc.spinningElapsedMs = acc.frameInScript / fps * 1000;
+}
+function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
+    const defaultCamera = createDefaultCameraState(baseW, baseH);
+    const acc = {
+        img: '',
+        imgW: baseW,
+        imgH: baseH,
+        camera: _object_spread({}, defaultCamera),
+        prevCamera: _object_spread({}, defaultCamera),
+        prevImg: null,
+        insights: [],
+        spinning: false,
+        spinningElapsedMs: 0,
+        pointerImg: mousePointer,
+        pointerVisible: false,
+        title: '',
+        subTitle: '',
+        taskId: void 0,
+        frameInScript: 0,
+        scriptIndex: 0,
+        imageChanged: false,
+        pointerMoved: false,
+        rawProgress: 0
+    };
+    for(let i = 0; i < scriptFrames.length; i++){
+        var _sf_taskId;
+        const sf = scriptFrames[i];
+        const sfEnd = sf.startFrame + sf.durationInFrames;
+        if (0 === sf.durationInFrames) {
+            if (sf.startFrame <= frame) {
+                var _sf_taskId1;
+                if ('pointer' === sf.type && sf.pointerImg) {
+                    acc.pointerImg = sf.pointerImg;
+                    acc.pointerVisible = true;
+                }
+                acc.title = sf.title || acc.title;
+                acc.subTitle = sf.subTitle || acc.subTitle;
+                acc.taskId = null != (_sf_taskId1 = sf.taskId) ? _sf_taskId1 : acc.taskId;
+                acc.scriptIndex = i;
+            }
+            continue;
+        }
+        if (frame < sf.startFrame) break;
+        acc.title = sf.title || acc.title;
+        acc.subTitle = sf.subTitle || acc.subTitle;
+        acc.taskId = null != (_sf_taskId = sf.taskId) ? _sf_taskId : acc.taskId;
+        acc.scriptIndex = i;
+        acc.frameInScript = frame - sf.startFrame;
+        acc.rawProgress = Math.min(acc.frameInScript / sf.durationInFrames, 1);
+        switch(sf.type){
+            case 'img':
+                handleImg(acc, sf, frame, baseW, baseH);
+                break;
+            case 'insight':
+                handleInsight(acc, sf, frame, baseW, baseH);
+                break;
+            case 'clear-insight':
+                handleClearInsight(acc, sf, frame);
+                break;
+            case 'spinning-pointer':
+                handleSpinningPointer(acc, fps);
+                break;
+            case 'sleep':
+                acc.spinning = false;
+                break;
+        }
+        if (frame >= sfEnd) {
+            if ('clear-insight' !== sf.type) acc.imageChanged = false;
+            acc.pointerMoved = false;
+            acc.rawProgress = 1;
+            if (sf.cameraTarget) acc.prevCamera = _object_spread({}, acc.camera);
+        }
+    }
+    if (!acc.img) {
+        const firstImgScript = scriptFrames.find((sf)=>'img' === sf.type && sf.img);
+        if (firstImgScript) {
+            acc.img = firstImgScript.img;
+            acc.imgW = firstImgScript.imageWidth || baseW;
+            acc.imgH = firstImgScript.imageHeight || baseH;
+        }
+    }
+    return {
+        img: acc.img,
+        imageWidth: acc.imgW,
+        imageHeight: acc.imgH,
+        prevImg: acc.imageChanged ? acc.prevImg : null,
+        camera: acc.camera,
+        prevCamera: acc.prevCamera,
+        insights: acc.insights,
+        spinning: acc.spinning,
+        spinningElapsedMs: acc.spinningElapsedMs,
+        currentPointerImg: acc.pointerImg,
+        pointerVisible: acc.pointerVisible,
+        title: acc.title,
+        subTitle: acc.subTitle,
+        taskId: acc.taskId,
+        frameInScript: acc.frameInScript,
+        scriptIndex: acc.scriptIndex,
+        imageChanged: acc.imageChanged,
+        pointerMoved: acc.pointerMoved,
+        rawProgress: acc.rawProgress
+    };
+}
+export { deriveFrameState, shouldRenderCursor };