feat: add dom util (#108)

* feat: add createDOM and modifyCSS

* chore: auto fix lint error

* feat: memoize with lru cache, and add cache on toRGB api

* chore: fix lint

__tests__/unit/dom/index.spec.ts

@@ -0,0 +1,26 @@
+import { createDOM, modifyCSS } from '../../../src';
+
+describe('dom', function () {
+  it('createDOM', () => {
+    const dom = createDOM(`<div id="test">createDOM by string</div>`);
+    expect(dom).not.toBeUndefined();
+    expect(dom.innerHTML).toBe('createDOM by string');
+  });
+
+  it('modifyCSS', () => {
+    const dom = createDOM(`<div id="test">modifyCSS dom</div>`);
+
+    expect(dom.style.color).toBe('');
+    expect(dom.style.fontSize).toBe('');
+
+    modifyCSS(dom, {
+      color: 'red',
+      fontSize: '20px',
+    });
+
+    expect(dom.style.color).toBe('red');
+    expect(dom.style.fontSize).toBe('20px');
+
+    expect(modifyCSS(null, { color: 'red' })).toBeUndefined();
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/util",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "license": "MIT",
   "sideEffects": false,
   "main": "lib/index.js",
@@ -90,6 +90,7 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
+    "flru": "^1.0.2",
     "gl-matrix": "^3.3.0",
     "tslib": "^2.3.1"
   },

src/color/index.ts

@@ -1,5 +1,4 @@
 export { rgb2arr } from './rgb2arr';
 export { gradient } from './gradient';
-// todo 没有 memoize
 export { toRGB } from './torgb';
 export { toCSSGradient } from './tocssgradient';

src/color/torgb.ts

@@ -1,3 +1,4 @@
+import { memoize } from '../lodash';
 import { arr2rgb } from './arr2rgb';
 
 const RGB_REG = /rgba?\(([\s.,0-9]+)\)/;
@@ -21,7 +22,7 @@ let iEl: HTMLElement;
  * @param {color} color 颜色
  * @return 将颜色转换到 '#ffffff' 的格式
  */
-export function toRGB(color: string): string {
+function toRGBString(color: string): string {
   // 如果已经是 rgb的格式
   if (color[0] === '#' && color.length === 7) {
     return color;
@@ -43,3 +44,10 @@ export function toRGB(color: string): string {
 
   return rst;
 }
+
+/**
+ * export with memoize.
+ * @param color
+ * @returns
+ */
+export const toRGB = memoize(toRGBString, (color) => color, 256);

src/dom/create-dom.ts

@@ -0,0 +1,15 @@
+/**
+ * Create DOM from a html string.
+ * @param str
+ * @returns
+ */
+export function createDOM(str: string): HTMLElement {
+  const container = document.createElement('div');
+  container.innerHTML = str;
+
+  const dom = container.childNodes[0];
+  if (dom && container.contains(dom)) {
+    container.removeChild(dom);
+  }
+  return dom as HTMLElement;
+}

src/dom/index.ts

@@ -0,0 +1,2 @@
+export { createDOM } from './create-dom';
+export { modifyCSS } from './modify-css';

src/dom/modify-css.ts

@@ -0,0 +1,14 @@
+/**
+ * Modify the CSS of a DOM.
+ * @param dom
+ * @param css
+ * @returns
+ */
+export function modifyCSS(dom: HTMLElement | null | undefined, css: { [key: string]: any }): HTMLElement {
+  if (!dom) return;
+
+  Object.keys(css).forEach((key) => {
+    dom.style[key] = css[key];
+  });
+  return dom;
+}

src/index.ts

@@ -3,3 +3,4 @@ export * from './matrix';
 export * from './path';
 export * from './lodash';
 export * from './math';
+export * from './dom';

src/lodash/memoize.ts

@@ -1,12 +1,14 @@
+import flru from 'flru';
 import isFunction from './is-function';
 
 /**
  * _.memoize(calColor);
  * _.memoize(calColor, (...args) => args[0]);
  * @param f
  * @param resolver
+ * @param maxSize lru maxSize
  */
-export default (f: Function, resolver?: (...args: any[]) => string) => {
+export default (f: Function, resolver?: (...args: any[]) => string, maxSize = 128) => {
   if (!isFunction(f)) {
     throw new TypeError('Expected a function');
   }
@@ -25,7 +27,7 @@ export default (f: Function, resolver?: (...args: any[]) => string) => {
     return result;
   };
 
-  memoized.cache = new Map();
+  memoized.cache = flru(maxSize);
 
   return memoized;
 };

src/matrix/angle-to.ts

@@ -0,0 +1,24 @@
+import { vec2 } from 'gl-matrix';
+import { direction } from './direction';
+
+/**
+ * 二维向量 v1 到 v2 的夹角
+ * @param v1
+ * @param v2
+ * @param direct
+ */
+export function angleTo(v1: [number, number], v2: [number, number], direct?: boolean): number {
+  const ang = vec2.angle(v1, v2);
+  const angleLargeThanPI = direction(v1, v2) >= 0;
+  if (direct) {
+    if (angleLargeThanPI) {
+      return Math.PI * 2 - ang;
+    }
+    return ang;
+  }
+
+  if (angleLargeThanPI) {
+    return ang;
+  }
+  return Math.PI * 2 - ang;
+}

src/matrix/direction.ts

@@ -0,0 +1,9 @@
+/**
+ * 向量 v1 到 向量 v2 夹角的方向
+ * @param  {Array} v1 向量
+ * @param  {Array} v2 向量
+ * @return {Boolean} >= 0 顺时针 < 0 逆时针
+ */
+export function direction(v1: number[], v2: number[]): number {
+  return v1[0] * v2[1] - v2[0] * v1[1];
+}

src/matrix/index.ts

@@ -1,108 +1,7 @@
 /**
  * @description 扩展方法，提供 gl-matrix 为提供的方法
- * */
-import { mat3, vec2 } from 'gl-matrix';
-
-type mat3Type = [number, number, number, number, number, number, number, number, number];
-
-function leftTranslate(out, a, v) {
-  const transMat: mat3Type = [0, 0, 0, 0, 0, 0, 0, 0, 0];
-  mat3.fromTranslation(transMat, v);
-  return mat3.multiply(out, transMat, a);
-}
-
-function leftRotate(out, a, rad) {
-  const rotateMat: mat3Type = [0, 0, 0, 0, 0, 0, 0, 0, 0];
-  mat3.fromRotation(rotateMat, rad);
-  return mat3.multiply(out, rotateMat, a);
-}
-
-function leftScale(out, a, v) {
-  const scaleMat: mat3Type = [0, 0, 0, 0, 0, 0, 0, 0, 0];
-  mat3.fromScaling(scaleMat, v);
-  return mat3.multiply(out, scaleMat, a);
-}
-
-function leftMultiply(out, a, a1) {
-  return mat3.multiply(out, a1, a);
-}
-/**
- * 根据 actions 来做 transform
- * @param m
- * @param actions
- */
-export function transform(m: number[], actions: any[][]) {
-  const matrix = m ? [].concat(m) : [1, 0, 0, 0, 1, 0, 0, 0, 1];
-
-  for (let i = 0, len = actions.length; i < len; i++) {
-    const action = actions[i];
-    switch (action[0]) {
-      case 't':
-        leftTranslate(matrix, matrix, [action[1], action[2]]);
-        break;
-      case 's':
-        leftScale(matrix, matrix, [action[1], action[2]]);
-        break;
-      case 'r':
-        leftRotate(matrix, matrix, action[1]);
-        break;
-      case 'm':
-        leftMultiply(matrix, matrix, action[1]);
-        break;
-      default:
-        break;
-    }
-  }
-
-  return matrix;
-}
-
-/**
- * 向量 v1 到 向量 v2 夹角的方向
- * @param  {Array} v1 向量
- * @param  {Array} v2 向量
- * @return {Boolean} >= 0 顺时针 < 0 逆时针
- */
-export function direction(v1: number[], v2: number[]): number {
-  return v1[0] * v2[1] - v2[0] * v1[1];
-}
-
-/**
- * 二维向量 v1 到 v2 的夹角
- * @param v1
- * @param v2
- * @param direct
- */
-export function angleTo(v1: [number, number], v2: [number, number], direct?: boolean): number {
-  const ang = vec2.angle(v1, v2);
-  const angleLargeThanPI = direction(v1, v2) >= 0;
-  if (direct) {
-    if (angleLargeThanPI) {
-      return Math.PI * 2 - ang;
-    }
-    return ang;
-  }
-
-  if (angleLargeThanPI) {
-    return ang;
-  }
-  return Math.PI * 2 - ang;
-}
-
-/**
- * 计算二维向量的垂直向量
- * @param out
- * @param v
- * @param flag
- */
-export function vertical(out: number[], v: number[], flag: boolean): number[] {
-  if (flag) {
-    out[0] = v[1];
-    out[1] = -1 * v[0];
-  } else {
-    out[0] = -1 * v[1];
-    out[1] = v[0];
-  }
-
-  return out;
-}
+ **/
+export { transform } from './transform';
+export { angleTo } from './angle-to';
+export { direction } from './direction';
+export { vertical } from './vertical';

src/matrix/transform.ts

@@ -0,0 +1,55 @@
+import { mat3 } from 'gl-matrix';
+
+type mat3Type = [number, number, number, number, number, number, number, number, number];
+
+function leftTranslate(out, a, v) {
+  const transMat: mat3Type = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  mat3.fromTranslation(transMat, v);
+  return mat3.multiply(out, transMat, a);
+}
+
+function leftRotate(out, a, rad) {
+  const rotateMat: mat3Type = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  mat3.fromRotation(rotateMat, rad);
+  return mat3.multiply(out, rotateMat, a);
+}
+
+function leftScale(out, a, v) {
+  const scaleMat: mat3Type = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  mat3.fromScaling(scaleMat, v);
+  return mat3.multiply(out, scaleMat, a);
+}
+
+function leftMultiply(out, a, a1) {
+  return mat3.multiply(out, a1, a);
+}
+/**
+ * 根据 actions 来做 transform
+ * @param m
+ * @param actions
+ */
+export function transform(m: number[], actions: any[][]) {
+  const matrix = m ? [].concat(m) : [1, 0, 0, 0, 1, 0, 0, 0, 1];
+
+  for (let i = 0, len = actions.length; i < len; i++) {
+    const action = actions[i];
+    switch (action[0]) {
+      case 't':
+        leftTranslate(matrix, matrix, [action[1], action[2]]);
+        break;
+      case 's':
+        leftScale(matrix, matrix, [action[1], action[2]]);
+        break;
+      case 'r':
+        leftRotate(matrix, matrix, action[1]);
+        break;
+      case 'm':
+        leftMultiply(matrix, matrix, action[1]);
+        break;
+      default:
+        break;
+    }
+  }
+
+  return matrix;
+}

src/matrix/vertical.ts

@@ -0,0 +1,17 @@
+/**
+ * 计算二维向量的垂直向量
+ * @param out
+ * @param v
+ * @param flag
+ */
+export function vertical(out: number[], v: number[], flag: boolean): number[] {
+  if (flag) {
+    out[0] = v[1];
+    out[1] = -1 * v[0];
+  } else {
+    out[0] = -1 * v[1];
+    out[1] = v[0];
+  }
+
+  return out;
+}

src/path/util/path-length-factory.ts

@@ -25,8 +25,8 @@ export function pathLengthFactory(
   let mx = 0;
   let my = 0;
   let seg;
-  let MIN = [];
-  let MAX = [];
+  const MIN = [];
+  const MAX = [];
   let length = 0;
   let min = { x: 0, y: 0 };
   let max = min;

src/path/util/segment-arc-factory.ts

@@ -145,7 +145,7 @@ export function segmentArcFactory(
   let cur: [number, number] = [x, y];
   let t = 0;
   let POINT = { x: 0, y: 0 };
-  let POINTS = [{ x, y }];
+  const POINTS = [{ x, y }];
 
   if (distanceIsNumber && distance <= 0) {
     POINT = { x, y };