feat(component): watermark component support modal and drawer

.github/workflows/component-ci.yml

@@ -1,7 +1,7 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 
-name: Publish HankLiu-Design Components Into NPM
+name: CI
 
 on:
   push:

CHANGELOG.zh-CN.md

@@ -1,37 +1 @@
----
-order: 6
-title: 更新日志
-toc: false
-timeline: true
----
-
-```
-🐞 Bug 修复
-💄 样式更新/less 变量更新
-🆕 新增特性
-🔥 极其值得关注的新增特性
-🇺🇸🇨🇳🇬🇧 国际化改动，注意这里直接用对应国家/地区的旗帜。
-📖 :memo: 文档或网站改进
-✅ 新增或更新测试用例
-🛎 更新警告/提示信息
-⌨️ :wheelchair: 可访问性增强
-🗑 废弃或移除
-🛠 重构或工具链优化
-⚡️ 性能提升
-```
-
----
-
-## 0.0.2
-
-- 🆕 新增 `Fullpage` 组件。
-- 🆕 新增 `Exception` 组件。
-- 🆕 新增 `Watermark` 组件。
-- 🛠 使用 `@hankliu/colors` 替换 `@ant-design/colors` 组件。
-- 🛠 使用 `@hankliu/icons` 替换 `@ant-design/icons` 组件，丰富 Icon 的图标库。
-- 🐞 修复使用 `@hankliu/hankliu-ui` 还需要在项目中额外安装 `react-color` 库的问题。
-
-## 0.0.1
-
-- 🐞 修复 DatePicker 样式依赖缺失
-- 🆕 Gallery 新增 sidebarPosition、showCount 属性
+<embed src="./UPDATE.zh-CN.md"></embed>

UPDATE.zh-CN.md

