fix: 修复图形的对齐方式

packages/jsx/src/render.ts

@@ -1,6 +1,7 @@
 import JSX from './interface';
 import { extendMap, batch2hd } from '@ali/f2x-util';
 import computeLayout from './css-layout';
+import getShapeAttrs from './shape';
 
 // 转换成布局所需要的布局树
 function createNodeTree(element: JSX.Element, container: any) {
@@ -26,11 +27,8 @@ function createNodeTree(element: JSX.Element, container: any) {
     style = {
       width,
       height,
-      top: height / 2,
       ...style,
     }
-    // 通过middle + top 才能比较好的实现对齐
-    attrs.textBaseline = 'middle';
     // 无用，销毁掉
     shape.remove(true);
   }
@@ -61,18 +59,15 @@ 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 layout = mergeLayout(parentLayout, originLayout);
-  const { width, height, left, top } = layout;
 
   let element;
   if (type === 'group') {
     element = container.addGroup();
     if (attrs) {
+      const defaultAttrs = getShapeAttrs('rect', layout);
       element.addShape('rect', {
         attrs: {
-          x: left,
-          y: top,
-          width,
-          height,
+          ...defaultAttrs,
           ...attrs,
         }
       });
@@ -84,30 +79,14 @@ function createElement(node: any, container: any, parentLayout: any) {
       }
     }
   } else {
-    // TODO， 后面再优化
-    if (type === 'line') {
-      element = container.addShape(type, {
-        ...props,
-        attrs: {
-          x1: left,
-          y1: top,
-          x2: left + width,
-          y2: top + height,
-          ...attrs,
-        },
-      });
-    } else {
-      element = container.addShape(type, {
-        ...props,
-        attrs: {
-          x: left,
-          y: top,
-          width,
-          height,
-          ...attrs,
-        },
-      });
-    }
+    const defaultAttrs = getShapeAttrs(type, layout);
+    element = container.addShape(type, {
+      ...props,
+      attrs: {
+        ...defaultAttrs,
+        ...attrs,
+      },
+    });
   }
   if (ref) {
     ref.current = element;

packages/jsx/src/shape/circle.ts

@@ -0,0 +1,9 @@
+export default (layout) => {
+  const { left, top, width } = layout;
+  const r = width / 2;
+  return {
+    x: left + r,
+    y: top + r,
+    r,
+  }
+}

packages/jsx/src/shape/index.ts

@@ -0,0 +1,18 @@
+import rect from './rect';
+import line from './line';
+import text from './text';
+import circle from './circle';
+import marker from './marker';
+
+const map = {
+  rect,
+  line,
+  text,
+  circle,
+  marker,
+}
+
+export default (type: string, layout) => {
+  const fn = map[type] || rect;
+  return fn(layout);
+}

packages/jsx/src/shape/line.ts

@@ -1,12 +1,13 @@
-// const { width, height, left, top, right, bo } = layout;
+export default (layout) => {
+  const { left, top, width, height } = layout;
+  const halfHeight = height / 2;
+  return {
+    x1: left,
+    y1: top + halfHeight,
+    x2: left + width,
+    y2: top + halfHeight,
+    lineWidth: height,
+  }
+}
+
 
-// element = container.addShape(type, {
-//   ...props,
-//   attrs: {
-//     x1: left,
-//     y1: top,
-//     x2: left + width,
-//     y2: top + height,
-//     ...attrs,
-//   },
-// });

packages/jsx/src/shape/marker.ts

@@ -0,0 +1,9 @@
+export default (layout) => {
+  const { left, top, width } = layout;
+  const r = width / 2;
+  return {
+    x: left + r,
+    y: top + r,
+    radius: r,
+  }
+}

packages/jsx/src/shape/rect.ts

@@ -0,0 +1,9 @@
+export default (layout) => {
+  const { left, top, width, height } = layout;
+  return {
+    x: left,
+    y: top,
+    width,
+    height,
+  }
+}

packages/jsx/src/shape/text.ts

@@ -0,0 +1,9 @@
+export default (layout) => {
+  const { width, height, left, top } = layout;
+  return {
+    x: left,
+    y: top + (height / 2),
+    // 通过middle + top 才能比较好的实现文本对齐
+    textBaseline: 'middle',
+  }
+}

packages/jsx/test/render.test.tsx

@@ -233,5 +233,48 @@ describe('layout', () => {
     expect(children[2].get('children')[0].get('type')).toBe('text');
     expect(children[2].get('children')[0].get('attrs').x).toBe(120);
     expect(children[2].get('children')[0].get('attrs').y).toBe(16);
+    container.remove(true);
+  });
+
+  it('text render', () => {
+    const container = canvas.addGroup();
+    const group = render(
+      <group style={{
+          flexDirection: 'row',
+          width: '20px',
+          height: '200px',
+          flexWrap: 'wrap',
+        }}>
+        <text
+          style={{
+            // flex: 1,
+          }}
+          attrs={{
+            fill: '#000',
+            text: '111',
+          }}
+        />
+        <text
+          style={{
+            // flex: 1,
+          }}
+          attrs={{
+            fill: '#000',
+            text: '222',
+          }}
+        />
+      </group>, container);
+    canvas.draw();
+
+    const children = group.get('children');
+    expect(children[0].get('attrs').x).toBe(0);
+    expect(children[0].get('attrs').y).toBe(6);
+    expect(children[0].get('attrs').textBaseline).toBe('middle');
+
+    expect(children[1].get('attrs').x).toBe(0);
+    expect(children[1].get('attrs').y).toBe(18);
+    expect(children[1].get('attrs').textBaseline).toBe('middle');
+
+    container.remove(true);
   });
 });