ronds-metadata 1.1.13 → 1.1.14

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/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,

package/es/comps/Editable/index.less

@@ -0,0 +1,97 @@
+.ronds-edit-table {
+  // table {
+  //   border-collapse: collapse !important;
+  // }
+  width: 100%;
+  height: 100%;
+
+  .ant-table-body {
+    overflow: auto !important;
+  }
+
+  //解决固定列底部预留的空隙
+  .ant-table-fixed-left,
+  .ant-table-fixed-right {
+    .ant-table-body-outer {
+      margin-bottom: 0 !important;
+    }
+    .ant-table-cell-scrollbar {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+  }
+
+  .ant-spin-nested-loading,
+  .ant-spin-container,
+  .ant-table,
+  .ant-table-container,
+  .ant-table-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ant-table-cell,
+  .ant-table-row {
+    height: 30px;
+    padding: 0px 8px !important;
+  }
+
+  .ant-table-body {
+    height: 100%;
+    overflow-y: auto !important;
+  }
+
+  .ant-table.ant-table-small .ant-table-thead > tr > th {
+    padding: 8px !important;
+    background-color: #ebebeb;
+    border-right: 1px solid #f2f2f2;
+  }
+
+  .ant-table-fixed {
+    table-layout: fixed;
+  }
+
+  .ant-table-tbody > tr > td {
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+
+  .ant-table.ant-table-bordered > .ant-table-container {
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .ant-table .ant-table-expanded-row-fixed {
+    padding: 0% !important;
+    margin: 0% !important;
+  }
+
+  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody > tr > td > .ant-table-expanded-row-fixed::after {
+    border-right: 0 !important;
+  }
+}
+
+.ronds-metadata-normal {
+  .ant-table {
+    border-right: 1px solid #f0f0f0 !important;
+
+    .ant-table-row--odd {
+      background-color: #ebebeb !important;
+      .ant-table-cell {
+        background-color: #ebebeb !important;
+      }
+    }
+
+    .ant-table-expanded-row-fixed::after {
+      border: 0 !important;
+    }
+
+    .ant-table-placeholder {
+      pointer-events: none;
+      background-color: #fff !important;
+      .ant-table-cell {
+        padding: 0 !important;
+        background-color: #fff !important;
+      }
+    }
+  }
+}

package/es/comps/JsonEdit/index.js

@@ -22,7 +22,7 @@ import 'codemirror/addon/fold/comment-fold';
 import 'codemirror/addon/selection/active-line.js';
 import 'codemirror/addon/edit/closebrackets.js';
 import 'codemirror/addon/edit/matchbrackets.js';
-import "./index.css";
+import './index.less';
 import { SQL_DICO } from './constant';
 
 var SqlEdit = function SqlEdit(props) {

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

@@ -7,6 +7,7 @@
 .sql {
   color: blue;
 }
+
 .sql:after {
   content: 'sql';
   padding-left: 20px;
@@ -14,6 +15,7 @@
   float: right;
   color: gray;
 }
+
 .table {
   color: blueviolet;
 }
@@ -24,6 +26,7 @@
   float: right;
   color: gray;
 }
+
 .column {
   color: brown;
 }
@@ -34,6 +37,7 @@
   float: right;
   color: gray;
 }
+
 .pf {
   color: cadetblue;
 }
@@ -44,8 +48,10 @@
   float: right;
   color: gray;
 }
+
 .CodeMirror {
   height: 100%;
+  // height: auto;
   min-height: 28px;
   font-size: 14px;
   direction: ltr;

package/es/comps/JsonView/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
-import "./index.css";
+import './index.less';
 
 var JsonView = function JsonView(props) {
   var json = props.json;