ato-water-lib 0.0.137 → 0.0.139

package/fesm2020/ato-water-lib.mjs

@@ -8206,40 +8206,43 @@ class AtoDefaultGojsEditor {
                         : null;
                 }
             },
-            selectionAdornmentTemplate: this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', 
-            // { height: 62 },
-            this.$(go.Shape, {
-                fill: null,
-                stroke: 'dodgerblue',
-                strokeWidth: 4,
-            }), this.$(go.Placeholder, 
-            // { padding: new go.Margin(8, 3, 0, 3) },
-            new go.Binding('padding', '', (x) => {
-                return x?.isTypeInflowOfPlantCell
-                    ? x?.flowOfPlantCell === ATO_ENUM_FLOW_DIRECTION.INFLOW
-                        ? new go.Margin(0, 0, 0, 20)
-                        : new go.Margin(0, 20, 0, 0)
-                    : null;
-            })), new go.Binding('height', '', (x) => {
-                // const height = x?.isTypeInflowOfPlantCell ? x?.height + 10 : null;
-                const height = x?.isTypeInflowOfPlantCell ? x?.height + 10 : null;
-                if (x?.group_visible || x?.isSelectBox) {
-                    return (height ?? 0) + 44;
-                }
-                return height;
-            }), new go.Binding('width', '', (x) => {
-                return x?.isTypeInflowOfPlantCell ? x?.width + 12 : null;
-            })), this.$(go.Panel, 'Horizontal', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom }, 
-            // more
-            !this._initialOptions.isReadOnly
-                ? this.generateActionGroup([
-                    AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME,
-                    AtoDefaultGojsEditor.ENUM_ACTIONS.INSIGHT,
-                    AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW,
-                    AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE,
-                ])
-                : {})),
-        }, new go.Binding('visible', 'visible'), new go.Binding('fromSpot', 'fromSpot'), new go.Binding('toSpot', 'toSpot'), new go.Binding('movable', 'movable'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('deletable', 'deletable'), 
+            selectionAdorned: false,
+            selectionAdornmentTemplate: this._initialOptions.isReadOnly || this.isSelectBox
+                ? null
+                : this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', 
+                // { height: 62 },
+                this.$(go.Shape, {
+                    fill: null,
+                    stroke: 'dodgerblue',
+                    strokeWidth: 4,
+                }), this.$(go.Placeholder, 
+                // { padding: new go.Margin(8, 3, 0, 3) },
+                new go.Binding('padding', '', (x) => {
+                    return x?.isTypeInflowOfPlantCell
+                        ? x?.flowOfPlantCell === ATO_ENUM_FLOW_DIRECTION.INFLOW
+                            ? new go.Margin(0, 0, 0, 20)
+                            : new go.Margin(0, 20, 0, 0)
+                        : null;
+                })), new go.Binding('height', '', (x) => {
+                    // const height = x?.isTypeInflowOfPlantCell ? x?.height + 10 : null;
+                    const height = x?.isTypeInflowOfPlantCell ? x?.height + 10 : null;
+                    if (x?.group_visible || x?.isSelectBox) {
+                        return (height ?? 0) + 44;
+                    }
+                    return height;
+                }), new go.Binding('width', '', (x) => {
+                    return x?.isTypeInflowOfPlantCell ? x?.width + 12 : null;
+                })), this.$(go.Panel, 'Horizontal', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom }, 
+                // more
+                !this._initialOptions.isReadOnly
+                    ? this.generateActionGroup([
+                        AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME,
+                        AtoDefaultGojsEditor.ENUM_ACTIONS.INSIGHT,
+                        AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW,
+                        AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE,
+                    ])
+                    : {})),
+        }, new go.Binding('visible', 'visible'), new go.Binding('fromSpot', 'fromSpot'), new go.Binding('toSpot', 'toSpot'), new go.Binding('movable', 'movable'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('deletable', 'deletable'), new go.Binding('selectionAdorned', '', (x) => !self?.isSelectBox), new go.Binding('opacity', '', (x) => x?.opacity ?? 1), 
         // new go.Binding('alignment', 'alignment', function(loc) {
         //     return new go.Spot(0, 0, loc.x, 0);
         // }).ofObject(),
@@ -8260,7 +8263,7 @@ class AtoDefaultGojsEditor {
             source: ICONS_BASE64['uf2f6_output'],
             height: 14,
             width: 14,
-        }, new go.Binding('source', '', (x) => ICONS_BASE64[x?.group_source_icon])), new go.Binding('visible', '', (x) => (x?.group_visible || x?.isSelectBox) ?? false)), this.$(go.Panel, 'Auto', {
+        }, new go.Binding('source', '', (x) => ICONS_BASE64[x?.group_source_icon])), new go.Binding('visible', '', (x) => x?.group_visible ?? false)), this.$(go.Panel, 'Auto', {
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 2,
             }, new go.Binding('text', '', function (data) {
@@ -8285,10 +8288,17 @@ class AtoDefaultGojsEditor {
             fill: AtoGojsEditorModel.ENUM_COLORS.LIGHT_BLUE,
             stroke: AtoGojsEditorModel.ENUM_COLORS.LINK_WATER,
             name: 'textNodeShape',
+            strokeWidth: 1,
         }, new go.Binding('fill', 'fill'), new go.Binding('stroke', '', (x) => {
-            return x?.isSelectBox ? AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE : x?.stroke;
+            if (x?.isSelectBox) {
+                return AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE;
+            }
+            return x?.stroke ?? AtoGojsEditorModel.ENUM_COLORS.LINK_WATER;
         }), new go.Binding('strokeWidth', '', (x) => {
-            return x?.isSelectBox ? 3 : x?.strokeWidth;
+            if (x?.isSelectBox) {
+                return 3;
+            }
+            return x?.strokeWidth ?? 1;
         })), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Horizontal', { alignment: go.Spot.Center }, 
         // Alert
         this.$(go.Panel, 'Auto', {
@@ -8354,25 +8364,15 @@ class AtoDefaultGojsEditor {
         //         }
         //     },
         // }),
-        // this.$(go.Picture, {
-        //     alignment: go.Spot.TopRight,
-        //     margin: new go.Margin(10, 10, 10, 10),
-        //     source: ICONS_BASE64['uf2f6_output'],
-        //     height: 14,
-        //     width: 14,
-        // }),
-        this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), this.makePort('L', go.Spot.Left, go.Spot.LeftSide, false, true), this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, false), this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false)), this.arrowForPlantCell(size, ATO_ENUM_FLOW_DIRECTION.INFLOW))), this.$(go.Panel, 'Horizontal', {
-            height: 16,
-        }, new go.Binding('visible', '', (x) => (x?.group_visible || x?.isSelectBox) ?? false))), this.$(go.Panel, 'Auto', {
+        this.$(go.Picture, {
             alignment: go.Spot.TopRight,
-            alignmentFocus: go.Spot.TopRight,
-        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false), this.$(go.Picture, {
-            alignment: go.Spot.Right,
-            margin: new go.Margin(2, 0, 0, 0),
+            margin: new go.Margin(0, 0, 0, 0),
             source: ICONS_BASE64['uf14a'],
-            height: 17,
+            height: 14,
             width: 14,
-        })));
+        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false)), this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), this.makePort('L', go.Spot.Left, go.Spot.LeftSide, false, true), this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, false), this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false)), this.arrowForPlantCell(size, ATO_ENUM_FLOW_DIRECTION.INFLOW))), this.$(go.Panel, 'Horizontal', {
+            height: 16,
+        }, new go.Binding('visible', '', (x) => x?.group_visible ?? false))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE, node);
     }
     arrowForPlantCell(size, flowDirection) {
@@ -8507,14 +8507,19 @@ class AtoDefaultGojsEditor {
                 // self.showPoint(obj?.part?.location);
             },
             click: (e, obj) => {
+                const outputPayload = {
+                    left: e?.['Wr']?.x,
+                    top: e?.['Wr']?.y,
+                    node: node,
+                    component: obj?.data,
+                };
+                if (this.isSelectBox) {
+                    self.onClickCompoent.emit(outputPayload);
+                    return;
+                }
                 if (obj?.data?.onSelected) {
                     obj?.data?.onSelected(obj?.data);
-                    self.onClickCompoent.emit({
-                        left: e?.['Wr']?.x,
-                        top: e?.['Wr']?.y,
-                        node: node,
-                        component: obj?.data,
-                    });
+                    self.onClickCompoent.emit(outputPayload);
                 }
             },
             selectionChanged: (e) => {
@@ -8522,7 +8527,7 @@ class AtoDefaultGojsEditor {
                     e?.data?.onSelected(null);
                 }
             },
-            selectionAdornmentTemplate: this._initialOptions.isReadOnly
+            selectionAdornmentTemplate: this._initialOptions.isReadOnly || this.isSelectBox
                 ? null
                 : this.$(go.Adornment, 'Spot', {
                     shadowVisible: true,
@@ -8533,7 +8538,12 @@ class AtoDefaultGojsEditor {
                     fill: null,
                     stroke: 'dodgerblue',
                     strokeWidth: 4,
-                }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
+                }), this.$(go.Placeholder, { padding: 3 }), new go.Binding('height', '', (x) => {
+                    if (x?.plantCellNameBelong) {
+                        return 130;
+                    }
+                    return null;
+                })), this.$(go.Panel, 'Horizontal', {
                     alignment: go.Spot.TopRight,
                     alignmentFocus: go.Spot.Bottom,
                     background: 'white',
@@ -8543,8 +8553,7 @@ class AtoDefaultGojsEditor {
                     ? this.generateActionGroup([
                         AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.RO_WATER_TREATMENT].name,
                         AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER].name,
-                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.BOILER]
-                            .name,
+                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.BOILER].name,
                         AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS].name,
                         AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS].name,
                     ].includes(title)
