feat: marker + icon (antvis#19)

* feat(icon): add icon class for test g ui

* feat(marker): add marker ui

* feat(icon): use marker for icon

* chore: update test case

* chore: use father-build (antvis#20)

* test: add tc

* feat(icon): add background rect

Co-authored-by: zhanba <[email protected]>

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
     'no-console': 'off',
     'arrow-body-style': 'off',
     'no-useless-constructor': 'off',
+    'no-unused-expressions': 'off',
   },
   settings: {
     'import/parsers': {

.fatherrc.ts

@@ -0,0 +1,9 @@
+export default {
+  esm: 'rollup',
+  cjs: 'rollup',
+  umd: {
+    minFile: true,
+    file: 'gui',
+    name: 'GUI',
+  },
+};

__tests__/unit/ui/icon/index.spec.ts

@@ -0,0 +1,39 @@
+import 'babel-polyfill';
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Icon } from '../../../../src';
+import { createDiv } from '../../../utils';
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+describe('icon', () => {
+  test('basic', async () => {
+    const div = createDiv();
+
+    // @ts-ignore
+    const canvas = new Canvas({
+      container: div,
+      width: 300,
+      height: 300,
+      renderer,
+    });
+
+    const icon = new Icon({
+      attrs: {
+        symbol: 'triangle-down',
+        x: 50,
+        y: 50,
+        size: 10,
+        spacing: 4,
+        fill: 'green',
+        text: '10.24%',
+      },
+    });
+
+    canvas.appendChild(icon);
+  });
+});

__tests__/unit/ui/marker/index.spec.ts

@@ -0,0 +1,71 @@
+import 'babel-polyfill';
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Marker, svg2marker } from '../../../../src';
+import { createDiv } from '../../../utils';
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+describe('marker', () => {
+  test('basic', async () => {
+    const div = createDiv();
+
+    // @ts-ignore
+    const canvas = new Canvas({
+      container: div,
+      width: 300,
+      height: 300,
+      renderer,
+    });
+
+    const marker = new Marker({
+      attrs: {
+        symbol: 'triangle-down',
+        x: 50,
+        y: 50,
+        r: 16,
+        fill: 'green',
+      },
+    });
+
+    canvas.appendChild(marker);
+
+    expect(marker.getPathShape().getBounds().center[0]).toBe(100);
+    expect(marker.getPathShape().getBounds().center[1]).toBe(100);
+  });
+
+  test('customize marker', async () => {
+    Marker.registerSymbol(
+      'star',
+      svg2marker(
+        `<svg height="512" width="512" viewport="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M480 207H308.6L256 47.9 203.4 207H32l140.2 97.9L117.6 464 256 365.4 394.4 464l-54.7-159.1L480 207zM362.6 421.2l-106.6-76-106.6 76L192 298.7 84 224h131l41-123.3L297 224h131l-108 74.6 42.6 122.6z"/></svg>`
+      )
+    );
+
+    const div = createDiv();
+
+    // @ts-ignore
+    const canvas = new Canvas({
+      container: div,
+      width: 300,
+      height: 300,
+      renderer,
+    });
+
+    const marker = new Marker({
+      attrs: {
+        symbol: 'star',
+        x: 50,
+        y: 50,
+        r: 16,
+        stroke: 'red',
+      },
+    });
+
+    canvas.appendChild(marker);
+  });
+});

__tests__/utils/delay.ts

@@ -0,0 +1,12 @@
+/**
+ * 延迟函数
+ * @param ms
+ * @returns
+ */
+export async function delay(ms: number = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, ms);
+  });
+}

__tests__/utils/dom.ts

@@ -0,0 +1,23 @@
+/**
+ * 创建一个 div 节点，并放到 container，默认放到 body 上
+ * @param container
+ */
+export function createDiv(container: HTMLElement = document.body): HTMLElement {
+  const div = document.createElement('div');
+
+  container.appendChild(div);
+
+  return div;
+}
+
+/**
+ * 移除一个 DOM
+ * @param dom
+ */
+export function removeDom(dom: HTMLElement) {
+  const parent = dom.parentNode;
+
+  if (parent) {
+    parent.removeChild(dom);
+  }
+}

__tests__/utils/index.ts

@@ -0,0 +1,2 @@
+export { createDiv, removeDom } from './dom';
+export { delay } from './delay';

package.json

@@ -3,10 +3,10 @@
   "version": "0.2.0",
   "description": "UI components for AntV G.",
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "unpkg": "dist/gui.min.js",
-  "types": "lib/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -20,10 +20,7 @@
     "lint": "eslint ./src/**/*.ts ./__tests__/**/*.ts && prettier ./src ./__tests__ --check ",
     "fix": "eslint ./src/**/*.ts ./__tests__/**/*.ts --fix && prettier ./src ./__tests__ --write ",
     "test": "jest",
-    "build:umd": "rimraf ./dist && rollup -c && npm run size",
-    "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib",
-    "build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm",
-    "build": "run-p build:*",
+    "build": "father-build & limit-size",
     "ci": "run-s lint test build",
     "prepublishOnly": "npm run ci",
     "prepare": "husky install"
@@ -35,45 +32,47 @@
     "GUI"
   ],
   "dependencies": {
-    "@antv/g": "^3.4.10",
-    "@antv/g-canvas": "^0.5.10",
-    "@antv/util": "^2.0.13"
+    "@antv/g": "^1.0.0-alpha.0",
+    "@antv/g-canvas": "^1.0.0-alpha.0",
+    "@antv/util": "^2.0.13",
+    "svg-path-parser": "^1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^12.0.1",
     "@types/jest": "^26.0.20",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.19.0",
+    "babel-polyfill": "^6.26.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.3.1",
+    "father-build": "^1.19.6",
     "husky": "^5.0.9",
     "jest": "^26.6.3",
+    "jest-electron": "^0.1.11",
     "limit-size": "^0.1.4",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.39.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-uglify": "^6.0.4",
     "ts-jest": "^26.5.1",
     "tslib": "^2.2.0",
     "typescript": "^4.1.5"
   },
   "jest": {
+    "runner": "jest-electron/runner",
+    "testEnvironment": "jest-electron/environment",
+    "testTimeout": 30000,
     "preset": "ts-jest",
     "collectCoverage": true,
     "testRegex": "(/__tests__/.*\\.(test|spec))\\.ts$",
     "collectCoverageFrom": [
       "src/**/*.ts"
-    ],
-    "testEnvironment": "node"
+    ]
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/index.ts

@@ -1 +1,5 @@
-export * from './ui';
+// ui
+export * from './ui';
+
+// 方法
+export { svg2marker } from './util';

src/types.ts

@@ -0,0 +1 @@
+export { ShapeAttrs, ShapeCfg, CustomElement, DisplayObject } from '@antv/g';

src/ui/arrow/index.ts

@@ -1,4 +1,4 @@
-import { ArrowOptions  } from './types';
+import { ArrowOptions } from './types';
 
 export { ArrowOptions };
 

src/ui/axis/index.ts

@@ -1,4 +1,4 @@
-import { AxisOptions  } from './types';
+import { AxisOptions } from './types';
 
 export { AxisOptions };
 

src/ui/button/index.ts

@@ -1,4 +1,4 @@
-import { ButtonOptions  } from './types';
+import { ButtonOptions } from './types';
 
 export { ButtonOptions };