fix: 🐛 change port cursor style when is not magnet

packages/x6/src/graph/hook.ts

@@ -434,7 +434,7 @@ export class Hook extends Base implements Hook.IHook {
   validateMagnet(
     cellView: CellView,
     magnet: Element,
-    e: JQuery.MouseDownEvent,
+    e: JQuery.MouseDownEvent | JQuery.MouseEnterEvent,
   ) {
     if (magnet.getAttribute('magnet') !== 'passive') {
       const validate = this.options.connecting.validateMagnet

packages/x6/src/graph/options.ts

@@ -358,7 +358,7 @@ export namespace Options {
         cell: Cell
         view: CellView
         magnet: Element
-        e: JQuery.MouseDownEvent
+        e: JQuery.MouseDownEvent | JQuery.MouseEnterEvent
       },
     ) => boolean
 

packages/x6/src/style/raw.ts

@@ -53,6 +53,9 @@ export const content = `.x6-graph {
 .x6-node [magnet='true']:hover {
   opacity: 0.7;
 }
+.x6-node .x6-port-unconnectable {
+  cursor: default;
+}
 .x6-node foreignObject {
   display: block;
   overflow: visible;

packages/x6/src/view/node.ts

@@ -39,12 +39,27 @@ export class NodeView<
     return classList.join(' ')
   }
 
-  protected updateClassName() {
-    const className = this.prefixClassName('node-immovable')
-    if (this.can('nodeMovable')) {
-      this.removeClass(className)
+  protected updateClassName(e: JQuery.MouseEnterEvent) {
+    const target = e.target
+    if (target.hasAttribute('magnet')) {
+      // port
+      const className = this.prefixClassName('port-unconnectable')
+      if (
+        this.can('magnetConnectable') &&
+        this.graph.hook.validateMagnet(this, target, e)
+      ) {
+        Dom.removeClass(target, className)
+      } else {
+        Dom.addClass(target, className)
+      }
     } else {
-      this.addClass(className)
+      // node
+      const className = this.prefixClassName('node-immovable')
+      if (this.can('nodeMovable')) {
+        this.removeClass(className)
+      } else {
+        this.addClass(className)
+      }
     }
   }
 
@@ -679,7 +694,7 @@ export class NodeView<
   }
 
   onMouseEnter(e: JQuery.MouseEnterEvent) {
-    this.updateClassName()
+    this.updateClassName(e)
     super.onMouseEnter(e)
     this.notify('node:mouseenter', this.getEventArgs(e))
   }