feat(modeler): add label editing

Related to #7

Gruntfile.js

@@ -9,6 +9,30 @@ module.exports = function(grunt) {
   // any of [ 'PhantomJS', 'Chrome', 'Firefox', 'IE']
   var TEST_BROWSERS = ((process.env.TEST_BROWSERS || '').replace(/^\s+|\s+$/, '') || 'PhantomJS').split(/\s*,\s*/g);
 
+  function bundleAlias(components) {
+
+    var alias = [];
+
+    if (components.indexOf('libs-external') >= 0) {
+      alias.push('node_modules/jquery:jquery');
+      alias.push('node_modules/lodash:lodash');
+    }
+
+    if (components.indexOf('libs-local') >= 0) {
+      alias.push('node_modules/bpmn-moddle:bpmn-moddle');
+    }
+
+    if (components.indexOf('viewer') >= 0) {
+      alias.push('index.js:bpmn-js');
+      alias.push('<%= config.sources %>/Viewer.js:bpmn-js/Viewer');
+    }
+
+    if (components.indexOf('modeler') >= 0) {
+      alias.push('<%= config.sources %>/Modeler.js:bpmn-js/Modeler');
+    }
+
+    return alias;
+  }
 
   // project configuration
   grunt.initConfig({
@@ -80,22 +104,13 @@ module.exports = function(grunt) {
     browserify: {
       options: {
         browserifyOptions: {
-          builtins: false,
-          commondir: false
+          builtins: false
         },
         bundleOptions: {
           detectGlobals: false,
           insertGlobalVars: [],
           debug: true
-        },
-        alias: [
-          'node_modules/jquery:jquery',
-          'node_modules/lodash:lodash',
-          'node_modules/bpmn-moddle:bpmn-moddle',
-          '<%= config.sources %>/main.js:bpmn-js',
-          '<%= config.sources %>/Viewer.js:bpmn-js/Viewer',
-          '<%= config.sources %>/Modeler.js:bpmn-js/Modeler'
-        ]
+        }
       },
       watch: {
         files: {
@@ -103,13 +118,38 @@ module.exports = function(grunt) {
           '<%= config.dist %>/bpmn-viewer.js': [ '<%= config.sources %>/lib/Viewer.js' ]
         },
         options: {
-          watch: true
+          watch: true,
+          alias: bundleAlias([
+            'viewer',
+            'modeler',
+            'libs-external',
+            'libs-local'
+          ])
         }
       },
-      lib: {
+      standaloneViewer: {
+        files: {
+          '<%= config.dist %>/bpmn-viewer.js': [ '<%= config.sources %>/lib/Viewer.js' ]
+        },
+        options: {
+          alias: bundleAlias([
+            'viewer',
+            'libs-external',
+            'libs-local'
+          ])
+        }
+      },
+      standaloneModeler: {
         files: {
           '<%= config.dist %>/bpmn.js': [ '<%= config.sources %>/**/*.js' ],
-          '<%= config.dist %>/bpmn-viewer.js': [ '<%= config.sources %>/lib/Viewer.js' ]
+        },
+        options: {
+          alias: bundleAlias([
+            'viewer',
+            'modeler',
+            'libs-external',
+            'libs-local'
+          ])
         }
       }
     },
@@ -225,7 +265,7 @@ module.exports = function(grunt) {
         tasks.push('uglify:modeler', 'uglify:viewer');
       }
 
-      return grunt.task.run(['browserify:lib'].concat(tasks));
+      return grunt.task.run(['browserify:standaloneViewer', 'browserify:standaloneModeler'].concat(tasks));
     }
 
     if (target === 'samples') {

lib/Modeler.js

@@ -25,6 +25,7 @@ Modeler.prototype.createDiagram = function(modules) {
 Modeler.modules = [
   // TODO (nre): buggy in conjunction with zoomscroll / move canvas
   // require('diagram-js/lib/features/move'),
+  require('./features/label-editing'),
   require('./core'),
   require('./features/zoomscroll'),
   require('./features/movecanvas')

lib/features/label-editing/LabelEditingProvider.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var UpdateTextHandler = require('./cmd/UpdateTextHandler');
+
+
+function LabelEditingProvider(eventBus, canvas, directEditing, commandStack, bpmnRegistry) {
+
+  directEditing.registerProvider(this);
+  commandStack.registerHandler('bpmnElement.updateText', UpdateTextHandler);
+
+
+  // per default, listen to double click events
+  eventBus.on('shape.dblclick', function(event) {
+    directEditing.activate(event.element);
+  }.bind(this));
+
+  // intercept direct canvas clicks to deselect all
+  // selected shapes
+  eventBus.on('canvas.click', function(event) {
+    directEditing.complete();
+  });
+
+  this._bpmnRegistry = bpmnRegistry;
+  this._canvas = canvas;
+  this._commandStack = commandStack;
+}
+
+
+LabelEditingProvider.prototype.activate = function(element) {
+
+  var semantic = this._bpmnRegistry.getSemantic(element);
+
+  var text;
+
+  if (semantic.$instanceOf('bpmn:Pool') ||
+      semantic.$instanceOf('bpmn:Lane')) {
+
+    // TODO: Editing for pool / lane
+  }
+
+  if (semantic.$instanceOf('bpmn:TextAnnotation')) {
+    text = semantic.text;
+  }
+
+  if (semantic.$instanceOf('bpmn:FlowElement')) {
+    text = semantic.name;
+  }
+
+  var bbox = this.getEditingBBox(element);
+
+  if (semantic) {
+    return { bounds: bbox, text: text };
+  }
+};
+
+
+LabelEditingProvider.prototype.getEditingBBox = function(element) {
+
+  var bbox = this._canvas.getAbsoluteBBox(element.label || element);
+
+  var mid = {
+    x: bbox.x + bbox.width / 2,
+    y: bbox.y + bbox.height / 2
+  };
+
+  var minWidth = 150;
+  var minHeight = 100;
+
+  bbox.width = Math.max(bbox.width, minWidth);
+  bbox.height = Math.max(bbox.height, minHeight);
+
+  bbox.x = mid.x - bbox.width / 2;
+  bbox.y = mid.y - bbox.height / 2;
+
+  return bbox;
+};
+
+
+LabelEditingProvider.prototype.update = function(element, newText, oldText) {
+  this._commandStack.execute('bpmnElement.updateText', {
+    element: element,
+    oldText: oldText,
+    newText: newText
+  });
+};
+
+
+LabelEditingProvider.$inject = [ 'eventBus', 'canvas', 'directEditing', 'commandStack', 'bpmnRegistry' ];
+
+module.exports = LabelEditingProvider;

lib/features/label-editing/cmd/UpdateTextHandler.js

@@ -0,0 +1,51 @@
+'use strict';
+
+/**
+ * A handler that updates the text a BPMN element.
+ *
+ * @param {EventBus} eventBus
+ * @param {BpmnRegistry} bpmnRegistry
+ * @param {ElementRegistry} elementRegistry
+ */
+function UpdateTextHandler(eventBus, bpmnRegistry, elementRegistry) {
+
+  function setText(element, text) {
+
+    var semantic = bpmnRegistry.getSemantic(element);
+
+    if (semantic.$instanceOf('bpmn:TextAnnotation')) {
+      semantic.text = text;
+    }
+
+    if (semantic.$instanceOf('bpmn:FlowElement')) {
+      semantic.name = text;
+    }
+
+    eventBus.fire('shape.changed', { element: element.label || element });
+  }
+
+  function execute(ctx) {
+    setText(ctx.element, ctx.newText);
+  }
+
+  function revert(ctx) {
+    setText(ctx.element, ctx.oldText);
+  }
+
+
+  function canExecute(ctx) {
+    return true;
+  }
+
+  // API
+
+  this.execute = execute;
+  this.revert = revert;
+
+  this.canExecute = canExecute;
+}
+
+
+UpdateTextHandler.$inject = [ 'eventBus', 'bpmnRegistry' ];
+
+module.exports = UpdateTextHandler;

lib/features/label-editing/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  __depends__: [
+    require('../../core'),
+    require('diagram-js-direct-editing')
+  ],
+  __init__: [ 'labelEditingProvider' ],
+  labelEditingProvider: [ 'type', require('./LabelEditingProvider') ]
+};

package.json

@@ -48,26 +48,23 @@
     "karma-phantomjs-launcher": "0.1.2",
     "karma-ie-launcher": "~0.1.4",
     "karma-firefox-launcher": "~0.1.3",
-    "karma-bro": "~0.1.0",
+    "karma-bro": "~0.2.0",
     "jsondiffpatch": "~0.1.4",
-    "xsd-schema-validator": "0.0.3",
-    "sax": "~0.6.0",
     "brfs": "~1.0.0",
-    "lodash": "~2.4.0",
-    "didi": "~0.0.4",
-    "jquery": "~2.1.0",
-    "jquery-mousewheel": "~3.1.11",
     "through": "~2.3.4"
   },
   "dependencies": {
     "bpmn-moddle": "~0.0.1",
-    "moddle": "~0.0.5",
-    "diagram-js": "~0.1.0"
-  },
-  "peerDependencies": {
-    "lodash": "~2.4.0",
+    "diagram-js": "~0.1.0",
+    "diagram-js-direct-editing": "0.0.1",
     "didi": "~0.0.4",
     "jquery": "~2.1.0",
-    "jquery-mousewheel": "~3.1.11"
+    "jquery-mousewheel": "~3.1.11",
+    "lodash": "~2.4.0"
+  },
+  "browser": {
+    "lodash": "./vendor/lodash.js",
+    "jquery": "./vendor/jquery.js",
+    "jquery-mousewheel": "./vendor/jquery-mousewheel.js"
   }
 }

test/spec/browser/features/label-editing/LabelEditingProviderSpec.js

@@ -0,0 +1,33 @@
+'use strict'
+
+var fs = require('fs');
+
+var Modeler = require('../../../../../lib/Modeler');
+
+var Matchers = require('../../../Matchers');
+
+
+describe('features/label-editing', function() {
+
+  beforeEach(Matchers.add);
+
+  var container;
+
+  beforeEach(function() {
+    container = document.createElement('div');
+    document.getElementsByTagName('body')[0].appendChild(container);
+  });
+
+
+  it('should register on dblclick', function(done) {
+
+    done();
+  });
+
+
+  it('should save on escape', function(done) {
+
+    done();
+  });
+
+});

vendor/jquery-mousewheel.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var $;
+
+if (!window.$) {
+  $ = require('jquery');
+  require('../node_modules/jquery-mousewheel')($);
+}
+
+module.exports = window.$ || $;

vendor/jquery.js

@@ -0,0 +1 @@
+module.exports = window.$ || require('../node_modules/jquery');

vendor/lodash.js

@@ -0,0 +1 @@
+module.exports = window._ || require('../node_modules/lodash');