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

Alexzjt · 2025-02-19T12:10:45Z

👀 PR includes

✨ Feature

New feature

🎨 Enhance

🐛 Bugfix

Solve the issue and close 🙏希望能支持单元格内容自定义渲染 #3095

🔧 Chore

📝 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.

github-actions · 2025-02-19T12:10:57Z

你好 @Alexzjt，非常感谢你的贡献.
为了让代码更健壮, 请根据贡献指南补充相应单元测试 (文档改动或其他特殊场景除外), 如果有 API 改动, 请修改相应的文档.
同时请检查 lint 和 test 相关 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.

petercat-assistant · 2025-02-19T12:11:03Z

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.

packages/s2-core/src/utils/cell/customRenderer.ts

codecov-commenter · 2025-02-19T12:14:08Z

Codecov Report

Attention: Patch coverage is 25.45455% with 82 lines in your changes missing coverage. Please review.

Project coverage is 79.28%. Comparing base (ecdc9c8) to head (a4ee1c5).
Report is 624 commits behind head on next.

Files with missing lines	Patch %	Lines
...nteraction/base-interaction/click/preview-click.ts	26.56%	40 Missing and 7 partials ⚠️
packages/s2-core/src/utils/cell/customRenderer.ts	15.00%	29 Missing and 5 partials ⚠️
packages/s2-core/src/cell/base-cell.ts	75.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #3101      +/-   ##
==========================================
+ Coverage   75.77%   79.28%   +3.51%     
==========================================
  Files         257      213      -44     
  Lines       11994    11742     -252     
  Branches     2464     2634     +170     
==========================================
+ Hits         9088     9310     +222     
+ Misses       1398      851     -547     
- Partials     1508     1581      +73

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

github-actions · 2025-02-19T12:16:10Z

Size Change: +2.2 kB (+0.36%)

Total Size: 621 kB

Filename	Size	Change
`./packages/s2-core/dist/s2-extends.min.js`	155 kB	+741 B (+0.48%)
`./packages/s2-core/dist/s2.min.js`	258 kB	+1.46 kB (+0.57%)

ℹ️ 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}

lijinke666 · 2025-02-20T02:42:57Z

packages/s2-core/src/common/constant/renderer.ts

@@ -0,0 +1,5 @@
+export enum RendererType {


风格保持一致，枚举的 key 大写

Suggested change

export enum RendererType {

export enum CellRendererType {

HTML = 'html'

}

lijinke666 · 2025-02-20T02:48:52Z

packages/s2-core/src/cell/base-cell.ts

@@ -485,6 +486,14 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
  }

  public drawTextShape() {
+    const renderer = this.getRenderer();


加在这里虽然改动最小，但是和函数名做的事情不符了

另外 facet 在预测量文本宽度也会调用

S2/packages/s2-core/src/facet/base-facet.ts

Lines 527 to 529 in a68f134

// 预生成 icon 配置, 用于计算文本正确的最大可用宽度

(cell as HeaderCell).generateIconConfig?.();

cell.drawTextShape();

lijinke666 · 2025-02-20T02:51:40Z

packages/s2-core/src/cell/base-cell.ts

+    )?.renderer;
+  }
+
+  public abstract getMetaField(): string;


abstract 写在 class 的最上面

S2/packages/s2-core/src/cell/base-cell.ts

Lines 159 to 170 in a68f134

protected abstract mappingValue<Result>(

condition: Condition<Result>,

): ConditionMappingResult<Result>;

protected abstract getBackgroundColor(): {

backgroundColor: string | undefined;

backgroundColorOpacity: number | undefined;

intelligentReverseTextColor: boolean;

};

public constructor(

meta: T,

lijinke666 · 2025-02-20T02:52:27Z

packages/s2-core/src/common/interface/basic.ts

@@ -16,6 +16,7 @@ import type { Node } from '../../facet/layout/node';
 import type { SpreadSheet } from '../../sheet-type';
 import type { CellType } from '../constant';
 import type { S2CellType } from './interaction';
+import { CustomRendererConfig } from './renderer';


按理说 lint 会提示吧

Suggested change

import { CustomRendererConfig } from './renderer';

import type { CustomRendererConfig } from './renderer';

lijinke666 · 2025-02-20T02:53:46Z

packages/s2-core/src/common/interface/renderer.ts

+        overlayStyle?: CSSStyleDeclaration;
+        mediaContainerStyle?: CSSStyleDeclaration;
+      }
+    | false;


boolean ？

关闭点击预览就是配false。不配置默认有这个功能，或者配样式。不太可能会配个true

lijinke666 · 2025-02-20T02:55:50Z

packages/s2-core/src/common/interface/renderer.ts

