fix: sketch issues

app/components/Button/index.module.less

@@ -1,12 +1,12 @@
 @import '@app/common.less';
 
 svg.btnIcon {
-	fill: #262626;
+	color: #262626;
 	cursor: pointer;
 }
 
 svg.btnActived {
-	fill: @blue;
+	color: @blue;
 }
 
 svg.btnDisabled {

app/config/locale/en-US.json

@@ -298,6 +298,8 @@
     "export": "Export",
     "applySpaceTip": "The new schema will not overwrite the original schema in the space",
     "sameSchemaWarning": "{content} already exists in the space, please change the {hasType} name or select another space.",
-    "noData": "No data, please import data first"
+    "noData": "No data, please import data first",
+    "uniqName": "Tag & Edge type name cannot be duplicated",
+    "spaceExisted": "Space already exists"
   }
 }

app/config/locale/zh-CN.json

@@ -298,6 +298,8 @@
     "export": "导出",
     "applySpaceTip": "新的 schema 不会覆盖图空间中已有的 schema 信息",
     "sameSchemaWarning": "图空间中已存在{content}，请修改{hasType}名称，或者选择其他图空间。",
-    "noData": "暂无数据，请先导入数据"
+    "noData": "暂无数据，请先导入数据",
+    "uniqName": "标签和边类型名称不允许重名",
+    "spaceExisted": "图空间已存在"
   }
 }

app/pages/Console/OutputBox/ForceGraph/DisplayPanel/ExpandItem/index.module.less

@@ -58,7 +58,7 @@
 			:global(.anticon) {
 				margin-right: 4px;
 				svg {
-					fill: #0091FF;
+					color: #0091FF;
 					width: 16px;
 					height: 16px;
 				}

app/pages/Console/OutputBox/ForceGraph/Menu/index.module.less

@@ -39,7 +39,7 @@
 		color: #fff;
 
 		svg {
-			fill: #fff;
+			color: #fff;
 		}
 	}
 }

app/pages/Console/OutputBox/ForceGraph/index.module.less

@@ -26,7 +26,7 @@
       justify-content: center;
       cursor: pointer;
       svg {
-        fill: @darkBlue;
+        color: @darkBlue;
       }
       &:not(:last-child) {
         margin-right: 8px;

app/pages/Console/OutputBox/index.module.less

@@ -46,7 +46,7 @@
 			margin-left: 22px;
 			> :global(span.anticon) {
 				svg {
-					fill: @darkBlue;
+					color: @darkBlue;
 					width: 22px;
 					height: 22px;
 				}

app/pages/Console/index.module.less

@@ -28,7 +28,7 @@
           svg {
             width: 22px;
             height: 22px;
-            fill: @darkGray;
+            color: @darkGray;
           }
         }
       }
@@ -67,7 +67,7 @@
           svg {
             width: 24px;
             height: 24px;
-            fill: @darkBlue;
+            color: @darkBlue;
           }
         }
         :global(.ant-btn) {
@@ -95,7 +95,7 @@
         cursor: pointer;
         opacity: 0.7;
         svg {
-          fill: @darkBlue;
+          color: @darkBlue;
         }
       }
       .paramContainer {
@@ -128,7 +128,7 @@
           flex-shrink: 0;
           margin-right: 10px;
           svg {
-            fill: @darkBlue;
+            color: @darkBlue;
             margin-right: 10px;
           }
         }

app/pages/Doc/index.module.less

@@ -36,7 +36,7 @@
         :global(.anticon > svg) {
           width: 50px;
           height: 50px;
-          fill: #0091FF;
+          color: #0091FF;
         }
         .title {
           color: #0091FF;

app/pages/Import/TaskCreate/SchemaConfig/index.module.less

@@ -52,7 +52,7 @@
           }
 
           &.noValue :global(.ant-select-arrow svg) {
-            fill: @blue;
+            color: @blue;
           }
         }
       }

app/pages/Import/TaskList/TemplateModal/index.module.less

@@ -24,7 +24,7 @@
         width: 95px;
         height: 95px;
         padding: 24px;
-        fill: @darkBlue;
+        color: @darkBlue;
       }
       .dragTip {
         display: flex;

app/pages/Login/LanguageSelect/index.module.less

@@ -24,7 +24,7 @@
 	}
 
 	svg {
-		fill: #fff;
+		color: #fff;
 	}
 }
 

app/pages/MainPage/Header/HelpMenu/index.module.less

@@ -12,7 +12,7 @@
     display: inline-flex;
   }
   .navIcon > svg {
-    fill: #fff;
+    color: #fff;
     width: 24px;
     height: 24px;
   }
