feat(palette): migrate to icon font

Related to #148

lib/features/palette/PaletteProvider.js

@@ -4,12 +4,10 @@ var _ = require('lodash'),
     $ = require('jquery');
 
 /**
- * A BPMN instance of the palette.
+ * A palette provider for BPMN 2.0 elements.
  */
-function BpmnPaletteProvider(eventBus, palette, modeling, elementRegistry, canvas) {
+function PaletteProvider(palette, modeling, elementRegistry, canvas) {
 
-  this._eventBus = eventBus;
-  this._palette  = palette;
   this._modeling = modeling;
   this._elementRegistry = elementRegistry;
   this._canvas   = canvas;
@@ -17,12 +15,12 @@ function BpmnPaletteProvider(eventBus, palette, modeling, elementRegistry, canva
   palette.registerProvider(this);
 }
 
-module.exports = BpmnPaletteProvider;
+module.exports = PaletteProvider;
 
-BpmnPaletteProvider.$inject = [ 'eventBus', 'palette', 'modeling', 'elementRegistry', 'canvas' ];
+PaletteProvider.$inject = [ 'palette', 'modeling', 'elementRegistry', 'canvas' ];
 
 
-BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
+PaletteProvider.prototype.getPaletteEntries = function(element) {
 
   var actions  = {},
       modeling = this._modeling,
@@ -40,7 +38,7 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
   _.extend(actions, {
     'add.start-event': {
       group: 'model-event',
-      img: '<circle fill="#ffffff" stroke="#000000" style="stroke-width: 1;" r="9" cy="12.5" cx="12.5"></circle>',
+      className: 'icon-start-event',
       alt: 'Start Event',
       action: function(event, element) {
         modeling.createShape({
@@ -48,10 +46,9 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
         }, center, root);
       }
     },
-    'add.inter-throw-event': {
+    'add.intermediate-throw-event': {
       group: 'model-event',
-      img: '<circle r="9" stroke="#000000" fill="#ffffff" cx="12.5" cy="12.5" style="stroke-width: 1px;"></circle>' +
-           '<circle r="7" stroke="#000000" fill="none"    cx="12.5" cy="12.5" style="stroke-width: 1px;"></circle>',
+      className: 'icon-intermediate-event',
       alt: 'Intermediate Throw Event',
       action: function(event, element) {
         modeling.createShape({
@@ -61,7 +58,7 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
     },
     'add.end-event': {
       group: 'model-event',
-      img: '<circle fill="#ffffff" stroke="#000000" style="stroke-width: 2;" r="9" cy="12.5" cx="12.5"/>',
+      className: 'icon-end-event',
       alt: 'End Event',
       action: function(event, element) {
         modeling.createShape({
@@ -71,8 +68,7 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
     },
     'add.exclusive-gateway': {
       group: 'model-gateway',
-      img: '<rect y="5" x="5" height="15" width="15" stroke="#000000" fill="#ffffff" ' +
-           'style="stroke-width: 1px;" transform="rotate(45,12.5,12.5)" />',
+      className: 'icon-gateway',
       alt: 'Exclusive Gateway',
       action: function(event, element) {
         modeling.createShape({
@@ -82,8 +78,7 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
     },
     'add.task': {
       group: 'model-activity',
-      img: '<rect fill="#ffffff" stroke="#000000" style="stroke-width: 1;" ry="5" rx="5" height="15" ' +
-           'width="20" y="5" x="2.5"></rect>',
+      className: 'icon-task',
       alt: 'Task',
       action: function(event, element) {
         modeling.createShape({
@@ -93,11 +88,8 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
     },
     'add.subProcess-collapsed': {
       group: 'model-activity',
-      img: '<rect fill="#ffffff" stroke="#000000" style="stroke-width: 1;" ry="4" rx="4" height="15" ' +
-           '  width="15" y="5" x="5" />' +
-           '<path d=" m 12.5,7.5 l 0,10 m -5,-5 l 10,0" fill="none" stroke="#000000" ' +
-           '  style="stroke-width: 2px;" />',
-      alt: 'Subprocess collapsed',
+      className: 'icon-subprocess-collapsed',
+      alt: 'Sub-Process (collapsed)',
       action: function(event, element) {
         modeling.createShape({
           type: 'bpmn:SubProcess',
@@ -107,11 +99,8 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
     },
     'add.subProcess-expanded': {
       group: 'model-activity',
-      img: '<rect fill="#ffffff" stroke="#000000" style="stroke-width: 1;" ry="4" rx="4" height="15" ' +
-           '  width="15" y="5" x="5"></rect>' +
-           '<path d=" m 7.5,12.5 l 10,0" fill="none" stroke="#000000" ' +
-           '  style="stroke-width: 2px;" />',
-      alt: 'Subprocess Expanded',
+      className: 'icon-subprocess-expanded',
+      alt: 'Sub-Process (expanded)',
       action: function(event, element) {
         modeling.createShape({
           type: 'bpmn:SubProcess',
@@ -122,13 +111,4 @@ BpmnPaletteProvider.prototype.getPaletteEntries = function(element) {
   });
 
   return actions;
-};
-
-BpmnPaletteProvider.prototype.open = function() {
-  this._palette.open();
-};
-
-
-BpmnPaletteProvider.prototype.close = function() {
-  this._palette.close();
-};
+};

lib/features/palette/index.js

@@ -2,6 +2,6 @@ module.exports = {
   __depends__: [
     require('diagram-js/lib/features/palette')
   ],
-  __init__: [ 'bpmnPaletteProvider' ],
-  bpmnPaletteProvider: [ 'type', require('./BpmnPaletteProvider') ],
+  __init__: [ 'paletteProvider' ],
+  paletteProvider: [ 'type', require('./PaletteProvider') ],
 };

test/spec/features/palette/BpmnPaletteProviderSpec.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var Matchers = require('../../../Matchers'),
-    TestHelper = require('../../../TestHelper');
-
-
-var fs = require('fs');
-
-var Modeler = require('../../../../lib/Modeler');
-var bpmnPaletteModule = require('../../../../lib/features/palette');
-
-
-
-describe('palette', function() {
-
-
-  beforeEach(Matchers.addDeepEquals);
-
-
-  var container;
-
-  beforeEach(function() {
-    container = jasmine.getEnv().getTestContainer();
-  });
-
-
-  function createModeler(xml, done) {
-    var modeler = new Modeler({ container: container });
-
-    modeler.importXML(xml, function(err) {
-      done(err, modeler);
-    });
-  }
-
-  it('should should draw palette', function(done) {
-
-    var modeler = new Modeler({ container: container });
-    modeler.createDiagram(function(err) {
-
-      var palette = modeler.get('bpmnPaletteProvider');
-
-      palette.open();
-
-      done(err);
-    });
-  });
-
-
-
-});

test/spec/features/palette/PaletteProviderSpec.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var TestHelper = require('../../../TestHelper');
+
+var Modeler = require('../../../../lib/Modeler');
+
+var $ = require('jquery');
+
+
+describe('palette', function() {
+
+  var container;
+
+  beforeEach(function() {
+    container = jasmine.getEnv().getTestContainer();
+  });
+
+
+  it('should should draw palette', function(done) {
+
+    var modeler = new Modeler({ container: container });
+    modeler.createDiagram(function(err) {
+
+      // assume
+      var provider = modeler.get('paletteProvider');
+
+      // then
+      expect(provider).toBeTruthy();
+
+      // when
+      var paletteElement = $(container).find('.djs-palette');
+
+      // then
+      expect(paletteElement.find('.entry').length).toBe(7);
+
+      done(err);
+    });
+  });
+
+});