feat: implement @idraw/board config scroll

packages/board/examples/test/scroll.html

@@ -34,6 +34,10 @@
         contextHeight: 900,
         devicePixelRatio: 4,
         canScroll: true,
+        scrollConfig: {
+          color: '#666666',
+          lineWidth: 16
+        }
       }
       const board = new Board(mount, opts);
       // board.on('wheelX', (deltaX) => {

packages/board/src/index.ts

@@ -4,7 +4,7 @@ import { Watcher } from './lib/watcher';
 import { setStyle } from './lib/style';
 import Context from './lib/context';
 import { TypeBoardEventArgMap } from './lib/event';
-import { Scroller } from './lib/scroller';
+import { Scroller, TypeScrollConfig } from './lib/scroller';
 
 const { throttle } = util.time;
 
@@ -34,6 +34,7 @@ type Options = {
   contextHeight: number;
   devicePixelRatio?: number;
   canScroll?: boolean;
+  scrollConfig?: TypeScrollConfig
 }
 
 type PrivateOptions = Options & {
@@ -67,6 +68,7 @@ class Board {
         width: opts.width,
         height: opts.height,
         devicePixelRatio: opts.devicePixelRatio || 1,
+        scrollConfig: opts.scrollConfig,
       })
     this[_render]();
   }

packages/board/src/lib/scroller.ts

@@ -6,22 +6,39 @@ import {
 type TypeOptions = {
   width: number,
   height: number,
-  devicePixelRatio: number
+  devicePixelRatio: number,
+  scrollConfig?: TypeScrollConfig,
 };
 
-const scrollLineWidth = 16;
+type TypePrivateOptions = TypeOptions & {
+  width: number,
+  height: number,
+  devicePixelRatio: number,
+  scrollConfig: TypeScrollConfig,
+}
+
+
+const defaultScrollConfig = {
+  lineWidth: 12,
+  color: '#a0a0a0'
+}
+
+export type TypeScrollConfig = {
+  color: string,
+  lineWidth: number
+}
 
 export class Scroller {
 
   private _displayCtx: CanvasRenderingContext2D;
-  private _opts: TypeOptions;
+  private _opts: TypePrivateOptions;
 
   constructor(
     ctx: CanvasRenderingContext2D,
     opts: TypeOptions
   ) {
     this._displayCtx = ctx;
-    this._opts = opts;
+    this._opts = this._getOpts(opts);
   }
 
   draw(position: TypeScreenPosition) {
@@ -72,13 +89,13 @@ export class Scroller {
   }
 
   isPointAtScrollY(p: TypePoint): boolean {
-    const { width, height } = this._opts;
+    const { width, height, scrollConfig } = this._opts;
     const ctx = this._displayCtx;
     ctx.beginPath();
     ctx.rect(
-      this._doSize(width - scrollLineWidth), 
+      this._doSize(width - scrollConfig.lineWidth), 
       0, 
-      this._doSize(scrollLineWidth), 
+      this._doSize(scrollConfig.lineWidth), 
       this._doSize(height)
     );
     ctx.closePath();
@@ -89,14 +106,14 @@ export class Scroller {
   }
 
   isPointAtScrollX(p: TypePoint): boolean {
-    const { width, height } = this._opts;
+    const { width, height, scrollConfig } = this._opts;
     const ctx = this._displayCtx;
     ctx.beginPath();
     ctx.rect(
       0, 
-      this._doSize(height - scrollLineWidth), 
-      this._doSize(width - scrollLineWidth), 
-      this._doSize(scrollLineWidth)
+      this._doSize(height - scrollConfig.lineWidth), 
+      this._doSize(width - scrollConfig.lineWidth), 
+      this._doSize(scrollConfig.lineWidth)
     );
     ctx.closePath();
     if (ctx.isPointInPath(this._doSize(p.x), this._doSize(p.y))) {
@@ -107,9 +124,9 @@ export class Scroller {
 
   
   calc(position: TypeScreenPosition) {
-    const { width, height } = this._opts;
-    const sliderMinSize = 50;
-    const lineSize = scrollLineWidth;
+    const { width, height, scrollConfig } = this._opts;
+    const sliderMinSize = scrollConfig.lineWidth * 2.5;
+    const lineSize = scrollConfig.lineWidth;
     let xSize = 0;
     let ySize = 0;
     if (position.left <= 0 && position.right <= 0) {
@@ -142,16 +159,25 @@ export class Scroller {
       ySize,
       translateY,
       translateX,
-      color: '#a0a0a0'
+      color: this._opts.scrollConfig.color
     };
     return scrollWrapper;
   }
 
-
-
   private _doSize(num: number) {
     return num * this._opts.devicePixelRatio;
   }
+
+ 
+  private _getOpts(opts: TypeOptions): TypePrivateOptions {
+    const options =  { ...{ scrollConfig: defaultScrollConfig }, ...opts};
+    if (!options.scrollConfig) {
+      options.scrollConfig = {...{}, ...defaultScrollConfig}
+    }
+
+    options.scrollConfig.lineWidth = Math.max(options.scrollConfig.lineWidth, defaultScrollConfig.lineWidth);
+    return options;
+  }
 }
 
 

scripts/screen.config.js

@@ -7,7 +7,7 @@ const pageList = [
   { path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
   { path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 500 },
   { path: 'board/examples/test/scale-005.html', w: 600, h: 400, delay: 500 },
-  { path: 'board/examples/test/scroll.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scroll.html', w: 700, h: 500, delay: 500 },
   { path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 500 },
   { path: 'core/examples/features/text.html', w: 600, h: 400, delay: 500 },
   { path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 500 },