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.

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

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

Closed
Tracked by #135
janily opened this issue Nov 11, 2020 · 5 comments
Closed
Tracked by #135

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

janily opened this issue Nov 11, 2020 · 5 comments
Labels

Comments

@janily
Copy link

janily commented Nov 11, 2020

🐛 bug 描述

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

这是正常的:

image

这是渲染的结果:

image

📷 复现步骤

可以用下面的 demo 来复现

🏞 期望结果

💻 复现代码

可复现 demo

© 版本信息

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

🚑 其他信息

@janily janily changed the title 🐛[BUG] 元素 padding 解析渲染问题 🐛[BUG] 元素 padding 和位置解析渲染问题 Nov 11, 2020
@arvinxx
Copy link
Collaborator

arvinxx commented Nov 11, 2020

这个可能是因为之前没对 ul 和 li 做专门的解析优化的关系,我研究下咋优化

@janily
Copy link
Author

janily commented Nov 23, 2020

@arvinxx 大佬,有空看下这个问题么还有另外一个居中的问题么 😄

@arvinxx
Copy link
Collaborator

arvinxx commented Nov 23, 2020

@arvinxx 大佬,有空看下这个问题么还有另外一个居中的问题么 😄

最近有点忙,我争取这周优化掉吧

@arvinxx arvinxx mentioned this issue May 8, 2021
6 tasks
@arvinxx
Copy link
Collaborator

arvinxx commented May 13, 2021

经过测试,发现不是 ul 和 li 的问题,而是基于 html 的文本的对齐方式生成 sketch JSON 的 alignment 导致的。

即原来在网页中设置了 text-align: right 的会得到 Sketch Alignment 为 SketchFormat.TextHorizontalAlignment.Right,而这个数据传入到 sketch 中则会导致 sketch 中文本位置的解析出错,两者的差别只是修改了 TextAlignment 而已。

测试案例: https://gist.github.com/arvinxx/9ad1cda7ffd8702bd47cf29c1c59aef3

arvinxx added a commit that referenced this issue May 13, 2021
github-actions bot pushed a commit that referenced this issue May 13, 2021
# [1.0.0-beta.2](v1.0.0-beta.1...v1.0.0-beta.2) (2021-05-13)

### 🐛 Bug Fixes

* fix position bug due to sketch text align parsing error ([1dce98f](1dce98f)), closes [#51](#51)
@arvinxx arvinxx closed this as completed Sep 13, 2021
github-actions bot pushed a commit that referenced this issue Feb 9, 2023
# [1.0.0](v0.4.7...v1.0.0) (2023-02-09)

### ♻ Code Refactoring

* rename the symbol function ([09d0de9](09d0de9))

### ✨ Features

* input support overflow ([0ff7b55](0ff7b55)), closes [#177](#177)
* support almost full css transform ([f7bb06d](f7bb06d)), closes [#148](#148)
* support overflow element ([f4b017b](f4b017b)), closes [#178](#178)
* support rad angle line-gradient ([9860090](9860090)), closes [#96](#96)
* support rotate & clip-path ([35f6628](35f6628)), closes [#180](#180)
* 优化抓取 base64 图片方法 ([07dd128](07dd128))
* 提供自定义 fetch 方法的能力 ([28ed276](28ed276))
* 新增固定宽高的能力 ([f2df2e5](f2df2e5))

### 🐛 Bug Fixes

* adjust text and svg resizing constraint ([9fc8970](9fc8970))
* fix absolute position margin parsing ([120ba39](120ba39))
* fix overflow hidden node use clipping mask ([defb941](defb941))
* fix overflow hidden node use clipping mask ([055f25d](055f25d))
* fix password input text ([c8ff928](c8ff928))
* fix placeholder parsing without css rules ([505a390](505a390))
* fix position bug due to sketch text align parsing error ([1dce98f](1dce98f)), closes [#51](#51)
* fix pseudo elt style issue and add test ([5c727a3](5c727a3))
* fix resizingConstraint func and update test ([c39f843](c39f843))
* gradient parse in safari ([aa374e5](aa374e5)), closes [#185](#185)
* parse linear-gradient ([90f3ed8](90f3ed8)), closes [#184](#184)
* set default resizingConstraint to left and top ([f897275](f897275))
* should parse textarea value and placeholder ([06d70ac](06d70ac)), closes [#161](#161)
* single child overflow should not be mask ([1acab12](1acab12)), closes [#181](#181)
* try to fix babel problem ([398f825](398f825))
* 修正 textStyle 缺失导致修改文本造成报错的问题 ([1a44244](1a44244))

### 💥 BREAKING CHANGES

* rename `nodeToSketchSymbol` to nodeToSymbol
@github-actions
Copy link

github-actions bot commented Feb 9, 2023

🎉 This issue has been resolved in version 1.0.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
Projects
None yet
Development

No branches or pull requests

2 participants