Skip to content

feat: 单元格渲染支持图片、视频 #3101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 40 commits into from
Mar 17, 2025
Merged

feat: 单元格渲染支持图片、视频 #3101

merged 40 commits into from
Mar 17, 2025

Conversation

Alexzjt
Copy link
Contributor

@Alexzjt Alexzjt commented Feb 19, 2025

👀 PR includes

✨ Feature

  • New feature

🎨 Enhance

  • Code style optimization
  • Refactoring
  • Change the UI
  • Improve the performance
  • Type optimization

🐛 Bugfix

🔧 Chore

  • Test case
  • Docs / demos update
  • CI / workflow
  • Release version
  • Other ()

📝 Description

🖼️ Screenshot

Before After
图片
视频

🔗 Related issue link

🔍 Self-Check before the merge

  • Add or update relevant docs.
  • Add or update relevant demos.
  • Add or update test case.
  • Add or update relevant TypeScript definitions.

Copy link
Contributor

你好 @Alexzjt,非常感谢你的贡献.
为了让代码更健壮, 请根据 贡献指南 补充相应单元测试 (文档改动或其他特殊场景除外), 如果有 API 改动, 请修改 相应的文档.
同时请检查 linttest 相关 CI 是否通过, 如果失败, 请点击 [Details] 按钮查看, 并根据日志修复.

Hello, @Alexzjt, Thanks for your contribution. In order to make the code more robust, please add the corresponding unit tests, and update the docs if there are API changes.
At the same time, please check whether the CI related to lint and test passes. If the CI fails, please click [Details] button to check and repair according to the log.

@github-actions github-actions bot added next 2.0-next 版本的问题 pr(feature) new feature labels Feb 19, 2025
Copy link

Walkthrough

This pull request introduces a new feature that enables cell rendering to support images, videos, and rich text. It also resolves issue #3095. The changes involve adding custom renderer configurations and handling media click interactions to provide a preview overlay for media content.

Changes

Files Summary
base-cell.ts, data-cell.ts, header-cell.ts Added methods to retrieve renderer configurations and meta fields.
renderer.ts Introduced an enum for renderer types (html, video, image).
basic.ts Added renderer configuration to the interface.
renderer.ts Defined interfaces for custom renderer configurations for image, video, and HTML.
data-cell-click.ts, header-cell-link-click.ts Integrated media click binding to handle media previews.
media-click.ts Implemented utility functions for creating media preview overlays and handling media element creation.
customRenderer.ts Added functionality to draw custom renderers for images, videos, and HTML content.

@codecov-commenter
Copy link

codecov-commenter commented Feb 19, 2025

Codecov Report

Attention: Patch coverage is 88.23529% with 30 lines in your changes missing coverage. Please review.

Project coverage is 79.89%. Comparing base (ecdc9c8) to head (aa6e6af).
Report is 649 commits behind head on next.

Files with missing lines Patch % Lines
packages/s2-core/src/utils/cell/customRenderer.ts 80.00% 3 Missing and 6 partials ⚠️
packages/s2-core/src/renderer/VideoRenderer.ts 87.50% 3 Missing and 2 partials ⚠️
packages/s2-core/src/utils/cell/cell.ts 50.00% 0 Missing and 5 partials ⚠️
...nteraction/base-interaction/click/preview-click.ts 94.20% 1 Missing and 3 partials ⚠️
packages/s2-core/src/renderer/RendererFactory.ts 87.50% 1 Missing and 1 partial ⚠️
packages/s2-core/src/utils/cell/text-scrolling.ts 60.00% 0 Missing and 2 partials ⚠️
packages/s2-core/src/cell/base-cell.ts 87.50% 0 Missing and 1 partial ⚠️
packages/s2-core/src/cell/col-cell.ts 90.90% 0 Missing and 1 partial ⚠️
packages/s2-core/src/cell/corner-cell.ts 83.33% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             next    #3101      +/-   ##
==========================================
+ Coverage   75.77%   79.89%   +4.11%     
==========================================
  Files         257      217      -40     
  Lines       11994    11890     -104     
  Branches     2464     2659     +195     
==========================================
+ Hits         9088     9499     +411     
+ Misses       1398      789     -609     
- Partials     1508     1602      +94     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

github-actions bot commented Feb 19, 2025

Size Change: +4.98 kB (+0.8%)

Total Size: 625 kB

Filename Size Change
./packages/s2-core/dist/s2-extends.min.js 156 kB +1.97 kB (+1.28%)
./packages/s2-core/dist/s2.min.js 260 kB +3 kB (+1.17%)
ℹ️ View Unchanged
Filename Size
./packages/s2-core/dist/s2.min.css 581 B
./packages/s2-react-components/dist/s2-react-components.min.css 2.55 kB
./packages/s2-react-components/dist/s2-react-components.min.js 124 kB
./packages/s2-react/dist/s2-react.min.css 1.74 kB
./packages/s2-react/dist/s2-react.min.js 38.3 kB
./packages/s2-vue/dist/s2-vue.min.css 2.05 kB
./packages/s2-vue/dist/s2-vue.min.js 38.3 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Feb 20, 2025

你好, @Alexzjt CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @Alexzjt CI run failed, please click the [Details] button for detailed log information and fix it.

@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Feb 20, 2025
@github-actions github-actions bot added 🚨 test failed 单元测试挂了 and removed 🚨 test failed 单元测试挂了 labels Feb 20, 2025
@github-actions github-actions bot removed the 🚨 test failed 单元测试挂了 label Feb 20, 2025
@github-actions github-actions bot added 🚨 test failed 单元测试挂了 🚨 lint failed 静态检查失败 labels Mar 1, 2025
@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Mar 5, 2025
@github-actions github-actions bot removed the 🚨 test failed 单元测试挂了 label Mar 6, 2025
@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Mar 6, 2025
@github-actions github-actions bot removed the 🚨 test failed 单元测试挂了 label Mar 6, 2025
@Alexzjt Alexzjt changed the title feat: 单元格渲染支持图片、视频、富文本 feat: 单元格渲染支持图片、视频 Mar 10, 2025
@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Mar 13, 2025
@github-actions github-actions bot added 🚨 test failed 单元测试挂了 and removed 🚨 test failed 单元测试挂了 labels Mar 13, 2025
@github-actions github-actions bot removed the 🚨 test failed 单元测试挂了 label Mar 13, 2025
@Alexzjt Alexzjt merged commit b514b5e into next Mar 17, 2025
9 checks passed
@Alexzjt Alexzjt deleted the feat/cellType branch March 17, 2025 11:03
@lijinke666
Copy link
Member

🎉 This PR is included in version @antv/s2-v2.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next 2.0-next 版本的问题 pr(feature) new feature released on @latest
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🙏希望能支持单元格内容自定义渲染
3 participants