feat: update board scale display

packages/board/examples/features/lib/data.js

@@ -40,6 +40,16 @@ const data = {
       desc: {
         color: '#e0e0e0',
       }
+    },
+    {
+      x: 300 - 10,
+      y: 200 - 10,
+      w: 20,
+      h: 20,
+      type: 'rect',
+      desc: {
+        color: '#000000',
+      }
     }
   ]
 }

packages/board/examples/features/lib/opts.js

@@ -1,5 +1,7 @@
 export default {
-  width: 600,
-  height: 400,
+  width: 800,
+  height: 600,
+  contextWidth: 600,
+  contextHeight: 400,
   devicePixelRatio: 4
 }

packages/board/examples/features/lib/scroll.js

@@ -8,13 +8,13 @@ export function doScroll(board, conf = {}) {
     return;
   }
   
-  if (conf.scrollX >= 0) {
+  if (conf.scrollX >= 0 || conf.scrollX < 0) {
     inputX.value = conf.scrollX;
     board.scrollX(conf.scrollX);
     board.draw();
   }
 
-  if (conf.scrollY >= 0) {
+  if (conf.scrollY >= 0 || conf.scrollY < 0) {
     inputY.value = conf.scrollY;
     board.scrollY(conf.scrollY);
     board.draw();
@@ -22,14 +22,14 @@ export function doScroll(board, conf = {}) {
 
   inputX.addEventListener('change', () => {
     const val = inputX.value * 1;
-    if (val >= 0) {
+    if (val >= 0 || val < 0) {
       board.scrollX(val);
       board.draw();
     }
   });
   inputY.addEventListener('change', () => {
     const val = inputY.value * 1;
-    if (val >= 0) {
+    if (val >= 0 || val < 0) {
       board.scrollY(val);
       board.draw();
     }

packages/board/examples/features/main.js

@@ -9,18 +9,18 @@ const { Board } = window.iDraw;
 const mount = document.querySelector('#mount');
 const board = new Board(mount, opts);
 
-const conf = {
-  scale: 0.5,
-  scrollX: 100,
-  scrollY: 200,
-}
-
 // const conf = {
-//   scale: 1,
-//   scrollX: 0,
-//   scrollY: 0,
+//   scale: 0.5,
+//   scrollX: 100,
+//   scrollY: 200,
 // }
 
+const conf = {
+  scale: 1,
+  scrollX: 0,
+  scrollY: 0,
+}
+
 drawData(board);
 
 initEvent(board);

packages/board/src/index.ts

@@ -7,6 +7,8 @@ import { TypeBoardEventArgMap } from './util/event';
 type Options = {
   width: number;
   height: number;
+  contextWidth: number;
+  contextHeight: number;
   devicePixelRatio?: number;
 }
 
@@ -23,9 +25,9 @@ class Board {
   private _ctx: Context;
   private _displayCtx: CanvasRenderingContext2D;
   private _originCtx: CanvasRenderingContext2D;
-  private _scaleRatio = 1;
-  private _scrollX = 0;
-  private _scrollY = 0;
+  // private _scaleRatio = 1;
+  // private _scrollX = 0;
+  // private _scrollY = 0;
   private _watcher: Watcher;
 
   constructor(mount: HTMLDivElement, opts: Options) {
@@ -38,7 +40,6 @@ class Board {
     this._displayCtx = this._displayCanvas.getContext('2d') as CanvasRenderingContext2D;
     this._ctx = new Context(this._originCtx, this._opts);
     this._watcher = new Watcher(this._displayCanvas);
-
     this._render();
   }
 
@@ -56,36 +57,33 @@ class Board {
 
   createContext(canvas: HTMLCanvasElement) {
     const opts = this._opts;
-    canvas.width = opts.width * opts.devicePixelRatio;
-    canvas.height = opts.height * opts.devicePixelRatio;
+    canvas.width = opts.contextWidth * opts.devicePixelRatio;
+    canvas.height = opts.contextHeight * opts.devicePixelRatio;
     return new Context(canvas.getContext('2d') as CanvasRenderingContext2D, this._opts);
   }
 
   createCanvas() {
     const opts = this._opts;
     const canvas = document.createElement('canvas');
-    canvas.width = opts.width * opts.devicePixelRatio;
-    canvas.height = opts.height * opts.devicePixelRatio;
+    canvas.width = opts.contextWidth * opts.devicePixelRatio;
+    canvas.height = opts.contextHeight * opts.devicePixelRatio;
     return canvas;
   }
 
   scale(scaleRatio: number) {
     if (scaleRatio > 0) {
-      this._scaleRatio = scaleRatio;
       this._ctx.setTransform({ scale: scaleRatio });
     }
   }
 
   scrollX(x: number) {
-    if (x >= 0) {
-      this._scrollX = x;
+    if (x >= 0 || x < 0) {
       this._ctx.setTransform({ scrollX: x });
     }
   }
 
   scrollY(y: number) {
-    if (y >= 0) {
-      this._scrollY = y;
+    if (y >= 0 || y < 0) {
       this._ctx.setTransform({ scrollY: y });
     }
   }
@@ -116,12 +114,12 @@ class Board {
     if (this._hasRendered === true) {
       return;
     }
-    const { width, height, devicePixelRatio } = this._opts;
-    this._canvas.width = width * devicePixelRatio;
-    this._canvas.height = height * devicePixelRatio;
+    const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts;
+    this._canvas.width = contextWidth * devicePixelRatio;
+    this._canvas.height = contextHeight * devicePixelRatio;
 
-    this._displayCanvas.width = this._canvas.width;
-    this._displayCanvas.height = this._canvas.height;
+    this._displayCanvas.width = width * devicePixelRatio;
+    this._displayCanvas.height = height * devicePixelRatio;
 
     setStyle(this._displayCanvas, {
       width: `${width}px`,
@@ -140,14 +138,48 @@ 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;
+  // }
+
   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;
+    const _scaleRatio = this._ctx.getTransform().scale;
+    const { 
+      width, height, contextWidth, contextHeight,
+      devicePixelRatio: pxRatio,
+    } = this._opts;
+
+    // init scroll
+    if (contextWidth * _scaleRatio < width && contextWidth * _scaleRatio < width) {
+      // make context center
+      this._ctx.setTransform({
+        scrollX: 0,
+        scrollY: 0,
+      })
+    }
+
+
+    const { scrollX: _scrollX, scrollY: _scrollY } = this._ctx.getTransform();
+    
+    const left: number = Math.max(0, (width - contextWidth * _scaleRatio) / 2) * pxRatio;
+    const top: number = Math.max(0, (height - contextHeight * _scaleRatio) / 2) * pxRatio;
+
+    // const left: number = 0;
+    // const top: number = 0;
+    // console.log('left = ', left, 'top =', top);
+
+    const size = { x: 0, y: 0, w: contextWidth * pxRatio, h: contextHeight * pxRatio };
+    size.x = left + _scrollX * pxRatio * _scaleRatio;
+    size.y = top + _scrollY * pxRatio * _scaleRatio;
+    size.w = contextWidth * pxRatio * _scaleRatio;
+    size.h = contextHeight * pxRatio * _scaleRatio;
     return size;
   }
   

packages/core/examples/features/lib/main.js

@@ -15,6 +15,8 @@ const defaultConf = {
 const core = new Core(mount, {
   width: 600,
   height: 400,
+  contextWidth: 600,
+  contextHeight: 400,
   devicePixelRatio: 4
 });
 

packages/core/src/index.ts

@@ -61,10 +61,10 @@ class Core {
   private [_prevPoint]: TypePoint | null = null;
   private [_selectedDotDirection]: TypeHelperWrapperDotDirection | null = null;
 
-  constructor(mount: HTMLDivElement, opts: TypeCoreOptions, config: TypeConfig) {
+  constructor(mount: HTMLDivElement, opts: TypeCoreOptions, config?: TypeConfig) {
     this[_data] = { elements: [] };
     this[_opts] = opts;
-    this[_config] = mergeConfig(config);
+    this[_config] = mergeConfig(config || {});
     this[_board] = new Board(mount, this[_opts]);
     this[_renderer] = new Renderer(this[_board]); 
     this[_element] = new Element(this[_board].getContext());

packages/idraw/examples/lib/main.js

@@ -15,6 +15,8 @@ const defaultConf = {
 const idraw = new IDraw(mount, {
   width: 600,
   height: 400,
+  contextWidth: 600,
+  contextHeight: 400,
   devicePixelRatio: 4
 });
 

packages/idraw/src/index.ts

@@ -33,6 +33,8 @@ class IDraw extends Core {
     super(mount, {
       width: opts.width,
       height: opts.height,
+      contextWidth: opts.contextWidth,
+      contextHeight: opts.contextHeight,
       devicePixelRatio: opts.devicePixelRatio
     }, config);
     this[_opts] = this._createOpts(opts);

packages/types/src/lib/core.ts

@@ -2,6 +2,8 @@ type TypeCoreOptions = {
   width: number;
   height: number;
   devicePixelRatio: number;
+  contextWidth: number;
+  contextHeight: number;
 }
 
 export {

scripts/screen.config.js

@@ -1,5 +1,5 @@
 const pageList = [
-  { path: 'board/examples/features/test.html', w: 600, h: 400, delay: 1000 },
+  // { path: 'board/examples/features/test.html', w: 600, h: 400, delay: 1000 },
   { path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 1000 },
   { path: 'core/examples/features/text.html', w: 600, h: 400, delay: 1000 },
   { path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 1000 },