diff --git a/src/assets/styles/features/_edit-name.scss b/src/assets/styles/features/_edit-name.scss index 64d4f1d..0217c03 100644 --- a/src/assets/styles/features/_edit-name.scss +++ b/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 { diff --git a/src/core/designer.js b/src/core/designer.js index b0433f7..37d808e 100644 --- a/src/core/designer.js +++ b/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 diff --git a/src/draw/drawUtils.js b/src/draw/drawUtils.js index 34bda9b..1a9ca86 100644 --- a/src/draw/drawUtils.js +++ b/src/draw/drawUtils.js @@ -1240,7 +1240,7 @@ const getConnectionPoints = (connection, elements) => { /** * 获取连线中间点 - * @param {*} c + * @param {*} shape */ const getConnectionMidpoint = shape => { const midpoint = {} diff --git a/src/features/edit-name/editName.js b/src/features/edit-name/editName.js index 1632c12..659e035 100644 --- a/src/features/edit-name/editName.js +++ b/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 = $("").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, '>') + .replace(/\n/g, '
') + + $text.html(replaceName + '
') + + 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 diff --git a/src/features/group-panel/groupPanel.js b/src/features/group-panel/groupPanel.js index b3a164e..7ef4dc9 100644 --- a/src/features/group-panel/groupPanel.js +++ b/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') diff --git a/static/index.html b/static/index.html index 504779d..dcbc96f 100644 --- a/static/index.html +++ b/static/index.html @@ -1,288 +1,288 @@ - - Demo - - - - - - - - + .other1 { + position: fixed; + bottom: 140px; + left: 20px; + } - -
+ .other2 { + position: fixed; + bottom: 170px; + left: 20px; + } + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
- - - - + + + - - + $('.multiselect').on('click touchstart', function () { + testBPD.activateSelect() + }) + } + + + + \ No newline at end of file