Undo：新增圖片、文字、複合物 的 Undo 行為

圖片工具箱：純圖, 素材庫, 剪貼簿圖片(含Ctrl+V)
複合物：便利貼, 挑人名牌, 作品收集圖

HiTeachCC/ClientApp/src/components/AddImgBox.vue

@@ -57,10 +57,7 @@
 </template>
 
 <script>
-const de = require('@/utils/lib1.js')
-import enc from '@/utils/enc.js'
 import { mapGetters } from 'vuex'
-import OptionViewVue from './Chart/OptionView.vue'
 
 export default {
   name: 'AddImgBox',
@@ -243,7 +240,8 @@ export default {
                   width: image.width() * scaleRatio,
                   height: image.height() * scaleRatio,
                   draggable: true,
-                  src: fileUrl
+                  src: fileUrl,
+                  uuid:that.$jsFn.getUUID()
                 })
 
                 // stage.find('Transformer').destroy()
@@ -267,6 +265,7 @@ export default {
                 
 
                 layer.add(image)
+                that.$toolbox.saveUndoHistory('add',image)//儲存undo記錄
                 layer.add(tr)
                 tr.nodes([image])
                 that.$parent.addMenuBtnToTr(tr, image) 
@@ -333,7 +332,8 @@ export default {
               width: image.width() * scaleRatio,
               height: image.height() * scaleRatio,
               draggable: true,
-              src: fileUrl
+              src: fileUrl,
+              uuid:that.$jsFn.getUUID()
             })
 
             // stage.find('Transformer').destroy()
@@ -355,6 +355,7 @@ export default {
               }
             })
             layer.add(image)
+            that.$toolbox.saveUndoHistory('add',image)//儲存undo記錄
             layer.add(tr)
             tr.nodes([image])
             that.$parent.addMenuBtnToTr(tr, image) 
@@ -451,7 +452,8 @@ export default {
         width: window.innerWidth / 2,
         lineHeight: 1,
         height: 'auto',
-        name: 'text'
+        name: 'text',
+        uuid:that.$jsFn.getUUID()
       })
 
       this.$store.state.mode = 'check'
@@ -468,6 +470,7 @@ export default {
         name: 'default'
       })
       layer.add(textNode)
+      that.$toolbox.saveUndoHistory('add',textNode)//儲存undo記錄
       layer.add(tr)
       tr.nodes([textNode])
       that.$parent.addMenuBtnToTr(tr, textNode) 
