Skip to content

Commit aa0bb2d

Browse files
arvinxxarvinxx
authored
修复 symbol 的 override (#33)
* 🐛 fix: Fix split error * 🐛 fix: Fix use svg parsing * 🐛 fix: Fix symbol override * 📝 docs: Update badge
1 parent d6872eb commit aa0bb2d

File tree

11 files changed

+143
-36
lines changed

11 files changed

+143
-36
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div align="center">
44

5-
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url]
5+
[![NPM version][npm-image]][npm-url] [![NPM version][npm-next-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url]
66

77
[![Test CI status][test-ci]][test-ci-url] ![Deploy CI][deploy-ci] [![Coverage][coverage]][codecov-url]
88

@@ -15,7 +15,8 @@
1515

1616
<!-- npm url -->
1717

18-
[npm-image]: http://img.shields.io/npm/v/html2sketch.svg?style=flat-square
18+
[npm-image]: http://img.shields.io/npm/v/html2sketch.svg?style=flat-square&color=deepgreen&label=latest
19+
[npm-next-image]: https://img.shields.io/npm/v/html2sketch/next?label=next&style=flat-square
1920
[npm-url]: http://npmjs.org/package/html2sketch
2021
[npm-size]: https://packagephobia.com/badge?p=html2sketch
2122
[npm-size-url]: https://packagephobia.com/result?p=html2sketch

‎docs/e2e/basic/demos/SvgUseSymbol.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { FC } from 'react';
2+
// @ts-ignore
3+
import { ReactComponent as SvgLink } from './symbolLink.svg';
4+
// @ts-ignore
5+
import { ReactComponent as Svg } from './useSymbol.svg';
6+
7+
import { useElements, TestLayout } from '@e2e-utils';
8+
9+
const SvgIcons: FC = () => {
10+
const { elements, ref } = useElements();
11+
12+
return (
13+
<TestLayout elements={elements}>
14+
<SvgLink />
15+
<div ref={ref}>
16+
<Svg />
17+
</div>
18+
</TestLayout>
19+
);
20+
};
21+
22+
export default SvgIcons;

‎docs/e2e/basic/demos/symbolLink.svg

Lines changed: 6 additions & 0 deletions
Loading

‎docs/e2e/basic/demos/useSymbol.svg

Lines changed: 3 additions & 0 deletions
Loading

‎docs/e2e/basic/svg.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ icon 定义: 只包含一条或若干条 path 的 svg
1919

2020
<code src="./demos/SvgTest.tsx" />
2121

22+
### 使用 use Symbol 的 svg
23+
24+
<code src="./demos/SvgUseSymbol.tsx" />
25+
2226
### 多组 Icon 组合的 svg
2327

2428
解析过程中遇到的坑代表

‎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.4.1-0",
3+
"version": "0.4.1-3",
44
"author": "arvinxx(arvinx@foxmail.com)",
55
"description": "parser HTML to Sketch",
66
"keywords": [

‎src/function/adjustSymbolParams.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ const adjustSymbolParams = (
132132

133133
const { symbolLayout, layerParams, symbolName, selector } = symbolParams;
134134

135-
console.log(symbol, selector);
136135
const selectedSymbol = selectorLayer<SymbolMaster>(symbol, selector);
137136

138137
if (!selectedSymbol) return;

‎src/function/nodeToSketchSymbol.ts

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SymbolMaster } from '../model';
22
import { defaultSymbolParamsList } from '../utils/sketchSymbolParams';
33
import nodeToGroup from './nodeToGroup';
44
import adjustSymbolParams from './adjustSymbolParams';
5-
import { NodeToSketchSymbolOptions } from '../type';
5+
import { AnyLayer, NodeToSketchSymbolOptions } from '../type';
66

77
/**
88
* 解析为 Symbol
@@ -27,17 +27,7 @@ export default async (node: Element, options?: NodeToSketchSymbolOptions) => {
2727
if (group.class !== 'group') {
2828
symbol.addLayer(group);
2929
} else {
30-
group.layers.forEach((layer) => {
31-
switch (layer.class) {
32-
case 'text':
33-
// 对所有的文本都添加
34-
symbol.addOverride(layer.id, 'text');
35-
break;
36-
default:
37-
break;
38-
}
39-
symbol.layers.push(layer);
40-
});
30+
symbol.addLayers(group.layers);
4131
}
4232

4333
if (options) {
@@ -56,6 +46,31 @@ export default async (node: Element, options?: NodeToSketchSymbolOptions) => {
5646
}
5747
}
5848

49+
/**
50+
* 递归添加 Override
51+
* @param layer
52+
*/
53+
const addOverride = (layer: AnyLayer) => {
54+
if (layer.layers.length > 0) {
55+
layer.layers.forEach(addOverride);
56+
}
57+
58+
switch (layer.class) {
59+
case 'text':
60+
// 对所有的文本都添加
61+
symbol.addOverride(layer.id, 'text');
62+
break;
63+
case 'bitmap':
64+
// 对所有的图片都添加 override
65+
symbol.addOverride(layer.id, 'image');
66+
break;
67+
default:
68+
}
69+
};
70+
71+
// 处理 override
72+
symbol.layers.forEach(addOverride);
73+
5974
/**
6075
* 设置一些内置的的 symbol 配置项
6176
*/

‎src/model/Base/BaseLayer.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,6 @@ abstract class BaseLayer {
153153
}
154154

155155
set rotation(deg) {
156-
console.log(deg);
157156
this.frame.rotation = deg;
158157
}
159158

‎src/model/Layer/Svg.ts

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,25 @@ class Svg extends BaseLayer {
5353
this.rawSVGString = svgString;
5454

5555
// --------- 处理 Svg String 变成 Svg Shape ---------- //
56-
const result = svgson.parseSync(svgString, { camelcase: true });
56+
57+
let result = svgson.parseSync(svgString, { camelcase: true });
58+
// 排除一下 svg 的循环嵌套的问题
59+
while (result.children.length === 1 && result.children[0].name === 'svg') {
60+
[result] = result.children;
61+
}
5762

5863
const { children, attributes } = result;
5964
const { viewBox } = attributes;
6065

6166
// 解析获得 viewBox 值
6267
const [viewX, viewY, viewWidth, viewHeight] = viewBox
63-
.split(' ')
68+
?.split(' ')
6469
.map(parseFloat);
6570
this.viewBox = new Frame({
66-
x: viewX,
67-
height: viewHeight,
68-
width: viewWidth,
69-
y: viewY,
71+
x: viewX || 0,
72+
height: viewHeight || height,
73+
width: viewWidth || width,
74+
y: viewY || 0,
7075
});
7176
this.aspectRatio = Svg.calcFrameScale(
7277
this.viewBox.toJSON(),
@@ -266,9 +271,10 @@ class Svg extends BaseLayer {
266271
continue;
267272
}
268273

269-
inlineStyles(node);
270-
271-
Array.from(node.children).forEach((child) => queue.push(child));
274+
if (node) {
275+
inlineStyles(<SVGElement>node);
276+
Array.from(node.children).forEach((child) => queue.push(child));
277+
}
272278
}
273279

274280
return optimizeSvgString(svgNode.outerHTML);
@@ -306,7 +312,7 @@ class Svg extends BaseLayer {
306312
* 解析 Svgson 变成 layer
307313
* @param node
308314
*/
309-
parseSvgson = (node: svgson.INode) => {
315+
parseSvgson = (node: svgson.INode): any => {
310316
switch (node.name) {
311317
// 全局定义
312318
case 'defs':
@@ -334,6 +340,8 @@ class Svg extends BaseLayer {
334340
// 文本
335341
case 'text':
336342
return this.parseNodeToText(node);
343+
case 'svg':
344+
return node.children.map(this.parseSvgson);
337345
default:
338346
}
339347
};

0 commit comments

Comments
 (0)