diff --git a/packages/s2-core/__tests__/unit/common/icons/__snapshots__/gui-icon-spec.ts.snap b/packages/s2-core/__tests__/unit/common/icons/__snapshots__/gui-icon-spec.ts.snap new file mode 100644 index 0000000000..4cb679838b --- /dev/null +++ b/packages/s2-core/__tests__/unit/common/icons/__snapshots__/gui-icon-spec.ts.snap @@ -0,0 +1,428 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GuiIcon Tests should render correctly icon with + + + + ↓ + + + 1`] = ` +GuiIcon { + "_events": Object {}, + "attrs": Object { + "matrix": null, + "opacity": 1, + }, + "cfg": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "destroyed": false, + "iconImageShape": ImageShape1 { + "_events": Object {}, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "fillOpacity": 1, + "height": 20, + "lineAppendWidth": 0, + "lineWidth": 1, + "matrix": null, + "name": "test", + "opacity": 1, + "strokeOpacity": 1, + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "cfg": Object { + "animable": true, + "animating": false, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "capture": true, + "visible": true, + "zIndex": 0, + }, + "destroyed": false, + }, + "isOnlineLink": [Function], +} +`; + +exports[`GuiIcon Tests should render correctly icon with SortUp 1`] = ` +GuiIcon { + "_events": Object {}, + "attrs": Object { + "matrix": null, + "opacity": 1, + }, + "cfg": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "destroyed": false, + "iconImageShape": ImageShape1 { + "_events": Object {}, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "fillOpacity": 1, + "height": 20, + "lineAppendWidth": 0, + "lineWidth": 1, + "matrix": null, + "name": "test", + "opacity": 1, + "strokeOpacity": 1, + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "cfg": Object { + "animable": true, + "animating": false, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "capture": true, + "visible": true, + "zIndex": 0, + }, + "destroyed": false, + }, + "isOnlineLink": [Function], +} +`; + +exports[`GuiIcon Tests should render correctly icon with https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original 1`] = ` +GuiIcon { + "_events": Object {}, + "attrs": Object { + "matrix": null, + "opacity": 1, + }, + "cfg": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "destroyed": false, + "iconImageShape": ImageShape1 { + "_events": Object {}, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "fillOpacity": 1, + "height": 20, + "lineAppendWidth": 0, + "lineWidth": 1, + "matrix": null, + "name": "test", + "opacity": 1, + "strokeOpacity": 1, + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "cfg": Object { + "animable": true, + "animating": false, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "capture": true, + "visible": true, + "zIndex": 0, + }, + "destroyed": false, + }, + "isOnlineLink": [Function], +} +`; + +exports[`GuiIcon Tests should render correctly icon with https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5nsESLuvc_EAAAAAAAAAAAAADmJ7AQ/fmt.webp 1`] = ` +GuiIcon { + "_events": Object {}, + "attrs": Object { + "matrix": null, + "opacity": 1, + }, + "cfg": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "destroyed": false, + "iconImageShape": ImageShape1 { + "_events": Object {}, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "fillOpacity": 1, + "height": 20, + "lineAppendWidth": 0, + "lineWidth": 1, + "matrix": null, + "name": "test", + "opacity": 1, + "strokeOpacity": 1, + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "cfg": Object { + "animable": true, + "animating": false, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "capture": true, + "visible": true, + "zIndex": 0, + }, + "destroyed": false, + }, + "isOnlineLink": [Function], +} +`; + +exports[`GuiIcon Tests should render correctly icon with https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*P-jqT4U7YrcAAAAAAAAAAAAADmJ7AQ/original.jpg 1`] = ` +GuiIcon { + "_events": Object {}, + "attrs": Object { + "matrix": null, + "opacity": 1, + }, + "cfg": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "destroyed": false, + "iconImageShape": ImageShape1 { + "_events": Object {}, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "fillOpacity": 1, + "height": 20, + "lineAppendWidth": 0, + "lineWidth": 1, + "matrix": null, + "name": "test", + "opacity": 1, + "strokeOpacity": 1, + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "cfg": Object { + "animable": true, + "animating": false, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "capture": true, + "visible": true, + "zIndex": 0, + }, + "destroyed": false, + }, + "isOnlineLink": [Function], +} +`; + +exports[`GuiIcon Tests should render correctly icon with https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*f6e6S4OUSdMAAAAAAAAAAAAADmJ7AQ/original.gif 1`] = ` +GuiIcon { + "_events": Object {}, + "attrs": Object { + "matrix": null, + "opacity": 1, + }, + "cfg": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "destroyed": false, + "iconImageShape": ImageShape1 { + "_events": Object {}, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "fillOpacity": 1, + "height": 20, + "lineAppendWidth": 0, + "lineWidth": 1, + "matrix": null, + "name": "test", + "opacity": 1, + "strokeOpacity": 1, + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "cfg": Object { + "animable": true, + "animating": false, + "attrs": Object { + "animable": true, + "animating": false, + "capture": true, + "children": Array [], + "height": 20, + "name": "test", + "type": "__GUI_ICON__", + "visible": true, + "width": 20, + "x": 0, + "y": 0, + "zIndex": 0, + }, + "capture": true, + "visible": true, + "zIndex": 0, + }, + "destroyed": false, + }, + "isOnlineLink": [Function], +} +`; diff --git a/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts b/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts new file mode 100644 index 0000000000..00ca41dd5a --- /dev/null +++ b/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts @@ -0,0 +1,85 @@ +import { Group, Shape } from '@antv/g-canvas'; +import { registerIcon } from '../../../../src/common/icons'; +import { sleep } from '../../../util/helpers'; +import { GuiIcon } from '@/common/icons/gui-icon'; +import { ArrowDown } from '@/common/icons/svg/svgs'; + +describe('GuiIcon Tests', () => { + test('should get gui icon static type', () => { + expect(GuiIcon.type).toEqual('__GUI_ICON__'); + }); + + test.each([ + // 内置 + 'SortUp', + // base64/本地文件 + ArrowDown, + // 在线链接 (无后缀) + 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original', + // 在线链接 (静态) + 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*P-jqT4U7YrcAAAAAAAAAAAAADmJ7AQ/original.jpg', + // 在线链接 (动态) + 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*f6e6S4OUSdMAAAAAAAAAAAAADmJ7AQ/original.gif', + // 在线链接 (webp) + 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5nsESLuvc_EAAAAAAAAAAAAADmJ7AQ/fmt.webp', + ])('should render correctly icon with %s', (src) => { + const errSpy = jest + .spyOn(console, 'error') + .mockImplementationOnce(() => {}); + + registerIcon('test', src); + + const icon = new GuiIcon({ + name: 'test', + x: 0, + y: 0, + width: 20, + height: 20, + }); + + expect(icon.get('name')).toEqual('test'); + expect(icon.iconImageShape).toBeInstanceOf(Shape.Image); + expect(icon).toBeInstanceOf(Group); + expect(icon).toMatchSnapshot(); + expect(errSpy).not.toHaveBeenCalled(); + }); + + test('should not render icon with invalid online url', async () => { + registerIcon('test', 'https://www.test.svg'); + + const errSpy = jest + .spyOn(console, 'error') + .mockImplementationOnce(() => {}); + + const icon = new GuiIcon({ + name: 'test', + x: 0, + y: 0, + width: 20, + height: 20, + }); + + await sleep(300); + + expect(errSpy).toHaveBeenCalled(); + }); + + test('should get is online link result', () => { + const icon = new GuiIcon({ + name: 'test', + x: 0, + y: 0, + width: 20, + height: 20, + }); + + expect(icon.isOnlineLink('https://www.test.png')).toBeTruthy(); + expect(icon.isOnlineLink('https://www.test/test')).toBeTruthy(); + expect(icon.isOnlineLink('http://www.test.png')).toBeTruthy(); + expect(icon.isOnlineLink('//www.test.png')).toBeTruthy(); + expect(icon.isOnlineLink('https//www.test.png')).toBeFalsy(); + expect(icon.isOnlineLink('https//www.test.png')).toBeFalsy(); + expect(icon.isOnlineLink('://www.test.png')).toBeFalsy(); + expect(icon.isOnlineLink('')).toBeFalsy(); + }); +}); diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts index 016af2c663..d8babe059a 100644 --- a/packages/s2-core/src/common/icons/gui-icon.ts +++ b/packages/s2-core/src/common/icons/gui-icon.ts @@ -7,6 +7,8 @@ import { getIcon } from './factory'; const STYLE_PLACEHOLDER = ' = {}; @@ -36,30 +38,25 @@ export class GuiIcon extends Group { fill?: string, ): Promise { return new Promise((resolve, reject): void => { + let svg = getIcon(name); + if (!svg) { + return; + } + const img = new Image(); - // 成功 img.onload = () => { ImageCache[cacheKey] = img; resolve(img); }; - // 失败 - img.onerror = (e) => { - reject(e); - }; - let svg = getIcon(name); + img.onerror = reject; // 兼容三种情况 // 1、base 64 // 2、svg本地文件（兼容老方式，可以改颜色） // 3、线上支持的图片地址 - if ( - svg && - (svg.includes('data:image/svg+xml') || this.hasSupportSuffix(svg)) - ) { - // 传入 base64 字符串 - // 或者 online 链接 + if (svg.includes(SVG_CONTENT_TYPE) || this.isOnlineLink(svg)) { img.src = svg; - } else if (svg) { + } else { // 传入 svg 字符串（支持颜色fill） if (fill) { // 如果有fill，移除原来的 fill @@ -75,15 +72,18 @@ export class GuiIcon extends Group { ); // 兼容 Firefox: https://github.com/antvis/S2/issues/1571 https://stackoverflow.com/questions/30733607/svg-data-image-not-working-as-a-background-image-in-a-pseudo-element/30733736#30733736 // https://www.chromestatus.com/features/5656049583390720 - img.src = `data:image/svg+xml;utf-8,${encodeURIComponent(svg)}`; + img.src = `${SVG_CONTENT_TYPE};utf-8,${encodeURIComponent(svg)}`; } }); } - hasSupportSuffix = (image: string) => { - return ['.png', '.jpg', '.gif', '.svg'].some((suffix) => - image?.endsWith(suffix), - ); + /** + * 1. https://xxx.svg + * 2. http://xxx.svg + * 3. //xxx.svg + */ + public isOnlineLink = (src: string) => { + return /^(https?:)?(\/\/)/.test(src); }; private render() { @@ -113,9 +113,9 @@ export class GuiIcon extends Group { image.attr('img', value); this.addShape('image', image); }) - .catch((err: Event) => { + .catch((event: Event) => { // eslint-disable-next-line no-console - console.warn(`GuiIcon ${name} load error`, err); + console.error(`GuiIcon ${name} load failed`, event); }); } this.iconImageShape = image;