@@ -27,7 +27,7 @@
     align-items: center;
   }
   .menuIcon > svg {
-    fill: #fff;
+    color: #fff;
     width: 16px;
     height: 16px;
     margin-right: 8px;

app/pages/Schema/SchemaConfig/Create/IndexCreate/index.module.less

@@ -50,7 +50,7 @@
       svg {
         width: 23px;
         height: 23px;
-        fill: @darkGray;
+        color: @darkGray;
       }
     }
   }
@@ -64,7 +64,7 @@
         border: none;
       }
       .ant-select-arrow svg {
-        fill: @darkBlue;
+        color: @darkBlue;
       }
     }
   }

app/pages/Schema/SchemaConfig/List/SchemaVisualization/index.tsx

@@ -9,7 +9,7 @@ import { isEqual, uniqWith } from 'lodash';
 import { ISchemaEnum } from '@app/interfaces/schema';
 import { v4 as uuidv4 } from 'uuid';
 
-import { ARROW_STYLE, LINE_STYLE, NODE_RADIUS, COLOR_LIST } from '@app/config/sketch';
+import { ARROW_STYLE, LINE_STYLE, NODE_RADIUS, COLOR_LIST, makeLineSort } from '@app/config/sketch';
 import ZoomBtns from '@app/pages/SketchModeling/ZoomBtns';
 import styles from './index.module.less';
 
@@ -66,7 +66,7 @@ const SchemaVisualization = () => {
         lines.push({
           from: srcTag,
           to: dstTag,
-          name
+          name,
         });
       });
       lines = uniqWith(lines, isEqual);
@@ -82,7 +82,7 @@ const SchemaVisualization = () => {
           arrowStyle: ARROW_STYLE,
         };
       }).filter(line => line.from && line.to);
-
+      makeLineSort(_lines);
       await sketchModel.editor.schema.setData({ nodes, lines: _lines });
       await sketchModel.editor.schema.format();
       await sketchModel.editor.controller.autoFit();

app/pages/Schema/SchemaConfig/List/Search/index.tsx

@@ -1,9 +1,10 @@
 import { Input } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
 import { SearchOutlined } from '@ant-design/icons';
 import { useLocation } from 'react-router-dom';
 
+import { debounce } from 'lodash';
 import styles from './index.module.less';
 
 interface IProps {
@@ -18,14 +19,22 @@ const Search = (props: IProps) => {
   useEffect(() => {
     setValue('');
   }, [location.pathname]);
+  const onChange = useCallback(e => {
+    setValue(e.target.value);
+    search(e.target.value);
+  }, []);
+  const search = useCallback(debounce((value) => {
+    onSearch(value);
+  }, 500), []);
+
   return (
     <div className={styles.schemaSearch}>
       <Input
         value={value}
         prefix={<SearchOutlined className={styles.inputSearch} onClick={() => onSearch(value)} />}
         allowClear={true}
         placeholder={intl.get('common.namePlaceholder', { name: type })}
-        onChange={e => setValue(e.target.value)}
+        onChange={onChange}
         onPressEnter={() => onSearch(value)}
         style={{ width: 300 }}
         suffix={null}

app/pages/Schema/index.module.less

@@ -10,6 +10,10 @@
   }
   .schemaContainer {
     padding-top: 20px;
+    .row {
+      display: flex;
+      justify-content: space-between;
+    }
     .btnCreate {
       margin-bottom: 12px;
     }
@@ -56,7 +60,7 @@
         svg {
           width: 21px;
           height: 21px;
-          fill: #BDBDBD;
+          color: #BDBDBD;
         }
       }
     }

app/pages/Schema/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Popconfirm, Table, message, Popover, Form, Input, Dropdown, Menu, Tooltip } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import intl from 'react-intl-universal';
 import Icon from '@app/components/Icon';
 import { trackPageView } from '@app/utils/stat';
@@ -9,6 +9,7 @@ import { NebulaVersion } from '@app/stores/types.d.ts';
 import cls from 'classnames';
 import { Link, useHistory } from 'react-router-dom';
 import styles from './index.module.less';
