feat: 组件切换与过渡

antvis · Oct 30, 2021 · dac4d94 · dac4d94
1 parent afffb35
commit dac4d94
Show file tree

Hide file tree

Showing 13 changed files with 285,383 additions and 178 deletions.
diff --git a/packages/f2-next/src/base/createComponentTree.ts b/packages/f2-next/src/base/createComponentTree.ts
diff --git a/packages/f2-next/src/base/diff.ts b/packages/f2-next/src/base/diff.ts
@@ -19,24 +19,28 @@ function renderShape(
 ) {
   const {
     container,
-    // @ts-ignore
-    __lastElement,
     context,
     updater,
+    // @ts-ignore
+    __lastElement,
+    // @ts-ignore
+    transformFrom,
     animate: componentAnimate,
   } = component;
   // 先清空绘制内容
   container.clear();
 
   animate = isBoolean(animate) ? animate : componentAnimate;
+  const lastElement =
+    __lastElement || (transformFrom && transformFrom.__lastElement);
 
   // children 是 shape 的 jsx 结构, component.render() 返回的结构
   const shapeElement = renderJSXElement(children, context, updater);
   // @ts-ignore
   component.__lastElement = shapeElement;
   const renderElement =
     animate !== false
-      ? compareRenderTree(shapeElement, __lastElement)
+      ? compareRenderTree(shapeElement, lastElement)
       : shapeElement;
   if (!renderElement) return null;
   // 生成G的节点树, 存在数组的情况是根节点有变化，之前的树删除，新的树创建
@@ -61,17 +65,56 @@ function setComponentAnimate(child: Component, parent: Component) {
   child.animate = isBoolean(childAnimate) ? childAnimate : parentAnimate;
 }
 
+function getTransformComponent(component: Component) {
+  if (!component) return null;
+  // @ts-ignore
+  const { __lastElement, children } = component;
+  if (__lastElement) {
+    return component;
+  }
+  if (!children) {
+    return null;
+  }
+
+  let componentFromChildren = null;
+  Children.map(children, (item) => {
+    if (componentFromChildren) return;
+    if (!item) return;
+    const component = getTransformComponent(item.component);
+    if (component) {
+      componentFromChildren = component;
+    }
+  });
+  return componentFromChildren;
+}
+
+function getTransformFromComponentRef(transformFromRef) {
+  if (!transformFromRef || !transformFromRef.current) {
+    return null;
+  }
+  const transformFromComponent = transformFromRef.current;
+  return getTransformComponent(transformFromComponent);
+}
+
 function createComponent(parent: Component, element: JSX.Element): Component {
   const { type, props, key, ref } = element;
-  const { container, context, updater } = parent;
+  const {
+    container,
+    context,
+    updater,
+    //@ts-ignore
+    transformFrom,
+  } = parent;
+
+  const { transformFrom: transformFromRef, ...receiveProps } = props;
 
   let component: Component;
   // @ts-ignore
   if (type.prototype && type.prototype.isF2Component) {
     // @ts-ignore
-    component = new type(props, context, updater);
+    component = new type(receiveProps, context, updater);
   } else {
-    component = new Component(props, context, updater);
+    component = new Component(receiveProps, context, updater);
     component.render = function () {
       // @ts-ignore
       return type(this.props, context, updater);
@@ -83,6 +126,20 @@ function createComponent(parent: Component, element: JSX.Element): Component {
     ref.current = component;
   }
 
+  // 因为view 可能在子组件，所以这里要透传到子组件
+  if (transformFrom) {
+    // @ts-ignore
+    component.transformFrom = transformFrom;
+  }
+
+  if (transformFromRef) {
+    const transformFromComponent = transformFromRef
+      ? getTransformFromComponentRef(transformFromRef)
+      : null;
+    // @ts-ignore
+    component.transformFrom = transformFromComponent;
+  }
+
   // 每个组件都新建一个独立容器
   component.container = container.addGroup();
   component.context = context;

diff --git a/packages/f2-next/src/components/treemap/treemapView.tsx b/packages/f2-next/src/components/treemap/treemapView.tsx
@@ -32,9 +32,10 @@ export default (props) => {
   return (
     <group>
       {nodes.map((node) => {
-        const { xMin, xMax, yMin, yMax, color } = node;
+        const { key, xMin, xMax, yMin, yMax, color } = node;
         return (
           <rect
+            key={key}
             attrs={{
               x: xMin,
               y: yMin,
@@ -45,6 +46,26 @@ export default (props) => {
               stroke: '#fff',
               radius: '8px',
             }}
+            animation={{
+              appear: {
+                easing: 'linear',
+                duration: 450,
+                property: ['fillOpacity', 'strokeOpacity'],
+                start: {
+                  fillOpacity: 0,
+                  strokeOpacity: 0,
+                },
+                end: {
+                  fillOpacity: 1,
+                  strokeOpacity: 1,
+                },
+              },
+              update: {
+                easing: 'linear',
+                duration: 450,
+                property: ['x', 'y', 'width', 'height', 'radius', 'lineWidth'],
+              },
+            }}
           />
         );
       })}

diff --git a/packages/f2-next/src/components/treemap/withTreemap.tsx b/packages/f2-next/src/components/treemap/withTreemap.tsx
@@ -23,15 +23,15 @@ export default (View): any => {
       this.color = new Category({
         range: theme.colors,
         ...color,
-        data
+        data,
       });
     }
     treemapLayout() {
       const { props, coord, color: colorAttr } = this;
       const { data, value, space = 0 } = props;
 
       const root = hierarchy({ children: data })
-        .sum(function(d) {
+        .sum(function (d) {
           return d[value];
         })
         .sort((a, b) => b[value] - a[value]);
@@ -49,19 +49,20 @@ export default (View): any => {
       // .paddingBottom(options.paddingBottom)
       // .paddingLeft(options.paddingLeft);
       const nodes = treemapLayout(root);
-      return nodes.children.map(item => {
+      return nodes.children.map((item) => {
         const { data, x0, y0, x1, y1 } = item;
         const color = colorAttr.mapping(data[colorAttr.field]);
         const rect = coord.convertRect({
           xMin: x0,
           xMax: x1,
           yMin: y0,
-          yMax: y1
+          yMax: y1,
         });
         return {
-          data,
+          key: data.key,
+          origin: data,
           color,
-          ...rect
+          ...rect,
         };
       });
     }

diff --git a/packages/f2-next/src/jsx/animation/index.ts b/packages/f2-next/src/jsx/animation/index.ts
@@ -5,13 +5,13 @@ function createClipElement(type: string, config) {
   return new Shape[type](config);
 }
 
-export default (element: any, animationCfg, nextAttrs, lastAttrs) => {
-  if (!animationCfg) return null;
+export default (element: any, animation, nextAttrs, lastAttrs) => {
+  if (!animation) return null;
   // 获取shape的默认属性
   const status = element.get('status');
-  const { appear, update, leave } = animationCfg;
-  const animation = status === ELEMENT_DELETE ? leave : ( lastAttrs ? update : appear );
-  if (!animation) return;
+  // const { appear, update, leave } = animationCfg;
+  // const animation = status === ELEMENT_DELETE ? leave : ( lastAttrs ? update : appear );
+  // if (!animation) return;
   const { clip, start, end, easing, delay, duration } = animation;
 
   if (clip) {
@@ -37,6 +37,6 @@ export default (element: any, animationCfg, nextAttrs, lastAttrs) => {
     end: {
       ...(status === ELEMENT_DELETE ? null : nextAttrs),
       ...end,
-    }
-  }
-}
+    },
+  };
+};