feat: className and options for node handler

#16 #41

packages/x6/src/handler/node/handler.ts

@@ -9,7 +9,6 @@ import { MouseHandler } from '../handler-mouse'
 import { DomEvent, MouseEventEx, Disposable } from '../../common'
 
 export class NodeHandler extends MouseHandler {
-  graph: Graph
   state: State
   knobs: Knobs
   preview: Preview

packages/x6/src/handler/node/knobs.ts

@@ -10,7 +10,6 @@ import {
   getLabelHandleOffset,
 } from './option-label'
 import {
-  ResizeHandleOptions,
   createResizeHandle,
   isResizeHandleVisible,
   updateResizeHandleCalssName,
@@ -22,9 +21,9 @@ import {
 } from './option-rotation'
 
 export class Knobs extends Disposable {
-  singleResizeHandle: boolean
-  manageHandles: boolean
   tolerance: number
+  manageHandles: boolean
+  singleResizeHandle: boolean
 
   protected handles: Shape[] | null
   protected labelShape: Shape | null
@@ -51,7 +50,7 @@ export class Knobs extends Disposable {
 
   protected config() {
     const options = this.graph.options
-    const resizeHandle = options.resizeHandle as ResizeHandleOptions
+    const resizeHandle = options.resizeHandle
     this.tolerance = resizeHandle.tolerance
     this.manageHandles = resizeHandle.adaptive
     this.singleResizeHandle = resizeHandle.single
@@ -113,9 +112,15 @@ export class Knobs extends Disposable {
       this.graph.isLabelMovable(this.state.cell) &&
       !this.graph.isSwimlane(this.state.cell)
     ) {
-      const geo = this.state.cell.getGeometry()
-      if (geo && !geo.relative) {
-        return true
+      const label = this.graph.getLabel(this.state.cell)
+      if (
+        label != null &&
+        (util.isHtmlElem(label) || (label as string).length > 0)
+      ) {
+        const geo = this.state.cell.getGeometry()
+        if (geo && !geo.relative) {
+          return true
+        }
       }
     }
 
@@ -144,7 +149,7 @@ export class Knobs extends Disposable {
   }
 
   protected createHandle(index: number) {
-    let handle
+    let handle: Shape
     let cursor: string | null = null
     const args = {
       graph: this.graph,
@@ -220,12 +225,17 @@ export class Knobs extends Disposable {
         : null
 
     const checkShape = (shape: Shape | null) => {
+      // prettier-ignore
       return (
         shape != null &&
-        (e.isSource(shape) ||
-          (hit != null &&
+        (
+          e.isSource(shape) ||
+          (
+            hit != null &&
             shape.bounds.isIntersectWith(hit) &&
-            util.isVisible(shape.elem)))
+            util.isVisible(shape.elem)
+          )
+        )
       )
     }
 
@@ -556,12 +566,25 @@ export class Knobs extends Disposable {
 
   @Disposable.aop()
   dispose() {
-    this.handles && this.handles.forEach(h => h.dispose())
+    if (this.handles != null) {
+      this.handles.forEach(h => h.dispose())
+    }
+
+    if (this.labelShape != null) {
+      this.labelShape.dispose()
+    }
+
+    if (this.rotationShape != null) {
+      this.rotationShape.dispose()
+    }
+
+    if (this.customHandles != null) {
+      this.customHandles.forEach(h => h.dispose())
+    }
+
     this.handles = null
     this.labelShape = null
     this.rotationShape = null
-
-    this.customHandles && this.customHandles.forEach(h => h.dispose())
     this.customHandles = null
   }
 }

packages/x6/src/handler/node/option-knob.ts

@@ -19,7 +19,7 @@ export interface CreateHandleShapeArgs {
 export function createHandleShape<T extends CreateHandleShapeArgs>(
   args: T,
   options: HandleOptions<T, T>,
-) {
+): Shape {
   const { graph } = args
   const image = drill(options.image, graph, args)
   if (image) {

packages/x6/src/handler/node/option-label.ts

@@ -32,8 +32,9 @@ export interface ApplyLabelHandleStyleArgs extends CreateLabelHandleShapeArgs {
 
 export function createLabelHandle(args: CreateLabelHandleShapeArgs) {
   const { graph } = args
-  const options = graph.options.labelHandle as LabelHandleOptions
+  const options = graph.options.labelHandle
   const shape = createHandleShape(args, options)
+
   const newArgs = { ...args, shape }
   if (!(shape instanceof ImageShape)) {
     const size = drill(options.size, graph, newArgs)
@@ -50,11 +51,11 @@ export function createLabelHandle(args: CreateLabelHandleShapeArgs) {
 }
 
 export function getLabelHandleOffset(args: ApplyLabelHandleStyleArgs) {
-  const options = args.graph.options.labelHandle as LabelHandleOptions
+  const options = args.graph.options.labelHandle
   return drill(options.offset, args.graph, args)
 }
 
 export function getLabelHandleCursor(args: ApplyLabelHandleStyleArgs) {
-  const options = args.graph.options.labelHandle as LabelHandleOptions
+  const options = args.graph.options.labelHandle
   return drill(options.cursor, args.graph, args)
 }

packages/x6/src/handler/node/option-resize.ts

@@ -29,6 +29,8 @@ export interface ResizeOption {
   centered: boolean | ((this: Graph, cell: Cell, e: MouseEventEx) => boolean)
 
   livePreview: boolean
+
+  constrainByChildren: boolean
 }
 
 export interface ResizeHandleOptions
@@ -80,7 +82,7 @@ export interface ApplyResizeHandleClassNameArgs
 
 export function createResizeHandle(args: CreateResizeHandleShapeArgs) {
   const { graph } = args
-  const options = graph.options.resizeHandle as ResizeHandleOptions
+  const options = graph.options.resizeHandle
   const shape = createHandleShape(args, options)
   const newArgs = { ...args, shape }
 
@@ -92,7 +94,6 @@ export function createResizeHandle(args: CreateResizeHandleShapeArgs) {
     applyBaseStyle(newArgs, options)
   }
 
-  // applyClassName(newArgs, options, cursor)
   applyManualStyle(newArgs, options)
 
   return shape
@@ -102,7 +103,7 @@ export function updateResizeHandleCalssName(
   args: ApplyResizeHandleClassNameArgs,
 ) {
   const { graph, cursor } = args
-  const options = graph.options.resizeHandle as ResizeHandleOptions
+  const options = graph.options.resizeHandle
   applyClassName(args, options, `cursor-${cursor}`)
 }
 
@@ -114,7 +115,7 @@ export interface IsResizeHandleVisibleArgs {
 
 export function isResizeHandleVisible(args: IsResizeHandleVisibleArgs) {
   const { graph } = args
-  const options = graph.options.resizeHandle as ResizeHandleOptions
+  const options = graph.options.resizeHandle
   return drill(options.visible, graph, args)
 }
 
@@ -128,7 +129,7 @@ export interface ApplyResizePreviewStyleArgs {
 }
 
 export function applyResizePreviewStyle(args: ApplyResizePreviewStyleArgs) {
-  const options = args.graph.options.resizePreview as ResizePreviewOptions
+  const options = args.graph.options.resizePreview
   applyBaseStyle(args, options)
   applyClassName(args, options, 'resize-preview')
   applyManualStyle(args, options)

packages/x6/src/handler/node/option-rotation.ts

@@ -47,7 +47,7 @@ export interface ApplyRotateHandleStyleArgs
 
 export function createRotationHandle(args: CreateRotateHandleShapeArgs) {
   const { graph } = args
-  const options = graph.options.rotateHandle as RotateHandleOptions
+  const options = graph.options.rotateHandle
   const shape = createHandleShape(args, options)
   const newArgs = { ...args, shape }
 
@@ -65,12 +65,12 @@ export function createRotationHandle(args: CreateRotateHandleShapeArgs) {
 }
 
 export function getRotationHandleOffset(args: ApplyRotateHandleStyleArgs) {
-  const options = args.graph.options.rotateHandle as RotateHandleOptions
+  const options = args.graph.options.rotateHandle
   return drill(options.offset, args.graph, args)
 }
 
 export function getRotationHandleCursor(args: ApplyRotateHandleStyleArgs) {
-  const options = args.graph.options.rotateHandle as RotateHandleOptions
+  const options = args.graph.options.rotateHandle
   return drill(options.cursor, args.graph, args)
 }
 

packages/x6/src/handler/node/option-selection.ts

@@ -11,6 +11,7 @@ import {
 
 export interface SelectionPreviewOptions
   extends BaseStyle<ApplySelectionPreviewStyleArgs> {
+  highlightParent: boolean
   cursor: OptionItem<GetSelectionPreviewCursorArgs, string>
 }
 
@@ -22,7 +23,7 @@ export function applySelectionPreviewStyle(
   args: ApplySelectionPreviewStyleArgs,
 ) {
   const { shape, graph } = args
-  const options = graph.options.selectionPreview as SelectionPreviewOptions
+  const options = graph.options.selectionPreview
 
   applyBaseStyle(args, options)
   applyClassName(args, options, 'selection-preview')
@@ -36,6 +37,6 @@ export interface GetSelectionPreviewCursorArgs
 
 export function getSelectionPreviewCursor(args: GetSelectionPreviewCursorArgs) {
   const { graph } = args
-  const options = graph.options.selectionPreview as SelectionPreviewOptions
+  const options = graph.options.selectionPreview
   return drill(options.cursor, graph, args)
 }

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

@@ -7,8 +7,8 @@ import { Disposable, MouseEventEx, DomEvent } from '../../common'
 import { Rectangle, Point } from '../../struct'
 import { RectangleShape } from '../../shape'
 import { EdgeHandler } from '../edge/handler'
-import { ResizeOption, applyResizePreviewStyle } from './option-resize'
-import { RotateOptions, applyRotatePreviewStyle } from './option-rotation'
+import { applyResizePreviewStyle } from './option-resize'
+import { applyRotatePreviewStyle } from './option-rotation'
 import {
   getSelectionPreviewCursor,
   applySelectionPreviewStyle,
@@ -20,22 +20,22 @@ export class Preview extends Disposable {
    *
    * Default is `false`.
    */
-  parentHighlightable: boolean = false
+  parentHighlightable: boolean
 
   /**
    * Specifies if the size of groups should be constrained by the children.
    *
-   * Default is `false`.
+   * Default is `true`.
    */
-  constrainGroupByChildren: boolean = false
+  constrainGroupByChildren: boolean
 
   /**
    * Specifies if rotation steps should be "rasterized" depening on the
    * distance to the handle.
    *
    * Default is `true`.
    */
-  rotationRaster: boolean = true
+  rotationRaster: boolean
 
   resizeLivePreview: boolean
 
@@ -57,7 +57,7 @@ export class Preview extends Disposable {
   protected childOffsetX: number
   protected childOffsetY: number
   protected parentState: State | null
-  private overlayCursor: string | null
+  protected overlayCursor: string | null
 
   constructor(public master: NodeHandler) {
     super()
@@ -75,11 +75,10 @@ export class Preview extends Disposable {
 
   protected config() {
     const options = this.graph.options
-    const resize = options.resize as ResizeOption
-    this.resizeLivePreview = resize.livePreview
-
-    const rotate = options.rotate as RotateOptions
-    this.rotationRaster = rotate.rasterized
+    this.rotationRaster = options.rotate.rasterized
+    this.resizeLivePreview = options.resize.livePreview
+    this.parentHighlightable = options.selectionPreview.highlightParent
+    this.constrainGroupByChildren = options.resize.constrainByChildren
   }
 
   protected init() {
@@ -259,7 +258,7 @@ export class Preview extends Disposable {
   }
 
   protected isCentered(cell: Cell, e: MouseEventEx) {
-    const options = this.graph.options.resize as ResizeOption
+    const options = this.graph.options.resize
     if (typeof options.centered === 'function') {
       return options.centered.call(this.graph, cell, e)
     }

packages/x6/src/index.less

@@ -17,6 +17,35 @@
 
 // #region handlers
 
+.@{prefix}-selection-preview {
+}
+
+.@{prefix}-resize-preview {
+}
+
+.@{prefix}-label-handle {
+}
+
+.@{prefix}-rotation-handle {
+}
+
+.@{prefix}-cursor-nw-resize {
+}
+.@{prefix}-cursor-n-resize {
+}
+.@{prefix}-cursor-ne-resize {
+}
+.@{prefix}-cursor-w-resize {
+}
+.@{prefix}-cursor-e-resize {
+}
+.@{prefix}-cursor-sw-resize {
+}
+.@{prefix}-cursor-s-resize {
+}
+.@{prefix}-cursor-se-resize {
+}
+
 .@{prefix}-moving-preview {
 }
 

packages/x6/src/option/preset.ts

@@ -224,12 +224,14 @@ export const preset: FullOptions = {
     fill: 'none',
     cursor: ({ cell }) =>
       cell.isNode() || cell.isEdge() ? globals.defaultCursorMove : '',
+    highlightParent: false,
   },
 
   resize: {
     enabled: true,
     centered: false,
     livePreview: false,
+    constrainByChildren: true,
   },
 
   resizeHandle: {