diff --git a/package-lock.json b/package-lock.json index 7f685d38..545e9439 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@tiledesk/cds", - "version": "0.0.2", + "version": "0.0.3", "license": "MIT", "dependencies": { "@angular/animations": "^14.2.0", diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.html index 485f3436..34e1cc2e 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.html @@ -1,14 +1,16 @@
-
+
-
+
- + diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss index d5b21de9..5afe4a6a 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.scss @@ -16,9 +16,21 @@ flex-direction: row; align-items: flex-end; justify-content: flex-end; - gap: 5px; - padding: 0px; - + gap: 5px; + padding: 5px 10px; + .connector { + position: absolute; + right: -12px; + top: calc(50% - 10px); + } + &.isLast{ + padding: 0px; + .connector { + right: -22px; + top: calc(50% - 10px); + } + } + .title-label{ color: #6c6859; font-size: 12px; @@ -26,6 +38,9 @@ } + + + /** NG-SELECT **/ .ng-select.ng-select-focused>.ng-select-container { border-color: $color-red-hex; diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.ts index 6df5248b..7d8b08ba 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-intent/cds-action-intent.component.ts @@ -3,7 +3,7 @@ import { Intent } from 'src/app/models/intent-model'; import { ActionIntentConnected } from 'src/app/models/action-model'; import { IntentService } from '../../../../../services/intent.service'; import { Subscription } from 'rxjs/internal/Subscription'; -import { TYPE_UPDATE_ACTION, ACTIONS_LIST } from '../../../../../utils'; +import { TYPE_UPDATE_ACTION, ACTIONS_LIST, TYPE_ACTION } from '../../../../../utils'; import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service'; import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'; @@ -18,6 +18,7 @@ export class CdsActionIntentComponent implements OnInit { @Input() isStart: boolean; @Input() action: ActionIntentConnected; @Input() previewMode: boolean = true; + @Input() isLast: boolean = false; @Output() updateIntentFromConnectorModification = new EventEmitter(); @Output() updateAndSaveAction = new EventEmitter(); @@ -40,7 +41,7 @@ export class CdsActionIntentComponent implements OnInit { } ngOnInit(): void { - // console.log("[CDS-ACTION-INTENT] elementSelected: ", this.action, this.intentSelected) + console.log("[CDS-ACTION-INTENT] elementSelected: ", this.action, this.intentSelected) this.subscriptionChangedConnector = this.intentService.isChangedConnector$.subscribe((connector: any) => { // console.log('[CDS-ACTION-INTENT] - subcribe to isChangedConnector$ >>', connector); this.connector = connector; @@ -85,6 +86,8 @@ export class CdsActionIntentComponent implements OnInit { private updateConnector(){ this.isConnected = this.action.intentName?true:false; try { + if(!this.action.intentName)this.isConnected = false; + else this.isConnected = true; const array = this.connector.fromId.split("/"); const idAction= array[1]; // console.log('[CDS-ACTION-INTENT] 2 - updateConnector :: ', idAction, this.action._tdActionId, this.connector); @@ -93,6 +96,7 @@ export class CdsActionIntentComponent implements OnInit { this.action.intentName = null; this.isConnected = false; } else { + // console.log('[CDS-ACTION-INTENT] connettore creato - PALLINO PIENO :: ', this.connector); this.isConnected = true; this.action.intentName = "#"+this.connector.toId; } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.html index b0a1db15..b2f087c5 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.html @@ -58,6 +58,14 @@ [style.left.px]="getIntentPosition(intent.intent_id).x" [intent]="intent"> + + + +
+ +
+ + + diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss index 8d8f3f16..a40e9b5b 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss @@ -236,6 +236,21 @@ cds-fulfillment { } +.panel--connector--menu{ + top: 0; + left: 0; + width: 30px; + height: 30px; + border-radius: 50%; + padding: 0; + margin: 0; + // background-color: brown; + display: block; + position: absolute; + // overflow: hidden; + z-index: 1; +} + .panel-action-backdrop { display: flex; @@ -287,6 +302,8 @@ cds-fulfillment { } + + /*********** START Draggable *************/ .tds-drag-container { position: relative; 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 b187cad8..e4d8dfad 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 @@ -21,7 +21,7 @@ import { isElementOnTheStage, TYPE_INTENT_ELEMENT, TYPE_OF_MENU, INTENT_TEMP_ID, import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'; import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service'; -const swal = require('sweetalert'); +// const swal = require('sweetalert'); @Component({ selector: 'cds-canvas', @@ -75,6 +75,11 @@ export class CdsCanvasComponent implements OnInit { /** panel options */ private subscriptionUndoRedo: Subscription; stateUndoRedo: any = {undo:false, redo: false}; + + /** panel connector */ + IS_OPEN_PANEL_CONNECTOR_MENU: boolean = false; + mousePosition: any; + connectorSelected: any; private logger: LoggerService = LoggerInstance.getInstance() constructor( @@ -230,6 +235,7 @@ export class CdsCanvasComponent implements OnInit { this.IS_OPEN_PANEL_WIDGET = false; this.IS_OPEN_PANEL_ACTION_DETAIL = false; this.IS_OPEN_PANEL_BUTTON_CONFIG = false; + this.IS_OPEN_PANEL_CONNECTOR_MENU = false; // this.closePanelWidget.next(); } @@ -420,7 +426,14 @@ export class CdsCanvasComponent implements OnInit { */ document.addEventListener( "connector-selected", (e: CustomEvent) => { - this.logger.log("[CDS-CANVAS] connector-selected:", e); + // console.log("[CDS-CANVAS] connector-selected:", e, e.detail.mouse_pos); + this.IS_OPEN_PANEL_CONNECTOR_MENU = true; + this.mousePosition = e.detail.mouse_pos; + this.mousePosition.x -= 15; + this.mousePosition.y -= 15; + this.connectorSelected = e.detail.connector; + // this.IS_OPEN_ADD_ACTIONS_MENU = true; + // this.positionFloatMenu = e.detail.mouse_pos; this.intentService.unselectAction(); }, true @@ -507,7 +520,7 @@ export class CdsCanvasComponent implements OnInit { */ @HostListener('document:mouseup', ['$event']) onMouseUpHandler(event: KeyboardEvent) { - this.logger.log('[CDS-CANVAS] MOUSE UP CLOSE FLOAT MENU', this.hasClickedAddAction) + this.logger.log('[CDS-CANVAS] MOUSE UP CLOSE FLOAT MENU', this.hasClickedAddAction); } @@ -617,6 +630,7 @@ export class CdsCanvasComponent implements OnInit { onToogleSidebarIntentsList() { this.logger.log('[CDS-CANVAS] onToogleSidebarIntentsList ') this.IS_OPEN_INTENTS_LIST = !this.IS_OPEN_INTENTS_LIST; + this.removeConnectorDraftAndCloseFloatMenu(); this.logger.log('[CDS-CANVAS] onToogleSidebarIntentsList this.IS_OPEN_INTENTS_LIST ', this.IS_OPEN_INTENTS_LIST) } @@ -806,18 +820,20 @@ export class CdsCanvasComponent implements OnInit { if (!this.hasClickedAddAction) { this.removeConnectorDraftAndCloseFloatMenu(); } - swal({ - title: this.translate.instant('AreYouSure'), - text: "The block " + intent.intent_display_name + " will be deleted", - icon: "warning", - buttons: ["Cancel", "Delete"], - dangerMode: true, - }).then((WillDelete) => { - if (WillDelete) { - this.closeAllPanels(); - this.deleteIntent(intent); - } - }) + this.closeAllPanels(); + this.deleteIntent(intent); + // swal({ + // title: this.translate.instant('AreYouSure'), + // text: "The block " + intent.intent_display_name + " will be deleted", + // icon: "warning", + // buttons: ["Cancel", "Delete"], + // dangerMode: true, + // }).then((WillDelete) => { + // if (WillDelete) { + // this.closeAllPanels(); + // this.deleteIntent(intent); + // } + // }) } // --------------------------------------------------------- // @@ -891,6 +907,8 @@ export class CdsCanvasComponent implements OnInit { const pos = { 'x': event.x, 'y': event.y } this.intentSelected = event.intent; this.positionFloatMenu = pos; + + this.logger.log('[CDS-CANVAS] showPanelActions intentSelected ', this.intentSelected); this.logger.log('[CDS-CANVAS] showPanelActions positionFloatMenu ', this.positionFloatMenu) } @@ -1025,4 +1043,18 @@ export class CdsCanvasComponent implements OnInit { // --------------------------------------------------------- // + + /** + * onAddActionFromConnectorMenu + * @param event + */ + async onAddActionFromConnectorMenu(event) { + const connector = this.connectorSelected; + // console.log('[CDS-CANVAS] onAddActionFromConnectorMenu:: ', event, connector.id); + if(event.type === "delete"){ + this.connectorService.deleteConnector(connector.id, true, true); + this.IS_OPEN_PANEL_CONNECTOR_MENU = false; + } + } + // --------------------------------------------------------- // } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html index 73e3cb63..196ae2bf 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html @@ -34,7 +34,7 @@
@@ -265,6 +265,7 @@ class="panel-response action-intent" [intentSelected]="intent" [action]="actionIntent" + [isLast]="true" (updateAndSaveAction)="onUpdateAndSaveAction($event)"> diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts index 6954fc2f..259a86e7 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef, OnChanges, OnDestroy } from '@angular/core'; import { Form, Intent } from 'src/app/models/intent-model'; -import { Action } from 'src/app/models/action-model'; +import { Action, ActionIntentConnected } from 'src/app/models/action-model'; import { Subject, Subscription } from 'rxjs'; import { ACTIONS_LIST, TYPE_ACTION, TYPE_INTENT_NAME, checkInternalIntent, patchActionId } from '../../../utils'; @@ -87,7 +87,7 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { webHookTooltipText: string; isInternalIntent: boolean = false; - actionIntent: Action; + actionIntent: ActionIntentConnected; private logger: LoggerService = LoggerInstance.getInstance() constructor( @@ -120,8 +120,10 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { } else { // if(this.intent.actions.length !== intent.actions.length && intent.actions.length>0) this.logger.log("[CDS-INTENT] aggiorno le actions dell'intent"); this.listOfActions = this.intent.actions; - // AGGIORNO I CONNETTORI - // this.intentService.updateIntent(this.intent); /// DEVO ELIMINARE UPDATE DA QUI!!!!! + // cerca il primo connect to block e fissalo in fondo + // this.listOfActions = this.intent.actions.filter(function(obj) { + // return obj._tdActionType !== TYPE_ACTION.INTENT; + // }); } //UPDATE QUESTIONS @@ -175,8 +177,10 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { ngOnInit(): void { console.log('CdsPanelIntentComponent ngAfterViewInit-->', this.intent); - this.setIntentSelected(); + + if (this.intent.actions && this.intent.actions.length === 1 && this.intent.actions[0]._tdActionType === TYPE_ACTION.INTENT && this.intent.intent_display_name === 'start') { + console.log('CdsPanelIntentComponent START-->',this.intent.actions[0]); this.startAction = this.intent.actions[0]; if (!this.startAction._tdActionId) { this.startAction = patchActionId(this.intent.actions[0]); @@ -188,13 +192,41 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { // //** center stage on 'start' intent */ // let startElement = document.getElementById(this.intent.intent_id) // this.stageService.centerStageOnHorizontalPosition(startElement) + } else { + this.setIntentSelected(); } - + this.setActionIntentInIntent(); this.isInternalIntent = checkInternalIntent(this.intent) - this.actionIntent = this.intentService.createNewAction(TYPE_ACTION.INTENT); this.addEventListener(); } + private setActionIntentInIntent(){ + + // recupero l'ultimo action intent + this.actionIntent = this.intentService.createNewAction(TYPE_ACTION.INTENT); + for (let i = this.intent.actions.length - 1; i >= 0; i--) { + if (this.intent.actions[i]._tdActionType === TYPE_ACTION.INTENT) { + this.actionIntent = this.intent.actions[i]; + // console.log('setActionIntentInIntent:: ', this.intent.actions[i]); + this.intent.actions.splice(i, 1); + break; // Rimuoviamo solo l'ultimo corrispondente + } + } + // this.intent.actions = this.intent.actions.map(function(action) { + // if(action._tdActionType === TYPE_ACTION.INTENT){ + // actionIntent = action; + // } + // return action; + // }); + // this.actionIntent = actionIntent; + // console.log('setActionIntentInIntent:: ', this.actionIntent); + if(this.actionIntent && this.actionIntent.intentName){ + const fromId = this.intent.intent_id+'/'+this.actionIntent._tdActionId; + const toId = this.actionIntent.intentName.replace("#", ""); + this.connectorService.createConnectorFromId(fromId, toId, false, false); //Sync + } + } + ngOnChanges(changes: SimpleChanges): void { // Fixed bug where an empty intent's action placeholder remains visible if an action is dragged from the left action menu this.logger.log('[CDS-INTENT] hideActionPlaceholderOfActionPanel (dragged from sx panel) ', this.hideActionPlaceholderOfActionPanel) @@ -204,14 +236,12 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { if (addActionPlaceholderEl !== null) { addActionPlaceholderEl.style.opacity = '0'; } - } else if (this.hideActionPlaceholderOfActionPanel === true) { const addActionPlaceholderEl = document.querySelector('.add--action-placeholder'); this.logger.log('[CDS-INTENT] HERE 2 !!!! addActionPlaceholderEl ', addActionPlaceholderEl); if (addActionPlaceholderEl !== null) { addActionPlaceholderEl.style.opacity = '1'; } - } } @@ -255,7 +285,7 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { document.addEventListener( "connector-moved-over-intent", (e: CustomEvent) => { - // this.logger.log('[CDS-INTENT] Connector Moved over intent e ', e) + console.log('[CDS-INTENT] Connector Moved over intent e ', e); // movingBorder // flashBorder if (e.detail.toId === this.intent.intent_id) { @@ -274,7 +304,7 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { document.addEventListener( "connector-moved-out-of-intent", (e: CustomEvent) => { - // this.logger.log('[CDS-INTENT] Connector Moved out of intent e ', e) + console.log('[CDS-INTENT] Connector Moved out of intent e ', e); if (e.detail.toId === this.intent.intent_id) { // this.logger.log('[CDS-INTENT] Connector Moved out of intent e id ', e.detail.toId) const intentContentEl = document.querySelector(`#intent-content-${e.detail.toId}`); @@ -301,10 +331,10 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { console.log("setIntentSelected:: ", this.intent.actions); this.patchAllActionsId(); this.patchAttributesPosition(); - this.listOfActions = this.intent.actions.filter(function(obj) { - return obj._tdActionType !== TYPE_ACTION.INTENT; - }); - // this.listOfActions = this.intent.actions; + // this.listOfActions = this.intent.actions.filter(function(obj) { + // return obj._tdActionType !== TYPE_ACTION.INTENT; + // }); + this.listOfActions = this.intent.actions; // console.log("[CDS-INTENT] listOfActions: ", this.listOfActions); // this.form = this.intent.form; // this.actions = this.intent.actions; @@ -645,10 +675,28 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges { replaceItemInArrayForKey('_tdActionId', this.intent.actions, action); } } - console.log('[CDS-INTENT] onUpdateAndSaveAction:::: ', object, this.intent, this.intent.actions); + this.setActionIntentInListOfActions(); + // console.log('[CDS-INTENT] onUpdateAndSaveAction:::: ', object, this.intent, this.intent.actions); this.intentService.onUpdateIntentWithTimeout(this.intent, 0, true, connector); } + + + private setActionIntentInListOfActions(){ + let actionIntent = this.actionIntent; + let addIntentAction = true; + this.intent.actions = this.intent.actions.map(function(action) { + if(action._tdActionType === TYPE_ACTION.INTENT){ + addIntentAction = false; + return actionIntent; + } + return action; + }); + if (addIntentAction) { + this.intent.actions.push(this.actionIntent); + } + } + openActionMenu(intent: any, calleBy: string) { this.logger.log('[CDS-INTENT] openActionMenu > intent ', intent) this.logger.log('[CDS-INTENT] openActionMenu > calleBy ', calleBy) diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.html new file mode 100644 index 00000000..60c4b503 --- /dev/null +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.html @@ -0,0 +1,17 @@ +
+ +
+ + + +
+ +
+
+
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.scss new file mode 100644 index 00000000..0b3256f2 --- /dev/null +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.scss @@ -0,0 +1,60 @@ +@import "./src/assets/sass/cds/_variables.scss"; +@import "./src/assets/sass/animations.scss"; + +/* Intent header actions +/* ***************************** */ +.intent-header-actions-container { + position: absolute; + top: 0px; + right: 0px; + height: 45px; + padding-left: 12px; + opacity: 1; + // transform: translate3d(0, 20px, 0); + transition: 0.25s all ease-in-out; + } + + .panel-intent-content:hover .intent-header-actions-container-on-start { + top: -19px !important; + right: 12px !important; + } + +// .panel-intent-content:hover .intent-header-actions-container { +// top: -28px; +// opacity: 1; +// transform: translate3d(0, 0, 0); +// } + + .intent-header-actions-wpr { + background: #fff; + height: 25px; + border-radius: 14px; + box-shadow: #001b4714 0 3px 8px; + display: flex; + padding: 3px 0px; + } + + .intent-header-action-btn { + cursor: pointer; + border-left: solid 1px $border-light; + padding: 2px 8px; + display: flex; + + } + + .intent-header-action-btn:first-child { + border-left: unset; + } + + .icon.webhook-enabled img { + filter: brightness(0) saturate(100%) invert(41%) sepia(79%) saturate(1263%) hue-rotate(121deg) brightness(101%) contrast(82%); + } + + .icon img { + filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(0%) hue-rotate(216deg) brightness(94%) contrast(91%); + } + .icon:hover { + img { + filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%); + } + } \ No newline at end of file diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.spec.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.spec.ts new file mode 100644 index 00000000..ba3e0692 --- /dev/null +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CdsPanelConnectorMenuComponent } from './cds-panel-connector-menu.component'; + +describe('CdsPanelConnectorMenuComponent', () => { + let component: CdsPanelConnectorMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CdsPanelConnectorMenuComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CdsPanelConnectorMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.ts new file mode 100644 index 00000000..f947e971 --- /dev/null +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'cds-panel-connector-menu', + templateUrl: './cds-panel-connector-menu.component.html', + styleUrls: ['./cds-panel-connector-menu.component.scss'] +}) +export class CdsPanelConnectorMenuComponent implements OnInit { + + @Output() addActionFromConnectorMenu = new EventEmitter(); + constructor() { } + + ngOnInit(): void { + + } + + onAddActionFromConnectorMenu(){ + let event = { + 'type': 'delete' + } + console.log('[CDS-ADD-CONNECTOR MENU] onAddActionFromConnectorMenu - connector: ', event); + // console.log('[CDS-ADD-ACTION-MENU] ON ADDING ACTION - TO STAGE - actionToSearch 1: ',this.actionToSearch); + + // this.actionToSearch = undefined; + // this.filterMenuItemsList = this.menuItemsList; + this.addActionFromConnectorMenu.emit(event); + } + +} diff --git a/src/app/chatbot-design-studio/chatbot-design-studio.module.ts b/src/app/chatbot-design-studio/chatbot-design-studio.module.ts index 046b4401..21629415 100644 --- a/src/app/chatbot-design-studio/chatbot-design-studio.module.ts +++ b/src/app/chatbot-design-studio/chatbot-design-studio.module.ts @@ -201,6 +201,7 @@ import { CdsEventComponent } from './cds-dashboard/cds-event/cds-event.component import { CdsRuleComponent } from './cds-dashboard/cds-rule/cds-rule.component'; import { CdsOptionsComponent } from './cds-dashboard/cds-canvas/cds-options/cds-options.component'; +import { CdsPanelConnectorMenuComponent } from './cds-dashboard/cds-canvas/cds-panel-connector-menu/cds-panel-connector-menu.component'; @NgModule({ @@ -346,6 +347,7 @@ import { CdsOptionsComponent } from './cds-dashboard/cds-canvas/cds-options/cds- CdsEventComponent, CdsRuleComponent, CdsOptionsComponent, + CdsPanelConnectorMenuComponent, ], imports: [ diff --git a/src/app/chatbot-design-studio/services/connector.service.ts b/src/app/chatbot-design-studio/services/connector.service.ts index a5dc490b..1e5d30a6 100644 --- a/src/app/chatbot-design-studio/services/connector.service.ts +++ b/src/app/chatbot-design-studio/services/connector.service.ts @@ -166,7 +166,7 @@ export class ConnectorService { // this.logger.log('[CONNECTOR-SERV] intent_display_name', intent.intent_display_name); if(action.intentName && action.intentName !== ''){ const idConnectorFrom = intent.intent_id+'/'+action._tdActionId; - const idConnectorTo = action.intentName.replace("#", ""); ; + const idConnectorTo = action.intentName.replace("#", ""); this.logger.log('[CONNECTOR-SERV] -> CREATE CONNECTOR', idConnectorFrom, idConnectorTo); this.createConnectorFromId(idConnectorFrom, idConnectorTo); } diff --git a/src/app/models/action-model.ts b/src/app/models/action-model.ts index 3c52cd56..0f3eea74 100644 --- a/src/app/models/action-model.ts +++ b/src/app/models/action-model.ts @@ -183,7 +183,7 @@ export class ActionJsonCondition extends Action { } export class ActionIntentConnected extends Action { - intentName: string; + intentName?: string; json_payload?: Object; constructor() { super(); diff --git a/src/assets/js/tiledesk-connectors.js b/src/assets/js/tiledesk-connectors.js index cc6fa18a..87cd0c59 100644 --- a/src/assets/js/tiledesk-connectors.js +++ b/src/assets/js/tiledesk-connectors.js @@ -727,7 +727,13 @@ export class TiledeskConnectors { } }); connector.addEventListener('click', (e) => { - // // console.log("clicked e", e.currentTarget); + + let pos_x_phis = e.clientX; + let pos_y_phis = e.clientY; + let mouse_pos_logic = this.logicPoint({ x: pos_x_phis, y: pos_y_phis }); + let toPointPhis = { x: pos_x_phis, y: pos_y_phis }; + // console.log("clicked e", e, toPointPhis, mouse_pos_logic); + // console.log("clicked e", e.currentTarget); if (this.selectedConnector) { this.selectedConnector.setAttributeNS(null, "class", this.classes["connector"]); this.selectedConnector.setAttributeNS(null, "marker-start", "url(#" + this.ids['arrow'] + ")"); @@ -736,7 +742,7 @@ export class TiledeskConnectors { this.selectedConnector.setAttributeNS(null, "class", this.classes["connector_selected"]); this.selectedConnector.setAttributeNS(null, "marker-start", "url(#" + this.ids['arrow_selected'] + ")"); - const event = new CustomEvent("connector-selected", { detail: { connector: connector } }); + const event = new CustomEvent("connector-selected", { detail: { connector: connector, mouse_pos: mouse_pos_logic } }); document.dispatchEvent(event); }); this.svgContainer.appendChild(connector); diff --git a/src/assets/js/tiledesk-stage.js b/src/assets/js/tiledesk-stage.js index f6a8b13a..20e13533 100644 --- a/src/assets/js/tiledesk-stage.js +++ b/src/assets/js/tiledesk-stage.js @@ -173,7 +173,6 @@ export class TiledeskStage { event.preventDefault(); pos_mouse_x = event.clientX; pos_mouse_y = event.clientY; - const custom_event = new CustomEvent("start-dragging", { detail: { element: element