Merge branch 'dev' into feat/editor-preview-sync-v1-runtime

Author: A-kirami

packages/webgal/public/game/template/Stage/TextBox/textbox.scss

@@ -177,6 +177,10 @@
   overflow: hidden;
 }
 
-.read {
+.readTextOuter {
+  background-image: none;
+  background-clip: border-box;
+  -webkit-background-clip: border-box;
   color: #C0C0C0;
+  -webkit-text-fill-color: #C0C0C0;
 }

packages/webgal/src/Core/Modules/readHistory.ts

@@ -8,6 +8,15 @@ import { setReadHistory } from "@/store/userDataReducer";
 import { setStorage } from "../controller/storage/storageController";
 import { stageStateManager } from '@/Core/Modules/stage/stageStateManager';
 
+let debugTextReadMode: boolean | null = null;
+
+export function setDebugTextReadMode(isRead: boolean | null) {
+  debugTextReadMode = isRead;
+  if (isRead !== null) {
+    stageStateManager.setStageAndCommit('isRead', isRead);
+  }
+}
+
 export class ReadHistoryManager {
   private history: Map<string, Uint8Array> = new Map();
 
@@ -107,7 +116,7 @@ export class ReadHistoryManager {
       const bitset = this.history.get(scenarioName)!;
       isRead = (bitset[index >> 3] & (1 << (index & 7))) !== 0;
     }
-    stageStateManager.setStage('isRead', isRead);
+    stageStateManager.setStage('isRead', debugTextReadMode ?? isRead);
     if (!isRead) {
       this.addReadHistory();
     }

packages/webgal/src/Core/util/syncWithEditor/previewSyncRuntime.test.ts

@@ -91,6 +91,7 @@ interface ActiveModuleState {
     getCalculationStageState: ReturnType<typeof vi.fn>;
     updateEffectAndCommit: ReturnType<typeof vi.fn>;
   };
+  setDebugTextReadMode: ReturnType<typeof vi.fn>;
   loggerInfo: ReturnType<typeof vi.fn>;
   loggerWarn: ReturnType<typeof vi.fn>;
   loggerError: ReturnType<typeof vi.fn>;
@@ -114,6 +115,7 @@ interface WebSocketRuntimeHarness {
     }>;
     layers: Array<{ id: string }>;
   };
+  setDebugTextReadMode: ReturnType<typeof vi.fn>;
   updateEffectAndCommit: ReturnType<typeof vi.fn>;
   webgalParserParse: ReturnType<typeof vi.fn>;
   WebGAL: Record<string, any>;
@@ -196,6 +198,11 @@ vi.doMock('@/Core/Modules/stage/stageStateManager', () => ({
     return getActiveModuleState().stageStateManager;
   },
 }));