+}
+
+// 图片渲染配置
+export interface ImageRendererConfig extends BaseRendererConfig {


用范型是不是要好点

Suggested change

export interface ImageRendererConfig extends BaseRendererConfig {

export interface ImageRendererConfig extends BaseRendererConfig<RendererType.image> {

config?: Partial<ImageStyleProps>;

}

lijinke666 · 2025-02-20T02:56:24Z

packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts

@@ -43,6 +44,12 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
      const cell = this.spreadsheet.getCell<DataCell>(event.target)!;
      const meta = cell.getMeta();

+      if (cell.getRenderer?.()?.type) {


交互建议相互独立

可以抽一个 media-cell-click 的 class 来专门处理 header/data cell 的点击

lijinke666 · 2025-02-20T02:57:10Z

packages/s2-core/src/interaction/base-interaction/click/header-cell-link-click.ts

@@ -19,6 +21,14 @@ export class HeaderCellLinkClick
      return;
    }

+    const cell = this.spreadsheet.getCell<HeaderCell>(event.target);


lijinke666 · 2025-02-20T02:58:07Z

packages/s2-core/src/interaction/base-interaction/click/media-click.ts

+  const overlay = document.createElement('div');
+
+  Object.assign(overlay.style, {
+    width: '100vw',


层级，背景色之类的，建议做到主题里面

lijinke666 · 2025-02-20T03:00:27Z

packages/s2-core/src/utils/cell/customRenderer.ts

+  });
+}
+
+export async function drawCustomRenderer(


注意下滚动坐标同步/拖拽宽高同步/滚动卸载等场景

github-actions · 2025-02-20T09:14:11Z

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

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

Alexzjt added 4 commits February 16, 2025 22:44

feat: 支持单元格渲染图片

addedac

feat: 支持单元格渲染图片

81b84c0

feat: 支持图片、视频、富文本渲染

6789514

feat: 补充兜底逻辑、预览样式配置

62751fb

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

github-actions bot assigned Alexzjt Feb 19, 2025

petercat-assistant bot reviewed Feb 19, 2025

View reviewed changes

packages/s2-core/src/utils/cell/customRenderer.ts Outdated Show resolved Hide resolved

lijinke666 reviewed Feb 20, 2025

View reviewed changes

Alexzjt added 2 commits February 20, 2025 16:44

refactor: 针对CR意见进行修改

4f95990

refactor: 针对CR意见进行修改

fa2a64e

github-actions bot added the 🚨 test failed 单元测试挂了 label Feb 20, 2025

fix: 修复点击单元格重复出发预览

79bcafa

github-actions bot added 🚨 test failed 单元测试挂了 and removed 🚨 test failed 单元测试挂了 labels Feb 20, 2025

Alexzjt added 3 commits February 20, 2025 18:07

Merge branch 'next' of github.com:antvis/S2 into feat/cellType

ef426d2

fix: 明细表列头仅允许文本

750e715

fix: 明细表列头仅允许文本

a4ee1c5

github-actions bot removed the 🚨 test failed 单元测试挂了 label Feb 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Alexzjt commented Feb 19, 2025

github-actions bot commented Feb 19, 2025

petercat-assistant bot commented Feb 19, 2025

codecov-commenter commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

Alexzjt Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

lijinke666 Feb 20, 2025

github-actions bot commented Feb 20, 2025 •

edited

Loading

-export enum RendererType {
+export enum CellRendererType {
+  HTML = 'html'
+}

	// 预生成 icon 配置, 用于计算文本正确的最大可用宽度
	(cell as HeaderCell).generateIconConfig?.();
	cell.drawTextShape();

	protected abstract mappingValue<Result>(
	condition: Condition<Result>,
	): ConditionMappingResult<Result>;

	protected abstract getBackgroundColor(): {
	backgroundColor: string \| undefined;
	backgroundColorOpacity: number \| undefined;
	intelligentReverseTextColor: boolean;
	};

	public constructor(
	meta: T,

	import { CustomRendererConfig } from './renderer';
	import type { CustomRendererConfig } from './renderer';

-export interface ImageRendererConfig extends BaseRendererConfig {
+export interface ImageRendererConfig extends BaseRendererConfig<RendererType.image> {
+  config?: Partial<ImageStyleProps>;
+}

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

Are you sure you want to change the base?

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

Conversation

Alexzjt commented Feb 19, 2025

👀 PR includes

📝 Description

🖼️ Screenshot

🔗 Related issue link

🔍 Self-Check before the merge

github-actions bot commented Feb 19, 2025

petercat-assistant bot commented Feb 19, 2025

Walkthrough

Changes

codecov-commenter commented Feb 19, 2025 • edited Loading

Codecov Report

github-actions bot commented Feb 19, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 20, 2025 • edited Loading

codecov-commenter commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 20, 2025 •

edited

Loading