@riil-frontend/component-topology 9.0.0-a.28 → 9.0.0-a.30

package/es/core/components/TopoView/GraphViewPanel.js

@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import useCanvasTheme from "../../hooks/useCanvasTheme";
+import useTopoFullscreen from "../../hooks/useTopoFullscreen";
 import styles from "./TopoView.module.scss";
 export default function GraphViewPanel(props) {
   var _classNames;
@@ -18,6 +19,11 @@ export default function GraphViewPanel(props) {
       canvasColor = _useCanvasTheme.canvasColor,
       canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
+  var panelRef = useRef();
+  useTopoFullscreen({
+    topo: topo,
+    panelRef: panelRef
+  });
   useEffect(function () {
     // eslint-disable-next-line no-underscore-dangle
     window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
@@ -33,6 +39,7 @@ export default function GraphViewPanel(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
     className: classNames(styles.viewPanel, (_classNames = {}, _classNames[styles.backgroundImg] = !!canvasbackgroundImage, _classNames)),
     style: canvasColor ? {
       background: canvasColor

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js

@@ -15,7 +15,7 @@ export function getTextStyle(element) {
     color: parseColor(element.s('group.title.color')),
     underline: underline
   }, fontStyleUtil.toMap(element.s('group.title.font')), {
-    fontSize: font.fontSize || 24,
+    fontSize: font.fontSize || (isClusterHtElement(element) ? 20 : 24),
     fontFamily: font.fontFamily || '微软雅黑'
   }, parseBackground(element.s('group.title.background')));
 }

package/es/core/hooks/useTopoFullscreen.js

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+export default function useTopoFullscreen(props) {
+  var topo = props.topo,
+      panelRef = props.panelRef;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded,
+      graphLoaded2 = topoModState.graphLoaded2,
+      topoData = topoModState.data;
+  useEffect(function () {
+    var htTopo = topo.getHtTopo();
+
+    if ((graphLoaded || graphLoaded2) && topoData && htTopo.setFullScreenFunc) {
+      htTopo.setFullScreenFunc(function () {
+        panelRef.current.requestFullscreen();
+      });
+    }
+  }, [topoData, graphLoaded, graphLoaded2]); // 监听退出全屏
+
+  var panelDom = panelRef.current;
+  useEffect(function () {
+    panelDom === null || panelDom === void 0 ? void 0 : panelDom.addEventListener('fullscreenchange', handleFullscreenChange); // 监听退出全屏
+
+    function handleFullscreenChange() {
+      var htTopo = topo.getHtTopo();
+      htTopo.setToolsVisible(!document.fullscreenElement);
+    }
+
+    return function () {
+      panelDom === null || panelDom === void 0 ? void 0 : panelDom.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [panelDom]);
+}

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "9.0.0-a.28" === 'string' ? "9.0.0-a.28" : null;
+var version = typeof "9.0.0-a.30" === 'string' ? "9.0.0-a.30" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/components/TopoView/GraphViewPanel.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _useCanvasTheme2 = _interopRequireDefault(require("../../hooks/useCanvasTheme"));
 
+var _useTopoFullscreen = _interopRequireDefault(require("../../hooks/useTopoFullscreen"));
+
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
 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); }
@@ -33,6 +35,11 @@ function GraphViewPanel(props) {
       canvasColor = _useCanvasTheme.canvasColor,
       canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
+  var panelRef = (0, _react.useRef)();
+  (0, _useTopoFullscreen["default"])({
+    topo: topo,
+    panelRef: panelRef
+  });
   (0, _react.useEffect)(function () {
     // eslint-disable-next-line no-underscore-dangle
     window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
@@ -48,6 +55,7 @@ function GraphViewPanel(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: panelRef,
     className: (0, _classnames["default"])(_TopoViewModule["default"].viewPanel, (_classNames = {}, _classNames[_TopoViewModule["default"].backgroundImg] = !!canvasbackgroundImage, _classNames)),
     style: canvasColor ? {
       background: canvasColor

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js

@@ -33,7 +33,7 @@ function getTextStyle(element) {
     color: (0, _colorUtil.parseColor)(element.s('group.title.color')),
     underline: underline
   }, _fontStyleUtil["default"].toMap(element.s('group.title.font')), {
-    fontSize: font.fontSize || 24,
+    fontSize: font.fontSize || ((0, _clusterUtil.isClusterHtElement)(element) ? 20 : 24),
     fontFamily: font.fontFamily || '微软雅黑'
   }, (0, _colorUtil.parseBackground)(element.s('group.title.background')));
 }

package/lib/core/hooks/useTopoFullscreen.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useTopoFullscreen;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 useTopoFullscreen(props) {
+  var topo = props.topo,
+      panelRef = props.panelRef;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded,
+      graphLoaded2 = topoModState.graphLoaded2,
+      topoData = topoModState.data;
+  (0, _react.useEffect)(function () {
+    var htTopo = topo.getHtTopo();
+
+    if ((graphLoaded || graphLoaded2) && topoData && htTopo.setFullScreenFunc) {
+      htTopo.setFullScreenFunc(function () {
+        panelRef.current.requestFullscreen();
+      });
+    }
+  }, [topoData, graphLoaded, graphLoaded2]); // 监听退出全屏
+
+  var panelDom = panelRef.current;
+  (0, _react.useEffect)(function () {
+    panelDom === null || panelDom === void 0 ? void 0 : panelDom.addEventListener('fullscreenchange', handleFullscreenChange); // 监听退出全屏
+
+    function handleFullscreenChange() {
+      var htTopo = topo.getHtTopo();
+      htTopo.setToolsVisible(!document.fullscreenElement);
+    }
+
+    return function () {
+      panelDom === null || panelDom === void 0 ? void 0 : panelDom.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [panelDom]);
+}

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "9.0.0-a.28" === 'string' ? "9.0.0-a.28" : null;
+var version = typeof "9.0.0-a.30" === 'string' ? "9.0.0-a.30" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "9.0.0-a.28",
+  "version": "9.0.0-a.30",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.28/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.30/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }