diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index cf38552f7a..df9e299cda 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -22,7 +22,7 @@ import { ElementRef, EventEmitter, Input, - NgModule, + NgModule, OnDestroy, Output, Type, ViewChild, @@ -33,6 +33,7 @@ import { ScadaSymbolElement } from '@home/pages/scada-symbol/scada-symbol.models import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { ENTER } from '@angular/cdk/keycodes'; +import Timeout = NodeJS.Timeout; @Directive() abstract class ScadaSymbolPanelComponent implements AfterViewInit { @@ -98,7 +99,7 @@ class ScadaSymbolAddTagPanelComponent extends ScadaSymbolPanelComponent { styleUrls: ['./scada-symbol-tooltip.component.scss'], encapsulation: ViewEncapsulation.None }) -class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit { +class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit, OnDestroy { @ViewChild('tagField') tagField: ElementRef; @@ -117,6 +118,8 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem private closed = false; + private blurTimeout: Timeout; + constructor(public element: ElementRef) { super(element); } @@ -128,6 +131,13 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem }); } + ngOnDestroy() { + if (this.blurTimeout) { + clearTimeout(this.blurTimeout); + this.blurTimeout = null; + } + } + public tagEnter($event: KeyboardEvent) { if ($event.keyCode === ENTER) { $event.preventDefault(); @@ -153,7 +163,7 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem } public onBlur() { - setTimeout(() => { + this.blurTimeout = setTimeout(() => { if (!this.closed) { this.closed = true; this.cancel.emit(); @@ -219,7 +229,7 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements export class ScadaSymbolTooltipComponentsModule { } export const setupAddTagPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef) => { - symbolElement.setEditing(false); + symbolElement.stopEdit(); symbolElement.tooltip.off('close'); const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolAddTagPanelComponent); componentRef.instance.addTag.subscribe(() => { @@ -229,7 +239,7 @@ export const setupAddTagPanelTooltip = (symbolElement: ScadaSymbolElement, conta }; export const setupTagPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef) => { - symbolElement.setEditing(false); + symbolElement.stopEdit(); symbolElement.unhighlight(); const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolTagPanelComponent); componentRef.instance.updateTag.subscribe(() => { @@ -244,7 +254,17 @@ export const setupTagPanelTooltip = (symbolElement: ScadaSymbolElement, containe }; const setupTagInputPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef, isAdd: boolean) => { - symbolElement.setEditing(true); + + symbolElement.startEdit(() => { + if (isAdd) { + symbolElement.unhighlight(); + symbolElement.tooltip.close(); + } else { + componentRef.destroy(); + setupTagPanelTooltip(symbolElement, container); + } + }); + const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolTagInputPanelComponent); componentRef.instance.isAdd = isAdd; @@ -259,13 +279,7 @@ const setupTagInputPanelTooltip = (symbolElement: ScadaSymbolElement, container: symbolElement.setTag(newTag); }); componentRef.instance.cancel.subscribe(() => { - if (isAdd) { - symbolElement.unhighlight(); - symbolElement.tooltip.close(); - } else { - componentRef.destroy(); - setupTagPanelTooltip(symbolElement, container); - } + symbolElement.stopEdit(true); }); if (isAdd) { symbolElement.tooltip.option('delay', [0, 10000000]); @@ -283,7 +297,7 @@ const setTooltipComponent = (symbolElement: componentRef.instance.symbolElement = symbolElement; componentRef.instance.viewInited.subscribe(() => { if (symbolElement.tooltip.status().open) { - symbolElement.repositionTooltip(); + symbolElement.tooltip.reposition(); } }); const parentElement = componentRef.instance.element.nativeElement; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index d8ee8c1a64..fe843f8cf9 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -71,8 +71,8 @@ export class ScadaSymbolEditObject { this.shapeResize$.observe(this.rootElement); } - public editingElement() { - return this.elements.find(e => e.isEditing()); + public cancelEdit() { + this.elements.filter(e => e.isEditing()).forEach(e => e.stopEdit(true)); } private doSetup() { @@ -300,6 +300,7 @@ export class ScadaSymbolElement { public tag: string; private editing = false; + private onCancelEdit: () => void; private innerTooltipOffset = 0; @@ -373,7 +374,7 @@ export class ScadaSymbolElement { this.element.addClass('hovered'); } if (this.hasTag()) { - this.repositionTooltip(); + this.tooltip.reposition(); $(this.tooltip.elementTooltip()).addClass('tb-active'); } } @@ -396,13 +397,6 @@ export class ScadaSymbolElement { } } - public repositionTooltip() { - const editingElement = this.editObject.editingElement(); - if (!editingElement || editingElement === this) { - this.tooltip.reposition(); - } - } - public clearTag() { this.tooltip.destroy(); this.tag = null; @@ -418,10 +412,24 @@ export class ScadaSymbolElement { this.createTagTooltip(); } - public setEditing(editing: boolean) { - this.editing = editing; - if (this.hasTag() && !this.editing && !this.highlighted) { - $(this.tooltip.elementTooltip()).removeClass('tb-active'); + public startEdit(onCancelEdit: () => void) { + if (!this.editing) { + this.editObject.cancelEdit(); + this.editing = true; + this.onCancelEdit = onCancelEdit; + } + } + + public stopEdit(cancel = false) { + if (this.editing) { + this.editing = false; + if (cancel && this.onCancelEdit) { + this.onCancelEdit(); + } + this.onCancelEdit = null; + if (this.hasTag() && !this.highlighted) { + $(this.tooltip.elementTooltip()).removeClass('tb-active'); + } } } @@ -490,78 +498,6 @@ export class ScadaSymbolElement { private setupTagPanel() { setupTagPanelTooltip(this, this.editObject.viewContainerRef); - /*this.isEditing = false; - this.unhighlight(); - const tagPanel = - $(`
- ${this.element.type}: - ${this.tag} - edit - delete -
`); - const updateTagButton = tagPanel.find('.edit-icon'); - textTooltip(updateTagButton, 'Update tag'); - updateTagButton.on('click', () => { - this.setupEditTagPanel(); - }); - const deleteButton = tagPanel.find('.delete-icon'); - textTooltip(deleteButton, 'Remove tag'); - deleteButton.on('click', () => { - this.clearTag(); - }); - this.tooltip.content(tagPanel); - this.tooltip.open();*/ - } - - private setupEditTagPanel() { - this.editing = true; - const editTagInputPanel = - $(`
- Update tag: - - done - close -
`); - const tagInput = editTagInputPanel.find('input.tag-input'); - const applyTagButton = editTagInputPanel.find('span.apply-icon'); - const closeButton = editTagInputPanel.find('span.close-icon'); - textTooltip(applyTagButton, 'Apply'); - textTooltip(closeButton, 'Cancel'); - tagInput.val(this.tag); - let editPanelClosed = false; - - tagInput.on('keypress', (event) => { - if (event.which === 13) { - const newTag: string = tagInput.val() as string; - if (newTag) { - editPanelClosed = true; - this.setTag(newTag); - } - } - }); - applyTagButton.on('click', () => { - const newTag: string = tagInput.val() as string; - editPanelClosed = true; - if (newTag) { - this.setTag(newTag); - } else { - this.setupTagPanel(); - } - }); - closeButton.on('click', () => { - editPanelClosed = true; - this.setupTagPanel(); - }); - tagInput.on('blur', () => { - setTimeout(() => { - if (!editPanelClosed) { - editPanelClosed = true; - this.setupTagPanel(); - } - }); - }); - this.tooltip.content(editTagInputPanel); - tagInput.trigger('focus'); } private createAddTagTooltip() { @@ -609,105 +545,6 @@ export class ScadaSymbolElement { private setupAddTagPanel() { setupAddTagPanelTooltip(this, this.editObject.viewContainerRef); - /*this.isEditing = false; - this.tooltip.off('close'); - this.editObject.dynamicComponentFactoryService.createDynamicComponent( - class TbTooltipComponentInstance extends TbTooltipContent {}, - `
- ${this.element.type}: - -
`, - [this.editObject.sharedModule] - ).subscribe(componentData => { - const tooltipComponentRef = - this.editObject.viewContainerRef.createComponent(componentData.componentType, - {index: 0, ngModuleRef: componentData.componentModuleRef}); - tooltipComponentRef.instance.componentType = componentData.componentType; - tooltipComponentRef.instance.dynamicComponentFactoryService = this.editObject.dynamicComponentFactoryService; - tooltipComponentRef.instance.addTag = new EventEmitter(); - tooltipComponentRef.instance.addTag.subscribe(() => { - tooltipComponentRef.destroy(); - this.setupAddTagInputPanel(); - }); - const parentElement = tooltipComponentRef.instance.element.nativeElement; - const content = parentElement.firstChild; - parentElement.removeChild(content); - parentElement.style.display = 'none'; - this.tooltip.content(content); - });*/ - /* - const addTagPanel = - $(`
- ${this.element.type}: - -
`); - const addTagButton = addTagPanel.find('.add-tag-button'); - addTagButton.on('click', () => { - this.setupAddTagInputPanel(); - }); - this.tooltip.content(addTagPanel); - */ - // this.tooltip.off('closing'); - } - - private setupAddTagInputPanel() { - this.editing = true; - const addTagInputPanel = - $(`
- Enter tag: - - done - close -
`); - const tagInput = addTagInputPanel.find('input.tag-input'); - const applyTagButton = addTagInputPanel.find('span.apply-icon'); - const closeButton = addTagInputPanel.find('span.close-icon'); - textTooltip(applyTagButton, 'Apply'); - textTooltip(closeButton, 'Cancel'); - - let addPanelClosed = false; - tagInput.on('keypress', (event) => { - if (event.which === 13) { - const newTag: string = tagInput.val() as string; - if (newTag) { - addPanelClosed = true; - this.tooltip.off('close'); - this.setTag(newTag); - } - } - }); - applyTagButton.on('click', () => { - const newTag: string = tagInput.val() as string; - addPanelClosed = true; - if (newTag) { - this.tooltip.off('close'); - this.setTag(newTag); - } else { - this.unhighlight(); - this.tooltip.close(); - } - }); - closeButton.on('click', () => { - addPanelClosed = true; - this.unhighlight(); - this.tooltip.close(); - }); - tagInput.on('blur', () => { - setTimeout(() => { - if (!addPanelClosed) { - addPanelClosed = true; - this.tooltip.close(); - } - }); - }); - this.tooltip.content(addTagInputPanel); - this.tooltip.option('delay', [0, 10000000]); - this.tooltip.on('close', () => { - this.tooltip.option('delay', [0, 300]); - this.setupAddTagPanel(); - }); - tagInput.trigger('focus'); } private innerTagTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper,