Auto focus on element select + open sidebar on double element click (#462)

Author: miltonbsn

app/angular/conceptual/conceptual.js

@@ -379,6 +379,10 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 			elementActions.render();
 		});
 
+		paper.on('element:pointerdblclick', () => {
+			$rootScope.$broadcast("command:openmenu");
+		});
+
 		configs.paper.on('link:mouseenter', (linkView) => {
 			const conectionType = ctrl.shapeLinker.getConnectionTypeFromLink(linkView.model);
 			const toolsView = ctrl.toolsViewService.getToolsView(conectionType);

app/angular/conceptual/sidebarControl.html

@@ -17,7 +17,7 @@
 			<div class="form-group">
 				<label for="entry-name">{{ 'Name' | translate }}</label>
 				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value"
-					ng-change="$ctrl.updateName($ctrl.selectedElement.value)" />
+					ng-change="$ctrl.updateName($ctrl.selectedElement.value)" autofocus/>
 			</div><!-- End .form-group -->
 
 			<div class="form-group clearfix">
@@ -74,7 +74,7 @@
 			<div class="form-group">
 				<label for="entry-name">{{ 'Name' | translate }}</label>
 				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value.name"
-					ng-change="$ctrl.updateAttributeName($ctrl.selectedElement.value.name)" />
+					ng-change="$ctrl.updateAttributeName($ctrl.selectedElement.value.name)" autofocus/>
 			</div>
 			<div class="form-group clearfix">
 				<label for="">{{ 'Cardinality' | translate }}</label>
@@ -98,14 +98,14 @@
 		<div class="form-group" ng-if="($ctrl.configuration.key)">
 			<label for="entry-name">{{ 'Name' | translate }}</label>
 			<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value"
-				ng-change="$ctrl.updateName($ctrl.selectedElement.value)" />
+				ng-change="$ctrl.updateName($ctrl.selectedElement.value)" autofocus/>
 		</div><!-- End .form-group -->
 
 		<div class="form-group" ng-if="($ctrl.configuration.relationship)">
 			<div class="form-group">
 				<label for="entry-name">{{ 'Name' | translate }}</label>
 				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value"
-					ng-change="$ctrl.updateName($ctrl.selectedElement.value)" />
+					ng-change="$ctrl.updateName($ctrl.selectedElement.value)" autofocus/>
 			</div><!-- End .form-group -->
 
 			<div class="form-group">

app/angular/conceptual/sidebarControl.js

@@ -52,11 +52,17 @@ const configurator = () => {
 }
 
 
-const controller = function () {
+const controller = function($rootScope, $timeout) {
 	const $ctrl = this;
 	$ctrl.visible = true;
 	$ctrl.selectedElement = {}
 
+	$rootScope.$on('command:openmenu', () => {
+		$timeout(() => {
+			$ctrl.visible = true;
+		});
+	});
+
 	$ctrl.$onInit = () => {
 		$ctrl.configuration = configurator().emptyState();
 	}

app/angular/index.js

@@ -15,6 +15,7 @@ import "../sass/app.scss";
 import "oclazyload";
 
 import sidebarControlConceptual from "./conceptual/sidebarControl";
+import sidebarControlLogic from "./logic/sidebarControl";
 import authService from "./service/authService";
 import modelService from "./service/modelAPI";
 import dropdownComponent from "./components/dropdown";
@@ -44,6 +45,7 @@ const app = angular.module("app", [
 	logicFactory,
 	sidebarControlConceptual,
 	dropdownIconComponent,
+	sidebarControlLogic
 ]);
 
 app.config([
@@ -226,5 +228,17 @@ app.config(function () {
 	};
 });
 
+
+app.directive('autofocus', function($timeout) {
+    return {
+        restrict: 'A',
+        link: function(_scope, _element) {
+            $timeout(function(){
+                _element[0].focus();
+            }, 100);
+        }
+    };
+});
+
 app.$inject = ["$scope", "$http", "$cookies", "$uibModalInstance"];
 

app/angular/logic/sidebarControl.html

@@ -13,7 +13,7 @@
 		</div><!-- End .form-group -->
 	</div>
 
-	<div class="properties-content" ng-show="$ctrl.selectedElement != null && $ctrl.selectedType === 'uml.Class'">
+	<div class="properties-content" ng-if="$ctrl.selectedElement != null && $ctrl.selectedType === 'uml.Class'">
 		<section class="sidebar-panel">
 			<header class="panel-header" ng-click="$ctrl.toggleSection('tableProperties')">
 				<h3>{{ 'Table properties' | translate }}</h3>
@@ -29,6 +29,7 @@ <h3>{{ 'Table properties' | translate }}</h3>
 						class="form-control"
 						ng-model="$ctrl.selectedName"
 						ng-change="$ctrl.changeName()"
+						autofocus
 					/>
 				</div><!-- End .form-group -->
 			</div>

app/angular/logic/sidebarControl.js

@@ -2,9 +2,7 @@ import angular from "angular";
 import template from "./sidebarControl.html";
 import Column from "../service/Column";
 
-const app = angular.module("app.sidebarControl", []);
-
-const Controller = function (LogicService) {
+const Controller = function (LogicService, $rootScope, $timeout) {
 	const $ctrl = this;
 
 	$ctrl.visible = true;
@@ -16,6 +14,12 @@ const Controller = function (LogicService) {
 		views: false,
 	}
 
+	$rootScope.$on('command:openmenu', () => {
+		$timeout(() => {
+			$ctrl.visible = true;
+		});
+	});
+
 	$ctrl.toggleSection = (section) => {
 		$ctrl.sections[section] = !$ctrl.sections[section];
 	}
@@ -148,7 +152,8 @@ const Controller = function (LogicService) {
 	}
 };
 
-export default app.component("sidebarControlLogical", {
+export default angular.module("app.sidebarControl", [])
+	.component("sidebarControlLogical", {
 	template: template,
 	bindings: {
 		selected: "<",

app/angular/service/logicService.js

@@ -82,6 +82,10 @@ const logicService = ($rootScope, ModelAPI, LogicFactory, LogicConversorService)
 
 		});
 
+		ls.paper.on('element:pointerdblclick', () => {
+			$rootScope.$broadcast("command:openmenu");
+		});
+
 		ls.applyResizePage();
 		ls.applyDragAndDrop();
 		ls.applyComponentSelection();

app/angular/view/view.html

@@ -9,7 +9,7 @@
 	</button>
 
 	<div class="views" ng-show="$ctrl.formVisible || $ctrl.isEdit">
-		
+
 		<div class="form-group">
 			<label for="view-name">{{ 'Name' | translate }}</label>
 			<input
@@ -18,6 +18,7 @@
 				class="form-control"
 				ng-model="$ctrl.view.name"
 				ng-change="$ctrl.changeName()"
+				autofocus
 			/>
 		</div>