ronds-metadata 1.1.13 → 1.1.16

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

@@ -7,7 +7,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  */
 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';
 

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/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/EditableAction.js

@@ -17,14 +17,16 @@ var EditableAction = function EditableAction(props) {
       editableStream = _ref.editableStream,
       editConfig = _ref.editConfig;
 
-  var onEdit = function onEdit() {
+  var onEdit = function onEdit(e) {
+    e.stopPropagation();
     editableStream.next({
       type: 'editRowKey',
       payload: record
     });
   };
 
-  var onCancel = function onCancel() {
+  var onCancel = function onCancel(e) {
+    e.stopPropagation();
     editableStream.next({
       type: 'editRowKey',
       payload: {
@@ -33,7 +35,8 @@ var EditableAction = function EditableAction(props) {
     });
   };
 
-  var onSave = function onSave() {
+  var onSave = function onSave(e) {
+    e.stopPropagation();
     editableStream.next({
       type: 'onSingleSave',
       payload: record
@@ -47,7 +50,8 @@ var EditableAction = function EditableAction(props) {
     });
   };
 
-  var onDelete = function onDelete() {
+  var onDelete = function onDelete(e) {
+    e.stopPropagation();
     editableStream.next({
       type: 'onDelete',
       payload: record

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/EditableRow.js

@@ -35,6 +35,15 @@ var EditableRow = function EditableRow(props) {
     }
   };
 
+  var onRowClick = function onRowClick() {
+    editableStream.next({
+      type: 'onRowClick',
+      payload: {
+        record: record
+      }
+    });
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Form, {
     name: "editable_".concat(record === null || record === void 0 ? void 0 : record._rowKey_, "_"),
     form: form,
@@ -42,10 +51,11 @@ var EditableRow = function EditableRow(props) {
     onValuesChange: onValuesChange,
     component: false
   }, /*#__PURE__*/React.createElement("tr", _extends({}, props, {
-    className: "".concat(className, " ").concat(index % 2 === 0 ? 'ant-table-row--even' : 'ant-table-row--odd'),
+    className: "".concat(index % 2 === 0 || props['data-row-key'] ? 'ant-table-row--even' : 'ant-table-row--odd', " ").concat(className, " "),
     style: {
       height: '30px'
-    }
+    },
+    onClick: onRowClick
   }))));
 };
 

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.d.ts

@@ -37,6 +37,10 @@ interface IEditableProps<R = any> {
      * antd自身的属性
      */
     tableProps?: TableProps<R>;
+    /**
+     * 每行确认回调函数
+     */
+    onRowClick?: (record: any) => void;
     /**
      * 每行确认回调函数
      */

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,
@@ -33,6 +33,7 @@ var Editable = function Editable(props) {
       _props$isAddColumn = props.isAddColumn,
       isAddColumn = _props$isAddColumn === void 0 ? false : _props$isAddColumn,
       tableProps = props.tableProps,
+      onRowClick = props.onRowClick,
       onRowConfirm = props.onRowConfirm,
       onRowDelete = props.onRowDelete,
       onMulChange = props.onMulChange,
@@ -120,6 +121,10 @@ var Editable = function Editable(props) {
         setEditHeardCellkey(data.payload);
         break;
 
+      case 'onRowClick':
+        onRowClick && onRowClick(data.payload);
+        break;
+
       case 'onSingleSave':
         if (lastValueRef.current && lastValueRef.current.rowIdx === data.payload._rowKey_) {
           onRowConfirm && onRowConfirm({