@@ -8562,28 +8571,41 @@ class AtoDefaultGojsEditor {
                             AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE,
                         ])
                     : {})),
-            toolTip: this.$('ToolTip', this.$(go.TextBlock, {
-                margin: 4,
-            }, new go.Binding('text', 'name').makeTwoWay())),
         }, 
         // new go.Binding('location', 'loc', go.Point.parse),
-        new go.Binding('movable', 'movable'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('visible', 'visible'), new go.Binding('deletable', 'deletable'), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Horizontal', {
+        new go.Binding('movable', 'movable'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('visible', 'visible'), new go.Binding('deletable', 'deletable'), new go.Binding('selectionAdorned', '', (x) => !self?.isSelectBox), new go.Binding('opacity', '', (x) => x?.opacity ?? 1), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Horizontal', {
             alignment: go.Spot.Left,
-            padding: new go.Margin(1, 1, 0, 1),
-            margin: new go.Margin(0, 0, 0, 4),
-            height: 14,
-        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false)), this.$(go.Panel, 'Auto', {
+            margin: new go.Margin(0, 0, 0, 0),
+        }, this.$(go.TextBlock, {
+            font: 'bold 10pt Arial',
+            width: size.w,
+            overflow: go.TextBlock.OverflowEllipsis,
+            alignment: go.Spot.Center,
+            wrap: go.TextBlock.None,
+            toolTip: this.$('ToolTip', this.$(go.TextBlock, {
+                margin: 4,
+            }, new go.Binding('text', 'plantCellNameBelong'))),
+        }, new go.Binding('text', 'plantCellNameBelong')), new go.Binding('visible', '', (x) => (x?.plantCellNameBelong ? true : false))), this.$(go.Panel, 'Auto', {
             width: size.w,
             height: size.h,
+            toolTip: this.$('ToolTip', this.$(go.TextBlock, {
+                margin: 4,
+            }, new go.Binding('text', 'name').makeTwoWay())),
         }, this.$(go.Shape, 'RoundedRectangle', {
             fill: 'white',
             stroke: AtoGojsEditorModel.ENUM_COLORS.LINK_WATER,
             strokeWidth: 1,
             // strokeDashArray: [5, 5],
         }, new go.Binding('fill', 'fill'), new go.Binding('stroke', '', (x) => {
-            return x?.isSelectBox ? AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE : x?.stroke;
+            if (x?.isSelectBox) {
+                return AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE;
+            }
+            return x?.stroke ?? AtoGojsEditorModel.ENUM_COLORS.LINK_WATER;
         }), new go.Binding('strokeWidth', '', (x) => {
-            return x?.isSelectBox ? 3 : x?.strokeWidth;
+            if (x?.isSelectBox) {
+                return 3;
+            }
+            return x?.strokeWidth ?? 1;
         })), this.$(go.Panel, 'Table', this.$(go.Picture, icon, {
             row: 1,
             alignment: go.Spot.Center,
@@ -8612,18 +8634,37 @@ class AtoDefaultGojsEditor {
             return !(AtoGojsEditorModel.TYPE_COMPONENT_WATER?.includes(data?.systemType) &&
                 data?.topologyType !== ATO_ECOMPONENT_PLANT_TYPE.WATER &&
                 data?.topologyType !== ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL);
-        }))))), 
-        // Select box
-        this.$(go.Panel, 'Auto', {
+        }))), this.$(go.Picture, {
             alignment: go.Spot.TopRight,
-            alignmentFocus: go.Spot.TopRight,
-        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false), this.$(go.Picture, {
-            alignment: go.Spot.Right,
-            margin: new go.Margin(2, 0, 0, 0),
+            margin: new go.Margin(0, 0, 0, 0),
             source: ICONS_BASE64['uf14a'],
-            height: 17,
+            height: 14,
             width: 14,
-        })), this.$(go.Panel, 'Vertical', {
+        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false)), this.$(go.TextBlock, '', {
+            alignment: go.Spot.TopLeft,
+            margin: new go.Margin(2, 0, 0, 2),
+            stroke: '#DC8FA9',
+            font: 'bold 9pt Arial',
+            textAlign: 'left',
+        }, new go.Binding('text', '', (x) => x?.group_text), new go.Binding('stroke', '', (x) => x?.group_text_stroke)))), 
+        // Select box
+        // this.$(
+        //     go.Panel,
+        //     'Auto',
+        //     {
+        //         alignment: go.Spot.TopRight,
+        //         alignmentFocus: go.Spot.TopRight,
+        //     },
+        //     // new go.Binding('visible', '', (x) => x?.isSelectBox ?? false),
+        //     this.$(go.Picture, {
+        //         alignment: go.Spot.Right,
+        //         margin: new go.Margin(2, 0, 0, 0),
+        //         source: ICONS_BASE64['uf14a'],
+        //         height: 17,
+        //         width: 14,
+        //     }),
+        // ),
+        this.$(go.Panel, 'Vertical', {
             alignment: go.Spot.Left,
             alignmentFocus: new go.Spot(0, 0.5, 8, 0),
         }), this.$(go.Panel, 'Vertical', {
@@ -8813,11 +8854,11 @@ class AtoDefaultGojsEditor {
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 4,
             }, new go.Binding('text', 'name').makeTwoWay())),
