fix: live preview connection

examples/x6-example-features/src/pages/flowchart/util.ts

@@ -1,14 +1,12 @@
-import { Cell, Graph, Anchor, Point } from '@antv/x6'
+import { Cell, Graph, Anchor, Point, Style } from '@antv/x6'
 import { DataItem, isCircle, isGroup, data } from './data'
 
 export function createGraph(container: HTMLDivElement) {
   return new Graph(container, {
-    guide: true,
     rotate: false,
     resize: true,
     folding: false,
-    infinite: true,
-    minScale: 0.1,
+    infinite: true, // 无限大画布
     // pageVisible: true,
     // pageBreak: {
     //   enabled: true,
@@ -21,20 +19,27 @@ export function createGraph(container: HTMLDivElement) {
     // },
     // mouseWheel: true,
     rubberband: true,
-    connection: {
-      enabled: true,
-      ignoreMouseDown: true,
-    },
-    connectionHighlight: {
-      hotspotable: true,
-      hotspot: 0,
-      minHotspotSize: 0,
-    },
     backgroundColor: '#f8f9fa',
     grid: {
       type: 'dot',
-      color: '#ccc',
+      color: '#bcbcbc',
+    },
+    guide: {
+      enabled: true,
+      dashed: true,
+      stroke: '#ff5500',
+    },
+    connection: {
+      enabled: true,
+      hotspotable: false,
+      livePreview: true,
+      createEdge(this, options) {
+        const style = options.style
+        fixEdgeStyle(style, style)
+        return this.createEdge(options)
+      },
     },
+    connectionHighlight: {},
     keyboard: {
       enabled: true,
       global: false,
@@ -45,7 +50,7 @@ export function createGraph(container: HTMLDivElement) {
       strokeWidth: 2,
     },
     nodeStyle: {
-      fill: 'rgba(0,0,0,0)',
+      fill: 'rgba(0, 0, 0, 0)',
       stroke: 'none',
       noLabel: true,
       editable: false,
@@ -119,6 +124,18 @@ export function addNode(
   })
 }
 
+function fixEdgeStyle(raw: Style, result: Style) {
+  if (raw.entryX === 1 || raw.entryX === 0) {
+    result.elbow = 'horizontal'
+  }
+}
+
+export function addEdge(graph: Graph, options: any) {
+  const style: Style = {}
+  fixEdgeStyle(options, style)
+  graph.addEdge({ ...options, style })
+}
+
 export function demo(graph: Graph) {
   graph.batchUpdate(() => {
     const start = addNode(graph, data.map['start'], 372, 32)
@@ -169,66 +186,55 @@ export function demo(graph: Graph) {
       batch,
     )
 
-    graph.addEdge({
+    addEdge(graph, {
       source: start,
       target: process1,
-      style: {
-        exitX: 0.5,
-        exitY: 1,
-        entryX: 0.5,
-        entryY: 0,
-      },
+      exitX: 0.5,
+      exitY: 1,
+      entryX: 0.5,
+      entryY: 0,
     })
 
-    graph.addEdge({
+    addEdge(graph, {
       data: '同意',
       source: process1,
       target: process2,
-      style: {
-        exitX: 0.5,
-        exitY: 1,
-        entryX: 0.5,
-        entryY: 0,
-      },
+      exitX: 0.5,
+      exitY: 1,
+      entryX: 0.5,
+      entryY: 0,
     })
 
-    graph.addEdge({
+    addEdge(graph, {
       source: process2,
       target: process3,
-      style: {
-        exitX: 0.5,
-        exitY: 1,
-        entryX: 0.5,
-        entryY: 0,
-      },
+      exitX: 0.5,
+      exitY: 1,
+      entryX: 0.5,
+      entryY: 0,
     })
 
-    graph.addEdge({
+    addEdge(graph, {
       source: process3,
       target: end,
-      style: {
-        exitX: 0.5,
-        exitY: 1,
-        entryX: 0.5,
-        entryY: 0,
-      },
+      exitX: 0.5,
+      exitY: 1,
+      entryX: 0.5,
+      entryY: 0,
     })
 
-    graph.addEdge({
+    addEdge(graph, {
       data: '驳回',
       source: process1,
       target: end,
       points: [
         { x: 700, y: 144 },
         { x: 700, y: 508 },
       ],
-      style: {
-        edge: 'orthogonal',
-        exitX: 1,
-        exitY: 0.5,
-        entryX: 1,
-        entryY: 0.5,
-      },
+      exitX: 1,
+      exitY: 0.5,
+      entryX: 1,
+      entryY: 0.5,
     })
   })
 }

packages/x6/src/handler/connection/handler.ts

@@ -3,6 +3,7 @@ import { Style } from '../../types'
 import { Graph } from '../../graph'
 import { Cell } from '../../core/cell'
 import { View } from '../../core/view'
+import { State } from '../../core/state'
 import { Model } from '../../core/model'
 import { Geometry } from '../../core/geometry'
 import { MouseHandler } from '../handler-mouse'
@@ -14,7 +15,8 @@ export class ConnectionHandler extends MouseHandler {
   knobs: Knobs
   preview: Preview
 
-  factoryMethod?: (e: { source: Cell; target: Cell; style: Style }) => Cell
+  createEdgeManual?: (e: { source: Cell; target: Cell; style: Style }) => Cell
+  createEdgeState?: (e: MouseEventEx | null) => State | null
 
   autoSelect: boolean = true
   autoCreateTarget: boolean = false
@@ -70,7 +72,7 @@ export class ConnectionHandler extends MouseHandler {
     const options = this.graph.options.connection
 
     this.cursor = options.cursor
-    this.factoryMethod = options.createEdge
+    this.createEdgeManual = options.createEdge
     this.livePreview = options.livePreview
     this.autoSelect = options.autoSelect
     this.autoCreateTarget = options.autoCreateTarget
@@ -299,7 +301,7 @@ export class ConnectionHandler extends MouseHandler {
 
         if (edgeState != null) {
           data = edgeState.cell.data
-          style = edgeState.cell.style
+          style = edgeState.style // use mutated style
         }
 
         edge = this.insertEdge(parent, null, data, source, target!, style)
@@ -396,7 +398,7 @@ export class ConnectionHandler extends MouseHandler {
     target: Cell,
     style: Style,
   ) {
-    if (this.factoryMethod == null) {
+    if (this.createEdgeManual == null) {
       return this.graph.addEdge({ parent, id, data, source, target, style })
     }
 
@@ -409,9 +411,8 @@ export class ConnectionHandler extends MouseHandler {
   protected createEdge(data: any, source: Cell, target: Cell, style: Style) {
     let edge = null
 
-    // Creates a new edge using the factoryMethod
-    if (this.factoryMethod != null) {
-      edge = this.factoryMethod({ source, target, style })
+    if (this.createEdgeManual != null) {
+      edge = this.createEdgeManual.call(this.graph, { source, target, style })
     }
 
     if (edge == null) {

packages/x6/src/handler/connection/option.ts

@@ -15,12 +15,13 @@ import {
 
 export interface ConnectionOptions {
   enabled: boolean
+
   /**
    * Function that is used for creating new edges.
    */
   createEdge?: (
     this: Graph,
-    e: { source: Cell; target: Cell; style: Style },
+    args: { source: Cell; target: Cell; style: Style },
   ) => Cell
 
   /**
@@ -256,7 +257,7 @@ export function applyConnectionPreviewStyle(
   args: ApplyConnectionPreviewStyleArgs,
 ) {
   const { graph } = args
-  const options = graph.options.connectionPreview as ConnectionPreviewOptions
+  const options = graph.options.connectionPreview
 
   applyBaseStyle(args, options)
   applyClassName(args, options, 'connection-preview')

packages/x6/src/handler/connection/preview.ts

@@ -545,6 +545,7 @@ export class Preview extends Disposable {
     return (
       c1 == null ||
       c2 == null ||
+      c1 !== c2 ||
       c1.point == null ||
       c2.point == null ||
       !c1.point.equals(c2.point) ||
@@ -585,7 +586,10 @@ export class Preview extends Disposable {
   }
 
   createEdgeState(e: MouseEventEx | null): State | null {
-    return null
+    const style = this.graph.options.edgeStyle
+    const edge = this.graph.createEdge({ ...style })
+    const state = new State(this.graph.view, edge, style)
+    return state
   }
 
   protected createPreview() {

packages/x6/src/option/preset.ts

@@ -345,10 +345,10 @@ export const preset: FullOptions = {
   connectionPreview: {
     opacity: 1,
     fill: 'none',
-    dashed: true,
-    strokeWidth: 2,
+    dashed: ({ livePreview }) => (livePreview ? false : true),
+    strokeWidth: ({ livePreview }) => (livePreview ? 1 : 2),
     stroke: ({ valid }) =>
-      valid ? globals.defaultValidColor : globals.defaultInvalidColor,
+      valid ? globals.defaultPrimaryColor : globals.defaultInvalidColor,
   },
 
   edgeHandle: {