DataKey chips dnd improvements. Update AngularJS Material version to 1.1.19.

ui/package.json

@@ -26,8 +26,8 @@
     "angular-fullscreen": "git://github.com/fabiobiondi/angular-fullscreen.git#master",
     "angular-gridster": "^0.13.14",
     "angular-hotkeys": "^1.7.0",
-    "angular-jwt": "^0.1.6",
+    "angular-jwt": "^0.1.11",
-    "angular-material": "1.1.13",
+    "angular-material": "1.1.19",
     "angular-material-data-table": "^0.10.9",
     "angular-material-expansion-panel": "^0.7.2",
     "angular-material-icons": "^0.7.1",
@@ -56,27 +56,27 @@
     "flot.curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master",
     "font-awesome": "^4.6.3",
     "javascript-detect-element-resize": "^0.5.3",
-    "jquery": "^3.1.0",
+    "jquery": "^3.4.1",
     "jquery.terminal": "^1.5.0",
-    "js-beautify": "^1.6.4",
+    "js-beautify": "^1.10.0",
     "json-schema-defaults": "^0.2.0",
-    "jstree": "^3.3.7",
+    "jstree": "^3.3.8",
     "jstree-bootstrap-theme": "^1.0.1",
-    "leaflet": "^1.0.3",
+    "leaflet": "^1.5.1",
     "leaflet-polylinedecorator": "^1.6.0",
-    "leaflet-providers": "^1.1.17",
+    "leaflet-providers": "^1.8.0",
     "material-ui": "^0.16.1",
     "material-ui-number-input": "^5.0.16",
     "md-color-picker": "0.2.6",
     "md-date-range-picker": "^0.8.4",
     "mdPickers": "git://github.com/alenaksu/mdPickers.git#0.7.5",
-    "moment": "^2.15.0",
+    "moment": "^2.24.0",
     "ngFlowchart": "git://github.com/thingsboard/ngFlowchart.git#master",
     "ngclipboard": "^1.1.1",
     "ngreact": "^0.3.0",
     "objectpath": "^1.2.1",
     "oclazyload": "^1.0.9",
-    "raphael": "^2.2.7",
+    "raphael": "^2.2.8",
     "rc-select": "^6.6.1",
     "react": "^15.4.1",
     "react-ace": "^4.1.0",
@@ -101,11 +101,11 @@
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.16.0",
     "compression-webpack-plugin": "^1.1.11",
-    "connect-history-api-fallback": "^1.3.0",
+    "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^3.0.1",
     "cross-env": "^3.2.4",
     "css-loader": "^0.25.0",
-    "directory-tree": "^2.1.0",
+    "directory-tree": "^2.2.3",
     "eslint": "^3.4.0",
     "eslint-config-angular": "^0.5.0",
     "eslint-loader": "^1.5.0",
@@ -113,6 +113,7 @@
     "eslint-plugin-import": "^1.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "happypack": "^5.0.1",
     "html-loader": "^0.4.3",
     "html-minifier": "^3.2.2",
     "html-minifier-loader": "^1.3.4",
@@ -123,26 +124,25 @@
     "less-loader": "^2.2.3",
     "ng-annotate-loader": "^0.1.1",
     "ngtemplate-loader": "^1.3.1",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.12.0",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
-    "stylelint": "^9.5.0",
+    "stylelint": "^9.10.1",
-    "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-config-recommended-scss": "^3.3.0",
-    "stylelint-config-standard": "^18.2.0",
+    "stylelint-config-standard": "^18.3.0",
     "stylelint-order": "^1.0.0",
-    "stylelint-scss": "^3.3.0",
+    "stylelint-scss": "^3.8.0",
     "stylelint-webpack-plugin": "^0.10.5",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-dev-server": "^1.15.1",
