@riil-frontend/component-topology 11.0.29 → 11.0.30

package/lib/core/editor/utils/edgeTypeStyleUtil.js

@@ -6,8 +6,11 @@ exports.isNodeAllEdges = isNodeAllEdges;
 exports.loopEdgesAndChildren = loopEdgesAndChildren;
 exports.setEdgesAndChildren = setEdgesAndChildren;
 exports.setEdgesType = setEdgesType;
+
 var _htElementUtils = require("../../../utils/htElementUtils");
+
 var ht = window.ht;
+
 function getEdgesBySelection(topo) {
   var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
     var nodeIds = nodes.map(function (node) {
@@ -21,13 +24,14 @@ function getEdgesBySelection(topo) {
     });
     return nodeIds;
   };
+
   var getSelectedEdges = function getSelectedEdges(gv) {
-    var selection = gv.getSelectionModel().getSelection().toArray();
-    // 选中的连线
+    var selection = gv.getSelectionModel().getSelection().toArray(); // 选中的连线
+
     var edges = selection.filter(function (element) {
       return element instanceof ht.Edge;
-    });
-    // 查询选中节点间的连线
+    }); // 查询选中节点间的连线
+
     var nodes = selection.filter(function (element) {
       return element instanceof ht.Node;
     });
@@ -46,6 +50,7 @@ function getEdgesBySelection(topo) {
     });
     return edges;
   };
+
   return getSelectedEdges(topo.getGraphView());
 }
 /**
@@ -54,9 +59,11 @@ function getEdgesBySelection(topo) {
  * @param {*} edges 
  * @param {*} operateEdgeFn 
  */
