feat: option of configing changable for edge terminal

default `false` fix #29
antvis · Jan 8, 2020 · 795d4e6 · 795d4e6
1 parent d49f848
commit 795d4e6
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 10 deletions.
diff --git a/packages/x6/src/handler/edge/handler-elbow.ts b/packages/x6/src/handler/edge/handler-elbow.ts
@@ -15,9 +15,10 @@ export class EdgeElbowHandler extends EdgeHandler {
     const handles = []
 
     // Source
-    let handle = this.createHandleShape(0)
-    this.initHandle(handle)
-    handles.push(handle)
+    const sourceHandle = this.createHandleShape(0)
+    this.initHandle(sourceHandle)
+    this.setTerminalHandle(sourceHandle)
+    handles.push(sourceHandle)
 
     // Virtual
     handles.push(
@@ -32,9 +33,10 @@ export class EdgeElbowHandler extends EdgeHandler {
     this.points!.push(new Point(0, 0))
 
     // Target
-    handle = this.createHandleShape(2)
-    this.initHandle(handle)
-    handles.push(handle)
+    const targetHandle = this.createHandleShape(2)
+    this.initHandle(targetHandle)
+    this.setTerminalHandle(targetHandle)
+    handles.push(targetHandle)
 
     return handles
   }
@@ -118,9 +120,18 @@ export class EdgeElbowHandler extends EdgeHandler {
       )
     }
 
+    if (this.handles == null) {
+      return
+    }
+
+    const handle = this.handles[1]
+    if (handle == null) {
+      return
+    }
+
     // Makes handle slightly bigger if the yellow  label handle
     // exists and intersects this green handle
-    const b = this.handles![1]!.bounds
+    const b = handle.bounds
     let w = b.width
     let h = b.height
     let bounds = new Rectangle(
@@ -147,11 +158,11 @@ export class EdgeElbowHandler extends EdgeHandler {
       )
     }
 
-    this.handles![1]!.bounds = bounds
-    this.handles![1]!.redraw()
+    handle.bounds = bounds
+    handle.redraw()
 
     if (this.manageLabelHandle) {
-      this.checkLabelHandle(this.handles![1]!.bounds)
+      this.checkLabelHandle(handle.bounds)
     }
   }
 }
diff --git a/packages/x6/src/handler/edge/handler-segment.ts b/packages/x6/src/handler/edge/handler-segment.ts
@@ -256,6 +256,7 @@ export class EdgeSegmentHandler extends EdgeElbowHandler {
     // Source
     let handle = this.createHandleShape(0)
     this.initHandle(handle)
+    this.setTerminalHandle(handle)
     handles.push(handle)
 
     const pts = this.getCurrentPoints()
@@ -284,6 +285,7 @@ export class EdgeSegmentHandler extends EdgeElbowHandler {
     // Target
     handle = this.createHandleShape(pts.length)
     this.initHandle(handle)
+    this.setTerminalHandle(handle)
     handles.push(handle)
 
     return handles

diff --git a/packages/x6/src/handler/edge/handler.ts b/packages/x6/src/handler/edge/handler.ts
@@ -44,6 +44,11 @@ export class EdgeHandler extends MouseHandler {
   labelHandleShape: Shape | null
   error: string | null = null
 
+  /**
+   * Specifies if change the terminal is enabled.
+   */
+  changable: boolean = false
+
   /**
    * Specifies if cloning by control-drag is enabled.
    *
@@ -170,6 +175,7 @@ export class EdgeHandler extends MouseHandler {
       graph: this.graph,
       cell: this.state.cell,
     })
+    this.changable = options.changable
     this.cloneable = options.cloneable
     this.addable = options.addable
     this.removable = options.removable
@@ -311,6 +317,9 @@ export class EdgeHandler extends MouseHandler {
           })(i)
 
           this.initHandle(handle, dblClick)
+          if (isTerminal) {
+            this.setTerminalHandle(handle)
+          }
 
           if (this.isHandleEnabled(i)) {
             const cursor = getEdgeHandleCursor({
@@ -340,6 +349,14 @@ export class EdgeHandler extends MouseHandler {
     return handles
   }
 
+  protected setTerminalHandle(handle: Shape) {
+    if (this.changable) {
+      DomUtil.show(handle.elem)
+    } else {
+      DomUtil.hide(handle.elem)
+    }
+  }
+
   protected isVirtualHandlesEnabled() {
     return (
       this.virtualHandlesEnabled &&

diff --git a/packages/x6/src/handler/edge/option.ts b/packages/x6/src/handler/edge/option.ts
@@ -19,6 +19,11 @@ export interface EdgeHandleOptions
     HandleOptions<CreateEdgeHandleShapeArgs, ApplyEdgeHandleStyleArgs> {
   cursor: OptionItem<GetEdgeHandleCursorArgs, string>
 
+  /**
+   * Specifies if change the terminal is enabled.
+   */
+  changable: OptionItem<GetEdgeHandleOptionsArgs, boolean>
+
   /**
    * Specifies if cloning by control-drag is enabled.
    *
@@ -91,6 +96,7 @@ export function getEdgeHandleOptions(args: GetEdgeHandleOptionsArgs) {
   const { graph } = args
   const options = graph.options.edgeHandle
   return {
+    changable: drill(options.changable, graph, args),
     cloneable: drill(options.cloneable, graph, args),
     addable: drill(options.addable, graph, args),
     removable: drill(options.removable, graph, args),

diff --git a/packages/x6/src/option/preset.ts b/packages/x6/src/option/preset.ts
@@ -374,6 +374,7 @@ export const preset: FullOptions = {
   },
 
   edgeHandle: {
+    changable: false,
     cloneable: false,
     addable: false,
     removable: false,