Hello David,
Thank you for your dedication and collaboration, i will check your implmentation ,
Luckily, I also come to the same solution by overriding the Palette.js file
I’m stepping with care but slowly to learn the the bpmn js library but i can do it with your help guys
Thanks again David and bpmn team,
'use strict';
var inherits = require('inherits');
var isFunction = require('lodash/lang/isFunction'),
forEach = require('lodash/collection/forEach');
var domify = require('min-dom/lib/domify'),
domQuery = require('min-dom/lib/query'),
domAttr = require('min-dom/lib/attr'),
domClear = require('min-dom/lib/clear'),
domClasses = require('min-dom/lib/classes'),
domMatches = require('min-dom/lib/matches'),
domDelegate = require('min-dom/lib/delegate'),
domEvent = require('min-dom/lib/event');
var Palette = require('diagram-js/lib/features/palette/Palette');
var $ = require('jquery');
var toggleSelector = '.djs-palette-toggle',
entrySelector = '.entry',
elementSelector = toggleSelector + ', ' + entrySelector;
/**
* A palette containing modeling elements.
*/
function DiagramPalette(eventBus, canvas, dragging) {
Palette.call(this, eventBus, canvas, dragging);
this._eventBus = eventBus;
this._canvas = canvas;
this._dragging = dragging;
this._providers = [];
var self = this;
eventBus.on('tool-manager.update', function(event) {
var tool = event.tool;
self.updateToolHighlight(tool);
});
eventBus.on('i18n.changed', function() {
self._update();
});
}
inherits(DiagramPalette, Palette);
DiagramPalette.$inject = [ 'eventBus', 'canvas', 'dragging' ];
module.exports = DiagramPalette;
DiagramPalette.prototype._init = function() {
var canvas = this._canvas,
eventBus = this._eventBus;
var parent = document.querySelector("#palette"),
container = this._container = domify(DiagramPalette.HTML_MARKUP),
self = this;
//$("djs-palette").removeClass(".djs-popup, .djs-palette");
parent.appendChild(container);
domDelegate.bind(container, elementSelector, 'click', function(event) {
var target = event.delegateTarget;
if (domMatches(target, toggleSelector)) {
return self.toggle();
}
self.trigger('click', event);
});
// prevent drag propagation
domEvent.bind(container, 'mousedown', function(event) {
event.stopPropagation();
});
// prevent drag propagation
domDelegate.bind(container, entrySelector, 'dragstart', function(event) {
self.trigger('dragstart', event);
});
eventBus.fire('palette.create', {
html: container
});
eventBus.on('canvas.resized', function() {
if (parent.clientHeight < 650) {
domClasses(container).add('two-column');
} else {
domClasses(container).remove('two-column');
}
});
};
/* markup definition */
DiagramPalette.HTML_MARKUP =
'<div class="djs-palette">' +
'<div class="djs-palette-entries"></div>' +
'<div class="djs-palette-toggle"></div>' +
'</div>';