feat(editor): support duplicating components in editor

bonitasoft · Apr 26, 2024 · 3549268 · 3549268
1 parent 7f14544
commit 3549268
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 3 deletions.
diff --git a/frontend/app/js/editor/editor.controller.js b/frontend/app/js/editor/editor.controller.js
@@ -57,6 +57,18 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
     });
   });
 
+  keyBindingService.bind(['d', 'ctrl+d'], function(e) {
+    e.preventDefault();
+
+    if (!$scope.currentComponent) {
+      return;
+    }
+
+    $scope.$apply(function() {
+      $scope.duplicateCurrentComponent();
+    });
+  });
+
   keyBindingService.bind('right', function() {
     moveSelection(+1);
   });
@@ -77,7 +89,7 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
   }
 
   $scope.$on('$destroy', function() {
-    keyBindingService.unbind(['del', 'right', 'left']);
+    keyBindingService.unbind(['del', 'right', 'd', 'ctrl+d', 'left']);
   });
 
   $scope.componentClasses = componentUtils.getResolutionClasses;
@@ -266,6 +278,24 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
     $scope.currentComponent = null;
   };
 
+  /**
+   * Duplicates the currently selected component, inserts it after the currently
+   * selected one and selects it.
+   */
+  $scope.duplicateCurrentComponent = function() {
+    var component = $scope.currentComponent;
+    var currentRow = component.$$parentContainerRow.row;
+    var componentIndex = currentRow.indexOf(component);
+    var newComponent = whiteboardComponentWrapper.wrapWidget(
+      component.$$widget,
+      angular.copy(component),
+      component.$$parentContainerRow
+    );
+    delete newComponent.reference;
+    arrays.insertAtPosition(newComponent, componentIndex, currentRow);
+    $scope.selectComponent(newComponent);
+  };
+
   /**
    *
    * @returns {boolean}
@@ -437,6 +467,7 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
     componentClasses: $scope.componentClasses,
     removeCurrentRow: $scope.removeCurrentRow,
     removeCurrentComponent: $scope.removeCurrentComponent,
+    duplicateCurrentComponent: $scope.duplicateCurrentComponent,
     switchCurrentComponent: $scope.switchCurrentComponent,
     rowSize: $scope.rowSize,
     isCurrentRow: $scope.isCurrentRow,

diff --git a/frontend/app/js/editor/whiteboard/component-mover.directive.js b/frontend/app/js/editor/whiteboard/component-mover.directive.js
@@ -22,6 +22,7 @@ angular.module('bonitasoft.designer.editor.whiteboard').directive('componentMove
     scope: {
       component: '=',
       onDelete: '&',
+      onDuplicate: '&',
       onSwitch: '&'
     },
     templateUrl: 'js/editor/whiteboard/component-mover.html',

diff --git a/frontend/app/js/editor/whiteboard/component-mover.html b/frontend/app/js/editor/whiteboard/component-mover.html
@@ -3,5 +3,6 @@
     <button ng-if="moveLeftVisible()" ng-click="moveLeft()" class="fa fa-arrow-circle-left btn-caption move-left"  title="Move the component to the left"></button>
     <button ng-if="moveRightVisible()" ng-click="moveRight()" class="fa fa-arrow-circle-right btn-caption move-right" title="Move the component to the right"></button>
     <button ng-if="component.$$widget.type === 'widget'" ng-click="onSwitch()" class="fa fa-exchange btn-caption" title="Switch widget"></button>
+    <button ng-click="onDuplicate()" class="fa fa-files-o btn-caption" title="Duplicate"></button>
     <button ng-click="onDelete()" class="fa fa-times-circle btn-caption" title="Delete the component"></button>
 </section>
diff --git a/frontend/app/js/editor/whiteboard/component.html b/frontend/app/js/editor/whiteboard/component.html
@@ -1,5 +1,5 @@
 <div class="widget-wrapper">
-    <component-mover class="component-mover" component="component" on-delete="editor.removeCurrentComponent()" on-switch="editor.switchCurrentComponent()" ng-if="editor.isCurrentComponent(component)"></component-mover>
+    <component-mover class="component-mover" component="component" on-delete="editor.removeCurrentComponent()" on-duplicate="editor.duplicateCurrentComponent()" on-switch="editor.switchCurrentComponent()" ng-if="editor.isCurrentComponent(component)"></component-mover>
     <div class="widget-content"></div>
     <drop-zone editor="editor" row="row" container="container" component-index="componentIndex"></drop-zone>
 </div>
diff --git a/frontend/test/unit/editor/editor.controller.spec.js b/frontend/test/unit/editor/editor.controller.spec.js
@@ -1,4 +1,4 @@
-import aWidget from  '../utils/builders/WidgetElementBuilder';
+import aWidget from '../utils/builders/WidgetElementBuilder';
 
 describe('EditorCtrl', function() {
   var $scope, pageRepo, $q, $state, $window, componentUtils, whiteboardService, $timeout, widgetRepo;
@@ -335,6 +335,36 @@ describe('EditorCtrl', function() {
     expect(whiteboardService.triggerRowRemoved).not.toHaveBeenCalled();
   });
 
+  it('should be able to duplicate the current component', function() {
+
+    var container = {
+      rows: [
+        []
+      ]
+    };
+
+    $scope.currentContainerRow = {
+      container: container,
+      row: container.rows[0]
+    };
+
+    var component = aWidget().withParentContainerRow($scope.currentContainerRow);
+
+    var dragData = {
+      create: function() {
+        return component;
+      }
+    };
+
+    $scope.addComponent(dragData, 0);
+    expect(container.rows[0].length).toBe(1);
+
+    $scope.duplicateCurrentComponent();
+
+    expect(container.rows[0].length).toBe(2);
+    expect($scope.currentComponent).not.toBe(component);
+  });
+
   it('should remove the current component and trigger "removed" while removing it', function() {
 
     var container = {