fix: fix can not connect to node in(child) an html-connectable-node

antvis · Dec 13, 2019 · 1f44134 · 1f44134
1 parent 4a563d2
commit 1f44134
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 26 deletions.
diff --git a/packages/x6/src/core/renderer.ts b/packages/x6/src/core/renderer.ts
@@ -767,7 +767,6 @@ export class Renderer {
         bounds.width = Math.max(0, geo.bounds.width * scale)
         bounds.height = Math.max(0, geo.bounds.height * scale)
       }
-      console.log(spacing, bounds, state.text!.value)
     } else {
       // Inverts label position
       if (state.text!.drawBoundsInverted()) {

diff --git a/packages/x6/src/handler/anchor/handler.ts b/packages/x6/src/handler/anchor/handler.ts
@@ -15,7 +15,7 @@ export class AnchorHandler extends BaseHandler {
   currentArea: Rectangle | null
   currentAnchor: Anchor | null
 
-  protected icons: ImageShape[] | null
+  protected icons: Shape[] | null
   protected points: Point[] | null
   protected anchors: Anchor[] | null
   protected highlight: Shape | null
@@ -79,7 +79,7 @@ export class AnchorHandler extends BaseHandler {
     state: State,
     anchor: Anchor,
     point: Point,
-    icon?: ImageShape,
+    icon?: Shape,
   ) {
     const { image, cursor, className } = getAnchorOptions({
       anchor,
@@ -96,13 +96,13 @@ export class AnchorHandler extends BaseHandler {
     )
 
     if (icon == null) {
-      // tslint:disable-next-line
-      icon = new ImageShape(bounds, image.src)
-      icon.dialect = 'svg'
-      icon.preserveImageAspect = false
-      icon.init(this.graph.view.getDecoratorPane())
-      util.toBack(icon.elem)
+      const img = new ImageShape(bounds, image.src)
+      img.dialect = 'svg'
+      img.preserveImageAspect = false
+      img.init(this.graph.view.getDecoratorPane())
+      util.toBack(img.elem)
 
+      icon = img // tslint:disable-line
       const getState = () => this.currentState || state
       MouseEventEx.redirectMouseEvents(icon.elem, this.graph, getState)
     }
@@ -227,8 +227,8 @@ export class AnchorHandler extends BaseHandler {
           !this.currentArea.isIntersectWith(mouse)) &&
         state !== this.currentState
       ) {
-        this.currentState = null
         this.currentArea = null
+        this.currentState = null
         this.focus(e, state!, isSource)
       }
 
@@ -335,7 +335,7 @@ export class AnchorHandler extends BaseHandler {
   }
 
   protected intersects(
-    icon: ImageShape,
+    icon: Shape,
     mouse: Rectangle,
     isSource: boolean,
     existingEdge: boolean,

diff --git a/packages/x6/src/handler/anchor/option.ts b/packages/x6/src/handler/anchor/option.ts
@@ -3,9 +3,9 @@ import { Graph } from '../../graph'
 import { Shape, EllipseShape } from '../../shape'
 import { Image, Anchor, Point } from '../../struct'
 import {
+  drill,
   BaseStyle,
   OptionItem,
-  drill,
   applyBaseStyle,
   applyClassName,
   applyCursorStyle,

diff --git a/packages/x6/src/handler/connection/preview.ts b/packages/x6/src/handler/connection/preview.ts
@@ -154,7 +154,6 @@ export class Preview extends Disposable {
   protected onConnecting(e: MouseEventEx, point: Point) {
     // Update icon position when mouse-moving.
     this.master.knobs.updateIcon(e)
-
     const { sourcePoint, currentPoint } = this.updateTerminalPoints(e, point)
     this.updateTargetPoint(sourcePoint, currentPoint)
 
@@ -194,7 +193,7 @@ export class Preview extends Disposable {
 
   protected updateTerminalPoints(e: MouseEventEx, point: Point) {
     let sourcePoint = this.sourcePoint!
-    let currentPoint = point
+    let currentPoint = point.clone()
     let currentAnchor = null
 
     // Uses the fixed point from the anchor handler if available
@@ -224,8 +223,8 @@ export class Preview extends Disposable {
     if (this.edgeState != null) {
       this.updateEdgeState(currentPoint, currentAnchor)
       const lastIndex = this.edgeState.absolutePoints.length - 1
-      currentPoint = this.edgeState.absolutePoints[lastIndex]
       sourcePoint = this.edgeState.absolutePoints[0]
+      currentPoint = this.edgeState.absolutePoints[lastIndex]
     } else {
       if (this.currentState != null) {
         if (this.anchorHandler.currentAnchor == null) {

diff --git a/packages/x6/src/option/preset.ts b/packages/x6/src/option/preset.ts
@@ -332,6 +332,15 @@ export const preset: FullOptions = {
     offset: { x: 0, y: 16 },
   },
 
+  connectionPreview: {
+    opacity: 1,
+    fill: 'none',
+    dashed: ({ livePreview }) => (livePreview ? false : true),
+    strokeWidth: ({ livePreview }) => (livePreview ? 1 : 2),
+    stroke: ({ valid }) =>
+      valid ? globals.defaultPrimaryColor : globals.defaultInvalidColor,
+  },
+
   connectionHighlight: {
     validColor: globals.defaultValidColor,
     invalidColor: globals.defaultInvalidColor,
@@ -342,15 +351,6 @@ export const preset: FullOptions = {
     keepOnTop: false,
   },
 
-  connectionPreview: {
-    opacity: 1,
-    fill: 'none',
-    dashed: ({ livePreview }) => (livePreview ? false : true),
-    strokeWidth: ({ livePreview }) => (livePreview ? 1 : 2),
-    stroke: ({ valid }) =>
-      valid ? globals.defaultPrimaryColor : globals.defaultInvalidColor,
-  },
-
   edgeHandle: {
     cloneable: false,
     addable: false,

diff --git a/packages/x6/src/shape/html.ts b/packages/x6/src/shape/html.ts
@@ -8,14 +8,20 @@ export class HtmlShape extends RectangleShape {
     public markup: HTMLElement | string | null,
     public css: {
       [selector: string]: Partial<CSSStyleDeclaration>
-    }
+    },
   ) {
     super(new Rectangle())
   }
 
   drawBackground(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
     super.drawBackground(c, x, y, w, h)
-    this.renderHtml()
+    // HTML 节点踩了一个大坑：之前忘记下面这行判断，导致连线时连不到 Group 中的节点。
+    // 因为连线时首先触发了 Group 的连线判断，发现这个 Group 可以被连线，然后就自动
+    // 创建一个 CellHighlight 组件来高亮了该 Group，就是因为忘记下面这行代码，导致
+    // 所有的鼠标交互都被这个 CellHighlight 中的 foreignObject 捕获了。
+    if (!this.outline) {
+      this.renderHtml()
+    }
   }
 
   renderHtml() {