Skip to content

[Feature] Support custom color#52

Merged
erweixin merged 11 commits into
erweixin:mainfrom
darriousliu:feature/support-custom-color
Apr 22, 2026
Merged

[Feature] Support custom color#52
erweixin merged 11 commits into
erweixin:mainfrom
darriousliu:feature/support-custom-color

Conversation

@darriousliu

Copy link
Copy Markdown
Contributor

概要

这个 PR 将 LayoutOptions.color 暴露到 FFI 层及各平台绑定层,使调用方可以为公式设置默认颜色,并补充了对应的回归测试。

本次 PR 聚焦于一个逻辑改动:为 RaTeX 增加跨平台的默认公式颜色支持。

变更内容

  • RatexOptions 中新增默认颜色字段,使用 RGBA float 传递
  • 通过 struct_size 判断保留 FFI 的向前 / 二进制兼容性
  • 打通以下平台的颜色参数透传能力:
    • Android
    • JVM
    • iOS
    • Flutter
    • React Native
  • iOS 增加默认颜色支持:
    • 支持通过 Environment 统一设置默认颜色
    • 支持对单个 RaTeXFormula 单独指定颜色
  • React Native 增加 context,用于继承默认公式颜色
  • 增加回归测试,验证:
    • 自定义默认颜色能正确解码和透传
    • 显式 LaTeX 颜色(如 \color{...})仍然优先于默认颜色

行为说明

  • 调用方现在可以从平台层传入默认公式颜色
  • 显式 LaTeX 颜色命令仍保持更高优先级
  • 旧版 FFI 调用方如果没有传入新颜色字段,仍会回退为黑色,行为保持不变

文档

  • 本次改动涉及公开 API / 行为变化,相关示例和接口说明已同步更新

测试

  • cargo test -p ratex-ffi
  • LIBRARY_PATH=$(pwd)/target/release DYLD_LIBRARY_PATH=$(pwd)/target/release swift test --package-path platforms/ios/tests

- 更新 RatexOptions 结构体,添加颜色字段以支持 RGBA 颜色。
- 修改多个文件以实现颜色参数的传递和使用,包括 JNI、Swift、Kotlin 和 Dart。
- 更新文档示例,展示如何使用新的颜色选项进行 LaTeX 渲染。
- 确保向后兼容性,旧的调用方式仍然有效。
- 添加了颜色比较和提取功能的辅助方法
- 增加了自定义颜色解码的测试用例
- 验证显式 LaTeX 颜色覆盖默认颜色的行为
- 在 README 中添加了对数学视图默认颜色的支持说明
- 更新了示例代码,展示如何在不同环境中使用自定义颜色
- 说明显式 LaTeX 颜色优先于默认颜色的行为
Comment thread crates/ratex-ffi/src/lib.rs Outdated
+ std::mem::size_of::<RatexColor>();

if opts_ref.struct_size >= color_size {
opts_ref.color.into()

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

需要增加一下 color 值的校验不?

void didChangeDependencies() {
super.didChangeDependencies();
if (widget.color == null) {
_render();

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

可以增加一个状态,记录一下 _inheritedColor 的 last value, 只有变化的时候才需要 _render ,没有变化的时候是不是就不用重新渲染,可以优化下性能。

}

@objc public var color: UIColor? {
get { innerView.color }

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

这里应该新增一个桥接变量?不应该直接取 innerView.color。innerView.color 一定是会有值的,这样写,外层 platforms/react-native/ios/RaTeXViewManager.mm 里的 color 一定不为 nil。和这里的 color set/get 语义不太一致,这里的 color 应该是指的是 rn 设置的值,可能为 nil。

@erweixin

Copy link
Copy Markdown
Owner

牛的👍
有几个小点可能需要改下,我加了 comment。

此外 ratex-render 和 ratex-svg 是不是也可以增加下参数?还有 platforms/web。

@darriousliu

- 添加颜色验证功能,确保颜色组件在 [0, 1] 范围内且为有限浮点数
- 更新 RaTeX 相关结构以支持新的颜色验证逻辑
- 修改 Dart 和 Swift 代码以适应新的颜色处理机制
- 添加了对命令行参数`--color`的支持,允许用户指定渲染颜色
- 更新了`render_latex`函数以接受颜色参数,并在布局选项中应用该颜色
- 修改了相关的类型定义和函数调用,以确保颜色参数的传递
- 在多个文件中实现了颜色解析和错误处理逻辑
- 在 `ratex-wasm` 中添加 `color` 参数以支持渲染颜色
- 更新示例代码以展示如何使用颜色参数
- 修改文档以反映新的支持属性
@darriousliu

Copy link
Copy Markdown
Contributor Author

@erweixin 几个修改点都更正了,然后ratex-render、ratex-svg和platforms/web也添加了color参数,尽量保持了二进制兼容,本地测试生成png和svg颜色也没问题

另外,如果可以的话,希望能把我基于项目封装的Compose Multiplatform平台的 RaTeX-CMP 库放到README中供参考

ratex-render:

printf 'x + \\color{red}{y}\n' | cargo run -p ratex-render -- --color '#1E88E5'
image

ratex-svg:

printf 'x + \\color{red}{y}\n' | cargo run -p ratex-svg --features 'cli standalone' -- --color '#1E88E5'
image

ratex-wasm:

输入

node --input-type=module <<'EOF'
import init, { renderLatex } from 'file:///artifacts/wasm-pkg/ratex_wasm.js';
import { readFile } from 'node:fs/promises';

const wasmBytes = await readFile('artifacts/wasm-pkg/ratex_wasm_bg.wasm');
await init(wasmBytes);
const json = renderLatex('x + \\color{red}{y}', '#1E88E5');
const displayList = JSON.parse(json);
const colors = [...new Set(displayList.items.filter(item => item.color).map(item => JSON.stringify(item.color)))].map(JSON.parse);
console.log(JSON.stringify({ version: displayList.version, itemCount: displayList.items.length, colors }, null, 2));
EOF

输出

using deprecated parameters for the initialization function; pass a single object instead
{
  "version": 1,
  "itemCount": 3,
  "colors": [
    {
      "r": 0.11764706,
      "g": 0.53333336,
      "b": 0.8980392,
      "a": 1
    },
    {
      "r": 1,
      "g": 0,
      "b": 0,
      "a": 1
    }
  ]
}

@erweixin
erweixin marked this pull request as ready for review April 21, 2026 16:22
@erweixin

Copy link
Copy Markdown
Owner

希望能把我基于项目封装的Compose Multiplatform平台的 RaTeX-CMP 库放到README中供参考

完全没问题,你加到 PR 里就行。

Copilot AI review requested due to automatic review settings April 22, 2026 04:43

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

- 在 README.md 和 README.zh-CN.md 中添加 Compose Multiplatform 的支持信息
- 更新演示截图的展示格式,增强可读性
- 将 README.md 和 README.zh-CN.md 中的演示截图从列表格式更新为表格格式
- 提升了文档的可读性和视觉效果
@darriousliu

Copy link
Copy Markdown
Contributor Author

@erweixin 我加到文档里了,然后把截图的地方换成每行两个的表格形式,这样在电脑上看的比较清楚

@erweixin
erweixin merged commit b42d6bd into erweixin:main Apr 22, 2026
3 checks passed
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.

3 participants