ato-water-lib 0.0.11 → 0.0.13

package/fesm2020/ato-water-lib.mjs

@@ -3222,7 +3222,8 @@ class AtoDefaultGojsEditor {
     get editor() {
         return this._editor;
     }
-    constructor() {
+    constructor(_elRef) {
+        this._elRef = _elRef;
         this.actions = [];
         this.actionMenuId = 'actionMenuId';
         this.myDiagramDiv = this.constructor.name + '-' + moment().valueOf();
@@ -3507,7 +3508,8 @@ class AtoDefaultGojsEditor {
         if (this.animationInterval) {
             clearInterval(this.animationInterval);
         }
-        this.myDiagram = this.$(go.Diagram, this.myDiagramDiv, this.initialOptions);
+        const diagramDiv = this._elRef.nativeElement.querySelector(`#${this.myDiagramDiv}`);
+        this.myDiagram = this.$(go.Diagram, diagramDiv, this.initialOptions);
         // this.myDiagram.initialPosition = new go.Point(0, 0);
         this.addOrRemoveCompoentTemplate();
         this.makeLinkTemplate();
@@ -6239,11 +6241,11 @@ class AtoDefaultGojsEditor {
         });
     }
 }
-AtoDefaultGojsEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AtoDefaultGojsEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 AtoDefaultGojsEditor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoDefaultGojsEditor, inputs: { linkValidation: "linkValidation", initialOptions: "initialOptions", editor: "editor", isShowNodeInfo: "isShowNodeInfo", plantSatus: "plantSatus" }, outputs: { onModelChangeListenerEvent: "onModelChangeListenerEvent", onClickInfoButton: "onClickInfoButton", onOpenWizard: "onOpenWizard", onOpenDetail: "onOpenDetail", onOpenAssetParameter: "onOpenAssetParameter", onOpenInsightMapping: "onOpenInsightMapping", onHoverInfoButton: "onHoverInfoButton", onHoverAlert: "onHoverAlert", onDoubleClickNode: "onDoubleClickNode", onOpenChangeIcon: "onOpenChangeIcon", onClickCompoent: "onClickCompoent", callbackImageTopology: "callbackImageTopology", onClikParamOfTable: "onClikParamOfTable", onDeleteNode: "onDeleteNode", onUndo: "onUndo", onRename: "onRename" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return []; }, propDecorators: { menuTrigger: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { menuTrigger: [{
                 type: ViewChild,
                 args: ['menuTrigger']
             }], linkValidation: [{
@@ -6372,8 +6374,8 @@ class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
     get data() {
         return this._data;
     }
-    constructor() {
-        super();
+    constructor(_elRef) {
+        super(_elRef);
         this._data = null;
         this.isLoading = false;
         this.actions = [
@@ -6414,12 +6416,12 @@ class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
         this.myDiagram.select(this.myDiagram.findNodeForKey(key));
     }
 }
-AtoFlowDiagramLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AtoFlowDiagramLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 AtoFlowDiagramLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: { showNotificationIcon: "showNotificationIcon", data: "data", isLoading: "isLoading" }, viewQueries: [{ propertyName: "myDiagramDivTemp", first: true, predicate: ["myDiagramDivTemp"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" style=\"height: 100%\">\n    <!-- tqlSpin [spinning]=\"data === null || !!isLoading\"  -->\n    <div class=\"w-100 h-100 d-flex\" style=\"height: 100%\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp [id]=\"myDiagramDiv\" class=\"flex-grow-1\" style=\"height: 100%\"></div>\n        <!-- <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <nz-empty nzNotFoundImage=\"simple\"></nz-empty>\n        </div> -->\n    </div>\n</div>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-flow-diagram-lib', template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" style=\"height: 100%\">\n    <!-- tqlSpin [spinning]=\"data === null || !!isLoading\"  -->\n    <div class=\"w-100 h-100 d-flex\" style=\"height: 100%\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp [id]=\"myDiagramDiv\" class=\"flex-grow-1\" style=\"height: 100%\"></div>\n        <!-- <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <nz-empty nzNotFoundImage=\"simple\"></nz-empty>\n        </div> -->\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { myDiagramDivTemp: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { myDiagramDivTemp: [{
                 type: ViewChild,
                 args: ['myDiagramDivTemp']
             }], showNotificationIcon: [{