diff --git a/.fatherrc.js b/.fatherrc.js
index eeddf59ab..f123882e7 100644
--- a/.fatherrc.js
+++ b/.fatherrc.js
@@ -4,10 +4,10 @@ export default {
'component'
],
cjs: {
- type: 'babel'
+ // type: 'babel'
},
esm: {
- type: 'babel'
+ // type: 'babel'
},
extraBabelPlugins: [
['@babel/plugin-transform-react-jsx', {
diff --git a/.gitignore b/.gitignore
index a258ffd05..01421e79b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,5 @@ coverage/
*.log
.vscode/
.docz/
-.DS_Store
\ No newline at end of file
+.DS_Store
+package-lock.json
\ No newline at end of file
diff --git a/packages/jsx/package.json b/packages/jsx/package.json
index 7713b8fb2..0333298dc 100644
--- a/packages/jsx/package.json
+++ b/packages/jsx/package.json
@@ -1,8 +1,9 @@
{
"name": "f2-jsx",
"version": "0.0.1",
- "main": "lib/index.js",
- "module": "es/index.js",
+ "main": "dist/index.js",
+ "module": "dist/index.esm.js",
+ "types": "dist/index.d.ts",
"dependencies": {
"@antv/f2": "~3.8.1",
"css-layout": "1.1.1"
diff --git a/packages/jsx/src/element/group.ts b/packages/jsx/src/element/group.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/jsx/src/element/index.ts b/packages/jsx/src/element/index.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/jsx/src/element/rect.ts b/packages/jsx/src/element/rect.ts
deleted file mode 100644
index a2c0f15c0..000000000
--- a/packages/jsx/src/element/rect.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default (container, style: any, props: any) => {
- container.addShape('rect', {
- attrs: {
- ...style,
- },
- ...props,
- });
-}
\ No newline at end of file
diff --git a/packages/jsx/src/index.ts b/packages/jsx/src/index.ts
index d3ec98b84..8711f78dd 100644
--- a/packages/jsx/src/index.ts
+++ b/packages/jsx/src/index.ts
@@ -1,4 +1,4 @@
import render from './render';
export {
render
-};
+};
diff --git a/packages/jsx/src/interface.ts b/packages/jsx/src/interface.ts
index d0812874a..d43875eea 100644
--- a/packages/jsx/src/interface.ts
+++ b/packages/jsx/src/interface.ts
@@ -12,8 +12,10 @@ declare global {
render(): any;
}
interface IntrinsicElements {
- // group: any;
- // rect: any;
+ group: any;
+ rect: any;
+ circle: any;
+ text: any;
}
}
}
diff --git a/packages/jsx/src/jsx-runtime.ts b/packages/jsx/src/jsx-runtime.ts
deleted file mode 100644
index b93f0f4c9..000000000
--- a/packages/jsx/src/jsx-runtime.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// 参考
-// - https://www.typescriptlang.org/docs/handbook/compiler-options.html
-// - https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript
-// - https://www.meziantou.net/write-your-own-dom-element-factory-for-typescript.htm
-
-import JSX from './interface';
-import { isArray, batch2hd } from './util';
-
-// 展开数组
-function extendArray(arr: any[]) {
- if (!arr) {
- return arr;
- }
- if (!isArray(arr)) {
- return [ arr ];
- }
- let newArray = [];
- for (let i = 0; i < arr.length; i++) {
- const element = arr[i];
- if (isArray(element)) {
- newArray = newArray.concat(extendArray(element));
- } else {
- newArray.push(element);
- }
- }
- return newArray;
-}
-
-function jsx(type: string | Function, props: any, key?: string) {
- const { style, children } = props;
- const stylehd = batch2hd(style);
- const newChildren = extendArray(children);
-
-
- return {
- type,
- props,
- style: stylehd,
- children: newChildren
- } as JSX.Element;
-}
-
-export {
- jsx,
- jsx as jsxs
-};
diff --git a/packages/jsx/src/render.ts b/packages/jsx/src/render.ts
index 24b5513cf..7cc7c8ed4 100644
--- a/packages/jsx/src/render.ts
+++ b/packages/jsx/src/render.ts
@@ -23,11 +23,10 @@ function extendArray(arr: any[]) {
}
function createElement(node, container, parentLayout) {
- const { type, props, style, layout, children } = node;
+ const { type, props, layout, children } = node;
+ const { attrs } = props;
if (type === 'group') {
- const element = container.addGroup({
- attrs: style,
- });
+ const element = container.addGroup();
// 只有group才需要处理children
if (children && children.length) {
for (let i = 0, len = children.length; i < len; i++) {
@@ -38,14 +37,14 @@ function createElement(node, container, parentLayout) {
}
const { width, height, left, top } = layout;
return container.addShape(type, {
+ ...props,
attrs: {
- ...style,
+ ...attrs,
x: left,
y: top,
width,
height,
},
- ...props,
});
}
diff --git a/packages/jsx/src/util.ts b/packages/jsx/src/util.ts
index 91d9b3256..c4a86566a 100644
--- a/packages/jsx/src/util.ts
+++ b/packages/jsx/src/util.ts
@@ -31,7 +31,6 @@ const isArray = is('Array');
const isObject = is('Object');
-
function batch2hd(value: any) {
// 处理带px的数据
if (isString(value) && /^-?\d+px$/.test(value)) {
diff --git a/packages/jsx/test/index.test.tsx b/packages/jsx/test/index.test.tsx
index 002103669..4fbaa8ae5 100644
--- a/packages/jsx/test/index.test.tsx
+++ b/packages/jsx/test/index.test.tsx
@@ -1,5 +1,4 @@
/** @jsxImportSource .. */
-// @ts-nocheck
import { canvas } from './global';
import render from '../src/render';
@@ -8,43 +7,36 @@ describe('index', () => {
canvas.clear();
const profile = (
+ width: 100,
+ flex: 1,
+ }}
+ attrs={{
+ fill: 'red',
+ }}
+ />
);
- // console.log(profile);
render(profile, canvas);
-
+ console.log(canvas);
canvas.draw();
-
- // const group = render(
- //
- // ss
- // aaa
- // , canvas);
- // canvas.draw();
- // expect(group.get('children').length).toBe(2);
- // expect(group.get('children')[1].get('attrs').x).toBe(0);
- // expect(group.get('children')[1].get('attrs').y).toBe(18);
});
});
diff --git a/packages/jsx/tsconfig.json b/packages/jsx/tsconfig.json
index 7460ef428..d385f71b2 100644
--- a/packages/jsx/tsconfig.json
+++ b/packages/jsx/tsconfig.json
@@ -1,3 +1,6 @@
{
- "extends": "../../tsconfig.json"
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "typeRoots": [ "/node_modules" ]
+ }
}
\ No newline at end of file
diff --git a/packages/legend/package.json b/packages/legend/package.json
new file mode 100644
index 000000000..41fc855a7
--- /dev/null
+++ b/packages/legend/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "f2x-legend",
+ "version": "0.0.1",
+ "main": "lib/index.js",
+ "module": "es/index.js",
+ "dependencies": {
+ "@antv/f2": "^3.8.1"
+ },
+ "devDependencies": {
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1"
+ },
+ "files": [
+ "src",
+ "dist"
+ ],
+ "author": "yezengyue@gmail.com"
+}
diff --git a/packages/legend/src/index.tsx b/packages/legend/src/index.tsx
new file mode 100644
index 000000000..ec1819f77
--- /dev/null
+++ b/packages/legend/src/index.tsx
@@ -0,0 +1,33 @@
+// @ts-nocheck
+/** @jsxImportSource ../../jsx */
+
+function model(View) {
+ return class LegendModel {
+ render() {
+ return
+ }
+ }
+}
+
+
+export default model((props) => {
+ return (
+
+
+
+
+ );
+})
\ No newline at end of file
diff --git a/packages/legend/tsconfig.json b/packages/legend/tsconfig.json
new file mode 100644
index 000000000..7460ef428
--- /dev/null
+++ b/packages/legend/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "extends": "../../tsconfig.json"
+}
\ No newline at end of file
diff --git a/packages/legend/typings.d.ts b/packages/legend/typings.d.ts
new file mode 100644
index 000000000..a74faea71
--- /dev/null
+++ b/packages/legend/typings.d.ts
@@ -0,0 +1 @@
+import '../../typings';
\ No newline at end of file
diff --git a/packages/react/src/chart/model.ts b/packages/react/src/chart/model.ts
index 332879c5e..1125c3d37 100644
--- a/packages/react/src/chart/model.ts
+++ b/packages/react/src/chart/model.ts
@@ -1,5 +1,6 @@
import { useEffect, useState, Children } from 'react';
import F2 from '@antv/f2';
+import render from '../../../jsx/src/render';
export default ({ canvasRef, pixelRatio, data, children }) => {
// const [chart, setChart] = useState();
@@ -14,15 +15,24 @@ export default ({ canvasRef, pixelRatio, data, children }) => {
chart.source(data);
- Children.map(children, child => {
+ const components = Children.map(children, child => {
const { type, props } = child;
- return type({
+ return new type({
...props,
chart,
});
});
- // const frontPlot = chart.get('frontPlot');
+ const frontPlot = chart.get('frontPlot');
+ // @ts-ignore
+ chart.on('aftergeomdraw', () => {
+ // component render
+ for (let i = 0, len = components.length; i < len; i++) {
+ const component = components[i];
+ console.log(component);
+ // render(component.render(), frontPlot);
+ }
+ });
chart.render();
return;
diff --git a/packages/react/src/interval/index.tsx b/packages/react/src/interval/index.tsx
index c54b53d20..48ec9fb52 100644
--- a/packages/react/src/interval/index.tsx
+++ b/packages/react/src/interval/index.tsx
@@ -1,15 +1,23 @@
+// @ts-nocheck
-export default (props) => {
- const { chart, position } = props;
- const geom = chart.interval();
- geom.position(position);
- console.log('interval props:', props);
- return null;
+function model(View) {
+ return class I {
+ init() {
+ const { chart, position } = this.props;
+ const geom = chart.interval();
+ geom.position(position);
+ }
+ render() {
+ return
+ };
+ }
}
-// export default class Interval {
-// render() {
-// return null;
-// }
-// }
+export default model((props) => {
+ // const { chart, position } = props;
+ // const geom = chart.interval();
+ // geom.position(position);
+ // console.log('interval props:', props);
+ return null;
+});
diff --git a/packages/react/test/chart.test.tsx b/packages/react/test/chart.test.tsx
index 9b7403f7e..c6bfb247f 100644
--- a/packages/react/test/chart.test.tsx
+++ b/packages/react/test/chart.test.tsx
@@ -1,8 +1,10 @@
/** @jsxImportSource react */
+// @ts-nocheck
import ReactDOM from 'react-dom';
import Chart from '../src/chart';
import Interval from '../src/interval';
+import Legned from '../../legend/src/index';
const style = document.createElement('style');
style.setAttribute('rel', 'text/css');
@@ -34,6 +36,7 @@ const App = () => {
data={ data }
>
+
);
}