-
Notifications
You must be signed in to change notification settings - Fork 579
/
icon.service.ts
237 lines (202 loc) · 8.07 KB
/
icon.service.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
import { DOCUMENT } from '@angular/common';
import { HttpBackend, HttpClient } from '@angular/common/http';
import { Inject, Optional, Renderer2, RendererFactory2, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { of as observableOf, Observable } from 'rxjs';
import { catchError, finalize, map, share, tap } from 'rxjs/operators';
import { CachedIconDefinition, IconDefinition, ThemeType, TwoToneColorPalette, TwoToneColorPaletteSetter } from '../types';
import {
cloneSVG,
getIconDefinitionFromAbbr,
getNameAndNamespace,
getSecondaryColor,
hasNamespace,
isIconDefinition,
replaceFillColor,
withSuffix,
withSuffixAndColor
} from '../utils';
import { HttpModuleNotImport, IconNotFoundError, NameSpaceIsNotSpecifyError, SVGTagNotFoundError, UrlNotSafeError } from './icon.error';
export class IconService {
defaultTheme: ThemeType = 'outline';
protected _renderer: Renderer2;
protected _http: HttpClient;
/**
* All icon definitions would be registered here.
*/
protected _svgDefinitions = new Map<string, IconDefinition>();
/**
* Cache all rendered icons. Icons are identified by name, theme,
* and for twotone icons, primary color and secondary color.
*/
protected _svgRenderedDefinitions = new Map<string, CachedIconDefinition>();
protected _inProgressFetches = new Map<string, Observable<IconDefinition | null>>();
/**
* Url prefix for fetching inline SVG by dynamic importing.
*/
protected _assetsUrlRoot = '';
protected _twoToneColorPalette: TwoToneColorPalette = {
primaryColor : '#333333',
secondaryColor: '#E6E6E6'
};
set twoToneColor({ primaryColor, secondaryColor }: TwoToneColorPaletteSetter) {
this._twoToneColorPalette.primaryColor = primaryColor;
this._twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
}
get twoToneColor(): TwoToneColorPaletteSetter {
return { ...this._twoToneColorPalette } as TwoToneColorPalette; // Make a copy to avoid unexpected changes.
}
constructor(
protected _rendererFactory: RendererFactory2,
@Optional() protected _handler: HttpBackend,
// tslint:disable-next-line:no-any
@Optional() @Inject(DOCUMENT) protected _document: any,
protected sanitizer: DomSanitizer
) {
this._renderer = this._rendererFactory.createRenderer(null, null);
if (this._handler) {
this._http = new HttpClient(this._handler);
}
}
/**
* Change the prefix of the inline svg resources, so they could be deployed elsewhere, like CDN.
* @param prefix
*/
changeAssetsSource(prefix: string): void {
this._assetsUrlRoot = prefix.endsWith('/') ? prefix : prefix + '/';
}
/**
* Add icons provided by ant design.
* @param icons
*/
addIcon(...icons: IconDefinition[]): void {
icons.forEach(icon => {
this._svgDefinitions.set(withSuffix(icon.name, icon.theme), icon);
});
}
/**
* Register an icon. Namespace is required.
* @param type
* @param literal
*/
addIconLiteral(type: string, literal: string): void {
const [ name, namespace ] = getNameAndNamespace(type);
if (!namespace) {
throw NameSpaceIsNotSpecifyError();
}
this.addIcon({ name: type, icon: literal });
}
/**
* Remove all cache.
*/
clear(): void {
this._svgDefinitions.clear();
this._svgRenderedDefinitions.clear();
}
/**
* Get a rendered `SVGElement`.
* @param icon
* @param twoToneColor
*/
getRenderedContent(icon: IconDefinition | string, twoToneColor?: string): Observable<SVGElement> {
// If `icon` is a `IconDefinition`, go to the next step. If not, try to fetch it from cache.
const definition: IconDefinition | null | undefined = isIconDefinition(icon) ? icon as IconDefinition : this._svgDefinitions.get(icon as string);
// If `icon` is a `IconDefinition` of successfully fetch, wrap it in an `Observable`. Otherwise try to fetch it from remote.
const $iconDefinition = definition ? observableOf(definition) : this._getFromRemote(icon as string);
// If finally get an `IconDefinition`, render and return it. Otherwise throw an error.
return $iconDefinition.pipe(map(i => {
if (!i) { throw IconNotFoundError(icon as string); }
return this._loadSVGFromCacheOrCreateNew(i, twoToneColor);
}));
}
/**
* Get raw svg and assemble a `IconDefinition` object.
* @param type
*/
protected _getFromRemote(type: string): Observable<IconDefinition | null> {
if (!this._http) { return observableOf(HttpModuleNotImport()); }
// If multi directive ask for the same icon at the same time, http request should only be fired once.
let inProgress = this._inProgressFetches.get(type);
// If there's no other directive asking for the same icon, fire a request.
if (!inProgress) {
const [ name, namespace ] = getNameAndNamespace(type);
// If the string has a namespace within, create a simple `IconDefinition`.
const icon: IconDefinition = namespace
? { name, icon: '' }
: getIconDefinitionFromAbbr(name);
const url = namespace
? `${this._assetsUrlRoot}assets/${namespace}/${icon.name}.svg`
: `${this._assetsUrlRoot}assets/${icon.theme}/${icon.name}.svg`;
const safeUrl = this.sanitizer.sanitize(SecurityContext.URL, url);
if (!safeUrl) { throw UrlNotSafeError(url); }
// Wrap a `IconDefinition`, cache it, delete the shared work.
inProgress = this._http.get(safeUrl, { responseType: 'text' }).pipe(
map(literal => ({ ...icon, icon: literal })),
tap(definition => this.addIcon(definition)),
finalize(() => this._inProgressFetches.delete(type)),
catchError(() => observableOf(null)),
share()
);
this._inProgressFetches.set(type, inProgress);
}
// Otherwise just reuse other directive's request.
return inProgress;
}
/**
* Render a new `SVGElement` for given `IconDefinition`, or make a copy from cache.
* @param icon
* @param twoToneColor
*/
protected _loadSVGFromCacheOrCreateNew(icon: IconDefinition, twoToneColor?: string): SVGElement {
let svg: SVGElement;
const pri = twoToneColor || this._twoToneColorPalette.primaryColor;
const sec = getSecondaryColor(pri) || this._twoToneColorPalette.secondaryColor;
const key = icon.theme === 'twotone'
? withSuffixAndColor(icon.name, icon.theme, pri, sec)
: icon.theme === undefined ? icon.name : withSuffix(icon.name, icon.theme);
// Try to make a copy from cache.
const cached = this._svgRenderedDefinitions.get(key);
if (cached) {
svg = cached.icon;
} else {
svg = this._setSVGAttribute(this._colorizeSVGIcon(
// Icons provided by ant design should be refined to remove preset colors.
this._createSVGElementFromString(hasNamespace(icon.name) ? icon.icon : replaceFillColor(icon.icon)),
icon.theme === 'twotone',
pri,
sec
));
// Cache it.
this._svgRenderedDefinitions.set(key, { ...icon, icon: svg } as CachedIconDefinition);
}
return cloneSVG(svg);
}
protected _createSVGElementFromString(str: string): SVGElement {
const div = this._document.createElement('div');
div.innerHTML = str;
const svg: SVGElement = div.querySelector('svg');
if (!svg) { throw SVGTagNotFoundError; }
return svg;
}
protected _setSVGAttribute(svg: SVGElement): SVGElement {
this._renderer.setAttribute(svg, 'width', '1em');
this._renderer.setAttribute(svg, 'height', '1em');
return svg;
}
protected _colorizeSVGIcon(svg: SVGElement, twotone: boolean, pri: string, sec: string): SVGElement {
if (twotone) {
const children = svg.childNodes;
const length = children.length;
for (let i = 0; i < length; i++) {
const child: HTMLElement = children[ i ] as HTMLElement;
if (child.getAttribute('fill') === 'secondaryColor') {
this._renderer.setAttribute(child, 'fill', sec);
} else {
this._renderer.setAttribute(child, 'fill', pri);
}
}
}
this._renderer.setAttribute(svg, 'fill', 'currentColor');
return svg;
}
}