@riil-frontend/component-topology 6.0.0-alpha.8 → 6.0.0-alpha.9

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.module.scss

@@ -0,0 +1,151 @@
+@import "@alifd/next/variables";
+
+.TopoIconSelect {
+
+
+  .iconSelect {}
+
+
+
+}
+
+.iconCollapse {
+  width: 240px;
+  max-height: 218px;
+  overflow-y: auto;
+
+  :global {
+    .#{$css-prefix}collapse-panel-expanded {
+      .#{$css-prefix}collapse-panel-content {
+        padding: 0px 0px 5px 0px;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel {
+      border-top: none;
+      background-color: #FFF;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #4D6277;
+      line-height: 17px;
+    }
+
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-content {
+      padding: 0px 0px 5px 0px;
+    }
+  }
+}
+
+.iconSelect {
+  width: 100%;
+
+  .selected {
+    height: 26px;
+    display: block;
+
+    .iconImgWrapper {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      // vertical-align: middle;
+    }
+
+    .iconImg {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 18px;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .icontitle {
+      text-align: left;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #4D6277;
+      //margin-top: 2px;
+      line-height: 26px;
+      margin-left: 7px;
+    }
+
+    :global {
+      .#{$css-prefix}tag {
+        background: none;
+      }
+    }
+  }
+}
+
+
+
+.collPanel {
+  padding: 5px;
+}
+
+
+
+
+.iconli {
+  width: 52px;
+  height: 68px;
+  text-align: center;
+  border: 2px solid #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  .iconImgWrapper {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px 8px 5px 8px;
+  }
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 32px;
+    max-height: 32px;
+    vertical-align: middle;
+  }
+
+  .icontitle {
+    width: 48px;
+    max-width: 50px;
+    text-align: center;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 11px;
+  }
+
+
+  // float: left;
+}
+
+.selectedTag {
+  border-radius: 4px;
+  border: 2px solid #4C89FF;
+}

package/es/core/editor/components/Toolbar/widgets/IconSelect/popUpContent.js

@@ -0,0 +1,50 @@
+import _Box from "@alifd/next/es/box";
+import _Collapse from "@alifd/next/es/collapse";
+import React from 'react';
+import styles from "./index.module.scss";
+var Panel = _Collapse.Panel;
+
+function PopUpContent(props) {
+  var iconList = props.iconList,
+      onChange = props.onChange,
+      selectedId = props.selectedId;
+
+  var itemOnClick = function itemOnClick(e) {
+    onChange(e);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Collapse, {
+    className: styles.iconCollapse,
+    defaultExpandedKeys: [0]
+  }, iconList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Panel, {
+      title: item.name,
+      key: index,
+      className: styles.collPanel
+    }, /*#__PURE__*/React.createElement(_Box, {
+      spacing: 4,
+      direction: "row",
+      wrap: true
+    }, item.icons.map(function (icon, idx) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: idx,
+        className: styles.iconli + " " + (selectedId === icon.id ? styles.selectedTag : ''),
+        onClick: function onClick() {
+          itemOnClick(icon);
+        },
+        title: icon.name
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.iconImgWrapper
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.iconImg,
+        alt: "",
+        src: icon.url,
+        size: "xxl"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: styles.icontitle
+      }, icon.name));
+    })));
+  })));
+}
+
+export default PopUpContent;

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/BoxBackgroundSetting.js

@@ -1,8 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from "react";
+import TopoIconSelect from "../IconSelect";
+import { useNodeIcons } from "../../../../../common/icons/useIcons";
 
-function BoxBackgroundSetting(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+function BoxBackgroundSetting(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  useEffect(function () {}, []);
+  var icons = useNodeIcons(topo);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TopoIconSelect, {
+    value: value,
+    iconList: icons,
+    onChange: onChange
+  }));
 }
 
 export default BoxBackgroundSetting;

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/NodeImageButton.js

