feat: add reverse

Author: jiangtao.yang

apps/dsv/src/Chart.tsx

@@ -21,7 +21,7 @@ export const Chart: FC = () => {
     }
     const arrayBar = new ArrayBar<number>([...schema.structures[0].array], {
       id: schema.structures[0].id,
-      interval: 300,
+      interval: 1000,
       structure: {},
     });
     schema.actions.forEach((action) => {
@@ -35,6 +35,9 @@ export const Chart: FC = () => {
         if (action.type === 'appear') {
           arrayBar.appear();
         }
+        if (action.type === 'reverse') {
+          arrayBar.reverse();
+        }
       }
     });
 

packages/data-structure/src/data-structures/array-bar/array-bar.ts

@@ -106,6 +106,30 @@ export class ArrayBar<T> {
     });
   }
 
+  reverse() {
+    this._data = this._data.reverse();
+    const id = this._id;
+    const dataId = this._dataId;
+    const interval = this._interval;
+    const length = this._actions.length;
+    const action = {
+      action: "update",
+      startTime: interval * length,
+      payload: {
+        id: dataId,
+        animation: {
+          duration: interval,
+        },
+        values: cloneDeep(this._data),
+      },
+    };
+    this._actions.push({
+      characterId: id,
+      characterActions: [action],
+    });
+    return this;
+  }
+
   appear() {
     this._actions.push({
       characterId: this._id,