refactor: add screen position calc

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

@@ -8,13 +8,15 @@ export function doScale(board, scale) {
   }
   if (scale > 0) {
     input.value = scale;
-    board.scale(scale);
+    const screen = board.scale(scale);
+    console.log('scale: screen =', screen);
     board.draw();
   }
   input.addEventListener('change', () => {
     const val = input.value * 1;
     if (val > 0) {
-      board.scale(val);
+      const screen = board.scale(val);
+      console.log('scale: screen =', screen);
       board.draw();
     }
   });

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

@@ -10,27 +10,31 @@ export function doScroll(board, conf = {}) {
   
   if (conf.scrollX >= 0 || conf.scrollX < 0) {
     inputX.value = conf.scrollX;
-    board.scrollX(conf.scrollX);
+    const screen = board.scrollX(conf.scrollX);
+    console.log('scrollX: screen =', screen);
     board.draw();
   }
 
   if (conf.scrollY >= 0 || conf.scrollY < 0) {
     inputY.value = conf.scrollY;
-    board.scrollY(conf.scrollY);
+    const screen = board.scrollY(conf.scrollY);
+    console.log('scrollY: screen =', screen);
     board.draw();
   }
 
   inputX.addEventListener('change', () => {
     const val = inputX.value * 1;
     if (val >= 0 || val < 0) {
-      board.scrollX(val);
+      const screen = board.scrollX(val);
+      console.log('scrollX: screen =', screen);
       board.draw();
     }
   });
   inputY.addEventListener('change', () => {
     const val = inputY.value * 1;
     if (val >= 0 || val < 0) {
-      board.scrollY(val);
+      const screen = board.scrollY(val);
+      console.log('scrollY: screen =', screen);
       board.draw();
     }
   });

packages/board/examples/features/main.js

@@ -16,7 +16,7 @@ const board = new Board(mount, opts);
 // }
 
 const conf = {
-  scale: 1,
+  scale: 2,
   scrollX: 0,
   scrollY: 0,
 }

packages/board/src/index.ts

@@ -1,4 +1,4 @@
-// import { TypePoint } from '@idraw/types';
+import { TypeScreenPosition, TypeScreenSize, TypeScreenContext } from '@idraw/types';
 import { Watcher } from './util/watcher';
 import { setStyle } from './util/style';
 import Context from './util/context';
@@ -70,32 +70,41 @@ class Board {
     return canvas;
   }
 
-  scale(scaleRatio: number) {
+  scale(scaleRatio: number): TypeScreenContext {
     if (scaleRatio > 0) {
       this._ctx.setTransform({ scale: scaleRatio });
     }
+    const { position, size } = this._calculateScreen();
+    return { position, size};
   }
 
   scrollX(x: number) {
     if (x >= 0 || x < 0) {
       this._ctx.setTransform({ scrollX: x });
     }
+    const { position, size } = this._calculateScreen();
+    return { position, size};
   }
 
-  scrollY(y: number) {
+  scrollY(y: number): TypeScreenContext {
     if (y >= 0 || y < 0) {
       this._ctx.setTransform({ scrollY: y });
     }
+    const { position, size } = this._calculateScreen();
+    return { position, size};
   }
 
   getTransform() {
     return this._ctx.getTransform();
   }
 
-  draw() {
+  draw(): TypeScreenContext {
     this.clear();
-    const size = this._calculateSize();
-    this._displayCtx.drawImage(this._canvas, size.x, size.y, size.w, size.h);
+    const { position, deviceSize, size } = this._calculateScreen();
+    this._displayCtx.drawImage(
+      this._canvas, deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h
+    );
+    return { position, size};
   }
 
   clear() {
@@ -137,50 +146,50 @@ 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 _scaleRatio = this._ctx.getTransform().scale;
+  private _calculateScreen(): {
+    size: TypeScreenSize,
+    position: TypeScreenPosition,
+    deviceSize: TypeScreenSize,
+  } {
+    const scaleRatio = this._ctx.getTransform().scale;
     const { 
       width, height, contextWidth, contextHeight,
       devicePixelRatio: pxRatio,
     } = this._opts;
 
     // init scroll
-    if (contextWidth * _scaleRatio < width && contextWidth * _scaleRatio < width) {
+    if (contextWidth * scaleRatio < width && contextHeight * scaleRatio < height) {
       // make context center
       this._ctx.setTransform({
-        scrollX: 0,
-        scrollY: 0,
+        scrollX: (width - contextWidth * scaleRatio) / 2,
+        scrollY: (height - contextHeight * scaleRatio) / 2,
       })
     }
 
-
-    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;
+    const { scrollX, scrollY } = this._ctx.getTransform();
+    const size = {
+      x: scrollX * scaleRatio,
+      y: scrollY * scaleRatio,
+      w: contextWidth * scaleRatio,
+      h: contextHeight * scaleRatio,
+    };
+    const deviceSize = {
+      x: scrollX * pxRatio,
+      y: scrollY * pxRatio,
+      w: contextWidth * pxRatio * scaleRatio,
+      h: contextHeight * pxRatio * scaleRatio,
+    };
+    const position = {
+      top: scrollX,
+      bottom: height - (contextHeight * scaleRatio + scrollY),
+      left: scrollY,
+      right: width - (contextWidth * scaleRatio + scrollX),
+    };
+    return {
+      size, position, deviceSize
+    };
   }
   
 }

packages/types/src/index.ts

@@ -6,4 +6,5 @@ export * from './lib/element';
 export * from './lib/helper';
 export * from './lib/config';
 export * from './lib/core';
-export * from './lib/screen';
+export * from './lib/screen';
+export * from './lib/device';

packages/types/src/lib/device.ts

@@ -0,0 +1,10 @@
+type TypeDeviceSize = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export {
+  TypeDeviceSize,
+}

packages/types/src/lib/screen.ts

@@ -5,6 +5,28 @@ type TypeScreenData = {
   selectedElementUUID: string | null;
 }
 
+type TypeScreenPosition = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+type TypeScreenSize = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+type TypeScreenContext = {
+  size: TypeScreenSize,
+  position: TypeScreenPosition
+}
+
 export {
-  TypeScreenData
+  TypeScreenData,
+  TypeScreenPosition,
+  TypeScreenSize,
+  TypeScreenContext,
 }