feat: 增加Undo撤销功能

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue

@@ -84,10 +84,10 @@
                   <a-button type="primary" @click="handleModifyCP">(M)odify CP</a-button>
                 </div>
                 <div class="peak-box-item">
-                  <a-button type="primary">Edit (S)lope</a-button>
+                  <a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
                 </div>
                 <div class="peak-box-item">
-                  <a-button type="primary">Undo</a-button>
+                  <a-button type="primary" :disabled="isOperationStackEmpty" @click="popOperationStack">Undo</a-button>
                 </div>
                 <div class="peak-box-item">
                   <a-button type="primary">Replot</a-button>
@@ -383,6 +383,14 @@ const thumbnailOption = {
   },
   series: null
 }
+
+// 操作类型
+export const Operators = {
+  ADD: 1, // 新增
+  REMOVE: 2, // 移除
+  MODIFY: 3 // 改变
+}
+
 export default {
   mixins: [ModalMixin, SampleDataMixin],
   components: {
@@ -429,7 +437,9 @@ export default {
       currChannel: undefined, // 当currChannel前选中的channel
       selectedTableItem: undefined, // 当前选中的表格项
 
-      isModifying: false // 正在修改控制点
+      isModifying: false, // 正在修改控制点
+
+      operationStack: [] // 操作记录
     }
   },
   created() {
@@ -1141,8 +1151,8 @@ export default {
 
         if (this.btnGroupType == 2) {
           this.$nextTick(() => {
-            this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }, dataIndex) => {
+            this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }) => {
-              return this.buildGraphicPoint(chart, x, y, dataIndex)
+              return this.buildGraphicPoint(chart, x, y)
             })
           })
         }
@@ -1164,8 +1174,8 @@ export default {
       if (this.btnGroupType == 2) {
         const chart = this.$refs.chartRef.getChartInstance()
         this.$nextTick(() => {
-          this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }, dataIndex) => {
+          this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }) => {
-            return this.buildGraphicPoint(chart, x, y, dataIndex)
+            return this.buildGraphicPoint(chart, x, y)
           })
         })
       }
@@ -1176,6 +1186,7 @@ export default {
       // 切换到Base Line 和 Control Point 操作
       if (this.btnGroupType == 1) {
         this.btnGroupType = 2
+        this.clearOperationStack()
 
         const originalCPSeries = findSeriesByName(this.option.series, 'BaseLine')
 
@@ -1187,8 +1198,8 @@ export default {
 
         const chart = this.$refs.chartRef.getChartInstance()
 
-        this.option.graphic = this.channelBaseCPChart.map(({ point: { x, y } }, dataIndex) => {
+        this.option.graphic = this.channelBaseCPChart.map(({ point: { x, y } }) => {
-          return this.buildGraphicPoint(chart, x, y, dataIndex)
+          return this.buildGraphicPoint(chart, x, y)
         })
 
         this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
@@ -1205,7 +1216,7 @@ export default {
       }
     },
 
-    buildGraphicPoint(chart, x, y, dataIndex) {
+    buildGraphicPoint(chart, x, y) {
       const [xPix, yPix] = chart.convertToPixel('grid', [x, y])
       return {
         type: 'rect',
@@ -1227,6 +1238,10 @@ export default {
           this.position[0] = xPixel
         },
         ondragend: ({ offsetY }) => {
+          const graphic = this.option.graphic
+
+          const dataIndex = graphic.findIndex(item => item.position[0] == xPix)
+
           this.option.graphic[dataIndex].position = [xPix, offsetY]
           this.setGraphicDraggable(false)
 
@@ -1237,6 +1252,11 @@ export default {
           baseLineEditSeries.data[parseInt(xAxis) - 1] = [x, yAxis]
 
           this._channelBaseCPChart[dataIndex].point.y = yAxis
+
+          this.pushOperationStack(Operators.MODIFY, {
+            index: dataIndex,
+            position: [xPix, yPix]
+          })
         },
         zlevel: 100
       }
@@ -1288,13 +1308,11 @@ export default {
       const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
 
       const yAxis = baseLineEditSeries.data[this.currChannel - 1][1]
-      this.option.graphic.splice(
+      this.option.graphic.splice(i, 0, this.buildGraphicPoint(chart, this.currChannel, yAxis))
-        i,
-        0,
-        this.buildGraphicPoint(chart, this.currChannel, yAxis, this.option.graphic.length)
-      )
 
       this._channelBaseCPChart.splice(i, 0, { point: { x: this.currChannel, y: yAxis } })
+
+      this.pushOperationStack(Operators.ADD, { index: i })
     },
 
     // 移除控制点
@@ -1319,7 +1337,12 @@ export default {
         return
       }
 
-      controlPointList.splice(i, 1)
+      const [point] = controlPointList.splice(i, 1)
+
+      this.pushOperationStack(Operators.REMOVE, {
+        index: i,
+        point
+      })
     },
 
     // 修改控制点
@@ -1327,6 +1350,24 @@ export default {
       this.setGraphicDraggable(true)
     },
 
+    // 编辑斜率
+    handleEditSlope() {
+      // if (m_baseCtrl.XCtrl.empty()) {
+      //   this.$message.warn('No control points to be edited')
+      //   return
+      // }
+      // // find nearest control-point
+      // let i = 1,
+      //   n = m_baseCtrl.XCtrl.size()
+      // for (; i < n; ++i) {
+      //   if (m_baseCtrl.XCtrl[i] >= m_curChan) {
+      //     if (m_baseCtrl.XCtrl[i] - m_curChan > m_curChan - m_baseCtrl.XCtrl[i - 1]) --i
+      //     break
+      //   }
+      // }
+      // if (i == n) i = n - 1
+    },
+
     // 确定对Control Point 的操作
     handleAccept() {},
 
@@ -1390,6 +1431,47 @@ export default {
           this.selectedTableItem._deleting = false
         }
       }
+    },
+
+    /**
+     * 推入操作
+     * @param {*} operator 操作符
+     * @param {*} operand 操作数
+     */
+    pushOperationStack(operator, operand) {
+      this.operationStack.push({
+        operator,
+        operand
+      })
+    },
+
+    /**
+     * 弹出操作
+     */
+    popOperationStack() {
+      const { operator, operand } = this.operationStack.pop()
+      const { index } = operand
+      switch (operator) {
+        case Operators.ADD:
+          this.option.graphic.splice(index, 1)
+          this._channelBaseCPChart.splice(index, 1)
+          break
+        case Operators.MODIFY:
+          const { position } = operand
+          this.option.graphic[index].position = position
+          break
+        case Operators.REMOVE:
+          const { point } = operand
+          this.option.graphic.splice(index, 0, point)
+          break
+      }
+    },
+
+    /**
+     * 清理操作栈
+     */
+    clearOperationStack() {
+      this.operationStack = []
     }
   },
   computed: {
@@ -1397,6 +1479,10 @@ export default {
       const [selectedKey] = this.selectedKeys
       const findIndex = this.list.findIndex(item => item.index == selectedKey)
       return findIndex
+    },
+
+    isOperationStackEmpty() {
+      return this.operationStack.length == 0
     }
   }
 }
@@ -1405,6 +1491,7 @@ export default {
 <style lang="less" scoped>
 .interactive-analysis-tools {
   display: flex;
+  margin-top: 5px;
 
   &-left {
     width: 75%;