feat: add compare

Author: jiangtao.yang

apps/dsv/src/Chart.tsx

@@ -29,6 +29,12 @@ export const Chart: FC = () => {
         if (action.type === 'set') {
           arrayBar.set(action.args[0], action.args[1]);
         }
+        if (action.type === 'get') {
+          arrayBar.get(action.args[0]);
+        }
+        if (action.type === 'compare') {
+          arrayBar.compare(action.args[0], action.args[1], action.args[2]);
+        }
         if (action.type === 'swap') {
           arrayBar.swap(action.args[0], action.args[1]);
         }

apps/dsv/src/CodeEditor/CodeEditor.tsx

@@ -5,16 +5,22 @@ import { useDsv } from '../model';
 export const CodeEditor = () => {
   const setSchema = useDsv((state) => state.setSchema);
 
-  const [code, setCode] = useState(`Array.prototype.swap = function(i, j){
-    const temp = this[i]
-    this[i] = this[j]
-    this[j] = temp
+  const ArrayProtoType = `
+Array.prototype.swap = function(i, j){
+  const temp = this[i]
+  this[i] = this[j]
+  this[j] = temp
 }
 
+Array.prototype.compare = function(i, j, fn) {
+  return fn(this[i], this[j]);
+};
+`;
+  const [code, setCode] = useState(`${ArrayProtoType}
 const bubbleSort = (arr) => {
   for (let i = 0; i < arr.length; i++) {
     for (let j = 0; j < arr.length - i - 1; j++) {
-      if (arr[j] > arr[j + 1]) {
+      if (arr.compare(j, j + 1, (a, b) => a > b)) {
         arr.swap(j, j+1)
       }
     }

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

@@ -229,8 +229,55 @@ export class ArrayBar<T> {
     return this;
   }
 
+  compare(i: number, j: number, fn: (a: T, b: T) => boolean) {
+    const id = this._id;
+    const dataId = this._dataId;
+    const interval = this._interval;
+    const length = this._actions.length;
+    const valueI = this._data[i];
+    const valueJ = this._data[j];
+    const compareRes = fn(valueI.value, valueJ.value);
+    const actionI = {
+      action: "highlight",
+      startTime: interval * length,
+      payload: {
+        id: dataId,
+        value: valueI,
+        animation: {
+          duration: interval,
+        },
+        style: {
+          fill: "red",
+        },
+      },
+    } as IActionSpec;
+    const actionJ = {
+      action: "highlight",
+      startTime: interval * length,
+      payload: {
+        id: dataId,
+        value: valueJ,
+        animation: {
+          duration: interval,
+        },
+        style: {
+          fill: "red",
+        },
+      },
+    } as IActionSpec;
+    if (compareRes) {
+      actionI.payload.style.fill = "green";
+    } else {
+      actionJ.payload.style.fill = "green";
+    }
+    this._actions.push({
+      characterId: id,
+      characterActions: [actionI, actionJ],
+    });
+    return this;
+  }
   get(index: number) {
-    const value = this._data[index].value;
+    const value = this._data[index];
     const action = {
       action: "highlight",
       startTime: this._interval * this._actions.length,