ronds-metadata 1.2.24 → 1.2.25

package/es/comps/DynamicPorts/graph.js

@@ -107,13 +107,25 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
 
           if (!targetMagnet || targetMagnet.getAttribute('port-group') !== 'in') {
             return false;
+          } // 找到当前输出port
+
+
+          var sourcePortId = sourceMagnet.getAttribute('port');
+          var sourceNode = sourceView.cell;
+          var sourcePort = sourceNode.getPort(sourcePortId);
+          // 找到输入port
+          var targetPortId = targetMagnet.getAttribute('port');
+          var targetNode = targetView.cell;
+          var targetPort = targetNode.getPort(targetPortId);
+
+          // 如果设置输出port类型，则需要校验类型是否相等
+          // 只有类型相等才可以联线
+          if ((sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.type) && (targetPort === null || targetPort === void 0 ? void 0 : targetPort.type) && sourcePort.type !== targetPort.type) {
+            return false;
           } // 判断目标链接桩是否可连接
 
 
-          var portId = targetMagnet.getAttribute('port');
-          var node = targetView.cell;
-          var port = node.getPort(portId);
-          return !(port && port.connected);
+          return !(targetPort && targetPort.connected);
         }
       },
       scroller: {

package/es/comps/DynamicPorts/index.js

@@ -4,11 +4,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2022-05-16 18:53:31
- * @LastEditTime: 2022-06-28 14:58:00
+ * @LastEditTime: 2023-03-16 08:46:09
  */
 import React from 'react';
 import { filter } from 'rxjs';
 import { useDrop } from 'react-dnd';
+import ResizeSensor from 'css-element-queries/src/ResizeSensor';
 import './index.less';
 import './comps/shape/connector';
 import { useDPGraph, useUnmountDPGraph } from './graph';
@@ -33,7 +34,25 @@ var DynamicPorts = function DynamicPorts(props) {
   var dpGraphRef = React.useRef();
   var firstLoadRef = React.useRef(true); // 处理画布卸载
 
-  useUnmountDPGraph(); // 渲染画布
+  useUnmountDPGraph();
+  var resizeSensorRef = React.useRef(null);
+
+  var onResizeStrategy = function onResizeStrategy() {
+    var _dpGraphRef$current, _dpGraphRef$current2;
+
+    (_dpGraphRef$current = dpGraphRef.current) === null || _dpGraphRef$current === void 0 ? void 0 : _dpGraphRef$current.resizeGraph();
+    (_dpGraphRef$current2 = dpGraphRef.current) === null || _dpGraphRef$current2 === void 0 ? void 0 : _dpGraphRef$current2.zoomGraphRealSize();
+  };
+
+  React.useEffect(function () {
+    if (dpGraphRef.current) {
+      try {
+        resizeSensorRef.current = new ResizeSensor(divRef.current, onResizeStrategy);
+      } catch (ex) {
+        console.error(ex);
+      }
+    }
+  }, []); // 渲染画布
 
   React.useEffect(function () {
     if (firstLoadRef.current) {

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

@@ -55,6 +55,7 @@ export declare namespace NDPGraph {
         id: string;
         name: string;
         seq: number;
+        type: number | string;
     }
     interface Param {
         [key: string]: any;

package/es/comps/DynamicPorts/interface.js

@@ -1,6 +1,6 @@
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 16:10:46
- * @LastEditTime: 2022-05-30 09:44:45
+ * @LastEditTime: 2023-03-20 14:04:22
  */
 export {};

package/es/comps/MdView/index.less

@@ -1,353 +1,353 @@
-/* 颜色表 */
-@c-primary: #8400ff;
-@c-heading: rgba(0, 0, 0, 0.85);
-@c-text: #24292f;
-@c-secondary: #040405;
-@c-link: @c-primary;
-@c-border: #f3f4f5;
-@c-light-bg: #f9fafb;
-
-/* 尺寸表 */
-@s-nav-height: 64px;
-@s-mobile-nav-height: 50px;
-@s-menu-width: 260px;
-@s-site-menu-width: 320px;
-@s-menu-mobile-width: 240px;
-@s-content-margin: 20px;
-@s-toc-width: 363px;
-
-@img-logo: 'data:image/png;base64,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';
-@prefix: default;
-@mobile: ~'only screen and (max-width: 767px)';
-@desktop: ~'only screen and (min-width: 768px)';
-@icons: 'data:image/png;base64,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';
-
-.@{prefix}-icon {
-  background: url(@icons) no-repeat ~'0 0/230px auto';
-}
-
-/* 响应式断点 */
-@v-device-show: ~'only screen and (min-width: 961px)';
-@v-device-hide: ~'only screen and (max-width: 960px)';
-
-/* 移动设备尺寸 */
-@s-device-gap-top: 0px;
-@s-device-border-width: 14px;
-@s-device-shell-width: @s-device-border-width + 2px;
-@s-device-width: 375px;
-@s-device-ratio: 19.5 / 9;
-
-/* 颜色表 - dark */
-@c-bg-dark: #141414;
-@c-light-bg-dark: rgba(255, 255, 255, 0.08);
-@c-primary-dark: #7395f7;
-@c-heading-dark: rgba(255, 255, 255, 0.85);
-@c-text-dark: rgba(255, 255, 255, 0.85);
-@c-secondary-dark: rgba(255, 255, 255, 0.65);
-@c-border-dark: #6b6c6d;
-@c-btn-border-dark: #464646;
-
-.react-mark-down {
-  flex: 1;
-  overflow-y: auto;
-  ul {
-    li {
-      list-style: disc;
-    }
-  }
-  ol {
-    li {
-      list-style: auto;
-    }
-  }
-
-  color: var(--ronds-metadata-color-text-2);
-  font-size: 14px;
-  line-height: 1.60625;
-  background-color: var(--ronds-metadata-color-bg-4);
-  border-radius: 8px;
-  counter-reset: h2-index;
-
-  #api {
-    position: relative;
-    margin-top: 49px;
-    &::after {
-      position: relative;
-      top: -48px;
-      left: -20px;
-      width: calc(100% + 44px);
-      height: 1px;
-      display: block;
-      content: '';
-      background: #f3f4f5;
-    }
-  }
-
-  & > h2 {
-    position: relative;
-    // &::before {
-    //   position: absolute;
-    //   left: -20px;
-    //   display: block;
-    //   counter-increment: h2-index;
-    //   content: counter(h2-index) '.';
-    // }
-    & > a {
-      position: relative;
-      left: -20px;
-    }
-  }
-
-  @media @mobile {
-    padding: 16px !important;
-    & > h2 {
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  > *:nth-child(1) {
-    margin-top: 0;
-  }
-
-  &:not(:first-child):empty {
-    min-height: 32px;
-  }
-
-  // titles
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 42px 0 18px;
-    color: @c-heading;
-    font-weight: 600;
-    line-height: 1.40625;
-    border-bottom: none !important;
-
-    // anchor link
-    &:hover > a[aria-hidden] {
-      float: left;
-      margin-top: 0.06em;
-      margin-left: -20px;
-      width: 20px;
-      padding-right: 4px;
-      line-height: 1;
-      box-sizing: border-box;
-
-      @media @mobile {
-        width: 14px;
-        margin-left: -14px;
-      }
-
-      &::after {
-        content: '#';
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 20px;
-      }
-
-      span {
-        display: none;
-      }
-    }
-
-    + h1,
-    + h2,
-    + h3,
-    + h4,
-    + h5,
-    + h6 {
-      margin-top: 16px;
-    }
-  }
-
-  h1 {
-    margin-top: 48px;
-    margin-bottom: 32px;
-    font-size: 28px;
-  }
-
-  h2 {
-    font-size: 18px;
-  }
-
-  h3 {
-    font-size: 16px;
-  }
-
-  h4 {
-    font-size: 15px;
-  }
-
-  h5 {
-    font-size: 15px;
-  }
-
-  h6 {
-    font-size: 15px;
-  }
-
-  // paragraph
-  p {
-    margin: 16px 0;
-  }
-
-  // horizontal line
-  hr {
-    margin: 16px 0;
-    border: 0;
-    border-top: 1px solid @c-border;
-  }
-
-  // blockquote
-  blockquote {
-    margin: 16px 0;
-    padding: 10px 24px;
-    color: fadeout(@c-text, 30%);
-    border-left: 4px solid #376ce5;
-    background-color: #f3f4f5;
-    overflow: hidden;
-
-    p {
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-  pre {
-    padding: 10px !important;
-    background-color: rgb(250, 250, 250);
-    code {
-      font-weight: 300;
-      background-color: transparent;
-    }
-    .self-highlighter {
-      padding: 0 !important;
-      margin: 0 !important;
-    }
-  }
-
-  // list
-  ul,
-  ol {
-    margin: 8px 0 8px 16px;
-    padding: 0;
-
-    li {
-      margin-bottom: 4px;
-      font-size: 14px;
-    }
-  }
-
-  ul {
-    list-style-type: circle;
-  }
-
-  // table
-  table {
-    width: 100%;
-
-    margin-top: 16px;
-    border: 1px solid @c-border;
-    /* 消除单元格之间的空隙 */
-    border-collapse: collapse;
-    /* 消除掉外边框 */
-    border-style: hidden;
-    /* hack一下加个假边框 */
-    // box-shadow: 0 0 0 1px @c-border;
-    // 溢出背景处理
-    overflow: hidden;
-    table-layout: fixed;
-    th,
-    td {
-      padding: 10px 20px;
-      // border: 1px solid @c-border;
-      font-weight: normal;
-    }
-
-    @media @mobile {
-      th,
-      td {
-        padding: 4px;
-      }
-    }
-
-    th {
-      background: @c-light-bg;
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.85);
-    }
-
-    td {
-      color: rgba(0, 0, 0, 0.85);
-
-      code {
-        background-color: #f3f4f5;
-        min-height: 20px;
-        line-height: 20px;
-        text-align: center;
-        padding: 0 6px;
-        display: inline-block;
-        border: 1px solid rgba(0, 0, 0, 0.05);
-        border-radius: 2px;
-        color: rgba(0, 0, 0, 0.85);
-      }
-    }
-
-    .col {
-      font-size: 12px;
-      // overflow: auto;
-      word-break: break-all;
-      text-align: left;
-      // div {
-      //   overflow: auto;
-      // }
-    }
-    .col-0 {
-      width: 25%;
-      .col();
-    }
-    .col-1 {
-      width: 24%;
-      .col();
-    }
-    .col-2 {
-      width: 30%;
-      .col();
-    }
-    .col-3 {
-      .col();
-    }
-
-    a {
-      svg {
-        display: none;
-      }
-    }
-  }
-
-  // links
-  a {
-    color: #346ae5;
-    text-decoration: none;
-    transition: opacity 0.2s;
-    outline: none;
-
-    &:hover {
-      opacity: 0.7;
-      text-decoration: underline;
-    }
-
-    &:active {
-      opacity: 0.9;
-    }
-  }
-
-  // images
-  img {
-    max-width: 100%;
-  }
-}
+/* 颜色表 */
+@c-primary: #8400ff;
+@c-heading: rgba(0, 0, 0, 0.85);
+@c-text: #24292f;
+@c-secondary: #040405;
+@c-link: @c-primary;
+@c-border: #f3f4f5;
+@c-light-bg: #f9fafb;
+
+/* 尺寸表 */
+@s-nav-height: 64px;
+@s-mobile-nav-height: 50px;
+@s-menu-width: 260px;
+@s-site-menu-width: 320px;
+@s-menu-mobile-width: 240px;
+@s-content-margin: 20px;
+@s-toc-width: 363px;
+
+@img-logo: 'data:image/png;base64,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';
+@prefix: default;
+@mobile: ~'only screen and (max-width: 767px)';
+@desktop: ~'only screen and (min-width: 768px)';
+@icons: 'data:image/png;base64,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';
+
+.@{prefix}-icon {
+  background: url(@icons) no-repeat ~'0 0/230px auto';
+}
+
+/* 响应式断点 */
+@v-device-show: ~'only screen and (min-width: 961px)';
+@v-device-hide: ~'only screen and (max-width: 960px)';
+
+/* 移动设备尺寸 */
+@s-device-gap-top: 0px;
+@s-device-border-width: 14px;
+@s-device-shell-width: @s-device-border-width + 2px;
+@s-device-width: 375px;
+@s-device-ratio: 19.5 / 9;
+
+/* 颜色表 - dark */
+@c-bg-dark: #141414;
+@c-light-bg-dark: rgba(255, 255, 255, 0.08);
+@c-primary-dark: #7395f7;
+@c-heading-dark: rgba(255, 255, 255, 0.85);
+@c-text-dark: rgba(255, 255, 255, 0.85);
+@c-secondary-dark: rgba(255, 255, 255, 0.65);
+@c-border-dark: #6b6c6d;
+@c-btn-border-dark: #464646;
+
+.react-mark-down {
+  flex: 1;
+  overflow-y: auto;
+  ul {
+    li {
+      list-style: disc;
+    }
+  }
+  ol {
+    li {
+      list-style: auto;
+    }
+  }
+
+  color: var(--ronds-metadata-color-text-2);
+  font-size: 14px;
+  line-height: 1.60625;
+  background-color: var(--ronds-metadata-color-bg-3);
+  border-radius: 8px;
+  counter-reset: h2-index;
+
+  #api {
+    position: relative;
+    margin-top: 49px;
+    &::after {
+      position: relative;
+      top: -48px;
+      left: -20px;
+      width: calc(100% + 44px);
+      height: 1px;
+      display: block;
+      content: '';
+      background: #f3f4f5;
+    }
+  }
+
+  & > h2 {
+    position: relative;
+    // &::before {
+    //   position: absolute;
+    //   left: -20px;
+    //   display: block;
+    //   counter-increment: h2-index;
+    //   content: counter(h2-index) '.';
+    // }
+    & > a {
+      position: relative;
+      left: -20px;
+    }
+  }
+
+  @media @mobile {
+    padding: 16px !important;
+    & > h2 {
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  > *:nth-child(1) {
+    margin-top: 0;
+  }
+
+  &:not(:first-child):empty {
+    min-height: 32px;
+  }
+
+  // titles
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 42px 0 18px;
+    color: @c-heading;
+    font-weight: 600;
+    line-height: 1.40625;
+    border-bottom: none !important;
+
+    // anchor link
+    &:hover > a[aria-hidden] {
+      float: left;
+      margin-top: 0.06em;
+      margin-left: -20px;
+      width: 20px;
+      padding-right: 4px;
+      line-height: 1;
+      box-sizing: border-box;
+
+      @media @mobile {
+        width: 14px;
+        margin-left: -14px;
+      }
+
+      &::after {
+        content: '#';
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 20px;
+      }
+
+      span {
+        display: none;
+      }
+    }
+
+    + h1,
+    + h2,
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
+      margin-top: 16px;
+    }
+  }
+
+  h1 {
+    margin-top: 48px;
+    margin-bottom: 32px;
+    font-size: 28px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4 {
+    font-size: 15px;
+  }
+
+  h5 {
+    font-size: 15px;
+  }
+
+  h6 {
+    font-size: 15px;
+  }
+
+  // paragraph
+  p {
+    margin: 16px 0;
+  }
+
+  // horizontal line
+  hr {
+    margin: 16px 0;
+    border: 0;
+    border-top: 1px solid @c-border;
+  }
+
+  // blockquote
+  blockquote {
+    margin: 16px 0;
+    padding: 10px 24px;
+    color: fadeout(@c-text, 30%);
+    border-left: 4px solid #376ce5;
+    background-color: #f3f4f5;
+    overflow: hidden;
+
+    p {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+  pre {
+    padding: 10px !important;
+    background-color: rgb(250, 250, 250);
+    code {
+      font-weight: 300;
+      background-color: transparent;
+    }
+    .self-highlighter {
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+  }
+
+  // list
+  ul,
+  ol {
+    margin: 8px 0 8px 16px;
+    padding: 0;
+
+    li {
+      margin-bottom: 4px;
+      font-size: 14px;
+    }
+  }
+
+  ul {
+    list-style-type: circle;
+  }
+
+  // table
+  table {
+    width: 100%;
+
+    margin-top: 16px;
+    border: 1px solid @c-border;
+    /* 消除单元格之间的空隙 */
+    border-collapse: collapse;
+    /* 消除掉外边框 */
+    border-style: hidden;
+    /* hack一下加个假边框 */
+    // box-shadow: 0 0 0 1px @c-border;
+    // 溢出背景处理
+    overflow: hidden;
+    table-layout: fixed;
+    th,
+    td {
+      padding: 10px 20px;
+      // border: 1px solid @c-border;
+      font-weight: normal;
+    }
+
+    @media @mobile {
+      th,
+      td {
+        padding: 4px;
+      }
+    }
+
+    th {
+      background: @c-light-bg;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    td {
+      color: rgba(0, 0, 0, 0.85);
+
+      code {
+        background-color: #f3f4f5;
+        min-height: 20px;
+        line-height: 20px;
+        text-align: center;
+        padding: 0 6px;
+        display: inline-block;
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        border-radius: 2px;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+
+    .col {
+      font-size: 12px;
+      // overflow: auto;
+      word-break: break-all;
+      text-align: left;
+      // div {
+      //   overflow: auto;
+      // }
+    }
+    .col-0 {
+      width: 25%;
+      .col();
+    }
+    .col-1 {
+      width: 24%;
+      .col();
+    }
+    .col-2 {
+      width: 30%;
+      .col();
+    }
+    .col-3 {
+      .col();
+    }
+
+    a {
+      svg {
+        display: none;
+      }
+    }
+  }
+
+  // links
+  a {
+    color: #346ae5;
+    text-decoration: none;
+    transition: opacity 0.2s;
+    outline: none;
+
+    &:hover {
+      opacity: 0.7;
+      text-decoration: underline;
+    }
+
+    &:active {
+      opacity: 0.9;
+    }
+  }
+
+  // images
+  img {
+    max-width: 100%;
+  }
+}

package/es/theme.less

@@ -2,7 +2,7 @@
   --ronds-metadata-color-border-1: #314162;
   --ronds-metadata-color-border-2: #0d9af3;
   --ronds-metadata-color-bg-2: #0d1f40;
-  --ronds-metadata-color-bg-3: #0d1f40;
+  --ronds-metadata-color-bg-3: #021125;
   --ronds-metadata-color-bg-4: #1c3771;
   --ronds-metadata-color-text-1: #ffffff;
   --ronds-metadata-color-text-2: #ffffff;

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -45,6 +45,7 @@
     "bl": "^5.0.0",
     "codemirror": "^5.63.0",
     "codepage": "^1.15.0",
+    "css-element-queries": "^1.2.3",
     "github-markdown-css": "^5.1.0",
     "immer": "^9.0.14",
     "lodash": "^4.17.21",
@@ -91,4 +92,4 @@
     "webpack-cli": "^3.3.12",
     "yorkie": "^2.0.0"
   }
-}
+}