wans

package-lock.json

@@ -1359,6 +1359,11 @@
         "postcss": "^7.0.0"
       }
     },
+    "@jsplumb/browser-ui": {
+      "version": "6.2.10",
+      "resolved": "https://registry.npmmirror.com/@jsplumb/browser-ui/-/browser-ui-6.2.10.tgz",
+      "integrity": "sha512-trk++mK5q6hceJL79teemzcilJ+8DrZT/lMK0+B80AtHqZHr0YwMCf+so2JBb2Z/MDZ0fUEU9MbELY6OPhhs5g=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@antv/data-set": "^0.10.2",
     "@antv/g2": "^4.0.11",
+    "@jsplumb/browser-ui": "^6.2.10",
     "@sven0706/websocket": "^1.0.1",
     "@toast-ui/calendar": "^2.1.3",
     "ant-design-vue": "^1.7.8",

src/views/test/Test1.vue

@@ -2,35 +2,104 @@
   <a-row :gutter="10">
     <a-col :span="5">
     </a-col>
-    <a-col :span="19"></a-col>
+    <a-col :span="19">
+      <div ref="container" class="box">
+        <div class="node" ref="node1">node1</div>
+        <div class="node" ref="node2">node2</div>
+        <div class="node" ref="node3">node3</div>
+      </div>
+    </a-col>
   </a-row>
 </template>
 
 <script>
-import jsPlumb from 'jsplumb'
+// import jsPlumb from 'jsplumb'
+import { ready, newInstance } from '@jsplumb/browser-ui'
 export default {
-  data () {
+  data() {
     return {
-      jsPlumb: null
+      jsPlumb: null,
+      instance: null,
     }
   },
-  mounted () {
-    this.jsPlumb = jsPlumb.getInstance({
-      Container: 'canvas'
-    })
+  mounted() {
+    this.init()
   },
+  created() {},
   methods: {
-    init () {
+    init() {
+      let { instance } = this
       // 初始化连接线
-      this.jsPlumb.ready(() => {
+      ready(() => {
         // 设置连接线样式
-        this.jsPlumb.setConnector('Bezier', { curviness: 100 })
+        return {
+          Connector: ['Bezier', { curviness: 100 }],
+          PaintStyle: { stroke: '#56777', strokeWidth: 2 },
+          HoverPaintStyle: { stroke: '#56777', strokeWidth: 4 },
+          EndpointStyle: { radius: 9, fill: '#56777' },
+          EndpointHoverStyle: { fill: '#222' },
+        }
       })
-    }
-  }
+      // 初始化节点
+      instance = newInstance({
+        container: this.$refs.container,
+        dragOptions: {
+          containment: 'parent',
+          containmentPadding: 10,
+          grid: { w: 10, h: 10 },
+        },
+      })
+      const ep1 = instance.addEndpoint(this.$refs.node1, { target: true, source: true, endpoint: 'Dot' })
+      const ep2 = instance.addEndpoint(this.$refs.node2, { target: true, source: true, endpoint: 'Dot' })
+      const ep3 = instance.addEndpoint(this.$refs.node3, { target: true, source: true, endpoint: 'Dot' })
+      instance.importDefaults({
+        anchor: 'AutoDefault',
+        // 连接器类型，这里设置为Flowchart
+        connector: 'Flowchart',
+        // 添加两个标签和箭头
+        overlays: [{ type: 'Arrow', options: { location: 1 } }],
+      })
+      // 连接三个端点
+      instance.connect({
+        // 获取节点1和节点2的引用
+        source: this.$refs.node1,
+        target: this.$refs.node2,
+        // 连接方式，这里设置为连续
+        anchor: 'AutoDefault',
+        // 连接器类型，这里设置为Flowchart
+        connector: 'Flowchart',
+        // 添加两个标签和箭头
+        overlays: [
+          { type: 'Label', options: { label: 'Connection 1', location: 0.5 } },
+          { type: 'Arrow', options: { location: 1 } },
+        ],
+      })
+      instance.connect({
+        source: this.$refs.node2,
+        target: this.$refs.node3,
+        connector: 'Flowchart',
+        anchor: 'AutoDefault',
+        overlays: [
+          { type: 'Label', options: { label: 'Connection 2', location: 0.5 } },
+          { type: 'Arrow', options: { location: 1 } },
+        ],
+      })
+    },
+  },
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+.box {
+  position: relative;
+  background: #fff;
+  width: 100%;
+  height: 500px;
+  .node {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    background: #ccc;
+  }
+}
 </style>

yarn.lock

@@ -587,6 +587,11 @@
   "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz"
   "version" "7.10.4"
 
+"@babel/parser@^7.23.5":
+  "integrity" "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q=="
+  "resolved" "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.6.tgz"
+  "version" "7.24.6"
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   "integrity" "sha512-MJbxGSmejEFVOANAezdO39SObkURO5o/8b6fSH6D1pi9RZQt+ldppKPXfqgUWpSQ9asM6xaSaSJIaeWMDRP0Zg=="
   "resolved" "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.4.tgz"
@@ -1246,6 +1251,11 @@
     "@types/prop-types" "*"
     "csstype" "^2.2.0"
 
+"@types/sortablejs@^1.15.8":
+  "integrity" "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg=="
+  "resolved" "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz"
+  "version" "1.15.8"
+
 "@types/source-list-map@*":
   "integrity" "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
   "resolved" "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz"
@@ -1507,6 +1517,17 @@
     "semver" "^6.0.0"
     "string.prototype.padstart" "^3.0.0"
 
+"@vue/compiler-sfc@2.7.16":
+  "integrity" "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg=="
+  "resolved" "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz"
+  "version" "2.7.16"
+  dependencies:
+    "@babel/parser" "^7.23.5"
+    "postcss" "^8.4.14"
+    "source-map" "^0.6.1"
+  optionalDependencies:
+    "prettier" "^1.18.2 || ^2.0.0"
+
 "@vue/component-compiler-utils@^3.0.0", "@vue/component-compiler-utils@^3.1.0":
   "integrity" "sha512-QLq9z8m79mCinpaEeSURhnNCN6djxpHw0lpP/bodMlt5kALfONpryMthvnrQOlTcIKoF+VoPi+lPHUYeDFPXug=="
   "resolved" "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz"
@@ -1975,7 +1996,7 @@
     "@types/color-name" "^1.1.1"
     "color-convert" "^2.0.1"
 
-"ant-design-vue@^1.4.5":
+"ant-design-vue@^1.7.8":
   "integrity" "sha512-F1hmiS9vwbyfuFvlamdW5l9bHKqRlj9wHaGDIE41NZMWXyWy8qL0UFa/+I0Wl8gQWZCqODW5pN6Yfoyn85At3A=="
   "resolved" "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.7.8.tgz"
   "version" "1.7.8"
@@ -3982,6 +4003,11 @@
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz"
   "version" "2.6.11"
 
+"csstype@^3.1.0":
+  "integrity" "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+  "resolved" "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz"
+  "version" "3.1.3"
+
 "current-script-polyfill@^1.0.0":
   "integrity" "sha1-8xz35PPiGLBybnOMqSoC00iO9hU="
   "resolved" "https://registry.npmjs.org/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz"
@@ -4170,8 +4196,8 @@
     "whatwg-url" "^11.0.0"
 
 "de-indent@^1.0.2":
-  "integrity" "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
-  "resolved" "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
+  "integrity" "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
+  "resolved" "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz"
   "version" "1.0.2"
 
 "deasync@^0.1.15":
@@ -6109,7 +6135,7 @@
     "inherits" "^2.0.3"
     "minimalistic-assert" "^1.0.1"
 
-"he@^1.1.0", "he@1.2.x":
+"he@^1.2.0", "he@1.2.x":
   "integrity" "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
   "resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   "version" "1.2.0"
@@ -8500,6 +8526,11 @@
     "object-assign" "^4.0.1"
     "thenify-all" "^1.0.0"
 
+"nanoid@^3.3.7":
+  "integrity" "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+  "resolved" "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz"
+  "version" "3.3.7"
+
 "nanomatch@^1.2.9":
   "integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
   "resolved" "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
@@ -9299,6 +9330,11 @@
   "resolved" "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
   "version" "2.1.0"
 
+"picocolors@^1.0.0":
+  "integrity" "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+  "resolved" "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz"
+  "version" "1.0.1"
+
 "picomatch@^2.0.4", "picomatch@^2.2.1":
   "integrity" "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
   "resolved" "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz"
@@ -9755,6 +9791,15 @@
     "source-map" "^0.6.1"
     "supports-color" "^6.1.0"
 
+"postcss@^8.4.14":
+  "integrity" "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A=="
+  "resolved" "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz"
+  "version" "8.4.38"
+  dependencies:
+    "nanoid" "^3.3.7"
+    "picocolors" "^1.0.0"
+    "source-map-js" "^1.2.0"
+
 "preact-render-to-string@^5.2.1":
   "integrity" "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw=="
   "resolved" "https://registry.npmmirror.com/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz"
@@ -9782,7 +9827,7 @@
   "resolved" "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz"
   "version" "0.2.0"
 
-"prettier@^1.18.2":
+"prettier@^1.18.2", "prettier@^1.18.2 || ^2.0.0":
   "integrity" "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
   "resolved" "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz"
   "version" "1.19.1"
@@ -11413,6 +11458,11 @@
   "resolved" "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
   "version" "2.0.1"
 
+"source-map-js@^1.2.0":
+  "integrity" "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
+  "resolved" "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz"
+  "version" "1.2.0"
+
 "source-map-resolve@^0.5.0", "source-map-resolve@^0.5.2":
   "integrity" "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw=="
   "resolved" "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz"
@@ -12625,6 +12675,13 @@
   dependencies:
     "vue-drag-resize" "^1.5.0-rc3"
 
+"vue-draggable-plus@^0.5.0":
+  "integrity" "sha512-A5TT5+M5JceROSjPO9aDZTsrSN1TetEs419czPlboomarSiGIBIxTp2WD7XH53EHMrbO7Qo+leRiHWV/rMlyjA=="
+  "resolved" "https://registry.npmmirror.com/vue-draggable-plus/-/vue-draggable-plus-0.5.0.tgz"
+  "version" "0.5.0"
+  dependencies:
+    "@types/sortablejs" "^1.15.8"
+
 "vue-eslint-parser@^2.0.3":
   "integrity" "sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw=="
   "resolved" "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz"
@@ -12715,10 +12772,10 @@
   "resolved" "https://registry.npmjs.org/vue-ref/-/vue-ref-2.0.0.tgz"
   "version" "2.0.0"
 
-"vue-router@^3.1.2":
-  "integrity" "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
-  "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz"
-  "version" "3.3.4"
+"vue-router@^3.6.5":
+  "integrity" "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+  "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz"
+  "version" "3.6.5"
 
 "vue-style-loader@^4.1.0":
   "integrity" "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ=="
@@ -12748,13 +12805,13 @@
     "loader-utils" "1.1.0"
     "vue-svg-component-builder" "2.0.3"
 
-"vue-template-compiler@^2.0.0", "vue-template-compiler@^2.6.0", "vue-template-compiler@^2.6.10", "vue-template-compiler@^2.x", "vue-template-compiler@>= 2.5.0", "vue-template-compiler@>=2.5.0":
-  "integrity" "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA=="
-  "resolved" "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz"
-  "version" "2.6.11"
+"vue-template-compiler@^2.0.0", "vue-template-compiler@^2.6.0", "vue-template-compiler@^2.7.16", "vue-template-compiler@^2.x", "vue-template-compiler@>= 2.5.0", "vue-template-compiler@>=2.5.0":
+  "integrity" "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ=="
+  "resolved" "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz"
+  "version" "2.7.16"
   dependencies:
     "de-indent" "^1.0.2"
-    "he" "^1.1.0"
+    "he" "^1.2.0"
 
 "vue-template-es2015-compiler@^1.6.0", "vue-template-es2015-compiler@^1.9.0":
   "integrity" "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
@@ -12766,15 +12823,18 @@
   "resolved" "https://registry.npmmirror.com/vue-ueditor-wrap/-/vue-ueditor-wrap-2.5.6.tgz"
   "version" "2.5.6"
 
-"vue@^2.0.0", "vue@^2.5.3", "vue@^2.6.0", "vue@^2.6.10", "vue@^2.x", "vue@>= 2.0", "vue@>= 2.5.0", "vue@>=2.5.0", "vue@2.x":
-  "integrity" "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
-  "resolved" "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz"
-  "version" "2.6.11"
+"vue@^2.0.0", "vue@^2.5.3", "vue@^2.6.0", "vue@^2.6.10", "vue@^2.7.16", "vue@^2.x", "vue@>= 2.0", "vue@>= 2.5.0", "vue@>=2.5.0", "vue@2.x":
+  "integrity" "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw=="
+  "resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz"
+  "version" "2.7.16"
+  dependencies:
+    "@vue/compiler-sfc" "2.7.16"
+    "csstype" "^3.1.0"
 
-"vuex@^3.1.1":
-  "integrity" "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
-  "resolved" "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz"
-  "version" "3.4.0"
+"vuex@^3.6.2":
+  "integrity" "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
+  "resolved" "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz"
+  "version" "3.6.2"
 
 "w3c-hr-time@^1.0.1":
   "integrity" "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ=="