Skip to content

Commit 3d2d99f

Browse files
arvinxxarvinxx
committed
fix: 修复伪类的解析样式
1 parent ffa96d0 commit 3d2d99f

File tree

8 files changed

+48
-54
lines changed

8 files changed

+48
-54
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "html2sketch",
3-
"version": "0.1.10",
3+
"version": "0.1.11",
44
"author": "arvinxx",
55
"description": "parser HTML to Design Model",
66
"repository": {

‎src/function/__test__/nodeToSketchSymbol.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,6 @@ const symbol = {
384384
isVisible: true,
385385
};
386386

387-
describe('nodeToSketchSymbol', function() {
388-
it('should work fine', function() {});
387+
describe('nodeToSketchSymbol', function () {
388+
it('should work fine', function () {});
389389
});

‎src/model/Layer/__test__/rectangle.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Rectangle from '../Rectangle';
22

3-
describe('Rectangle 类', function() {
4-
describe('toKonvaJSON 转换正常', function() {
5-
it('普通 Rectangle 转换正常', function() {
3+
describe('Rectangle 类', function () {
4+
describe('toKonvaJSON 转换正常', function () {
5+
it('普通 Rectangle 转换正常', function () {
66
const rect = new Rectangle({ height: 100, width: 50, x: 280, y: 100 });
77
rect.name = 'Rect';
88
expect(rect.toKonvaJSON()).toStrictEqual({
@@ -16,7 +16,7 @@ describe('Rectangle 类', function() {
1616
className: 'Rect',
1717
});
1818
});
19-
it('等圆角 Rectangle 转换正常', function() {
19+
it('等圆角 Rectangle 转换正常', function () {
2020
const rect = new Rectangle({
2121
height: 100,
2222
width: 50,
@@ -37,7 +37,7 @@ describe('Rectangle 类', function() {
3737
className: 'Rect',
3838
});
3939
});
40-
it('不等圆角 Rectangle 转换正常', function() {
40+
it('不等圆角 Rectangle 转换正常', function () {
4141
const rect = new Rectangle({
4242
height: 100,
4343
width: 50,
@@ -63,7 +63,7 @@ describe('Rectangle 类', function() {
6363
className: 'Rect',
6464
});
6565
});
66-
it('不等圆角 Rectangle2 转换正常', function() {
66+
it('不等圆角 Rectangle2 转换正常', function () {
6767
const rect = new Rectangle({
6868
height: 100,
6969
width: 50,

‎src/model/Layer/__test__/shapePath.test.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,45 +11,45 @@ import {
1111

1212
describe('ShapePath', () => {
1313
describe('toSketchJSON 转换符合规范', () => {
14-
it('圆角矩形 roundRect 转换正常', function() {
14+
it('圆角矩形 roundRect 转换正常', function () {
1515
const { frame, isClose, points } = roundRect.shapePath;
1616
const shapePath = new ShapePath({ isClose, points, ...frame });
1717
expect(shapePath.toSketchJSON()).toStrictEqual(roundRect.sketchJSON);
1818
});
1919

20-
it('正方形 rect 转换正常', function() {
20+
it('正方形 rect 转换正常', function () {
2121
const { frame, isClose, points } = rect.shapePath;
2222
const shapePath = new ShapePath({ isClose, points, ...frame });
2323
expect(shapePath.toSketchJSON()).toStrictEqual(rect.sketchJSON);
2424
});
25-
it('不规则图形compPath转换正常', function() {
25+
it('不规则图形compPath转换正常', function () {
2626
const { frame, isClose, points } = compPath.shapePath;
2727
const shapePath = new ShapePath({ isClose, points, ...frame });
2828
expect(shapePath.toSketchJSON()).toStrictEqual(compPath.sketchJSON);
2929
});
30-
it('带圆角的矩形 rectRound2 转换正常', function() {
30+
it('带圆角的矩形 rectRound2 转换正常', function () {
3131
const { frame, isClose, points } = singleRoundRect.shapePath;
3232
const shapePath = new ShapePath({ isClose, points, ...frame });
3333
expect(shapePath.toSketchJSON()).toStrictEqual(
3434
singleRoundRect.sketchJSON
3535
);
3636
});
37-
it('开放矩形 unclosedRect 转换正常', function() {
37+
it('开放矩形 unclosedRect 转换正常', function () {
3838
const { frame, isClose, points } = unclosedRect.shapePath;
3939

4040
const shapePath = new ShapePath({ isClose, points, ...frame });
4141

4242
expect(shapePath.toSketchJSON()).toStrictEqual(unclosedRect.sketchJSON);
4343
});
4444

45-
it('upArrow 转换正常', function() {
45+
it('upArrow 转换正常', function () {
4646
const { frame, isClose, points } = upArrow.shapePath;
4747

4848
const shapePath = new ShapePath({ isClose, points, ...frame });
4949
expect(shapePath.toSketchJSON()).toStrictEqual(upArrow.sketchJSON);
5050
});
5151

52-
it('plus 转换正常', function() {
52+
it('plus 转换正常', function () {
5353
const { frame, isClose, points } = plus.shapePath;
5454

5555
const shapePath = new ShapePath({ isClose, points, ...frame });
@@ -59,40 +59,40 @@ describe('ShapePath', () => {
5959

6060
describe('svgPathToShapePath', () => {
6161
describe('转换正常', () => {
62-
it('upArrow 转换正常', function() {
62+
it('upArrow 转换正常', function () {
6363
const t = ShapePath.svgPathToShapePath(upArrow.path);
6464
expect(t).toStrictEqual(upArrow.shapePath);
6565
});
66-
it('正常转换圆角矩形', function() {
66+
it('正常转换圆角矩形', function () {
6767
const t = ShapePath.svgPathToShapePath(roundRect.path);
6868
expect(t).toStrictEqual(roundRect.shapePath);
6969
});
70-
it('矩形转换正常', function() {
70+
it('矩形转换正常', function () {
7171
const points = ShapePath.svgPathToShapePath(rect.path);
7272
expect(points).toStrictEqual(rect.shapePath);
7373
});
74-
it('带圆角的矩形转换正常', function() {
74+
it('带圆角的矩形转换正常', function () {
7575
const points = ShapePath.svgPathToShapePath(singleRoundRect.path);
7676
expect(points).toStrictEqual(singleRoundRect.shapePath);
7777
});
7878

79-
it('不规则图形compPath转换正常', function() {
79+
it('不规则图形compPath转换正常', function () {
8080
const points = ShapePath.svgPathToShapePath(compPath.path);
8181
expect(points).toStrictEqual(compPath.shapePath);
8282
});
8383

84-
it('不闭合矩形转换正常', function() {
84+
it('不闭合矩形转换正常', function () {
8585
const points = ShapePath.svgPathToShapePath(unclosedRect.path);
8686
expect(points).toStrictEqual(unclosedRect.shapePath);
8787
});
8888

89-
it('plus 转换正常', function() {
89+
it('plus 转换正常', function () {
9090
const points = ShapePath.svgPathToShapePath(plus.path);
9191
expect(points).toStrictEqual(plus.shapePath);
9292
});
9393
});
94-
describe('错误处理', function() {
95-
it('只能转化一个shape', function() {
94+
describe('错误处理', function () {
95+
it('只能转化一个shape', function () {
9696
const path =
9797
'M872 474H152 z M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z';
9898
const t = () => {
@@ -106,7 +106,7 @@ describe('ShapePath', () => {
106106
`Error Path!\nData:${path}\nPlease check whether the path is correct.`
107107
);
108108
});
109-
it('如果没有 M 则报错', function() {
109+
it('如果没有 M 则报错', function () {
110110
const path =
111111
'H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z';
112112
const t = () => {

‎src/model/Layer/__test__/svg.test.ts

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {
1414
} from './commonSvgData';
1515

1616
describe('Svg 类', () => {
17-
describe('toSketchJSON', function() {
18-
it('svgPath 复合对象转换正常', function() {
17+
describe('toSketchJSON', function () {
18+
it('svgPath 复合对象转换正常', function () {
1919
const svg = new Svg({
2020
svgString: svgPath.svgString,
2121
height: 814.2161138351329,
@@ -27,7 +27,7 @@ describe('Svg 类', () => {
2727
expect(svg.toSketchJSON()).toStrictEqual(svgPath.sketchJSON);
2828
});
2929

30-
it('dropbox 转换正常', function() {
30+
it('dropbox 转换正常', function () {
3131
const svg = new Svg({
3232
height: 100,
3333
width: 100,
@@ -38,7 +38,7 @@ describe('Svg 类', () => {
3838
outputJSONData(svg.toSketchJSON(), 'dropbox');
3939
expect(svg.toSketchJSON()).toStrictEqual(dropboxSvgPath.sketchJSON);
4040
});
41-
it('behance 转换正常', function() {
41+
it('behance 转换正常', function () {
4242
const svg = new Svg({
4343
height: 56.01562500000003,
4444
width: 89.22991071428572,
@@ -50,7 +50,7 @@ describe('Svg 类', () => {
5050
expect(svg.toSketchJSON()).toStrictEqual(behanceSvg.sketchJSON);
5151
});
5252

53-
it('plusSvg 转换正常', function() {
53+
it('plusSvg 转换正常', function () {
5454
const svg = new Svg({
5555
height: 25,
5656
width: 24,
@@ -62,7 +62,7 @@ describe('Svg 类', () => {
6262
expect(svg.toSketchJSON()).toStrictEqual(plusSvg.sketchJSON);
6363
});
6464

65-
describe('多条路径 upArrow 转换正常', function() {
65+
describe('多条路径 upArrow 转换正常', function () {
6666
const svg = new Svg({
6767
svgString: upCircleSvg.svgString,
6868
height: 300,
@@ -75,8 +75,8 @@ describe('Svg 类', () => {
7575
});
7676
});
7777

78-
describe('convertToCubicBezier', function() {
79-
it('svgPath转换正常', function() {
78+
describe('convertToCubicBezier', function () {
79+
it('svgPath转换正常', function () {
8080
const points = Svg.pathToShapeGroup(svgPath.shapes[0].path);
8181
expect(points).toStrictEqual({
8282
frame: {
@@ -98,7 +98,7 @@ describe('Svg 类', () => {
9898
});
9999
});
100100

101-
it('plusSvg转换正常', function() {
101+
it('plusSvg转换正常', function () {
102102
const points = Svg.pathToShapeGroup(plusSvg.shapes[0].path);
103103
console.log(points);
104104
expect(points).toStrictEqual({
@@ -112,7 +112,7 @@ describe('Svg 类', () => {
112112
});
113113
});
114114

115-
it('path不正确时报错', function() {
115+
it('path不正确时报错', function () {
116116
const path = 'Z';
117117
const t = () => {
118118
try {
@@ -128,7 +128,7 @@ describe('Svg 类', () => {
128128
});
129129

130130
describe('calcFrameScale', () => {
131-
it('长宽比相等', function() {
131+
it('长宽比相等', function () {
132132
const originFrame = { x: 0, y: 0, width: 100, height: 100 };
133133
const targetFrame = { x: 0, y: 0, width: 200, height: 200 };
134134

@@ -141,7 +141,7 @@ describe('Svg 类', () => {
141141
* | | -> | |
142142
* *--------* *------*
143143
*/
144-
it('源长宽比大于目标长宽比', function() {
144+
it('源长宽比大于目标长宽比', function () {
145145
const originFrame = { x: 0, y: 0, width: 100, height: 50 };
146146
const targetFrame = { x: 0, y: 0, width: 200, height: 200 };
147147

@@ -156,13 +156,13 @@ describe('Svg 类', () => {
156156
* | |
157157
* *--------*
158158
*/
159-
it('源长宽比小于目标长宽比', function() {
159+
it('源长宽比小于目标长宽比', function () {
160160
const originFrame = { x: 0, y: 0, width: 100, height: 200 };
161161
const targetFrame = { x: 0, y: 0, width: 100, height: 100 };
162162

163163
const scale = Svg.calcFrameScale(originFrame, targetFrame);
164164
expect(scale).toBe(0.5);
165165
});
166166
});
167-
describe('', function() {});
167+
describe('', function () {});
168168
});

‎src/model/Style/__test__/style.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Style from '../Style';
22

3-
describe('Style 类', function() {
4-
describe('parserStyleString', function() {
5-
it('', function() {
3+
describe('Style 类', function () {
4+
describe('parserStyleString', function () {
5+
it('', function () {
66
const string =
77
'fill: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65); font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; font-variant: tabular-nums; text-decoration: none solid rgba(0, 0, 0, 0.65); text-rendering: optimizelegibility;';
88
expect(Style.parserStyleString(string)).toStrictEqual({

‎src/parser/__test__/colorAsset.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('colorAsset', () => {
2323
document.body.innerHTML = '';
2424
});
2525

26-
it('RGB should work fine', function() {
26+
it('RGB should work fine', function () {
2727
// const color = colorAsset()
2828
});
2929
});

‎src/parser/pseudoText.ts

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Style } from '../model';
21
import Text from '../model/Layer/Text';
32
import { getTextContext } from '../helpers/text';
43

@@ -23,20 +22,12 @@ const parsePseudoText = (node: Element, pseudoElt: 'before' | 'after') => {
2322
}
2423

2524
const {
26-
// 背景颜色
27-
backgroundColor,
2825
// 边框
2926
marginRight,
3027
} = pseudoEl;
3128

3229
const nodeBCR = node.getBoundingClientRect();
3330

34-
const style = new Style();
35-
36-
if (backgroundColor) {
37-
style.addColorFill(backgroundColor);
38-
}
39-
4031
pseudoNode.textContent = pseudoText;
4132

4233
document.body.append(pseudoNode); // 插入到 dom 中 用于获取文本宽度
@@ -60,13 +51,16 @@ const parsePseudoText = (node: Element, pseudoElt: 'before' | 'after') => {
6051

6152
document.body.removeChild(pseudoNode); // 处理完成后移除
6253

54+
const textStyle = Text.getTextStyleFromNode(node);
55+
textStyle.lineHeight = textBCR.height;
56+
6357
return new Text({
6458
x,
6559
y,
6660
width: textBCR.width,
6761
height: nodeBCR.height,
6862
text: pseudoText,
69-
style: Text.getTextStyleFromNode(node),
63+
style: textStyle,
7064
multiline: false,
7165
});
7266
};

0 commit comments

Comments
 (0)