Override diagram-js/lib/features/palette container

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”