;
28 |
29 | parent: VNode;
30 | // VNode
31 | children: VNode | VNode[] | null;
32 |
33 | // Layout
34 | layout: VNodeLayout;
35 |
36 | // Style
37 | style: any; // 当前应用的样式
38 |
39 | // 是否执行动画
40 | animate: boolean;
41 | // animation
42 | animator: Animator;
43 |
44 | transform?: VNode;
45 | }
46 |
--------------------------------------------------------------------------------
/packages/f-engine/src/canvas/workTags.ts:
--------------------------------------------------------------------------------
1 | import { ElementType } from '../types';
2 | import { isString } from '@antv/util';
3 |
4 | export type WorkTag = 0 | 1 | 2;
5 |
6 | export const FunctionComponent = 0;
7 | export const ClassComponent = 1;
8 | export const Shape = 2;
9 |
10 | export function getWorkTag(type: ElementType): WorkTag {
11 | if (isString(type)) {
12 | return Shape;
13 | }
14 | if (type.prototype && type.prototype.isF2Component) {
15 | return ClassComponent;
16 | }
17 | return FunctionComponent;
18 | }
19 |
--------------------------------------------------------------------------------
/packages/f-engine/src/component/index.ts:
--------------------------------------------------------------------------------
1 | import { JSX } from '../jsx/jsx-namespace';
2 | import { IProps, IState } from '../types/jsx';
3 | import { Group } from '@antv/g-lite';
4 | import { IContext, LayoutProps } from '../types';
5 | import { Updater } from './updater';
6 | import { VNode } from '../canvas/vnode';
7 | import Animator from '../canvas/render/animator';
8 |
9 | export interface Props extends IProps {
10 | zIndex?: number;
11 | }
12 |
13 | class Component {
14 | props: P;
15 | state: S;
16 | context: IContext;
17 | refs: {
18 | [key: string]: Component;
19 | };
20 | updater: Updater;
21 | // 对应 G 的group, 每个组件渲染的父节点
22 | container: Group;
23 | layout: LayoutProps;
24 | // render 返回的节点
25 | children: VNode | VNode[] | null;
26 | isMounted = false;
27 |
28 | animate: boolean;
29 | animator: Animator;
30 |
31 | // State 内部私有属性
32 | destroyed = false;
33 | _vNode: VNode;
34 |
35 | constructor(props: P, context?: IContext, updater?: Updater) {
36 | this.props = props;
37 | this.state = {} as S;
38 | this.context = context;
39 | this.updater = updater;
40 | }
41 | willMount() {}
42 | didMount() {}
43 | shouldUpdate(_nextProps: P): boolean {
44 | return true;
45 | }
46 | willReceiveProps(_props: P, _context?: IContext) {}
47 | willUpdate() {}
48 | didUpdate() {}
49 | render(): JSX.Element | null {
50 | return null;
51 | }
52 | willUnmount() {}
53 | didUnmount() {}
54 | setState(partialState: S, callback?: () => void) {
55 | if (this.destroyed) {
56 | return;
57 | }
58 | this.updater.enqueueSetState(this, partialState, callback);
59 | }
60 | forceUpdate(callback?: () => void) {
61 | if (this.destroyed) {
62 | return;
63 | }
64 | this.updater.enqueueForceUpdate(this, {} as S, callback);
65 | }
66 | setAnimate(animate: boolean) {
67 | this.animate = animate;
68 | this._vNode.animate = animate;
69 | }
70 | destroy() {
71 | this.destroyed = true;
72 | this.animator = null;
73 | }
74 | }
75 |
76 | // 标识是否是组件
77 | // @ts-ignore
78 | Component.prototype.isF2Component = true;
79 |
80 | export default Component;
81 |
--------------------------------------------------------------------------------
/packages/f-engine/src/component/updater.ts:
--------------------------------------------------------------------------------
1 | import Canvas from '../canvas';
2 | import Component from '.';
3 |
4 | export interface Updater {
5 | enqueueSetState: (component: Component, partialState: S, callback?: () => void) => void;
6 | enqueueForceUpdate: (component: Component, partialState: S, callback?: () => void) => void;
7 | }
8 |
9 | function createUpdater(canvas: Canvas) {
10 | const setStateQueue = [];
11 |
12 | function process() {
13 | let item;
14 |
15 | const renderComponents = [];
16 | const renderCallbackQueue = [];
17 |
18 | while ((item = setStateQueue.shift())) {
19 | const { state, component, callback } = item;
20 |
21 | // 组件已销毁，不再触发 setState
22 | if (component.destroyed) {
23 | continue;
24 | }
25 |
26 | // 如果没有prevState，则将当前的state作为初始的prevState
27 | if (!component.prevState) {
28 | component.prevState = Object.assign({}, component.state);
29 | }
30 |
31 | // 如果stateChange是一个方法，也就是setState的第二种形式
32 | if (typeof state === 'function') {
33 | Object.assign(component.state, state(component.prevState, component.props));
34 | } else {
35 | // 如果stateChange是一个对象，则直接合并到setState中
36 | Object.assign(component.state, state);
37 | }
38 |
39 | component.prevState = component.state;
40 |
41 | if (typeof callback === 'function') {
42 | renderCallbackQueue.push({ callback, component });
43 | }
44 |
45 | if (renderComponents.indexOf(component) < 0) {
46 | renderComponents.push(component);
47 | }
48 | }
49 |
50 | canvas.updateComponents(renderComponents);
51 |
52 | // callback queue
53 | commitRenderQueue(renderCallbackQueue);
54 | }
55 |
56 | function enqueueSetState(component: Component, state, callback?: () => void) {
57 | if (setStateQueue.length === 0) {
58 | setTimeout(process, 0);
59 | }
60 | setStateQueue.push({
61 | component,
62 | state,
63 | callback,
64 | });
65 | }
66 |
67 | function commitRenderQueue(callbackQueue) {
68 | for (let i = 0; i < callbackQueue.length; i++) {
69 | const { callback, component } = callbackQueue[i];
70 | callback.call(component);
71 | }
72 | }
73 |
74 | const updater = {
75 | // isMounted: function(publicInstance) {
76 | // return false;
77 | // },
78 | enqueueForceUpdate: enqueueSetState,
79 | // enqueueReplaceState: function(publicInstance, completeState) {
80 | // },
81 | enqueueSetState,
82 | };
83 |
84 | return updater;
85 | }
86 |
87 | export { createUpdater };
88 |
--------------------------------------------------------------------------------
/packages/f-engine/src/createContext.ts:
--------------------------------------------------------------------------------
1 | import { JSX } from './jsx/jsx-namespace';
2 | import { FunctionComponent } from './types';
3 |
4 | export interface ReactContext {
5 | Provider: FunctionComponent<{ value: T; children: JSX.Element }>;
6 | Injecter: FunctionComponent<{ children: JSX.Element; [key: string]: any }>;
7 | Consumer: FunctionComponent<{ children: (value: T) => JSX.Element | null }>;
8 | }
9 |
10 | export default function createContext(defaultValue?: T) {
11 | // 创建 Context 对象
12 | const context = {
13 | _currentValue: defaultValue,
14 | } as any;
15 |
16 | // 定义 Provider 组件
17 | const Provider = function Provider({ value, children }) {
18 | context._currentValue = value;
19 | return children;
20 | };
21 |
22 | // Injecter 可以往全局的 context 注入内容
23 | const Injecter = function Injecter({ children, ...props }, context) {
24 | Object.assign(context, props);
25 | return children;
26 | };
27 | Injecter.contextInjecter = context;
28 |
29 | // 定义 Consumer 组件
30 | const Consumer = function Consumer({ children }) {
31 | return children(context._currentValue);
32 | };
33 |
34 | context.Provider = Provider;
35 | context.Injecter = Injecter;
36 | context.Consumer = Consumer;
37 |
38 | return context as ReactContext;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/f-engine/src/createRef.ts:
--------------------------------------------------------------------------------
1 | export default function createRef() {
2 | const ref = {
3 | current: null as T,
4 | };
5 | return ref;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/f-engine/src/gesture.ts:
--------------------------------------------------------------------------------
1 | import { DisplayObject, Canvas } from '@antv/g-lite';
2 |
3 | class Gesture {
4 | private el: DisplayObject | Canvas;
5 |
6 | constructor(element: DisplayObject | Canvas) {
7 | this.el = element;
8 | }
9 |
10 | on(eventName: string, listener: (...args: any[]) => void) {
11 | if (!eventName) return;
12 | const { el } = this;
13 | el.addEventListener(eventName, listener);
14 | }
15 |
16 | off(eventName: string, listener: (...args: any[]) => void) {
17 | if (!eventName) return;
18 | const { el } = this;
19 | el.removeEventListener(eventName, listener);
20 | }
21 | }
22 |
23 | export default Gesture;
24 |
--------------------------------------------------------------------------------
/packages/f-engine/src/index.ts:
--------------------------------------------------------------------------------
1 | import { computeLayout } from './canvas/render';
2 | import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
3 | import { parseColor } from '@antv/g-lite';
4 | import * as Smooth from './shape/util/smooth';
5 |
6 | export { JSX } from './jsx/jsx-namespace';
7 | // export createElement 别名
8 | export { jsx as createElement, Fragment, jsx } from './jsx';
9 | export { registerTag } from './jsx/tag';
10 | export { default as Canvas, CanvasProps } from './canvas';
11 | export { default as Component } from './component';
12 | export { default as Children } from './children';
13 | export { default as createRef } from './createRef';
14 | export { default as createContext } from './createContext';
15 | export { default as Timeline, TimelineProps } from './timeline';
16 | export { default as Gesture } from './gesture';
17 | export { CanvasRenderer, computeLayout, Smooth, parseColor };
18 | export { default as isEqual } from './canvas/equal';
19 | export { default as Player, PlayerProps } from './player';
20 |
21 | // 导出 ts 类型
22 | export {
23 | IProps,
24 | IState,
25 | IContext,
26 | ComponentType,
27 | FC,
28 | HOC,
29 | ClassComponent,
30 | Ref,
31 | LayoutProps,
32 | AnimationProps,
33 | ShapeProps,
34 | GroupShapeProps,
35 | RectShapeProps,
36 | CircleShapeProps,
37 | LineShapeProps,
38 | PolygonShapeProps,
39 | PolylineShapeProps,
40 | TextShapeProps,
41 | ImageShapeProps,
42 | PathShapeProps,
43 | ArcShapeProps,
44 | SectorShapeProps,
45 | MarkerShapeProps,
46 | ShapeStyleProps,
47 | GroupStyleProps,
48 | RectStyleProps,
49 | CircleStyleProps,
50 | LineStyleProps,
51 | PolygonStyleProps,
52 | PolylineStyleProps,
53 | TextStyleProps,
54 | ImageStyleProps,
55 | PathStyleProps,
56 | ArcStyleProps,
57 | SectorStyleProps,
58 | MarkerStyleProps,
59 | } from './types';
60 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/fragment.ts:
--------------------------------------------------------------------------------
1 | export default (props) => {
2 | return props.children;
3 | };
4 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/index.ts:
--------------------------------------------------------------------------------
1 | import { jsx } from './jsx-classic';
2 | import Fragment from './fragment';
3 |
4 | export { jsx, Fragment };
5 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/jsx-automatic.ts:
--------------------------------------------------------------------------------
1 | import { JSX as JSXNamespace } from './jsx-namespace';
2 | import { ElementType } from '../types';
3 |
4 | // 实现jsx-automatic 入口
5 | export function jsx(type: ElementType, config, key?: string): JSXNamespace.Element {
6 | const { ref, ...props } = config || {};
7 |
8 | // Resolve default props
9 | // This is a simplified version of the React's defaultProps resolution.
10 | // See https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js
11 | if (typeof type === 'function' && type['defaultProps']) {
12 | const defaultProps = type['defaultProps'];
13 | for (const propName in defaultProps) {
14 | if (props[propName] === undefined) {
15 | props[propName] = defaultProps[propName];
16 | }
17 | }
18 | }
19 |
20 | return {
21 | key,
22 | ref,
23 | type,
24 | props,
25 | };
26 | }
27 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/jsx-classic.ts:
--------------------------------------------------------------------------------
1 | import { JSX as JSXNamespace } from './jsx-namespace';
2 | import { ElementType } from '../types';
3 |
4 | export namespace jsx {
5 | // https://www.tslang.cn/docs/handbook/jsx.html
6 | export namespace JSX {
7 | export type Element = JSXNamespace.Element;
8 | export type ElementClass = JSXNamespace.ElementClass;
9 | export type IntrinsicElements = JSXNamespace.IntrinsicElements;
10 | export type ElementAttributesProperty = JSXNamespace.ElementAttributesProperty;
11 | export type ElementChildrenAttribute = JSXNamespace.ElementChildrenAttribute;
12 | export type IntrinsicAttributes = JSXNamespace.IntrinsicAttributes;
13 | export type IntrinsicClassAttributes = JSXNamespace.IntrinsicClassAttributes;
14 | }
15 | }
16 |
17 | // 实现jsx-classic 入口
18 | export function jsx(type: ElementType, config, ...children): JSXNamespace.Element {
19 | const { key, ref, ...props } = config || {};
20 |
21 | // 保持和automatic模式一致
22 | if (children.length) {
23 | props.children = children.length === 1 ? children[0] : children;
24 | }
25 |
26 | // Resolve default props
27 | // This is a simplified version of the React's defaultProps resolution.
28 | // See https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js
29 | if (typeof type === 'function' && type['defaultProps']) {
30 | const defaultProps = type['defaultProps'];
31 | for (const propName in defaultProps) {
32 | if (props[propName] === undefined) {
33 | props[propName] = defaultProps[propName];
34 | }
35 | }
36 | }
37 |
38 | return {
39 | key,
40 | ref,
41 | type,
42 | props,
43 | };
44 | }
45 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/jsx-namespace.d.ts:
--------------------------------------------------------------------------------
1 | import { Ref, ElementType, IProps } from '../types/jsx';
2 | import {
3 | GroupShapeProps,
4 | RectShapeProps,
5 | CircleShapeProps,
6 | LineShapeProps,
7 | PolygonShapeProps,
8 | PolylineShapeProps,
9 | ArcShapeProps,
10 | SectorShapeProps,
11 | TextShapeProps,
12 | MarkerShapeProps,
13 | ImageShapeProps,
14 | PathShapeProps,
15 | } from '../types/shape';
16 |
17 | export namespace JSX {
18 | export interface Element {
19 | key: string | null;
20 | ref?: Ref;
21 | type: ElementType;
22 | props: IProps;
23 | [key: string]: any;
24 | }
25 |
26 | export interface ElementClass {
27 | props: IProps;
28 | render(): Element | null | Promise;
29 | }
30 |
31 | export interface ElementAttributesProperty {
32 | props: IProps;
33 | }
34 |
35 | export interface IntrinsicAttributes {
36 | key?: number | string;
37 | ref?: Ref;
38 | animate?: boolean;
39 | transformFrom?: any;
40 | children?: any;
41 | }
42 |
43 | export interface IntrinsicClassAttributes {
44 | key?: number | string;
45 | ref?: Ref;
46 | animate?: boolean;
47 | transformFrom?: any;
48 | children?: any;
49 | }
50 |
51 | export interface ElementChildrenAttribute {
52 | children: {};
53 | }
54 |
55 | export interface IntrinsicElements {
56 | group: GroupShapeProps;
57 | rect: RectShapeProps;
58 | circle: CircleShapeProps;
59 | line: LineShapeProps;
60 | polygon: PolygonShapeProps;
61 | polyline: PolylineShapeProps;
62 | arc: ArcShapeProps;
63 | sector: SectorShapeProps;
64 | text: TextShapeProps;
65 | marker: MarkerShapeProps;
66 | image: ImageShapeProps;
67 | path: PathShapeProps;
68 | [key: string]: any;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/jsx-runtime.ts:
--------------------------------------------------------------------------------
1 | import { jsx } from './jsx-automatic';
2 | import Fragment from './fragment';
3 |
4 | export { Fragment, jsx, jsx as jsxs, jsx as jsxDEV };
5 | export { JSX } from './jsx-namespace';
6 |
--------------------------------------------------------------------------------
/packages/f-engine/src/jsx/tag.ts:
--------------------------------------------------------------------------------
1 | import { DisplayObject } from '@antv/g-lite';
2 |
3 | type DisplayObjectConstructor = typeof DisplayObject;
4 |
5 | const SHAPE_TAG: Record = {};
6 |
7 | /**
8 | * 注册新的标签
9 | */
10 | const registerTag = (name: string, ShapeConstructor): void => {
11 | SHAPE_TAG[name] = ShapeConstructor;
12 | };
13 |
14 | const getTag = (type: string): DisplayObjectConstructor => {
15 | return SHAPE_TAG[type];
16 | };
17 |
18 | export { registerTag, getTag };
19 |
--------------------------------------------------------------------------------
/packages/f-engine/src/playerFrames.ts:
--------------------------------------------------------------------------------
1 | import Children from './children';
2 |
3 | export interface playerFrame {
4 | to: Record;
5 | duration?: number;
6 | delay?: number;
7 | }
8 |
9 | export function generateFrameElement(cur: Record, element) {
10 | if (!element) return;
11 | return Children.map(element, (child) => {
12 | const { key, props } = child;
13 |
14 | const newProps = cur[key] ? cur[key].to : {};
15 |
16 | const children = generateFrameElement(cur, props.children);
17 | return Children.cloneElement(child, { ...newProps, children });
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/packages/f-engine/src/shape/index.ts:
--------------------------------------------------------------------------------
1 | export * from './arc';
2 | export * from './marker';
3 | export * from './sector';
4 | export * from './smoothPolyline';
5 |
--------------------------------------------------------------------------------
/packages/f-engine/src/shape/marker.ts:
--------------------------------------------------------------------------------
1 | import { DisplayObjectConfig, BaseStyleProps } from '@antv/g-lite';
2 | import { Path } from '@antv/g-lite';
3 | import { PathArray } from '@antv/util';
4 |
5 | export interface MarkerStyleProps extends BaseStyleProps {
6 | x?: string | number;
7 | y?: string | number;
8 | symbol?: 'circle' | 'square' | 'arrow';
9 | radius?: string | number;
10 | }
11 |
12 | const SYMBOLS = {
13 | circle(x, y, r): PathArray {
14 | return [
15 | ['M', x - r, y],
16 | ['A', r, r, 0, 1, 0, x + r, y],
17 | ['A', r, r, 0, 1, 0, x - r, y],
18 | ];
19 | },
20 |
21 | square(x, y, r): PathArray {
22 | return [
23 | ['M', x - r, y - r],
24 | ['L', x + r, y - r],
25 | ['L', x + r, y + r],
26 | ['L', x - r, y + r],
27 | ['Z'],
28 | ];
29 | },
30 |
31 | arrow(x, y, r): PathArray {
32 | return [
33 | ['M', x - r, y + (2 * r) / Math.sqrt(3)],
34 | ['L', x + r, y + (2 * r) / Math.sqrt(3)],
35 | ['L', x, y - (2 * r) / Math.sqrt(3)],
36 | ['Z'],
37 | ];
38 | },
39 | };
40 |
41 | export class Marker extends Path {
42 | parsedStyle: any;
43 |
44 | constructor(config: DisplayObjectConfig) {
45 | super(config);
46 | this.updatePath();
47 | }
48 |
49 | setAttribute(name, value, force?: boolean) {
50 | super.setAttribute(name, value, force);
51 | if (['x', 'y', 'symbol', 'radius'].indexOf(name) > -1) {
52 | this.updatePath();
53 | }
54 | }
55 |
56 | updatePath() {
57 | const { x = 0, y = 0 } = this.parsedStyle;
58 | const { radius, symbol } = this.attributes as MarkerStyleProps;
59 | if (!symbol) return;
60 | const method = SYMBOLS[symbol];
61 | if (!method) return;
62 |
63 | const path = method(x, y, radius);
64 |
65 | super.setAttribute('path', path);
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/packages/f-engine/src/shape/smoothPolyline.ts:
--------------------------------------------------------------------------------
1 | import { Path } from '@antv/g-lite';
2 | import { PathArray } from '@antv/util';
3 | import * as Smooth from './util/smooth';
4 |
5 |
6 | export class SmoothPolyline extends Path {
7 | static tag = 'smooth-polyline';
8 | parsedStyle: any;
9 |
10 | constructor(config) {
11 | super(config);
12 | this.updatePath();
13 | }
14 |
15 | setAttribute(name, value, force?: boolean) {
16 | super.setAttribute(name, value, force);
17 | if (['smooth', 'points', 'step'].indexOf(name) > -1) {
18 | this.updatePath();
19 | }
20 | }
21 |
22 | private updatePath() {
23 | const { smooth, points, step } = this.parsedStyle;
24 | const { points: pos } = points;
25 |
26 | const d: PathArray = [['M', pos[0][0], pos[0][1]]];
27 |
28 | if (smooth) {
29 | const constaint = [
30 | [0, 0],
31 | [1, 1],
32 | ];
33 | const sps = Smooth.smooth(
34 | pos.map((d) => {
35 | return {
36 | x: d[0],
37 | y: d[1],
38 | };
39 | }),
40 | false,
41 | constaint
42 | );
43 |
44 | for (let i = 0, n = sps.length; i < n; i++) {
45 | const sp = sps[i];
46 | d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
47 | }
48 | } else if (step) {
49 | let i;
50 | let l;
51 | switch (step) {
52 | case "start":
53 | for (i = 1, l = pos.length; i < l; i++) {
54 | const x = pos[i - 1][0]
55 | d.push(['L', x, pos[i - 1][1]])
56 | d.push(['L', x, pos[i][1]])
57 | d.push(['L', pos[i][0], pos[i][1]]);
58 | }
59 | break;
60 | case "middle":
61 | for (i = 1, l = pos.length; i < l; i++) {
62 | const x = (pos[i][0] + pos[i - 1][0]) / 2
63 | d.push(['L', x, pos[i - 1][1]])
64 | d.push(['L', x, pos[i][1]])
65 | d.push(['L', pos[i][0], pos[i][1]]);
66 | }
67 | break;
68 | case "end":
69 | for (i = 1, l = pos.length; i < l; i++) {
70 | const x = pos[i][0]
71 | d.push(['L', x, pos[i - 1][1]])
72 | d.push(['L', x, pos[i][1]])
73 | d.push(['L', pos[i][0], pos[i][1]]);
74 | }
75 | break;
76 | }
77 | } else {
78 | let i;
79 | let l;
80 | for (i = 1, l = pos.length - 1; i < l; i++) {
81 | d.push(['L', pos[i][0], pos[i][1]]);
82 | }
83 | d.push(['L', pos[l][0], pos[l][1]]);
84 | }
85 | super.setAttribute('path', d);
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/packages/f-engine/src/shape/util/util.ts:
--------------------------------------------------------------------------------
1 | const polarToCartesian = (
2 | centerX: number,
3 | centerY: number,
4 | radius: number,
5 | angleInRadian: number
6 | ) => {
7 | return {
8 | x: centerX + radius * Math.cos(angleInRadian),
9 | y: centerY + radius * Math.sin(angleInRadian),
10 | };
11 | };
12 |
13 | export { polarToCartesian };
14 |
--------------------------------------------------------------------------------
/packages/f-engine/src/timeline.ts:
--------------------------------------------------------------------------------
1 | import { JSX } from './jsx/jsx-namespace';
2 | import Component from './component';
3 | import Children from './children';
4 | import { isNumber } from '@antv/util';
5 |
6 | export interface TimelineProps {
7 | /**
8 | * @title 起始索引
9 | * @description 开始的组件索引
10 | */
11 | start?: number;
12 | /**
13 | * @title 延迟(ms)
14 | * @description 组件播放的延迟时间
15 | */
16 | delay?: number;
17 | /**
18 | * @title 自动循环
19 | * @description 是否自动循环
20 | */
21 | loop?: boolean;
22 | /**
23 | * @ignore
24 | * 自动播放
25 | */
26 | autoPlay?: boolean;
27 | /**
28 | * @ignore
29 | * 子组件
30 | */
31 | children?: any;
32 | }
33 |
34 | class Timeline extends Component {
35 | index: number;
36 | delay: number;
37 |
38 | private timer: any;
39 |
40 | constructor(props: TimelineProps) {
41 | super(props);
42 | const { delay, start = 0, children, autoPlay } = props;
43 | const count = Children.toArray(children as JSX.Element).length;
44 |
45 | this.state = {
46 | delay,
47 | count,
48 | index: start,
49 | autoPlay,
50 | };
51 | }
52 |
53 | didMount() {
54 | this.animator.on('end', this.next);
55 | }
56 |
57 | willReceiveProps(nextProps: TimelineProps): void {
58 | const { start: nextStart, delay: nextDelay, autoPlay: nextAutoPlay } = nextProps;
59 | const { index, delay, autoPlay } = this.state;
60 |
61 | if (isNumber(nextStart) || nextDelay !== delay || nextAutoPlay !== autoPlay) {
62 | // 更新时清除 setTimeout
63 | clearTimeout(this.timer);
64 | this.setState({
65 | delay: nextDelay,
66 | index: isNumber(nextStart) ? nextStart : index,
67 | autoPlay: nextAutoPlay,
68 | });
69 | }
70 | }
71 |
72 | didUnmount(): void {
73 | this.animator.off('end', this.next);
74 | }
75 |
76 | next = () => {
77 | const { state, props } = this;
78 | const { index, count, delay, autoPlay } = state;
79 | const { loop } = props;
80 |
81 | if (autoPlay === false) {
82 | return;
83 | }
84 | const next = loop ? (index + 1) % count : index + 1;
85 | if (next >= count) {
86 | return;
87 | }
88 | this.timer = setTimeout(() => {
89 | this.setState({
90 | index: next,
91 | });
92 | }, delay || 0);
93 | };
94 |
95 | render() {
96 | const { state, props } = this;
97 | const { children } = props;
98 | const { index } = state;
99 | const childrenArray = Children.toArray(children);
100 | return childrenArray[index];
101 | }
102 | }
103 |
104 | export default Timeline;
105 |
--------------------------------------------------------------------------------
/packages/f-engine/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export * from './jsx';
2 | export * from './shape';
3 |
--------------------------------------------------------------------------------
/packages/f-engine/src/types/jsx.ts:
--------------------------------------------------------------------------------
1 | import { JSX } from '../jsx/jsx-namespace';
2 | import Component from '../component';
3 |
4 | export interface Ref {
5 | current?: T;
6 | }
7 |
8 | export interface IProps {
9 | [key: string]: any;
10 | }
11 |
12 | export interface IState {
13 | [key: string]: any;
14 | }
15 |
16 | export interface IContext {
17 | [key: string]: any;
18 | }
19 |
20 | export type ElementType =
21 | | string
22 | | ((props: IProps, context?: IContext) => JSX.Element | null)
23 | | (new (props: IProps, context?: IContext) => Component);
24 |
25 | export interface FunctionComponent {
26 | (props: P, context?: any): JSX.Element | null;
27 | }
28 |
29 | export interface ComponentClass
{
30 | new (props: P, context?: any): Component;
31 | }
32 |
33 | export type ComponentType = ComponentClass
| FunctionComponent
;
34 |
35 | export type ClassComponent
= ComponentClass;
36 | export type FC = FunctionComponent
;
37 | export type HOC, P = {}, S = {}> = FC & T;
38 |
--------------------------------------------------------------------------------
/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-inject-context-inject-context-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-inject-context-inject-context-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-provider-context-context-type-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-provider-context-context-type-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-provider-context-create-context-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-provider-context-create-context-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-provider-context-create-context-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/__image_snapshots__/create-context-test-tsx-create-context-provider-context-create-context-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/FragFunction.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Fragment, Canvas, Component } from '../../src';
2 | import { createContext, delay } from '../util';
3 | const context = createContext();
4 | import { Renderer } from '@antv/g-mobile-canvas';
5 | class View extends Component {
6 | render() {
7 | return (
8 | <>
9 |
18 |
19 | );
20 | }
21 | }
22 |
23 | describe('Canvas', () => {
24 | it('Fragment Function', async () => {
25 | const renderer = new Renderer();
26 |
27 | const { props } = (
28 |
31 | );
32 |
33 | const canvas = new Canvas(props);
34 | canvas.render();
35 |
36 | await delay(100);
37 | expect(context).toMatchImageSnapshot();
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animate-false-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animate-false-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-3-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-3-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-4-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-animation-4-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-clip-animation-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-clip-animation-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-component-animation-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-component-animation-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-component-update-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-component-update-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-duration-empty-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-duration-empty-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-property-empty-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/animation-test-tsx-动画-property-empty-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/diff-test-tsx-canvas-渲染顺序-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/diff-test-tsx-canvas-渲染顺序-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/diff-test-tsx-canvas-渲染顺序-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/diff-test-tsx-canvas-渲染顺序-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/frag-function-test-tsx-canvas-fragment-function-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/frag-function-test-tsx-canvas-fragment-function-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/index-test-tsx-canvas-g-render-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/index-test-tsx-canvas-g-render-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-component-layout-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-component-layout-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-layout-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-layout-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-layout-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-layout-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-line-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-line-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-marker-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-marker-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-text-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-text-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-text-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/layout-test-tsx-canvas-text-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/resize-test-tsx-canvas-resize-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/resize-test-tsx-canvas-resize-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/resize-test-tsx-canvas-resize-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/resize-test-tsx-canvas-resize-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/__image_snapshots__/resize-test-tsx-canvas-resize-context-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/__image_snapshots__/resize-test-tsx-canvas-resize-context-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/diff.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component } from '../../src';
2 | import { createContext, delay } from '../util';
3 | const context = createContext();
4 |
5 | class Circle extends Component {
6 | render() {
7 | return (
8 |
16 | );
17 | }
18 | }
19 |
20 | function Rect() {
21 | return (
22 |
31 | );
32 | }
33 |
34 | describe('Canvas', () => {
35 | it('渲染顺序', async () => {
36 | const { props } = (
37 |
42 | );
43 |
44 | const canvas = new Canvas(props);
45 | await canvas.render();
46 | await delay(100);
47 |
48 | expect(context).toMatchImageSnapshot();
49 |
50 | const update = (
51 |
56 | );
57 |
58 | await canvas.update(update.props);
59 |
60 | await delay(100);
61 |
62 | expect(context).toMatchImageSnapshot();
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/render/__image_snapshots__/compute-layout-test-tsx-compute-layout-布局计算-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/render/__image_snapshots__/compute-layout-test-tsx-compute-layout-布局计算-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/render/__image_snapshots__/create-animation-test-tsx-图形绘制顺序-图形绘制顺序-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/render/__image_snapshots__/create-animation-test-tsx-图形绘制顺序-图形绘制顺序-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/render/__image_snapshots__/create-animation-test-tsx-图形绘制顺序-图形绘制顺序-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/canvas/render/__image_snapshots__/create-animation-test-tsx-图形绘制顺序-图形绘制顺序-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/render/computeLayout.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, computeLayout } from '../../../src';
2 | import { createContext, delay } from '../../util';
3 |
4 | const getElementsByClassNameFn = jest.fn();
5 |
6 | class View extends Component {
7 | private maxWidth: number;
8 |
9 | willMount(): void {
10 | const node = computeLayout(this, this.render());
11 |
12 | getElementsByClassNameFn(node.getElementsByClassName('text'));
13 |
14 | const { children } = node;
15 | let maxWidth = 0;
16 | children.forEach((child: any) => {
17 | const { layout } = child;
18 | const { width } = layout;
19 | maxWidth = Math.max(maxWidth, width);
20 | });
21 | this.maxWidth = maxWidth;
22 | }
23 | render() {
24 | const { maxWidth } = this;
25 | return (
26 |
33 |
41 |
48 |
49 | );
50 | }
51 | }
52 |
53 | describe('computeLayout', () => {
54 | it('布局计算', async () => {
55 | const context = createContext();
56 | const { props } = (
57 |
60 | );
61 |
62 | const canvas = new Canvas(props);
63 | await canvas.render();
64 |
65 | await delay(100);
66 |
67 | expect(context).toMatchImageSnapshot();
68 | expect(getElementsByClassNameFn.mock.calls[0][0].length).toEqual(2);
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/render/createAnimation.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, computeLayout } from '../../../src';
2 | import { createContext, delay } from '../../util';
3 |
4 | class Rect extends Component {
5 | render() {
6 | const { color } = this.props;
7 | return (
8 |
17 | );
18 | }
19 | }
20 |
21 | class Circle extends Component {
22 | render() {
23 | const { color } = this.props;
24 | return (
25 |
33 | );
34 | }
35 | }
36 |
37 | class Circle1 extends Component {
38 | render() {
39 | const { color } = this.props;
40 | return (
41 |
49 | );
50 | }
51 | }
52 |
53 | describe('图形绘制顺序', () => {
54 | it('图形绘制顺序', async () => {
55 | const context = createContext();
56 | const { props } = (
57 |
61 | );
62 |
63 | const canvas = new Canvas(props);
64 | await canvas.render();
65 |
66 | await delay(500);
67 | expect(context).toMatchImageSnapshot();
68 |
69 | const update = (
70 |
74 | );
75 | await delay(500);
76 | await canvas.update(update.props);
77 | expect(context).toMatchImageSnapshot();
78 | });
79 | });
80 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/render/vnodeUpdate.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, createRef } from '../../../src';
2 | import { createContext, delay } from '../../util';
3 |
4 | class Rect extends Component {
5 | render() {
6 | const { color } = this.props;
7 | return (
8 |
17 | );
18 | }
19 | }
20 |
21 | describe('vnode 更新', () => {
22 | it('vnode 更新', async () => {
23 | const ref = createRef();
24 |
25 | const context = createContext();
26 | const { props } = (
27 |
30 | );
31 |
32 | const canvas = new Canvas(props);
33 | await canvas.render();
34 |
35 | const update = (
36 |
39 | );
40 | await delay(500);
41 | await canvas.update(update.props);
42 |
43 | expect(ref.current._vNode.props.update).toBe(true);
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/resize.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, JSX } from '../../src';
2 | import { createContext, delay } from '../util';
3 | const context = createContext();
4 | import { Renderer } from '@antv/g-mobile-canvas';
5 | const Background = (props, context) => {
6 | const { layout, color } = props;
7 | return (
8 |
9 |
18 |
19 | );
20 | };
21 |
22 | describe('Canvas', () => {
23 | it('resize', async () => {
24 | const renderer = new Renderer();
25 |
26 | const { props } = (
27 |
50 | );
51 |
52 | const canvas = new Canvas(props);
53 | await canvas.render();
54 |
55 | await delay(200);
56 | expect(context).toMatchImageSnapshot();
57 |
58 | await canvas.resize(100, 50);
59 | await delay(200);
60 |
61 | expect(context).toMatchImageSnapshot();
62 | });
63 |
64 | it('resize context', async () => {
65 | const renderer = new Renderer();
66 |
67 | const { props } = (
68 |
71 | );
72 |
73 | const canvas = new Canvas(props);
74 | await canvas.render();
75 |
76 | await delay(200);
77 |
78 | await canvas.resize(200, 100);
79 | await delay(200);
80 |
81 | expect(context).toMatchImageSnapshot();
82 | });
83 | });
84 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/svg/svg.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas } from '../../../src';
2 | import { Renderer } from '@antv/g-mobile-svg';
3 |
4 | const container = document.createElement('div');
5 | container.style.width = '300px';
6 | container.style.height = '200px';
7 | document.body.appendChild(container);
8 |
9 | describe('svg', () => {
10 | it('svg renderer', async () => {
11 | const renderer = new Renderer();
12 | const { props } = (
13 |
22 | );
23 |
24 | const canvas = new Canvas(props);
25 | await canvas.render();
26 |
27 | const dataURL = await canvas.toDataURL();
28 | expect(dataURL).toBe(
29 | 'data:image/svg+xml;charset=utf8,%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20color-interpolation-filters%3D%22sRGB%22%20style%3D%22background%3A%20transparent%3B%22%3E%3Cdefs%2F%3E%3Cg%20id%3D%22g-svg-camera%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20id%3D%22g-root%22%20fill%3D%22none%22%20stroke%3D%22none%22%20visibility%3D%22visible%22%20font-size%3D%2212px%22%20font-family%3D%22%26quot%3BHelvetica%20Neue%26quot%3B%2C%20Helvetica%2C%20%26quot%3BPingFang%20SC%26quot%3B%2C%20%26quot%3BHiragino%20Sans%20GB%26quot%3B%2C%20%26quot%3BMicrosoft%20YaHei%26quot%3B%2C%20Arial%2C%20sans-serif%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20font-variant%3D%22normal%22%20text-anchor%3D%22left%22%20stroke-dashoffset%3D%220px%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cpath%20id%3D%22g-svg-1%22%20fill%3D%22rgba(255%2C0%2C0%2C1)%22%20d%3D%22M%200%2C0%20l%20100%2C0%20l%200%2C100%20l-100%200%20z%22%20stroke%3D%22none%22%20width%3D%22100px%22%20height%3D%22100px%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
30 | );
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/theme.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component } from '../../src';
2 | import { createContext, delay } from '../util';
3 | const context = createContext();
4 |
5 | class Text extends Component {
6 | width: number;
7 |
8 | constructor(props, context) {
9 | super(props, context);
10 | const { width } = this.context.measureText('0.123', {});
11 | this.width = width;
12 | }
13 | }
14 |
15 | describe('Theme', () => {
16 | describe('字体主题设置', () => {
17 | it('默认主题', async () => {
18 | const textRef = { current: null };
19 | const { props } = (
20 |
23 | );
24 |
25 | const canvas = new Canvas(props);
26 | canvas.render();
27 | await delay(0);
28 |
29 | expect(textRef.current.width).toBeCloseTo(31.02);
30 | });
31 |
32 | it('自定义设置', async () => {
33 | const textRef = { current: null };
34 | const { props } = (
35 |
44 | );
45 |
46 | const canvas = new Canvas(props);
47 | canvas.render();
48 | await delay(0);
49 |
50 | expect(textRef.current.width).toBeCloseTo(30.916);
51 | });
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/util/px2hd.test.ts:
--------------------------------------------------------------------------------
1 | import { px2hd } from '../../../src/canvas/util';
2 |
3 | describe('px2hd', () => {
4 | it('px2hd', () => {
5 | expect(px2hd('')).toBe('');
6 | expect(px2hd('0')).toBe('0');
7 | expect(px2hd(0)).toBe(0);
8 | expect(px2hd(1)).toBe(1);
9 | expect(px2hd('10px')).toBe(5);
10 | expect(px2hd('10.0px')).toBe(5);
11 | expect(px2hd('10.00px')).toBe(5);
12 | expect(px2hd('10.px')).toBe('10.px');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/packages/f-engine/test/canvas/webgl/webgl.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas } from '../../../src';
2 | import { Renderer } from '@antv/g-mobile-webgl';
3 |
4 | const canvasEl = document.createElement('canvas');
5 | canvasEl.style.display = 'block';
6 | canvasEl.style.width = '300px';
7 | canvasEl.style.height = '200px';
8 | document.body.appendChild(canvasEl);
9 |
10 | const context = canvasEl.getContext('webgl');
11 |
12 | describe('webgl', () => {
13 | it('webgl renderer', async () => {
14 | const renderer = new Renderer();
15 | const { props } = (
16 |
25 | );
26 |
27 | const canvas = new Canvas(props);
28 | await canvas.render();
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/packages/f-engine/test/component/component.test.tsx:
--------------------------------------------------------------------------------
1 | import { Canvas, Component, jsx } from '../../src';
2 | import { createContext, delay } from '../util';
3 |
4 | describe('base/component', () => {
5 | it('子组件的 View props 更新后，则重新渲染', async () => {
6 | const context = createContext('组件props更新后重绘');
7 | const mockCallback = jest.fn();
8 |
9 | class StatedComponent extends Component {
10 | didMount() {
11 | this.setState({ active: true });
12 | }
13 | render() {
14 | const { state } = this;
15 | const { active } = state;
16 | mockCallback(active);
17 | return (
18 |
25 | );
26 | }
27 | }
28 |
29 | const { props } = (
30 |
33 | );
34 |
35 | const canvas = new Canvas(props);
36 | canvas.render();
37 |
38 | await delay(50);
39 |
40 | expect(mockCallback.mock.calls).toEqual([[undefined], [true]]);
41 | });
42 |
43 | it('destroy 组件不再更新', async () => {
44 | const context = createContext('组件销毁后不再更新');
45 | const mockCallback = jest.fn();
46 |
47 | class StatedComponent extends Component {
48 | didMount() {
49 | this.setState({ active: true }, mockCallback);
50 | }
51 | render() {
52 | const { state } = this;
53 | const { active } = state;
54 | return (
55 |
62 | );
63 | }
64 | }
65 |
66 | const { props } = (
67 |
71 | );
72 |
73 | const canvas = new Canvas(props);
74 | await canvas.render();
75 |
76 | const newChildren = ;
77 | await canvas.update({ children: newChildren });
78 |
79 | await delay(500);
80 | expect(mockCallback.mock.calls.length).toBe(1);
81 | });
82 | });
83 |
--------------------------------------------------------------------------------
/packages/f-engine/test/component/equal.test.tsx:
--------------------------------------------------------------------------------
1 | import equal from '../../src/canvas/equal';
2 |
3 | describe('equal', () => {
4 | it('equal', () => {
5 | const fn = () => {};
6 |
7 | expect(equal(0, 0)).toBe(true);
8 | expect(equal(0, 2)).toBe(false);
9 | expect(equal(NaN, NaN)).toBe(true);
10 |
11 | expect(equal(null, null)).toBe(true);
12 | expect(equal(null, undefined)).toBe(false);
13 | expect(equal(undefined, undefined)).toBe(true);
14 |
15 | expect(equal(fn, fn)).toBe(true);
16 | expect(
17 | equal(
18 | () => {},
19 | () => {
20 | console.log(1);
21 | },
22 | ),
23 | ).toBe(false);
24 |
25 | expect(equal([1, 2], [1, 2])).toBe(true);
26 | expect(equal([1, 2], [1, 3])).toBe(false);
27 |
28 | expect(equal({ a: 1 }, { a: 1 })).toBe(true);
29 | expect(equal({ a: 1 }, { a: 1, b: 2 })).toBe(false);
30 | expect(equal({ a: 1, b: 2 }, { a: 1, b: NaN })).toBe(false);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/packages/f-engine/test/g.test.tsx:
--------------------------------------------------------------------------------
1 | import { Canvas, CanvasEvent, Circle, convertToPath, Path, Rect } from '@antv/g-lite';
2 | import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
3 | import '@antv/g-web-animations-api';
4 | import { createContext, delay } from './util';
5 | const context = createContext();
6 |
7 | const canvasRenderer = new CanvasRenderer();
8 |
9 | const canvas = new Canvas({
10 | canvas: context.canvas,
11 | width: 600,
12 | height: 500,
13 | renderer: canvasRenderer,
14 | });
15 |
16 | describe('G 的测试使用', () => {
17 | it('test', async () => {
18 | await canvas.ready;
19 |
20 | await delay(1000);
21 |
22 | /**
23 | * Path -> Circle
24 | */
25 | const circle = new Circle({
26 | style: {
27 | cx: 50,
28 | cy: 50,
29 | r: 20,
30 | fill: 'red',
31 | },
32 | });
33 | const circlePathStr = convertToPath(circle);
34 |
35 | /**
36 | * Rect -> Circle
37 | */
38 | const rect = new Rect({
39 | style: {
40 | x: 10,
41 | y: 10,
42 | width: 60,
43 | height: 50,
44 | fill: 'red',
45 | },
46 | });
47 |
48 | canvas.appendChild(rect);
49 | const rectPathStr = convertToPath(rect);
50 |
51 | const path = new Path({
52 | style: {
53 | fill: 'red',
54 | },
55 | });
56 | rect.replaceWith(path);
57 |
58 | path.style.fill = 'red';
59 | path.style.path = rectPathStr;
60 |
61 | // canvas.appendChild(pathF);
62 |
63 | path.animate([{ path: rectPathStr }, { path: circlePathStr }], {
64 | duration: 2500,
65 | easing: 'ease',
66 | // iterations: Infinity,
67 | // direction: 'alternate',
68 | fill: 'both',
69 | });
70 |
71 | await delay(1000);
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/packages/f-engine/test/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from '../src';
2 |
3 | describe('Index', () => {
4 | it('Index', () => {
5 | expect(Component).not.toBe(null);
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/packages/f-engine/test/jsx/jsx-automatic.test.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxRuntime automatic */
2 | /** @jsxImportSource ../../src/jsx */
3 |
4 | import { JSX } from '../../src/jsx/jsx-namespace';
5 |
6 | describe('jsx automatic 模式', () => {
7 | it('tagName one children', () => {
8 | const ref = {};
9 | const group = (
10 |
11 |
12 |
13 | );
14 |
15 | expect(group.type).toBe('group');
16 | expect(group.ref === ref).toBe(true);
17 | expect(group.props.a).toBe(1);
18 | expect(group.props.children.type).toBe('text');
19 | });
20 |
21 | it('one children map', () => {
22 | const group = (
23 |
24 | {[1, 2].map((item) => {
25 | return ;
26 | })}
27 |
28 | );
29 |
30 | expect(group.props.children.length).toBe(2);
31 | expect(group.props.children[0].type).toBe('text');
32 | });
33 |
34 | it('tagName multiple children', () => {
35 | const ref = {};
36 | const group = (
37 |
38 |
39 |
40 | {true ? null : }
41 | {[1, 2].map((item) => {
42 | return ;
43 | })}
44 |
45 | );
46 |
47 | expect(group.type).toBe('group');
48 | expect(group.ref === ref).toBe(true);
49 | expect(group.props.a).toBe(1);
50 | expect(group.props.children.length).toBe(4);
51 | expect(group.props.children[2]).toBe(null);
52 | expect(group.props.children[3].length).toBe(2);
53 | expect(group.props.children[3][0].type).toBe('text');
54 | });
55 |
56 | it('fragment', () => {
57 | const fragment = (
58 | <>
59 |
60 |
61 | );
62 | expect(typeof fragment.type).toBe('function');
63 | expect(fragment.props.children.type).toBe('text');
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/packages/f-engine/test/jsx/jsx-classic.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Fragment } from '../../src/jsx';
2 |
3 | describe('jsx classic 模式', () => {
4 | it('tagName one children', () => {
5 | const ref = {};
6 | const group = (
7 |
8 |
9 |
10 | );
11 |
12 | expect(group.type).toBe('group');
13 | expect(group.ref === ref).toBe(true);
14 | expect(group.props.a).toBe(1);
15 | expect(group.props.children.type).toBe('text');
16 | });
17 |
18 | it('one children map', () => {
19 | const group = (
20 |
21 | {[1, 2].map((item) => {
22 | return ;
23 | })}
24 |
25 | );
26 |
27 | expect(group.props.children.length).toBe(2);
28 | expect(group.props.children[0].type).toBe('text');
29 | });
30 |
31 | it('tagName multiple children', () => {
32 | const ref = {};
33 | const group = (
34 |
35 |
36 |
37 | {true ? null : }
38 | {[1, 2].map((item) => {
39 | return ;
40 | })}
41 |
42 | );
43 |
44 | expect(group.type).toBe('group');
45 | expect(group.ref === ref).toBe(true);
46 | expect(group.props.a).toBe(1);
47 | expect(group.props.children.length).toBe(4);
48 | expect(group.props.children[2]).toBe(null);
49 | expect(group.props.children[3].length).toBe(2);
50 | expect(group.props.children[3][0].type).toBe('text');
51 | });
52 |
53 | it('fragment', () => {
54 | const fragment = (
55 | <>
56 |
57 |
58 | );
59 | expect(typeof fragment.type).toBe('function');
60 | expect(fragment.props.children.type).toBe('text');
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-clip-animation-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-clip-animation-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-custom-shape-animation-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-custom-shape-animation-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-line-offset-path-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-line-offset-path-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-offset-path-为-ref-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-offset-path-为-ref-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/animation-test-tsx-canvas-text-number-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-cx-cy-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-cx-cy-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-大角-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-大角-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-大角-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-大角-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-弧度-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-弧度-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-整圆-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-整圆-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-逆时针-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-逆时针-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-默认-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-arc-默认-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/clip-test-tsx-clip-animation-clip-function-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/clip-test-tsx-clip-animation-clip-function-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/clip-test-tsx-clip-clip-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/clip-test-tsx-clip-clip-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/clip-test-tsx-clip-clip-function-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/clip-test-tsx-clip-clip-function-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/index-test-tsx-canvas-arc-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/index-test-tsx-canvas-arc-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/index-test-tsx-canvas-arrow-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/index-test-tsx-canvas-arrow-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-polyline-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-polyline-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-step-end-polyline-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-step-end-polyline-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-step-middle-polyline-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-step-middle-polyline-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-step-start-polyline-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/polyline-test-tsx-polyline-step-start-polyline-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/register-tag-test-tsx-自定义标签-使用自定义标签-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/register-tag-test-tsx-自定义标签-使用自定义标签-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-clockwise-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-clockwise-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-radius-不同-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-radius-不同-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-sector-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-sector-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-sector-clip-clip-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-sector-clip-clip-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-临界数值-0-angle-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-临界数值-0-angle-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-内角合并-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-内角合并-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-整圆-逆时针-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-整圆-逆时针-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-整圆-顺时针-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-整圆-顺时针-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-极小角度扇形区域-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-极小角度扇形区域-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-逆时针绘制-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/sector-test-tsx-sector-逆时针绘制-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/__image_snapshots__/z-index-test-tsx-z-index-z-index-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/shape/__image_snapshots__/z-index-test-tsx-z-index-z-index-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/registerTag.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, registerTag } from '../../src';
2 | import { createContext, delay } from '../util';
3 | const context = createContext();
4 | import { Renderer } from '@antv/g-mobile-canvas';
5 | import { Path } from '@antv/g-lite';
6 |
7 | class CustomTag extends Path {}
8 |
9 | registerTag('customTag', CustomTag);
10 |
11 | describe('自定义标签', () => {
12 | it('使用自定义标签', async () => {
13 | const renderer = new Renderer();
14 |
15 | const { props } = (
16 |
28 | );
29 |
30 | const canvas = new Canvas(props);
31 | canvas.render();
32 | await delay(200);
33 | expect(context).toMatchImageSnapshot();
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/packages/f-engine/test/shape/zIndex.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component } from '../../src';
2 | import { createContext, delay } from '../util';
3 | const context = createContext();
4 | import { Renderer } from '@antv/g-mobile-canvas';
5 |
6 | class Rect extends Component {
7 | render() {
8 | const { fill } = this.props;
9 | return (
10 |
19 | );
20 | }
21 | }
22 |
23 | describe('zIndex', () => {
24 | it('zIndex', async () => {
25 | const renderer = new Renderer();
26 |
27 | const { props } = (
28 |
32 | );
33 |
34 | const canvas = new Canvas(props);
35 | canvas.render();
36 | await delay(200);
37 | expect(context).toMatchImageSnapshot();
38 |
39 | const update = (
40 |
44 | );
45 | canvas.update(update.props);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/component-test-tsx-测试组件变化-tranform-ref-嵌套-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/component-test-tsx-测试组件变化-tranform-ref-嵌套-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/component-test-tsx-测试组件变化-指定-tranform-ref-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/component-test-tsx-测试组件变化-指定-tranform-ref-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/component-test-tsx-测试组件变化-组件切换-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/component-test-tsx-测试组件变化-组件切换-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-finish-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-finish-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-key-frames-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-key-frames-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-key-frames-连续变化-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-key-frames-连续变化-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-leave-动画-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-leave-动画-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-pause-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-pause-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-props-未变-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-props-未变-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-props-未变-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-props-未变-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-子组件-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-子组件-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-播放中finish-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-播放中finish-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-暂停完播放-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/key-frames-test-tsx-player-暂停完播放-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/morph-test-tsx-形变动画-circle-到-group-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/morph-test-tsx-形变动画-circle-到-group-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/morph-test-tsx-形变动画-group-到-circle-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/morph-test-tsx-形变动画-group-到-circle-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-ref-func-test-tsx-player-go-to等于总时长时-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-ref-func-test-tsx-player-go-to等于总时长时-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-clip-增加-delete-after-complete-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-clip-增加-delete-after-complete-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-暂停-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-暂停-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-结束后播放-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-结束后播放-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-跳转超出总时长-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-clip-animation-跳转超出总时长-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-go-to-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-go-to-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-go-to-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-go-to-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-go-to-3-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-go-to-3-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-多组动画回跳-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/player-test-tsx-player-多组动画回跳-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/timeline-test-tsx-timeline-timeline-播放-1-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/timeline-test-tsx-timeline-timeline-播放-1-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/__image_snapshots__/timeline-test-tsx-timeline-timeline-播放-2-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-engine/test/timeline/__image_snapshots__/timeline-test-tsx-timeline-timeline-播放-2-snap.png
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/component.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, Timeline, Fragment } from '../../src';
2 | import { createContext, delay } from '../util';
3 |
4 | class Component1 extends Component {
5 | render() {
6 | return (
7 |
22 | );
23 | }
24 | }
25 |
26 | class Component2 extends Component {
27 | render() {
28 | return (
29 |
43 | );
44 | }
45 | }
46 |
47 | class Wrapper extends Component {
48 | render() {
49 | return ;
50 | }
51 | }
52 |
53 | describe('测试组件变化', () => {
54 | it('组件切换', async () => {
55 | const context = createContext();
56 | const { props } = (
57 |
63 | );
64 |
65 | const canvas = new Canvas(props);
66 | await delay(100);
67 | await canvas.render();
68 | await delay(1000);
69 |
70 | expect(context).toMatchImageSnapshot();
71 | });
72 |
73 | it('指定 tranformRef', async () => {
74 | const context = createContext();
75 | const ref = {};
76 | const { props } = (
77 |
85 | );
86 |
87 | const canvas = new Canvas(props);
88 | await delay(100);
89 | await canvas.render();
90 | await delay(1000);
91 |
92 | expect(context).toMatchImageSnapshot();
93 | });
94 |
95 | it('tranformRef 嵌套', async () => {
96 | const context = createContext();
97 | const ref = {};
98 | const { props } = (
99 |
105 | );
106 |
107 | const canvas = new Canvas(props);
108 | await delay(100);
109 | await canvas.render();
110 | await delay(1000);
111 |
112 | expect(context).toMatchImageSnapshot();
113 | });
114 | });
115 |
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/morph.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, Timeline, Fragment } from '../../src';
2 | import { createContext, delay } from '../util';
3 |
4 | class Group extends Component {
5 | render() {
6 | return (
7 |
8 |
23 |
24 |
39 |
40 | );
41 | }
42 | }
43 |
44 | class Circle extends Component {
45 | render() {
46 | return (
47 |
61 | );
62 | }
63 | }
64 |
65 | describe('形变动画', () => {
66 | it('group 到 circle', async () => {
67 | const context = createContext();
68 | const { props } = (
69 |
75 | );
76 |
77 | const canvas = new Canvas(props);
78 | await delay(100);
79 | await canvas.render();
80 | await delay(1000);
81 |
82 | expect(context).toMatchImageSnapshot();
83 | });
84 |
85 | it('circle 到 group', async () => {
86 | const context = createContext();
87 | const { props } = (
88 |
94 | );
95 |
96 | const canvas = new Canvas(props);
97 | await delay(100);
98 | await canvas.render();
99 | await delay(1000);
100 |
101 | expect(context).toMatchImageSnapshot();
102 | });
103 | });
104 |
--------------------------------------------------------------------------------
/packages/f-engine/test/timeline/playerRefFunc.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, Player, Timeline } from '../../src';
2 | import { createContext, delay } from '../util';
3 |
4 | describe('player', () => {
5 | class View extends Component {
6 | render() {
7 | const {
8 | width = '80px',
9 | height = '80px',
10 | opacity = 1,
11 | fill = 'red',
12 | visible = false,
13 | } = this.props;
14 | if (!visible) return;
15 | return (
16 |
39 | );
40 | }
41 | }
42 |
43 | it('goTo等于总时长时', async () => {
44 | const context = createContext('跳转至某时间');
45 | const ref = { current: null };
46 | const { props } = (
47 |
80 | );
81 |
82 | const canvas = new Canvas(props);
83 | await canvas.render();
84 | await delay(10);
85 |
86 | ref.current.goTo(2000);
87 | await delay(200);
88 | expect(context).toMatchImageSnapshot();
89 | });
90 | });
91 |
--------------------------------------------------------------------------------
/packages/f-engine/test/types.test.tsx:
--------------------------------------------------------------------------------
1 | import { jsx, Canvas, Component, createRef } from '../src';
2 | import { createContext } from './util';
3 |
4 | const context = createContext();
5 |
6 | interface TestProps {
7 | fill?: string;
8 | }
9 |
10 | class Test extends Component {
11 | render() {
12 | return null;
13 | }
14 | }
15 |
16 | describe('types', () => {
17 | it('key & ref', () => {
18 | const ref = createRef();
19 | const { props } = (
20 |
25 | );
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/packages/f-engine/test/util.ts:
--------------------------------------------------------------------------------
1 | export * from '@antv/f-test-utils';
2 |
--------------------------------------------------------------------------------
/packages/f-engine/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/f-engine/typings.d.ts:
--------------------------------------------------------------------------------
1 | import '../../typings';
2 |
--------------------------------------------------------------------------------
/packages/f-lottie/.npmignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # lock
9 | package-lock.json
10 |
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 |
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 |
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 |
23 | # nyc test coverage
24 | .nyc_output
25 |
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 |
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 |
32 | # node-waf configuration
33 | .lock-wscript
34 |
35 | # Compiled binary addons (http://nodejs.org/api/addons.html)
36 | build/Release
37 |
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 |
42 | # Typescript v1 declaration files
43 | typings/
44 |
45 | # Optional npm cache directory
46 | .npm
47 |
48 | # Optional eslint cache
49 | .eslintcache
50 |
51 | # Optional REPL history
52 | .node_repl_history
53 |
54 | # Output of 'npm pack'
55 | *.tgz
56 |
57 | # Yarn Integrity file
58 | .yarn-integrity
59 |
60 | # dotenv environment variables file
61 | .env
62 |
63 | .DS_Store
64 |
65 | # npmignore - content above this line is automatically generated and modifications may be omitted
66 | # see npmjs.com/npmignore for more details.
67 | test
68 |
69 | *.sw*
70 | *.un~
71 | .idea
72 | bin
73 | demos
74 | docs
75 | temp
76 | webpack-dev.config.js
77 | webpack.config.js
78 | examples
79 | site
80 | gatsby-browser.js
81 | gatsby-config.js
82 | .cache
83 | public
84 |
--------------------------------------------------------------------------------
/packages/f-lottie/LICENSE:
--------------------------------------------------------------------------------
1 | MIT LICENSE
2 |
3 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | "Software"), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/packages/f-lottie/README.md:
--------------------------------------------------------------------------------
1 | FEngine 的 [Lottie](https://airbnb.design/lottie/) 播放组件
2 |
3 | See our GitHub [https://github.com/antvis/FEngine](https://github.com/antvis/FEngine) for more information
4 |
5 | ## Install
6 |
7 | Using npm:
8 |
9 | ```sh
10 | npm install --save @antv/f-lottie
11 | ```
12 |
13 | or using yarn:
14 |
15 | ```sh
16 | yarn add @antv/f-lottie
17 | ```
18 |
19 | ## License
20 |
21 | [MIT license](./LICENSE).
22 |
--------------------------------------------------------------------------------
/packages/f-lottie/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@antv/f-lottie",
3 | "version": "1.5.0",
4 | "description": "FEngine for Lottie",
5 | "main": "lib/index.js",
6 | "module": "es/index.js",
7 | "types": "es/index.d.ts",
8 | "keywords": [
9 | "antv",
10 | "f2",
11 | "chart",
12 | "charts",
13 | "mobile",
14 | "visualization",
15 | "lottie"
16 | ],
17 | "dependencies": {
18 | "@antv/f-engine": "1.5.0",
19 | "@antv/g-lottie-player": "~0.2.0",
20 | "@babel/runtime": "^7.12.5",
21 | "tslib": "^2.3.1"
22 | },
23 | "devDependencies": {
24 | "@antv/f-test-utils": "1.0.9"
25 | },
26 | "homepage": "https://f2.antv.vision",
27 | "author": "https://github.com/orgs/antvis/people",
28 | "license": "MIT",
29 | "repository": {
30 | "type": "git",
31 | "url": "https://github.com/antvis/f2"
32 | },
33 | "bugs": {
34 | "url": "https://github.com/antvis/f2/issues"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/f-lottie/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Component, createRef, jsx, Ref, AnimationProps } from '@antv/f-engine';
2 | import { loadAnimation } from '@antv/g-lottie-player';
3 |
4 | interface LottieProps {
5 | // Lottie Json
6 | data: any;
7 | options?: {
8 | // 是否循环播放 次数 ｜ 无限
9 | loop?: number | boolean;
10 | // 是否自动播放
11 | autoplay?: boolean;
12 | };
13 | style?: {
14 | width?: number;
15 | height?: number;
16 | x?: number;
17 | y?: number;
18 | };
19 | play?: {
20 | speed?: number;
21 | // 开始帧
22 | start?: number;
23 | // 结束帧
24 | end?: number;
25 | };
26 | animation?: AnimationProps;
27 | }
28 |
29 | class Lottie extends Component {
30 | size: { width: number; height: number };
31 | ref: Ref;
32 | animation: any;
33 |
34 | constructor(props) {
35 | super(props);
36 | this.ref = createRef();
37 | }
38 |
39 | didMount() {
40 | this.addLottie();
41 | }
42 |
43 | willUpdate() {
44 | this.addLottie();
45 | }
46 |
47 | addLottie = () => {
48 | const { props, context } = this;
49 | const { data, options, play } = props;
50 | const { canvas } = context;
51 |
52 | if (!data) return;
53 |
54 | // 文档流后挂载lottie
55 | canvas.ready.then(() => {
56 | this.animation = this.animation ? this.animation : loadAnimation(data, options);
57 | this.animation.render(this.ref.current);
58 |
59 | this.size = this.animation.size();
60 | this.updateSize();
61 |
62 | // 播放控制
63 | if (play) {
64 | const { speed = 1, start = 0, end = this.animation.getDuration(true) } = play;
65 | this.animation.setSpeed(speed);
66 | this.animation.playSegments([start, end]);
67 | }
68 | });
69 | };
70 |
71 | updateSize = () => {
72 | const { width: currentWidth, height: currentHeight } = this.size;
73 | const { style } = this.props;
74 | if (!style) return;
75 |
76 | const { width = currentWidth, height = currentHeight } = style;
77 |
78 | this.ref.current.scale(width / currentWidth, height / currentHeight);
79 | this.size = {
80 | width,
81 | height,
82 | };
83 | };
84 |
85 | render() {
86 | const { style, animation } = this.props;
87 | return ;
88 | }
89 | }
90 |
91 | export default Lottie;
92 |
--------------------------------------------------------------------------------
/packages/f-lottie/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/f-lottie/typings.d.ts:
--------------------------------------------------------------------------------
1 | import '../../typings';
2 |
--------------------------------------------------------------------------------
/packages/f-my/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['../../.eslintrc.js'],
3 | globals: {
4 | my: 'readonly',
5 | App: 'readonly',
6 | Page: 'readonly',
7 | Component: 'readonly',
8 | },
9 | };
10 |
--------------------------------------------------------------------------------
/packages/f-my/.npmignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # lock
9 | package-lock.json
10 |
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 |
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 |
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 |
23 | # nyc test coverage
24 | .nyc_output
25 |
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 |
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 |
32 | # node-waf configuration
33 | .lock-wscript
34 |
35 | # Compiled binary addons (http://nodejs.org/api/addons.html)
36 | build/Release
37 |
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 |
42 | # Typescript v1 declaration files
43 | typings/
44 |
45 | # Optional npm cache directory
46 | .npm
47 |
48 | # Optional eslint cache
49 | .eslintcache
50 |
51 | # Optional REPL history
52 | .node_repl_history
53 |
54 | # Output of 'npm pack'
55 | *.tgz
56 |
57 | # Yarn Integrity file
58 | .yarn-integrity
59 |
60 | # dotenv environment variables file
61 | .env
62 |
63 | .DS_Store
64 |
65 | # npmignore - content above this line is automatically generated and modifications may be omitted
66 | # see npmjs.com/npmignore for more details.
67 | test
68 |
69 | *.sw*
70 | *.un~
71 | .idea
72 | bin
73 | demos
74 | docs
75 | temp
76 | webpack-dev.config.js
77 | webpack.config.js
78 | examples
79 | site
80 | gatsby-browser.js
81 | gatsby-config.js
82 | .cache
83 | public
84 |
--------------------------------------------------------------------------------
/packages/f-my/LICENSE:
--------------------------------------------------------------------------------
1 | MIT LICENSE
2 |
3 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | "Software"), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/packages/f-my/README.md:
--------------------------------------------------------------------------------
1 | 支付宝小程序组件
2 |
3 | See our GitHub [https://github.com/antvis/FEngine](https://github.com/antvis/FEngine) for more information
4 |
5 | ## Install
6 |
7 | Using npm:
8 |
9 | ```sh
10 | npm install --save @antv/f-my
11 | ```
12 |
13 | or using yarn:
14 |
15 | ```sh
16 | yarn add @antv/f-my
17 | ```
18 |
19 | ## 使用方式
20 |
21 | 使用方式请参考 [F2 官网](https://f2.antv.vision) 文档： [https://f2.antv.vision/zh/docs/tutorial/miniprogram](https://f2.antv.vision/zh/docs/tutorial/miniprogram)
22 |
23 | ## License
24 |
25 | [MIT license](./LICENSE).
26 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/.mini-ide/project-ide.json:
--------------------------------------------------------------------------------
1 | {
2 | "enableLegacyRemoteDebug": false
3 | }
--------------------------------------------------------------------------------
/packages/f-my/examples/test/app.acss:
--------------------------------------------------------------------------------
1 | page {
2 | background: #f7f7f7;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/app.js:
--------------------------------------------------------------------------------
1 | App({
2 | onLaunch(_options) {
3 | // 第一次打开
4 | // options.query == {number:1}
5 | console.info('App onLaunch');
6 | },
7 | onShow(_options) {
8 | // 从后台被 scheme 重新打开
9 | // options.query == {number:1}
10 | },
11 | });
12 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "pages/index/index"
4 | ],
5 | "window": {
6 | "defaultTitle": "My App"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | [
4 | "@babel/plugin-transform-react-jsx",
5 | {
6 | "runtime": "automatic",
7 | "importSource": "@antv/f-engine"
8 | }
9 | ]
10 | ]
11 | }
--------------------------------------------------------------------------------
/packages/f-my/examples/test/mini.project.json:
--------------------------------------------------------------------------------
1 | {
2 | "format": 2,
3 | "compileOptions": {
4 | "component2": true,
5 | "enableNodeModuleBabelTransform": true
6 | },
7 | "scripts": {
8 | "beforeCompile": "npm run beforeCompile"
9 | }
10 | }
--------------------------------------------------------------------------------
/packages/f-my/examples/test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "beforeCompile": "babel pages --out-dir pages --only **/*.jsx"
4 | },
5 | "dependencies": {
6 | "@antv/f-engine": "*",
7 | "@antv/f-my": "*",
8 | "@babel/cli": "^7.16.0",
9 | "@babel/core": "^7.16.0",
10 | "@babel/plugin-transform-react-jsx": "^7.16.0"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/index.acss:
--------------------------------------------------------------------------------
1 | /* required by usingComponents */
2 | .container {
3 | width: 100%;
4 | height: 600rpx;
5 | }
6 |
7 | .web-container {
8 | width: 350rpx;
9 | height: 480rpx;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/index.axml:
--------------------------------------------------------------------------------
1 |
2 | native
3 |
4 | web
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/index.js:
--------------------------------------------------------------------------------
1 | import Rect from './rect';
2 | import { jsx as _jsx } from "@antv/f-engine/jsx-runtime";
3 | Page({
4 | data: {
5 | data: {}
6 | },
7 | onReady() {
8 | this.setData({
9 | data: {
10 | index: 1,
11 | width: 100
12 | }
13 | });
14 | // 模拟数据更新
15 | setTimeout(() => {
16 | this.setData({
17 | data: {
18 | index: 2,
19 | width: 200
20 | }
21 | });
22 | }, 2000);
23 | },
24 | onRenderChart(props) {
25 | const {
26 | data
27 | } = props;
28 | return _jsx(Rect, {
29 | ...data
30 | });
31 |
32 | // 如果不使用 jsx, 用下面代码效果也是一样的
33 | // return createElement(Chart, {
34 | // data: data,
35 | // });
36 | }
37 | });
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "f-canvas": "@antv/f-my",
4 | "f-canvas-web": "@antv/f-my/lib/web"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/index.jsx:
--------------------------------------------------------------------------------
1 | import Rect from './rect';
2 |
3 | Page({
4 | data: {
5 | data: {},
6 | },
7 | onReady() {
8 | this.setData({
9 | data: {
10 | index: 1,
11 | width: 100,
12 | },
13 | });
14 | // 模拟数据更新
15 | setTimeout(() => {
16 | this.setData({
17 | data: {
18 | index: 2,
19 | width: 200,
20 | },
21 | });
22 | }, 2000);
23 | },
24 | onRenderChart(props) {
25 | const { data } = props;
26 |
27 | return ;
28 |
29 | // 如果不使用 jsx, 用下面代码效果也是一样的
30 | // return createElement(Chart, {
31 | // data: data,
32 | // });
33 | },
34 | });
35 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/rect.js:
--------------------------------------------------------------------------------
1 | import { Component } from '@antv/f-engine';
2 | import { jsx as _jsx, jsxs as _jsxs } from "@antv/f-engine/jsx-runtime";
3 | class Rect extends Component {
4 | render() {
5 | const {
6 | index,
7 | width = 0
8 | } = this.props;
9 | return _jsxs("group", {
10 | style: {
11 | display: 'flex'
12 | },
13 | children: [_jsx("text", {
14 | style: {
15 | text: `${index}`,
16 | fill: '#000',
17 | fontSize: '30px'
18 | }
19 | }), _jsx("rect", {
20 | style: {
21 | fill: 'red',
22 | width,
23 | height: '40px'
24 | },
25 | animation: {
26 | appear: {
27 | easing: 'linear',
28 | duration: 300,
29 | property: ['width'],
30 | start: {
31 | width: 0
32 | },
33 | end: {}
34 | },
35 | update: {
36 | easing: 'linear',
37 | duration: 300,
38 | property: ['width']
39 | }
40 | },
41 | onClick: e => {
42 | console.log('click', e);
43 | },
44 | onTouchStart: e => {
45 | console.log('onTouchStart', e);
46 | },
47 | onTouchMove: e => {
48 | console.log('onTouchMove', e);
49 | },
50 | onTouchEnd: e => {
51 | console.log('onTouchEnd', e);
52 | }
53 | }), _jsx("image", {
54 | style: {
55 | width: 32,
56 | height: 32,
57 | src: 'https://f2.antv.antgroup.com/favicon-32x32.png'
58 | }
59 | })]
60 | });
61 | }
62 | }
63 | export default Rect;
--------------------------------------------------------------------------------
/packages/f-my/examples/test/pages/index/rect.jsx:
--------------------------------------------------------------------------------
1 | import { Component } from '@antv/f-engine';
2 |
3 | class Rect extends Component {
4 | render() {
5 | const { index, width = 0 } = this.props;
6 | return (
7 |
8 |
15 | {
38 | console.log('click', e);
39 | }}
40 | onTouchStart={(e) => {
41 | console.log('onTouchStart', e);
42 | }}
43 | onTouchMove={(e) => {
44 | console.log('onTouchMove', e);
45 | }}
46 | onTouchEnd={(e) => {
47 | console.log('onTouchEnd', e);
48 | }}
49 | />
50 |
55 |
56 | );
57 | }
58 | }
59 |
60 | export default Rect;
61 |
--------------------------------------------------------------------------------
/packages/f-my/examples/test/snapshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-my/examples/test/snapshot.png
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/.fatherrc.js:
--------------------------------------------------------------------------------
1 | export default {
2 | esm: {
3 | type: 'babel',
4 | },
5 | runtimeHelpers: true,
6 | };
7 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/.mini-ide/project-ide.json:
--------------------------------------------------------------------------------
1 | {
2 | "enableLegacyRemoteDebug": false
3 | }
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/app.acss:
--------------------------------------------------------------------------------
1 | page {
2 | background: #f7f7f7;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/app.js:
--------------------------------------------------------------------------------
1 | App({
2 | onLaunch(_options) {
3 | // 第一次打开
4 | // options.query == {number:1}
5 | console.info('App onLaunch');
6 | },
7 | onShow(_options) {
8 | // 从后台被 scheme 重新打开
9 | // options.query == {number:1}
10 | },
11 | });
12 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "es/index/index"
4 | ],
5 | "window": {
6 | "defaultTitle": "My App"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/mini.project.json:
--------------------------------------------------------------------------------
1 | {
2 | "component2": true,
3 | "enableAppxNg": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "build": "father build"
4 | },
5 | "dependencies": {
6 | "@antv/f-engine": "*",
7 | "@antv/f-my": "*",
8 | "@babel/cli": "^7.16.0",
9 | "@babel/core": "^7.16.0",
10 | "@babel/plugin-transform-react-jsx": "^7.16.0",
11 | "@babel/runtime": "^7.12.5"
12 | },
13 | "devDependencies": {
14 | "father": "^2.30.0",
15 | "mini-types": "^0.1.7",
16 | "typescript": "^4.5.4"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/snapshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-my/examples/typescript/snapshot.png
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/src/index/index.acss:
--------------------------------------------------------------------------------
1 | /* required by usingComponents */
2 | .container {
3 | width: 100%;
4 | height: 600rpx;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/src/index/index.axml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/src/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "f-canvas": "@antv/f-my"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/src/index/index.tsx:
--------------------------------------------------------------------------------
1 | import Rect from './rect';
2 |
3 | Page({
4 | data: {},
5 | onRenderChart() {
6 | return ;
7 | },
8 | });
9 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/src/index/rect.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from '@antv/f-engine';
2 |
3 | class Rect extends Component {
4 | render() {
5 | const { index, width = 0 } = this.props;
6 | return (
7 |
8 |
15 | {
38 | console.log('click', e);
39 | }}
40 | onTouchStart={(e) => {
41 | console.log('onTouchStart', e);
42 | }}
43 | onTouchMove={(e) => {
44 | console.log('onTouchMove', e);
45 | }}
46 | onTouchEnd={(e) => {
47 | console.log('onTouchEnd', e);
48 | }}
49 | />
50 |
51 | );
52 | }
53 | }
54 |
55 | export default Rect;
56 |
--------------------------------------------------------------------------------
/packages/f-my/examples/typescript/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "jsx": "react-jsx",
5 | "jsxImportSource": "@antv/f-engine",
6 | "moduleResolution": "node",
7 | "types": ["mini-types"],
8 | "allowSyntheticDefaultImports": true
9 | },
10 | "exclude": [
11 | "node_modules"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/packages/f-my/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@antv/f-my",
3 | "version": "1.7.0",
4 | "description": "FEngine for alipay mini-program",
5 | "main": "lib/index.js",
6 | "module": "es/index.js",
7 | "types": "es/index.d.ts",
8 | "keywords": [
9 | "antv",
10 | "f2",
11 | "chart",
12 | "charts",
13 | "mobile",
14 | "visualization",
15 | "miniprogram",
16 | "my",
17 | "alipay"
18 | ],
19 | "dependencies": {
20 | "@antv/f-engine": "1.5.0",
21 | "@babel/runtime": "^7.12.5",
22 | "tslib": "^2.3.1"
23 | },
24 | "devDependencies": {
25 | "mini-types": "^0.1.7"
26 | },
27 | "homepage": "https://f2.antv.vision/zh/docs/tutorial/miniprogram",
28 | "author": "https://github.com/orgs/antvis/people",
29 | "license": "MIT",
30 | "repository": {
31 | "type": "git",
32 | "url": "https://github.com/antvis/f2"
33 | },
34 | "bugs": {
35 | "url": "https://github.com/antvis/f2/issues"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/packages/f-my/src/index.acss:
--------------------------------------------------------------------------------
1 | .f-canvas {
2 | width: 100%;
3 | height: 100%;
4 | }
--------------------------------------------------------------------------------
/packages/f-my/src/index.axml:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/f-my/src/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true
3 | }
--------------------------------------------------------------------------------
/packages/f-my/src/web.acss:
--------------------------------------------------------------------------------
1 | .f-web-canvas {
2 | width: 100%;
3 | height: 100%;
4 | }
--------------------------------------------------------------------------------
/packages/f-my/src/web.axml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/f-my/src/web.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true
3 | }
--------------------------------------------------------------------------------
/packages/f-my/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "lib": ["es2015", "dom"],
5 | "types": ["mini-types"]
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/f-my/typings.d.ts:
--------------------------------------------------------------------------------
1 | import '../../typings';
2 |
--------------------------------------------------------------------------------
/packages/f-react/.npmignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # lock
9 | package-lock.json
10 |
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 |
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 |
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 |
23 | # nyc test coverage
24 | .nyc_output
25 |
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 |
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 |
32 | # node-waf configuration
33 | .lock-wscript
34 |
35 | # Compiled binary addons (http://nodejs.org/api/addons.html)
36 | build/Release
37 |
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 |
42 | # Typescript v1 declaration files
43 | typings/
44 |
45 | # Optional npm cache directory
46 | .npm
47 |
48 | # Optional eslint cache
49 | .eslintcache
50 |
51 | # Optional REPL history
52 | .node_repl_history
53 |
54 | # Output of 'npm pack'
55 | *.tgz
56 |
57 | # Yarn Integrity file
58 | .yarn-integrity
59 |
60 | # dotenv environment variables file
61 | .env
62 |
63 | .DS_Store
64 |
65 | # npmignore - content above this line is automatically generated and modifications may be omitted
66 | # see npmjs.com/npmignore for more details.
67 | test
68 |
69 | *.sw*
70 | *.un~
71 | .idea
72 | bin
73 | demos
74 | docs
75 | temp
76 | webpack-dev.config.js
77 | webpack.config.js
78 | examples
79 | site
80 | gatsby-browser.js
81 | gatsby-config.js
82 | .cache
83 | public
84 |
--------------------------------------------------------------------------------
/packages/f-react/LICENSE:
--------------------------------------------------------------------------------
1 | MIT LICENSE
2 |
3 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | "Software"), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/packages/f-react/README.md:
--------------------------------------------------------------------------------
1 | FEngine React 组件
2 |
3 | See our GitHub [https://github.com/antvis/FEngine](https://github.com/antvis/FEngine) for more information
4 |
5 | ## Install
6 |
7 | Using npm:
8 |
9 | ```sh
10 | npm install --save @antv/f-react
11 | ```
12 |
13 | or using yarn:
14 |
15 | ```sh
16 | yarn add @antv/f-react
17 | ```
18 |
19 | ## 使用方式
20 |
21 | 使用方式请参考 [F2 官网](https://f2.antv.vision) 文档： [https://f2.antv.vision/zh/docs/tutorial/react](https://f2.antv.vision/zh/docs/tutorial/react)
22 |
23 | ## License
24 |
25 | [MIT license](./LICENSE).
26 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.14.1",
7 | "@testing-library/react": "^13.0.0",
8 | "@testing-library/user-event": "^13.2.1",
9 | "@antv/f-engine": "*",
10 | "@antv/f-react": "*",
11 | "react": "^18.2.0",
12 | "react-dom": "^18.2.0",
13 | "react-scripts": "5.0.1",
14 | "web-vitals": "^2.1.0"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.2%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-react/examples/my-app/public/favicon.ico
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-react/examples/my-app/public/logo192.png
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antvis/FEngine/7cac015af8512cb60fad8dc2f0906466ad295013/packages/f-react/examples/my-app/public/logo512.png
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/src/App.js:
--------------------------------------------------------------------------------
1 | import Canvas from '@antv/f-react';
2 | import { Component, Timeline } from '@antv/f-engine';
3 |
4 | class Rect extends Component {
5 | render() {
6 | const { index, width = 0 } = this.props;
7 | return (
8 |
9 |
34 |
43 |
44 | );
45 | }
46 | }
47 |
48 | function App() {
49 | return (
50 |
51 |
58 |
59 | );
60 | }
61 |
62 | export default App;
63 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 |
5 | const root = ReactDOM.createRoot(document.getElementById('root'));
6 | root.render(
7 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/packages/f-react/examples/my-app/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/packages/f-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@antv/f-react",
3 | "version": "1.5.0",
4 | "description": "FEngine for React",
5 | "main": "lib/index.js",
6 | "module": "es/index.js",
7 | "types": "es/index.d.ts",
8 | "sideEffects": false,
9 | "keywords": [
10 | "antv",
11 | "f2",
12 | "chart",
13 | "charts",
14 | "mobile",
15 | "visualization",
16 | "react"
17 | ],
18 | "dependencies": {
19 | "@antv/f-engine": "1.5.0",
20 | "@babel/runtime": "^7.12.5",
21 | "tslib": "^2.3.1"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^16.9.35",
25 | "@types/react-dom": "^16.9.8",
26 | "enzyme": "^3.11.0",
27 | "enzyme-adapter-react-16": "^1.15.6",
28 | "react": "16.8.6",
29 | "react-dom": "16.8.6"
30 | },
31 | "peerDependencies": {
32 | "react": ">=16.8.6",
33 | "react-dom": ">=16.8.6"
34 | },
35 | "homepage": "https://f2.antv.vision/zh/docs/tutorial/react",
36 | "author": "https://github.com/orgs/antvis/people",
37 | "license": "MIT",
38 | "repository": {
39 | "type": "git",
40 | "url": "https://github.com/antvis/f2"
41 | },
42 | "bugs": {
43 | "url": "https://github.com/antvis/f2/issues"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/f-react/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Canvas } from '@antv/f-engine';
2 | import { createCanvas, CanvasProps } from './createCanvas';
3 |
4 | export { createCanvas, CanvasProps };
5 | // 通过工厂模式创建时为了让 f2-react 依赖 f2 的 canvas 而不是 f-engine
6 | export default createCanvas(Canvas);
7 |
--------------------------------------------------------------------------------
/packages/f-react/test/index.test.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | /* @jsx React.createElement */
3 | import { Canvas, Component } from '@antv/f-engine';
4 | import Enzyme, { mount } from 'enzyme';
5 | import Adapter from 'enzyme-adapter-react-16';
6 | import React from 'react';
7 | import ReactCanvas from '../src';
8 |
9 | // @ts-ignore
10 | Enzyme.configure({ adapter: new Adapter() });
11 |
12 | function delay(time) {
13 | return new Promise((resolve) => {
14 | setTimeout(resolve, time);
15 | });
16 | }
17 |
18 | function App(props: any) {
19 | const { canvasRef } = props;
20 | return (
21 |
22 |
28 |
29 | );
30 | }
31 |
32 | describe('