Hello,
I’m trying to seperate the Palette tool from the Diagram and put it in the #palette div, according to a previous reply Vladimirs told me that i have to override the palette.js but running the function below does not seem to render and display the palette anymore, Is there something I am missing?
Cheers,
'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 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"); //$('#palette'); //canvas.getContainer(),
container = this._container = domify(DiagramPalette.HTML_MARKUP),
self = this;
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>';
<img src="/uploads/default/original/1X/bfab6a131d883dd784c304be9012fbf4d90c6e1f.png" width=“1362” height=“767”