@@ -19,9 +19,30 @@ timeline: false
 🛠 重构或工具链优化
 ⚡️ 性能提升
 ```
+
 ---
 
 ## 背景
 
 开发一套基于 `AntDesign@4.x` 的 `React UI` 组件库，有自己的主题，丰富 `AntDesign` 的组件。
 
+## 0.0.3
+
+- 🐞 `Watermark` 组件支持 `Modal` 和 `Drawer` 组件。
+- 🐞 `Watermark` 组件不存在 `lib/watermark/style/css` 的问题。
+- 🐞 `Fullpage` 组件不存在 `lib/fullpage/style/css` 的问题。
+- 🆕 新增 `dist` 文件夹，上传编译完整的文件，支持上传到 CDN 中。
+
+## 0.0.2
+
+- 🆕 新增 `Fullpage` 组件。
+- 🆕 新增 `Exception` 组件。
+- 🆕 新增 `Watermark` 组件。
+- 🛠 使用 `@hankliu/colors` 替换 `@ant-design/colors` 组件。
+- 🛠 使用 `@hankliu/icons` 替换 `@ant-design/icons` 组件，丰富 Icon 的图标库。
+- 🐞 修复使用 `@hankliu/hankliu-ui` 还需要在项目中额外安装 `react-color` 库的问题。
+
+## 0.0.1
+
+- 🐞 修复 DatePicker 样式依赖缺失
+- 🆕 Gallery 新增 sidebarPosition、showCount 属性

components/watermark/demo/portal.md

@@ -32,10 +32,16 @@ const Placeholder = () => {
 
 const PortalWatermarkDemo = () => {
   const [showModal, setShowModal] = React.useState(false);
+  const [showModal2, setShowModal2] = React.useState(false);
+  const [showModal3, setShowModal3] = React.useState(false);
+  const [showModal4, setShowModal4] = React.useState(false);
   const [showDrawer, setShowDrawer] = React.useState(false);
   const [showDrawer2, setShowDrawer2] = React.useState(false);
 
   const closeModal = () => setShowModal(false);
+  const closeModal2 = () => setShowModal2(false);
+  const closeModal3 = () => setShowModal3(false);
+  const closeModal4 = () => setShowModal4(false);
   const closeDrawer = () => setShowDrawer(false);
   const closeDrawer2 = () => setShowDrawer2(false);
 
@@ -45,6 +51,15 @@ const PortalWatermarkDemo = () => {
         <Button type="primary" onClick={() => setShowModal(true)}>
           Show in Modal
         </Button>
+        <Button type="primary" onClick={() => setShowModal2(true)}>
+          Show in Modal2
+        </Button>
+        <Button type="primary" onClick={() => setShowModal3(true)}>
+          Not Show in Modal3
+        </Button>
+        <Button type="primary" onClick={() => setShowModal3(true)}>
+          Not Show in Modal4
+        </Button>
         <Button type="primary" onClick={() => setShowDrawer(true)}>
           Show in Drawer
         </Button>
@@ -62,6 +77,9 @@ const PortalWatermarkDemo = () => {
         >
           {<Placeholder />}
         </Modal>
+        <Modal open={showModal2} title="Modal2" onCancel={closeModal2} onOk={closeModal2}>
+          {<Placeholder />}
+        </Modal>
         <Drawer destroyOnClose open={showDrawer} title="Drawer" onClose={closeDrawer}>
           {<Placeholder />}
         </Drawer>
@@ -70,7 +88,19 @@ const PortalWatermarkDemo = () => {
         <Drawer destroyOnClose open={showDrawer2} title="Drawer" onClose={closeDrawer2}>
           {<Placeholder />}
         </Drawer>
+        <Modal open={showModal3} title="Modal3" onCancel={closeModal3} onOk={closeModal3}>
+          {<Placeholder />}
+        </Modal>
       </Watermark>
+      <Modal
+        destroyOnClose
+        open={showModal4}
+        title="Modal4"
+        onCancel={closeModal4}
+        onOk={closeModal4}
+      >
+        {<Placeholder />}
+      </Modal>
     </div>
   );
 };

components/watermark/index.tsx

@@ -126,7 +126,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
 
   // ============================ Content =============================
   /**
-   * Get the width and height of the watermark. The default values are as follows
+   * 获得每一个水印印记的高度和宽度
    * Image: [120, 64]; Content: It's calculated by content;
    */
   const getMarkSize = (ctx: CanvasRenderingContext2D) => {
@@ -136,14 +136,20 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
       ctx.font = `${parseInt(fontSize.toString())}px ${fontFamily}`;
       const contents = Array.isArray(content) ? content : [content];
       const sizes = contents.map((item) => {
+        // measureText()方法可以度量字体的宽度。measureText()方法返回了一个包含width属性的TextMetrics对象
         const metrics = ctx.measureText(item!);
 
+        // fontBoundingBoxAscent + fontBoundingBoxDescent 可以获得当前渲染文本的高度
+        // fontBoundingBoxAscent: 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，使用 CSS 像素计算。
+        // fontBoundingBoxDescent: 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，使用 CSS 像素计算。
         return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent];
       });
       defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
       defaultHeight =
-        Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +
-        (contents.length - 1) * FontGap;
+        sizes.reduce((total, [_, height]) => total + height, 0) + (contents.length - 1) * FontGap;
+      // defaultHeight =
+      //   Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +
+      //   (contents.length - 1) * FontGap;
     }
     return [width ?? defaultWidth, height ?? defaultHeight] as const;
   };
@@ -156,16 +162,20 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
 
   // Generate new Watermark content
   const renderWatermark = () => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
+    // 主要用来判断是否能使用canvas
+    const ctx = document.createElement('canvas').getContext('2d');
 
     if (ctx) {
       const ratio = getPixelRatio();
+      // 获得每一个水印印记的大小
       const [markWidth, markHeight] = getMarkSize(ctx);
 
+      // 绘制水印
       const drawCanvas = (
+        // 水印文字或者图片
         drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement,
       ) => {
+        // 获得水印的Base64格式的图片数据，以及区域的面积
         const [nextClips, clipWidth] = getClips(
           drawContent || '',
           rotate,

components/watermark/useClips.ts

@@ -1,5 +1,6 @@
 import type { WatermarkProps } from '.';
 
+// 垂直方向字体间距
 export const FontGap = 3;
 
 function prepareCanvas(
@@ -25,11 +26,23 @@ function prepareCanvas(
 }
 
 /**
- * Get the clips of text content.
- * This is a lazy hook function since SSR no need this
+ * 获取文本或者图片内容的水印图片剪辑。
+ * Lazy 的钩子函数，在服务端渲染SSR的时候不要使用。
  */
 export default function useClips() {
-  // Get single clips
+  /**
+   * 获取文本或者图片内容的水印图片剪辑
+   *
+   * @param content 文本或者图片内容
+   * @param rotate 旋转角度
+   * @param ratio 缩放大小
+   * @param width mark宽度
+   * @param height mark高度
+   * @param font 字体样式
+   * @param gapX 水平方向间距
+   * @param gapY 垂直方向间距
+   * @returns
+   */
   function getClips(
     content: NonNullable<WatermarkProps['content']> | HTMLImageElement,
     rotate: number,

index-style-only.js

@@ -0,0 +1,24 @@
+function pascalCase(name) {
+  return name.charAt(0).toUpperCase() + name.slice(1).replace(/-(\w)/g, (m, n) => n.toUpperCase());
+}
+
+// Just import style for https://github.com/ant-design/ant-design/issues/3745
+const req = require.context('./components', true, /^\.\/[^_][\w-]+\/style\/index\.tsx?$/);
+
+req.keys().forEach((mod) => {
+  let v = req(mod);
+  if (v && v.default) {
+    v = v.default;
+  }
+  const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
+  if (match && match[1]) {
+    if (match[1] === 'message' || match[1] === 'notification') {
+      // message & notification should not be capitalized
+      exports[match[1]] = v;
+    } else {
+      exports[pascalCase(match[1])] = v;
+    }
+  }
+});
+
+module.exports = exports;

index-with-locales.js

@@ -0,0 +1,12 @@
+const hankliuUi = require('./components');
+
+const req = require.context('./components', true, /^\.\/locale\/.+_.+\.tsx$/);
+
+hankliuUi.locales = {};
+
+req.keys().forEach((mod) => {
+  const matches = mod.match(/\/([^/]+).tsx$/);
+  hankliuUi.locales[matches[1]] = req(mod).default;
+});
+
+module.exports = hankliuUi;

index.js

@@ -0,0 +1,3 @@
+require('./index-style-only');
+
+module.exports = require('./components');

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hankliu/hankliu-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
-  "description": "HankLiu UI Components base on Ant-design@4.x",
+  "description": "🥭 HankLiu UI Components base on Ant-design@4.x",
   "files": [
     "dist",
     "lib",
@@ -16,12 +16,12 @@
   ],
   "main": "lib/index.js",
   "module": "es/index.js",
-  "unpkg": "dist/antd.min.js",
+  "unpkg": "dist/hlui.min.js",
   "typings": "lib/index.d.ts",
   "scripts": {
     "start": "antd-tools run clean && cross-env NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider concurrently \"bisheng start -c ./site/bisheng.config.js\"",
     "clean": "antd-tools run clean && rm -rf es lib coverage dist report.html",
-    "compile": "npm run clean && antd-tools run compile",
+    "compile": "npm run clean && antd-tools run compile && antd-tools run dist",
     "dist": "antd-tools run dist",
     "prepublishOnlyNot": "npm run compile",
     "site": "rimraf _site && cross-env NODE_OPTIONS=--max_old_space_size=4096 NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production OUTPUT=_website bisheng build --ssr -c ./site/bisheng.config.js",
@@ -90,7 +90,7 @@
     "bisheng-plugin-description": "^0.1.4",
     "bisheng-plugin-react": "^1.2.3",
     "bisheng-plugin-toc": "^0.4.4",
-    "chalk": "^5.3.0",
+    "chalk": "^4.0.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "docsearch.js": "^2.6.3",

site/bisheng.config.js

@@ -74,7 +74,7 @@ module.exports = {
       '@hankliu/hankliu-ui/lib': path.join(process.cwd(), 'components'),
       '@hankliu/hankliu-ui/es': path.join(process.cwd(), 'components'),
       // Change antd from `index.js` to `site/antd.js` to remove deps of root style
-      '@hankliu/hankliu-ui': path.join(process.cwd(), 'site', 'antd'),
+      '@hankliu/hankliu-ui': path.join(process.cwd(), 'site', 'hankliu'),
       site: path.join(process.cwd(), 'site'),
       'react-router': 'react-router/umd/ReactRouter',
     };
@@ -179,7 +179,7 @@ module.exports = {
     });
 
     config.module.rules.push({
-      test: /\.(mp4)$/,
+      test: /\.(mp(4|3))$/,
       use: 'file-loader?name=video/[name].[ext]',
     });
 

site/theme/template/Home/Page2.jsx

@@ -118,14 +118,15 @@ export default function Page2({ isMobile, locale }) {
   const componentButton = (
     <div key="b" className="components-button-wrapper">
       <Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
-        Ant Design of React <Icon type="right" />
+        HankLiu UI of React <Icon type="right" />
       </Link>
+      {/*
       <a href="https://ng.ant.design/" target="_black">
-        Ant Design of Angular <Icon type="right" />
+        HankLiu UI of Angular <Icon type="right" />
       </a>
       <a href="https://vue.ant.design/" target="_black">
-        Ant Design of Vue <Icon type="right" />
-      </a>
+        HankLiu UI of  Vue <Icon type="right" />
+      </a>*/}
     </div>
   );
   const children = page2Data.map((item, i) => {

site/theme/template/Layout/Header/Navigation.tsx

@@ -46,7 +46,7 @@ export default ({
   let additional: React.ReactNode = null;
   const additionalItems = [
     <Menu.Item key="github">
-      <a href="https://github.com/ant-design/ant-design" target="_blank" rel="noopener noreferrer">
+      <a href="https://github.com/hankliu62/hankliu-ui" target="_blank" rel="noopener noreferrer">
         Github
       </a>
     </Menu.Item>,
@@ -93,7 +93,9 @@ export default ({
         </Link>
       </Menu.Item>
       <Menu.Item key="gitlab">
-        <a href="https://github.com/hankliu62/hankliu-ui" target="_blank" rel="noreferrer">github仓库</a>
+        <a href="https://github.com/hankliu62/hankliu-ui" target="_blank" rel="noreferrer">
+          github仓库
+        </a>
       </Menu.Item>
       {additional}
     </Menu>