@@ -633,7 +636,8 @@ export default {
           width: imageObj.width * 0.4,
           height: imageObj.height * 0.4,
           draggable: true,
-          src: finallink
+          src: finallink,
+          uuid:that.$jsFn.getUUID()
         })
         // stage.find('Transformer').destroy()
         let tr = new Konva.Transformer({
@@ -655,6 +659,7 @@ export default {
         })
        
         layer.add(image)
+        that.$toolbox.saveUndoHistory('add',image)//儲存undo記錄
         layer.add(tr)
         tr.nodes([image])
         that.$parent.addMenuBtnToTr(tr, image) 

HiTeachCC/ClientApp/src/components/Tools/turnTable.vue

@@ -150,14 +150,15 @@ export default {
       let layer = this.$store.state.layer
       this.$store.state.textColor = 'black'
       let text = this.pickTarget.sort + '\t\t\t' + this.pickTarget.name
-
+      let uuid= this.$jsFn.getUUID()
       var circle = new Konva.Circle({
         radius: 16,
         x: 33,
         y: 33,
         fill: '#ffb929',
         draggable: false,
-        listening: false
+        listening: false,
+        uuid:uuid
       })
       var rect = new Konva.Rect({
         radius: 20,
@@ -168,7 +169,8 @@ export default {
         y: 10,
         fill: '#d8d8d8',
         draggable: false,
-        listening: false
+        listening: false,
+        uuid:uuid
       })
 
       var group = new Konva.Group({
@@ -176,7 +178,8 @@ export default {
         y: stage.height() * 0.2 + Math.floor(Math.random() * 200),
         draggable: true,
         listening: true,
-        text: text
+        text: text,
+         uuid:uuid
       })
 
       group.add(rect)
@@ -197,11 +200,13 @@ export default {
           height: 'auto',
           name: 'pastTextPickName',
           draggable: false,
-          listening: true
+          listening: true,
+          uuid:uuid
         })
       )
 
       layer.add(group)
+      this.$toolbox.saveUndoHistory('add',group)//儲存undo記錄
 
       // stage.find('Transformer').destroy()
       let tr = new Konva.Transformer({

HiTeachCC/ClientApp/src/views/Board.vue

@@ -792,7 +792,7 @@ export default {
       let textNode = this.$store.state.currentEditTextNode;
       x = mode == "new" ? this.stage.width() * 0.1 + Math.floor(Math.random() * 200) : textNode.attrs.x;
       y = mode == "new" ? this.stage.height() * 0.2 + Math.floor(Math.random() * 200) : textNode.attrs.y;
-
+      let uuid=this.$jsFn.getUUID()
       let pastText = new Konva.Label({
         x: x,
         y: y,
@@ -812,6 +812,7 @@ export default {
           name: "pastTextContent",
           draggable: false,
           listening: true,
+          uuid:uuid
         })
       );
       pastText.add(
@@ -826,6 +827,7 @@ export default {
           name: "pastTextContent",
           draggable: false,
           listening: true,
+          uuid:uuid
         })
       );
 
@@ -842,6 +844,8 @@ export default {
         name: "default",
       });
       this.layer.add(pastText);
+      this.$toolbox.saveUndoHistory('add',pastText)//儲存undo記錄
+
       if (mode == "edit") {
         //殺掉原本的文字物件
         textNode.destroy();
@@ -871,6 +875,7 @@ export default {
         width: 300,
         height: "auto",
         name: "text",
+        uuid:this.$jsFn.getUUID()
       });
 
       let tr = new Konva.Transformer({
@@ -886,6 +891,8 @@ export default {
         name: "default",
       });
       this.layer.add(textNode);
+      this.$toolbox.saveUndoHistory('add',textNode)//儲存undo記錄
+
       if (mode == "edit") {
         pastText.destroy();
         //殺掉原本的Transformer
@@ -1111,6 +1118,7 @@ export default {
       let text = item.seat + "\t\t\t" + (this.$store.state.hideStudentName == false ? item.name : "");
 
       let that = this;
+      let uuid = this.$jsFn.getUUID()
 
       Konva.Image.fromURL(item.url, function (image) {
         // image is Konva.Image instance
@@ -1126,6 +1134,7 @@ export default {
           draggable: false,
           listenning: false,
           name: "pastImgContent",
+          uuid:uuid
         });
         var circle = new Konva.Circle({
           radius: 16,
@@ -1135,6 +1144,7 @@ export default {
           draggable: false,
           listening: false,
           name: "pastImgContent",
+          uuid:uuid
         });
         var rect = new Konva.Rect({
           radius: 20,
@@ -1147,14 +1157,16 @@ export default {
           draggable: false,
           listening: false,
           name: "pastImgContent",
+          uuid:uuid 
         });
-        console.log(layer.children);
+     
         var group = new Konva.Group({
           x: image.attrs.image.naturalWidth * scaleY * (index % 3) + 40 * ((index % 3) + 1),
           y: index + 1 > 3 ? image.attrs.image.naturalHeight * scaleY + 110 : 60,
           text: text,
           draggable: true,
           listening: true,
+          uuid:uuid 
         });
 
         group.add(image);
@@ -1181,6 +1193,7 @@ export default {
             draggable: false,
             listenning: false,
             name: "pastImgContent",
+            uuid:uuid
           })
         );
         group.on("mouseover", function () {
@@ -1191,22 +1204,9 @@ export default {
         });
 
         layer.add(group);
-
-        // stage.find('Transformer').destroy()
+        that.$toolbox.saveUndoHistory('add',group)//儲存undo記錄
+     
         let tr = new Konva.Transformer({
-          //       boundBoxFunc: function (oldBoundBox, newBoundBox) {
-          //   // "boundBox" is an object with
-          //   // x, y, width, height and rotation properties
-          //   // transformer tool will try to fit nodes into that box
-
-          //   // the logic is simple, if new width is too big
-          //   // we will return previous state
-          //   if (Math.abs(newBoundBox.width) > 600) {
-          //     return oldBoundBox;
-          //   }
-
-          //   return newBoundBox;
-          // },
           anchorStroke: "#00a6ff",
           anchorFill: "#fff",
           anchorSize: 12,
@@ -2600,7 +2600,7 @@ export default {
                 }
 
                 // console.log(target.parent.className == 'Transformer', '拖动的元素')
-                if (target.className != "text" && target.attrs.name != "pastTextContent" && target.attrs.name != "pastImgContent") {
+                if (target.className != "text" && target.attrs.name != "pastTextContent" && target.attrs.name != "pastImgContent"&&target.attrs.name != "pastTextPickName") {
                   target.draggable(true);
                 }
 
@@ -2684,14 +2684,7 @@ export default {
                     tr.nodes([this]);
                     that.addMenuBtnToTr(tr, this);
                     layer.draw();
-                  } else if (target.attrs.name == "pastImgContent" && target.className != "text") {
-                    target.draggable(false);
-                    target.parent.draggable(true);
-                    layer.add(tr);
-                    tr.nodes([this.parent]);
-                    that.addMenuBtnToTr(tr, this.parent);
-                    layer.draw();
-                  } else if ((target.attrs.name == "pastTextContent" && target.className != "text") || (target.attrs.name == "pastTextPickName" && target.className != "text")) {
+                  } else if (target.attrs.name == "pastImgContent" && target.className != "text"||target.attrs.name == "pastTextPickName"||target.attrs.name == "pastTextContent" && target.className != "text") {
                     target.draggable(false);
                     target.parent.draggable(true);
                     layer.add(tr);