@@ -1,13 +1,13 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
 /**
  * 替换图片设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeImageButton(props) {
@@ -17,13 +17,41 @@ function NodeImageButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      imgVal = _useState2[0],
+      setImgVal = _useState2[1]; // 选中的元素
 
 
   var selection = topo.selectionManager.useSelection();
   useEffect(function () {
-    setDisabled(false);
+    console.log("NodeImageButton-selection", selection);
+
+    if (selection && selection.length > 0) {
+      setDisabled(false);
+      setImgVal(selection[0].image);
+    } else {
+      setDisabled(true);
+    }
   }, [selection]);
+
+  var onChange = function onChange(prop) {
+    console.log("onChange-prop", prop, selection); //const { name, value } = prop;
+    // const gv = topo.view.topoClient.getGraphView();
+    //const element = topo.getSelectionModel().getFirstData();
+
+    var elements = topo.getSelectionModel();
+    console.log("onChange-elements", elements);
+    elements.each(function (element) {
+      element.setImage(prop);
+    }); // selection.map((element) => {
+    //   element.setImage(prop);
+    // });
+    // if (name === "image") {
+    // }
+  };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u66FF\u6362\u56FE\u7247/Disable.svg",
     alt: ""
@@ -39,7 +67,9 @@ function NodeImageButton(props) {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement(BoxBackgroundSetting, {
-    topo: topo
+    topo: topo,
+    onChange: onChange,
+    value: imgVal
   })));
 }
 

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js

@@ -1,13 +1,16 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
-import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+import React, { useEffect, useState } from "react"; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+
+import BatchSetNodeSize from "../../../settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize";
+import NodeSizeInput from "../../../settings/common/NodeSizeInput/NodeSizeInput";
+import useSettingRuntimeState from "../../../settings/useSettingRuntimeState";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
 /**
  * 图片尺寸设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeSizeButton(props) {
@@ -17,13 +20,49 @@ function NodeSizeButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      size = _useState2[0],
+      setSize = _useState2[1]; // 选中的元素
 
 
   var selection = topo.selectionManager.useSelection();
+  var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
-    setDisabled(false);
+    if (selection && selection.length > 0) {
+      console.log("NodeSizeButton-selection", selection);
+      setDisabled(false);
+
+      if (selection.length === 1) {
+        setSize({
+          width: selection[0].width,
+          height: selection[0].height
+        });
+      }
+    } else {
+      setDisabled(true);
+      setSize({
+        width: null,
+        height: null
+      });
+    }
   }, [selection]);
+
+  var _onChange = function onChange(prop) {
+    console.log("onChange-prop", prop);
+    var name = prop.name,
+        value = prop.value;
+    var gv = topo.view.topoClient.getGraphView();
+    var element = topo.getSelectionModel().getFirstData();
+
+    if (name === "width") {
+      element.setWidth(value);
+    } else if (name === "height") {
+      element.setHeight(value);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
     tooltip: "\u56FE\u7247\u5C3A\u5BF8",
@@ -32,11 +71,51 @@ function NodeSizeButton(props) {
     style: {
       width: 136
     }
-  }, /*#__PURE__*/React.createElement(BatchSetNodeSize, {
+  }, selection.length > 1 ? /*#__PURE__*/React.createElement(BatchSetNodeSize, {
     topo: topo,
     size: "small",
+    value: size,
+    disabled: disabled,
     showLabel: false,
-    hasTrigger: false
+    hasTrigger: false,
+    onChange: function onChange(size) {
+      topo.historyManager.beginTransaction();
+
+      _onChange({
+        name: "width",
+        value: size.width
+      });
+
+      _onChange({
+        name: "height",
+        value: size.height
+      });
+
+      topo.historyManager.endTransaction();
+    }
+  }) : /*#__PURE__*/React.createElement(NodeSizeInput, {
+    topo: topo,
+    size: "small",
+    value: size,
+    disabled: disabled,
+    showLabel: false,
+    hasTrigger: false,
+    settingRuntimeState: settingRuntimeState,
+    onChange: function onChange(size) {
+      topo.historyManager.beginTransaction();
+
+      _onChange({
+        name: "width",
+        value: size.width
+      });
+
+      _onChange({
+        name: "height",
+        value: size.height
+      });
+
+      topo.historyManager.endTransaction();
+    }
   })));
 }
 

