fix(core): overlapping poper

GH-0
sourcefuse · Feb 22, 2024 · 246b91d · 246b91d
1 parent 6fa115f
commit 246b91d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/projects/workflows-creator/src/lib/builder/group/group.component.html b/projects/workflows-creator/src/lib/builder/group/group.component.html
@@ -11,7 +11,7 @@
         [popperHideOnScroll]="true"
         [popperTrigger]="'click'"
         [popperPlacement]="'bottom'"
-        (click)="openPopup(group.nodeType)"
+        (click)="openPopup(group.nodeType, nodePopup)"
       >
         <span *ngIf="group.nodeType === types.EVENT">
           {{ localizedStringKeys.WhenThisHappens | localization }}
@@ -53,7 +53,7 @@
       [isFirst]="i === 0"
       [inputTemplate]="inputs"
       [popupTemplate]="nodePopup"
-      (add)="openPopup(group.nodeType)"
+      (add)="openPopup(group.nodeType, nodePopup)"
       (remove)="onNodeRemove(i)"
     ></workflow-node>
   </span>

diff --git a/projects/workflows-creator/src/lib/builder/group/group.component.ts b/projects/workflows-creator/src/lib/builder/group/group.component.ts
@@ -292,8 +292,15 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
    * the node list to the trigger events if there is only one event group and no children, otherwise
    * set the node list to the events
    * @param {NodeTypes} type - NodeTypes
+   * @param {NgxPopperjsContentComponent} popper - NgxPopperjsContentComponent - this is the popper
    */
-  openPopup(type: NodeTypes) {
+  openPopup(type: NodeTypes, popper: NgxPopperjsContentComponent) {
+    this.prevPopperRef?.hide();
+    this.groupService.previousPopper?.hide();
+    this.groupService.previousPopper?.popperInstance.forceUpdate();
+    this.prevPopperRef = popper;
+    this.groupService.previousPopper = popper;
+
     if (type === NodeTypes.ACTION) {
       this.nodeList = this.actions;
     } else if (type === NodeTypes.EVENT) {

diff --git a/projects/workflows-element/dist/workflows-element.js b/projects/workflows-element/dist/workflows-element.js
@@ -3918,7 +3918,7 @@ function GroupComponent_span_4_span_2_Template(rf, ctx) { if (rf & 1) {
 function GroupComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     const _r25 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵgetCurrentView"]();
     _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵelementStart"](0, "span", 17);
-    _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵlistener"]("click", function GroupComponent_span_4_Template_span_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵrestoreView"](_r25); const ctx_r24 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵnextContext"](); return ctx_r24.openPopup(ctx_r24.group.nodeType); });
+    _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵlistener"]("click", function GroupComponent_span_4_Template_span_click_0_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵrestoreView"](_r25); const ctx_r24 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵnextContext"](); const _r4 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵreference"](8); return ctx_r24.openPopup(ctx_r24.group.nodeType, _r4); });
     _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵtemplate"](1, GroupComponent_span_4_span_1_Template, 3, 3, "span", 3);
     _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵtemplate"](2, GroupComponent_span_4_span_2_Template, 3, 3, "span", 3);
     _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵelementEnd"]();
@@ -3964,7 +3964,7 @@ const _c7 = function (a0) { return { "last-node": a0 }; };
 function GroupComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     const _r35 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵgetCurrentView"]();
     _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵelementStart"](0, "span")(1, "workflow-node", 25);
-    _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵlistener"]("add", function GroupComponent_span_6_Template_workflow_node_add_1_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵrestoreView"](_r35); const ctx_r34 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵnextContext"](); return ctx_r34.openPopup(ctx_r34.group.nodeType); })("remove", function GroupComponent_span_6_Template_workflow_node_remove_1_listener() { const restoredCtx = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵrestoreView"](_r35); const i_r33 = restoredCtx.index; const ctx_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵnextContext"](); return ctx_r36.onNodeRemove(i_r33); });
+    _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵlistener"]("add", function GroupComponent_span_6_Template_workflow_node_add_1_listener() { _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵrestoreView"](_r35); const ctx_r34 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵnextContext"](); const _r4 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵreference"](8); return ctx_r34.openPopup(ctx_r34.group.nodeType, _r4); })("remove", function GroupComponent_span_6_Template_workflow_node_remove_1_listener() { const restoredCtx = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵrestoreView"](_r35); const i_r33 = restoredCtx.index; const ctx_r36 = _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵnextContext"](); return ctx_r36.onNodeRemove(i_r33); });
     _angular_core__WEBPACK_IMPORTED_MODULE_11__["ɵɵelementEnd"]()();
 } if (rf & 2) {
     const node_r32 = ctx.$implicit;
@@ -4394,8 +4394,15 @@ class GroupComponent {
      * the node list to the trigger events if there is only one event group and no children, otherwise
      * set the node list to the events
      * @param {NodeTypes} type - NodeTypes
+     * @param {NgxPopperjsContentComponent} popper - NgxPopperjsContentComponent - this is the popper
      */
-    openPopup(type) {
+    openPopup(type, popper) {
+        var _a, _b, _c;
+        (_a = this.prevPopperRef) === null || _a === void 0 ? void 0 : _a.hide();
+        (_b = this.groupService.previousPopper) === null || _b === void 0 ? void 0 : _b.hide();
+        (_c = this.groupService.previousPopper) === null || _c === void 0 ? void 0 : _c.popperInstance.forceUpdate();
+        this.prevPopperRef = popper;
+        this.groupService.previousPopper = popper;
         if (type === _enum__WEBPACK_IMPORTED_MODULE_2__.NodeTypes.ACTION) {
             this.nodeList = this.actions;
         }

diff --git a/projects/workflows-element/package.json b/projects/workflows-element/package.json
@@ -17,5 +17,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "hash": "1dd19f4dbb1753c89acdf0a10e45f998b6dc6852e20343774481427a5f83071a"
+  "hash": "f6cee17ddedc9cac6947644eee9e1900606d5c00787dcb2fd8fc03cd61265550"
 }