Update toolbar position

src/commands/view/SelectComponent.js

@@ -265,21 +265,37 @@ define(function() {
 
 					var view = model.get('view');
 					if(view) {
-						var canvasPos = this.getCanvasPosition();
+						this.updateToolbarPos(view.el);
-						var pos = this.getElementPos(view.el);
-						var toolbarStyle = toolbarEl.style;
-						var unit = 'px';
-						// TODO Fix toolbar over the canvas (the problem is with the fisrt top el)
-						var topPos = (pos.top - toolbarEl.offsetHeight) < canvasPos.top ?
-							canvasPos.top : pos.top - toolbarEl.offsetHeight;
-						//var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
-						toolbarStyle.display = 'flex';
-						toolbarStyle.left = (pos.left + pos.width - toolbarEl.offsetWidth) + unit; //
-						toolbarStyle.top = (pos.top - toolbarEl.offsetHeight) + unit;
 					}
 				}
 			},
 
+			/**
+			 * Update toolbar positions
+			 * @param {HTMLElement} el
+			 * @param {Object} pos
+			 */
+			updateToolbarPos: function(el, elPos) {
+				var toolbarEl = this.canvas.getToolbarEl();
+				var canvasPos = this.getCanvasPosition();
+				var pos = elPos || this.getElementPos(el);
+				var toolbarStyle = toolbarEl.style;
+				var unit = 'px';
+				var elTop = pos.top - toolbarEl.offsetHeight;
+				var elLeft = pos.left + pos.width - toolbarEl.offsetWidth;
+				var leftPos = elLeft < canvasPos.left ? canvasPos.left : elLeft;
+
+				// This will make the toolbar follow the window up
+				// and down while scrolling
+				var topPos = elTop < canvasPos.top ? canvasPos.top : elTop;
+				// This will stop the toolbar when the end of the element is reached
+				topPos = topPos > (pos.top + pos.height) ? (pos.top + pos.height) : topPos;
+
+				toolbarStyle.display = 'flex';
+				toolbarStyle.left = elLeft + unit;
+				toolbarStyle.top = topPos + unit;
+			},
+
 			/**
 			 * Return canvas dimensions and positions
 			 * @return {Object}
@@ -312,8 +328,16 @@ define(function() {
 			 */
 			onFrameScroll: function(e){
 				var el = this.cacheEl;
-				if(el)
+				if(el){
-					this.updateBadge(el, this.getElementPos(el));
+					var elPos = this.getElementPos(el);
+					this.updateBadge(el, elPos);
+					var model = this.editorModel.get('selectedComponent');
+
+					if (model) {
+						var view = model.get('view');
+						this.updateToolbarPos(view.el);
+					}
+				}
 			},
 
 			/**

src/dom_components/model/ComponentImage.js

@@ -10,6 +10,19 @@ define(['./Component'],
 				void: 1,
 				droppable: false,
 				traits: ['alt'],
+				toolbar: [{
+					className: 'fa fa-arrows',
+					command: 'tlb-move',
+				},{
+					className: 'fa fa-clone',
+					command: 'tlb-clone',
+				},{
+					className: 'fa fa-pencil',
+					command: 'tlb-edit',
+				},{
+					className: 'fa fa-trash-o',
+					command: 'tlb-delete',
+				}],
 			}),
 
 			initialize: function(o, opt) {

styles/css/main.css

@@ -2804,7 +2804,8 @@ div.gjs-select {
 .gjs-toolbar {
   position: absolute;
   background-color: #3b97e3;
-  color: white; }
+  color: white;
+  z-index: 10; }
 
 .gjs-toolbar-item {
   padding: 5px 7px;

styles/scss/main.scss

@@ -334,6 +334,7 @@ div.#{$app-prefix}select {
   position: absolute;
   background-color: $colorBlue;
   color: white;
+  z-index: 10;
 }
 
 .#{$app-prefix}toolbar-item {