ant-design / html2sketch Goto Github PK

View Code? Open in Web Editor NEW

156.0 156.0 24.0 19.19 MB

parser HTML to Sketch JSON

Home Page: https://ant-design.github.io/html2sketch/

License: MIT License

TypeScript 93.05% JavaScript 0.42% HTML 6.50% Shell 0.03%

c2d design design-system html2sketch

html2sketch's Introduction

Ant Design

An enterprise-class UI design language and React UI library.

Changelog · Report Bug · Request Feature · English · 中文

✨ Features

🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

Modern browsers
Server-side Rendering
Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or use opensumi.run, a free online pure front-end dev environemt.

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing

Let's build a better antd together.

We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contributing Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)

For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.

❤️ Sponsors and Backers

html2sketch's People

Contributors

Stargazers

Watchers

html2sketch's Issues

🐛[BUG] 伪类的背景图片，解析不出来

🐛 bug 描述

伪类的背景图片，解析不出来

📷 复现步骤

用一个伪类来引入背景图片无论是 SVG 或者是其它类型不能解析

正常：

解析结果：

🏞 期望结果

可以正常解析

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG] message 解析不准确

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG] Checkbox 解析不正确

🐛 bug 描述

🧐[问题] 这个只能react使用吗？还是一定要在dumi上面使用呢？安装了一大堆报错，能弄得简单点吗

🧐 问题描述

💻 示例代码

🚑 其他信息

🐛[BUG]input 元素设置 placeholder 默认值，并且设置 line-height 属性垂直居中显示，生成 sketch 资源，没有居中显示

🐛 bug 描述

input 元素设置 placeholder 默认值，并且设置 line-height 属性垂直居中显示，生成 sketch 资源，没有居中显示

📷 复现步骤

input 元素设置 placeholder 默认值，并且设置 line-height 属性垂直居中显示，生成 sketch 资源，没有居中显示，如图所示

🏞 期望结果

居中显示

💻 复现代码

下面 demo 可复现问题

可复现 demo

© 版本信息

html2sketch 版本: [0.4.6]
浏览器环境
开发环境 [sketch 69]

🚑 其他信息

v1.x RoadMap

nodeToSketchGroup 方法问题

运行 example ，执行转换为 Group 这个按钮，显示 JSON 按钮是灰色的，是输出失败了么，麻烦看看。

控制台也有提示：

[nodeToSketchGroup]该 group 只包含一个子级 [group]: 编组 ,丢弃..

🐛 不能正确解析文本和背景图片为 svg 的情形样式

🐛 bug 描述

在使用 html2sketch 在解析生成表格的时候，分页器的文本以及背景图片为 svg，不能正确的解析。生成的 sketch 资源如下图所示，左边是生成的 sketch，右边是浏览器中的表现：

📷 复现步骤

这是线上的代码实例，分页器文本和背景图片为 svg 不能正确解析，楼主可以试下生成看看。

https://codesandbox.io/s/headless-shadow-1jvwn?file=/index.tsx

🏞 期望结果

可以正确的解析。

💻 复现代码

这是线上的代码实例，分页器文本不能正确解析

© 版本信息

html2sketch 版本: 0.4.0
浏览器环境 Chrome 85
开发环境 [e.g. mac OS] Mac

🚑 其他信息

🐛[BUG] antd Popover解析不正确

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: beta12 [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG] svg中带上图片，无法正常解析

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🧐[问题] 有人能弄个Astro上面使用的demo来研究下吗？感觉npm install后，引入老是各种报错，没有头绪了。

🧐 问题描述

💻 示例代码

🚑 其他信息

🐛[BUG] antd switch 未激活态解析报错

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG]a标签在sketch插件中提供的web中调用getBoundingClientRect方法返回值问题

🐛 bug 描述

a标签在sketch插件中提供的web中执行
const bcr = node.getBoundingClientRect();
这段代码的时候，不能返回准确的自身rect值，返回的是父节点的值，有什么能替换的方法么

modify

上面描述的不准确，返回的还是自身的值但是因为换行返回的rect被撑开了在设置textLayer的x和y的时候就会出现不准确的情况

如图得到的rect就是红色的框

📷 复现步骤

在转换如下节点时复现的问题