+vi.doMock('@/Core/Modules/readHistory', () => ({
+  get setDebugTextReadMode() {
+    return getActiveModuleState().setDebugTextReadMode;
+  },
+}));
 vi.doMock('@/Core/Modules/stage/stageInterface', () => ({
   baseTransform: {
     position: { x: 0, y: 0 },
@@ -300,6 +307,7 @@ async function setupWebSocketRuntimeHarness(): Promise<WebSocketRuntimeHarness>
   const nextSentence = vi.fn();
   const resetStage = vi.fn();
   const updateEffectAndCommit = stageStateManager.updateEffectAndCommit;
+  const setDebugTextReadMode = vi.fn();
 
   activeModuleState = {
     webgalStore,
@@ -315,6 +323,7 @@ async function setupWebSocketRuntimeHarness(): Promise<WebSocketRuntimeHarness>
     resetStage,
     updateEffectAndCommit,
     stageStateManager,
+    setDebugTextReadMode,
     loggerInfo: vi.fn(),
     loggerWarn: vi.fn(),
     loggerError: vi.fn(),
@@ -341,6 +350,7 @@ async function setupWebSocketRuntimeHarness(): Promise<WebSocketRuntimeHarness>
     runScript,
     socket,
     stageState,
+    setDebugTextReadMode,
     updateEffectAndCommit,
     webgalParserParse,
     WebGAL,
@@ -601,6 +611,29 @@ describe('startPreviewSyncRuntime runtime behavior', () => {
     });
   });
 
+  it('applies text read mode updates through the v1 protocol and replies with a success envelope', async () => {
+    const harness = await setupWebSocketRuntimeHarness();
+
+    await completeRegisterPreviewHandshake(harness);
+
+    harness.socket.emitMessage(
+      JSON.stringify(
+        createRequestEnvelope('preview.command.set-text-read-mode', 'req-set-text-read-mode', {
+          isRead: true,
+        }),
+      ),
+    );
+    await flushMicrotasks();
+
+    expect(harness.setDebugTextReadMode).toHaveBeenCalledWith(true);
+    expect(parseSentEnvelope(harness.socket, 3)).toEqual({
+      kind: 'response',
+      type: 'preview.command.set-text-read-mode',
+      requestId: 'req-set-text-read-mode',
+      payload: {},
+    });
+  });
+
   it('re-registers with the same identity and re-publishes ready plus snapshot after reconnect', async () => {
     const harness = await setupWebSocketRuntimeHarness();
 

packages/webgal/src/Core/util/syncWithEditor/previewSyncRuntime.ts

@@ -13,6 +13,7 @@ import {
   SetComponentVisibilityPayload,
   SetEffectPayload,
   SetFontOptimizationPayload,
+  SetTextReadModePayload,
   StageSnapshotUpdatedPayload,
   SyncScenePayload,
   FastPreviewTimeoutPayload,
@@ -36,6 +37,7 @@ import {
   PreviewSyncTransportSocket,
 } from './runtime/previewSyncTransport';
 import { executePreviewSyncSceneCommand } from './runtime/previewSyncSceneCommand';
+import { setDebugTextReadMode } from '@/Core/Modules/readHistory';
 
 let previewSyncRuntimeStarted = false;
 type StageStateSnapshot = IStageState;
@@ -217,6 +219,10 @@ export const startPreviewSyncRuntime = () => {
     applyComponentVisibility(payload);
   };
 
+  const handleSetTextReadMode = (payload: SetTextReadModePayload) => {
+    setDebugTextReadMode(payload.isRead);
+  };
+
   const handleSetEffect = (payload: SetEffectPayload) => {
     const targetEffect = stageStateManager
       .getCalculationStageState()
@@ -272,6 +278,10 @@ export const startPreviewSyncRuntime = () => {
       handleSetFontOptimization(payload);
       return {};
     },
+    'preview.command.set-text-read-mode': (payload: SetTextReadModePayload) => {
+      handleSetTextReadMode(payload);
+      return {};
+    },
   };
 
   const handlePreviewRequest = <TType extends PreviewRequestType>(

packages/webgal/src/Stage/TextBox/IMSSTextbox.tsx

@@ -30,6 +30,11 @@ export default function IMSSTextbox(props: ITextboxProps) {
   } = props;
 
   const applyStyle = useApplyStyle('textbox');
+  const readTextClassName = isRead ? ` ${applyStyle('readText', styles.readText)}` : '';
+  const readTextOuterClassName = isRead
+    ? ` ${applyStyle('readTextOuter', styles.readTextOuter)}`
+    : '';
+  const readTextInnerClassName = isRead ? ` ${applyStyle('readTextInner', styles.readTextInner)}` : '';
 
   useEffect(() => {
     function settleText() {
@@ -146,14 +151,18 @@ export default function IMSSTextbox(props: ITextboxProps) {
           <span
             // data-text={e}
             id={`${delay}`}
-            className={applyStyle('TextBox_textElement_Settled', styles.TextBox_textElement_Settled)}
+            className={applyStyle('TextBox_textElement_Settled', styles.TextBox_textElement_Settled) + readTextClassName}
             key={currentDialogKey + index}
             style={{ animationDelay: `${delay}ms`, animationDuration: `${textDuration}ms` }}
           >
             <span className={styles.zhanwei + styleAllText}>
               {e}
-              <span className={applyStyle('outer', styles.outer) + styleClassName + styleAllText}>{e}</span>
-              {isUseStroke && <span className={applyStyle('inner', styles.inner) + styleAllText}>{e}</span>}
+              <span className={applyStyle('outer', styles.outer) + readTextOuterClassName + styleClassName + styleAllText}>
+                {e}
+              </span>
+              {isUseStroke && (
+                <span className={applyStyle('inner', styles.inner) + readTextInnerClassName + styleAllText}>{e}</span>
+              )}
             </span>
           </span>
         );
@@ -162,14 +171,21 @@ export default function IMSSTextbox(props: ITextboxProps) {
         <span
           // data-text={e}
           id={`${delay}`}
-          className={`${applyStyle('TextBox_textElement_start', styles.TextBox_textElement_start)} Textelement_start`}
+          className={`${applyStyle(
+            'TextBox_textElement_start',
+            styles.TextBox_textElement_start,
+          )}${readTextClassName} Textelement_start`}
           key={currentDialogKey + index}
           style={{ animationDelay: `${delay}ms`, position: 'relative' }}
         >
           <span className={styles.zhanwei + styleAllText}>
             {e}
-            <span className={applyStyle('outer', styles.outer) + `${isRead ? ` ${applyStyle('read', styles.read)}` : ''}` + styleClassName + styleAllText}>{e}</span>
-            {isUseStroke && <span className={applyStyle('inner', styles.inner) + styleAllText}>{e}</span>}
+            <span className={applyStyle('outer', styles.outer) + readTextOuterClassName + styleClassName + styleAllText}>
+              {e}
+            </span>
+            {isUseStroke && (
+              <span className={applyStyle('inner', styles.inner) + readTextInnerClassName + styleAllText}>{e}</span>
+            )}
           </span>
         </span>
       );

packages/webgal/src/Stage/TextBox/textbox.module.scss

@@ -235,6 +235,18 @@ $height: 330px;
   overflow: hidden;
 }
 
-.read {
+.readText {
+  --webgal-read-text: 1;
+}
+
+.readTextOuter {
+  background-image: none;
+  background-clip: border-box;
+  -webkit-background-clip: border-box;
   color: #C0C0C0;
+  -webkit-text-fill-color: #C0C0C0;
+}
+
+.readTextInner {
+  --webgal-read-text-inner: 1;
 }

packages/webgal/src/types/editorPreviewProtocol.test.ts

@@ -18,6 +18,7 @@ describe('editorPreviewProtocol artifacts', () => {
   it('exposes a preview command type guard', () => {
     expect(isPreviewCommandType('preview.command.sync-scene')).toBe(true);
     expect(isPreviewCommandType('preview.command.run-snippet')).toBe(true);
+    expect(isPreviewCommandType('preview.command.set-text-read-mode')).toBe(true);
     expect(isPreviewCommandType('preview.command.unknown')).toBe(false);
     expect(isPreviewCommandType('session.register-preview')).toBe(false);
   });

packages/webgal/src/types/editorPreviewProtocol.ts

@@ -34,6 +34,10 @@ export interface SetFontOptimizationPayload {
   enabled: boolean;
 }
 
+export interface SetTextReadModePayload {
+  isRead: boolean;
+}
+
 export interface PreviewCommandPayloadByType {
   'preview.command.sync-scene': SyncScenePayload;
   'preview.command.run-scene-content': RunSceneContentPayload;
@@ -42,6 +46,7 @@ export interface PreviewCommandPayloadByType {
   'preview.command.set-effect': SetEffectPayload;
   'preview.command.set-component-visibility': SetComponentVisibilityPayload;
   'preview.command.set-font-optimization': SetFontOptimizationPayload;
+  'preview.command.set-text-read-mode': SetTextReadModePayload;
 }
 
 export type PreviewCommandType = keyof PreviewCommandPayloadByType;
@@ -54,6 +59,7 @@ const PREVIEW_COMMAND_TYPES = [
   'preview.command.set-effect',
   'preview.command.set-component-visibility',
   'preview.command.set-font-optimization',
+  'preview.command.set-text-read-mode',
 ] as const satisfies readonly PreviewCommandType[];
 
 export interface PreviewRequestPayloadByType extends PreviewCommandPayloadByType {}