feat: 添加统一的layout处理逻辑

antvis · Sep 7, 2021 · c657b6d · c657b6d
1 parent af88ed3
commit c657b6d
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 45 deletions.
diff --git a/packages/f2-next/src/chart/index.ts b/packages/f2-next/src/chart/index.ts
@@ -7,6 +7,7 @@ import ThemeMixin from '../mixins/theme';
 import CoordMixin from '../mixins/coord';
 import ScaleMixin from '../mixins/scale';
 import defaultTheme from './theme';
+import Layout from '../base/layout';
 
 interface Point {
   x: number;
@@ -73,6 +74,56 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
     return childComponent;
   }
 
+  layoutCoord() {
+    const { components } = this;
+    if (!components || !components.length) {
+      return;
+    }
+    const { layout } = this;
+    const coordLayout = layout.clone();
+
+    components.forEach(component => {
+      // @ts-ignore
+      if (!component || !component.getLayout) {
+        return;
+      }
+      let { left, top, width, height } = coordLayout;
+      // @ts-ignore
+      const childLayout = component.getLayout();
+      const { position, width: childWidth, height: childHeight } = childLayout;
+      // @ts-ignore
+      component.setLayout({ left, top, width: childWidth - left, height: childHeight - top });
+
+      // 计算剩余的占位
+      // 占用宽度
+      switch (position) {
+        case 'left':
+          left += childWidth;
+          width -= childWidth;
+          break;
+        case 'right':
+          width -= childWidth;
+          break;
+        case 'top':
+          top += childHeight;
+          height -= childHeight;
+          break;
+        case 'bottom':
+          height -= childHeight;
+          break;
+      }
+      coordLayout.update({ left, top, width, height });
+    });
+
+    // 更新coord
+    this.coord.update({
+      left: coordLayout.left,
+      top: coordLayout.top,
+      width: coordLayout.width,
+      height: coordLayout.height,
+    });
+  }
+
   willMount() {
     const { props } = this;
     const { scale } = props;
@@ -90,15 +141,16 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
     // 初始化默认主题
     this.theme = canvas.px2hd(mix({}, defaultTheme, theme));
     const { paddingLeft, paddingTop, paddingRight, paddingBottom } = this.theme;
-
+
+    this.layout = new Layout({
+      left: layout.left + paddingLeft,
+      top: layout.top + paddingTop,
+      width: layout.width - paddingLeft - paddingRight,
+      height: layout.height -paddingTop - paddingBottom,
+    });
+
     // 创建坐标系
-    this.coord = this.createCoord({
-      left: paddingLeft,
-      top: paddingTop,
-      right: paddingRight,
-      bottom: paddingBottom,
-      ...coord,
-    }, layout);
+    this.coord = this.createCoord(coord, layout);
     // 创建scale
     this.updateScales();
     super.mount();
@@ -151,6 +203,11 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
       return component.getYScale();
     });
   }
+
+  render() {
+    this.layoutCoord();
+    super.render();
+  }
 }
 
 // 多继承

diff --git a/packages/f2-next/src/components/axis/withAxis.tsx b/packages/f2-next/src/components/axis/withAxis.tsx
@@ -2,6 +2,7 @@ import { mix } from '@antv/util';
 import { jsx } from '../../jsx';
 import Component from '../../base/component';
 import Chart from '../../chart';
+import Layout from '../../base/layout';
 
 export default View => {
   return class Axis extends Component {
@@ -46,8 +47,6 @@ export default View => {
       }
       const { theme } = chart;
       this.style = canvas.px2hd(mix({}, theme.axis, props.style));
-
-      this._updateLayout();
     }
 
     _getDimType() {
@@ -98,7 +97,7 @@ export default View => {
       return dimType === 'x' ? 'bottom' : 'left';
     }
 
-    _updateLayout() {
+    getLayout() {
       const { chart } = this;
       const { coord } = chart;
       const { isPolar } = coord;
@@ -123,24 +122,12 @@ export default View => {
       const position = this._getPosition();
 
       // 直角坐标系下
-      const { width: axisWidth, height: axisHeight } = this.getMaxBBox();
-      const { left, top, width, height } = coord;
-      switch (position) {
-        case 'left':
-          coord.update({ left: left + axisWidth, width: width - axisWidth });
-          break;
-        case 'top':
-          coord.update({ top: top + axisHeight, height: height - axisHeight });
-          break;
-        case 'right':
-          coord.update({ width: width - axisWidth });
-          break;
-        case 'bottom':
-          coord.update({ height: height - axisHeight });
-          break;
-        default:
-          break;
-      }
+      const { width, height } = this.getMaxBBox();
+      return { position, width, height };
+    }
+
+    setLayout(layout) {
+      this.layout = new Layout(layout);
     }
 
     getTicks() {

diff --git a/packages/f2-next/src/components/legend/legendView.tsx b/packages/f2-next/src/components/legend/legendView.tsx
@@ -2,13 +2,15 @@ import { jsx } from '../../jsx';
 
 export default (props) => {
   const { items, layout } = props;
-  const { width } = layout;
+  const { left, top, width } = layout;
   return (
     <group style={{
+      left,
+      top,
       width,
       flexDirection: 'row',
       flexWrap: 'wrap',
-      paddingBottom: '20px'
+      padding: [0, '6px', '20px', 0],
     }}>
       {
         items.map(item => {
@@ -19,7 +21,7 @@ export default (props) => {
               flexDirection: 'row',
               alignItems: 'center',
               justifyContent: 'center',
-              padding: [0, 0, '10px', '10px']
+              padding: ['6px', 0, 0, '6px'],
             }}>
               <circle
                 style={{

diff --git a/packages/f2-next/src/components/legend/withLegend.tsx b/packages/f2-next/src/components/legend/withLegend.tsx
@@ -1,22 +1,23 @@
 import { jsx, render, renderJSXElement } from '../../jsx';
 import Component from '../../base/component';
+import Layout from '../../base/layout';
 
 export default View => {
   return class Legend extends Component {
 
     chart: any;
 
-    mount() {
-      const { chart, container } = this;
-      const { coord } = chart;
+    getLayout() {
+      const { container, props } = this;
+      const { position = 'top' } = props;
       const shape = render(renderJSXElement(this.render()), container);
-      const bbox = shape.getBBox();
+      const { height, width } = shape.get('attrs');
       shape.remove();
-      const { top, height } = coord;
-      coord.update({
-        top: top + bbox.height,
-        height: height - bbox.height,
-      });
+      return { position, width, height };
+    }
+
+    setLayout(layout) {
+      this.layout = new Layout(layout);
     }
 
     getItems() {
@@ -25,15 +26,16 @@ export default View => {
     }
 
     render() {
-      const { props } = this;
+      const { layout, props } = this;
       // 自定义items
       if (props.items) {
         return <View { ...props } />
       }
       const items = this.getItems();
       return <View
-        items={ items }
         { ...props }
+        items={ items }
+        layout={ layout }
       />
     }
   }

diff --git a/packages/f2-next/test/components/interval/interval.test.tsx b/packages/f2-next/test/components/interval/interval.test.tsx
@@ -42,11 +42,11 @@ describe("Interval Chart", () => {
             // sold: {},
           }}
         >
+          <Legend />
           <Axis field="genre"/>
-          {/* <Axis field="genre" position="top"/> */}
           <Axis field="sold" />
+          {/* <Axis field="genre" position="top"/> */}
           {/* <Axis field="sold" position="right" /> */}
-          <Legend />
           <Interval
             x="genre"
             y="sold"