@riil-frontend/component-topology 6.0.0-alpha.53 → 6.0.0-alpha.54

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

@@ -59,6 +59,7 @@ var Topology = function Topology(props) {
 
   var topoId = topoState.topoId,
       viewState = topoState.viewState,
+      graphLoaded = topoState.graphLoaded,
       topoData = topoState.topoData,
       urlParams = topoState.urlParams;
   var isEditMode = viewState === 'edit';
@@ -285,7 +286,7 @@ var Topology = function Topology(props) {
       urlParams: urlParams
     },
     editorProps: editorProps
-  }), renderCanvas(), isEditMode && /*#__PURE__*/React.createElement(PropertyView, {
+  }), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/React.createElement(PropertyView, {
     topo: topo,
     editorProps: editorProps
   })), !isEditMode && /*#__PURE__*/React.createElement(ViewerPlugin, {

package/es/core/editor/components/settings/PropertyView.js

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { useEffect, useMemo } from 'react';
 import CloseablePanel from "./CloseablePanel";
+import { adapterGetEdgePropertyViewType, addEdgePropertyViews } from "./core/edgePropertyViewAdapter";
 import PropertyViewManager from "./core/PropertyViewManager";
 import Settings from "./Settings";
 import styles from "./Settings.module.scss";
@@ -24,7 +25,15 @@ export default function PropertyPanel(props) {
   var propertyPanelVisible = topoEditState.propertyPanelVisible;
   var propertyViewManager = useMemo(function () {
     return new PropertyViewManager(topo);
-  }, []);
+  }, []); // 临时适配连线属性面板类型，后期组件支持自定义适配
+
+  addEdgePropertyViews(propertyViewManager, editorProps);
+
+  propertyViewManager.customGetViewType = editorProps.getPropertyViewType || function (elements) {
+    return adapterGetEdgePropertyViewType(elements, editorProps);
+  };
+
+  var PropertyView = propertyViewManager.getPropertyView();
   useEffect(function () {
     if (graphLoaded) {
       propertyViewManager.init();
@@ -33,17 +42,23 @@ export default function PropertyPanel(props) {
     return function () {
       propertyViewManager.destroy();
     };
-  }, [graphLoaded, propertyViewManager]);
+  }, [graphLoaded, propertyViewManager]); // 没有视图关闭属性面板
+
+  useEffect(function () {
+    if (propertyPanelVisible && !PropertyView) {
+      propertyViewManager.close();
+    }
+  }, [propertyPanelVisible, PropertyView, propertyViewManager]);
 
   var renderContent = function renderContent() {
-    if (!propertyPanelVisible) {
+    if (!PropertyView) {
       return null;
     }
 
     return /*#__PURE__*/React.createElement(Settings, {
       topo: topo,
       selection: selection,
-      propertyViewManager: propertyViewManager,
+      PropertyView: PropertyView,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
       editorProps: editorProps

package/es/core/editor/components/settings/Settings.js

@@ -21,26 +21,15 @@ export default function PropertyViewContainer(props) {
       topoEditApi = props.topoEditApi,
       selection = props.selection,
       editorProps = props.editorProps,
-      propertyViewManager = props.propertyViewManager;
+      PropertyView = props.PropertyView;
   var settingRuntimeState = useSettingRuntimeState();
   var selectionElements = useMemo(function () {
     return topo.selectionModel.getSelection();
-  }, [selection]);
-  var PropertyView = propertyViewManager.getPropertyView(selection); // 不建议使用，直接使用ht元素对象。待优化
+  }, [selection]); // 不建议使用，直接使用ht元素对象。待优化
 
   var singleElementValues = useMemo(function () {
     return selection.length === 1 ? buildElementValues(selection) : undefined;
   }, [selection]);
-  useEffect(function () {
-    if (!PropertyView) {
-      propertyViewManager.close();
-    }
-  }, [PropertyView, propertyViewManager]);
-
-  if (!PropertyView) {
-    return null;
-  }
-
   var elementProps = {};
 
   if (selection.length === 1) {

package/es/core/editor/components/settings/core/PropertyViewManager.js

@@ -1,11 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import propertyViews from "../propertyViews";
-import getPropertyViewType from "./getPropertyViewType";
+import _getPropertyViewType from "./getPropertyViewType";
 
 var PropertyViewManager = /*#__PURE__*/function () {
   function PropertyViewManager(topo) {
     this.viewMap = propertyViews;
     this.topo = void 0;
-    this.getPropertyViewType = getPropertyViewType;
+    this.customGetViewType = void 0;
     this.topo = topo;
     this.open = this.open.bind(this);
   }
@@ -13,7 +14,7 @@ var PropertyViewManager = /*#__PURE__*/function () {
   var _proto = PropertyViewManager.prototype;
 
   _proto.updateViews = function updateViews(viewMap) {
-    Object.assign(this.viewMap, viewMap);
+    this.viewMap = _extends({}, propertyViews, viewMap);
   };
 
   _proto.init = function init() {
@@ -53,15 +54,27 @@ var PropertyViewManager = /*#__PURE__*/function () {
     });
   };
 
-  _proto.getPropertyView = function
-    /* selection */
-  getPropertyView() {
-    var selection = this.topo.selectionModel.getSelection();
-    var elementType = getPropertyViewType(selection);
+  _proto.getPropertyView = function getPropertyView() {
+    var elementType = this.getPropertyViewType();
     var PropertyView = this.viewMap[elementType];
     return PropertyView;
   };
 
+  _proto.getPropertyViewType = function getPropertyViewType() {
+    var selection = this.topo.selectionModel.getSelection();
+    var type;
+
+    if (this.customGetViewType) {
+      type = this.customGetViewType(selection);
+
+      if (type) {
+        return type;
+      }
+    }
+
+    return _getPropertyViewType(selection);
+  };
+
   return PropertyViewManager;
 }();
 

package/es/core/editor/components/settings/core/edgePropertyViewAdapter.js

@@ -0,0 +1,22 @@
+import { isEdge } from "../../../../../utils/htElementUtils";
+import addEdgeProps from "../propertyViews/edge/addEdgeProps";
+export function adapterGetEdgePropertyViewType(selection, editorProps) {
+  var fn = editorProps.getEdgePropertyViewType;
+
+  if (selection.length === 1 && isEdge(selection[0]) && fn) {
+    var type = fn({
+      edge: selection[0]
+    });
+    return type;
+  }
+
+  return null;
+}
+export function addEdgePropertyViews(propertyViewManager, editorProps) {
+  var oldMap = editorProps.edgePropertyViews || {};
+  var map = {};
+  Object.keys(oldMap).forEach(function (name) {
+    map[name] = addEdgeProps(oldMap[name]);
+  });
+  propertyViewManager.updateViews(map);
+}

package/es/core/editor/components/settings/propertyViews/index.js

@@ -1,17 +1,13 @@
 import NodePropertyView from "./node/NodePropertyView";
 import LayerPropertyView from "./layer/LayerPropertyView";
 import TextPropertyView from "./text/TextPropertyView";
-import ViewPropertyView from "./view/ViewPropertyView";
 import GroupPropertyView from "./group/GroupPropertyView";
-import MultipleElementPropertyView from "./multipleElements/MultipleElementPropertyView";
-import EdgePropertyView from "./edge/EdgePropertyView";
 import BoxPropertyView from "./box/BoxPropertyView";
-import EdgeGroupPropertyView from "./edge/EdgeGroupPropertyView";
 var propertyPanelMap = {
   // view: ViewPropertyView,
   group: GroupPropertyView,
   node: NodePropertyView,
-  edge: EdgePropertyView,
+  // edge: EdgePropertyView,
   // edgeGroup: EdgeGroupPropertyView,
   layer: LayerPropertyView,
   text: TextPropertyView,

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.53" === 'string' ? "6.0.0-alpha.53" : null;
+var version = typeof "6.0.0-alpha.54" === 'string' ? "6.0.0-alpha.54" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/networkTopo/components/editor/propertyViews/edge/EdgeGroupPropertyView.js

@@ -2,7 +2,8 @@ import _Tab from "@alifd/next/es/tab";
 import React, { useState, useEffect } from 'react';
 import TabView from "../../../../../core/editor/components/settings/common/tab/TabView";
 import EdgeGroupSetting from "../../../../../core/editor/components/settings/propertyViews/edge/edgeGroup/EdgeGroupSetting";
-import LindInfoPreview from "./link/LinkInfoPreview";
+import LindInfoPreview from "./link/LinkInfoPreview"; // V1.2 废弃
+
 export default function EdgeGroupPropertyView(props) {
   var topo = props.topo,
       edge = props.edge,

package/es/networkTopo/components/editor/useEditorProps.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _useGroupSortResources from "../../hooks/editor/useGroupSortResources";
 import LayerConfigPlugin from "./plugins/LayerConfigPlugin";
 import AddLinkDrawer from "./propertyViews/edge/addLinkDrawer/AddLinkDrawer";
-import EdgeGroupPropertyView from "./propertyViews/edge/EdgeGroupPropertyView";
 import EdgePropertyView from "./propertyViews/edge/EdgePropertyView";
 import LinkPropertyView from "./propertyViews/edge/LinkPropertyView";
 import LayerRelatedResourceList from "./propertyViews/LayerRelatedResourceList";
@@ -20,8 +19,7 @@ export default function useEditorProps(props) {
     // 连线属性面板
     edgePropertyViews: {
       edge: EdgePropertyView,
-      link: LinkPropertyView,
-      edgeGroup: EdgeGroupPropertyView
+      link: LinkPropertyView
     },
     getEdgePropertyViewType: function getEdgePropertyViewType(_ref) {
       var edge = _ref.edge;

package/es/style.js

@@ -38,8 +38,8 @@ import '@alifd/next/es/menu/style';
 import '@alifd/next/es/collapse/style';
 import '@alifd/next/es/select/style';
 import '@alifd/next/es/number-picker/style';
-import '@alifd/next/es/tag/style';
 
+import '@alifd/next/es/tag/style';
 import '@riil-frontend/component-riil-event-emitter/es/style';
 import '@alifd/next/es/range/style';
 import './index.scss';

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

@@ -96,6 +96,7 @@ var Topology = function Topology(props) {
 
   var topoId = topoState.topoId,
       viewState = topoState.viewState,
+      graphLoaded = topoState.graphLoaded,
       topoData = topoState.topoData,
       urlParams = topoState.urlParams;
   var isEditMode = viewState === 'edit';
@@ -330,7 +331,7 @@ var Topology = function Topology(props) {
       urlParams: urlParams
     },
     editorProps: editorProps
-  }), renderCanvas(), isEditMode && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
+  }), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
     topo: topo,
     editorProps: editorProps
   })), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {

package/lib/core/editor/components/settings/PropertyView.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _CloseablePanel = _interopRequireDefault(require("./CloseablePanel"));
 
+var _edgePropertyViewAdapter = require("./core/edgePropertyViewAdapter");
+
 var _PropertyViewManager = _interopRequireDefault(require("./core/PropertyViewManager"));
 
 var _Settings = _interopRequireDefault(require("./Settings"));
@@ -41,7 +43,15 @@ function PropertyPanel(props) {
   var propertyPanelVisible = topoEditState.propertyPanelVisible;
   var propertyViewManager = (0, _react.useMemo)(function () {
     return new _PropertyViewManager["default"](topo);
-  }, []);
+  }, []); // 临时适配连线属性面板类型，后期组件支持自定义适配
+
+  (0, _edgePropertyViewAdapter.addEdgePropertyViews)(propertyViewManager, editorProps);
+
+  propertyViewManager.customGetViewType = editorProps.getPropertyViewType || function (elements) {
+    return (0, _edgePropertyViewAdapter.adapterGetEdgePropertyViewType)(elements, editorProps);
+  };
+
+  var PropertyView = propertyViewManager.getPropertyView();
   (0, _react.useEffect)(function () {
     if (graphLoaded) {
       propertyViewManager.init();
@@ -50,17 +60,23 @@ function PropertyPanel(props) {
     return function () {
       propertyViewManager.destroy();
     };
-  }, [graphLoaded, propertyViewManager]);
+  }, [graphLoaded, propertyViewManager]); // 没有视图关闭属性面板
+
+  (0, _react.useEffect)(function () {
+    if (propertyPanelVisible && !PropertyView) {
+      propertyViewManager.close();
+    }
+  }, [propertyPanelVisible, PropertyView, propertyViewManager]);
 
   var renderContent = function renderContent() {
-    if (!propertyPanelVisible) {
+    if (!PropertyView) {
       return null;
     }
 
     return /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
       topo: topo,
       selection: selection,
-      propertyViewManager: propertyViewManager,
+      PropertyView: PropertyView,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
       editorProps: editorProps

package/lib/core/editor/components/settings/Settings.js

@@ -34,26 +34,15 @@ function PropertyViewContainer(props) {
       topoEditApi = props.topoEditApi,
       selection = props.selection,
       editorProps = props.editorProps,
-      propertyViewManager = props.propertyViewManager;
+      PropertyView = props.PropertyView;
   var settingRuntimeState = (0, _useSettingRuntimeState["default"])();
   var selectionElements = (0, _react.useMemo)(function () {
     return topo.selectionModel.getSelection();
-  }, [selection]);
-  var PropertyView = propertyViewManager.getPropertyView(selection); // 不建议使用，直接使用ht元素对象。待优化
+  }, [selection]); // 不建议使用，直接使用ht元素对象。待优化
 
   var singleElementValues = (0, _react.useMemo)(function () {
     return selection.length === 1 ? buildElementValues(selection) : undefined;
   }, [selection]);
-  (0, _react.useEffect)(function () {
-    if (!PropertyView) {
-      propertyViewManager.close();
-    }
-  }, [PropertyView, propertyViewManager]);
-
-  if (!PropertyView) {
-    return null;
-  }
-
   var elementProps = {};
 
   if (selection.length === 1) {

package/lib/core/editor/components/settings/core/PropertyViewManager.js

@@ -5,15 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _propertyViews = _interopRequireDefault(require("../propertyViews"));
 
-var _getPropertyViewType = _interopRequireDefault(require("./getPropertyViewType"));
+var _getPropertyViewType2 = _interopRequireDefault(require("./getPropertyViewType"));
 
 var PropertyViewManager = /*#__PURE__*/function () {
   function PropertyViewManager(topo) {
     this.viewMap = _propertyViews["default"];
     this.topo = void 0;
-    this.getPropertyViewType = _getPropertyViewType["default"];
+    this.customGetViewType = void 0;
     this.topo = topo;
     this.open = this.open.bind(this);
   }
@@ -21,7 +23,7 @@ var PropertyViewManager = /*#__PURE__*/function () {
   var _proto = PropertyViewManager.prototype;
 
   _proto.updateViews = function updateViews(viewMap) {
-    Object.assign(this.viewMap, viewMap);
+    this.viewMap = (0, _extends2["default"])({}, _propertyViews["default"], viewMap);
   };
 
   _proto.init = function init() {
@@ -61,15 +63,27 @@ var PropertyViewManager = /*#__PURE__*/function () {
     });
   };
 
-  _proto.getPropertyView = function
-    /* selection */
-  getPropertyView() {
-    var selection = this.topo.selectionModel.getSelection();
-    var elementType = (0, _getPropertyViewType["default"])(selection);
+  _proto.getPropertyView = function getPropertyView() {
+    var elementType = this.getPropertyViewType();
     var PropertyView = this.viewMap[elementType];
     return PropertyView;
   };
 
+  _proto.getPropertyViewType = function getPropertyViewType() {
+    var selection = this.topo.selectionModel.getSelection();
+    var type;
+
+    if (this.customGetViewType) {
+      type = this.customGetViewType(selection);
+
+      if (type) {
+        return type;
+      }
+    }
+
+    return (0, _getPropertyViewType2["default"])(selection);
+  };
+
   return PropertyViewManager;
 }();
 

package/lib/core/editor/components/settings/core/edgePropertyViewAdapter.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.adapterGetEdgePropertyViewType = adapterGetEdgePropertyViewType;
+exports.addEdgePropertyViews = addEdgePropertyViews;
+
+var _htElementUtils = require("../../../../../utils/htElementUtils");
+
+var _addEdgeProps = _interopRequireDefault(require("../propertyViews/edge/addEdgeProps"));
+
+function adapterGetEdgePropertyViewType(selection, editorProps) {
+  var fn = editorProps.getEdgePropertyViewType;
+
+  if (selection.length === 1 && (0, _htElementUtils.isEdge)(selection[0]) && fn) {
+    var type = fn({
+      edge: selection[0]
+    });
+    return type;
+  }
+
+  return null;
+}
+
+function addEdgePropertyViews(propertyViewManager, editorProps) {
+  var oldMap = editorProps.edgePropertyViews || {};
+  var map = {};
+  Object.keys(oldMap).forEach(function (name) {
+    map[name] = (0, _addEdgeProps["default"])(oldMap[name]);
+  });
+  propertyViewManager.updateViews(map);
+}

package/lib/core/editor/components/settings/propertyViews/index.js

@@ -11,23 +11,15 @@ var _LayerPropertyView = _interopRequireDefault(require("./layer/LayerPropertyVi
 
 var _TextPropertyView = _interopRequireDefault(require("./text/TextPropertyView"));
 
-var _ViewPropertyView = _interopRequireDefault(require("./view/ViewPropertyView"));
-
 var _GroupPropertyView = _interopRequireDefault(require("./group/GroupPropertyView"));
 
-var _MultipleElementPropertyView = _interopRequireDefault(require("./multipleElements/MultipleElementPropertyView"));
-
-var _EdgePropertyView = _interopRequireDefault(require("./edge/EdgePropertyView"));
-
 var _BoxPropertyView = _interopRequireDefault(require("./box/BoxPropertyView"));
 
-var _EdgeGroupPropertyView = _interopRequireDefault(require("./edge/EdgeGroupPropertyView"));
-
 var propertyPanelMap = {
   // view: ViewPropertyView,
   group: _GroupPropertyView["default"],
   node: _NodePropertyView["default"],
-  edge: _EdgePropertyView["default"],
+  // edge: EdgePropertyView,
   // edgeGroup: EdgeGroupPropertyView,
   layer: _LayerPropertyView["default"],
   text: _TextPropertyView["default"],

package/lib/core/models/TopoApp.js

@@ -52,7 +52,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "6.0.0-alpha.53" === 'string' ? "6.0.0-alpha.53" : null;
+var version = typeof "6.0.0-alpha.54" === 'string' ? "6.0.0-alpha.54" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/networkTopo/components/editor/propertyViews/edge/EdgeGroupPropertyView.js

@@ -19,6 +19,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+// V1.2 废弃
 function EdgeGroupPropertyView(props) {
   var topo = props.topo,
       edge = props.edge,

package/lib/networkTopo/components/editor/useEditorProps.js

@@ -13,8 +13,6 @@ var _LayerConfigPlugin = _interopRequireDefault(require("./plugins/LayerConfigPl
 
 var _AddLinkDrawer = _interopRequireDefault(require("./propertyViews/edge/addLinkDrawer/AddLinkDrawer"));
 
-var _EdgeGroupPropertyView = _interopRequireDefault(require("./propertyViews/edge/EdgeGroupPropertyView"));
-
 var _EdgePropertyView = _interopRequireDefault(require("./propertyViews/edge/EdgePropertyView"));
 
 var _LinkPropertyView = _interopRequireDefault(require("./propertyViews/edge/LinkPropertyView"));
@@ -35,8 +33,7 @@ function useEditorProps(props) {
     // 连线属性面板
     edgePropertyViews: {
       edge: _EdgePropertyView["default"],
-      link: _LinkPropertyView["default"],
-      edgeGroup: _EdgeGroupPropertyView["default"]
+      link: _LinkPropertyView["default"]
     },
     getEdgePropertyViewType: function getEdgePropertyViewType(_ref) {
       var edge = _ref.edge;

package/lib/style.js

@@ -38,8 +38,8 @@ require('@alifd/next/lib/menu/style');
 require('@alifd/next/lib/collapse/style');
 require('@alifd/next/lib/select/style');
 require('@alifd/next/lib/number-picker/style');
-require('@alifd/next/lib/tag/style');
 
+require('@alifd/next/lib/tag/style');
 require('@riil-frontend/component-riil-event-emitter/lib/style');
 require('@alifd/next/lib/range/style');
 require('./index.scss');

package/package.json

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