-    "webpack-hot-middleware": "^2.12.2",
+    "webpack-hot-middleware": "^2.25.0",
-    "webpack-material-design-icons": "^0.1.0",
+    "webpack-material-design-icons": "^0.1.0"
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "happypack": "^5.0.1"
   },
   "engine": "node >= 5.9.0",
   "nyc": {

ui/src/app/app.config.js

@@ -31,6 +31,7 @@ export default function AppConfig($provide,
                                   $urlRouterProvider,
                                   $locationProvider,
                                   $mdIconProvider,
+                                  ngMdIconServiceProvider,
                                   $mdThemingProvider,
                                   $httpProvider,
                                   $translateProvider,
@@ -76,6 +77,9 @@ export default function AppConfig($provide,
 
     $mdIconProvider.iconSet('mdi', mdiIconSet);
 
+    ngMdIconServiceProvider
+        .addShape('alpha-a-circle-outline', '<path d="M11,7H13A2,2 0 0,1 15,9V17H13V13H11V17H9V9A2,2 0 0,1 11,7M11,9V11H13V9H11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />');
+
     configureTheme();
 
     function blueGrayTheme() {

ui/src/app/components/datasource-entity.tpl.html

@@ -26,7 +26,7 @@
 		   <section flex layout='column' layout-align="center" style="padding-left: 4px;">
 			   <md-chips flex ng-if="widgetType != types.widgetType.alarm.value"
                          id="datakey_chips"
-                         ng-model="dataKeys" md-autocomplete-snap
+                         ng-model="dataKeys"
                          md-transform-chip="transformDataKeyChip($chip)"
                          md-require-match="false">
 					  <md-autocomplete
@@ -41,7 +41,7 @@
 							md-menu-class="tb-datakey-autocomplete">
 							<span ng-show="item.type==types.dataKeyType.attribute">
 								<md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
-								<ng-md-icon size="16" icon="perm_device_information"></ng-md-icon>
+								<ng-md-icon size="16" icon="alpha-a-circle-outline"></ng-md-icon>
 							</span>
 							<span ng-show="item.type==types.dataKeyType.timeseries">
 								<md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
@@ -58,7 +58,7 @@
 									  <span>{{'entity.create-new-key' | translate }}  </span>
 									  <span ng-show="widgetType == types.widgetType.latest.value">
 										  <md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
-									      <ng-md-icon size="16" icon="perm_device_information" ng-click="createKey($event, types.dataKeyType.attribute, '#datakey_chips')"></ng-md-icon>
+									      <ng-md-icon size="16" icon="alpha-a-circle-outline" ng-click="createKey($event, types.dataKeyType.attribute, '#datakey_chips')"></ng-md-icon>
 									  </span>
 			                          <span>
 										  <md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
@@ -80,7 +80,7 @@
 								  <div class="tb-chip-label">
                                       <span ng-show="$chip.type==types.dataKeyType.attribute">
                                           <md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
-                                          <ng-md-icon size="20" icon="perm_device_information"></ng-md-icon>
+                                          <ng-md-icon size="20" icon="alpha-a-circle-outline"></ng-md-icon>
                                       </span>
                                       <span ng-show="$chip.type==types.dataKeyType.timeseries">
                                           <md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
@@ -103,7 +103,7 @@
 			   <md-chips flex ng-if="widgetType == types.widgetType.alarm.value"
 						 id="alarm_datakey_chips"
 						 ng-required="true"
-						 ng-model="alarmDataKeys" md-autocomplete-snap
+						 ng-model="alarmDataKeys"
 						 md-transform-chip="transformAlarmDataKeyChip($chip)"
 						 md-require-match="false">
 				   <md-autocomplete

ui/src/app/components/datasource-func.tpl.html

@@ -28,7 +28,7 @@
 	   <md-chips flex ng-if="widgetType != types.widgetType.alarm.value"
 					 id="function_datakey_chips"
 					 ng-required="true"
-					 ng-model="funcDataKeys" md-autocomplete-snap
+					 ng-model="funcDataKeys"
 					 md-transform-chip="transformFuncDataKeyChip($chip)"
 					 md-require-match="false">
 				  <md-autocomplete
@@ -82,7 +82,7 @@
 		<md-chips flex ng-if="widgetType == types.widgetType.alarm.value"
 				  id="alarm_datakey_chips"
 				  ng-required="true"
-				  ng-model="alarmDataKeys" md-autocomplete-snap
+				  ng-model="alarmDataKeys"
 				  md-transform-chip="transformAlarmDataKeyChip($chip)"
 				  md-require-match="false">
 			<md-autocomplete

ui/src/app/components/md-chip-draggable.directive.js

@@ -13,6 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import './md-chip-draggable.scss';
+
+var globalDraggingChipsWrapId = null;
+
 export default angular.module('thingsboard.directives.mdChipDraggable', [])
     .directive('tbChipDraggable', function () {
     return {
@@ -25,12 +30,13 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
           var handle = $element[0];
           var draggingClassName = 'dragging';
           var droppingClassName = 'dropping';
-          var droppingBeforeClassName = 'dropping--before';
+          var droppingBeforeClassName = 'dropping-before';
-          var droppingAfterClassName = 'dropping--after';
+          var droppingAfterClassName = 'dropping-after';
           var dragging = false;
           var preventDrag = false;
           var dropPosition;
           var dropTimeout;
+          var counter = 0;
 
           var move = function (from, to) {
             this.splice(to, 0, this.splice(from, 1)[0]);
@@ -57,18 +63,22 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
             } else {
               dragging = true;
 
+              globalDraggingChipsWrapId = angular.element($element[0].closest('md-chips-wrap')).attr('id');
+
               $element.addClass(draggingClassName);
 
               var dataTransfer = event.dataTransfer || event.originalEvent.dataTransfer;
 
               dataTransfer.effectAllowed = 'copyMove';
               dataTransfer.dropEffect = 'move';
+
               dataTransfer.setData('text/plain', $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip));
             }
           });
 
           $element.on('dragend', function () {
             dragging = false;
+            globalDraggingChipsWrapId = null;
 
             $element.removeClass(draggingClassName);
           });
@@ -78,8 +88,14 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
               return;
             }
 
+            var targetChipsWrapId = angular.element($element[0].closest('md-chips-wrap')).attr('id');
+
             event.preventDefault();
-            
+
+            if (globalDraggingChipsWrapId !== targetChipsWrapId) {
+                return;
+            }
+
             var bounds = $element[0].getBoundingClientRect();
 
             var props = {
@@ -97,20 +113,28 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
 
             $element.addClass(droppingClassName);
 
+            $element.removeClass(droppingAfterClassName);
+            $element.removeClass(droppingBeforeClassName);
+
             if (horizontalOffset >= horizontalMidPoint || verticalOffset >= verticalMidPoint) {
                 dropPosition = 'after';
-                $element.removeClass(droppingBeforeClassName);
                 $element.addClass(droppingAfterClassName);
             } else {
                 dropPosition = 'before';
-                $element.removeClass(droppingAfterClassName);
                 $element.addClass(droppingBeforeClassName);
             }
 
           };
 
           var dropHandler = function (event) {
+            counter = 0;
             event.preventDefault();
+
+            var targetChipsWrapId = angular.element($element[0].closest('md-chips-wrap')).attr('id');
+            if (globalDraggingChipsWrapId !== targetChipsWrapId) {
+                return;
+            }
+
             var droppedItemIndex = parseInt((event.dataTransfer || event.originalEvent.dataTransfer).getData('text/plain'), 10);
             var currentIndex = $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip);
             var newIndex = null;
@@ -146,14 +170,15 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
               });
 
               $element.removeClass(droppingClassName);
-              $element.removeClass(droppingBeforeClassName);
               $element.removeClass(droppingAfterClassName);
+              $element.removeClass(droppingBeforeClassName);
 
               $element.off('drop', dropHandler);
             }, 1000 / 16);
           };
 
           $element.on('dragenter', function () {
+              counter++;
             if (dragging) {
               return;
             }
@@ -166,9 +191,13 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
           });
 
           $element.on('dragleave', function () {
-            $element.removeClass(droppingClassName);
+              counter--;
-            $element.removeClass(droppingBeforeClassName);
+            if (counter <=0) {
-            $element.removeClass(droppingAfterClassName);
+                counter = 0;
+                $element.removeClass(droppingClassName);
+                $element.removeClass(droppingAfterClassName);
+                $element.removeClass(droppingBeforeClassName);
+            }
           });
 
         }],

ui/src/app/components/md-chip-draggable.scss

@@ -0,0 +1,55 @@
+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+md-chip {
+  &.dropping {
+    //border: dashed 2px;
+    //opacity: .5;
+
+    //.md-chip-content {
+    //  margin: -2px;
+    //}
+  }
+
+  &.dropping-before {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 50%;
+      bottom: 0;
+      left: 0;
+      content: "";
+      background-color: #fff;
+      border: dashed 2px;
+      border-radius: 16px;
+      opacity: .7;
+    }
+  }
+
+  &.dropping-after {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 50%;
+      content: "";
+      background-color: #fff;
+      border: dashed 2px;
+      border-radius: 16px;
+      opacity: .7;
+    }
+  }
+}