OpenWebGAL · MakinoharaShoko · Jun 6, 2026 · May 31, 2026 · Jun 5, 2026 · Jun 5, 2026
diff --git a/packages/origine2/src/hooks/useGlobalEffectEditor.ts b/packages/origine2/src/hooks/useGlobalEffectEditor.ts
@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import {
+  eventBus,
+  GlobalEffectEditorEvent,
+  GlobalEffectEditorPayload,
+} from '@/utils/eventBus';
+
+export function useGlobalEffectEditor(handler: (event: GlobalEffectEditorEvent) => void) {
+  const editorId = useRef('');
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    const handleEvent = (event: GlobalEffectEditorEvent) => {
+      if (event.editorId === editorId.current) handlerRef.current(event);
+    };
+    eventBus.on('editor:global-effect-editor-event', handleEvent);
+    return () => eventBus.off('editor:global-effect-editor-event', handleEvent);
+  }, []);
+
+  return (payload: Omit<GlobalEffectEditorPayload, 'editorId'>) => {
+    editorId.current = Math.random().toString(36).slice(2);
+    eventBus.emit('editor:open-global-effect-editor', { ...payload, editorId: editorId.current });
+  };
+}
diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
@@ -1037,6 +1037,9 @@ msgstr "Clear role name after execution"
 msgid "扩展名"
 msgstr "Extension name"
 
+msgid "拖拽调整变换（建议打开快速预览效果）"
+msgstr "Drag and resize to adjust the transformation (It is recommended to turn on \"Fast preview effects\")"
+
 msgid "拼接先前文本框内的语句"
 msgstr "Concat the sentences with previous text"
 

diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
@@ -1037,6 +1037,9 @@ msgstr "実行後にキャラクター名を消去"
 msgid "扩展名"
 msgstr "拡張子"
 
+msgid "拖拽调整变换（建议打开快速预览效果）"
+msgstr "ドラッグ調整変換（「高速プレビューエフェクト」のオンをお勧めします）"
+
 msgid "拼接先前文本框内的语句"
 msgstr "前のテキストボックスの内容をつなげる"
 

diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
@@ -1037,6 +1037,9 @@ msgstr "执行后清除角色名"
 msgid "扩展名"
 msgstr "扩展名"
 
+msgid "拖拽调整变换（建议打开快速预览效果）"
+msgstr "拖拽调整变换（建议打开快速预览效果）"
+
 msgid "拼接先前文本框内的语句"
 msgstr "拼接先前文本框内的语句"
 

diff --git a/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx b/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
@@ -10,7 +10,6 @@ import { t } from "@lingui/macro";
 import { ArrowClockwiseFilled, ArrowClockwiseRegular, LiveFilled, LiveOffFilled, LiveOffRegular, LiveRegular, OpenFilled, OpenRegular, bundleIcon } from "@fluentui/react-icons";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
 import { createPreviewBootstrapProvide, isPreviewBootstrapRequest } from "@/utils/editorPreviewBootstrap";
-import TransformableBox from '@/pages/editor/TransformableBox/TransformableBox';
 import { createId } from '@/utils/createId';
 
 let startX = 0;