package/es/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import SizeInput from "../SizeInput";
 var NODE_SIZE_LOCK = 'NODE_SIZE_LOCK';
 /**
@@ -103,14 +103,14 @@ function NodeSizeInput(props) {
     return val ? Math.round(val) : val;
   }
 
-  return /*#__PURE__*/React.createElement(SizeInput, {
+  return /*#__PURE__*/React.createElement(SizeInput, _extends({}, props, {
     value: value,
     lock: lock,
     max: max,
     step: step,
     onChange: handleChange,
     onLockChange: switchLock
-  });
+  }));
 }
 
 NodeSizeInput.propTypes = {

package/es/core/editor/components/settings/common/SizeInput/NodeSizeInput.js

@@ -4,9 +4,9 @@ import _Grid from "@alifd/next/es/grid";
 import _Form from "@alifd/next/es/form";
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import NodeSizeNumberPicker from "./NodeSizeNumberPicker";
 import styles from "./NodeSizeInput.module.scss";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;
@@ -22,12 +22,13 @@ function SizeInput(props) {
       max = props.max,
       step = props.step,
       onChange = props.onChange,
-      lock = props.lock,
-      onLockChange = props.onLockChange,
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       hasTrigger = props.hasTrigger,
-      size = props.size;
+      size = props.size,
+      lock = props.lock,
+      disabled = props.disabled,
+      onLockChange = props.onLockChange;
 
   var handleChange = function handleChange(name, attrValue) {
     var _extends2;
@@ -69,9 +70,11 @@ function SizeInput(props) {
   }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
     value: parseValue(value.width),
     label: showLabel ? '宽:' : '',
+    innerAfter: showLabel ? undefined : 'W',
     min: 1,
     max: max,
     step: step,
+    disabled: disabled,
     placeholder: "\u8BF7\u8F93\u5165",
     size: size,
     hasTrigger: hasTrigger,
@@ -99,11 +102,12 @@ function SizeInput(props) {
     }
   }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
     value: parseValue(value.height),
-    label: showLabel ? '高:' : '' // addonTextAfter="H"
-    ,
+    label: showLabel ? '高:' : '',
+    innerAfter: showLabel ? undefined : 'H',
     min: 1,
     max: max,
     step: step,
+    disabled: disabled,
     placeholder: "\u8BF7\u8F93\u5165",
     size: size,
     hasTrigger: hasTrigger,

package/es/core/editor/components/settings/common/SizeInput/NodeSizeNumberPicker.js

@@ -1,8 +1,8 @@
 import _NumberPicker from "@alifd/next/es/number-picker";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown"];
-import React, { useState, useEffect } from 'react';
+var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown", "disabled"];
+import React, { useState, useEffect } from "react";
 
 /**
  * 节点大小组件
@@ -16,6 +16,7 @@ export default function NodeSizeNumberPicker(props) {
       min = props.min,
       onBlur = props.onBlur,
       onKeyDown = props.onKeyDown,
+      disabled = props.disabled,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var _useState = useState(value),
@@ -48,13 +49,13 @@ export default function NodeSizeNumberPicker(props) {
 
   var handleChange = function handleChange(value, e) {
     // 失去焦点最大最小值
-    if (e.type === 'blur') {
+    if (e.type === "blur") {
       onChange(!value ? min : value);
       return;
     } // 加减号立即变更
 
 
-    if (e.triggerType === 'up' || e.triggerType === 'down') {
+    if (e.triggerType === "up" || e.triggerType === "down") {
       onChange(value);
       return;
     }
@@ -65,9 +66,9 @@ export default function NodeSizeNumberPicker(props) {
   return /*#__PURE__*/React.createElement(_NumberPicker, _extends({}, otherProps, {
     value: inputValue,
     min: min,
+    disabled: disabled,
     onChange: handleChange,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown
   }));
-}
-;
+}

package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import SizeInput from "../../../common/SizeInput";
 
 var NodesSizeRatioMap = /*#__PURE__*/function () {
@@ -80,7 +80,7 @@ export default function BatchSetNodeSize(props) {
     if (lock) {
       var _setSize;
 
-      setSize((_setSize = {}, _setSize[name] = value, _setSize[name === 'width' ? 'height' : 'width'] = undefined, _setSize));
+      setSize((_setSize = {}, _setSize[name] = value, _setSize[name === "width" ? "height" : "width"] = undefined, _setSize));
     } else {
       var _extends2;
 
@@ -89,10 +89,10 @@ export default function BatchSetNodeSize(props) {
 
     topo.historyManager.beginTransaction();
     nodes.forEach(function (node) {
-      if (name === 'width') {
+      if (name === "width") {
         if (lock) {
           var height = nodesSizeRatioMap.getNodeHeight(node, value);
-          rlog.debug('多元素锁定设置宽', node, value, height);
+          rlog.debug("多元素锁定设置宽", node, value, height);
           node.setHeight(height);
         }
 
@@ -117,11 +117,10 @@ export default function BatchSetNodeSize(props) {
     nodesSizeRatioMap.reset();
   };
 
-  return /*#__PURE__*/React.createElement(SizeInput, {
+  return /*#__PURE__*/React.createElement(SizeInput, _extends({}, props, {
     value: size,
     lock: lock,
     onChange: handleChange,
     onLockChange: onLockChange
-  });
-}
-;
+  }));
+}

package/es/core/editor/components/settings/propertyViews/view/BatchSetNodeSize.js

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SizeInput from "../../common/SizeInput";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import SizeInput from "../../common/SizeInput"; // 这个似乎不需要了
+
 export default function BatchSetNodeSize(props) {
-  var size = props.size;
+  var value = props.value,
+      size = props.size,
+      disabled = props.disabled;
   return /*#__PURE__*/React.createElement(SizeInput, _extends({}, props, {
-    value: {}
+    disabled: disabled,
+    value: value
   }));
-}
-;
+}

package/es/core/models/TopoApp.js

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

package/lib/core/common/icons/useIcons.js

@@ -17,7 +17,10 @@ function useCustomIcons(topo) {
 function useNodeIcons(topo) {
   var customIcons = useCustomIcons(topo);
   var groups = [{
-    name: '默认',
+    name: '资源图片',
+    icons: []
+  }, {
+    name: '基础图片',
     icons: (0, _icon.getNodeDefaultIcons)(topo)
   }];
 
@@ -34,6 +37,9 @@ function useNodeIcons(topo) {
 function useGroupIcons(topo) {
   var customIcons = useCustomIcons(topo);
   var groups = [{
+    name: '资源图片',
+    icons: []
+  }, {
     name: '默认',
     icons: (0, _icon.getGroupDefaultIcons)(topo)
   }];