feat: infinite canvas example

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

@@ -1,25 +1,27 @@
 import { Primer, Style, Anchor, Point, FontStyle } from '@antv/x6'
-import { EditorGraph, GraphView } from './graph'
+// import { EditorGraph, GraphView } from './graph'
+import { Graph } from '@antv/x6'
 import { Commands } from './graph/commands'
 import avatarMale from './images/male.png'
 import avatarFemale from './images/female.png'
 import './editor.less'
 
 export class Editor extends Primer {
-  graph: EditorGraph
+  graph: Graph
   commands: Commands
 
   constructor(container: HTMLElement) {
     super()
 
-    this.graph = new EditorGraph(container, {
+    this.graph = new Graph(container, {
       guide: {
         enabled: true,
         dashed: true,
       },
       grid: {
         enabled: true,
       },
+      infinite: true,
       pageVisible: true,
       pageBreak: {
         enabled: true,
@@ -41,11 +43,12 @@ export class Editor extends Primer {
         global: true,
         escape: true,
       },
+      wheel: true,
       preferPageSize: false,
       rubberband: true,
-      createView() {
-        return new GraphView(this)
-      },
+      // createView() {
+      //   return new GraphView(this)
+      // },
       getAnchors(cell) {
         if (cell != null && this.model.isNode(cell)) {
           return [
@@ -66,7 +69,7 @@ export class Editor extends Primer {
     })
 
     this.commands = new Commands(this.graph)
-    this.graph.initMouseWheel()
+    // this.graph.initMouseWheel()
     this.start()
   }
 
@@ -290,7 +293,7 @@ export class Editor extends Primer {
   start() {
     this.renderHelloWorld()
     this.renderORG()
-    this.graph.resetScrollbars()
-    this.trigger('resetGraphView')
+    // this.graph.resetScrollbars()
+    // this.trigger('resetGraphView')
   }
 }

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

@@ -212,27 +212,20 @@ export class EditorGraph extends Graph {
     const t = this.view.translate
     const fmt = this.pageFormat
     const ps = s * this.pageScale
-    const bgBounds = this.view.getBackgroundPageBounds()
+    const bounds = this.view.getBackgroundPageBounds()
 
-    width = bgBounds.width // tslint:disable-line
-    height = bgBounds.height // tslint:disable-line
+    width = bounds.width // tslint:disable-line
+    height = bounds.height // tslint:disable-line
 
-    const right = bgBounds.x + width
-    const bottom = bgBounds.y + height
-
-    const bounds = new Rectangle(
-      s * t.x,
-      s * t.y,
-      fmt.width * ps,
-      fmt.height * ps,
-    )
+    const right = bounds.x + width
+    const bottom = bounds.y + height
 
+    const pb = new Rectangle(s * t.x, s * t.y, fmt.width * ps, fmt.height * ps)
     // tslint:disable-next-line
-    visible =
-      visible && Math.min(bounds.width, bounds.height) > this.pageBreakMinDist
+    visible = visible && Math.min(pb.width, pb.height) > this.pageBreakMinDist
 
-    const hCount = visible ? Math.ceil(height / bounds.height) - 1 : 0
-    const vCount = visible ? Math.ceil(width / bounds.width) - 1 : 0
+    const hCount = visible ? Math.ceil(height / pb.height) - 1 : 0
+    const vCount = visible ? Math.ceil(width / pb.width) - 1 : 0
 
     if (this.viewport.horizontalPageBreaks == null && hCount > 0) {
       this.viewport.horizontalPageBreaks = []
@@ -250,15 +243,15 @@ export class EditorGraph extends Graph {
         for (let i = 0; i <= count; i += 1) {
           let points: Point[]
           if (breaks === this.viewport.horizontalPageBreaks) {
-            const y = Math.round(bgBounds.y + (i + 1) * bounds.height) - 1
+            const y = Math.round(bounds.y + (i + 1) * pb.height) - 1
             points = [
-              new Point(Math.round(bgBounds.x), y),
+              new Point(Math.round(bounds.x), y),
               new Point(Math.round(right), y),
             ]
           } else {
-            const x = Math.round(bgBounds.x + (i + 1) * bounds.width) - 1
+            const x = Math.round(bounds.x + (i + 1) * pb.width) - 1
             points = [
-              new Point(x, Math.round(bgBounds.y)),
+              new Point(x, Math.round(bounds.y)),
               new Point(x, Math.round(bottom)),
             ]
           }

examples/x6-example-features/src/layouts/index.tsx

@@ -17,6 +17,7 @@ const features = [
   { link: '/page-breaks', title: 'Page Breaks' },
   { link: '/snapline', title: 'SnapLine' },
   { link: '/custom-render', title: 'Custom Render' },
+  { link: '/infinite', title: 'Infinite Canvas' },
 ]
 
 const BasicLayout: React.FC = props => {

examples/x6-example-features/src/pages/index.less

@@ -11,3 +11,9 @@
     outline: 0;
   }
 }
+
+:global {
+  .x6-page-background {
+    box-shadow: 0 0 2px 1px #e9e9e9;
+  }
+}