Skip to content

feat: replace Terre drag transform workarounds with preview queries#624

Open
A-kirami wants to merge 11 commits into
OpenWebGAL:devfrom
A-kirami:feat/drag-transform-query-improvement
Open

feat: replace Terre drag transform workarounds with preview queries#624
A-kirami wants to merge 11 commits into
OpenWebGAL:devfrom
A-kirami:feat/drag-transform-query-improvement

Conversation

@A-kirami

@A-kirami A-kirami commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

背景

当前 Terre 的拖拽变换链路主要依赖编辑器侧本地推断 reference geometry、base transform 和 target baseline。
这套实现虽然可用,但本质上是在前端复刻 runtime 布局与继承规则,容易在引擎布局、素材尺寸、Live2D、默认 transform 或 target 状态变化后产生漂移。

本次改动的目标是让 Terre 优先消费 runtime 已定义的 preview query 契约:

  • preview.query.reference-box
  • preview.query.base-transform
  • preview.query.transform-baseline

在支持 query 的 V1 runtime 上,拖拽框初始化、baseline 解析和写回语义都基于 query 结果;在旧 runtime 或 query 不可用时,继续保持当前 legacy 行为,不破坏现有效果编辑体验。

另外,这个 PR 也顺带补齐了一处与新 preview runtime 语义对齐的编辑器侧小改动:
Terre 的实时 setEffect 预览会显式标记 phase: 'preview',避免新 runtime 将高频预览交互误当成 durable commit 处理。

主要改动

  • EditorPreviewHost 补齐 query 路由能力:

    • query 仅转发到当前 active embedded preview
    • 建立 requestId -> editor socket 的 pending 映射
    • 将 preview 的 response / error 按 requestId 回传给原 editor
    • 保持现有 preview command fan-out 逻辑不变
  • EditorPreviewClient 补齐 request owner 生命周期:

    • 新增 query request promise 封装
    • 处理 pending、timeout、error envelope、socket close / reconnect 清理
    • 增加 runtime 生命周期级 capability probe
    • 缓存 base-transform 查询结果,并在 runtime 重连后失效
  • 为拖拽链路抽出最小 transform resolver:

    • 仅覆盖 position / scale / rotation
    • 统一 explicit transform、base transform 和 target baseline 的解析
    • 用于初始化拖拽显示值,而不是把 fallback 直接写回脚本
  • TransformableBox 在 query 路径下改用 reference-box 初始化几何:

    • 不再依赖本地素材尺寸推导
    • 不再依赖固定 2560x1440
    • 不再依赖方向偏移、场景反查和 Live2D 模拟尺寸
    • 坐标换算统一基于 referenceBox.stageWidth / stageHeight
  • 收紧拖拽写回语义:

    • 实时预览和保存 payload 只包含本次交互实际触达的 transform 顶层字段
    • 避免把 fallback、baseline 或未触达字段误写回脚本
  • 顺带补齐效果编辑器实时预览的 phase 标记:

    • editor-preview-protocol 中为 SetEffectPayload 增加可选 phase
    • Terre 现有四个实时 setEffect 预览调用点统一发送 phase: 'preview'
    • 保存路径仍保持现状,继续由 submitScene() -> sync-scene 收敛 runtime

兼容与降级

  • 当 runtime capability 为 unsupported 时,继续走当前 legacy 拖拽与效果编辑路径
  • reference-box 不可用、超时或返回非 ready 状态时,回退到当前旧行为
  • base-transformtransform-baseline 失败不会阻断拖拽,但未触达字段不会被补写
  • 当 runtime 尚未支持或忽略 setEffect.phase 时,效果编辑器功能仍保持兼容,只是没有对应的预览性能收益

验证重点

  • host/client 的 query request/response 生命周期正确,timeout 和 socket close 能正常清理 pending
  • reference-box.ready 时,拖拽框与 runtime reference geometry 对齐
  • 旧 preview 或不支持 query 的 runtime 下,现有交互保持不变
  • setTransform -target=... 能显示 target 当前 inherited transform,而不是固定 0 / 1 / 0
  • 只移动时只写 position,只缩放时只写 scale,只旋转时只写 rotation
  • 效果编辑器实时预览发送的 setEffect payload 会带 phase: 'preview'
  • 效果编辑器确认保存后,仍然通过现有 submitScene() -> sync-scene 路径收敛,不额外引入新的 commit path

非目标

  • 不重写 EffectEditor 整体表单模型
  • 不引入完整 draft / resolver 架构
  • 不替换 react-moveable

相关

需要先合并 OpenWebGAL/WebGAL#991

解决了 #612 以及一些拖拽变换的已知问题和潜在问题

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a protocol-based editor preview sync mechanism, updating the preview protocol with new queries and commands, and refactoring the EffectEditor and TransformableBox to resolve and apply drag transforms using reference boxes and baselines. The feedback highlights critical issues, including a missing dependency array in a useEffect hook in TransformableBox that prevents updates when switching sentences, direct state mutation in EffectEditor instead of using .set(), and potential runtime crashes in getValueByPath and pickDragTransformFields due to a lack of defensive checks against null values.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant