feat(property): add ability to edit the id attribute

closes #34

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib');

lib/PropertiesPanel.js

@@ -1046,7 +1046,14 @@ PropertiesPanel.prototype._updateActivation = function(current) {
   });
 
   // inject elements id into header
-  updateLabel(panelNode, '[data-label-id]', element.id || '');
+  var propertiesProvider = self._propertiesProvider,
+      labelId = element.id;
+
+  if (propertiesProvider.getHeaderLabel) {
+    labelId = propertiesProvider.getHeaderLabel(element);
+  }
+
+  updateLabel(panelNode, '[data-label-id]', labelId || '');
 };
 
 PropertiesPanel.prototype._createPanel = function(element, tabs) {

lib/factory/EntryFactory.js

@@ -32,43 +32,93 @@ function ensureNotNull(prop) {
  * @returns {{id: *, description: (*|string), get: (*|Function), set: (*|Function),
  *            validate: (*|Function), html: string}}
  */
-var setDefaultParameters = function( options ) {
+var setDefaultParameters = function(options) {
+
+  function getReferencedObject(element, reference) {
+    var bo = getBusinessObject(element);
+    return (reference && bo.get(reference)) || bo;
+  }
+
+
+  // default /////////////////////////////////////////////////////////
 
   // default method to fetch the current value of the input field
   var defaultGet = function(element) {
     var bo = getBusinessObject(element),
         res = {},
-        prop = ensureNotNull(options.modelProperty);
+        prop = ensureNotNull(options.modelProperty),
+        reference = options.reference;
+
+    bo = (reference && bo.get(reference)) || bo;
+
     res[prop] = bo.get(prop);
 
     return res;
   };
 
-// default method to set a new value to the input field
+  // default method to set a new value to the input field
   var defaultSet = function(element, values) {
     var res = {},
-        prop = ensureNotNull(options.modelProperty);
+        prop = ensureNotNull(options.modelProperty),
+        reference = options.reference,
+        bo = getBusinessObject(element);
+
     if (values[prop] !== '') {
       res[prop] = values[prop];
     } else {
       res[prop] = undefined;
     }
 
-    return cmdHelper.updateProperties(element, res);
+    bo = (reference && bo.get(reference)) || bo;
+
+    return cmdHelper.updateProperties(bo, res, element);
   };
 
-// default validation method
+  // default validation method
   var defaultValidate = function() {
     return {};
   };
 
+
+  // wrapper ////////////////////////////////////////
+
+  var wrapperGet = function(element, node) {
+
+    var reference = options.reference,
+        getter = options.get || defaultGet;
+
+    return getter(element, node, getReferencedObject(element, reference));
+
+  };
+
+  var wrapperSet = function(element, values, node) {
+
+    var reference = options.reference,
+        setter = options.set || defaultSet;
+
+    return setter(element, values, node, getReferencedObject(element, reference));
+
+  };
+
+  var wrapperValidate = function(element, values, node) {
+
+    var reference = options.reference,
+        validator = options.validate || defaultValidate;
+
+    return validator(element, values, node, getReferencedObject(element, reference));
+
+  };
+
+
+
   return {
     id : options.id,
     description : ( options.description || '' ),
-    get : ( options.get || defaultGet ),
-    set : ( options.set || defaultSet ),
-    validate : ( options.validate || defaultValidate ),
-    html: ''
+    get : wrapperGet,
+    set : wrapperSet,
+    validate : wrapperValidate,
+    html: '',
+    reference: options.reference
   };
 };
 

lib/factory/ValidationAwareTextInput.js

@@ -9,7 +9,10 @@ var textField = require('./TextInputEntryFactory');
  */
 var validationAwareTextField = function(options, defaultParameters) {
 
-  var modelProperty = options.modelProperty;
+  var modelProperty = options.modelProperty,
+      defaultGet = defaultParameters.get,
+      defaultSet = defaultParameters.set;
+
 
   defaultParameters.get = function(element, node) {
     var value = this.__lastInvalidValue;
@@ -18,27 +21,34 @@ var validationAwareTextField = function(options, defaultParameters) {
 
     var properties = {};
 
-    properties[modelProperty] = value !== undefined ? value : options.getProperty(element, node);
+    if (value !== undefined) {
+      properties[modelProperty] = value;
+    }
+    else {
+      properties = defaultGet(element, node);
+    }
 
     return properties;
   };
 
   defaultParameters.set = function(element, values, node) {
     var validationErrors = validate.apply(this, [ element, values, node ]),
-        propertyValue = values[modelProperty];
+        propertyValue = values[modelProperty],
+        properties = {};
 
     // make sure we do not update the id
     if (validationErrors && validationErrors[modelProperty]) {
+
       this.__lastInvalidValue = propertyValue;
+      properties = defaultGet(element, node);
 
-      return options.setProperty(element, {}, node);
     } else {
-      var properties = {};
 
       properties[modelProperty] = propertyValue;
 
-      return options.setProperty(element, properties, node);
     }
+
+    return defaultSet(element, properties, node);
   };
 
   var validate = defaultParameters.validate = function(element, values, node) {

lib/helper/CmdHelper.js

@@ -3,10 +3,10 @@
 var CmdHelper = {};
 module.exports = CmdHelper;
 
-CmdHelper.updateProperties = function(element, properties) {
+CmdHelper.updateProperties = function(element, properties, shape) {
   return {
     cmd: 'element.updateProperties',
-    context: { element: element, properties: properties }
+    context: { element: element, properties: properties, shape: shape }
   };
 };
 

lib/helper/CmmnElementHelper.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var ModelUtil = require('cmmn-js/lib/util/ModelUtil'),
+    is = ModelUtil.is,
+    getBusinessObject = ModelUtil.getBusinessObject;
+
+var isAny = require('cmmn-js/lib/features/modeling/util/ModelingUtil').isAny;
+
+
+function isItemCapable(element) {
+  return isAny(element, [
+    'cmmn:PlanItem',
+    'cmmn:DiscretionaryItem',
+    'cmmn:CaseFileItem'
+  ]);
+}
+
+module.exports.isItemCapable = isItemCapable;
+
+
+function isCriterion(element) {
+  return is(element, 'cmmn:Criterion');
+}
+
+module.exports.isCriterion = isCriterion;
+
+
+function isCMMNEdge(element) {
+  return is(element, 'cmmndi:CMMNEdge');
+}
+
+module.exports.isCMMNEdge = isCMMNEdge;
+
+
+function getCMMNElementRef(element) {
+  var bo = getBusinessObject(element);
+  return bo && bo.cmmnElementRef;
+}
+
+module.exports.getCMMNElementRef = getCMMNElementRef;

lib/provider/camunda/CamundaPropertiesProvider.js

@@ -2,12 +2,50 @@
 
 var inherits = require('inherits');
 
+var CmmnElementHelper = require('../../helper/CmmnElementHelper'),
+    isCMMNEdge = CmmnElementHelper.isCMMNEdge,
+    getCMMNElementRef = CmmnElementHelper.getCMMNElementRef;
+
 var PropertiesActivator = require('../../PropertiesActivator');
 
+// cmmn properties
+
+// item properties
+var itemIdProps = require('../cmmn/parts/ItemIdProps');
+
+// definition props
+var definitionIdProps = require('../cmmn/parts/DefinitionIdProps');
+
+
+function createGeneralTabGroups(element, cmmnFactory, elementRegistry, itemRegistry) {
+
+  var generalGroup = {
+    id: 'general',
+    label: 'General',
+    entries: []
+  };
+
+  itemIdProps(generalGroup, element, elementRegistry, itemRegistry);
+
+  return [
+    generalGroup
+  ];
+
+}
+
+function createDefinitionTabGroups(element, cmmnFactory, elementRegistry, itemRegistry) {
+
+  var detailsGroup = {
+    id: 'details',
+    label: 'Details',
+    entries: []
+  };
 
-function createGeneralTabGroups(element, cmmnFactory, elementRegistry) {
+  definitionIdProps(detailsGroup, element, elementRegistry, itemRegistry);
 
-  return [];
+  return [
+    detailsGroup
+  ];
 
 }
 
@@ -22,7 +60,7 @@ function createGeneralTabGroups(element, cmmnFactory, elementRegistry) {
  * @param {CmmnFactory} cmmnFactory
  * @param {ElementRegistry} elementRegistry
  */
-function CamundaPropertiesProvider(eventBus, cmmnFactory, elementRegistry) {
+function CamundaPropertiesProvider(eventBus, cmmnFactory, elementRegistry, itemRegistry) {
 
   PropertiesActivator.call(this, eventBus);
 
@@ -31,22 +69,39 @@ function CamundaPropertiesProvider(eventBus, cmmnFactory, elementRegistry) {
     var generalTab = {
       id: 'general',
       label: 'General',
-      groups: createGeneralTabGroups(
-                  element, cmmnFactory,
-                  elementRegistry)
+      groups: createGeneralTabGroups(element, cmmnFactory, elementRegistry, itemRegistry)
+    };
+
+    var definitionTab = {
+      id: 'definition',
+      label: 'Definition',
+      groups: createDefinitionTabGroups(element, cmmnFactory, elementRegistry, itemRegistry)
     };
 
     return [
-      generalTab
+      generalTab,
+      definitionTab
     ];
+
+  };
+
+  this.getHeaderLabel = function(element) {
+
+    if (isCMMNEdge(element)) {
+      element = getCMMNElementRef(element) || element;
+    }
+
+    return element.id;
+
   };
 
 }
 
 CamundaPropertiesProvider.$inject = [
   'eventBus',
   'cmmnFactory',
-  'elementRegistry'
+  'elementRegistry',
+  'itemRegistry'
 ];
 
 inherits(CamundaPropertiesProvider, PropertiesActivator);