+
+
 function isNodeAllEdges(topo) {
-  var selection = topo.getSelectionModel().getSelection().toArray();
-  // 选中的连线
+  var selection = topo.getSelectionModel().getSelection().toArray(); // 选中的连线
+
   var edges = selection.filter(function (element) {
     return element instanceof ht.Edge;
   });
@@ -66,6 +73,7 @@ function isNodeAllEdges(topo) {
     var sourceNode = edge.getSource();
     var targetNode = edge.getTarget();
     var nodeLineList = (0, _htElementUtils.getEdgesBetweenNodes)(sourceNode, targetNode);
+
     var _loop = function _loop(i) {
       if (edges.filter(function (edge) {
         return nodeLineList[i]._id == edge._id;
@@ -74,23 +82,26 @@ function isNodeAllEdges(topo) {
         return 1; // break
       }
     };
+
     for (var i = 0; i < nodeLineList.length; i++) {
       if (_loop(i)) break;
     }
   });
   return inEdges;
 }
-
 /**
  * 遍历连线及子连线
  * @param {*} topo 
  * @param {*} edges 
  * @param {*} operateEdgeFn 
  */
+
+
 function loopEdgesAndChildren(topo, edges, operateEdgeFn) {
   var htTopo = topo.getHtTopo();
   edges.forEach(function (edge) {
     operateEdgeFn(edge);
+
     if (edge.isEdgeGroupAgent()) {
       // 连线组折叠时同时设置子连线
       var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
@@ -102,19 +113,19 @@ function loopEdgesAndChildren(topo, edges, operateEdgeFn) {
     }
   });
 }
-
 /**
  * 设置连线及子连线。带回退事务控制
  * @param {*} topo 
  * @param {*} edges 
  * @param {*} operateEdgeFn 
  */
+
+
 function setEdgesAndChildren(topo, edges, operateEdgeFn) {
   topo.historyManager.beginTransaction();
   loopEdgesAndChildren(topo, edges, operateEdgeFn);
   topo.historyManager.endTransaction();
 }
-
 /**
  * 批量设置连线线形
  * 
@@ -122,6 +133,8 @@ function setEdgesAndChildren(topo, edges, operateEdgeFn) {
  * @param {*} type 
  * @param {*} topo 
  */
+
+
 function setEdgesType(edges, type, topo) {
   var htTopo = topo.getHtTopo();
   setEdgesAndChildren(topo, edges, function (edge) {

package/lib/core/editor/utils/themeUtil.js

@@ -2,10 +2,14 @@
 
 exports.__esModule = true;
 exports["default"] = ThemeUtil;
+
 var _clusterUtil = require("../../../utils/clusterUtil");
+
 var _htElementUtils = require("../../../utils/htElementUtils");
+
 function ThemeUtil(props) {
   var topo = props.topo;
+
   function setElementsTheme(themeConfig) {
     var dm = topo.getHtTopo().getGraphView().dm();
     var elements = (0, _htElementUtils.getElements)(dm);
@@ -13,6 +17,7 @@ function ThemeUtil(props) {
       setElementTheme(element, themeConfig);
     });
   }
+
   function setElementTheme(element, themeConfig) {
     if ((0, _htElementUtils.isText)(element)) {
       element.s('text.color', themeConfig.text.color);
@@ -26,6 +31,7 @@ function ThemeUtil(props) {
       }
     } else if ((0, _htElementUtils.isEdge)(element)) {}
   }
+
   return {
     setElementsTheme: setElementsTheme,
     setElementTheme: setElementTheme

package/lib/core/event/topoEventListener.js

@@ -3,9 +3,11 @@
 exports.__esModule = true;
 exports.createTopoEventListener = createTopoEventListener;
 var n = 0;
+
 function createTopoEventListener(type, onMessage) {
   var eventListenerName = "topo_" + n++;
   var EE = window.EE;
+
   if (EE) {
     EE.on('topo', eventListenerName, function (data) {
       if (data.type === type) {
@@ -13,6 +15,7 @@ function createTopoEventListener(type, onMessage) {
       }
     });
   }
+
   return {
     eventListenerName: eventListenerName,
     close: function close() {

package/lib/core/hooks/ht/useHtDataPropertyChangeListener.js

@@ -1,23 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = useHtDataPropertyChangeListener;
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _react = require("react");
+
 function useHtDataPropertyChangeListener(props) {
   var topo = props.topo,
-    onChange = props.onChange;
+      onChange = props.onChange;
+
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-    graphLoaded = _topo$store$useModelS.graphLoaded,
-    graphLoaded2 = _topo$store$useModelS.graphLoaded2;
+      graphLoaded = _topo$store$useModelS.graphLoaded,
+      graphLoaded2 = _topo$store$useModelS.graphLoaded2;
+
   (0, _react.useEffect)(function () {
     var dm = topo.getDataModel();
     var inited = false;
+
     if (dm) {
       dm.addDataPropertyChangeListener(onChange);
       inited = true;
     }
+
     return function () {
       if (inited && dm) {
         dm.removeDataPropertyChangeListener(onChange);

package/lib/core/hooks/useAlarm.js

@@ -1,13 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = useAlarm;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = require("react");
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _useGraphAlarmDisplay = _interopRequireDefault(require("./useGraphAlarmDisplay"));
+
 var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
+
 /**
  * 
  * 
@@ -16,74 +23,87 @@ var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListen
 function useAlarm(options) {
   var topo = options.topo;
   var store = topo.store;
+
   var _topo$store$useModelS = topo.store.useModelState('displayConfig'),
-    alarmSwitch = _topo$store$useModelS.alarmSwitch,
-    alarmListDefaultOpen = _topo$store$useModelS.alarmListDefaultOpen;
+      alarmSwitch = _topo$store$useModelS.alarmSwitch,
+      alarmListDefaultOpen = _topo$store$useModelS.alarmListDefaultOpen;
+
   (0, _useGraphAlarmDisplay["default"])({
     topo: topo,
     alarmSwitch: alarmSwitch
   });
+
   var handleRiskData = function handleRiskData(receivedData) {
     var _risks, _topo$viewProps, _topo$viewProps2;
+
     // 非在活状态：
     // 已修复 recovered
     // 已关闭 closed
-
     var prevRisks = topo.store.getModelState('topoAlarm').risks;
+
     var isLiveRisk = function isLiveRisk(data) {
       return ['recovered', 'closed'].indexOf(data.status) === -1;
     };
+
     var hasCiPermission = function hasCiPermission(data) {
       var _data$resourceId;
+
       var ciId = (_data$resourceId = data.resourceId) !== null && _data$resourceId !== void 0 ? _data$resourceId : data.ciId;
       var ci = topo.dataModel.getDataById(ciId);
       return ci && ci.operation;
-    };
+    }; // 合并
+
 
-    // 合并
     var risks = prevRisks.map(function (risk) {
       var newRisk = receivedData.find(function (item) {
         return item.id === risk.id;
       });
       return newRisk || risk;
-    });
+    }); // 新的
 
-    // 新的
     var addRisks = receivedData.filter(function (risk) {
       return !prevRisks.find(function (item) {
         return item.id === risk.id;
       });
     }).filter(hasCiPermission);
-    (_risks = risks).push.apply(_risks, addRisks);
 
-    // 过滤掉无权限、非在活的
+    (_risks = risks).push.apply(_risks, addRisks); // 过滤掉无权限、非在活的
+
+
     risks = risks.filter(isLiveRisk).filter(hasCiPermission).sort(function (a, b) {
       return a.executeTime - b.executeTime;
     });
+
     _rlog["default"].debug('更新风险', {
       prevRisks: prevRisks,
       receivedData: receivedData,
       risks: risks
     });
+
     topo.store.getModelDispatchers('topoAlarm').update({
       risks: risks
     });
+
     if (alarmSwitch === false) {
       // 告警静默
       return;
     }
+
     if (addRisks.length && alarmListDefaultOpen) {
       topo.alarm.updateState({
         alarmPanelIsOpen: true
       });
     }
+
     if ((_topo$viewProps = topo.viewProps) !== null && _topo$viewProps !== void 0 && _topo$viewProps.onRisk) {
       topo.viewProps.onRisk(risks);
     }
+
     if ((_topo$viewProps2 = topo.viewProps) !== null && _topo$viewProps2 !== void 0 && _topo$viewProps2.onResourceEvent) {
       topo.viewProps.onResourceEvent(topo.alarm.getEvents());
     }
   };
+
   var handleRelateTopoAlarm = function handleRelateTopoAlarm(data) {
     var relateTopoAlarm = (0, _extends2["default"])({}, topo.store.getModelState('topoAlarm').relateTopoAlarm);
     data.forEach(function (item) {
@@ -92,17 +112,19 @@ function useAlarm(options) {
     topo.store.getModelDispatchers('topoAlarm').update({
       relateTopoAlarm: relateTopoAlarm
     });
+
     _rlog["default"].debug("\u5173\u8054\u62D3\u6251\u544A\u8B66\uFF1A\u6536\u5230 " + data.length, {
       received: data,
       all: relateTopoAlarm
     });
-  };
+  }; // 订阅消息
+
 
-  // 订阅消息
   (0, _useTopoEventListener["default"])({
     type: 'alarm',
     onMessage: function onMessage(data) {
       _rlog["default"].debug("Topoget--AlertMesage------------", topo, data);
+
       topo.alarm.handleAlarmEvent(data);
     }
   });

package/lib/core/hooks/useCanvasTheme.js

@@ -1,23 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = useCanvasTheme;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _useCanvasThemeConfig2 = _interopRequireDefault(require("./useCanvasThemeConfig"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function useCanvasTheme(props) {
   var topo = props.topo,
-    hideBackgroundColor = props.hideBackgroundColor;
-  // 拓扑图是否加载
+      hideBackgroundColor = props.hideBackgroundColor; // 拓扑图是否加载
+
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-    graphLoaded = _topo$store$useModelS.graphLoaded;
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
   var _useCanvasThemeConfig = (0, _useCanvasThemeConfig2["default"])({
-      topo: topo
-    }),
-    themeName = _useCanvasThemeConfig.themeName,
-    themeConfig = _useCanvasThemeConfig.themeConfig;
+    topo: topo
+  }),
+      themeName = _useCanvasThemeConfig.themeName,
+      themeConfig = _useCanvasThemeConfig.themeConfig;
+
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
   var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   (0, _react.useEffect)(function () {
@@ -34,8 +42,7 @@ function useCanvasTheme(props) {
     // 设置
     if (graphLoaded) {
       try {
-        topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
-        // topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage)
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasColor); // topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage)
       } catch (error) {
         console.error('切换主题失败', error);
       }

package/lib/core/hooks/useCanvasThemeConfig.js

@@ -1,10 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = void 0;
+
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var themeMap = [{
   name: 'white',
   label: '白色',
@@ -23,8 +27,7 @@ var themeMap = [{
     helpIcon: 'white',
     helpIconName: 'dark'
   }
-},
-// {
+}, // {
 //   name: 'yellow',
 //   label: '黄色',
 //   color: '#FFFDE6',
@@ -54,8 +57,10 @@ var themeMap = [{
   }
 }].reduce(function (map, item) {
   var _extends2;
+
   return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
 }, {});
+
 function useCanvasThemeConfig(props) {
   var topo = props.topo;
   var displayConfig = topo.store.useModelState('displayConfig');
@@ -66,5 +71,6 @@ function useCanvasThemeConfig(props) {
     themeConfig: themeConfig
   };
 }
+
 var _default = useCanvasThemeConfig;
 exports["default"] = _default;

package/lib/core/hooks/useCiAttributeChange.js

@@ -1,33 +1,42 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = useCiAttributeChange;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _CiCache = _interopRequireDefault(require("../models/cache/CiCache"));
+
 var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
+
 function mergeData(cis, ciChangeData) {
   if (!cis.find(function (item) {
     return item.id === ciChangeData.id || item.ciId === ciChangeData.id;
   })) {
     return cis;
   }
+
   return cis.map(function (ci) {
     if (ci.id === ciChangeData.id) {
       return (0, _extends2["default"])({}, ci, {
         attributes: (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes)
       });
     }
+
     return ci;
   });
 }
-
 /**
  * 监听ci属性变更
  * 
  * @param {*} props 
  */
+
+
 function useCiAttributeChange(props) {
   var topo = props.topo;
   (0, _useTopoEventListener["default"])({
@@ -35,6 +44,7 @@ function useCiAttributeChange(props) {
     onMessage: function onMessage(ciChangeData) {
       // 更新拓扑数据
       var topoData = topo.store.getModelState('topoMod').data;
+
       if (topoData) {
         var newData = (0, _extends2["default"])({}, topoData, {
           nodes: mergeData(topoData.nodes, ciChangeData),
@@ -45,10 +55,11 @@ function useCiAttributeChange(props) {
         topoDispatchers.update({
           data: newData
         });
-      }
+      } // 更新缓存
+
 
-      // 更新缓存
       var ci = _CiCache["default"].getCi(ciChangeData.id);
+
       if (ci) {
         ci.attributes = (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes);
       }

package/lib/core/hooks/useEventData.js

@@ -1,15 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = useEventData;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 function useEventData(props) {
   var topo = props.topo;
   var topoDatas = topo.dataModel.useDatas();
+
   var _topo$store$useModelS = topo.store.useModelState('topoAlarm'),
-    risks = _topo$store$useModelS.risks,
-    alarmData = _topo$store$useModelS.alarmData;
+      risks = _topo$store$useModelS.risks,
+      alarmData = _topo$store$useModelS.alarmData;
+
   var data = [].concat((alarmData || []).map(function (item) {
     return (0, _extends2["default"])({}, item, {
       eventType: 'alarm'

package/lib/core/hooks/useGraphAlarmDisplay.js

@@ -1,26 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = useGraphAlarmDisplay;
+
 var _react = require("react");
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _htElementUtils = require("../../utils/htElementUtils");
+
 var _showGraphManageStatusUtil = require("../utils/showGraphManageStatusUtil");
+
 function getCiAlarmLevels(alarmList, risks) {
   var ciIdLevelMap = {};
   [].concat(alarmList, risks.map(function (item) {
     var _item$resourceId;
+
     return {
       id: (_item$resourceId = item.resourceId) !== null && _item$resourceId !== void 0 ? _item$resourceId : item.ciId,
       level: 5
     };
   })).forEach(function (item) {
-    var level = ciIdLevelMap[item.id];
-    // 优先显示高等级告警。值小的等级高
+    var level = ciIdLevelMap[item.id]; // 优先显示高等级告警。值小的等级高
+
     if (!level || item.level < level) {
       level = item.level;
     }
+
     ciIdLevelMap[item.id] = level;
   });
   return Object.keys(ciIdLevelMap).map(function (id) {
@@ -35,30 +43,38 @@ function getCiAlarmLevels(alarmList, risks) {
  * 
  * @param {*} options 
  */
+
+
 function useGraphAlarmDisplay(options) {
   var topo = options.topo,
-    alarmSwitch = options.alarmSwitch;
+      alarmSwitch = options.alarmSwitch;
   var store = topo.store;
   var topoState = topo.store.useModelState('topoMod');
   var graphLoaded = topoState.graphLoaded,
-    viewState = topoState.viewState;
+      viewState = topoState.viewState;
   var isEditMode = viewState === 'edit';
+
   var _topo$alarm$useState = topo.alarm.useState(),
-    alarmList = _topo$alarm$useState.alarmList,
-    risks = _topo$alarm$useState.risks,
-    relateTopoAlarm = _topo$alarm$useState.relateTopoAlarm;
+      alarmList = _topo$alarm$useState.alarmList,
+      risks = _topo$alarm$useState.risks,
+      relateTopoAlarm = _topo$alarm$useState.relateTopoAlarm;
+
   var resources = topo.dataModel.useCis();
+
   function getCisEventLevel() {
     return getCiAlarmLevels(alarmList || [], risks).filter(function (alarm) {
       var resource = resources.find(function (item) {
         return item.id === alarm.id;
       });
+
       if (!resource) {
         return false;
       }
+
       return true;
     });
   }
+
   (0, _react.useEffect)(function () {
     showAlarm();
     (0, _showGraphManageStatusUtil.showManageStatus)({
@@ -69,22 +85,25 @@ function useGraphAlarmDisplay(options) {
       // 有告警且未监控时，此时开启告警静默，应当显示未监控图标
       cisEventLevel: alarmSwitch === false ? [] : getCisEventLevel()
     });
+
     function showAlarm() {
       if (!graphLoaded) {
         return;
       }
+
       if (alarmSwitch === false) {
         // 告警静默
         topo.view.loadAlarm([]);
         return;
       }
-      var finalAlarms = getCisEventLevel();
 
-      // 将告警级别放入ht元素，便于测试
+      var finalAlarms = getCisEventLevel(); // 将告警级别放入ht元素，便于测试
+
       (0, _htElementUtils.getElements)(topo.getDataModel()).filter(function (item) {
         return !!item.getTag();
       }).forEach(function (element) {
         var _finalAlarms$find;
+
         var alarmLevel = (_finalAlarms$find = finalAlarms.find(function (item) {
           return item.id === element.getTag();
         })) === null || _finalAlarms$find === void 0 ? void 0 : _finalAlarms$find.level;
@@ -95,9 +114,11 @@ function useGraphAlarmDisplay(options) {
         var relateTopoNode = topo.getDataModel().getDatas().toArray().find(function (node) {
           return "" + node.a('bindTopo') === "" + topoId;
         });
+
         if (!level || !relateTopoNode) {
           return null;
         }
+
         return {
           elementId: relateTopoNode.getId(),
           level: level
@@ -105,14 +126,16 @@ function useGraphAlarmDisplay(options) {
       }).filter(function (item) {
         return !!item;
       });
+
       _rlog["default"].debug('关联拓扑告警：推送ht', {
         all: relateTopoAlarm,
         relateTopoAlarms: relateTopoAlarms
-      });
+      }); // 更新到ht拓扑
+
 
-      // 更新到ht拓扑
       topo.view.loadAlarm([].concat(finalAlarms, relateTopoAlarms));
     }
+
     return function () {
       (0, _showGraphManageStatusUtil.removeManageStatus)({
         topo: topo,

package/lib/core/hooks/useGroupAddResource.js

@@ -2,16 +2,21 @@
 
 exports.__esModule = true;
 exports["default"] = _default;
+
 var _react = require("react");
+
 function _default(props) {
   var _useState = (0, _react.useState)(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
+
   var groupRef = (0, _react.useRef)();
+
   function open(group) {
     groupRef.current = group;
     setVisible(true);
   }
+
   return {
     visible: visible,
     groupRef: groupRef,