refactor(moving): ensure className used in movingHandler

#16 #41

packages/x6/src/handler/moving/handler.ts

@@ -7,14 +7,15 @@ import { MouseHandler } from '../handler-mouse'
 import { MouseEventEx, DomEvent, Disposable } from '../../common'
 
 export class MovingHandler extends MouseHandler {
-  protected preview: Preview
   protected onPan: (() => void) | null
   protected onEscape: (() => void) | null
   protected onRefresh: (() => void) | null
+  protected preview: Preview
   protected shouldConsumeMouseUp: boolean
 
   constructor(graph: Graph) {
     super(graph)
+
     this.preview = new Preview(this)
     this.onPan = () => this.preview.updatePreview()
     this.graph.on('pan', this.onPan)
@@ -61,9 +62,9 @@ export class MovingHandler extends MouseHandler {
   mouseUp(e: MouseEventEx) {
     if (!this.isConsumed(e)) {
       if (this.preview.isStarted() && this.preview.isMoved()) {
-        const graph = this.graph
         const cell = e.getCell()
         const evt = e.getEvent()
+        const graph = this.graph
         const target = this.preview.target
         const sourceCell = this.preview.cell!
 
@@ -77,14 +78,14 @@ export class MovingHandler extends MouseHandler {
         ) {
           graph.connectionHandler.connect(sourceCell, cell, evt, null)
         } else {
-          const clone = this.isClone(e)
-          const scale = graph.view.scale
-          const dx = movment.roundLength(this.preview.dx! / scale)
-          const dy = movment.roundLength(this.preview.dy! / scale)
+          const s = graph.view.scale
+          const dx = movment.roundLength(this.preview.dx! / s)
+          const dy = movment.roundLength(this.preview.dy! / s)
           const cells = this.preview.cells!
+          const clone = this.isClone(e)
 
           if (
-            target &&
+            target != null &&
             graph.isSplitEnabled() &&
             graph.isSplitTarget(target, cells, evt)
           ) {
@@ -233,12 +234,11 @@ export class MovingHandler extends MouseHandler {
     this.graph.removeMouseListener(this)
 
     this.graph.off('pan', this.onPan)
-    this.onPan = null
-
     this.graph.off('escape', this.onEscape)
-    this.onEscape = null
-
     this.graph.model.off('change', this.onRefresh)
+
+    this.onPan = null
+    this.onEscape = null
     this.onRefresh = null
 
     this.preview.dispose()

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

@@ -50,7 +50,7 @@ export interface ApplyMovingPreviewStyleArgs extends BaseArgs {
 }
 
 export function applyMovingPreviewStyle(args: ApplyMovingPreviewStyleArgs) {
-  const options = args.graph.options.movingPreview as MovingPreviewOptions
+  const options = args.graph.options.movingPreview
 
   applyBaseStyle(args, options)
   applyClassName(args, options, 'moving-preview')
@@ -74,7 +74,7 @@ export function applyDropTargetHighlightStyle(
   args: ApplyDropTargetHighlightStyleArgs,
 ) {
   const { graph, highlight } = args
-  const opts = graph.options.dropTargetHighlight as DropTargetHighlightOptions
+  const opts = graph.options.dropTargetHighlight
   highlight.highlightColor = drill(opts.stroke, graph, args)
   highlight.strokeWidth = drill(opts.strokeWidth, graph, args)
   highlight.dashed = drill(opts.dashed, graph, args)

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

@@ -14,17 +14,17 @@ import {
 
 export class Preview extends Disposable {
   /**
-   * Specifies the minimum number of pixels for the width and height of a
-   * selection bounds.
+   * Specifies the minimum number of pixels for the width and height
+   * of a selection bounds.
    *
    * Default is `6`.
    */
   minimumSize: number = 6
 
   /**
-   * Specifies if draw a html preview. If this is used then drop target
-   * detection relies entirely on `graph.getCellAt` because the HTML
-   * preview does not "let events through".
+   * Specifies if draw a html preview. If this is true then drop
+   * target detection relies entirely on `graph.getCellAt` because
+   * the HTML preview does not "let events through".
    *
    * Default is `false`.
    */
@@ -106,8 +106,8 @@ export class Preview extends Disposable {
         dx = graph.guideHandler.dx!
         dy = graph.guideHandler.dy!
       } else if (graph.isGridEnabledForEvent(e.getEvent())) {
-        const t = graph.view.translate
         const s = graph.view.scale
+        const t = graph.view.translate
         const x = (graph.snap(bounds.x / s - t.x) + t.x) * s
         const y = (graph.snap(bounds.y / s - t.y) + t.y) * s
 
@@ -194,7 +194,7 @@ export class Preview extends Disposable {
     }
   }
 
-  protected destoryShapes() {
+  protected destory() {
     if (this.previewShape != null) {
       this.previewShape.dispose()
       this.previewShape = null
@@ -214,14 +214,16 @@ export class Preview extends Disposable {
     let target = null
 
     if (graph.isDropEnabled()) {
-      // Call getCellAt to find the cell under the mouse
       target = graph.getDropTarget(e.getEvent(), this.cells, cell, clone)
     }
 
     let state = graph.view.getState(target)
     let active = false
 
-    if (state && (graph.model.getParent(this.cell) !== target || clone)) {
+    if (
+      state != null &&
+      (graph.model.getParent(this.cell) !== target || clone)
+    ) {
       if (this.target !== target) {
         this.target = target
         applyDropTargetHighlightStyle({
@@ -237,8 +239,8 @@ export class Preview extends Disposable {
 
       // Drag a cell onto another cell, then drop it to trigger a connection.
       if (
-        this.graph.isConnectOnDrop() &&
-        cell &&
+        graph.isConnectOnDrop() &&
+        cell != null &&
         cell.isNode() &&
         this.cells.length === 1 &&
         graph.isCellConnectable(cell)
@@ -256,6 +258,7 @@ export class Preview extends Disposable {
             valid: error == null,
             highlight: this.highlight!,
           })
+
           active = true
         }
       }
@@ -271,11 +274,12 @@ export class Preview extends Disposable {
   }
 
   reset() {
-    this.destoryShapes()
+    this.destory()
     this.dx = null
     this.dy = null
-    this.origin = null
     this.cell = null
+    this.cells = []
+    this.origin = null
     this.target = null
   }
 

packages/x6/src/handler/moving/util.ts

@@ -19,15 +19,18 @@ export function canMove(handler: MouseHandler, e: MouseEventEx) {
     const model = graph.model
     const geo = cell.getGeometry()
 
+    // prettier-ignore
     if (
       graph.isCellMovable(cell) &&
-      (graph.isDanglingEdgesEnabled() ||
+      (
         !cell.isEdge() ||
+        graph.isDanglingEdgesEnabled() ||
         graph.getSelecedCellCount() > 1 ||
         (geo && geo.points && geo.points.length > 0) ||
         model.getTerminal(cell, true) == null ||
         model.getTerminal(cell, false) == null ||
-        (graph.isCloneEvent(e.getEvent()) && graph.isCellsCloneable()))
+        (graph.isCloneEvent(e.getEvent()) && graph.isCellsCloneable())
+      )
     ) {
       return true
     }

packages/x6/src/index.less

@@ -17,6 +17,9 @@
 
 // #region handlers
 
+.@{prefix}-moving-preview {
+}
+
 .@{prefix}-rubberband {
 }