refactor(graph): split huge graph class to small modules

finish #12

#12

examples/x6-example-drawio/src/pages/editor.ts

@@ -41,7 +41,7 @@ export class Editor extends Primer {
         global: true,
         escape: true,
       },
-      preferPageSize: true,
+      preferPageSize: false,
       rubberband: true,
       createView() {
         return new GraphView(this)

examples/x6-example-drawio/src/pages/graph/commands/util.ts

@@ -24,7 +24,7 @@ export function autosize(graph: Graph) {
               state.text.boundingBox!.height / graph.view.scale
             graph.model.setGeometry(cell, geo)
           } else {
-            graph.cellManager.updateCellSize(cell)
+            graph.sizeManager.updateCellSize(cell)
           }
         }
       })

examples/x6-example-drawio/src/pages/graph/graph.ts

@@ -13,12 +13,12 @@ export class EditorGraph extends Graph {
   view: GraphView
   autoTranslate: boolean
   cursorPosition: Point
-  lazyZoomDelay: number = 10
-  updateZoomTimeout: number | null
+  wheelZoomDelay: number = 10
+  wheelZoomTimer: number | null
   cumulativeZoomFactor: number = 1
 
   initMouseWheel() {
-    DomEvent.addMouseWheelListener((e, up) => {
+    DomEvent.addWheelListener((e, up) => {
       if (this.isZoomWheelEvent(e)) {
         let source = DomEvent.getSource(e)
         while (source != null) {
@@ -47,8 +47,8 @@ export class EditorGraph extends Graph {
   }
 
   lazyZoom(zoomIn: boolean) {
-    if (this.updateZoomTimeout != null) {
-      window.clearTimeout(this.updateZoomTimeout)
+    if (this.wheelZoomTimer != null) {
+      window.clearTimeout(this.wheelZoomTimer)
     }
 
     // Switches to 1% zoom steps below 15%
@@ -84,7 +84,8 @@ export class EditorGraph extends Graph {
       Math.min(this.view.scale * this.cumulativeZoomFactor, 160) /
         this.view.scale,
     )
-    this.updateZoomTimeout = window.setTimeout(() => {
+
+    this.wheelZoomTimer = window.setTimeout(() => {
       var offset = util.getOffset(this.container)
       var dx = 0
       var dy = 0
@@ -111,8 +112,8 @@ export class EditorGraph extends Graph {
       }
 
       this.cumulativeZoomFactor = 1
-      this.updateZoomTimeout = null
-    }, this.lazyZoomDelay)
+      this.wheelZoomTimer = null
+    }, this.wheelZoomDelay)
   }
 
   sizeDidChange() {
@@ -157,6 +158,22 @@ export class EditorGraph extends Graph {
     }
   }
 
+  getPageSize() {
+    return {
+      width: this.pageFormat.width * this.pageScale,
+      height: this.pageFormat.height * this.pageScale,
+    }
+  }
+
+  getPagePadding() {
+    const scale = this.view.scale
+    const container = this.container
+    return [
+      Math.max(0, Math.round((container.offsetWidth - 32) / scale)),
+      Math.max(0, Math.round((container.offsetHeight - 32) / scale)),
+    ]
+  }
+
   getPreferredPageSize() {
     const size = this.getPageSize()
     const pages = this.getPageLayout()
@@ -167,13 +184,6 @@ export class EditorGraph extends Graph {
     }
   }
 
-  getPageSize() {
-    return {
-      width: this.pageFormat.width * this.pageScale,
-      height: this.pageFormat.height * this.pageScale,
-    }
-  }
-
   getPageLayout() {
     const size = this.getPageSize()
     const bounds = this.getGraphBounds()
@@ -197,15 +207,6 @@ export class EditorGraph extends Graph {
     }
   }
 
-  getPagePadding() {
-    const scale = this.view.scale
-    const container = this.container
-    return [
-      Math.max(0, Math.round((container.offsetWidth - 32) / scale)),
-      Math.max(0, Math.round((container.offsetHeight - 32) / scale)),
-    ]
-  }
-
   updatePageBreaks(visible: boolean, width: number, height: number) {
     const s = this.view.scale
     const t = this.view.translate

packages/x6/src/addon/clipboard/index.ts

@@ -97,7 +97,7 @@ export namespace Clipboard {
             const y = Math.round(graph.snap(triggerY / s - t.y))
             const dx = x - p.x
             const dy = y - p.y
-            graph.cellManager.cellsMoved(cells, dx, dy, false, false)
+            graph.movingManager.cellsMoved(cells, dx, dy, false, false)
           }
         }
       })

packages/x6/src/addon/dndsource/index.ts

@@ -275,8 +275,8 @@ export class Dnd {
   }
 
   protected dragEnter(graph: Graph, e: MouseEvent) {
-    graph.eventloop.isMouseDown = true
-    graph.eventloop.isMouseTrigger = DomEvent.isMouseEvent(e)
+    graph.eventloopManager.isMouseDown = true
+    graph.eventloopManager.isMouseTrigger = DomEvent.isMouseEvent(e)
 
     this.previewElement = this.createPreviewElement(graph)
 
@@ -302,7 +302,7 @@ export class Dnd {
     this.currentPoint = null
     this.currentDropTarget = null
 
-    graph.eventloop.isMouseDown = false
+    graph.eventloopManager.isMouseDown = false
     graph.off(Graph.events.fireMouseEvent, this.eventConsumer)
 
     this.removePreviewElement()

packages/x6/src/change/selection-change.ts

@@ -1,7 +1,7 @@
-import { IChange } from './change'
-import { Graph } from '../graph'
 import { Cell } from '../core/cell'
-import { Selection } from '../manager'
+import { Graph } from '../graph/graph'
+import { Selection } from '../graph/selection'
+import { IChange } from './change'
 
 export class SelectionChange implements IChange {
   public added: Cell[] | null

packages/x6/src/common/dom-event/mouse.ts

@@ -162,7 +162,7 @@ export namespace MouseEventEx {
         onDblClick(e)
       } else if (!DomEvent.isConsumed(e)) {
         const state = getState(e)
-        graph.eventloop.dblClick(e, state ? state.cell : null)
+        graph.eventloopManager.dblClick(e, state ? state.cell : null)
       }
     })
   }

packages/x6/src/core/renderer.ts

@@ -181,9 +181,7 @@ export class Renderer {
 
   protected createIndicatorShape(state: State) {
     if (state != null && state.shape != null) {
-      state.shape.indicatorShape = Shape.getShape(
-        state.view.graph.cellManager.getIndicatorShape(state),
-      )
+      state.shape.indicatorShape = Shape.getShape(state.style.indicatorShape)
     }
   }
 
@@ -197,20 +195,14 @@ export class Renderer {
 
   protected configureShape(state: State) {
     if (state != null && state.shape != null) {
-      const graph = state.view.graph
+      const style = state.style
       state.shape.apply(state)
-      state.shape.image = graph.cellManager.getImage(state)
-      state.shape.indicatorImage = graph.cellManager.getIndicatorImage(state)
-      state.shape.indicatorColor = graph.cellManager.getIndicatorColor(state)
-      state.shape.indicatorDirection = graph.cellManager.getIndicatorDirection(
-        state,
-      )
-      state.shape.indicatorStrokeColor = graph.cellManager.getIndicatorStrokeColor(
-        state,
-      )
-      state.shape.indicatorGradientColor = graph.cellManager.getIndicatorGradientColor(
-        state,
-      )
+      state.shape.image = style.image || null
+      state.shape.indicatorImage = style.indicatorImage || null
+      state.shape.indicatorColor = style.indicatorColor || null
+      state.shape.indicatorDirection = style.indicatorDirection || null
+      state.shape.indicatorStrokeColor = style.indicatorStrokeColor || null
+      state.shape.indicatorGradientColor = style.indicatorGradientColor || null
 
       this.postConfigureShape(state)
     }
@@ -424,7 +416,7 @@ export class Renderer {
     if (graph.nativeDblClickEnabled) {
       DomEvent.addListener(elem, 'dblclick', (e: MouseEvent) => {
         if (this.isShapeEvent(state, e)) {
-          graph.eventloop.dblClick(e, state.cell)
+          graph.eventloopManager.dblClick(e, state.cell)
           DomEvent.consume(e)
         }
       })
@@ -599,7 +591,7 @@ export class Renderer {
         state.text.apply(state)
 
         // Special case where value is obtained via hook in graph
-        state.text.verticalAlign = graph.cellManager.getVerticalAlign(state)
+        state.text.verticalAlign = state.style.verticalAlign || 'middle'
       }
 
       const bounds = this.getLabelBounds(state)
@@ -657,8 +649,8 @@ export class Renderer {
         (value != null && util.isHtmlElem(value))
 
       state.text = new this.defaultTextShape(value, new Rectangle(), {
-        align: graph.cellManager.getAlign(state),
-        valign: graph.cellManager.getVerticalAlign(state),
+        align: state.style.align || 'center',
+        valign: state.style.verticalAlign || 'middle',
         color: state.style.fontColor,
         family: state.style.fontFamily,
         size: state.style.fontSize,
@@ -746,7 +738,7 @@ export class Renderer {
       if (graph.nativeDblClickEnabled) {
         DomEvent.addListener(state.text.elem!, 'dblclick', (e: MouseEvent) => {
           if (this.isLabelEvent(state, e)) {
-            graph.eventloop.dblClick(e, state.cell)
+            graph.eventloopManager.dblClick(e, state.cell)
             DomEvent.consume(e)
           }
         })

packages/x6/src/core/view.ts

@@ -608,7 +608,7 @@ export class View extends Primer {
       point = this.getConnectionPoint(
         terminalState,
         anchor,
-        this.graph.cellManager.isOrthogonal(edgeState),
+        this.graph.connectionManager.isOrthogonal(edgeState),
       )
     }
 
@@ -897,7 +897,7 @@ export class View extends Primer {
     relateState = this.getTerminalPortState(edgeState, relateState, isSource)
 
     const rot = util.getRotation(relateState)
-    const orth = this.graph.cellManager.isOrthogonal(edgeState)
+    const orth = this.graph.connectionManager.isOrthogonal(edgeState)
     const center = relateState.bounds.getCenter()
 
     let nextPoint = this.getNextPoint(edgeState, opposeState, isSource)
@@ -1546,7 +1546,7 @@ export class View extends Primer {
           this.backgroundPageShape.elem!,
           'dblclick',
           (e: MouseEvent) => {
-            this.graph.eventloop.dblClick(e)
+            this.graph.eventloopManager.dblClick(e)
           },
         )
       }
@@ -1567,7 +1567,10 @@ export class View extends Primer {
             this.graph.hideTooltip()
           }
 
-          if (this.graph.eventloop.isMouseDown && !DomEvent.isConsumed(e)) {
+          if (
+            this.graph.eventloopManager.isMouseDown &&
+            !DomEvent.isConsumed(e)
+          ) {
             this.graph.fireMouseEvent(DomEvent.MOUSE_MOVE, new MouseEventEx(e))
           }
         },
@@ -1856,7 +1859,7 @@ export class View extends Primer {
     // background does not change during the double click
     DomEvent.addListener(container, 'dblclick', (e: MouseEvent) => {
       if (this.isContainerEvent(e)) {
-        graph.eventloop.dblClick(e)
+        graph.eventloopManager.dblClick(e)
       }
     })
 
@@ -1918,7 +1921,7 @@ export class View extends Primer {
   protected shouldHandleDocumentEvent(e: MouseEvent) {
     return (
       this.captureDocumentGesture &&
-      this.graph.eventloop.isMouseDown &&
+      this.graph.eventloopManager.isMouseDown &&
       this.isContainerVisible() &&
       !this.isContainerEvent(e)
     )
@@ -2116,7 +2119,7 @@ export class View extends Primer {
       const edit = new UndoableEdit(this.graph.getModel())
       edit.add(change)
       this.trigger(View.events.undo, edit)
-      this.graph.viewport.sizeDidChange()
+      this.graph.sizeDidChange()
     }
 
     return root