From a8c7ab61e3fa4a62eaf38827180a37eaafd3d036 Mon Sep 17 00:00:00 2001
From: 0JARVIS0 <709406687@qq.com>
Date: Tue, 19 Nov 2019 09:59:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=81=A2=E5=A4=8D=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E5=AE=8C=E5=96=84=E6=B7=BB=E5=8A=A0=E4=B8=8E?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 painter.js | 105 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 64 insertions(+), 41 deletions(-)

diff --git a/painter.js b/painter.js
index 59f5a1b..20e5b94 100644
--- a/painter.js
+++ b/painter.js
@@ -83,7 +83,50 @@ Component({
       return true;
     },
 
-    doAction(newVal, callback, isMoving) {
+    getBox(rect) {
+      return [{
+        type: 'rect',
+        css: {
+          height: `${rect.bottom - rect.top}px`,
+          width: `${rect.right - rect.left}px`,
+          left: `${rect.left}px`,
+          top: `${rect.top}px`,
+          borderWidth: '2rpx',
+          borderColor: '#0000ff',
+          color: 'transparent'
+        }
+      }, {
+        type: 'rect',
+        css: {
+          height: `${2 * ACTION_POINT_RADIUS}px`,
+          width: `${2 * ACTION_POINT_RADIUS}px`,
+          borderRadius: `${ACTION_POINT_RADIUS}px`,
+          color: '#0000ff',
+          left: `${rect.right - ACTION_POINT_RADIUS}px`,
+          top: `${rect.bottom - ACTION_POINT_RADIUS}px`
+        }
+      }]
+    },
+
+    getDeleteIcon(rect) {
+      return {
+        type: 'rect',
+        css: {
+          height: `${2 * ACTION_POINT_RADIUS}px`,
+          width: `${2 * ACTION_POINT_RADIUS}px`,
+          borderRadius: `${ACTION_POINT_RADIUS}px`,
+          color: '#0000ff',
+          left: `${rect.left - ACTION_POINT_RADIUS}px`,
+          top: `${rect.top - ACTION_POINT_RADIUS}px`
+        }
+      }
+    },
+
+    doAction(action, callback, isMoving) {
+      let newVal = null
+      if (action) {
+        newVal = action.view
+      }
       if (newVal && newVal.id && this.touchedView.id !== newVal.id) {
         // 带 id 的动作给撤回时使用，不带 id，表示对当前选中对象进行操作
         const {
@@ -133,41 +176,10 @@ Component({
       const block = {
         width: this.currentPalette.width,
         height: this.currentPalette.height,
-        views: this.isEmpty(this.touchedView) ? [] : [{
-          type: 'rect',
-          css: {
-            height: `${rect.bottom - rect.top}px`,
-            width: `${rect.right - rect.left}px`,
-            left: `${rect.left}px`,
-            top: `${rect.top}px`,
-            borderWidth: '2rpx',
-            borderColor: '#0000ff',
-            color: 'transparent'
-          }
-        }, {
-          type: 'rect',
-          css: {
-            height: `${2 * ACTION_POINT_RADIUS}px`,
-            width: `${2 * ACTION_POINT_RADIUS}px`,
-            borderRadius: `${ACTION_POINT_RADIUS}px`,
-            color: '#0000ff',
-            left: `${rect.right - ACTION_POINT_RADIUS}px`,
-            top: `${rect.bottom - ACTION_POINT_RADIUS}px`
-          }
-        }]
+        views: this.isEmpty(doView) ? [] : [...this.getBox(rect)]
       }
       if (this.touchedView.type === 'text') {
-        block.views.push({
-          type: 'rect',
-          css: {
-            height: `${2 * ACTION_POINT_RADIUS}px`,
-            width: `${2 * ACTION_POINT_RADIUS}px`,
-            borderRadius: `${ACTION_POINT_RADIUS}px`,
-            color: '#0000ff',
-            left: `${rect.left - ACTION_POINT_RADIUS}px`,
-            top: `${rect.top - ACTION_POINT_RADIUS}px`
-          }
-        })
+        block.views.push(this.getDeleteIcon(rect))
       }
       const topBlock = new Pen(this.frontContext, block)
       topBlock.paint();
@@ -206,16 +218,17 @@ Component({
       const totalLayerCount = this.currentPalette.views.length
       let canBeTouched = []
       let isDelete = false
+      let deleteView = {}
+      let deleteIndex = -1
       for (let i = totalLayerCount - 1; i >= 0; i--) {
         const view = this.currentPalette.views[i]
         const {
           rect
         } = view
-        if (this.touchedView && this.touchedView.id &&
-          this.touchedView.id === view.id &&
-          this.isDelete(x, y, rect)) {
+        if (this.touchedView && this.touchedView.id && this.touchedView.id === view.id && this.isDelete(x, y, rect)) {
           canBeTouched.length = 0
-          this.currentPalette.views.splice(i, 1)
+          deleteIndex = i
+          deleteView = this.currentPalette.views[i]
           isDelete = true
           break
         }
@@ -266,6 +279,10 @@ Component({
         const topBlock = new Pen(this.frontContext, block)
         topBlock.paint();
         if (isDelete) {
+          this.triggerEvent('touchEnd', {
+            view: deleteView,
+            index: deleteIndex
+          })
           this.doAction()
         } else if (this.findedIndex < 0) {
           this.triggerEvent('touchStart', {})
@@ -342,8 +359,7 @@ Component({
         this.onClick(e)
       } else if (this.touchedView && !this.isEmpty(this.touchedView)) {
         this.triggerEvent('touchEnd', {
-          id: this.touchedView.id,
-          css: this.touchedView.css
+          view: this.touchedView,
         })
       }
       this.hasMove = false
@@ -394,7 +410,9 @@ Component({
         }
       }
       this.doAction({
-        css
+        view: {
+          css
+        }
       }, (callbackInfo) => {
         if (this.isScale) {
           this.movingCache = callbackInfo
@@ -440,6 +458,11 @@ Component({
         this.topContext || (this.topContext = wx.createCanvasContext('top', this));
         this.globalContext || (this.globalContext = wx.createCanvasContext('k-canvas', this));
         new Pen(this.globalContext, palette).paint();
+        new Pen(this.frontContext, {
+          width,
+          height,
+          views: []
+        }).paint()
       });
     },