Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: New Component Watermark #39064

Merged
merged 10 commits into from Dec 8, 2022
Merged

feat: New Component Watermark #39064

merged 10 commits into from Dec 8, 2022

Conversation

JarvisArt
Copy link
Contributor

@JarvisArt JarvisArt commented Nov 28, 2022 •
edited

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Watermark component
🇨🇳 Chinese 水印组件

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@github-actions
Copy link
Contributor

github-actions bot commented Nov 28, 2022 •
edited

@JarvisArt
Copy link
Contributor Author

JarvisArt commented Nov 28, 2022 •
edited

  1. 文档缺个 cover

  2. WaterMark 改为 Watermark 个人觉得更规范点

  3. 关于是否去掉 width 与 height，建议还是留着这两个属性，因为文本旋转后的宽高不好计算。如果接受旋转前的宽高可后面再做支持，当水印为 content 和未指定宽高则自动算出 content 的宽高。

  4. 水印的实现遵循下图规范，offset 是指水印距离容器左上角的偏移量，并不会影响 width / height 和 gapX / gapY
    image

4.rotate 基于水印中心点旋转（不是右上角），下图是rotate={45}
image

接下来的优化项：

  • 提供可视化自定义配置demo
  • content 水印未指定宽高时自动算出 content 的宽高
  • 水印交叉类型的支持

@JarvisArt JarvisArt closed this Nov 28, 2022
@JarvisArt JarvisArt reopened this Nov 28, 2022
@codecov
Copy link

codecov bot commented Nov 28, 2022 •
edited

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (c5b55e4) compared to base (816cf10).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files 
@@            Coverage Diff             @@
##           feature    #39064    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          550       552     +2     
  Lines         9431      9563   +132     
  Branches      2681      2713    +32     
==========================================
+ Hits          9431      9563   +132
Impacted Files Coverage Δ
components/watermark/index.tsx 100.00% <100.00%> (ø)
components/watermark/useMutationObserver.ts 100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@JarvisArt JarvisArt force-pushed the feat/Watermark branch 2 times, most recently from 38ae83f to 46d566b Compare November 29, 2022 03:00
MadCcc
MadCcc reviewed Nov 30, 2022
View reviewed changes
components/watermark/index.en-US.md Outdated Show resolved Hide resolved
components/watermark/index.en-US.md Outdated Show resolved Hide resolved
components/watermark/index.en-US.md Outdated Show resolved Hide resolved
components/watermark/index.tsx Outdated Show resolved Hide resolved
components/watermark/index.zh-CN.md Outdated Show resolved Hide resolved
@MadCcc
Copy link
Member

MadCcc commented Nov 30, 2022

image
这个也换成 Ant Design 吧

@JarvisArt
Copy link
Contributor Author

image 这个也换成 Ant Design 吧

这是个图片来着，要让设计师换一下

@MadCcc
Copy link
Member

MadCcc commented Nov 30, 2022 •
edited

https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original
缩略图用这个
img

@JarvisArt
feat: New Component Watermark
de556f0 
* docs: add watermark docs

* docs: add watermark demo

* test: add watermark test

* test: add watermark snapshot

* chore: add jest-canvas-mock
@JarvisArt JarvisArt requested review from MadCcc and removed request for MadCcc December 2, 2022 13:18
@JarvisArt
feat: Watermark calculates the width and height of content by default
6a159d3 
* docs: update docs

* docs: update demo

* test: update snapshot
MadCcc
MadCcc reviewed Dec 7, 2022
View reviewed changes
Copy link
Member

@MadCcc MadCcc left a comment

Choose a reason for hiding this comment

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

完成度好高

components/watermark/index.zh-CN.md Show resolved Hide resolved
@JarvisArt JarvisArt requested review from MadCcc and afc163 and removed request for MadCcc and afc163 December 8, 2022 02:36
@afc163
Copy link
Member

afc163 commented Dec 8, 2022

用 shadow dom 实现是不是更不容易被样式覆盖？

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 8, 2022 •
edited

用 shadow dom 实现是不是更不容易被样式覆盖？

shadow dom 是样式隔离的吧?

@JarvisArt
Copy link
Contributor Author

用 shadow dom 实现是不是更不容易被样式覆盖？

shadow 有样式隔离，MutationObserver 能否监听 shadow DOM 的变化，这个我再研究下，先列为代办项。
这次先精简一点。

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 8, 2022

用 shadow dom 实现是不是更不容易被样式覆盖？

shadow 有样式隔离，MutationObserver 能否监听 shadow DOM 的变化，这个我再研究下，先列为代办项。 这次先精简一点。

attachShadow({ mode: 'closed' })?

@JarvisArt
Copy link
Contributor Author

刚看了下，Shadow DOM 在是需要挂载在一个插槽(dom)下的，这个插槽还是可以被样式覆盖。

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 8, 2022

刚看了下，Shadow DOM 在是需要挂载在一个插槽(dom)下的，这个插槽还是可以被样式覆盖。

最外层, 也就是 :host 是可以覆盖的.

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 8, 2022

把主要内容包在里层, 外层当容器, 任由其控制, 没办法.

@JarvisArt
Copy link
Contributor Author

把主要内容包在里层, 外层当容器, 任由其控制, 没办法.

是的

@li-jia-nan
Copy link
Member

🎉🎉🎉

@MadCcc MadCcc merged commit 6f83c63 into ant-design:feature Dec 8, 2022
@xrkffgg xrkffgg mentioned this pull request Dec 19, 2022
Merged
@crazyair
Copy link
Member

crazyair commented Dec 21, 2022 •
edited

有打算支持盲水印吗 https://github.com/pansyjs/watermark/blob/master/packages/core/src/types.ts#L40
https://watermark.xingkang.wang/configurator
https://watermark.xingkang.wang/guide/decryption

@JarvisArt
Copy link
Contributor Author

盲水印

盲水印我的理解它就是透明度更低的水印内容。

@crazyair
Copy link
Member

盲水印

盲水印我的理解它就是透明度更低的水印内容。

对，网页背景水印只有盲水印，暗水印是针对原图做的。

@JarvisArt
Copy link
Contributor Author

对，网页背景水印只有盲水印，暗水印是针对原图做的。

这样设置下文本的透明度就可以实现了
image
下载

@crazyair
Copy link
Member

如果需要明、盲都支持呢？要2个content 吗

@JarvisArt
Copy link
Contributor Author

如果需要明、盲都支持呢？要2个content 吗

这种场景会很多吗，如果不多可以包两个 ，或者采用 image 的形式

@crazyair
Copy link
Member

包2个可行。image 的话无法服务端动态配置。

@JarvisArt
Copy link
Contributor Author

包2个可行。image 的话无法服务端动态配置。

嗯嗯，现在初期阶段api精简一点

@li-jia-nan
Copy link
Member

ant-design-vue

走错仓库啦

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@afc163 afc163 afc163 left review comments

@MadCcc MadCcc MadCcc approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@JarvisArt @MadCcc @zombieJ @afc163 @yoyo837 @li-jia-nan @crazyair