+import Search from './SchemaConfig/List/Search';
 
 interface IOperations {
   space: string;
@@ -67,6 +68,7 @@ const Operations = (props: IOperations) => {
 const Schema = () => {
   const { schema, global } = useStore();
   const [loading, setLoading] = useState(false);
+  const [searchVal, setSearchVal] = useState('');
   const history = useHistory();
   const { nebulaVersion } = global;
   const { currentSpace, switchSpace, getSpacesList, deleteSpace, spaceList, cloneSpace } = schema;
@@ -202,24 +204,28 @@ const Schema = () => {
       },
     },
   ];
+  const data = useMemo(() => spaceList.filter(item => item.Name.includes(searchVal)), [spaceList, searchVal]);
   return <div className={cls(styles.schemaPage, 'studioCenterLayout')}>
     <div className={styles.schemaHeader}>
       {intl.get('schema.spaceList')}
     </div>
     <div className={styles.schemaContainer}>
-      <Button className={cls(styles.btnCreate, 'studioAddBtn')} type="primary">
-        <Link
-          to="/schema/space/create"
-          data-track-category="navigation"
-          data-track-action="view_space_create"
-          data-track-label="from_space_list"
-        >
-          <Icon className="studioAddBtnIcon" type="icon-studio-btn-add" />{intl.get('schema.createSpace')}
-        </Link>
-      </Button>
+      <div className={styles.row}>
+        <Button className={cls(styles.btnCreate, 'studioAddBtn')} type="primary">
+          <Link
+            to="/schema/space/create"
+            data-track-category="navigation"
+            data-track-action="view_space_create"
+            data-track-label="from_space_list"
+          >
+            <Icon className="studioAddBtnIcon" type="icon-studio-btn-add" />{intl.get('schema.createSpace')}
+          </Link>
+        </Button>
+        <Search type={intl.get('common.space')} onSearch={setSearchVal} />
+      </div>
       <Table
         className={styles.tableSpaceList}
-        dataSource={spaceList}
+        dataSource={data}
         columns={columns}
         loading={!!loading}
         rowKey="ID"

app/pages/SketchModeling/Plugins/SketchShapes/Path.tsx

@@ -120,9 +120,7 @@ const Path: LineRender = {
         endControlPoint
       };
     } else {
-      // TODO optimization
       const selfLoopRadius = 30;
-      const arcRatio = 4;
       const startSpace = 8;
       const endSpace = 8;
       const start = { x: from.x, y: from.y };
@@ -136,18 +134,8 @@ const Path: LineRender = {
       const selfLoopIndex = getSelfLoopLineIndex(line, this.graph);
       const angle = (from.index === to.index) ? 0 : (Math.PI / (selfLoopRadius / 10 + selfLoopIndex));
       const dis = Math.sqrt(Math.pow(from.x - to.x, 2) + Math.pow(from.y - to.y, 2));
-      let radius = (dis / 2) / Math.sin(angle / 2);
-      if (!radius) { // when from point and to point are the same
-        radius = (selfLoopIndex / arcRatio + 1) * selfLoopRadius;
-        const topPos = {
-          x: start.x + radius * 2 * Math.cos(startAngle),
-          y: start.y + radius * 2 * Math.sin(startAngle),
-        };
-        path = `M${from.x} ${from.y} L${from.x} ${from.y} M${start.x} ${start.y} A ${radius} ${radius} 0 1 0 ${topPos.x} ${topPos.y}`;
-        path += ` M${topPos.x} ${topPos.y} A ${radius} ${radius} 0 1 0 ${end.x} ${end.y} L${to.x} ${to.y}`;
-      } else {
-        path = `M${from.x} ${from.y} A ${radius} ${radius} 0 1 0 ${end.x} ${end.y} L${to.x} ${to.y}`;
-      }
+      const radius = (dis / 2) / Math.sin(angle / 2);
+      path = `M${from.x} ${from.y} A ${radius} ${radius} 0 1 0 ${end.x} ${end.y} L${to.x} ${to.y}`;
     }
     line.data.fromX = src.x;
     line.data.fromY = src.y;
@@ -279,7 +267,11 @@ const Path: LineRender = {
     }
     return svgEl;
   },
-  checkNewLine() {
+  checkNewLine(data) {
+    const { from, to, fromPoint, toPoint } = data;
+    if (from === to && fromPoint === toPoint) {
+      return false;
+    }
     return true;
   },
 };

app/pages/SketchModeling/Plugins/SketchShapes/index.module.less

@@ -27,17 +27,22 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  max-height: 100%;
   >span {
+    max-width: 80px;
+    height: 100%;
     padding-right: 15px;
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
     min-height: 10px;
-    display: inline-block;
-    max-width: 80px;
+    display: -webkit-box;
     white-space: pre-wrap;
     word-break: break-word;
-    height: 100%;
+    user-select: none;
+    line-height: 12px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
   .invalid {
     width: 10px;