ronds-metadata 1.1.11 → 1.1.14

package/es/comps/DynamicPorts/comps/ContextMenu.js

@@ -5,11 +5,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * @Date: 2022-05-27 09:56:39
  * @LastEditTime: 2022-05-27 16:16:25
  */
-import useObservable from '@/framework/rxjs-hooks/useObservable';
 import React from 'react';
 import NodeContextMenu from './contextMenu/NodeContextMenu';
-import "./ContextMenu.css";
+import './ContextMenu.less';
 import { EdgeContextMenu } from './contextMenu/EdgeContextMenu';
+import useObservable from '../../../framework/rxjs-hooks/useObservable';
 
 var ContextMenu = function ContextMenu(props) {
   var _graph$factory$;

package/es/comps/DynamicPorts/comps/DragNode.js

@@ -9,7 +9,7 @@ import { DragSource } from 'react-dnd';
 import { GlobalOutlined } from '@ant-design/icons';
 import Icon from '../../../comps/Icons';
 import { DRAGGABLE_COMPONENT } from '../constant';
-import "../index.css";
+import '../index.less';
 
 var InnerNodeTitle = function InnerNodeTitle(props) {
   var data = props.data,

package/es/comps/DynamicPorts/comps/GraphHandler/index.js

@@ -9,7 +9,7 @@ import _Popover from "antd/es/popover";
 import React from 'react';
 import { CompressOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import "./index.css";
+import './index.less';
 import { tr } from '../../../../framework/locale';
 export var GraphHandler = function GraphHandler(props) {
   var className = props.className,

package/es/comps/DynamicPorts/comps/GraphHandler/{index.css → index.less}

@@ -13,15 +13,22 @@
   border: 1px solid rgba(0, 0, 0, 0.04);
   border-radius: 3px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
+
+  .item {
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #000;
+      background-color: #e0e0e0;
+    }
+  }
 }
-.handler .item {
-  text-align: center;
-  cursor: pointer;
-}
-.handler .item:hover {
-  color: #000;
-  background-color: #e0e0e0;
-}
-.popover :global .ant-popover-inner-content {
-  padding: 3px 8px;
+
+.popover {
+  :global {
+    .ant-popover-inner-content {
+      padding: 3px 8px;
+    }
+  }
 }

package/es/comps/DynamicPorts/comps/NodeElement.js

@@ -6,7 +6,7 @@ import React from "react";
  * @LastEditTime: 2022-05-28 11:09:22
  */
 import { GlobalOutlined } from '@ant-design/icons';
-import "../index.css";
+import '../index.less';
 import Icon from '../../../comps/Icons';
 
 var NodeElement = function NodeElement(props) {

package/es/comps/DynamicPorts/comps/contextMenu/EdgeContextMenu/index.js

@@ -10,7 +10,7 @@ import React, { useCallback, useRef } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useClickAway } from 'ahooks';
 import { graphPointToOffsetPoint } from '../../../utils';
-import "./index.css";
+import './index.less';
 import { tr } from '../../../../../framework/locale';
 export var EdgeContextMenu = function EdgeContextMenu(props) {
   var graph = props.graph,

package/es/comps/DynamicPorts/comps/contextMenu/GraphContextMenu/index.js

@@ -11,7 +11,7 @@ import { ReloadOutlined } from '@ant-design/icons';
 import { useClickAway } from 'ahooks';
 import { graphPointToOffsetPoint } from '../../../utils';
 import { tr } from '../../../../../framework/locale';
-import "./index.css";
+import './index.less';
 export var GraphContextMenu = function GraphContextMenu(props) {
   var graph = props.graph,
       data = props.data;

package/es/comps/DynamicPorts/comps/contextMenu/GraphContextMenu/index.less

@@ -0,0 +1,40 @@
+.graphContextMenu {
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+}
+
+.loadExperimentModal {
+  :global {
+    .ant-modal-title {
+      font-size: 14px;
+    }
+
+    .ant-btn {
+      font-size: 12px;
+    }
+  }
+
+  .versionTable {
+    :global {
+      .ant-table.ant-table-small {
+        font-size: 12px;
+      }
+    }
+
+    .operations {
+      :global {
+        .ant-btn {
+          &:first-of-type {
+            padding-left: 0;
+            border-left: 0;
+          }
+
+          &.ant-btn-sm {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}

package/es/comps/DynamicPorts/comps/contextMenu/NodeContextMenu/index.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { useClickAway } from 'ahooks';
 import { graphPointToOffsetPoint } from '../../../utils';
 import { tr } from '../../../../../framework/locale';
-import "./index.css";
+import './index.less';
 
 var NodeContextMenu = function NodeContextMenu(props) {
   var graph = props.graph,

package/es/comps/DynamicPorts/comps/contextMenu/NodeContextMenu/index.less

@@ -0,0 +1,42 @@
+.graphContextMenu {
+  position: absolute;
+  z-index: 1;
+  width: 100px;
+  background-color: #fff;
+  box-shadow: 0 2px 10px rgb(0 0 0 1);
+}
+
+.loadExperimentModal {
+  :global {
+    .ant-modal-title {
+      font-size: 14px;
+    }
+
+    .ant-btn {
+      font-size: 12px;
+    }
+  }
+
+  .versionTable {
+    :global {
+      .ant-table.ant-table-small {
+        font-size: 12px;
+      }
+    }
+
+    .operations {
+      :global {
+        .ant-btn {
+          &:first-of-type {
+            padding-left: 0;
+            border-left: 0;
+          }
+
+          &.ant-btn-sm {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}

package/es/comps/DynamicPorts/comps/shape/edge.js

@@ -9,7 +9,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
  * @LastEditTime: 2022-05-24 10:43:18
  */
 import { Shape, Edge } from '@antv/x6';
-import "./edge.css";
+import './edge.less';
 export var BaseEdge = /*#__PURE__*/function (_Shape$Edge) {
   _inherits(BaseEdge, _Shape$Edge);
 

package/es/comps/DynamicPorts/comps/shape/edge.less

@@ -0,0 +1,8 @@
+.x6-edge {
+  &-selected,
+  &:hover {
+    path[stroke-width='1'] {
+      stroke-width: 3px;
+    }
+  }
+}

package/es/comps/DynamicPorts/graph.d.ts

@@ -54,6 +54,7 @@ declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
     }): void;
     onContextMenu(data: ContextMenuInfo): any;
     clearContextMenuInfo: () => void;
+    onMoveNodes(movedNodes: any[]): Promise<void>;
     dispose(): void;
 }
 export declare let gDPGraph: DPGraph;

package/es/comps/DynamicPorts/graph.js

@@ -16,6 +16,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { filter, take } from 'rxjs/operators';
+import { round } from 'lodash-es';
 import { GraphCore } from '../../framework/graph';
 import NodeElement from './comps/NodeElement';
 import { DPEdge } from './comps/shape/edge';
@@ -559,6 +560,76 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
       this.factory$.contextMenuInfo.next(data);
     } // 清空右键菜单信息
 
+  }, {
+    key: "onMoveNodes",
+    value: function () {
+      var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(movedNodes) {
+        var _this2 = this;
+
+        var targetNodes, newPos, oldGraph, newGraph;
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                targetNodes = movedNodes.filter(function (arg) {
+                  var node = arg.node;
+                  return !node.isGroup();
+                });
+
+                if (targetNodes === null || targetNodes === void 0 ? void 0 : targetNodes.length) {
+                  newPos = targetNodes.map(function (moveNode) {
+                    var current = moveNode.current,
+                        node = moveNode.node;
+                    var x = current.x,
+                        y = current.y;
+                    var id = node.id;
+
+                    _this2.updateNodeById(id, function (node) {
+                      node.setData({
+                        x: x,
+                        y: y
+                      });
+                    });
+
+                    return {
+                      nodeInstanceId: id,
+                      posX: round(x),
+                      posY: round(y)
+                    };
+                  });
+                  oldGraph = this.factory$.dpGraph.getValue();
+                  newGraph = produce(oldGraph, function (nextGraph) {
+                    newPos.forEach(function (position) {
+                      var nodeInstanceId = position.nodeInstanceId,
+                          posX = position.posX,
+                          posY = position.posY;
+                      var matchNode = nextGraph.nodes.find(function (item) {
+                        return item.id.toString() === nodeInstanceId.toString();
+                      });
+
+                      if (matchNode) {
+                        matchNode.x = posX;
+                        matchNode.y = posY;
+                      }
+                    });
+                  });
+                  this.factory$.dpGraph.next(newGraph);
+                }
+
+              case 2:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6, this);
+      }));
+
+      function onMoveNodes(_x4) {
+        return _onMoveNodes.apply(this, arguments);
+      }
+
+      return onMoveNodes;
+    }()
   }, {
     key: "dispose",
     value: function dispose() {

package/es/comps/DynamicPorts/index.js

@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import { filter } from 'rxjs';
 import { useDrop } from 'react-dnd';
-import "./index.css";
+import './index.less';
 import './comps/shape/connector';
 import { useDPGraph, useUnmountDPGraph } from './graph';
 import { DRAGGABLE_COMPONENT, DRAGGABLE_MODEL } from './constant';

package/es/comps/DynamicPorts/index.less

@@ -0,0 +1,198 @@
+.node-element {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 180px;
+  height: 32px;
+  overflow: hidden;
+  background-color: var(--ronds-metadata-color-bg-4);
+  color: var(--ronds-metadata-color-text-1);
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+
+  &.selected,
+  &:hover {
+    background-color: var(--ronds-metadata-color-bg-4);
+    color: var(--ronds-metadata-color-text-1);
+    border: 1px solid #1890ff;
+    box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+
+    .icon {
+      width: 32px;
+      height: 30px;
+      margin: 0 1px 0 -1px;
+    }
+  }
+
+  & > * {
+    flex-grow: 1;
+  }
+
+  .icon {
+    display: inline-flex;
+    flex-grow: 0;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background-color: var(--ronds-metadata-color-bg-2);
+    border-radius: 4px 0 0 4px;
+  }
+
+  .notation {
+    display: inline-flex;
+    align-items: center;
+    width: calc(100% - 32px);
+    padding: 0 8px;
+    user-select: none;
+
+    & > * {
+      flex-grow: 1;
+    }
+
+    .name {
+      overflow-x: hidden;
+      color: var(--ronds-metadata-color-text-1);
+      font-size: 12px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+    }
+
+    .statusIcon {
+      display: inline-flex;
+      flex-grow: 0;
+      align-items: center;
+      font-size: 14px;
+      transform: translateZ(0);
+    }
+  }
+}
+
+.dynamic-ports {
+  position: relative;
+  .x6-node [magnet='true'] {
+    cursor: crosshair;
+    transition: none;
+  }
+
+  .x6-node [magnet='true']:hover {
+    opacity: 1;
+  }
+
+  .x6-node [magnet='true'][port-group='in'] {
+    cursor: move;
+    stroke: none;
+  }
+
+  .x6-port-body > span {
+    display: block;
+  }
+
+  .x6-node-selected {
+    .node-element {
+      background-color: var(--ronds-metadata-color-bg-4);
+      border: 1px solid #1890ff;
+      box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+    }
+  }
+
+  .dp-port {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #808080;
+    border-radius: 100%;
+    background: #fff;
+    display: block;
+  }
+
+  .dp-port.connected {
+    width: 0;
+    height: 0;
+    margin-top: 3px;
+    margin-left: -1px;
+    border-width: 5px 4px 0;
+    border-style: solid;
+    border-color: #808080 transparent transparent;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  .x6-port-body.available {
+    overflow: visible;
+  }
+
+  .x6-port-body.available body {
+    overflow: visible;
+  }
+
+  .x6-port-body.available span {
+    overflow: visible;
+    display: block;
+  }
+
+  .x6-port-body.available body > span::before {
+    content: ' ';
+    float: left;
+    width: 20px;
+    height: 20px;
+    margin-top: -6px;
+    margin-left: -6px;
+    border-radius: 50%;
+    background-color: rgba(57, 202, 116, 0.6);
+    box-sizing: border-box;
+  }
+
+  .x6-port-body.available body > span::after {
+    content: ' ';
+    float: left;
+    clear: both;
+    width: 10px;
+    height: 10px;
+    margin-top: -15px;
+    margin-left: -1px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 1px solid #39ca74;
+    // position: relative;
+    z-index: 10;
+    box-sizing: border-box;
+    // transform: translateZ(0);
+    // position: relative
+  }
+
+  .x6-port-body.adsorbed {
+    overflow: visible;
+  }
+
+  .x6-port-body.adsorbed body {
+    overflow: visible;
+  }
+
+  .x6-port-body.adsorbed body > span::before {
+    content: ' ';
+    float: left;
+    width: 28px;
+    height: 28px;
+    margin-top: -9px;
+    margin-left: -10px;
+    border-radius: 50%;
+    background-color: rgba(57, 202, 116, 0.6);
+    box-sizing: border-box;
+  }
+
+  .x6-port-body.adsorbed body > span::after {
+    content: ' ';
+    float: left;
+    clear: both;
+    width: 10px;
+    height: 10px;
+    margin-top: -19px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 1px solid #39ca74;
+    // position: relative;
+    z-index: 10;
+    box-sizing: border-box;
+  }
+}

package/es/comps/Editable/comps/EditableCell.js

@@ -6,7 +6,7 @@ var _excluded = ["title", "isAddColumn", "editable", "record", "editableType", "
 import React from 'react';
 import { EditableContext } from '../interface';
 import { getDataCell, isFreeEditCell, isFreeEditRow } from '../utils';
-import "./index.css";
+import './index.less';
 import Texty from './Texty';
 import { tr } from '../../../framework/locale';
 

package/es/comps/Editable/comps/EditableHeardCell.js

@@ -15,7 +15,7 @@ import { PlusSquareOutlined, DeleteOutlined } from '@ant-design/icons';
 import React from 'react';
 import { EditableContext } from '../interface';
 import { tr } from '../../../framework/locale';
-import "./index.css";
+import './index.less';
 import Texty from './Texty';
 
 var EditableHeardCell = function EditableHeardCell(props) {

package/es/comps/Editable/comps/Texty.js

@@ -9,7 +9,7 @@ var _excluded = ["tagName", "children", "placement", "innerRef", "showDelay", "h
 import React from 'react';
 import ReactDom from 'react-dom';
 import { Popper } from 'react-popper';
-import "./Texty.css";
+import './Texty.less';
 var modifiers = [{
   name: 'preventOverflow',
   options: {

package/es/comps/Editable/comps/{Texty.css → Texty.less}

@@ -5,6 +5,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 [data-texty-tooltip] {
   margin: 6px 0;
   padding: 4px 10px;
@@ -13,6 +14,7 @@
   color: #fff;
   z-index: 99999;
 }
+
 [data-texty-arrow] {
   position: absolute;
   bottom: -6px;
@@ -22,11 +24,13 @@
   border-width: 6px 6px 0;
   border-color: #222 transparent transparent;
 }
+
 [data-texty-arrow*='bottom'] {
   top: -6px;
   bottom: inherit;
   transform: rotate(180deg);
 }
+
 /* disable the builtin tooltip for truncated text on Safari */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   @supports (not (-ms-ime-align: auto)) {

package/es/comps/Editable/comps/{index.css → index.less}

@@ -1,6 +1,7 @@
 .ant-table-th {
   position: relative;
 }
+
 .editable-th-hover-add {
   position: absolute;
   right: -3px;
@@ -11,15 +12,19 @@
   right: 15px;
   top: -8px;
 }
+
 .display-none {
   display: none;
 }
+
 .border-right {
   border-right: 1px solid var(--antd-wave-shadow-color) !important;
 }
+
 .border-top {
   border-top: 1px solid var(--antd-wave-shadow-color) !important;
 }
+
 .font-bold {
   font-weight: bold;
 }

package/es/comps/Editable/index.js

@@ -19,7 +19,7 @@ import EditableHeardCell from './comps/EditableHeardCell';
 import useMemoSubject from '../../framework/rxjs-hooks/useMemoSubject';
 import useObservable from '../../framework/rxjs-hooks/useObservable';
 import { tr } from '../../framework/locale';
-import "./index.css";
+import './index.less';
 
 var Editable = function Editable(props) {
   var _props$type = props.type,