feat: 只有在有style时，才计算布局

packages/components/src/geometry/withGeometry.tsx

@@ -45,28 +45,24 @@ export default View => {
 
       this._shapes = _shapes;
       this.geom = geom;
-      // this._pressEvent();
+
+      this.initEvent();
     }
-    _pressEvent() {
+    initEvent() {
       const { chart, props, geom } = this;
-      const { onPress, onPressEnd } = props;
       const canvas = chart.get('canvas');
-      if (onPress) {
-        canvas.on('press', (ev) => {
-          const { points } = ev || {};
-          const point = points[0];
-          if (!point) {
-            return;
-          }
-          const records = geom.getSnapRecords(point);
-          ev.records = records;
-          onPress(ev);
-        });
-      }
-      if (onPressEnd) {
-        canvas.on('pressend', (ev) => {
-        });
-      }
+      [
+        'onPressStart',
+        'onPress',
+        'onPressEnd'
+      ].forEach((eventName) => {
+        if (props[eventName]) {
+          canvas.on(eventName.substr(2).toLowerCase(), (ev) => {
+            ev.geometry = geom;
+            props[eventName](ev);
+          });
+        }
+      });
     }
     parsePoints(points) {
       if (!points) return false;

packages/components/src/tooltip/tooltipView.tsx

@@ -4,7 +4,7 @@ export default (props) => {
   const { records, plot } = props;
   if (!records || !records.length) return null;
   const { x, y } = records[0];
-  const { tl, tr, bl } = plot;
+  const { tl, tr, br, bl } = plot;
   return (
     <group>
       <line attrs={{
@@ -33,6 +33,68 @@ export default (props) => {
         stroke: '#fff',
         lineWidth: '2px',
       }} />
+      <group style={{
+        // top
+        left: x,
+        top: tl.y,
+        padding: '6px',
+        marginLeft: '-50%',
+      }} attrs={{
+        fill: 'gray',
+        radius: '4px'
+      }}>
+        <text attrs={{
+          text: '中文',
+          fill: '#000',
+        }} />
+      </group>
+      <group style={{
+        // bottom
+        left: x,
+        top: bl.y,
+        padding: '6px',
+        marginTop: '-100%',
+        marginLeft: '-50%',
+      }} attrs={{
+        fill: 'gray',
+        radius: '4px'
+      }}>
+        <text attrs={{
+          text: '中文ss',
+          fill: '#000',
+        }} />
+      </group>
+      <group style={{
+        // left
+        left: tl.x,
+        top: y,
+        padding: '6px',
+        marginTop: '-50%',
+      }} attrs={{
+        fill: 'gray',
+        radius: '4px'
+      }}>
+        <text attrs={{
+          text: '中文ss',
+          fill: '#000',
+        }} />
+      </group>
+      <group style={{
+        // right
+        left: tr.x,
+        top: y,
+        padding: '6px',
+        marginTop: '-50%',
+        marginLeft: '-100%',
+      }} attrs={{
+        fill: 'gray',
+        radius: '4px'
+      }}>
+        <text attrs={{
+          text: '中文ss',
+          fill: '#000',
+        }} />
+      </group>
     </group>
   );
 }

packages/components/src/tooltip/withTooltip.tsx

@@ -3,6 +3,9 @@ import Component from '../component';
 
 export default View => {
   return class Tooltip extends Component {
+    // mount() {
+    //   console.log(this.props.geometryRef.current);
+    // }
     render() {
       const { props } = this;
       const { visible } = props;

packages/components/test/interval.test.tsx

@@ -1,6 +1,5 @@
-// @ts-nocheck
 import { jsx } from '@ali/f2-jsx';
-import Chart, { Interval } from '../src';
+import Chart, { Interval, Coord, Tooltip } from '../src';
 import { createContext } from './util';
 const context = createContext();
 
@@ -14,12 +13,26 @@ const data = [
 
 describe('Interval', () => {
   it('render', () => {
+    const ref = {};
     const { type, props } = (
       <Chart data={ data } context={ context } pixelRatio={ window.devicePixelRatio }>
-        <Interval position="genre*sold" color="genre"/>
+        {/* <Coord type="polar" transposed={ false } /> */}
+        <Interval
+          ref={ ref }
+          position="genre*sold"
+          color="genre"
+          onPress={ (ev) => {
+            const { points, geometry } = ev || {};
+            const point = points[0];
+            const records = geometry.getSnapRecords(point);
+            console.log(records);
+          } }
+        />
+        <Tooltip geometryRef={ ref } records={ [{ x: 179.5, y: 280 }] } />
       </Chart>
     );
 
+    // @ts-ignore
     const chart = new type(props);
     chart.render();
   })

packages/jsx/src/css-layout.ts

@@ -1117,9 +1117,49 @@ function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection
   }
 }
 
+// 在外层做的margin补丁
+function saveMargin(node) {
+  const { style } = node;
+  const margin = {};
+  [
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft', // 只支持marginLeft
+  ].forEach(key => {
+    // 只处理百分号
+    const value = style[key];
+    if (value && /^-?\d+%$/.test(value)) {
+      margin[key] = value;
+      style[key] = 0;
+    }
+  });
+  node.margin = margin;
+}
+
+function percent2Num(value) {
+  const percent = Number(value.substr(0, value.length - 1));
+  return percent / 100;
+}
+
+function layoutMargin(node) {
+  const { margin, layout } = node;
+  Object.keys(margin).forEach(key => {
+    const percent = percent2Num(margin[key]);
+    if ((key === 'marginLeft' || key === 'marginRight') && layout.width) {
+      layout.left += (layout.width * percent);
+    } else if ((key === 'marginTop' || key === 'marginBottom') && layout.height) {
+      layout.top += (layout.height * percent);
+    }
+  });
+}
+
 function layoutNode(node, parentMaxWidth, parentDirection) {
   node.shouldUpdate = true;
 
+  // hack
+  saveMargin(node);
+
   var direction = node.style.direction || CSS_DIRECTION_LTR;
   var skipLayout =
     !node.isDirty &&
@@ -1159,11 +1199,25 @@ function layoutNode(node, parentMaxWidth, parentDirection) {
     node.lastLayout.top = node.layout.top;
     node.lastLayout.left = node.layout.left;
   }
+
+  // hack
+  layoutMargin(node);
 }
 
 /* eslint-enable */
-export default node => {
-  fillNodes(node);
-  layoutNode(node, null, null);
+function computeLayout(node) {
+  const { style, children } = node;
+  if (style) {
+    fillNodes(node);
+    layoutNode(node, null, null);
+    return node;
+  }
+  if (children && children.length) {
+    for (let i = 0, len = children.length; i < len; i++) {
+      computeLayout(children[i]);
+    }
+  }
   return node;
-};
+}
+
+export default computeLayout;

packages/jsx/src/render.ts

@@ -45,7 +45,7 @@ function createNodeTree(element: JSX.Element, container: any) {
 }
 
 function mergeLayout(parent: any, layout: any) {
-  if (!parent) return layout;
+  if (!parent || !layout) return layout;
   const { left: parentLeft, top: parentTop } = parent;
   const { left, top } = layout;
   return {
@@ -57,13 +57,14 @@ function mergeLayout(parent: any, layout: any) {
 
 
 function createElement(node: any, container: any, parentLayout: any) {
-  const { key, ref, type, props, attrs, layout: originLayout, children } = node;
+  const { key, ref, type, props, style, attrs, layout: originLayout, children } = node;
   const layout = mergeLayout(parentLayout, originLayout);
 
   let element;
   if (type === 'group') {
     element = container.addGroup();
-    if (attrs) {
+    // TODO： 后续让G里的group继承rect
+    if (attrs && layout) {
       const defaultAttrs = getShapeAttrs('rect', layout);
       element.addShape('rect', {
         attrs: {

packages/jsx/src/shape/index.ts

@@ -13,6 +13,7 @@ const map = {
 }
 
 export default (type: string, layout) => {
+  if (!layout) return null;
   const fn = map[type] || rect;
   return fn(layout);
 }

packages/jsx/src/shape/util.ts

@@ -0,0 +1,44 @@
+const ALIAS_ATTRS_MAP = {
+  left: 'x',
+  top: 'y',
+  width: 'width',
+  height: 'height',
+  backgroundColor: 'fill',
+  font: 'font',
+  fontSize: 'fontSize',
+  fontFamily: 'fontFamily',
+  fontStyle: 'fontStyle',
+  fontWeight: 'fontWeight',
+  fontVariant: 'fontVariant',
+  color: 'fill',
+  textAlign: 'textAlign',
+  verticalAlign: 'textBaseline',
+  shadow: 'shadow',
+  shadowBlur: 'shadowBlur',
+  shadowColor: 'shadowColor',
+  shadowOffsetX: 'shadowOffsetX',
+  shadowOffsetY: 'shadowOffsetY',
+  opacity: 'fillOpacity',
+  borderColor: 'stroke',
+  borderWidth: 'lineWidth',
+  borderDash: 'lineDash',
+  borderOpacity: 'strokeOpacity',
+  radius: 'radius',
+}
+
+function pickAttrs(style) {
+  if (!style) return null;
+  const attrs = {};
+  Object.keys(style).forEach(key => {
+    const attrKey = ALIAS_ATTRS_MAP[key];
+    if (!attrKey) {
+      return;
+    }
+    attrs[attrKey] = style[key];
+  });
+  return attrs;
+}
+
+export { 
+  pickAttrs
+}

packages/jsx/test/jsx-classic.test.tsx

@@ -8,7 +8,7 @@ describe('jsx classic 模式', () => {
         <text />
       </group>
     );
-    
+
     expect(group.type).toBe('group');
     expect(group.ref === ref).toBe(true);
     expect(group.props.a).toBe(1);