<span>
阅读
<a >xxxx协议</a>
</span>

🐛[BUG] Tooltip 三角问题

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

The automated release is failing 🚨

🚨 The automated release from the `beta` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

🧐[问题] 可能需要重新配一下 gh-pages

🧐 问题描述

好像跑 deploy 的时候把 gh-pages 删掉了，导致现在 github pages 显示不出来了😥 @afc163 能不能看下，重新配置下 Github Pages 到 gh-pages 分支？

The automated release is failing 🚨

🚨 The automated release from the `beta` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org.

Good luck with your project ✨

Your semantic-release bot 📦🚀

🐛[BUG] 列表元素的解析不正确

🐛 bug 描述

ul 的解析不正确

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

👑 [需求] 解析插画

🥰 需求描述

能够解析例如下图的插画：

todo list or roadmap for this project

可以给项目加一个 todolist 么？还有一些没完成或者解析有问题的部分，可以列一下，方便后面完善~

🧐[问题] Transform的元素如果有文字，转换的文字没有变化

🧐 问题描述

💻 示例代码

🚑 其他信息

🐛[BUG]伪类配合 border 实现三角箭头渲染 bug

🐛 bug 描述

使用伪类配合 border 属性实现三角箭头渲染有 bug，在 sketch 中不能渲染出来，如下图所示：

正常：

sketch 中，三角箭头渲染不出来：

📷 复现步骤

通过下面的 demo 可以复现。

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [0.4.6]
浏览器环境
开发环境 [ mac OS]

🚑 其他信息

🐛[BUG] svg base64 渲染颜色 bug

🐛 bug 描述

svg 转成 base64 格式，渲染到 sketch 的时候，渲染成黑色，与实际颜色不符

实际颜色：

在 sketch 中渲染颜色为黑色：

📷 复现步骤

可在下面 demo 复现

🏞 期望结果

颜色渲染正常

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [0.4.6]
浏览器环境
开发环境 [Mac os 10.14.6]

🚑 其他信息

🐛[BUG] input 使用 placeholder 或者是 value 显示值时，text-align 样式不生效

🐛 bug 描述

在网页中当 input 标签是使用 placeholder 或者是 value 显示默认值的时候，input 的 text-align 样式在解析生成 sketch 资源的时候不生效。

📷 复现步骤

步骤如上描述所示。

解析截图：

🏞 期望结果

能正确解析样式。

💻 复现代码

https://codepen.io/janily/pen/LYNaPgo

© 版本信息

html2sketch 版本: [e.g. 1.0.0] 0.4.1
浏览器环境 Chrome
开发环境 [e.g. mac OS] Mac

🚑 其他信息

🐛[BUG] 生成 sketch 资源细线渲染问题

🐛 bug 描述

📷 复现步骤

使用 html 转 sketch 之后，生成 sketch 资源在样式上有问题，会显示多余的一条非常细的线，如图所示：

🏞 期望结果

生成的资源没有线

💻 复现代码

使用作者的 microwave 这个表格生成插件在sketch中就可以复现。

© 版本信息

html2sketch 版本:0.4.2
浏览器环境
开发环境 Mac os sketch 版本 69

🚑 其他信息

感觉这个是 sketch 自己的渲染有问题，刚新建了一个矩形，用内阴影模拟了一个单边的边框，也有一根细线。

🧐[问题]: text styles, layer styles and document colors

🧐 问题描述

How can I create text styles, layer styles, and document colors?

For symbols, how can I create a symbol, and then use an instance of the symbol when importing my existing html?

💻 示例代码

I was digging around in the source code and found related code:

🚑 其他信息

In html-sketchapp, the docs show:

https://github.com/html-sketchapp/html-sketchapp/wiki/Usage-Examples#create-sketch-text-styles-layer-styles-and-document-colors

In html-sketchapp-cli, the docs show:

data-sketch-* https://github.com/seek-oss/html-sketchapp-cli#html-sketchapp-cli

If it has not been implemented yet, I think the custom data attributes from html-sketchapp-cli are a nice solution:

<div data-sketch-symbol="Button/Primary">...</div>
<div data-sketch-text="Heading">...</div>
<div data-sketch-color="#212121">...</div>
<div data-sketch-symbol="Icon/Reply">...</div>
<div data-sketch-symbol="Icon/Retweet">...</div>
<div data-sketch-symbol="Icon/Like">...</div>

<div data-sketch-symbol="IconRow">
  <div data-sketch-symbol-instance="Icon/Reply">...</div>
  <div data-sketch-symbol-instance="Icon/Retweet">...</div>
  <div data-sketch-symbol-instance="Icon/Like">...</div>
</div>

🐛[BUG] label 和 input 组合开关样式渲染 bug

🐛 bug 描述

使用 label 和 input 组合，用样式实现开关 UI 样式，使用插件转化，渲染有问题，渲染不出来，如下所示。

正常：

渲染到 sketch 中不正常：

📷 复现步骤

可以通过下面到 demo 来复现

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [0.4.6]
浏览器环境
开发环境 [mac OS]

🚑 其他信息

🐛[BUG] 多张图片时候，json导入sketch显示异常

🐛 bug 描述

有多张图片时候，json导入sketch，sketch无法正常显示不同的图片，
保存后再次打开，或者导出均为正常，
但是第一次导入时候，多张图片均显示为同一个样子
怀疑是sketch的bug，不知道能否绕开
72版本之后均可稳定复现

📷 复现步骤

多张图片

🏞 期望结果

正常显示

💻 复现代码

可复现 demo

© 版本信息

sketch : 72.4
mac OS : 11.2

🚑 其他信息

🐛[BUG] 超长文本的显示

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

[可复现 demo](https://codesandbox.io/s/happy-johnson-jvzfj?file=/src/Demo.tsx)

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG] 渲染生成的数字内容与网页内容不一致

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: 1.0.0
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG]svg转换过程中遇到的问题以及我现在的临时解决方式

🐛 bug 描述

在转换svg时，转换如下svgString时，优化代码部分报错，因为依赖的是三方，对此我没有继续向下追代码，所以简单做了兼容

  const svg = await svgo.optimize(svgStr).catch((err)=>{
    console.log('svgerr',err);
    
  });


  if(svg){
    return svg.data
  }
  return svgStr;

报错的svgString如下
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="folder" width="1em" height="1em" fill="currentColor" aria-hidden="true" style="width: 18px; height: 18px;"><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z" style="fill: rgb(255, 187, 85); color: rgb(255, 187, 85); cursor: pointer; font-size: 18px; font-variant: tabular-nums; text-decoration: none solid rgb(255, 187, 85); text-rendering: optimizelegibility; white-space: nowrap;"></path></svg>

另一个问题，如果svg设置了fill=currentColor，转换后的json style相关内容是默认值，我追了下代码，发现在此处的代码中

    // 如果存在currentColor 则采用 inline Style 的 fill
    if (fillStr === 'currentColor' && styleObj?.fill) {
      style.addColorFill(styleObj.fill);
     }

fillStr始终为空，所以导致代码不能执行，我暂时屏蔽了fillStr === 'currentColor'的判断，转换后颜色信息是可以转换出来了，但是并不知道会引起其他的什么后果，另一个issue也提到了这个问题

© 版本信息

html2sketch 版本: [0.4.6]
浏览器环境 chrome
开发环境 [mac OS11.2.2]

🐛[BUG] antd v4 radio group 解析不正确

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🐛[BUG] Pagination 的数字不太正确

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

🧐[问题] e2e 本地正常，但是在线上报错

🧐 问题描述

好像只有 modal 类型的会出现这样的问题。

Action地址

所以暂时把 e2e 的测试禁用了

👑 [需求] sketch2html

🥰 需求描述

将 sketch 的 JSON 对象转变为 html

🧐 解决方案

根据 Sketch 的结构将其转变为 DIM

🚑 其他信息

🐛[BUG] 元素 padding 和位置解析渲染问题

🐛 bug 描述

我这里又一个 tab UI 在渲染为 sketch 组件的时候，padding 没有正确解析，并且元素的位置解析也没有正确解析。

这是正常的：

这是渲染的结果：

📷 复现步骤

可以用下面的 demo 来复现

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [0.46]
浏览器环境
开发环境 [sketch 69]

🚑 其他信息

