Feature batch actions: copy, past and delete

app/angular/conceptual/conceptual.js

@@ -157,6 +157,7 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 
 	ctrl.onSelectElement = (cellView) => {
 		if (cellView != null) {
+			configs.elementSelector.cancel();
 			$timeout(() => {
 				const elementType = cellView.model.isLink() ? "Link" : cellView.model.attributes.supertype;
 				ctrl.selectedElement = {
@@ -352,7 +353,7 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 			} else {
 				configs.editorScroller.startPanning(evt);
 			}
-			configs.editorActions.setCopyContext(evt);
+			configs.elementSelector.setCopyContext(evt);
 		});
 
 		paper.on('link:options', (cellView) => {
@@ -402,9 +403,9 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 		configs.keyboardController.registerHandler(types.ZOOM_OUT, () => ctrl.zoomOut());
 		configs.keyboardController.registerHandler(types.ZOOM_NONE, () => ctrl.zoomNone());
 		configs.keyboardController.registerHandler(types.ESC, () => ctrl.unselectAll());
-		configs.keyboardController.registerHandler(types.COPY, () => configs.editorActions.copyElement(ctrl.selectedElement.element));
-		configs.keyboardController.registerHandler(types.PASTE, () => configs.editorActions.pasteElement());
-		configs.keyboardController.registerHandler(types.DELETE, () => configs.selectedElementActions?.removeElement() );
+		configs.keyboardController.registerHandler(types.COPY, () => configs.elementSelector.copyAll());
+		configs.keyboardController.registerHandler(types.PASTE, () => configs.elementSelector.pasteAll());
+		configs.keyboardController.registerHandler(types.DELETE, () => configs.elementSelector.deleteAll() );
 	}
 
 	const registerGraphEvents = (graph) => {

app/angular/conceptual/sidebarControl.html

@@ -13,7 +13,7 @@
 			</div>
 		</div><!-- End .form-group -->
 
-		<div class="form-group" ng-if="($ctrl.configuration.entity)">
+		<div class="form-group" ng-if="($ctrl.configuration.entity && $ctrl.visible)">
 			<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"
@@ -35,7 +35,7 @@
 			</div>
 		</div><!-- End .form-group -->
 
-		<div class="form-group" ng-if="($ctrl.configuration.link)">
+		<div class="form-group" ng-if="($ctrl.configuration.link && $ctrl.visible)">
 			<div class="form-group clearfix">
 				<label for="">{{ 'Cardinality' | translate }}</label>
 				<dropdown on-select="$ctrl.updateCardinality(selected)"
@@ -60,7 +60,7 @@
 			</div><!-- End .form-group -->
 		</div><!-- End .form-group -->
 
-		<div class="form-group" ng-if="($ctrl.configuration.extension)">
+		<div class="form-group" ng-if="($ctrl.configuration.extension && $ctrl.visible)">
 			<div class="form-group clearfix">
 				<label for="">{{ 'Edit' | translate }}</label>
 				<dropdown on-select="$ctrl.updateName(selected.type)"
@@ -70,7 +70,7 @@
 			</div>
 		</div><!-- End .form-group -->
 
-		<div class="form-group" ng-if="($ctrl.configuration.attribute)">
+		<div class="form-group" ng-if="($ctrl.configuration.attribute && $ctrl.visible)">
 			<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"
@@ -95,13 +95,13 @@
 			</div>
 		</div><!-- End .form-group -->
 
-		<div class="form-group" ng-if="($ctrl.configuration.key)">
+		<div class="form-group" ng-if="($ctrl.configuration.key && $ctrl.visible)">
 			<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)" autofocus/>
 		</div><!-- End .form-group -->
 
-		<div class="form-group" ng-if="($ctrl.configuration.relationship)">
+		<div class="form-group" ng-if="($ctrl.configuration.relationship && $ctrl.visible)">
 			<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"

app/angular/editor/elementSelector.js

@@ -21,12 +21,21 @@ joint.ui.ElementSelector = Backbone.View.extend({
             ...a.paper.model,
             ...this.options,
             graph: a.paper.model,
+			copyContext: {
+				clones: [],
+				event: null
+			}
 		};
 
 		this.start = this.start.bind(this);
 		this.stop = this.stop.bind(this);
 		this.adjust = this.adjust.bind(this);
 		this.pointerup = this.pointerup.bind(this);
+		this.deleteAll = this.deleteAll.bind(this);
+		this.copyAll = this.copyAll.bind(this);
+		this.pasteAll = this.pasteAll.bind(this);
+		this.cancel = this.cancel.bind(this);
+		this.getSelectedElements = this.getSelectedElements.bind(this);
 
 		$(document.body).on("mousemove.selectionView touchmove.selectionView", this.adjust);
 		$(document).on("mouseup.selectionView touchend.selectionView", this.pointerup);
@@ -53,6 +62,84 @@ joint.ui.ElementSelector = Backbone.View.extend({
 
 		this.trigger("selection-box:pointerdown", normalizedEvent);
 	},
+	deleteAll: function() {
+		if(this.model.length > 0) {
+			this.options.graph.trigger("batch:start");
+			this.model.forEach(model => model.remove());
+			this.options.graph.trigger("batch:stop");
+			this.cancel();
+		}
+	},
+	copyAll: function() {
+		if(this.model.length > 0) {
+			this.options.copyContext.clones = this.options.graph.cloneSubgraph(this.model.models, {
+				deep: true,
+			});
+		}
+	},
+	setCopyContext: function (event) {
+		if(event.type === "mousedown") {
+			const normalizedEvent = joint.util.normalizeEvent(event);
+			let localPoint = this.options.paper.clientToLocalPoint({ x: normalizedEvent.clientX, y: normalizedEvent.clientY });
+			this.options.copyContext.event = {
+				"x": localPoint.x,
+				"y": localPoint.y
+			}
+		}
+	},
+	pasteAll: function() {
+		const options = Object.assign({}, this.defaults, options);
+		const graph = this.options.graph;
+		const pastePoint = this.options.copyContext.event;
+		const copiedCells = this.options.copyContext.clones;
+		const origin = this.findbBox(Object.values(copiedCells));
+		if (origin) {
+			const originX = origin.x == 0 ? pastePoint.x : (pastePoint.x - origin.x);
+			const originY = origin.y == 0 ? pastePoint.y : (pastePoint.y - origin.y);
+			const translation = {
+				dx: originX,
+				dy: originY
+			};
+			options.translate = translation;
+			let zIndex = graph.maxZIndex();
+			const context = this;
+			const modifiedCells = Object.values(copiedCells).map(cell => {
+				return context.moveCell(cell, options, zIndex += 1);
+			});
+			graph.startBatch("paste");
+			graph.addCells(modifiedCells);
+			graph.stopBatch("paste");
+			this.options.copyContext = {
+				clones: [],
+				event: null
+			}
+		}
+	},
+	findbBox: function(cells, opt){
+		return joint.util.toArray(cells).reduce(function(memo, cell) {
+			if (cell.isLink()) return memo;
+			let rect = cell.getBBox(opt);
+			const angle = cell.angle();
+			if (angle) rect = rect.bbox(angle);
+			if (memo) {
+				return memo.union(rect);
+			} else {
+				return rect;
+			}
+		}, null);
+	},
+	moveCell: function(cell, options, zIndex) {
+		cell.set("z", zIndex);
+		if (cell.isLink() && options.link) {
+			cell.set(options.link);
+		}
+		if (options.translate) {
+			const { dx, dy } = options.translate;
+			cell.translate(Number.isFinite(dx) ? dx : 0, Number.isFinite(dy) ? dy : 0);
+		}
+		cell.collection = null;
+		return cell;
+	},
     start: function(event) {
 		const normalizedEvent = joint.util.normalizeEvent(event);
 		this.cancel();
@@ -275,5 +362,8 @@ joint.ui.ElementSelector = Backbone.View.extend({
         var d = Array.prototype.slice.call(arguments, 2);
         d.unshift("action:" + a + ":" + b);
 		this.trigger.apply(this, d);
-    }
+    },
+	getSelectedElements: function() {
+		return this.model.models;
+	}
 });

app/angular/logic/logic.html

@@ -47,7 +47,7 @@ <h2 class="h4 pull-left">{{ 'Logical model of:' | translate }} {{$ctrl.model.nam
 					<li class="divider"><a data-ng-click="$ctrl.print()" title="{{ 'Print (CTRL P)' | translate }}"><i class="fa fa-print"></i></a></li>
 				</ul>
 				<aside class="feedback">
-					<div class="alert" role="alert" data-ng-class="{'hide': !$ctrl.feedback.showing, 'alert-danger': $ctrl.feedback.type=='error', 'alert-success': $ctrl.feedback.type=='success'}">
+					<div class="alert" role="alert" data-ng-class="{'hide': !$ctrl.feedback.showing, 'alert-danger': $ctrl.feedback.type=='error', 'alert-success': $ctrl.feedback.type=='success', 'alert-warning': $ctrl.feedback.type=='warning'}">
 						<p>{{ $ctrl.feedback.message }}</p>
 					</div>
 				</aside>

app/angular/logic/logic.js

@@ -154,6 +154,12 @@ const controller = function (
 		}
 	});
 
+	$rootScope.$on("model:warning-copy", function () {
+		$timeout(() => {
+			ctrl.showFeedback("Copy is not allowed on this module when element has references.", true, "warning");
+		});
+	});
+
 	ctrl.updateCardA = function (card) {
 		LogicService.editCardinalityA(card);
 	}

app/angular/logic/sidebarControl.html

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

app/angular/service/logicService.js

@@ -9,7 +9,6 @@ import uml from "../../joint/table";
 joint.shapes.erd = erd;
 joint.shapes.uml = uml;
 import "jointjs/dist/joint.min.css";
-
 import "../editor/editorManager"
 import "../editor/editorScroller"
 import "../editor/editorActions"
@@ -185,7 +184,7 @@ const logicService = ($rootScope, ModelAPI, LogicFactory, LogicConversorService)
 				ls.editorScroller.startPanning(evt);
 			}
 
-			ls.editorActions.setCopyContext(evt);
+			ls.elementSelector.setCopyContext(evt);
 		});
 
 		ls.getConnectionType = link => {
@@ -352,6 +351,7 @@ const logicService = ($rootScope, ModelAPI, LogicFactory, LogicConversorService)
 		var name = "";
 		if (ls.selectedElement.model != null) ls.selectedElement.unhighlight();
 		if (cellView.model.attributes.name != null) {
+			ls.elementSelector.cancel();
 			ls.selectedElement = cellView;
 			name = ls.selectedElement.model.attributes.name;
 			ls.selectedElement.highlight();
@@ -473,6 +473,18 @@ const logicService = ($rootScope, ModelAPI, LogicFactory, LogicConversorService)
 		ls.editorScroller.zoom();
 	}
 
+	ls.copySelectedElements = function () {
+		const elements = ls.elementSelector.getSelectedElements();
+		const hasConnections = elements.some(element => {
+			return element.attributes.objects.some(attr => attr.FK);
+		});
+		if(hasConnections) {
+			$rootScope.$broadcast('model:warning-copy');
+		} else {
+			ls.elementSelector.copyAll();
+		}
+	}
+
 	ls.registerShortcuts = () => {
 		ls.keyboardController.registerHandler(types.UNDO, () => ls.undo());
 		ls.keyboardController.registerHandler(types.REDO, () => ls.redo());
@@ -482,11 +494,11 @@ const logicService = ($rootScope, ModelAPI, LogicFactory, LogicConversorService)
 		ls.keyboardController.registerHandler(types.ESC, () => ls.clearSelectedElement());
 		ls.keyboardController.registerHandler(types.SAVE, () => {
 			ls.updateModel();
-			$rootScope.$broadcast('model:saved')
+			$rootScope.$broadcast('model:saved');
 		});
-		ls.keyboardController.registerHandler(types.COPY, () => ls.editorActions.copyElement(ls.selectedElement));
-		ls.keyboardController.registerHandler(types.PASTE, () => ls.editorActions.pasteElement());
-		ls.keyboardController.registerHandler(types.DELETE, () => ls.selectedActions?.removeElement() );
+		ls.keyboardController.registerHandler(types.COPY, () => ls.copySelectedElements());
+		ls.keyboardController.registerHandler(types.PASTE, () => ls.elementSelector.pasteAll());
+		ls.keyboardController.registerHandler(types.DELETE, () => ls.elementSelector.deleteAll());
 	}
 
 	ls.getTablesMap = function () {

app/i18n/languages/en.js

@@ -157,5 +157,6 @@ export default {
 	'Delete account model error': 'It was not possible to delete your account because you have models. Please remove all your models before deleting your account.',
 	'Forbidden access': 'Forbidden access',
 	'Looks like this model does not exist or you don\'t have access to it.': 'Looks like this model does not exist or you don\'t have access to it.',
-	'Back to models list': 'Back to models list'
+	'Back to models list': 'Back to models list',
+	'Copy is not allowed on this module when element has references.': 'Copy is not allowed on this module when element has references.'
 };

app/i18n/languages/pt_BR.js

@@ -157,5 +157,6 @@ export default {
 	'Delete account model error': 'Não foi possível deletar sua conta pois você possui modelos. Remova-os antes de prosseguir.',
 	'Forbidden access': 'Acesso proibido',
 	'Looks like this model does not exist or you don\'t have access to it.': 'Parece que este modelo não existe ou você não tem acesso a ele.',
-	'Back to models list': 'Voltar à lista de modelos'
+	'Back to models list': 'Voltar à lista de modelos',
+	'Copy is not allowed on this module when element has references.': 'Copiar não é permitido nesse módulo quando elementos já estiverem conectados.'
 };