-        }, new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('deletable', 'deletable'), this.$(go.Panel, 'Auto', { width: size.w, height: size.h }, 
+        }, new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('deletable', 'deletable'), new go.Binding('selectionAdorned', '', (x) => !x?.isNodeSelectionAdorned), new go.Binding('visible', 'visible'), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Auto', { width: size.w, height: size.h }, 
         // this.$(go.Shape, 'RoundedRectangle', {
         //     fill: 'white',
         //     stroke: AtoGojsEditorModel.ENUM_COLORS.LINK_WATER,
-        //     // strokeDashArray: [5, 5],
+        //     // s trokeDashArray: [5, 5],
         // }),
         // this.$(go.Placeholder, { padding: new go.Margin(0, 0, 0, 0), visible: false }),
         this.$(go.Panel, 'Auto', {
@@ -8827,7 +8868,7 @@ class AtoDefaultGojsEditor {
             fill: 'white',
             stroke: AtoGojsEditorModel.ENUM_COLORS.LINK_WATER,
             strokeDashArray: [5, 5],
-        }), this.$(go.Panel, 'Table', this.$(go.TextBlock, title, {
+        }, new go.Binding('fill', 'fill'), new go.Binding('stroke', 'stroke'), new go.Binding('strokeWidth', 'strokeWidth'), new go.Binding('strokeDashArray', 'strokeDashArray')), this.$(go.Panel, 'Table', this.$(go.TextBlock, title, {
             row: 0,
             margin: new go.Margin(3, 0, 10, 0),
             desiredSize: new go.Size(size.w - 20, 15),
@@ -8861,10 +8902,14 @@ class AtoDefaultGojsEditor {
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 4,
             }, new go.Binding('text', 'name').makeTwoWay())),
-        }, new go.Binding('text', 'name').makeTwoWay()))), this.$(go.Panel, 'Horizontal', {
-            height: 16,
-        }, new go.Binding('visible', '', (x) => x?.group_visible ?? false), this.$(go.TextBlock, '+Select Component', {
-            margin: new go.Margin(0, 2, 0, 0),
+        }, new go.Binding('text', 'name').makeTwoWay()))), this.$(go.TextBlock, '', {
+            alignment: go.Spot.TopLeft,
+            margin: new go.Margin(4, 0, 0, 4),
+            stroke: '#DC8FA9',
+            font: 'bold 9pt Arial',
+            textAlign: 'left',
+        }, new go.Binding('text', '', (x) => x?.group_text), new go.Binding('stroke', '', (x) => x?.group_text_stroke))), this.$(go.Panel, 'Horizontal', new go.Binding('visible', '', (x) => x?.isCanSelectComponent ?? false), this.$(go.TextBlock, '+Select Component', {
+            margin: new go.Margin(4, 0, 0, 0),
             stroke: '#3863A6',
             font: 'bold 9pt Arial',
             textAlign: 'left',
@@ -8889,14 +8934,19 @@ class AtoDefaultGojsEditor {
                 // self.showPoint(obj?.part?.location);
             },
             click: (e, obj) => {
+                const outputPayload = {
+                    left: e?.['Wr']?.x,
+                    top: e?.['Wr']?.y,
+                    node: node,
+                    component: obj?.data,
+                };
+                if (this.isSelectBox) {
+                    self.onClickCompoent.emit(outputPayload);
+                    return;
+                }
                 if (obj?.data?.onSelected) {
                     obj?.data?.onSelected(obj?.data);
-                    self.onClickCompoent.emit({
-                        left: e?.['Wr']?.x,
-                        top: e?.['Wr']?.y,
-                        node: node,
-                        component: obj?.data,
-                    });
+                    self.onClickCompoent.emit(outputPayload);
                 }
             },
             selectionChanged: (e) => {
@@ -8904,13 +8954,16 @@ class AtoDefaultGojsEditor {
                     e?.data?.onSelected(null);
                 }
             },
-            selectionAdornmentTemplate: this._initialOptions.isReadOnly
+            selectionAdornmentTemplate: this._initialOptions.isReadOnly || this.isSelectBox
                 ? null
                 : this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', this.$(go.Shape, {
                     fill: null,
                     stroke: 'dodgerblue',
                     strokeWidth: 4,
                 }), this.$(go.Placeholder, { padding: 3 }), new go.Binding('height', '', (x) => {
+                    if (x?.plantCellNameBelong) {
+                        return 130;
+                    }
                     if (x?.isSelectBox) {
                         return 124;
                     }
@@ -8924,24 +8977,30 @@ class AtoDefaultGojsEditor {
                     AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW,
                     AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE,
                 ]))),