🧐[问题] 包里面这个 html2sketch.min.js 文件是怎么使用呢？可以在html+css+js里面直接引用吗

🧐 问题描述

💻 示例代码

🚑 其他信息

🗺 v1.0 RoadMap / TodoList

TodoList

~~针对 Symbol 的布局智能识别与解析（留到 1.x 中）~~
css 中 transform 的解析 #12 #30
带 g、rect、ellipse、text、ref 等非 path 路径的 Svg 解析（ #10 相关PR #20 #19 已初步实现 90% ，待用例覆盖）
li 类型的节点解析

已知 Bug

部分未覆盖到的文本坐标位置，有待提 issue 来覆盖解决 #32 #39
某些 canvas 无法 toDataUrl ，报错 Tainted canvases may not be exported. （存在图片跨域问题，如果没法拿到 image 的 src 就无解） 07375ce
伪类的绝对定位解析 #29
多行文本行高问题 #24
图片 URL 不是 http 开头时会解析报错 #23
background 为 svg 时可能会是空白的。 #18
文本存在不透明度时没有解析出来 #25

🐛[BUG] background-image 为插画型 svg 时，显示不正确

🐛 bug 描述

🏞 期望结果

© 版本信息

html2sketch 版本: [e.g. 1.0.0]
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

关联问题 #10

🐛[BUG] linear-gradient解析错误

🐛 bug 描述

样式信息如："background-image: linear-gradient(1.5708rad, rgb(255, 208, 0), rgb(255, 189, 0));"，无法正确解析
报错：Unable to parse color from string: 1.5708rad

📷 复现步骤

// 确保node中有上述的style
nodeToSketchSymbol(node).then(symbol => {
  const sketchJSON = symbol.toSketchJSON()
  console.log('sketchJSON: ', sketchJSON)
})

🏞 期望结果

解析正确

© 版本信息

html2sketch 版本: 0.4.6
浏览器环境：版本 89.0.4389.90（正式版本） (x86_64)
开发环境： mac OS 10.14

🚑 其他信息

初步判断问题代码：https://github.com/ant-design/html2sketch/blob/master/src/models/Style/Gradient.ts#L37
貌似没有考虑linear-gradient的angle参数

🐛[BUG] background-image 是 svg 类型的 url 时，解析不正确

🐛 bug 描述

background-image 是 svg 时，要使用 svg 的解析方式

📷 复现步骤

© 版本信息

html2sketch 版本: 0.3.0

🚑 其他信息

🐛[BUG] 带不透明度的渐变色解析会报错

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

html2sketch 版本: [e.g. 1.0.0] 1.0.0
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

👑 [需求] 图片解析

🥰 需求描述

目前采用的是同步解析图片的方案，需要将这个能力以异步的方式集成到 nodeToLayer 里。

待支持的 Image 类型：

img 标签 + 链接
样式采用 background-image 的对象

🧐 解决方案

🚑 其他信息

🐛[BUG] 背景图片为 SVG 并且是用 use 的方式来引用路径的不能正确解析颜色

🐛 bug 描述

背景图片为 SVG 并且是用 use 的方式来引用路径的不能正确解析颜色

📷 复现步骤

html 元素使用 background-image 引入背景图片为 SVG 并且是用 use 的方式来引用路径的，不能正常把颜色渲染出来

ant-design / html2sketch Goto Github PK

html2sketch's Introduction

Ant Design

✨ Features

🖥 Environment Support

📦 Install

🔨 Usage

🔗 Links

⌨️ Development

🤝 Contributing

❤️ Sponsors and Backers

html2sketch's People

Contributors

Stargazers

Watchers

Forkers

html2sketch's Issues

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🐛 bug 描述

🧐 问题描述

💻 示例代码

🚑 其他信息

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🧐 问题描述

💻 示例代码

🚑 其他信息

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🐛 bug 描述

modify

📷 复现步骤

🐛 bug 描述

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

🚑 其他信息

🚨 The automated release from the beta branch failed. 🚨

Invalid npm token.

🧐 问题描述

🚨 The automated release from the beta branch failed. 🚨

No npm token specified.

🚨 The automated release from the `beta` branch failed. 🚨

🚨 The automated release from the `beta` branch failed. 🚨