fix: don't hide when click on color picker (#3172)

* fix: onMousedown add event notify

* fix: onMousedown add super event notify

* fix: use notifyMouseDown

---------

Co-authored-by: seven <lijianqiang.seven@bytedance.com>

CONTRIBUTORS

@@ -30,6 +30,7 @@ RuiLin <on>
 SSC <273702440@qq.com>
 Simon <>
 Sindori <441933726@qq.com>
+Struggle <ou>
 Susan <527971893@qq.com>
 Thomas <eugne>
 Tony <>

packages/x6-react-components/src/color-picker/index.tsx

@@ -37,7 +37,9 @@ export class ColorPicker extends React.Component<
 
   onDocumentClick = (e: React.MouseEvent) => {
     const target = e.target as HTMLDivElement
-    if (target === this.container || this.container.contains(target)) {
+    const picker = this.container.querySelector('.sketch-picker')!
+
+    if (target === picker || picker.contains(target)) {
       return
     }
 
@@ -59,12 +61,9 @@ export class ColorPicker extends React.Component<
     if (this.props.onChange) {
       this.props.onChange(value, event)
     }
-
     this.setState({
-      active: false,
       color: value.rgb,
     })
-    this.unbindDocEvent()
   }
 
   handleClick = (e: React.MouseEvent) => {
@@ -84,8 +83,10 @@ export class ColorPicker extends React.Component<
     }
   }
 
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
+  refContainer = (popoverRef: { getContainer: () => HTMLDivElement }) => {
+    if (popoverRef) {
+      this.container = popoverRef.getContainer()
+    }
   }
 
   renderPicker() {
@@ -123,10 +124,12 @@ export class ColorPicker extends React.Component<
         {...popoverProps}
         content={this.renderPicker()}
         overlayClassName={`${baseCls}-overlay`}
+        destroyTooltipOnHide
+        ref={this.refContainer}
+        trigger={[]}
       >
         <div
           style={style}
-          ref={this.refContainer}
           onClick={this.handleClick}
           className={classNames(baseCls, {
             [`${baseCls}-disabled`]: disabled,

packages/x6/CHANGELOG.md

@@ -1,3 +1,5 @@
+## @antv/x6 [2.1.6](https://github.com/antvis/x6/compare/@antv/x6@2.1.5...@antv/x6@2.1.6) (2023-01-19)
+
 ## @antv/x6 [2.1.5](https://github.com/antvis/x6/compare/@antv/x6@2.1.4...@antv/x6@2.1.5) (2023-01-13)
 
 

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/src/graph/graph.ts

@@ -1193,15 +1193,9 @@ export class Graph extends Basecoat<EventArgs> {
   }
 
   getPlugin<T extends Graph.Plugin>(pluginName: string): T | undefined {
-    let result: Graph.Plugin | undefined
-
-    this.installedPlugins.forEach((plugin) => {
-      if (plugin.name === pluginName) {
-        result = plugin
-      }
-    })
-
-    return result as T
+    return Array.from(this.installedPlugins).find(
+      (plugin) => plugin.name === pluginName,
+    ) as T
   }
 
   // #endregion

packages/x6/src/view/edge.ts

@@ -1398,6 +1398,7 @@ export class EdgeView<
   }
 
   onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
+    this.notifyMouseDown(e, x, y)
     this.startEdgeDragging(e, x, y)
   }
 
@@ -2191,7 +2192,9 @@ export class EdgeView<
     for (let i = 0, ii = cells.length; i < ii; i += 1) {
       const view = graph.findViewByCell(cells[i])
 
-      if (!view) {
+      // Prevent highlighting new edge
+      // Close https://github.com/antvis/X6/issues/2853
+      if (!view || view.cell.id === this.cell.id) {
         continue
       }
 

sites/x6-sites/docs/tutorial/plugins/selection.zh.md

@@ -62,8 +62,8 @@ graph.use(
 | className                  | string         | -                  |      | 附加样式名，用于定制样式                                                                                                                       |
 | multiple                   | boolean        | `true`             |      | 是否启用点击多选，启用后按住 `ctrl` 或 `command` 键点击节点实现多选                                                                            |
 | multipleSelectionModifiers | ModifierKey    | `['ctrl', 'meta']` |      | 用于设置上面点击多选配套的修饰键                                                                                                               |
-| rubberband                 | boolean        | `false`            |      | 是否启用多选节点功能                                                                                                                           |
-| modifiers                  | ModifierKey    | -                  |      | 设置修饰键后需要点击鼠标并按下修饰键才能触发多选                                                                                               |
+| rubberband                 | boolean        | `false`            |      | 是否启用框选节点功能                                                                                                                           |
+| modifiers                  | ModifierKey    | -                  |      | 用于设置上面框选配套的修饰键                                                                                               |
 | strict                     | boolean        | `false`            |      | 选框是否需要完全包围节点时才选中节点                                                                                                           |
 | movable                    | boolean        | `true`             |      | 拖动选框时框选的节点是否一起移动                                                                                                               |
 | content                    | string         | -                  |      | 设置附加显示的内容                                                                                                                             |