+        }, new go.Binding('visible', 'visible'), new go.Binding('movable', 'movable'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('deletable', 'deletable'), new go.Binding('selectionAdorned', '', (x) => !self?.isSelectBox), new go.Binding('opacity', '', (x) => x?.opacity ?? 1), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Horizontal', {
+            alignment: go.Spot.Left,
+            margin: new go.Margin(0, 0, 0, 0),
+        }, this.$(go.TextBlock, {
+            font: 'bold 10pt Arial',
+            width: size.w,
+            overflow: go.TextBlock.OverflowEllipsis,
+            alignment: go.Spot.Center,
+            wrap: go.TextBlock.None,
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 4,
-            }, new go.Binding('text', 'name').makeTwoWay())),
-        }, new go.Binding('visible', 'visible'), new go.Binding('movable', 'movable'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('deletable', 'deletable'), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Horizontal', {
-            alignment: go.Spot.Left,
-            padding: new go.Margin(1, 1, 0, 1),
-            margin: new go.Margin(0, 0, 0, 4),
-            height: 14,
-        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false)), this.$(go.Panel, 'Auto', {
+            }, new go.Binding('text', 'plantCellNameBelong'))),
+        }, new go.Binding('text', 'plantCellNameBelong')), new go.Binding('visible', '', (x) => (x?.plantCellNameBelong ? true : false))), this.$(go.Panel, 'Auto', {
             width: size.w,
             height: size.h,
+            toolTip: this.$('ToolTip', this.$(go.TextBlock, {
+                margin: 4,
+            }, new go.Binding('text', 'name').makeTwoWay())),
         }, this.$(go.Shape, 'RoundedRectangle', {
             fill: 'white',
             stroke: AtoGojsEditorModel.ENUM_COLORS.LINK_WATER,
-            strokeWidth: 3,
         }, new go.Binding('fill', 'fill'), new go.Binding('stroke', '', (x) => {
             return x?.isSelectBox ? AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE : x?.stroke;
-        })), this.$(go.Panel, 'Table', 
+        }), new go.Binding('strokeWidth', 'strokeWidth')), this.$(go.Panel, 'Table', 
         // this.$(go.TextBlock, title, {
         //     row: 0,
         //     margin: new go.Margin(3, 3, 10, 3),
@@ -8978,7 +9037,13 @@ class AtoDefaultGojsEditor {
         //         }
         //     },
         // }),
-        this.$(go.TextBlock, '', {
+        this.$(go.Picture, {
+            alignment: go.Spot.TopRight,
+            margin: new go.Margin(0, 0, 0, 0),
+            source: ICONS_BASE64['uf14a'],
+            height: 14,
+            width: 14,
+        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false)), this.$(go.TextBlock, '', {
             alignment: go.Spot.TopLeft,
             margin: new go.Margin(2, 0, 0, 2),
             stroke: '#DC8FA9',
@@ -9005,18 +9070,7 @@ class AtoDefaultGojsEditor {
             alignmentFocus: new go.Spot(1, 0.5, -8, 0),
         }), 
         // four named ports, one on each side:
-        this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), this.makePort('L', go.Spot.Left, go.Spot.LeftSide, false, true), this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, false), this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false))), 
-        // Select box
-        this.$(go.Panel, 'Auto', {
-            alignment: go.Spot.TopRight,
-            alignmentFocus: go.Spot.TopRight,
-        }, new go.Binding('visible', '', (x) => x?.isSelectBox ?? false), this.$(go.Picture, {
-            alignment: go.Spot.Right,
-            margin: new go.Margin(2, 0, 0, 0),
-            source: ICONS_BASE64['uf14a'],
-            height: 17,
-            width: 14,
-        })));
+        this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), this.makePort('L', go.Spot.Left, go.Spot.LeftSide, false, true), this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, false), this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false))));
         this.myDiagram.nodeTemplateMap.set(title, node);
     }
     editTextGroupZone(e, button) {
@@ -9255,6 +9309,7 @@ class AtoDefaultGojsEditor {
             color: AtoGojsEditorModel.COLOR_COLLECTION_METHOD[AtoGojsEditorModel.DATA_COLLECTION_METHOD.MANUAL].color,
             group: fromnode?.ob?.group,
             value: 0,
+            parentTopologyId: this.topologyId,
         });
         const newnode = diagram.findNodeForData(nodedata);
         const linkdata = model.copyLinkData({});
