fix(*): bugs

src/assets/styles/features/_edit-name.scss

@@ -1,3 +1,4 @@
+.connection-name-edit,
 .shape-name-edit {
   position: absolute;
   overflow: hidden;
@@ -6,7 +7,6 @@
   border-radius: 2px;
   padding: 0px;
   cursor: text;
-  z-index: 10;
 }
 
 .shape-name-temp {

src/core/designer.js

@@ -325,7 +325,7 @@ class Designer {
       prefix: 'obj'
     })
 
-    target.data.$type = element.data.$type
+    target.data.set('$type', element.data.$type)
     target.data.extensionElements.values = element.data.extensionElements.values
     target.data.name = element.data.name
     target.plane.id = element.plane.id

src/draw/drawUtils.js

@@ -1240,7 +1240,7 @@ const getConnectionPoints = (connection, elements) => {
 
 /**
  * 获取连线中间点
- * @param {*} c
+ * @param {*} shape
  */
 const getConnectionMidpoint = shape => {
   const midpoint = {}

src/features/edit-name/editName.js

@@ -1,5 +1,6 @@
 import eventBus from '../../core/eventBus'
 import $ from '../../utils/slimJQ'
+import DrawUtils from '../../draw/drawUtils'
 import { setScale, setExportData } from '../../utils/utils'
 
 const DEFAULT_CONFIG = {
@@ -23,6 +24,9 @@ class EditName {
     eventBus.on('edit.shape.name', this.editShapeName.bind(this))
   }
 
+  /**
+   * 编辑图形名称
+   */
   editShapeName() {
     const { $container, config } = this
 
@@ -51,6 +55,8 @@ class EditName {
 
       $('.text-box[data-shape=' + data.id + ']').hide()
 
+      const orders = eventBus.trigger('orders.get')
+
       const fontStyle = shape.fontStyle
       const textBlock = shape.getTextBlock()
       const editStyle = {
@@ -63,7 +69,8 @@ class EditName {
         'font-style': fontStyle.italic ? 'italic' : 'normal',
         'text-align': fontStyle.textAlign,
         color: 'rgb(' + fontStyle.color + ')',
-        'text-decoration': fontStyle.underline ? 'underline' : 'none'
+        'text-decoration': fontStyle.underline ? 'underline' : 'none',
+        'z-index': orders.length + 10
       }
 
       $edit.css(editStyle).show()
@@ -133,19 +140,15 @@ class EditName {
         .on('mousedown', e => {
           e.stopPropagation()
         })
-        .on('mouseenter', e => {
-          // TODO:
-        })
 
       $edit.trigger('keyup')
       $edit.select()
     }
   }
 
-  editConnectionName(element) {
-    // TODO:
-  }
-
+  /**
+   * 更新图形名称
+   */
   updateShapeName(element) {
     const { data } = element
     const $edit = this.$container.find('.shape-name-edit')
@@ -164,6 +167,113 @@ class EditName {
       $edit.remove()
     }
   }
+
+  /**
+   * 更新连线名称
+   */
+  editConnectionName(element) {
+    console.log(123, element)
+
+    const { $container, config } = this
+    const { data, plane, shape } = element
+
+    const $shape = $container.find('.shape-box[data-id=' + data.id + ']')
+    const $text = $shape.find('.text-box[data-shape=' + data.id + ']')
+    let $edit = $container.find('.connection-name-edit')
+    if ($edit.length === 0) {
+      $edit = $("<textarea class='connection-name-edit'></textarea>").appendTo(
+        $container.find('.bpd-designer')
+      )
+    }
+
+    $text.hide()
+
+    const orders = eventBus.trigger('orders.get')
+
+    const fontStyle = shape.fontStyle
+    const lineHeight = Math.round(fontStyle.size * 1.25)
+    const editStyle = {
+      'border-color': config.borderColor,
+      'line-height': lineHeight + 'px',
+      'font-size': fontStyle.size + 'px',
+      'font-family': fontStyle.fontFamily,
+      'font-weight': fontStyle.bold ? 'bold' : 'normal',
+      'font-style': fontStyle.italic ? 'italic' : 'normal',
+      'text-align': fontStyle.textAlign,
+      color: 'rgb(' + fontStyle.color + ')',
+      'text-decoration': fontStyle.underline ? 'underline' : 'none',
+      padding: 5,
+      'z-index': orders.length + 10
+    }
+
+    $edit.css(editStyle)
+    $edit
+      .val(data.name)
+      .show()
+      .select()
+
+    const midPoint = DrawUtils.getConnectionMidpoint(shape)
+
+    $edit
+      .off()
+      .on('keyup', () => {
+        const name = $edit.val()
+        const replaceName = name
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/\n/g, '<br/>')
+
+        $text.html(replaceName + '<br />')
+
+        let width = $text.width()
+        if (width < 50) {
+          width = 50
+        }
+        let height = $text.height()
+        if (height < lineHeight) {
+          height = lineHeight
+        }
+        $edit.css({
+          left: midPoint.x - width / 2 - 1 - 5,
+          top: midPoint.y - height / 2 - 1 - 5,
+          width,
+          height
+        })
+      })
+      .on('blur', () => {
+        this.updateConnectionName(element)
+      })
+      .on('mousemove', e => {
+        e.stopPropagation()
+      })
+      .on('mousedown', e => {
+        e.stopPropagation()
+      })
+
+    $edit.trigger('keyup')
+  }
+
+  /**
+   * 更新连线名称
+   * @param {*} element
+   */
+  updateConnectionName(element) {
+    const { data } = element
+    const $edit = this.$container.find('.connection-name-edit')
+    const connectionName = $edit.val()
+    if ($edit.length && $edit.is(':visible')) {
+      if (connectionName !== data.name) {
+        data.name = connectionName
+        eventBus.trigger('element.update', element)
+        this.config.onEdited(setExportData(element))
+      }
+      // 渲染连线
+      eventBus.trigger('connection.render', {
+        element
+      })
+      $edit.remove()
+    }
+  }
 }
 
 export default EditName

src/features/group-panel/groupPanel.js

@@ -39,6 +39,11 @@ class groupPanel {
     // 选中
     eventBus.on('group.connection.show', this.showConnectionGroup.bind(this))
   }
+
+  /**
+   * 显示面板
+   * @param {*} elements
+   */
   showGroup(elements) {
     if (elements.length === 1) {
       const { $container, bpmns, filter } = this
@@ -89,7 +94,6 @@ class groupPanel {
           self.groupPanel(groupName, width, height, type => {
             if (elements[0].shape.bpmnName !== type) {
               eventBus.trigger('element.change', { target: elements[0], type })
-              // eventBus.trigger('element.update', elements[0])
             }
           })
         })
@@ -183,7 +187,7 @@ class groupPanel {
   }
 
   /**
-   *
+   * 显示连线的图形面板
    * @param {*} connection
    */
   showConnectionGroup(connection) {
@@ -247,7 +251,6 @@ class groupPanel {
       .off()
       .on('mousedown', function(e) {
         e.stopPropagation()
-
         const groupName = $(this).data('group')
         const itemPos = $(this)
           .parent()
@@ -373,15 +376,18 @@ class groupPanel {
       7
     )
 
-    connection.data.targetRef = element.data.id
-    waypoint[waypoint.length - 1].angle = targetAngle
+    // 判断连线是否被撤销删掉
+    const originConnection = eventBus.trigger('element.get', connection.data.id)
+    if (originConnection) {
+      connection.data.targetRef = element.data.id
+      waypoint[waypoint.length - 1].angle = targetAngle
 
-    eventBus.trigger('connection.render', {
-      element: connection,
-      rendered: true
-    })
-
-    eventBus.trigger('element.update', connection)
+      eventBus.trigger('connection.render', {
+        element: connection,
+        rendered: true
+      })
+      eventBus.trigger('element.update', connection)
+    }
 
     // 结束记录
     eventBus.trigger('record.end')