feat: 组件嵌套和fragment处理

packages/components/src/axis/axisView.tsx

@@ -1,14 +1,17 @@
 import { jsx } from '@ali/f2-jsx';
 import Bottom from './bottom';
+import Right from './right';
 import Left from './left';
 
 export default (props: any) => {
   const { position } = props;
 
-  if (position === 'bottom') {
-    return (
-      <Bottom { ...props } />
-    );
+  switch (position) {
+    case 'bottom':
+      return <Bottom { ...props } />
+      case 'right':
+        return <Right { ...props } />
+    default:
+      return <Left { ...props } />
   }
-  return <Left { ...props } />
 }

packages/components/src/axis/right.tsx

@@ -0,0 +1,77 @@
+import { jsx } from '@ali/f2-jsx';
+
+export default (props: any) => {
+  const { plot, labelOffset, ticks, line, label, tickLine, grid } = props;
+  const { tl, tr, bl, br } = plot;
+
+  return (
+    <group>
+      {
+        line === false ?
+          null
+        :
+          <line attrs={{
+            x1: tr.x,
+            y1: tr.y,
+            x2: br.x,
+            y2: br.y,
+            stroke: '#EDEDED',
+            lineWidth: '1px',
+            ...line,
+          }} />
+      }
+      {
+        ticks.map((tick, index) => {
+          const { x, y, text } = tick;
+          return (
+            <group>
+              {
+                label === false ?
+                  null
+                :
+                  <text attrs={{
+                    x: x + labelOffset,
+                    y,
+                    textAlign: 'left',
+                    textBaseline: 'middle',
+                    text,
+                    fill: '#CCCCCC',
+                    fontSize: '20px',
+                    ...label,
+                  }} />
+              }
+              {
+                grid === false ?
+                  null
+                :
+                  <line attrs={{
+                    x1: tl.x,
+                    y1: y,
+                    x2: tr.x,
+                    y2: y,
+                    stroke: '#EDEDED',
+                    lineWidth: '2px',
+                    ...grid,
+                  }} />
+              }
+              {
+                tickLine === false ?
+                  null
+                :
+                  <line attrs={{
+                    x1: x + (tickLine && tickLine.length || 0),
+                    y1: y,
+                    x2: x,
+                    y2: y,
+                    stroke: '#EDEDED',
+                    lineWidth: '2px',
+                    ...tickLine,
+                  }} />
+              }
+            </group>
+          );
+        })
+      }
+    </group>
+  );
+}

packages/components/src/axis/withAxis.tsx

@@ -135,7 +135,7 @@ export default View => {
       const points = ticks.map(tick => {
         const point = coord.convertPoint({
           [dimType]: tick.value,
-          [otherDim]: 0,
+          [otherDim]: position === 'top' || position === 'right' ? 1 : 0,
         });
         return {
           ...tick,

packages/components/src/chart/comboComponent.ts

@@ -1,5 +1,5 @@
 import { render, renderJSXElement } from '@ali/f2-jsx';
-import { map, each } from '@ali/f2x-util';
+import { map, mapTwo } from '@ali/f2x-util';
 import Component from '../component';
 
 class ComboComponent extends Component {
@@ -10,12 +10,11 @@ class ComboComponent extends Component {
 
     const { children } = props;
     const components = map(children, (child: JSX.Element) => {
-      // 要对react生成的ref单独处理
-      const { type, props, key, ref } = child;
-      // 只处理组件，不支持标签
-      if (typeof type !== 'function') {
+      if (!child) {
         return null;
       }
+      // 要对react生成的ref单独处理
+      const { type, props, key, ref } = child;
 
       const component = this.createComponent(type, props);
       // 设置ref
@@ -32,42 +31,53 @@ class ComboComponent extends Component {
     super.init(chart, container);
     const { components } = this;
     map(components, (component: Component) => {
+      if (!component) {
+        return;
+      }
       component.init(chart, container.addGroup());
     });
   }
 
   createComponent(Constructor: any, props: any): Component {
-    // class 形式的组件
-    if (Constructor.prototype && Constructor.prototype.isF2Component) {
-      return new Constructor(props);
-    }
+    // 这里 一定是 F2 Component 了
+    return new Constructor(props);
+    // // class 形式的组件
+    // if (Constructor.prototype && Constructor.prototype.isF2Component) {
+    // }
     // function 形式组件, 统一用ComboComponent处理
-    return new ComboComponent(props);
+    // return new ComboComponent(props);
   }
 
-  render() {
-    const { components, chart } = this;
+  _getAppendProps() {
+    const { chart } = this;
     const width = chart.get('width');
     const height = chart.get('height');
     const plot = chart.get('plot');
 
     // 把常用的值append到props中去
-    const appendProps = {
+    return {
       width,
       height,
       plot,
     }
+  }
+
+  render() {
+    const { components } = this;
+    const appendProps = this._getAppendProps();
 
     map(components, (component: Component) => {
+      if (!component) {
+        return;
+      }
       this.renderComponent(component, appendProps);
     });
 
     return null;
   }
 
   renderComponent(component: Component, appendProps) {
-    // @ts-ignore
-    const { container, __shape } = component;
+    const { __shape, container } = component;
     // 先把之前的图形清除掉
     if (__shape) {
       __shape.remove(true);
@@ -83,18 +93,40 @@ class ComboComponent extends Component {
 
     // 生成G的节点树
     const shape = render(element, container);
-    // @ts-ignore
     component.__shape = shape;
   }
 
   update(props: any) {
+    const { components } = this;
+    const appendProps = this._getAppendProps();
     // 只处理数据和children的变化
     const { children } = props;
-    const { components } = this;
-    each(components, children, (component: any, child: any) => {
-      const { props } = child;
+    this.components = mapTwo(components, children, (component: Component, child: JSX.Element) => {
+      if (!child) {
+        component.destroy();
+        return null;
+      }
+      const { type, props } = child;
+      if (!component) {
+        const newComponent = this.createComponent(type, props);
+        // newComponent.init(chart, )
+        // TODO
+        this.renderComponent(newComponent, appendProps);
+        return newComponent;
+      }
+
+      // diff 判断
+      if (true) {
+        component.update(props);
+      }
+
+      console.log(component.props.f, props.f, component.props.f === props.f)
+
+      // console.log(type, props);
+      // @ts-ignore
+      // console.log(component instanceof type)
       // TODO：还需要处理创建或销毁的逻辑
-      component.update(props);
+
     });
 
     this.render();
@@ -103,6 +135,9 @@ class ComboComponent extends Component {
   destroy() {
     const { components } = this;
     map(components, (component: Component) => {
+      if (!component) {
+        return;
+      }
       component.destroy();
     });
   }

packages/components/src/chart/createComponentTree.ts

@@ -0,0 +1,38 @@
+import { map } from '@ali/f2x-util';
+import ComboComponent from './comboComponent';
+
+function createComponentTree(element: JSX.Element) {
+  if (!element) return element;
+  const { type, key, ref, props } = element;
+  const { children } = props;
+
+  // 如果有children， 统一处理成 ComboComponent
+  if (type === 'fragment' && children) {
+    props.children = map(children, (child: JSX.Element) => {
+      return createComponentTree(child);
+    });
+    return {
+      type: ComboComponent,
+      key,
+      ref,
+      props,
+    }
+  }
+  // 其他标签都不处理
+  if (typeof type !== 'function') {
+    return null;
+  }
+  // 如果已经是F2 component了，直接返回
+  if (type.prototype && type.prototype.isF2Component) {
+    return element;
+  }
+  // 其他情况 说明是 function component, 直接执行
+  const newElement = type(element.props);
+  return createComponentTree(newElement);
+}
+
+export default (children: JSX.Element[]) => {
+  return map(children, (child: JSX.Element) => {
+    return createComponentTree(child);
+  });
+}

packages/components/src/chart/index.ts

@@ -1,15 +1,19 @@
 import F2 from '@antv/f2';
-import { batch2hd } from '@ali/f2x-util';
+import { batch2hd, map } from '@ali/f2x-util';
 import ComboComponent from './comboComponent';
+import createComponentTree from './createComponentTree';
 
-interface ChartProps {
+interface ChartUpdateProps {
   pixelRatio?: number,
   width?: number | string,
   height?: number | string,
   data: any,
   padding?: (number | string)[],
   animate?: boolean,
   children?: any,
+}
+
+interface ChartProps extends ChartUpdateProps {
   context: any,
 }
 
@@ -24,7 +28,9 @@ class Chart {
     const chart = new F2.Chart({
       context,
       pixelRatio,
+      // @ts-ignore
       width,
+      // @ts-ignore
       height,
       animate,
       padding: batch2hd(padding) || [ 0, 0, 0, 0 ],
@@ -40,7 +46,9 @@ class Chart {
     const container = canvas.addGroup({
       zIndex: 40
     });
-    const component = new ComboComponent({ children });
+
+    const componentTree = createComponentTree(children);
+    const component = new ComboComponent({ children: componentTree });
     component.init(chart, container);
 
     // @ts-ignore
@@ -57,11 +65,12 @@ class Chart {
     chart.render();
   }
 
-  update(props: ChartProps) {
+  update(props: ChartUpdateProps) {
     const { chart, component } = this;
     // 只处理数据，和children的变化
     const { data, children } = props;
-    component.update({ children });
+    const componentTree = createComponentTree(children);
+    component.update({ children: componentTree });
     chart.get('canvas').draw();
   }
 

packages/components/src/component/index.ts

@@ -2,7 +2,12 @@ class Component {
   chart: any;
   container: any;
   props: any;
-  state: any;
+  // state: any;
+
+  /**
+   * @private
+   */
+  __shape: any;
   // actions: any;
 
   constructor(props: any) {

packages/components/src/geometry/withGeometry.tsx

@@ -40,7 +40,7 @@ export default View => {
       this._shapes = _shapes;
       this.geom = geom;
 
-      this._pressEvent();
+      // this._pressEvent();
     }
     _pressEvent() {
       const { chart, props, geom } = this;