@@ -9411,7 +9466,7 @@ class AtoDefaultGojsEditor {
                             }
                             case 'T':
                             case 'L': {
-                                panel.background = 'rgb(103,151,207)';
+                                panel.background = '#54bbba';
                                 break;
                             }
                             default: {
@@ -9448,14 +9503,16 @@ class AtoDefaultGojsEditor {
             switch (name) {
                 case 'B':
                 case 'R': {
-                    if (data?.systemType === AtoGojsEditorModel.WaterDischargeDestinations) {
+                    if (data?.type !== AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE &&
+                        data?.systemType === AtoGojsEditorModel.WaterDischargeDestinations) {
                         return false;
                     }
                     return !data?.isNotSelectOutput;
                 }
                 case 'T':
                 case 'L': {
-                    if (data?.systemType === AtoGojsEditorModel.WaterWithdrawSources) {
+                    if (data?.type !== AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE &&
+                        data?.systemType === AtoGojsEditorModel.WaterWithdrawSources) {
                         return false;
                     }
                     return !data?.isNotSelectInput;
@@ -10916,7 +10973,7 @@ class AtoDefaultGojsEditor {
     }
 }
 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", isSelectBox: "isSelectBox", 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 });
+AtoDefaultGojsEditor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoDefaultGojsEditor, inputs: { linkValidation: "linkValidation", topologyId: "topologyId", initialOptions: "initialOptions", editor: "editor", isShowNodeInfo: "isShowNodeInfo", isSelectBox: "isSelectBox", 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 [{ type: i0.ElementRef }]; }, propDecorators: { menuTrigger: [{
@@ -10924,6 +10981,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['menuTrigger']
             }], linkValidation: [{
                 type: Input
+            }], topologyId: [{
+                type: Input
             }], initialOptions: [{
                 type: Input
             }], editor: [{