backup

package.json

@@ -25,6 +25,7 @@
     "css-border-property": "^1.1.0",
     "dateformat": "^5.0.3",
     "dayjs": "^1.11.7",
+    "insert-css": "^2.0.0",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "react": "^18.2.0",
@@ -67,6 +68,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.0.0",
+    "@types/insert-css": "^2.0.1",
     "@types/lodash": "^4.14.190",
     "@types/react-color": "^3.0.6",
     "@types/styled-components": "^5.1.26",

src/react-shells/ant5/SettingsForm/components/ReactionsInput/ReactionsEditor/components/ReactionNode.tsx

@@ -3,8 +3,30 @@ import '@antv/x6-react-shape'
 import { GlobalToken } from 'antd/es/theme/interface'
 import { IReactionMaterial } from 'runner/reaction/interfaces/material'
 import { IReactionNodeMeta } from 'runner/reaction/interfaces/metas'
+import { insertCss } from 'insert-css'
 import styled from 'styled-components'
 
+insertCss(`
+.x6-node-selected .node{
+  box-shadow: 0 0 0 4px rgba(24,144,255, 0.4);
+}
+
+.x6-node-selected .start-node, .x6-node-selected .end-node {
+  outline: solid rgba(24,144,255, 0.4) 4px;
+}
+
+.x6-edge:hover path:nth-child(2){
+  stroke: #1890ff;
+  stroke-width: 1px;
+}
+
+.x6-edge-selected path:nth-child(2){
+  stroke: #1890ff;
+  stroke-width: 1.5px !important;
+}
+
+`)
+
 const NodeView = styled.div`
   display: flex;
   align-items: center;
@@ -45,6 +67,7 @@ export const ReactionNode = (props: { node?: Node }) => {
 
   return (
     <NodeView
+      className='node'
       style={{
         backgroundColor: token.colorBgContainer,
         color: token.colorText,

src/react-shells/ant5/SettingsForm/components/ReactionsInput/ReactionsEditor/hooks/getEndNodeConfig.ts

@@ -19,6 +19,7 @@ export const getEndNodeConfig = (nodeMeta: IReactionNodeMeta, token: GlobalToken
         stroke: token.colorText,
         strokeWidth: STROKE_WIDTH,
         magnet: true,
+        class: 'end-node',
       },
       label: {
         refX: '100%',

src/react-shells/ant5/SettingsForm/components/ReactionsInput/ReactionsEditor/hooks/getStartNodeConfig.ts

@@ -19,6 +19,7 @@ export const getStartNodeConfig = (reactionNodeMeta: IReactionNodeMeta, token: G
         stroke: '#5e76c3',
         strokeWidth: STROKE_WIDTH,
         magnet: true,
+        class: "start-node",
       },
       label: {
         refX: '-10',

yarn.lock

@@ -2183,6 +2183,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/insert-css@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/@types/insert-css/-/insert-css-2.0.1.tgz#742574b45c0e90615e56bc83ac7976ee21a6b3fc"
+  integrity sha512-slUriXg8Y0JvpQoZlQ96bzzi86AU0DvtstKmGtBWpzJilFnpMUDbREi28Gpa+ZaIrTTCQUfvpDS7z7F1uwlYjQ==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.npmmirror.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -5519,6 +5524,11 @@ ini@^1.3.5:
   resolved "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+insert-css@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
+  integrity sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==
+
 internal-slot@^1.0.3, internal-slot@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.4.tgz#8551e7baf74a7a6ba5f749cfb16aa60722f0d6f3"