From dcf5fae05563db78d511860f9f4593f070e9b887 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Tue, 25 May 2021 11:15:38 +0800
Subject: [PATCH] feat: add board scroll func

---
 packages/board/example/features/index.html    |  4 +--
 packages/board/example/features/lib/scroll.js | 22 ++++++++++++++
 packages/board/example/features/main.js       |  2 ++
 packages/board/src/index.ts                   | 30 +++++++++++++++----
 4 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 packages/board/example/features/lib/scroll.js

diff --git a/packages/board/example/features/index.html b/packages/board/example/features/index.html
index 4dcd79a..e60c25c 100644
--- a/packages/board/example/features/index.html
+++ b/packages/board/example/features/index.html
@@ -25,11 +25,11 @@
     </div>
     <div>
       <span>scrollX</span>
-      <input id="scaleX" type="number"/>
+      <input id="scrollX" type="number" value="0"/>
     </div>
     <div>
       <span>scrollY</span>
-      <input id="scrollY" type="number"/>
+      <input id="scrollY" type="number" value="0"/>
     </div>
 
     <script src="./../../dist/index.global.js"></script>
diff --git a/packages/board/example/features/lib/scroll.js b/packages/board/example/features/lib/scroll.js
new file mode 100644
index 0000000..b52b7c5
--- /dev/null
+++ b/packages/board/example/features/lib/scroll.js
@@ -0,0 +1,22 @@
+const inputX = document.querySelector('#scrollX');
+const inputY = document.querySelector('#scrollY');
+let hasInited = false;
+
+export function onScroll(board) {
+  if (hasInited === true)  return;
+  inputX.addEventListener('change', () => {
+    const val = inputX.value * 1;
+    if (val > 0) {
+      board.scrollX(val);
+      board.draw();
+    }
+  });
+  inputY.addEventListener('change', () => {
+    const val = inputY.value * 1;
+    if (val > 0) {
+      board.scrollY(val);
+      board.draw();
+    }
+  });
+  hasInited = true;
+}
\ No newline at end of file
diff --git a/packages/board/example/features/main.js b/packages/board/example/features/main.js
index 1c54740..1d9fbc1 100644
--- a/packages/board/example/features/main.js
+++ b/packages/board/example/features/main.js
@@ -1,5 +1,6 @@
 import { draw } from './lib/draw.js';
 import { onScale } from './lib/scale.js';
+import { onScroll } from './lib/scroll.js';
 
 const { Board } = window.iDraw; 
 
@@ -12,6 +13,7 @@ const board = new Board(mount, {
 
 draw(board);
 onScale(board);
+onScroll(board);
 
 // board.scale(2);
 // board.draw();
\ No newline at end of file
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index 047fd36..275dff3 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -22,6 +22,8 @@ class Board {
   private _ctx: Context;
   private _displayCtx: CanvasRenderingContext2D;
   private _scaleRatio: number = 1;
+  private _scrollX: number = 0;
+  private _scrollY: number = 0;
   // private _watcher: Watcher;
 
   constructor(mount: HTMLDivElement, opts: Options) {
@@ -43,16 +45,21 @@ class Board {
   }
 
   scale(scaleRatio: number) {
-    this._scaleRatio = scaleRatio;
+    if (scaleRatio > 0) this._scaleRatio = scaleRatio;
+  }
+
+  scrollX(x: number) {
+    if (x > 0) this._scrollX = x;
+  }
+
+  scrollY(y: number) {
+    if (y > 0) this._scrollY = y;
   }
 
   draw() {
     this.clear();
-    this._displayCtx.drawImage(
-      this._canvas, 0, 0,
-      this._canvas.width * this._scaleRatio,
-      this._canvas.height * this._scaleRatio,
-    );
+    const size = this._calculateSize();
+    this._displayCtx.drawImage(this._canvas, size.x, size.y, size.w, size.h);
   }
 
   clear() {
@@ -87,6 +94,17 @@ class Board {
     return { ...defaultOpts, ...opts }
   }
 
+  private _calculateSize(): { x: number; y: number; w: number; h: number } {
+    const { _scrollX, _scrollY, _scaleRatio, } = this;
+    const { devicePixelRatio: pxRatio, width, height } = this._opts;
+    const size = { x: 0, y: 0, w: width * pxRatio, h: height * pxRatio };
+    size.x = _scrollX * pxRatio * _scaleRatio;
+    size.y = _scrollY * pxRatio * _scaleRatio;
+    size.w = width * pxRatio * _scaleRatio;
+    size.h = height * pxRatio * _scaleRatio;
+    return size;
+  }
+
   
 }