refactor: uniform collapse name

fixed #20

packages/x6/src/addon/shape/card.ts

@@ -26,7 +26,7 @@ export class CardShape extends Actor {
       ],
       this.rounded,
       arcSize,
-      true
+      true,
     )
 
     c.end()

packages/x6/src/core/renderer.ts

@@ -425,9 +425,9 @@ export class Renderer {
 
   protected createFoldingButton(state: State) {
     const graph = state.view.graph
-    const image = graph.getFoldingImage(state)
+    const image = graph.collapseManager.getFoldingImage(state)
 
-    if (graph.cellsFoldable && image != null) {
+    if (graph.cellsCollapsable && image != null) {
       if (state.control == null) {
         const bounds = new Rectangle(0, 0, image.width, image.height)
         state.control = new ImageShape(bounds, image.src)
@@ -452,7 +452,7 @@ export class Renderer {
     return (e: MouseEvent) => {
       if (this.forceControlClickHandler || graph.isEnabled()) {
         const collapsed = !graph.isCellCollapsed(state.cell)
-        graph.foldCells(collapsed, false, [state.cell], false)
+        graph.toggleCollapse(collapsed, false, [state.cell], false)
         DomEvent.consume(e)
       }
     }
@@ -1036,7 +1036,7 @@ export class Renderer {
   }
 
   protected redrawControl(state: State, forced?: boolean) {
-    const image = state.view.graph.getFoldingImage(state)
+    const image = state.view.graph.collapseManager.getFoldingImage(state)
 
     if (state.control != null && image != null) {
       const bounds = this.getControlBounds(state, image.width, image.height)

packages/x6/src/graph/base-graph.ts

@@ -3052,7 +3052,7 @@ export interface IPreDependencies {
   getSelectedCell(): Cell
   getSelectedCells(): Cell[]
   getDeletableCells(cells: Cell[]): Cell[]
-  getFoldableCells(cells: Cell[], collapse: boolean): Cell[]
+  getCollapsableCells(cells: Cell[], collapse: boolean): Cell[]
   dataToString(cell: Cell): string
   putLabel(cell: Cell, label: string): string
   getStyle(cell: Cell | null): Style

packages/x6/src/graph/collapse-accessor.ts

@@ -1,16 +1,15 @@
 import { Cell } from '../core/cell'
-import { State } from '../core/state'
 import { Image } from '../struct'
 import { hook } from './decorator'
 import { BaseGraph } from './base-graph'
 
 export class CollapseAccessor extends BaseGraph {
-  isCellsFoldable() {
+  isCellsCollapsable() {
     return this.options.folding.enabled
   }
 
-  enableCellsFolding(refresh: boolean = true) {
-    if (!this.isCellsFoldable()) {
+  enableCellsCollapse(refresh: boolean = true) {
+    if (!this.isCellsCollapsable()) {
       this.options.folding.enabled = true
       if (refresh) {
         this.view.validate()
@@ -19,8 +18,8 @@ export class CollapseAccessor extends BaseGraph {
     return this
   }
 
-  disableCellsFolding(refresh: boolean = true) {
-    if (this.isCellsFoldable()) {
+  disableCellsCollapse(refresh: boolean = true) {
+    if (this.isCellsCollapsable()) {
       this.options.folding.enabled = false
       if (refresh) {
         this.view.validate()
@@ -29,29 +28,29 @@ export class CollapseAccessor extends BaseGraph {
     return this
   }
 
-  setCellsFoldable(foldable: boolean, refresh: boolean = true) {
+  setCellsCollapsable(foldable: boolean, refresh: boolean = true) {
     if (foldable) {
-      this.enableCellsFolding(refresh)
+      this.enableCellsCollapse(refresh)
     } else {
-      this.disableCellsFolding(refresh)
+      this.disableCellsCollapse(refresh)
     }
   }
 
-  toggleFolding(refresh: boolean = true) {
-    if (this.isCellsFoldable()) {
-      this.disableCellsFolding(refresh)
+  toggleCellsCollapsable(refresh: boolean = true) {
+    if (this.isCellsCollapsable()) {
+      this.disableCellsCollapse(refresh)
     } else {
-      this.enableCellsFolding(refresh)
+      this.enableCellsCollapse(refresh)
     }
     return this
   }
 
-  get cellsFoldable() {
-    return this.isCellsFoldable()
+  get cellsCollapsable() {
+    return this.isCellsCollapsable()
   }
 
-  set cellsFoldable(foldable: boolean) {
-    this.setCellsFoldable(foldable)
+  set cellsCollapsable(foldable: boolean) {
+    this.setCellsCollapsable(foldable)
   }
 
   getExpandedImage() {
@@ -104,58 +103,46 @@ export class CollapseAccessor extends BaseGraph {
   }
 
   @hook()
-  isCellFoldable(cell: Cell, nextCollapseState: boolean) {
+  isCellCollapsable(cell: Cell, nextCollapseState: boolean) {
     const style = this.getStyle(cell)
     return this.model.getChildCount(cell) > 0 && style.foldable !== false
   }
 
   /**
    * Returns the cells which are movable in the given array of cells.
    */
-  getFoldableCells(cells: Cell[], collapse: boolean) {
+  getCollapsableCells(cells: Cell[], collapse: boolean) {
     return this.model.filterCells(cells, cell =>
-      this.isCellFoldable(cell, collapse),
+      this.isCellCollapsable(cell, collapse),
     )
   }
 
-  getFoldingImage(state: State) {
-    if (
-      state != null &&
-      this.cellsFoldable &&
-      !this.getModel().isEdge(state.cell)
-    ) {
-      const collapsed = this.isCellCollapsed(state.cell)
-      if (this.isCellFoldable(state.cell, !collapsed)) {
-        return collapsed ? this.collapsedImage : this.expandedImage
-      }
-    }
-
-    return null
-  }
-
-  foldCells(
-    collapse: boolean,
+  toggleCollapse(
+    collapsed: boolean,
     recurse: boolean = false,
-    cells: Cell[] = this.getFoldableCells(this.getSelectedCells(), collapse),
-    checkFoldable: boolean = false,
+    cells: Cell[] = this.getCollapsableCells(
+      this.getSelectedCells(),
+      collapsed,
+    ),
+    checkCollapsable: boolean = false,
   ) {
-    return this.collapseManager.foldCells(
-      collapse,
+    return this.collapseManager.toggleCollapse(
+      collapsed,
       recurse,
       cells,
-      checkFoldable,
+      checkCollapsable,
     )
   }
 }
 
-export interface FoldingOptions {
+export interface CollapseOptions {
   /**
    * Specifies if folding (collapse and expand) via an image icon
    * in the graph should be enabled.
    *
    * Default is `true`.
    */
   enabled: boolean
-  collapsedImage: Image
   expandedImage: Image
+  collapsedImage: Image
 }

packages/x6/src/graph/collapse-manager.ts

@@ -1,26 +1,46 @@
 import * as util from '../util'
 import { Cell } from '../core/cell'
+import { State } from '../core/state'
 import { Geometry } from '../core/geometry'
 import { Rectangle } from '../struct'
 import { Graph } from './graph'
 import { BaseManager } from './base-manager'
 
 export class CollapseManager extends BaseManager {
-  foldCells(
-    collapse: boolean,
+  getFoldingImage(state: State) {
+    if (
+      state != null &&
+      this.graph.cellsCollapsable &&
+      !this.model.isEdge(state.cell)
+    ) {
+      const collapsed = this.graph.isCellCollapsed(state.cell)
+      if (this.graph.isCellCollapsable(state.cell, !collapsed)) {
+        return collapsed ? this.graph.collapsedImage : this.graph.expandedImage
+      }
+    }
+
+    return null
+  }
+
+  toggleCollapse(
+    collapsed: boolean,
     recurse: boolean,
     cells: Cell[],
-    checkFoldable: boolean,
+    checkCollapsable: boolean,
   ) {
     this.graph.stopEditing(false)
     this.model.batchUpdate(() => {
-      this.graph.trigger(Graph.events.foldCells, { collapse, recurse, cells })
-      this.cellsFolded(cells, collapse, recurse, checkFoldable)
+      this.graph.trigger(Graph.events.foldCells, {
+        collapsed,
+        recurse,
+        cells,
+      })
+      this.cellsCollapsed(cells, collapsed, recurse, checkCollapsable)
     })
     return cells
   }
 
-  cellsFolded(
+  cellsCollapsed(
     cells: Cell[],
     collapse: boolean,
     recurse: boolean,
@@ -30,7 +50,7 @@ export class CollapseManager extends BaseManager {
       this.model.batchUpdate(() => {
         cells.forEach(cell => {
           if (
-            (!checkFoldable || this.graph.isCellFoldable(cell, collapse)) &&
+            (!checkFoldable || this.graph.isCellCollapsable(cell, collapse)) &&
             collapse !== this.graph.isCellCollapsed(cell)
           ) {
             this.model.setCollapsed(cell, collapse)
@@ -42,7 +62,7 @@ export class CollapseManager extends BaseManager {
 
             if (recurse) {
               const children = this.model.getChildren(cell)
-              this.cellsFolded(children, collapse, recurse)
+              this.cellsCollapsed(children, collapse, recurse)
             }
 
             this.graph.sizeManager.constrainChild(cell)

packages/x6/src/graph/hook.ts

@@ -159,7 +159,7 @@ export interface IHooks {
   /**
    * Returns`true`if the given cell is foldable.
    */
-  isCellFoldable: (
+  isCellCollapsable: (
     this: Graph,
     cell: Cell,
     nextCollapseState: boolean,

packages/x6/src/graph/size-manager.ts

@@ -117,7 +117,7 @@ export class SizeManager extends BaseManager {
       dy += style.spacingBottom || 0
 
       // Add spacing for collapse/expand icon
-      const image = this.graph.getFoldingImage(state)
+      const image = this.graph.collapseManager.getFoldingImage(state)
       if (image != null) {
         dx += image.width + 8
       }

packages/x6/src/option/rollup.ts

@@ -2,7 +2,7 @@ import * as util from '../util'
 import { Style } from '../types'
 import { GridOptions } from '../graph/grid-accessor'
 import { PageBreakOptions } from '../graph/pagebreak-accessor'
-import { FoldingOptions } from '../graph/collapse-accessor'
+import { CollapseOptions } from '../graph/collapse-accessor'
 import { TooltipOptions } from '../handler/tooltip/option'
 import { ContextMenuOptions } from '../handler/contextmenu/option'
 import { KeyboardOptions } from '../handler/keyboard/option'
@@ -46,7 +46,7 @@ export interface FullOptions
   grid: GridOptions
   guide: GuideOptions
   tooltip: TooltipOptions
-  folding: FoldingOptions
+  folding: CollapseOptions
   keyboard: KeyboardOptions
   rubberband: RubberbandOptions
   pageBreak: PageBreakOptions
@@ -79,7 +79,7 @@ export interface GraphOptions
   grid?: Partial<GridOptions> | boolean
   guide?: Partial<GuideOptions> | boolean
   tooltip?: Partial<TooltipOptions> | boolean
-  folding?: Partial<FoldingOptions> | boolean
+  folding?: Partial<CollapseOptions> | boolean
   keyboard?: Partial<KeyboardOptions> | boolean
   rubberband?: Partial<RubberbandOptions> | boolean
   pageBreak?: Partial<PageBreakOptions> | boolean