fix: 调整一些细节

antvis · Oct 9, 2021 · f79664a · f79664a
1 parent 95ff644
commit f79664a
Show file tree

Hide file tree

Showing 17 changed files with 256 additions and 183 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -5,16 +5,10 @@ module.exports = {
   collectCoverage: false,
   collectCoverageFrom: [
     'packages/*/src/**/*.{ts,tsx,js}',
-    '!**/node_modules/**'
+    '!**/node_modules/**',
   ],
   testRegex: '/test/.*\\.test\\.tsx?$',
-  moduleFileExtensions: [
-    'ts',
-    'tsx',
-    'js',
-    'json'
-  ],
   transform: {
-    "\\.(less|css)$": 'jest-less-loader'
-  }
+    '\\.(less|css)$': 'jest-less-loader',
+  },
 };
diff --git a/packages/f2-next/src/base/component.ts b/packages/f2-next/src/base/component.ts
@@ -6,7 +6,7 @@ class Component {
   context: any;
   refs: {
     [key: string]: any;
-  }
+  };
   container: any;
   layout: Layout;
   updater: any;
@@ -33,22 +33,20 @@ class Component {
     this.updater = updater;
     this.state = {};
     this.animate = animate;
+    this.__shouldRender = true;
   }
   init({ container, layout }) {
     this.layout = layout;
     this.container = container;
   }
   // TODO beforeMount
-  willMount() {
-  }
+  willMount() {}
   // TODO mounted
-  mount() {
-  }
+  mount() {}
   setState(partialState) {
     this.updater.enqueueSetState(this, partialState);
   }
-  beforeUpdate() {
-  }
+  beforeUpdate() {}
   update(props: any) {
     this.__props = props;
     this.props = props;

diff --git a/packages/f2-next/src/canvas/index.ts b/packages/f2-next/src/canvas/index.ts
@@ -9,20 +9,35 @@ import { px2hd } from '../util';
 import { createUpdater } from './updater';
 
 interface ChartUpdateProps {
-  pixelRatio?: number,
-  width?: number | string,
-  height?: number | string,
-  padding?: (number | string)[],
-  animate?: boolean,
-  children?: any
+  pixelRatio?: number;
+  width?: number | string;
+  height?: number | string;
+  padding?: (number | string)[];
+  animate?: boolean;
+  children?: any;
 }
 
 interface ChartProps extends ChartUpdateProps {
-  context: any,
+  context: any;
 }
 
 interface IF2Canvas {
-  container: any; 
+  container: any;
+}
+
+function measureText(context: CanvasRenderingContext2D) {
+  return (text: string, font) => {
+    const {
+      fontSize = 12,
+      fontFamily = 'normal',
+      fontStyle = 'normal',
+      fontWeight = 'normal',
+      fontVariant = 'normal',
+    } = this.px2hd(font);
+
+    context.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`;
+    return context.measureText(text);
+  };
 }
 
 // 顶层Canvas标签
@@ -35,7 +50,14 @@ class Canvas extends Component implements IF2Canvas {
 
   constructor(props: ChartProps) {
     super(props);
-    const { context, pixelRatio, width, height, animate = true, children } = props;
+    const {
+      context,
+      pixelRatio,
+      width,
+      height,
+      animate = true,
+      children,
+    } = props;
     this.context = context;
 
     // 创建G的canvas
@@ -46,21 +68,36 @@ class Canvas extends Component implements IF2Canvas {
       height,
     });
 
-    const {
-      width: canvasWidth,
-      height: canvasHeight
-    } = canvas._attrs;
+    const { width: canvasWidth, height: canvasHeight } = canvas._attrs;
 
     // 初始化默认的布局
     const layout = new Layout({
       width: canvasWidth,
-      height: canvasHeight
+      height: canvasHeight,
     });
 
     const updater = createUpdater(this);
 
-    const componentTree = createComponentTree(children, { canvas: this, width: canvasWidth, height: canvasHeight, context, layout });
-    const component = new Container({ children: componentTree, animate }, {}, updater);
+    const global = {
+      width: canvasWidth,
+      height: canvasHeight,
+      context,
+      px2hd,
+      measureText: measureText(context),
+    };
+
+    const componentTree = createComponentTree(children, {
+      canvas: this,
+      width: canvasWidth,
+      height: canvasHeight,
+      context,
+      layout,
+    });
+    const component = new Container(
+      { children: componentTree, animate },
+      {},
+      updater
+    );
     component.init({ layout, container: canvas });
 
     this.canvas = canvas;
@@ -118,18 +155,15 @@ class Canvas extends Component implements IF2Canvas {
     // 只处理数据，和children的变化
     const { children } = props;
 
-    const {
+    const { width, height, context } = canvas._attrs;
+
+    const componentTree = createComponentTree(children, {
+      canvas: this,
       width,
       height,
       context,
-    } = canvas._attrs;
-
-    const componentTree = createComponentTree(children, { canvas: this, width, height, context, layout });
-
-
-    // if (equal(this.componentTree, componentTree)) {
-    //   return;
-    // }
+      layout,
+    });
 
     component.update({ children: componentTree });
     this.render();
@@ -140,21 +174,7 @@ class Canvas extends Component implements IF2Canvas {
     component.destroy();
   }
 
-  px2hd = px2hd
-
-  measureText(text, font) {
-    const { context } = this;
-    const {
-      fontSize = 12,
-      fontFamily = 'normal',
-      fontStyle = 'normal',
-      fontWeight = 'normal',
-      fontVariant = 'normal',
-    } = this.px2hd(font);
-
-    context.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`;
-    return context.measureText(text);
-  }
+  px2hd = px2hd;
 }
 
 export default Canvas;
diff --git a/packages/f2-next/src/canvas/updater.ts b/packages/f2-next/src/canvas/updater.ts
@@ -1,4 +1,3 @@
-
 function createUpdater(canvas) {
   const setStateQueue = [];
   const renderQueue = [];
@@ -16,7 +15,7 @@ function createUpdater(canvas) {
       }
 
       // 如果stateChange是一个方法，也就是setState的第二种形式
-      if (typeof state === "function") {
+      if (typeof state === 'function') {
         Object.assign(
           component.state,
           state(component.prevState, component.props)

diff --git a/packages/f2-next/src/chart/index.ts b/packages/f2-next/src/chart/index.ts
@@ -87,6 +87,7 @@ class Chart
       let { left, top, width, height } = coordLayout;
       // @ts-ignore
       const childLayout = component.getLayout();
+      if (!childLayout) return;
       const { position, width: childWidth, height: childHeight } = childLayout;
       // @ts-ignore
       component.setLayout({

diff --git a/packages/f2-next/src/children.ts b/packages/f2-next/src/children.ts
@@ -0,0 +1,8 @@
+import { map, extendMap } from './util';
+
+const Children = {
+  map,
+  toArray: extendMap,
+};
+
+export default Children;