Merge branch 'alpha' into heidao

painter.js

@@ -21,6 +21,10 @@ Component({
     customStyle: {
       type: String,
     },
+    // 运行自定义选择框和删除缩放按钮
+    customActionStyle: {
+      type: Object,
+    },
     palette: {
       type: Object,
       observer: function (newVal, oldVal) {
@@ -84,7 +88,7 @@ Component({
     },
 
     getBox(rect) {
-      return [{
+      const boxArea = {
         type: 'rect',
         css: {
           height: `${rect.bottom - rect.top}px`,
@@ -95,31 +99,66 @@ Component({
           borderColor: '#0000ff',
           color: 'transparent'
         }
-      }, {
+      }
+      if (this.properties.customActionStyle && this.properties.customActionStyle.border) {
+        boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border)
+      }
+      Object.assign(boxArea, {
+        id: 'box'
+      })
+      return boxArea
+    },
+
+    getScaleIcon(rect) {
+      let scaleArea = {}
+      if (this.properties.customActionStyle && this.properties.customActionStyle.scale) {
+        scaleArea = this.properties.customActionStyle.scale
+      } else {
+        scaleArea = {
           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`
           }
-      }]
+        }
+      }
+      scaleArea.css = Object.assign({}, scaleArea.css, {
+        align: 'center',
+        left: `${rect.right}px`,
+        top: `${rect.bottom - scaleArea.css.height.toPx() / 2}px`
+      })
+      Object.assign(scaleArea, {
+        id: 'scale'
+      })
+      return scaleArea
     },
 
     getDeleteIcon(rect) {
-      return {
+      let deleteArea = {}
+      if (this.properties.customActionStyle && this.properties.customActionStyle.delete) {
+        deleteArea = this.properties.customActionStyle.delete
+      } else {
+        deleteArea = {
           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`
           }
         }
+      }
+      deleteArea.css = Object.assign({}, deleteArea.css, {
+        align: 'center',
+        left: `${rect.left}px`,
+        top: `${rect.top - deleteArea.css.height.toPx() / 2}px`
+      })
+      Object.assign(deleteArea, {
+        id: 'delete'
+      })
+      return deleteArea
     },
 
     doAction(action, callback, isMoving) {
@@ -173,41 +212,51 @@ Component({
       const {
         rect
       } = doView
-      const block = {
+      this.block = {
         width: this.currentPalette.width,
         height: this.currentPalette.height,
-        views: this.isEmpty(doView) ? [] : [...this.getBox(rect)]
+        views: this.isEmpty(doView) ? [] : [this.getBox(rect)]
       }
-      if (this.touchedView.type === 'text') {
+      if (this.touchedView.css && this.touchedView.css.scalable) {
-        block.views.push(this.getDeleteIcon(rect))
+        this.block.views.push(this.getScaleIcon(rect))
       }
-      const topBlock = new Pen(this.frontContext, block)
+      if (this.touchedView.css && this.touchedView.css.deletable) {
+        this.block.views.push(this.getDeleteIcon(rect))
+      }
+      const topBlock = new Pen(this.frontContext, this.block)
       topBlock.paint();
     },
 
-    inArea(x, y, rect, hasTouchedView) {
+    isInView(x, y, rect) {
-      return (hasTouchedView &&
+      return (x > rect.left &&
-          ((x > rect.left &&
-              y > rect.top &&
-              x < rect.right &&
-              y < rect.bottom) ||
-            (x > rect.right - ACTION_POINT_RADIUS &&
-              y > rect.bottom - ACTION_POINT_RADIUS &&
-              x < rect.right + ACTION_POINT_RADIUS &&
-              y < rect.bottom + ACTION_POINT_RADIUS))
-        ) ||
-        (x > rect.left &&
         y > rect.top &&
         x < rect.right &&
         y < rect.bottom
       )
     },
 
-    isDelete(x, y, rect) {
+    isInDelete(x, y) {
-      return (x > rect.left - ACTION_POINT_RADIUS &&
+      for (const view of this.block.views) {
-        y > rect.top - ACTION_POINT_RADIUS &&
+        if (view.id === 'delete') {
-        x < rect.left + ACTION_POINT_RADIUS &&
+          return (x > view.rect.left &&
-        y < rect.top + ACTION_POINT_RADIUS)
+            y > view.rect.top &&
+            x < view.rect.right &&
+            y < view.rect.bottom)
+        }
+      }
+      return false
+    },
+
+    isInScale(x, y) {
+      for (const view of this.block.views) {
+        if (view.id === 'scale') {
+          return (x > view.rect.left &&
+            y > view.rect.top &&
+            x < view.rect.right &&
+            y < view.rect.bottom)
+        }
+      }
+      return false
     },
 
     touchedView: {},
@@ -224,13 +273,13 @@ Component({
         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.isInDelete(x, y, rect)) {
           canBeTouched.length = 0
           deleteIndex = i
           isDelete = true
           break
         }
-        if (this.inArea(x, y, rect, !this.isEmpty(this.touchedView))) {
+        if (this.isInView(x, y, rect)) {
           canBeTouched.push({
             view,
             index: i
@@ -341,7 +390,7 @@ Component({
         const {
           rect
         } = this.touchedView
-        if (rect.right - ACTION_POINT_RADIUS < x && x < rect.right + ACTION_POINT_RADIUS && rect.bottom - ACTION_POINT_RADIUS < y && y < rect.bottom + ACTION_POINT_RADIUS) {
+        if (this.isInScale(x, y, rect)) {
           this.isScale = true
           this.movingCache = {}
           this.startH = rect.bottom - rect.top
@@ -355,7 +404,7 @@ Component({
     onTouchEnd(e) {
       const current = new Date().getTime()
       if ((current - this.startTimeStamp) <= 500 && !this.hasMove) {
-        this.onClick(e)
+        !this.isScale && this.onClick(e)
       } else if (this.touchedView && !this.isEmpty(this.touchedView)) {
         this.triggerEvent('touchEnd', {
           view: this.touchedView,