[GitHub] [incubator-echarts] 100pah commented on pull request #12775: Custom series enhancement (for-next)

[GitBox <gi...@apache.org>]

100pah commented on pull request #12775:
URL: https://github.com/apache/incubator-echarts/pull/12775#issuecomment-646962464


   ## Somthing more discussion about **during callback** 
   
   The proposed **during callback** may enable some new power customzation with animation.
   For example, there are some exmaple shown in `test/custom-transition.html` "spiral-dynamic-extent" and "texture-bar-by-clipPath":
   
   + Functional interpolation
       + If intending to make the element move according to a special customized path instead of a linear path, the built-in interpolate is not enough to do that.
       + If intending to make animation in customzied polygon points (or event morph), the built-in interpolate diff of `number[][]` is not enough.
       + To resolve it, we can make a special prop in `el.shape` (say, `el.shape.abc`) and use the built-in interpolate on that. In each `during callback`, calculate the transition prop or polygon pionts final by that `el.shape.abc`. That is so called "functional interpolation".
   + Text animation in custom series.
   
   Note that:
   
   For users, in each frame, users usually need to:
   + read the current props value from the current graphic element.
   + calculate based on those values.
   + write the result to the that graphic element.  
   
   For echarts, we need to:
   + restrict the "power" of that new API for forward compatibiliy (think of the potential changes or other related features in future).
   + think of the reasonability of the API.
   + think of implementation complexity and performance of the API.
   
   The current API is implemented in the follow way:
   ```js
   renderItem(params, api) {
       var abcVal = makeNextAbcValue(params, api);
       return {
           type: 'polygon',
           shape: {
               abc: abcVal,
               points: calculatePolygonPoints(abcVal)
               // Make the built-in interpolate to be adapted on "abc".
               $transition: 'abc'
           },
           during: function (apiDuring) {
               var abcVal = apiDuring.getShape('abc');
               var points = calculatePolygonPoints(abcVal);
               apiDuring.setShape('points', points);
           }
       }
   }
   ```
   
   Note that it provides those "method" to for users to read and write the values in the "during callback":
   ```js
   interface DuringAPI {
   
       // currently only transform props  
       // (x, y, scaleX, scaleY, originX, orignY, rotation) 
       // are available here. Other attributes are not supported 
       // until really needed one day.
       setAttr(key: TransformProps, val: unknown): void;
       getAttr(key: TransformProps): unknown;
   
       // get and set and any props in "shape".
       // No need to make a travel since it does not support 
       // to input a dictionary object.
       // We do not restrict the shape props types because it 
       // should be able to customized by users and the result
       // of  `renderItem` also does not restrict the shape props.
       setShape(key: string, val: unknown): void;
       getShape(key: string): unknown;
   
       // get and set and any props in "style".
       // No need to make a travel since it does not support 
       // to input a dictionary object.
       // We do not restrict the style props types because it 
       // The result of  `renderItem` also does not restrict the  
       // style props.
       setStyle(key: string, val: unknown): void;
       getStyle(key: string): unknown;
   
       // If `setStyle` called, echarts will auto call `durty()` 
       // internally for this element.
       // Otherwise of only `setAttr` or `setShape` called, 
       // echarts will only call `markRedraw()` internally 
       // for this element.
   }
   ```
   
   ### Now could we think of that:
   
   1. Is it appropriate to implement those feature via exposing a "during callback" to users?
   2. Is it appropriate to implement "read & write" in the way of the `DuringAPI` above?
   
   
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org