From 81b56d49d8522a15e6ba933d9b1c6c8fc4e26e2c Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 7 Jun 2021 14:21:30 +0800 Subject: [PATCH] feat: update board scale display --- packages/board/examples/features/lib/data.js | 10 +++ packages/board/examples/features/lib/opts.js | 6 +- .../board/examples/features/lib/scroll.js | 8 +- packages/board/examples/features/main.js | 18 ++-- packages/board/src/index.ts | 82 +++++++++++++------ packages/core/examples/features/lib/main.js | 2 + packages/core/src/index.ts | 4 +- packages/idraw/examples/lib/main.js | 2 + packages/idraw/src/index.ts | 2 + packages/types/src/lib/core.ts | 2 + scripts/screen.config.js | 2 +- 11 files changed, 95 insertions(+), 43 deletions(-) diff --git a/packages/board/examples/features/lib/data.js b/packages/board/examples/features/lib/data.js index fef0559..222e882 100644 --- a/packages/board/examples/features/lib/data.js +++ b/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', + } } ] } diff --git a/packages/board/examples/features/lib/opts.js b/packages/board/examples/features/lib/opts.js index 748f45b..e5c5727 100644 --- a/packages/board/examples/features/lib/opts.js +++ b/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 } \ No newline at end of file diff --git a/packages/board/examples/features/lib/scroll.js b/packages/board/examples/features/lib/scroll.js index d9020f7..46cede9 100644 --- a/packages/board/examples/features/lib/scroll.js +++ b/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(); } diff --git a/packages/board/examples/features/main.js b/packages/board/examples/features/main.js index 1049035..c965051 100644 --- a/packages/board/examples/features/main.js +++ b/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); diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index ca968d1..34cc6cc 100644 --- a/packages/board/src/index.ts +++ b/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; } diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index c801f60..d627c0f 100644 --- a/packages/core/examples/features/lib/main.js +++ b/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 }); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 0d28d43..36cf208 100644 --- a/packages/core/src/index.ts +++ b/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()); diff --git a/packages/idraw/examples/lib/main.js b/packages/idraw/examples/lib/main.js index 88e467a..60b37d8 100644 --- a/packages/idraw/examples/lib/main.js +++ b/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 }); diff --git a/packages/idraw/src/index.ts b/packages/idraw/src/index.ts index 83cf6ba..fb4fcb9 100644 --- a/packages/idraw/src/index.ts +++ b/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); diff --git a/packages/types/src/lib/core.ts b/packages/types/src/lib/core.ts index 14aa903..47660f5 100644 --- a/packages/types/src/lib/core.ts +++ b/packages/types/src/lib/core.ts @@ -2,6 +2,8 @@ type TypeCoreOptions = { width: number; height: number; devicePixelRatio: number; + contextWidth: number; + contextHeight: number; } export { diff --git a/scripts/screen.config.js b/scripts/screen.config.js index bed60ee..c972937 100644 --- a/scripts/screen.config.js +++ b/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 },