fix: 🐛 should support multi knobs

packages/x6/src/addon/knob/index.ts

@@ -16,7 +16,14 @@ export class Knob extends Widget<Knob.Options> {
   }
 
   protected get metadata() {
-    return this.cell.prop('knob') as Knob.Metadata
+    const meta = this.cell.prop('knob')
+    if (Array.isArray(meta)) {
+      if (this.options.index != null) {
+        return meta[this.options.index]
+      }
+      return null
+    }
+    return meta as Knob.Metadata
   }
 
   protected init(options: Knob.Options) {
@@ -42,6 +49,8 @@ export class Knob extends Widget<Knob.Options> {
     this.view.on('node:rotate:mousedown', this.onTransform, this)
     this.view.on('node:resize:mouseup', this.onTransformed, this)
     this.view.on('node:rotate:mouseup', this.onTransformed, this)
+    this.view.on('cell:knob:mousedown', this.onKnobMouseDown, this)
+    this.view.on('cell:knob:mouseup', this.onKnobMouseUp, this)
 
     super.startListening()
   }
@@ -60,6 +69,8 @@ export class Knob extends Widget<Knob.Options> {
     this.view.off('node:rotate:mousedown', this.onTransform, this)
     this.view.off('node:resize:mouseup', this.onTransformed, this)
     this.view.off('node:rotate:mouseup', this.onTransformed, this)
+    this.view.off('cell:knob:mousedown', this.onKnobMouseDown, this)
+    this.view.off('cell:knob:mouseup', this.onKnobMouseUp, this)
 
     super.stopListening()
   }
@@ -93,14 +104,32 @@ export class Knob extends Widget<Knob.Options> {
     }
   }
 
-  protected onTransform() {
+  protected hide() {
     this.container.style.display = 'none'
   }
 
-  protected onTransformed() {
+  protected show() {
     this.container.style.display = ''
   }
 
+  protected onTransform() {
+    this.hide()
+  }
+
+  protected onTransformed() {
+    this.show()
+  }
+
+  protected onKnobMouseDown({ knob }: { knob: Knob }) {
+    if (this.cid !== knob.cid) {
+      this.hide()
+    }
+  }
+
+  protected onKnobMouseUp() {
+    this.show()
+  }
+
   protected notify(name: string, evt: JQuery.TriggeredEvent) {
     if (this.view) {
       const e = this.view.normalizeEvent(evt) as JQuery.MouseDownEvent
@@ -112,6 +141,7 @@ export class Knob extends Widget<Knob.Options> {
         cell: this.cell,
         x: localPoint.x,
         y: localPoint.y,
+        knob: this,
       })
 
       if (this.cell.isNode()) {
@@ -122,6 +152,7 @@ export class Knob extends Widget<Knob.Options> {
           cell: this.cell,
           x: localPoint.x,
           y: localPoint.y,
+          knob: this,
         })
       } else if (this.cell.isEdge()) {
         this.view.notify(`edge:${name}`, {
@@ -131,6 +162,7 @@ export class Knob extends Widget<Knob.Options> {
           cell: this.cell,
           x: localPoint.x,
           y: localPoint.y,
+          knob: this,
         })
       }
     }
@@ -214,6 +246,7 @@ export class Knob extends Widget<Knob.Options> {
 export namespace Knob {
   export interface Options extends Widget.Options {
     className?: string
+    index?: number
   }
 
   interface UpdateArgs {

packages/x6/src/graph/hook.ts

@@ -147,7 +147,8 @@ export class Hook extends Base implements Hook.IHook {
         ...options,
         ...widgetOptions,
       })
-    }  if (options.clearAll) {
+    }
+    if (options.clearAll) {
       Transform.removeInstances(this.graph)
     }
 
@@ -171,31 +172,41 @@ export class Hook extends Base implements Hook.IHook {
       Knob.removeInstances(this.graph)
     }
 
-    const knob = node.prop('knob') as Knob.Metadata
-    if (knob) {
-      if (knob.enabled === false) {
-        return null
-      }
+    localOptions.clearAll = false
+
+    const knob = node.prop('knob') as Knob.Metadata | Knob.Metadata[]
+    const widgets: Knob[] = []
+    const meta = Array.isArray(knob) ? knob : [knob]
+
+    meta.forEach((knob, index) => {
+      if (knob) {
+        if (knob.enabled === false) {
+          return
+        }
 
-      if (
-        typeof knob.enabled === 'function' &&
-        knob.enabled.call(this.graph, node) === false
-      ) {
-        return null
+        if (
+          typeof knob.enabled === 'function' &&
+          knob.enabled.call(this.graph, node) === false
+        ) {
+          return
+        }
+      } else {
+        return
       }
-    } else {
-      return null
-    }
 
-    if (options.enabled) {
-      return new Knob({
-        node,
-        graph: this.graph,
-        ...localOptions,
-      })
-    }
+      if (options.enabled) {
+        widgets.push(
+          new Knob({
+            node,
+            index,
+            graph: this.graph,
+            ...localOptions,
+          }),
+        )
+      }
+    })
 
-    return null
+    return widgets
   }
 
   protected getTransformOptions(node: Node) {

packages/x6/src/graph/knob.ts

@@ -4,7 +4,7 @@ import { Base } from './base'
 import { EventArgs } from './events'
 
 export class KnobManager extends Base {
-  protected widgets: Map<Node, Knob> = new Map()
+  protected widgets: Map<Node, Knob[]> = new Map()
 
   protected get isSelectionEnabled() {
     return this.options.selecting.enabled === true
@@ -28,27 +28,27 @@ export class KnobManager extends Base {
 
   protected onNodeMouseUp({ node }: EventArgs['node:mouseup']) {
     if (!this.isSelectionEnabled) {
-      const widget = this.graph.hook.createKnob(node, { clearAll: true })
-      if (widget) {
-        this.widgets.set(node, widget)
+      const widgets = this.graph.hook.createKnob(node, { clearAll: true })
+      if (widgets) {
+        this.widgets.set(node, widgets)
       }
     }
   }
 
   protected onNodeSelected({ node }: EventArgs['node:selected']) {
     if (this.isSelectionEnabled) {
-      const widget = this.graph.hook.createKnob(node, { clearAll: false })
-      if (widget) {
-        this.widgets.set(node, widget)
+      const widgets = this.graph.hook.createKnob(node, { clearAll: false })
+      if (widgets) {
+        this.widgets.set(node, widgets)
       }
     }
   }
 
   protected onNodeUnSelected({ node }: EventArgs['node:unselected']) {
     if (this.isSelectionEnabled) {
-      const widget = this.widgets.get(node)
-      if (widget) {
-        widget.dispose()
+      const widgets = this.widgets.get(node)
+      if (widgets) {
+        widgets.forEach((widget) => widget.dispose())
       }
       this.widgets.delete(node)
     }

packages/x6/src/model/cell.ts

@@ -1379,7 +1379,7 @@ export namespace Cell {
     zIndex?: number
     visible?: boolean
     data?: any
-    knob?: Knob.Metadata
+    knob?: Knob.Metadata | Knob.Metadata[]
   }
 
   export interface Defaults extends Common {}