@midscene/visualizer 0.28.10-beta-20250919084614.0 → 0.28.10-beta-20250922071252.0

package/dist/es/component/player/index.mjs

@@ -172,29 +172,9 @@ function Player(props) {
     const cameraState = useRef({
         ...basicCameraState
     });
-    const resizeCanvasIfNeeded = async (newWidth, newHeight)=>{
-        if (app.screen.width !== newWidth || app.screen.height !== newHeight) {
-            app.renderer.resize(newWidth, newHeight);
-            if (divContainerRef.current) {
-                const aspectRatio = newWidth / newHeight;
-                divContainerRef.current.style.setProperty('--canvas-aspect-ratio', aspectRatio.toString());
-            }
-            const newBasicCameraState = {
-                left: 0,
-                top: 0,
-                width: newWidth,
-                pointerLeft: Math.round(newWidth / 2),
-                pointerTop: Math.round(newHeight / 2)
-            };
-            cameraState.current = newBasicCameraState;
-        }
-    };
-    const repaintImage = async (scriptWidth, scriptHeight)=>{
+    const repaintImage = async ()=>{
         const imgToUpdate = currentImg.current;
         if (!imgToUpdate) return void console.warn('no image to update');
-        const targetWidth = scriptWidth || imageWidth;
-        const targetHeight = scriptHeight || imageHeight;
-        await resizeCanvasIfNeeded(targetWidth, targetHeight);
         if (!getTextureFromCache(imgToUpdate)) {
             console.warn('image not loaded', imgToUpdate);
             await loadTexture(imgToUpdate);
@@ -208,8 +188,8 @@ function Player(props) {
         if (child) windowContentContainer.removeChild(child);
         sprite.label = mainImgLabel;
         sprite.zIndex = LAYER_ORDER_IMG;
-        sprite.width = targetWidth;
-        sprite.height = targetHeight;
+        sprite.width = imageWidth;
+        sprite.height = imageHeight;
         windowContentContainer.addChild(sprite);
     };
     const spinningPointer = (frame)=>{
@@ -267,10 +247,9 @@ function Player(props) {
         pointerSprite.current.zIndex = LAYER_ORDER_POINTER;
         windowContentContainer.addChild(pointerSprite.current);
     };
-    const updateCamera = (state, currentWidth)=>{
+    const updateCamera = (state)=>{
         cameraState.current = state;
-        const effectiveWidth = currentWidth || app.screen.width || imageWidth;
-        const newScale = autoZoom ? Math.max(1, effectiveWidth / state.width) : 1;
+        const newScale = autoZoom ? Math.max(1, imageWidth / state.width) : 1;
         windowContentContainer.scale.set(newScale);
         windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
         windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
@@ -284,8 +263,6 @@ function Player(props) {
         }
     };
     const cameraAnimation = async (targetState, duration, frame)=>{
-        const currentCanvasWidth = app.screen.width || imageWidth;
-        const currentCanvasHeight = app.screen.height || imageHeight;
         if (!autoZoom) {
             const currentState = {
                 ...cameraState.current
@@ -305,7 +282,7 @@ function Player(props) {
                         pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
                         pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
                     };
-                    updateCamera(nextState, currentCanvasWidth);
+                    updateCamera(nextState);
                     if (elapsedTime < duration) frame(animate);
                     else resolve();
                 };
@@ -320,7 +297,7 @@ function Player(props) {
         const startTop = currentState.top;
         const startPointerLeft = currentState.pointerLeft;
         const startPointerTop = currentState.pointerTop;
-        const startScale = currentState.width / currentCanvasWidth;
+        const startScale = currentState.width / imageWidth;
         const startTime = performance.now();
         const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
         const pointerMoveDuration = shouldMovePointer ? 0.375 * duration : 0;
@@ -345,19 +322,19 @@ function Player(props) {
                     const cameraElapsedTime = elapsedTime - cameraMoveStart;
                     const rawCameraProgress = Math.min(cameraElapsedTime / cameraMoveDuration, 1);
                     const cameraProgress = cubicImage(rawCameraProgress);
-                    const targetScale = targetState.width / currentCanvasWidth;
+                    const targetScale = targetState.width / imageWidth;
                     const progressScale = startScale + (targetScale - startScale) * cameraProgress;
-                    const progressWidth = currentCanvasWidth * progressScale;
-                    const progressHeight = currentCanvasHeight * progressScale;
+                    const progressWidth = imageWidth * progressScale;
+                    const progressHeight = imageHeight * progressScale;
                     nextState.width = progressWidth;
                     const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
                     const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
-                    const horizontalExceed = progressLeft + progressWidth - currentCanvasWidth;
-                    const verticalExceed = progressTop + progressHeight - currentCanvasHeight;
+                    const horizontalExceed = progressLeft + progressWidth - imageWidth;
+                    const verticalExceed = progressTop + progressHeight - imageHeight;
                     nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
                     nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
                 }
-                updateCamera(nextState, currentCanvasWidth);
+                updateCamera(nextState);
                 if (elapsedTime < duration) frame(animate);
                 else resolve();
             };
@@ -494,7 +471,7 @@ function Player(props) {
                     var _item_context;
                     if (!item.img) throw new Error('img is required');
                     currentImg.current = item.img;
-                    await repaintImage(item.imageWidth, item.imageHeight);
+                    await repaintImage();
                     const elements = (null == (_item_context = item.context) ? void 0 : _item_context.tree) ? treeToList(item.context.tree) : [];
                     const highlightElements = item.highlightElement ? [
                         item.highlightElement
@@ -511,7 +488,7 @@ function Player(props) {
                 } else if ('img' === item.type) {
                     if (item.img && item.img !== currentImg.current) {
                         currentImg.current = item.img;
-                        await repaintImage(item.imageWidth, item.imageHeight);
+                        await repaintImage();
                     }
                     if (item.camera) await cameraAnimation(item.camera, item.duration, frame);
                     else await sleep(item.duration);

package/dist/es/component/universal-playground/index.css

@@ -91,10 +91,10 @@
 .playground-container .middle-dialog-area .scroll-to-bottom-button {
   z-index: 10;
   background: #fff;
-  border: 1px solid rgba(0, 0, 0, .08);
   position: absolute;
   bottom: 10px;
   right: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .04);
 }
 
 .playground-container .middle-dialog-area .scroll-to-bottom-button:hover {

package/dist/es/component/universal-playground/index.mjs

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Button, Form, List, Tooltip, Typography, message } from "antd";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
 import { usePlaygroundState } from "../../hooks/usePlaygroundState.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
@@ -11,7 +11,7 @@ import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
-import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
+import { LocalStorageProvider } from "./providers/storage-provider.mjs";
 const { Text } = Typography;
 function getSDKId(sdk) {
     if (sdk.id && 'string' == typeof sdk.id) return `agent-${sdk.id}`;
@@ -41,35 +41,11 @@ function UniversalPlayground(param) {
     let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
     const [form] = Form.useForm();
     const { config } = useEnvConfig();
-    const [sdkReady, setSdkReady] = useState(false);
-    useEffect(()=>{
-        const initializeSDK = async ()=>{
-            if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
-                await playgroundSDK.checkStatus();
-                setSdkReady(true);
-            } catch (error) {
-                console.warn('Failed to initialize SDK, using default namespace:', error);
-                setSdkReady(true);
-            }
-            else setSdkReady(true);
-        };
-        initializeSDK();
-    }, [
-        playgroundSDK
-    ]);
-    const effectiveStorage = useMemo(()=>{
+    const effectiveStorage = (()=>{
         if (storage) return storage;
-        if (!sdkReady) return null;
         const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
-        const bestStorageType = detectBestStorageType();
-        console.log(`Using ${bestStorageType} storage for namespace: ${namespace}`);
-        return createStorageProvider(bestStorageType, namespace);
-    }, [
-        storage,
-        sdkReady,
-        componentConfig.storageNamespace,
-        playgroundSDK
-    ]);
+        return new LocalStorageProvider(namespace);
+    })();
     const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider);
     const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     useEffect(()=>{

package/dist/es/component/universal-playground/providers/storage-provider.mjs

@@ -1,4 +1,3 @@
-import { IndexedDBStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./indexeddb-storage-provider.mjs";
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -138,7 +137,7 @@ class LocalStorageProvider {
         this.resultsKey = `${namespace}-results`;
     }
 }
-class storage_provider_MemoryStorageProvider {
+class MemoryStorageProvider {
     async saveMessages(messages) {
         this.messages = [
             ...messages
@@ -161,7 +160,7 @@ class storage_provider_MemoryStorageProvider {
         _define_property(this, "results", new Map());
     }
 }
-class storage_provider_NoOpStorageProvider {
+class NoOpStorageProvider {
     async saveMessages(_messages) {}
     async loadMessages() {
         return [];
@@ -169,42 +168,4 @@ class storage_provider_NoOpStorageProvider {
     async clearMessages() {}
     async saveResult(_id, _result) {}
 }
-var storage_provider_StorageType = /*#__PURE__*/ function(StorageType) {
-    StorageType["INDEXEDDB"] = "indexeddb";
-    StorageType["LOCALSTORAGE"] = "localStorage";
-    StorageType["MEMORY"] = "memory";
-    StorageType["NONE"] = "none";
-    return StorageType;
-}({});
-function createStorageProvider() {
-    let type = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "indexeddb", namespace = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 'playground';
-    switch(type){
-        case "indexeddb":
-            if ('undefined' != typeof indexedDB) return new IndexedDBStorageProvider(namespace);
-            console.warn('IndexedDB not available, falling back to localStorage');
-            return createStorageProvider("localStorage", namespace);
-        case "localStorage":
-            if ('undefined' != typeof localStorage) return new LocalStorageProvider(namespace);
-            console.warn('localStorage not available, falling back to memory storage');
-            return createStorageProvider("memory", namespace);
-        case "memory":
-            return new storage_provider_MemoryStorageProvider();
-        case "none":
-            return new storage_provider_NoOpStorageProvider();
-        default:
-            throw new Error(`Unknown storage type: ${type}`);
-    }
-}
-function detectBestStorageType() {
-    if ('undefined' != typeof indexedDB) try {
-        indexedDB.open('test', 1).onerror = ()=>{};
-        return "indexeddb";
-    } catch (e) {}
-    if ('undefined' != typeof localStorage) try {
-        localStorage.setItem('test', 'test');
-        localStorage.removeItem('test');
-        return "localStorage";
-    } catch (e) {}
-    return "memory";
-}
-export { MemoryStorageProvider as IndexedDBMemoryStorageProvider, NoOpStorageProvider as IndexedDBNoOpStorageProvider, IndexedDBStorageProvider, LocalStorageProvider, storage_provider_MemoryStorageProvider as MemoryStorageProvider, storage_provider_NoOpStorageProvider as NoOpStorageProvider, storage_provider_StorageType as StorageType, createStorageProvider, detectBestStorageType };
+export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider };

package/dist/es/hooks/usePlaygroundState.mjs

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { createStorageProvider, detectBestStorageType } from "../component/universal-playground/providers/storage-provider.mjs";
 import { WELCOME_MESSAGE_TEMPLATE } from "../utils/constants.mjs";
 function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     const [loading, setLoading] = useState(false);
@@ -13,25 +12,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     const infoListRef = useRef(null);
     const currentRunningIdRef = useRef(null);
     const interruptedFlagRef = useRef({});
-    const initializedRef = useRef(false);
     useEffect(()=>{
-        const migrateFromOldNamespace = async ()=>{
-            const oldStorage = createStorageProvider(detectBestStorageType(), 'playground-default');
-            try {
-                if (null == oldStorage ? void 0 : oldStorage.loadMessages) {
-                    const oldMessages = await oldStorage.loadMessages();
-                    if (oldMessages.length > 1) {
-                        console.log('Found data in old namespace, migrating...');
-                        if (null == storage ? void 0 : storage.saveMessages) await storage.saveMessages(oldMessages);
-                        if (oldStorage.clearMessages) await oldStorage.clearMessages();
-                        return oldMessages;
-                    }
-                }
-            } catch (error) {
-                console.debug('No data found in old namespace:', error);
-            }
-            return [];
-        };
         const initializeMessages = async ()=>{
             const welcomeMessage = {
                 ...WELCOME_MESSAGE_TEMPLATE,
@@ -39,8 +20,7 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 timestamp: new Date()
             };
             if (null == storage ? void 0 : storage.loadMessages) try {
-                let storedMessages = await storage.loadMessages();
-                if (0 === storedMessages.length) storedMessages = await migrateFromOldNamespace();
+                const storedMessages = await storage.loadMessages();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
                     welcomeMessage,
@@ -56,13 +36,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 welcomeMessage
             ]);
         };
-        if (storage && !initializedRef.current) {
-            initializedRef.current = true;
-            initializeMessages();
-        } else if (!storage && 0 === infoList.length) initializeMessages();
-    }, [
-        storage
-    ]);
+        if (0 === infoList.length) initializeMessages();
+    }, []);
     useEffect(()=>{
         if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             if (error instanceof DOMException && 'QuotaExceededError' === error.name) console.warn('Storage quota exceeded - some messages may not be saved persistently');

package/dist/es/index.mjs

@@ -20,6 +20,6 @@ import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from
 import { filterBase64Value, timeStr } from "./utils/index.mjs";
 import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
-import { IndexedDBStorageProvider, LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, StorageType, createStorageProvider, detectBestStorageType } from "./component/universal-playground/providers/storage-provider.mjs";
+import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };

package/dist/es/utils/replay-scripts.mjs

@@ -42,9 +42,8 @@ const capitalizeFirstLetter = (str)=>{
     return str.charAt(0).toUpperCase() + str.slice(1);
 };
 const allScriptsFromDump = (dump)=>{
-    const dimensionsSet = new Set();
-    let firstWidth;
-    let firstHeight;
+    let width;
+    let height;
     let sdkVersion;
     const modelBriefsSet = new Set();
     dump.executions.forEach((execution)=>{
@@ -52,17 +51,12 @@ const allScriptsFromDump = (dump)=>{
         execution.tasks.forEach((task)=>{
             var _task_uiContext_size, _task_uiContext;
             if (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_size = _task_uiContext.size) ? void 0 : _task_uiContext_size.width) {
-                const w = task.uiContext.size.width;
-                const h = task.uiContext.size.height;
-                if (!firstWidth) {
-                    firstWidth = w;
-                    firstHeight = h;
-                }
-                dimensionsSet.add(`${w}x${h}`);
+                width = task.uiContext.size.width;
+                height = task.uiContext.size.height;
             }
         });
     });
-    if (!firstWidth || !firstHeight) {
+    if (!width || !height) {
         console.warn('width or height is missing in dump file');
         return {
             scripts: [],
@@ -72,7 +66,7 @@ const allScriptsFromDump = (dump)=>{
     }
     const allScripts = [];
     dump.executions.forEach((execution)=>{
-        const scripts = generateAnimationScripts(execution, -1, firstWidth, firstHeight);
+        const scripts = generateAnimationScripts(execution, -1, width, height);
         if (scripts) allScripts.push(...scripts);
         execution.tasks.forEach((task)=>{
             if (task.usage) {
@@ -99,8 +93,8 @@ const allScriptsFromDump = (dump)=>{
     })();
     return {
         scripts: allScriptsWithoutIntermediateDoneFrame,
-        width: firstWidth,
-        height: firstHeight,
+        width,
+        height,
         sdkVersion,
         modelBriefs
     };
@@ -149,16 +143,14 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
         if ('Planning' === task.type) {
             const planningTask = task;
             if (planningTask.recorder && planningTask.recorder.length > 0) {
-                var _planningTask_recorder_, _planningTask_recorder, _task_uiContext_size, _task_uiContext, _task_uiContext_size1, _task_uiContext1;
+                var _planningTask_recorder_, _planningTask_recorder;
                 scripts.push({
                     type: 'img',
                     img: null == (_planningTask_recorder = planningTask.recorder) ? void 0 : null == (_planningTask_recorder_ = _planningTask_recorder[0]) ? void 0 : _planningTask_recorder_.screenshot,
                     camera: 0 === index ? fullPageCameraState : void 0,
                     duration: stillDuration,
                     title: typeStr(task),
-                    subTitle: paramStr(task),
-                    imageWidth: (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_size = _task_uiContext.size) ? void 0 : _task_uiContext_size.width) || imageWidth,
-                    imageHeight: (null == (_task_uiContext1 = task.uiContext) ? void 0 : null == (_task_uiContext_size1 = _task_uiContext1.size) ? void 0 : _task_uiContext_size1.height) || imageHeight
+                    subTitle: paramStr(task)
                 });
             }
         } else if ('Insight' === task.type && 'Locate' === task.subType) {
@@ -174,21 +166,16 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             };
             const context = insightTask.uiContext;
             if (null == context ? void 0 : context.screenshotBase64) {
-                var _insightTask_log, _insightTask_output1, _insightDump_taskInfo, _context_size, _context_size1;
+                var _insightTask_log, _insightTask_output1, _insightDump_taskInfo;
                 const insightDump = null == (_insightTask_log = insightTask.log) ? void 0 : _insightTask_log.dump;
                 const insightContentLength = context.tree ? treeToList(context.tree).length : 0;
-                if (context.screenshotBase64) {
-                    var _context_size2, _context_size3;
-                    scripts.push({
-                        type: 'img',
-                        img: context.screenshotBase64,
-                        duration: stillAfterInsightDuration,
-                        title,
-                        subTitle,
-                        imageWidth: (null == (_context_size2 = context.size) ? void 0 : _context_size2.width) || imageWidth,
-                        imageHeight: (null == (_context_size3 = context.size) ? void 0 : _context_size3.height) || imageHeight
-                    });
-                }
+                if (context.screenshotBase64) scripts.push({
+                    type: 'img',
+                    img: context.screenshotBase64,
+                    duration: stillAfterInsightDuration,
+                    title,
+                    subTitle
+                });
                 let cameraState;
                 cameraState = currentCameraState === fullPageCameraState ? void 0 : insightCameraState ? mergeTwoCameraState(currentCameraState, insightCameraState) : void 0;
                 scripts.push({
@@ -201,9 +188,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     duration: insightContentLength > 20 ? locateDuration : 0.5 * locateDuration,
                     insightCameraDuration: locateDuration,
                     title,
-                    subTitle,
-                    imageWidth: (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth,
-                    imageHeight: (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight
+                    subTitle
                 });
                 scripts.push({
                     type: 'sleep',
@@ -214,7 +199,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                 insightOnTop = true;
             }
         } else if ('Action' === task.type && 'FalsyConditionStatement' !== task.subType) {
-            var _task_recorder_, _task_recorder, _task_uiContext_size2, _task_uiContext2, _task_uiContext_size3, _task_uiContext3, _task_recorder_1, _task_recorder1;
+            var _task_recorder_, _task_recorder, _task_recorder_1, _task_recorder1;
             const title = typeStr(task);
             const subTitle = paramStr(task);
             scripts.push(pointerScript(mousePointer, title, subTitle));
@@ -225,9 +210,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                 duration: actionDuration,
                 camera: 'Sleep' === task.subType ? fullPageCameraState : insightCameraState,
                 title,
-                subTitle,
-                imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_size2 = _task_uiContext2.size) ? void 0 : _task_uiContext_size2.width) || imageWidth,
-                imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_size3 = _task_uiContext3.size) ? void 0 : _task_uiContext_size3.height) || imageHeight
+                subTitle
             });
             if (insightOnTop) {
                 scripts.push({
@@ -240,7 +223,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             }
             const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
             if (null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[1]) ? void 0 : _task_recorder_1.screenshot) {
-                var _task_recorder_2, _task_recorder2, _task_uiContext_size4, _task_uiContext4, _task_uiContext_size5, _task_uiContext5;
+                var _task_recorder_2, _task_recorder2;
                 scripts.push({
                     type: 'spinning-pointer',
                     duration: actionSpinningPointerDuration,
@@ -253,9 +236,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,
                     duration: imgStillDuration,
                     title,
-                    subTitle,
-                    imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_size4 = _task_uiContext4.size) ? void 0 : _task_uiContext_size4.width) || imageWidth,
-                    imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_size5 = _task_uiContext5.size) ? void 0 : _task_uiContext_size5.height) || imageHeight
+                    subTitle
                 });
             } else scripts.push({
                 type: 'sleep',
@@ -268,22 +249,16 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             const title = typeStr(task);
             const subTitle = paramStr(task);
             const screenshot = null == (_task_recorder3 = task.recorder) ? void 0 : null == (_task_recorder_3 = _task_recorder3[task.recorder.length - 1]) ? void 0 : _task_recorder_3.screenshot;
-            if (screenshot) {
-                var _task_uiContext_size6, _task_uiContext6, _task_uiContext_size7, _task_uiContext7;
-                scripts.push({
-                    type: 'img',
-                    img: screenshot,
-                    duration: stillDuration,
-                    camera: fullPageCameraState,
-                    title,
-                    subTitle,
-                    imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_size6 = _task_uiContext6.size) ? void 0 : _task_uiContext_size6.width) || imageWidth,
-                    imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_size7 = _task_uiContext7.size) ? void 0 : _task_uiContext_size7.height) || imageHeight
-                });
-            }
+            if (screenshot) scripts.push({
+                type: 'img',
+                img: screenshot,
+                duration: stillDuration,
+                camera: fullPageCameraState,
+                title,
+                subTitle
+            });
         }
         if ('finished' !== task.status) {
-            var _task_uiContext_size8, _task_uiContext8, _task_uiContext_size9, _task_uiContext9;
             errorStateFlag = true;
             const errorTitle = typeStr(task);
             const errorMsg = task.errorMessage || 'unknown error';
@@ -294,9 +269,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                 camera: fullPageCameraState,
                 duration: stillDuration,
                 title: errorTitle,
-                subTitle: errorSubTitle,
-                imageWidth: (null == (_task_uiContext8 = task.uiContext) ? void 0 : null == (_task_uiContext_size8 = _task_uiContext8.size) ? void 0 : _task_uiContext_size8.width) || imageWidth,
-                imageHeight: (null == (_task_uiContext9 = task.uiContext) ? void 0 : null == (_task_uiContext_size9 = _task_uiContext9.size) ? void 0 : _task_uiContext_size9.height) || imageHeight
+                subTitle: errorSubTitle
             });
             return;
         }

package/dist/lib/component/player/index.js

@@ -212,29 +212,9 @@ function Player(props) {
     const cameraState = (0, external_react_namespaceObject.useRef)({
         ...basicCameraState
     });
-    const resizeCanvasIfNeeded = async (newWidth, newHeight)=>{
-        if (app.screen.width !== newWidth || app.screen.height !== newHeight) {
-            app.renderer.resize(newWidth, newHeight);
-            if (divContainerRef.current) {
-                const aspectRatio = newWidth / newHeight;
-                divContainerRef.current.style.setProperty('--canvas-aspect-ratio', aspectRatio.toString());
-            }
-            const newBasicCameraState = {
-                left: 0,
-                top: 0,
-                width: newWidth,
-                pointerLeft: Math.round(newWidth / 2),
-                pointerTop: Math.round(newHeight / 2)
-            };
-            cameraState.current = newBasicCameraState;
-        }
-    };
-    const repaintImage = async (scriptWidth, scriptHeight)=>{
+    const repaintImage = async ()=>{
         const imgToUpdate = currentImg.current;
         if (!imgToUpdate) return void console.warn('no image to update');
-        const targetWidth = scriptWidth || imageWidth;
-        const targetHeight = scriptHeight || imageHeight;
-        await resizeCanvasIfNeeded(targetWidth, targetHeight);
         if (!(0, pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate)) {
             console.warn('image not loaded', imgToUpdate);
             await (0, pixi_loader_js_namespaceObject.loadTexture)(imgToUpdate);
@@ -248,8 +228,8 @@ function Player(props) {
         if (child) windowContentContainer.removeChild(child);
         sprite.label = mainImgLabel;
         sprite.zIndex = LAYER_ORDER_IMG;
-        sprite.width = targetWidth;
-        sprite.height = targetHeight;
+        sprite.width = imageWidth;
+        sprite.height = imageHeight;
         windowContentContainer.addChild(sprite);
     };
     const spinningPointer = (frame)=>{
@@ -307,10 +287,9 @@ function Player(props) {
         pointerSprite.current.zIndex = LAYER_ORDER_POINTER;
         windowContentContainer.addChild(pointerSprite.current);
     };
-    const updateCamera = (state, currentWidth)=>{
+    const updateCamera = (state)=>{
         cameraState.current = state;
-        const effectiveWidth = currentWidth || app.screen.width || imageWidth;
-        const newScale = autoZoom ? Math.max(1, effectiveWidth / state.width) : 1;
+        const newScale = autoZoom ? Math.max(1, imageWidth / state.width) : 1;
         windowContentContainer.scale.set(newScale);
         windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
         windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
@@ -324,8 +303,6 @@ function Player(props) {
         }
     };
     const cameraAnimation = async (targetState, duration, frame)=>{
-        const currentCanvasWidth = app.screen.width || imageWidth;
-        const currentCanvasHeight = app.screen.height || imageHeight;
         if (!autoZoom) {
             const currentState = {
                 ...cameraState.current
@@ -345,7 +322,7 @@ function Player(props) {
                         pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
                         pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
                     };
-                    updateCamera(nextState, currentCanvasWidth);
+                    updateCamera(nextState);
                     if (elapsedTime < duration) frame(animate);
                     else resolve();
                 };
@@ -360,7 +337,7 @@ function Player(props) {
         const startTop = currentState.top;
         const startPointerLeft = currentState.pointerLeft;
         const startPointerTop = currentState.pointerTop;
-        const startScale = currentState.width / currentCanvasWidth;
+        const startScale = currentState.width / imageWidth;
         const startTime = performance.now();
         const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
         const pointerMoveDuration = shouldMovePointer ? 0.375 * duration : 0;
@@ -385,19 +362,19 @@ function Player(props) {
                     const cameraElapsedTime = elapsedTime - cameraMoveStart;
                     const rawCameraProgress = Math.min(cameraElapsedTime / cameraMoveDuration, 1);
                     const cameraProgress = cubicImage(rawCameraProgress);
-                    const targetScale = targetState.width / currentCanvasWidth;
+                    const targetScale = targetState.width / imageWidth;
                     const progressScale = startScale + (targetScale - startScale) * cameraProgress;
-                    const progressWidth = currentCanvasWidth * progressScale;
-                    const progressHeight = currentCanvasHeight * progressScale;
+                    const progressWidth = imageWidth * progressScale;
+                    const progressHeight = imageHeight * progressScale;
                     nextState.width = progressWidth;
                     const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
                     const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
-                    const horizontalExceed = progressLeft + progressWidth - currentCanvasWidth;
-                    const verticalExceed = progressTop + progressHeight - currentCanvasHeight;
+                    const horizontalExceed = progressLeft + progressWidth - imageWidth;
+                    const verticalExceed = progressTop + progressHeight - imageHeight;
                     nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
                     nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
                 }
-                updateCamera(nextState, currentCanvasWidth);
+                updateCamera(nextState);
                 if (elapsedTime < duration) frame(animate);
                 else resolve();
             };
@@ -534,7 +511,7 @@ function Player(props) {
                     var _item_context;
                     if (!item.img) throw new Error('img is required');
                     currentImg.current = item.img;
-                    await repaintImage(item.imageWidth, item.imageHeight);
+                    await repaintImage();
                     const elements = (null == (_item_context = item.context) ? void 0 : _item_context.tree) ? (0, extractor_namespaceObject.treeToList)(item.context.tree) : [];
                     const highlightElements = item.highlightElement ? [
                         item.highlightElement
@@ -551,7 +528,7 @@ function Player(props) {
                 } else if ('img' === item.type) {
                     if (item.img && item.img !== currentImg.current) {
                         currentImg.current = item.img;
-                        await repaintImage(item.imageWidth, item.imageHeight);
+                        await repaintImage();
                     }
                     if (item.camera) await cameraAnimation(item.camera, item.duration, frame);
                     else await sleep(item.duration);