ato-water-lib 0.0.138 → 0.0.139

package/fesm2015/ato-water-lib.mjs

@@ -7051,6 +7051,7 @@ class AtoDefaultGojsEditor {
                         : null;
                 }
             },
+            selectionAdorned: false,
             selectionAdornmentTemplate: this._initialOptions.isReadOnly || this.isSelectBox
                 ? null
                 : this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', 
@@ -7086,7 +7087,7 @@ class AtoDefaultGojsEditor {
                         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('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 === null || self === void 0 ? void 0 : self.isSelectBox)), new go.Binding('opacity', '', (x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.opacity) !== null && _a !== void 0 ? _a : 1; }), 
         // new go.Binding('alignment', 'alignment', function(loc) {
         //     return new go.Spot(0, 0, loc.x, 0);
         // }).ofObject(),
@@ -7107,7 +7108,7 @@ class AtoDefaultGojsEditor {
             source: ICONS_BASE64['uf2f6_output'],
             height: 14,
             width: 14,
-        }, new go.Binding('source', '', (x) => ICONS_BASE64[x === null || x === void 0 ? void 0 : x.group_source_icon])), new go.Binding('visible', '', (x) => { var _a; return (_a = ((x === null || x === void 0 ? void 0 : x.group_visible) || (x === null || x === void 0 ? void 0 : x.isSelectBox))) !== null && _a !== void 0 ? _a : false; })), this.$(go.Panel, 'Auto', {
+        }, new go.Binding('source', '', (x) => ICONS_BASE64[x === null || x === void 0 ? void 0 : x.group_source_icon])), new go.Binding('visible', '', (x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.group_visible) !== null && _a !== void 0 ? _a : false; })), this.$(go.Panel, 'Auto', {
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 2,
             }, new go.Binding('text', '', function (data) {
@@ -7133,10 +7134,19 @@ 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 === null || x === void 0 ? void 0 : x.isSelectBox) ? AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE : x === null || x === void 0 ? void 0 : x.stroke;
+            var _a;
+            if (x === null || x === void 0 ? void 0 : x.isSelectBox) {
+                return AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE;
+            }
+            return (_a = x === null || x === void 0 ? void 0 : x.stroke) !== null && _a !== void 0 ? _a : AtoGojsEditorModel.ENUM_COLORS.LINK_WATER;
         }), new go.Binding('strokeWidth', '', (x) => {
-            return (x === null || x === void 0 ? void 0 : x.isSelectBox) ? 3 : x === null || x === void 0 ? void 0 : x.strokeWidth;
+            var _a;
+            if (x === null || x === void 0 ? void 0 : x.isSelectBox) {
+                return 3;
+            }
+            return (_a = x === null || x === void 0 ? void 0 : x.strokeWidth) !== null && _a !== void 0 ? _a : 1;
         })), this.$(go.Panel, 'Vertical', this.$(go.Panel, 'Horizontal', { alignment: go.Spot.Center }, 
         // Alert
         this.$(go.Panel, 'Auto', {
@@ -7203,25 +7213,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) => { var _a; return (_a = ((x === null || x === void 0 ? void 0 : x.group_visible) || (x === null || x === void 0 ? void 0 : x.isSelectBox))) !== null && _a !== void 0 ? _a : false; }))), this.$(go.Panel, 'Auto', {
+        this.$(go.Picture, {
             alignment: go.Spot.TopRight,
-            alignmentFocus: go.Spot.TopRight,
-        }, new go.Binding('visible', '', (x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : 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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : 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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.group_visible) !== null && _a !== void 0 ? _a : false; }))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE, node);
     }
     arrowForPlantCell(size, flowDirection) {
@@ -7393,7 +7393,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 === null || x === void 0 ? void 0 : x.plantCellNameBelong) {
+                        return 130;
+                    }
+                    return null;
+                })), this.$(go.Panel, 'Horizontal', {
                     alignment: go.Spot.TopRight,
                     alignmentFocus: go.Spot.Bottom,
                     background: 'white',
@@ -7421,28 +7426,43 @@ 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 === null || self === void 0 ? void 0 : self.isSelectBox)), new go.Binding('opacity', '', (x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.opacity) !== null && _a !== void 0 ? _a : 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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : 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 === null || x === void 0 ? void 0 : 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 === null || x === void 0 ? void 0 : x.isSelectBox) ? AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE : x === null || x === void 0 ? void 0 : x.stroke;
+            var _a;
+            if (x === null || x === void 0 ? void 0 : x.isSelectBox) {
+                return AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE;
+            }
+            return (_a = x === null || x === void 0 ? void 0 : x.stroke) !== null && _a !== void 0 ? _a : AtoGojsEditorModel.ENUM_COLORS.LINK_WATER;
         }), new go.Binding('strokeWidth', '', (x) => {
-            return (x === null || x === void 0 ? void 0 : x.isSelectBox) ? 3 : x === null || x === void 0 ? void 0 : x.strokeWidth;
+            var _a;
+            if (x === null || x === void 0 ? void 0 : x.isSelectBox) {
+                return 3;
+            }
+            return (_a = x === null || x === void 0 ? void 0 : x.strokeWidth) !== null && _a !== void 0 ? _a : 1;
         })), this.$(go.Panel, 'Table', this.$(go.Picture, icon, {
             row: 1,
             alignment: go.Spot.Center,
@@ -7472,18 +7492,37 @@ class AtoDefaultGojsEditor {
             return !(((_a = AtoGojsEditorModel.TYPE_COMPONENT_WATER) === null || _a === void 0 ? void 0 : _a.includes(data === null || data === void 0 ? void 0 : data.systemType)) &&
                 (data === null || data === void 0 ? void 0 : data.topologyType) !== ATO_ECOMPONENT_PLANT_TYPE.WATER &&
                 (data === null || data === void 0 ? void 0 : 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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : 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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : 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 === null || x === void 0 ? void 0 : x.group_text), new go.Binding('stroke', '', (x) => x === null || x === void 0 ? void 0 : 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', {
@@ -7627,7 +7666,6 @@ class AtoDefaultGojsEditor {
             },
             click: (e, obj) => {
                 var _a, _b, _c, _d;
-                console.log('TEST');
                 if ((_a = obj === null || obj === void 0 ? void 0 : obj.data) === null || _a === void 0 ? void 0 : _a.onSelected) {
                     (_b = obj === null || obj === void 0 ? void 0 : obj.data) === null || _b === void 0 ? void 0 : _b.onSelected(obj === null || obj === void 0 ? void 0 : obj.data);
                     self.onClickCompoent.emit({
@@ -7681,11 +7719,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 === null || x === void 0 ? void 0 : 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', {
@@ -7695,7 +7733,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),
@@ -7728,10 +7766,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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.group_visible) !== null && _a !== void 0 ? _a : 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 === null || x === void 0 ? void 0 : x.group_text), new go.Binding('stroke', '', (x) => x === null || x === void 0 ? void 0 : x.group_text_stroke))), this.$(go.Panel, 'Horizontal', new go.Binding('visible', '', (x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isCanSelectComponent) !== null && _a !== void 0 ? _a : false; }), this.$(go.TextBlock, '+Select Component', {
+            margin: new go.Margin(4, 0, 0, 0),
             stroke: '#3863A6',
             font: 'bold 9pt Arial',
             textAlign: 'left',
@@ -7785,6 +7827,9 @@ class AtoDefaultGojsEditor {
                     stroke: 'dodgerblue',
                     strokeWidth: 4,
                 }), this.$(go.Placeholder, { padding: 3 }), new go.Binding('height', '', (x) => {
+                    if (x === null || x === void 0 ? void 0 : x.plantCellNameBelong) {
+                        return 130;
+                    }
                     if (x === null || x === void 0 ? void 0 : x.isSelectBox) {
                         return 124;
                     }
@@ -7798,24 +7843,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 === null || self === void 0 ? void 0 : self.isSelectBox)), new go.Binding('opacity', '', (x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.opacity) !== null && _a !== void 0 ? _a : 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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : false; })), this.$(go.Panel, 'Auto', {
+            }, new go.Binding('text', 'plantCellNameBelong'))),
+        }, new go.Binding('text', 'plantCellNameBelong')), new go.Binding('visible', '', (x) => ((x === null || x === void 0 ? void 0 : 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 === null || x === void 0 ? void 0 : x.isSelectBox) ? AtoGojsEditorModel.ENUM_COLORS.TORY_BLUE : x === null || x === void 0 ? void 0 : 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),
@@ -7852,7 +7903,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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : false; })), this.$(go.TextBlock, '', {
             alignment: go.Spot.TopLeft,
             margin: new go.Margin(2, 0, 0, 2),
             stroke: '#DC8FA9',
@@ -7879,18 +7936,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) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.isSelectBox) !== null && _a !== void 0 ? _a : 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) {
@@ -8109,7 +8155,7 @@ class AtoDefaultGojsEditor {
             const diagram = fromnode.diagram;
             const model = diagram.model;
             const nodedata = Object.assign(Object.assign({}, model.copyNodeData(dragData)), { key: UtilsService.generateUUID() });
-            model.addNodeData(Object.assign(Object.assign({}, nodedata), { isEditable: true, shortenedNumber: 0, isFormat: false, dataCollectionMethod: AtoGojsEditorModel.DATA_COLLECTION_METHOD.MANUAL, color: AtoGojsEditorModel.COLOR_COLLECTION_METHOD[AtoGojsEditorModel.DATA_COLLECTION_METHOD.MANUAL].color, group: (_a = fromnode === null || fromnode === void 0 ? void 0 : fromnode.ob) === null || _a === void 0 ? void 0 : _a.group, value: 0 }));
+            model.addNodeData(Object.assign(Object.assign({}, nodedata), { isEditable: true, shortenedNumber: 0, isFormat: false, dataCollectionMethod: AtoGojsEditorModel.DATA_COLLECTION_METHOD.MANUAL, color: AtoGojsEditorModel.COLOR_COLLECTION_METHOD[AtoGojsEditorModel.DATA_COLLECTION_METHOD.MANUAL].color, group: (_a = fromnode === null || fromnode === void 0 ? void 0 : fromnode.ob) === null || _a === void 0 ? void 0 : _a.group, value: 0, parentTopologyId: this.topologyId }));
             const newnode = diagram.findNodeForData(nodedata);
             const linkdata = model.copyLinkData({});
             model.setFromKeyForLinkData(linkdata, model.getKeyForNodeData(fromnode.data));
@@ -9790,7 +9836,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: [{
@@ -9798,6 +9844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['menuTrigger']
             }], linkValidation: [{
                 type: Input
+            }], topologyId: [{
+                type: Input
             }], initialOptions: [{
                 type: Input
             }], editor: [{