PullRequest: 163 feat: canvas, chart 添加style 属性处理

Merge branch feat-style of :f2/f2-jsx.git into 0.3.x /f2/f2-jsx/pull_requests/163 Signed-off-by: ACERY1
antvis · Oct 22, 2021 · ee42267 · ee42267
2 parents dfc8234 + ada44d2
commit ee42267
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 55 deletions.
diff --git a/packages/f2-next/src/base/layout.ts b/packages/f2-next/src/base/layout.ts
@@ -66,6 +66,17 @@ class Layout {
       height,
     });
   }
+
+  static fromStyle(style) {
+    const { left, top, width, height, padding } = style;
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding;
+    return new Layout({
+      left: left + paddingLeft,
+      top: top + paddingTop,
+      width: width - paddingLeft - paddingRight,
+      height: height - paddingTop - paddingBottom,
+    });
+  }
 }
 
 export default Layout;

diff --git a/packages/f2-next/src/canvas/index.ts b/packages/f2-next/src/canvas/index.ts
@@ -6,7 +6,7 @@ import equal from '../base/equal';
 import Animation from './animation';
 import { px2hd as defaultPx2hd } from '../util';
 import { createUpdater } from './updater';
-import theme from '../theme';
+import defaultTheme from '../theme';
 import { renderChildren, renderComponent } from '../base/diff';
 
 interface ChartUpdateProps {
@@ -17,6 +17,8 @@ interface ChartUpdateProps {
   animate?: boolean;
   children?: any;
   px2hd: any;
+  theme: any;
+  style: any;
 }
 
 interface ChartProps extends ChartUpdateProps {
@@ -66,6 +68,8 @@ class Canvas extends Component implements IF2Canvas {
       height,
       animate = true,
       px2hd = defaultPx2hd,
+      theme: customTheme,
+      style: customStyle,
     } = props;
 
     // 创建G的canvas
@@ -78,22 +82,34 @@ class Canvas extends Component implements IF2Canvas {
 
     const { width: canvasWidth, height: canvasHeight } = canvas._attrs;
 
-    // 初始化默认的布局
-    const layout = new Layout({
+    const theme = px2hd({
+      ...defaultTheme,
+      ...customTheme,
+    });
+
+    const style = px2hd({
+      left: 0,
+      top: 0,
       width: canvasWidth,
       height: canvasHeight,
+      padding: theme.padding,
+      ...customStyle,
     });
 
+    const layout = Layout.fromStyle(style);
+
     // 组件更新器
     const updater = createUpdater(this);
 
     // 供全局使用的一些变量
     const componentContext = {
       root: this,
       canvas,
-      width: canvasWidth,
-      height: canvasHeight,
-      theme: px2hd(theme),
+      left: layout.left,
+      top: layout.top,
+      width: layout.width,
+      height: layout.height,
+      theme,
       px2hd,
       measureText: measureText(canvas, px2hd),
     };

diff --git a/packages/f2-next/src/chart/index.ts b/packages/f2-next/src/chart/index.ts
@@ -1,16 +1,12 @@
 import { mix, each, isNil } from '@antv/util';
-import { Scale } from '@antv/scale';
 import Component from '../base/component';
 import { applyMixins } from '../mixins';
 import CoordMixin from '../mixins/coord';
 import ScaleMixin from '../mixins/scale';
 import InteractionMixin from '../mixins/interaction';
 import Layout from '../base/layout';
 import Coord from '../coord';
-import equal from '../base/equal';
-import { map } from '../util';
 import Children from '../children';
-import Geometry from '../components/geometry';
 
 interface Point {
   x: number;
@@ -31,8 +27,10 @@ interface IChart {
 }
 
 // 统计图表
-class Chart extends Component
-  implements IChart, CoordMixin, ScaleMixin, InteractionMixin {
+class Chart
+  extends Component
+  implements IChart, CoordMixin, ScaleMixin, InteractionMixin
+{
   data: any;
   layout: Layout;
 
@@ -55,13 +53,13 @@ class Chart extends Component
 
   constructor(props, context?, updater?) {
     super(props, context, updater);
-
     const { data, coord: coordOption, scale, interactions = [] } = props;
-    const { width, height } = context;
 
-    const layout = new Layout({ width, height });
+    const style = this.getStyle(props, context);
+    // 显示范围
+    const layout = Layout.fromStyle(style);
     // 创建坐标系
-    const coord = this.createCoord(coordOption, { width, height });
+    const coord = this.createCoord(coordOption, layout);
     // 初始化scales
     const scaleController = this.createScaleController(data);
     // 创建交互事件控制器
@@ -75,7 +73,7 @@ class Chart extends Component
     });
 
     // 定义事件
-    interactions.forEach(interaction => {
+    interactions.forEach((interaction) => {
       const { type, ...cfg } = interaction;
       interactionController.createInteraction(type, cfg);
     });
@@ -89,8 +87,21 @@ class Chart extends Component
 
     // state
     this.state = {
-      zoomRange: [0, 1]
-    }
+      zoomRange: [0, 1],
+    };
+  }
+
+  private getStyle(props, context) {
+    const { theme, px2hd, left, top, width, height } = context;
+    const { style } = props;
+    return px2hd({
+      left,
+      top,
+      width,
+      height,
+      ...theme.chart,
+      ...style,
+    });
   }
 
   // 重置绘制大小
@@ -213,7 +224,7 @@ class Chart extends Component
   getGeometrys() {
     const { children } = this;
     const geometrys: Component[] = [];
-    Children.toArray(children).forEach(element => {
+    Children.toArray(children).forEach((element) => {
       if (!element) return false;
       const { component } = element;
       if (component && component.isGeometry) {
@@ -239,15 +250,15 @@ class Chart extends Component
 
   getXScales() {
     const geometrys = this.getGeometrys();
-    return geometrys.map(component => {
+    return geometrys.map((component) => {
       // @ts-ignore
       return component.getXScale();
     });
   }
 
   getYScales() {
     const geometrys = this.getGeometrys();
-    return geometrys.map(component => {
+    return geometrys.map((component) => {
       // @ts-ignore
       return component.getYScale();
     });
@@ -257,7 +268,7 @@ class Chart extends Component
     // this.resetCoord();
     const { props, layout, coord } = this;
     const { children, data } = props;
-    return Children.map(children, child => {
+    return Children.map(children, (child) => {
       return Children.cloneElement(child, {
         data,
         chart: this,
@@ -272,6 +283,6 @@ class Chart extends Component
 // 多继承
 applyMixins(Chart, [CoordMixin, ScaleMixin, InteractionMixin]);
 
-class ExportChart extends Chart { }
+class ExportChart extends Chart {}
 
 export default ExportChart;
diff --git a/packages/f2-next/src/theme.ts b/packages/f2-next/src/theme.ts
@@ -1,5 +1,3 @@
-
-
 const axis = {
   labelOffset: '15px',
   line: {
@@ -13,15 +11,15 @@ const axis = {
   grid: {
     stroke: '#E8E8E8',
     lineWidth: '1px',
-    lineDash: [ '4px' ]
-  }
+    lineDash: ['4px'],
+  },
 };
 
 const guide = {
   line: {
     style: {
       stroke: '#a3a3a3',
-      lineWidth: 1
+      lineWidth: 1,
     },
     offsetX: 0,
     offsetY: 0,
@@ -37,19 +35,19 @@ const guide = {
   },
   rect: {
     style: {
-      fill: '#fafafa'
+      fill: '#fafafa',
     },
   },
   arc: {
     style: {
-      stroke: '#a3a3a3'
+      stroke: '#a3a3a3',
     },
   },
   html: {
     offsetX: 0,
     offsetY: 0,
     alignX: 'center',
-    alignY: 'middle'
+    alignY: 'middle',
   },
   tag: {
     offsetX: 0,
@@ -58,14 +56,14 @@ const guide = {
     background: {
       padding: 5,
       radius: 2,
-      fill: '#1890FF'
+      fill: '#1890FF',
     },
     textStyle: {
       fontSize: 12,
       fill: '#fff',
       textAlign: 'center',
-      textBaseline: 'middle'
-    }
+      textBaseline: 'middle',
+    },
   },
   point: {
     offsetX: 0,
@@ -74,15 +72,20 @@ const guide = {
       fill: '#fff',
       r: 3,
       lineWidth: 2,
-      stroke: '#1890ff'
-    }
-  }
-}
+      stroke: '#1890ff',
+    },
+  },
+};
+
+const chart = {
+  padding: ['30px', '30px', '30px', '30px'],
+};
 
 const Theme = {
-  fontFamily: '"Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif',
+  fontFamily:
+    '"Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif',
   pixelRatio: 1,
-  padding: ['30px', '30px', '30px', '30px'],
+  padding: [0, 0, 0, 0],
   colors: [
     '#1890FF',
     '#2FC25B',
@@ -91,30 +94,30 @@ const Theme = {
     '#8543E0',
     '#13C2C2',
     '#3436C7',
-    '#F04864'
+    '#F04864',
   ],
+  chart,
   shapes: {
-    line: [ 'line', 'dash' ],
-    point: [ 'circle', 'hollowCircle' ]
+    line: ['line', 'dash'],
+    point: ['circle', 'hollowCircle'],
   },
-  sizes: [ 2, 4, 6, 8 ],
+  sizes: [2, 4, 6, 8],
   shape: {
     line: {
       lineWidth: 2,
       lineJoin: 'round',
-      lineCap: 'round'
+      lineCap: 'round',
     },
     point: {
       lineWidth: 0,
-      size: 3
+      size: 3,
     },
     area: {
-      fillOpacity: 0.1
-    }
+      fillOpacity: 0.1,
+    },
   },
   axis,
-  guide
+  guide,
 };
 
 export default Theme;
-
diff --git a/packages/f2-next/src/util/index.ts b/packages/f2-next/src/util/index.ts
@@ -37,13 +37,13 @@ const isObject = is('Object');
 const isFunction = is('Function');
 
 function parsePadding(padding: any) {
-  if (isNumber(padding) || isString(padding)) {
+  if (isNumber(padding)) {
     return [padding, padding, padding, padding];
   }
   const top = padding[0];
-  const right = padding[1] ? padding[1] : padding[0];
-  const bottom = padding[2] ? padding[2] : top;
-  const left = padding[3] ? padding[3] : right;
+  const right = isNumber(padding[1]) ? padding[1] : padding[0];
+  const bottom = isNumber(padding[2]) ? padding[2] : top;
+  const left = isNumber(padding[3]) ? padding[3] : right;
   return [top, right, bottom, left];
 }
 
@@ -69,6 +69,7 @@ function batch2hd(value: any) {
         }
         if (key === 'padding' || key === 'margin') {
           const paddingArray = parsePadding(rst);
+          result[key] = paddingArray;
           result[`${key}Top`] = paddingArray[0];
           result[`${key}Right`] = paddingArray[1];
           result[`${key}Bottom`] = paddingArray[2];