@@ -29,7 +28,6 @@ export default function EditorSideBar() {
   const isUseFontOptimization = useEditorStore.use.isUseFontOptimization();
   const isShowPreview = useEditorStore.use.isShowPreview();
   const updateIsShowPreview = useEditorStore.use.updateIsShowPreview();
-  const isWindowAdjustment = useEditorStore.use.isWindowAdjustment();
 
   const isShowSidebar = useGameEditorContext((state) => state.isShowSidebar);
   const currentSidebarTab = useGameEditorContext((state) => state.currentSidebarTab);
@@ -246,20 +244,17 @@ export default function EditorSideBar() {
           </div>
           <div
             ref={PreviewControlRef}
+            id="gamePreviewControl"
             className={styles.previewWindow}
             style={{
               position: 'absolute',
               left: 0,
               bottom: 0,
               overflow: 'hidden',
               pointerEvents: 'none',
-              display: isShowPreview && isWindowAdjustment ? 'block' : 'none',
+              display: isShowPreview ? 'block' : 'none',
             }}
-          >
-            <TransformableBox
-              parents={PreviewControlRef}
-            />
-          </div>
+          />
           {/* eslint-disable-next-line react/iframe-missing-sandbox */}
           {isShowPreview && <iframe
             ref={ifRef}

diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeBg.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeBg.tsx
@@ -5,17 +5,13 @@ import ChooseFile from "../../ChooseFile/ChooseFile";
 import {useValue} from "../../../../hooks/useValue";
 import {getArgByKey} from "../utils/getArgByKey";
 import TerreToggle from "../../../../components/terreToggle/TerreToggle";
-import CommonTips from "@/pages/editor/GraphicalEditor/components/CommonTips";
-import {EffectEditor} from "@/pages/editor/GraphicalEditor/components/EffectEditor";
-import { Button, Input } from "@fluentui/react-components";
+import { Button } from "@fluentui/react-components";
 import { t } from "@lingui/macro";
 import { combineSubmitString } from "@/utils/combineSubmitString";
 import { extNameMap } from "../../ChooseFile/chooseFileConfig";
-import WheelDropdown from "../components/WheelDropdown";
-import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
-import { eventBus } from "@/utils/eventBus";
 import { AssetPreview } from "../components/AssetPreview";
+import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
 
 export default function ChangeBg(props: ISentenceEditorProps) {
   const isNoFile = props.sentence.content === "";
@@ -30,14 +26,6 @@ export default function ChangeBg(props: ISentenceEditorProps) {
   const enterAnimation = useValue(getArgByKey(props.sentence, 'enter').toString() ?? "");
   const exitAnimation = useValue(getArgByKey(props.sentence, 'exit').toString() ?? "");
   const ease = useValue(getArgByKey(props.sentence, 'ease').toString() ?? '');
-  const easeTypeOptions = useEaseTypeOptions();
-
-  const normalizeAnimationName = (name: string) => name.replace(/\.json$/i, "");
-  const toAnimationFilePath = (name: string) => {
-    const normalized = normalizeAnimationName(name);
-    return normalized ? `${normalized}.json` : "";
-  };
-
   const submit = () => {
     const submitString = combineSubmitString(
       props.sentence.commandRaw,
@@ -67,120 +55,35 @@ export default function ChangeBg(props: ISentenceEditorProps) {
     props.onSubmit(submitString);
   };
 
-  const openEffectEditor = () => {
-    eventBus.emit('editor:open-global-terre-panel', {
-      title: t`效果编辑器`,
-      bottomBarChildren: <>
-        <CommonOptions key="enterAnimation" title={t`选择进入动画`}>
-          <>
-            {enterAnimation.value}{"\u00a0"}
-            <ChooseFile
-              title={t`选择进入动画文件`}
-              basePath={['animation']}
-              selectedFilePath={toAnimationFilePath(enterAnimation.value)}
-              onChange={(file) => {
-                enterAnimation.set(normalizeAnimationName(file?.name ?? ""));
-                submit();
-              }}
-              extNames={extNameMap.get('json')}
-              hiddenFiles={['animationTable.json']}
-            />
-          </>
-        </CommonOptions>
-        <CommonOptions key="exitAnimation" title={t`选择退出动画`}>
-          <>
-            {exitAnimation.value}{"\u00a0"}
-            <ChooseFile
-              title={t`选择退出动画文件`}
-              basePath={['animation']}
-              selectedFilePath={toAnimationFilePath(exitAnimation.value)}
-              onChange={(file) => {
-                exitAnimation.set(normalizeAnimationName(file?.name ?? ""));
-                submit();
-              }}
-              extNames={extNameMap.get('json')}
-              hiddenFiles={['animationTable.json']}
-            />
-          </>
-        </CommonOptions>
-        <CommonOptions key="10" title={t`过渡时间（单位为毫秒）`}>
-          <div>
-            <Input
-              placeholder={t`过渡时间（单位为毫秒）`}
-              value={duration.value.toString()}
-              onChange={(_, data) => {
-                const newDuration = Number(data.value);
-                if (isNaN(newDuration) || data.value === '')
-                  duration.set("");
+  const openEffectEditor = useGlobalEffectEditor((event) => {
+    if (event.action === 'change') {
+      json.set(event.value);
+      submit();
+    } else if (event.action === 'preview') {
+      EditorPreviewClient.setEffect({ target: 'bg-main', transform: event.value });
+    } else {
+      const values = { enterAnimation, exitAnimation, duration, enterDuration, exitDuration, ease };
+      if (event.key in values) values[event.key as keyof typeof values].set(event.value as never);
+      if (event.submit) submit();
+    }
+  });
 
-                else
-                  duration.set(newDuration);
-              } }
-              onBlur={submit} />
-          </div>
-        </CommonOptions>
-        <CommonOptions key="enterDuration" title={t`入场时长（单位为毫秒）`}>
-          <div>
-            <Input
-              placeholder={t`入场时长（单位为毫秒）`}
-              value={enterDuration.value.toString()}
-              onChange={(_, data) => {
-                const newDuration = Number(data.value);
-                if (isNaN(newDuration) || data.value === '') {
-                  enterDuration.set("");
-                } else {
-                  enterDuration.set(newDuration);
-                }
-              }}
-              onBlur={submit}
-            />
-          </div>
-        </CommonOptions>
-        <CommonOptions key="exitDuration" title={t`退场时长（单位为毫秒）`}>
-          <div>
-            <Input
-              placeholder={t`退场时长（单位为毫秒）`}
-              value={exitDuration.value.toString()}
-              onChange={(_, data) => {
-                const newDuration = Number(data.value);
-                if (isNaN(newDuration) || data.value === '') {
-                  exitDuration.set("");
-                } else {
-                  exitDuration.set(newDuration);
-                }
-              }}
-              onBlur={submit}
-            />
-          </div>
-        </CommonOptions>
-        <CommonOptions key="5" title={t`缓动类型`}>
-          <WheelDropdown
-            options={easeTypeOptions}
-            value={ease.value}
-            onValueChange={(newValue) => {
-              ease.set(newValue?.toString() ?? "");
-              submit();
-            }}
-          />
-        </CommonOptions>
-      </>,
-      children: <div>
-        <CommonTips
-          text={t`提示：效果只有在切换到不同背景或关闭之前的背景再重新添加时生效。如果你要为现有的背景设置效果，请使用单独的设置效果命令`}/>
-        <EffectEditor
-          json={json.value.toString()}
-          onChange={(newJson) => {
-            json.set(newJson);
-            submit();
-          }}
-          onUpdate={(transform) => {
-            EditorPreviewClient.setEffect({ target: 'bg-main', transform });
-          }}
-          sentence={props.sentence}
-          index={props.index}
-          targetPath={props.targetPath}
-        />
-      </div>,
+  const showEffectEditor = () => {
+    openEffectEditor({
+      title: t`效果编辑器`,
+      json: json.value.toString(),
+      sentence: props.sentence,
+      index: props.index,
+      targetPath: props.targetPath,
+      tip: t`提示：效果只有在切换到不同背景或关闭之前的背景再重新添加时生效。如果你要为现有的背景设置效果，请使用单独的设置效果命令`,
+      options: {
+        enterAnimation: enterAnimation.value,
+        exitAnimation: exitAnimation.value,
+        duration: duration.value,
+        enterDuration: enterDuration.value,
+        exitDuration: exitDuration.value,
+        ease: ease.value,
+      },
     });
   };
 
@@ -231,7 +134,7 @@ export default function ChangeBg(props: ISentenceEditorProps) {
         />
       </CommonOptions>}
       <CommonOptions key="23" title={t`显示效果`}>
-        <Button onClick={openEffectEditor}>{t`打开效果编辑器`}</Button>
+        <Button onClick={showEffectEditor}>{t`打开效果编辑器`}</Button>
       </CommonOptions>
     </div>
     <div className={styles.commonArgItem}>