From 5dd3533222948ce7ce168e7c2e101b64cbe2ebb1 Mon Sep 17 00:00:00 2001
From: David Castillo <davcs86@gmail.com>
Date: Wed, 26 Oct 2016 10:58:31 -0500
Subject: [PATCH] Palette in a different DIV

---
 dist/app/components/modeler/modelerFactory.js |  9 ++-
 dist/app/components/modeler/modelerView.html  |  8 ++-
 lib/Modeler.js                                | 13 ++--
 lib/palette-override/Palette.js               | 62 +++++++++++++++++++
 lib/palette-override/index.js                 |  4 ++
 lib/palette/index.js                          |  2 +-
 6 files changed, 85 insertions(+), 13 deletions(-)
 create mode 100644 lib/palette-override/Palette.js
 create mode 100644 lib/palette-override/index.js

diff --git a/dist/app/components/modeler/modelerFactory.js b/dist/app/components/modeler/modelerFactory.js
index bd6fd08..713837f 100644
--- a/dist/app/components/modeler/modelerFactory.js
+++ b/dist/app/components/modeler/modelerFactory.js
@@ -62,9 +62,12 @@
         propertiesPanel: {
           parent: '#modeler-properties-panel'
         },
-          pemworkSettings: {
-        base_url: 'http://localhost/PemworkBPMApp/'
-      },
+        paletteOverride: {
+          parent: '#modeler-palette-override'
+        },
+        pemworkSettings: {
+          base_url: 'http://localhost/PemworkBPMApp/'
+        },
         additionalModules: [
           that.getCurrentProvider()
         ]
diff --git a/dist/app/components/modeler/modelerView.html b/dist/app/components/modeler/modelerView.html
index 9262294..e360358 100644
--- a/dist/app/components/modeler/modelerView.html
+++ b/dist/app/components/modeler/modelerView.html
@@ -63,9 +63,11 @@ <h3 class="module-title">Modeler</h3>
         </div>
     </div>
     <div class="flex-item-grow flex-container flex-container-row">
-
+        <div class="flex-item-grow" style="flex: 0.25; background-color: #f00;">
+            <div id="modeler-palette-override" class="canvas"></div>
+        </div>
         <div class="flex-item-grow" id="modeler-container">
-            <div class="io-zoom-controls">
+            <!--<div class="io-zoom-controls">
 
                 <ul class="io-zoom-reset io-control io-control-list">
                     <li>
@@ -90,7 +92,7 @@ <h3 class="module-title">Modeler</h3>
                         </button>
                     </li>
                 </ul>
-            </div>
+            </div>-->
             <div id="modeler-canvas" class="canvas"></div>
         </div>
         <div class="flex-item-grow" id="properties-panel-container">
diff --git a/lib/Modeler.js b/lib/Modeler.js
index f527360..998323b 100644
--- a/lib/Modeler.js
+++ b/lib/Modeler.js
@@ -4,12 +4,13 @@ var inherits = require('inherits'),
     BaseBpmnModeler = require('bpmn-js/lib/Modeler'),
     // load additional modules
     additionalModules = [
-        require('./panel'),
-        require('diagram-js/lib/i18n'),
-        require('bpmn-js-i18next'),
-        require('./translate'),
-        require('./context-pad'),
-        require('./palette'),
+      require('./panel'),
+      require('diagram-js/lib/i18n'),
+      require('bpmn-js-i18next'),
+      require('./translate'),
+      require('./context-pad'),
+      require('./palette'),
+      require('./palette-override'), //
       require('./popup-menu'),//,
       require('./replace'),
         // Descomentar en producción, comentar en desarrollo
diff --git a/lib/palette-override/Palette.js b/lib/palette-override/Palette.js
new file mode 100644
index 0000000..5765b00
--- /dev/null
+++ b/lib/palette-override/Palette.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var inherits = require('inherits'),
+    BasePalette = require('diagram-js/lib/features/palette/Palette');
+
+var domify = require('min-dom/lib/domify'),
+  domQuery = require('min-dom/lib/query'),
+  domMatches = require('min-dom/lib/matches'),
+  domDelegate = require('min-dom/lib/delegate'),
+  domEvent = require('min-dom/lib/event');
+
+
+var toggleSelector = '.djs-palette-toggle',
+  entrySelector = '.entry',
+  elementSelector = toggleSelector + ', ' + entrySelector;
+
+function Palette(config, eventBus, dragging) {
+  this._parent = config.parent;
+  BasePalette.call(this, eventBus, {}, dragging);
+}
+
+inherits(Palette, BasePalette);
+
+/**
+ * Override init method
+ */
+Palette.prototype._init = function() {
+  var parent = domQuery(this._parent),
+    container = this._container = domify(BasePalette.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);
+  });
+
+  this._eventBus.fire('palette.create', {
+    html: container
+  });
+};
+
+Palette.$inject = [ 'config.paletteOverride', 'eventBus', 'dragging' ];
+
+module.exports = Palette;
\ No newline at end of file
diff --git a/lib/palette-override/index.js b/lib/palette-override/index.js
new file mode 100644
index 0000000..62fb77e
--- /dev/null
+++ b/lib/palette-override/index.js
@@ -0,0 +1,4 @@
+module.exports = {
+  __init__: [ 'palette' ],
+  palette: [ 'type', require('./Palette') ]
+};
\ No newline at end of file
diff --git a/lib/palette/index.js b/lib/palette/index.js
index 2af7fbe..dfcb703 100644
--- a/lib/palette/index.js
+++ b/lib/palette/index.js
@@ -1,6 +1,6 @@
 module.exports = {
   __depends__: [
-    require('diagram-js/lib/features/palette'),
+    require('../palette-override'),
     require('diagram-js/lib/features/create'),
     require('diagram-js/lib/features/space-tool'),
     require('diagram-js/lib/features/lasso-tool'),