From edfbcd1b1aa9800fcd6565938c9c9de3320ebe7b Mon Sep 17 00:00:00 2001 From: Dario De Pascalis Date: Tue, 31 Oct 2023 10:41:40 +0100 Subject: [PATCH 1/2] fixed issue zoom end dragging intent; fixed issue in the action change detail panel when a new action is selected --- package-lock.json | 13 ++++++++++--- .../cds-action-reply.component.ts | 15 ++++++++++----- .../cds-action-reply-frame.component.html | 1 + .../cds-action-reply-frame.component.ts | 6 +++++- .../cds-action-reply-redirect.component.ts | 7 ++++++- .../cds-action-reply-text.component.ts | 2 +- .../cds-canvas/cds-canvas.component.ts | 4 ++-- src/assets/js/tiledesk-stage.js | 4 ++++ 8 files changed, 39 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6c222115..88cac84f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,13 @@ { "name": "@tiledesk/cds", "version": "0.0.2", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "cds", - "version": "0.0.0", + "name": "@tiledesk/cds", + "version": "0.0.2", + "license": "MIT", "dependencies": { "@angular/animations": "^14.2.0", "@angular/cdk": "^14.2.5", @@ -24,6 +25,7 @@ "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "bootstrap": "^5.3.2", + "bootstrap-notify": "^3.1.3", "firebase": "^7.24.0", "jquery": "^3.7.1", "material-icons": "^1.13.11", @@ -4840,6 +4842,11 @@ "@popperjs/core": "^2.11.8" } }, + "node_modules/bootstrap-notify": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/bootstrap-notify/-/bootstrap-notify-3.1.3.tgz", + "integrity": "sha512-cnTactFVG8aHri03+RmuZ5sl9VcA+jTTM/mTdEOQN+R1V9u4YBu8Ca+Pf6NGeVfieGv0Z6CxK8FzlWg59omzyg==" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts index 6b0b297c..da42b960 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts @@ -80,15 +80,20 @@ export class CdsActionReplyComponent implements OnInit { } catch (error) { this.logger.log("error ", error); } - this.initialize(); + // this.initialize(); } - // ngOnChanges(changes: SimpleChanges): void { - // console.log('ActionReplyComponent ngOnChanges:: ', this.action); - // if(this.action && this.intentSelected)this.initialize(); - // } + /** + * + * @param changes + * IMPORTANT! serve per aggiornare il dettaglio della action nel pannello + */ + ngOnChanges(changes: SimpleChanges): void { + console.log('ActionReplyComponent ngOnChanges:: ', changes); + if(this.action && this.intentSelected) this.initialize(); + } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html index 7c2aafe2..0f2db5cd 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.html @@ -103,6 +103,7 @@ [text]="response.text" [minRow]="1" popoverVerticalAlign="above" + (blur)="onBlur($event)" (changeTextarea)="onChangeTextarea($event)"> diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts index b0a8e3b5..dc479ef2 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.ts @@ -104,10 +104,14 @@ export class CdsActionReplyFrameComponent implements OnInit { onChangeTextarea(text:string) { if(!this.previewMode){ this.response.text = text; - this.changeActionReply.emit(); + // this.changeActionReply.emit(); } } + onBlur(event){ + console.log('[ACTION REPLY TEXT] onBlur', event); + this.changeActionReply.emit(); + } /** */ diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts index da088570..f0dc76e4 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-redirect/cds-action-reply-redirect.component.ts @@ -98,10 +98,15 @@ export class CdsActionReplyRedirectComponent implements OnInit { onChangeTextarea(text:string) { if(!this.previewMode){ this.metadata.src = text; - this.changeActionReply.emit(); + // this.changeActionReply.emit(); } } + onBlur(event){ + console.log('[ACTION REPLY TEXT] onBlur', event); + this.changeActionReply.emit(); + } + /** onButtonToogleChange */ onButtonToogleChange(event){ console.log('onButtonToogleChange::: event', event) diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts index b846d24a..1a58c9af 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-text/cds-action-reply-text.component.ts @@ -215,7 +215,7 @@ export class CdsActionReplyTextComponent implements OnInit { } onBlur(event){ - console.log('[ACTION REPLY TEXT] onBlur', event); + // console.log('[ACTION REPLY TEXT] onBlur', event); this.changeActionReply.emit(); } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts index 4ed6c09a..3b8aa504 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts @@ -249,10 +249,10 @@ export class CdsCanvasComponent implements OnInit { * create connectors */ private refreshIntents() { - setTimeout(() => { + //setTimeout(() => { this.setDragAndListnerEventToElements(); this.connectorService.createConnectors(this.listOfIntents); - }, 0); + //}, 0); } // --------------------------------------------------------- diff --git a/src/assets/js/tiledesk-stage.js b/src/assets/js/tiledesk-stage.js index dac65e73..a8233cb9 100644 --- a/src/assets/js/tiledesk-stage.js +++ b/src/assets/js/tiledesk-stage.js @@ -246,6 +246,10 @@ export class TiledeskStage { // console.log("tcmd:", tcmd); // console.log("transform:", tcmd); + this.scale = 1; + this.tx = newX; + this.ty = newY; + setTimeout(() => { this.drawer.style.removeProperty('transition'); // remove class animation From b299a784e4a80013c8a8a0abed22e24bdc02734e Mon Sep 17 00:00:00 2001 From: Dario De Pascalis Date: Tue, 31 Oct 2023 11:45:06 +0100 Subject: [PATCH 2/2] bug fix create connector --- .../cds-canvas/cds-canvas.component.ts | 12 +-- .../services/connector.service.ts | 76 ++++++++++--------- src/app/chatbot-design-studio/utils.ts | 2 +- 3 files changed, 43 insertions(+), 47 deletions(-) diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts index 3b8aa504..986f0b32 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts @@ -34,8 +34,6 @@ export class CdsCanvasComponent implements OnInit { @ViewChild('drawer_of_items_to_zoom_and_drag', { static: false }) drawerOfItemsToZoomAndDrag: ElementRef; @Output() testItOut = new EventEmitter(); - // @Output() closePanelWidget = new EventEmitter(); - @Input() onHeaderTestItOut: Observable id_faq_kb: string; @@ -117,9 +115,6 @@ export class CdsCanvasComponent implements OnInit { this.stageService.setDrawer(); this.connectorService.initializeConnectors(); this.addEventListener(); - // setTimeout(()=> { - // let newPos = scaleAndcenterStageOnCenterPosition(this.listOfIntents) - // }, 1000) } private async setStartIntent(){ @@ -135,8 +130,6 @@ export class CdsCanvasComponent implements OnInit { if(startElement){ this.stageService.centerStageOnHorizontalPosition(startElement); } - // let startElement = document.getElementById(intentSelected.intent_id); - // } } } @@ -235,12 +228,9 @@ export class CdsCanvasComponent implements OnInit { private initListOfIntents() { this.listOfIntents.forEach(intent => { if (intent.actions) { - intent.actions = intent.actions.filter(obj => obj !== null); //patch if action is null + intent.actions = intent.actions.filter(obj => obj !== null); } }); - // this.updatePanelIntentList = !this.updatePanelIntentList; - /* variabile booleana aggiunta per far scattare l'onchange nei componenti importati dalla dashboard - * ngOnChanges funziona bene solo sugli @import degli elementi primitivi!!! */ this.refreshIntents(); } diff --git a/src/app/chatbot-design-studio/services/connector.service.ts b/src/app/chatbot-design-studio/services/connector.service.ts index 985ecc3f..a5dc490b 100644 --- a/src/app/chatbot-design-studio/services/connector.service.ts +++ b/src/app/chatbot-design-studio/services/connector.service.ts @@ -77,39 +77,13 @@ export class ConnectorService { * */ public createConnectors(intents){ - this.logger.log('[CONNECTOR-SERV] -----> createConnectors::: ', intents); + // this.logger.log('[CONNECTOR-SERV] -----> createConnectors::: ', intents); intents.forEach(intent => { this.createConnectorsOfIntent(intent); }); } - // /** - // * createConnectorFromId - // * @param fromId - // * @param toId - // * @returns - // */ - // public async createConnectorFromId_old(fromId, toId, save=false, undo=false) { - // this.logger.log('[CONNECTOR-SERV] createConnectorFromId fromId ', fromId, ' toId ', toId); - // const connectorID = fromId+'/'+toId; - // // let connector = await isElementOnTheStage(connectorID); // sync - // const isConnector = document.getElementById(connectorID); - // if (isConnector) { - // this.logger.log('[CONNECTOR-SERV] il connettore esiste giĆ ', connectorID); - // // this.deleteConnector(connectorID); - // // return true; - // } - // let isOnTheStageFrom = await isElementOnTheStage(fromId); // sync - // this.logger.log('[CONNECTOR-SERV] isOnTheStageFrom', isOnTheStageFrom); - // let isOnTheStageTo = await isElementOnTheStage(toId); // sync - // this.logger.log('[CONNECTOR-SERV] isOnTheStageFrom', isOnTheStageFrom); - // if(isOnTheStageFrom && isOnTheStageTo){ - // const result = await this.tiledeskConnectors.createConnectorFromId(fromId, toId, save, undo); - // return result; - // } else { - // return false; - // } - // } + /** * createConnectorFromId @@ -127,13 +101,22 @@ export class ConnectorService { this.tiledeskConnectors.updateConnectorsOutOfItent(connectorID); return true; } - let isOnTheStageFrom = await isElementOnTheStage(fromId); // sync - this.logger.log('[CONNECTOR-SERV] isOnTheStageFrom', isOnTheStageFrom); - let isOnTheStageTo = await isElementOnTheStage(toId); // sync - this.logger.log('[CONNECTOR-SERV] isOnTheStageFrom', isOnTheStageFrom); - if(isOnTheStageFrom && isOnTheStageTo){ - const fromEle = document.getElementById(fromId); - const toEle = document.getElementById(toId); + + let fromEle = document.getElementById(fromId); + if(!fromEle) { + fromEle = await isElementOnTheStage(fromId); // sync + this.logger.log('[CONNECTOR-SERV] isOnTheStageFrom', fromEle); + } + + let toEle = document.getElementById(toId); + if(!toEle) { + toEle = await isElementOnTheStage(toId); // sync + this.logger.log('[CONNECTOR-SERV] isOnTheStageFrom', toEle); + } + + if(fromEle && toEle){ + // const fromEle = document.getElementById(fromId); + // const toEle = document.getElementById(toId); const fromPoint = this.tiledeskConnectors.elementLogicCenter(fromEle); const toPoint = this.tiledeskConnectors.elementLogicTopLeft(toEle); this.tiledeskConnectors.createConnector(fromId, toId, fromPoint, toPoint, save, undo); @@ -144,6 +127,29 @@ export class ConnectorService { } + + + + + + + + + + + + + + + + + + + + + + + /** * refreshConnectorsOfIntent * @param intent diff --git a/src/app/chatbot-design-studio/utils.ts b/src/app/chatbot-design-studio/utils.ts index 22ded17d..6de041fc 100644 --- a/src/app/chatbot-design-studio/utils.ts +++ b/src/app/chatbot-design-studio/utils.ts @@ -385,7 +385,7 @@ export function convertJsonToArray(jsonData:any){ } export async function isElementOnTheStage(elementId:string): Promise{ - // if(document.getElementById(elementId)) return true; + return new Promise((resolve) => { let intervalId = setInterval(async () => { const result = document.getElementById(elementId);