From 4b2eae6758de355a6b3e4a9db16f4446e103d360 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Wed, 26 May 2021 17:46:03 +0800 Subject: [PATCH] feat: packages/core add drawBg --- docs/usage/README.md | 3 +++ packages/board/src/util/context.ts | 8 ++++++++ packages/core/example/lib/data.js | 1 + packages/core/src/index.ts | 19 +++++++++++++++---- packages/core/src/lib/draw.ts | 12 ++++++++++++ packages/core/src/lib/element.ts | 4 ++++ packages/core/src/util/color.ts | 4 ++++ packages/core/src/util/index.ts | 3 ++- packages/types/src/lib/board.ts | 5 +++++ packages/types/src/lib/data.ts | 5 +++-- 10 files changed, 57 insertions(+), 7 deletions(-) create mode 100644 docs/usage/README.md diff --git a/docs/usage/README.md b/docs/usage/README.md new file mode 100644 index 0000000..39a1c33 --- /dev/null +++ b/docs/usage/README.md @@ -0,0 +1,3 @@ +# idraw + +// TODO \ No newline at end of file diff --git a/packages/board/src/util/context.ts b/packages/board/src/util/context.ts index 24186ef..580546c 100644 --- a/packages/board/src/util/context.ts +++ b/packages/board/src/util/context.ts @@ -37,6 +37,14 @@ class Context implements TypeContext { } } + getSize() { + return { + width: this._opts.width, + height: this._opts.height, + devicePixelRatio: this._opts.devicePixelRatio, + } + } + setConfig(config: Config) { this._conf = {...this._conf, ...config}; } diff --git a/packages/core/example/lib/data.js b/packages/core/example/lib/data.js index 6027f5d..e04269b 100644 --- a/packages/core/example/lib/data.js +++ b/packages/core/example/lib/data.js @@ -1,5 +1,6 @@ const data = { + bgColor: '#ffffff', elements: [ { x: 10, diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index ddd4971..e2fc34f 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,4 +1,4 @@ -import { TypeData } from '@idraw/types'; +import { TypeData, TypePoint } from '@idraw/types'; import Board from '@idraw/board'; import Renderer from './lib/renderer'; import { Element } from './lib/element'; @@ -60,10 +60,21 @@ class Core { if (this._hasInited === true) { return; } - this._board.on('point', (p) => { - const idx = this._element.isPointInElement(p, this._data); - console.log('idx ====', idx); + // let prevPoint: TypePoint | null; + let selectedIndex: number = -1; + this._board.on('point', (p: TypePoint) => { + selectedIndex = this._element.isPointInElement(p, this._data); + console.log('selectedIndex =', selectedIndex); }); + // this._board.on('moveStart', (p) => { + // prevPoint = p; + // }); + // this._board.on('move', (p) => { + // prevPoint = p; + // }); + // this._board.on('moveEnd', (p) => { + // prevPoint = null; + // }) } } diff --git a/packages/core/src/lib/draw.ts b/packages/core/src/lib/draw.ts index 1bcdef3..ba8575f 100644 --- a/packages/core/src/lib/draw.ts +++ b/packages/core/src/lib/draw.ts @@ -1,6 +1,12 @@ import { TypeContext, TypeData, TypeElement, TypeElemDesc } from '@idraw/types'; +import util from './../util'; + +const { isColorStr } = util.color; export function drawContext(ctx: TypeContext, data: TypeData) { + if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) { + drawBgColor(ctx, data.bgColor); + } for (let i = 0; i < data.elements.length; i++) { const ele = data.elements[i]; switch (ele.type) { @@ -19,4 +25,10 @@ function drawRect(ctx: TypeContext, ele: TypeEleme const desc = ele.desc as TypeElemDesc['rect']; ctx.setFillStyle(desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); +} + +function drawBgColor(ctx: TypeContext, color: string) { + const size = ctx.getSize(); + ctx.setFillStyle(color); + ctx.fillRect(0, 0, size.width, size.height); } \ No newline at end of file diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index 9b72ffe..f9f916f 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -25,4 +25,8 @@ export class Element { } return idx; } + + moveElement() { + + } } diff --git a/packages/core/src/util/color.ts b/packages/core/src/util/color.ts index 4de9f98..dd1f290 100644 --- a/packages/core/src/util/color.ts +++ b/packages/core/src/util/color.ts @@ -4,4 +4,8 @@ export function toColorHexNum(color: string): number { export function toColorHexStr(color: number): string { return '#' + color.toString(16); +} + +export function isColorStr(color?: string): boolean { + return typeof color === 'string' && /^\#[0-9a-z]{3,8}$/i.test(color); } \ No newline at end of file diff --git a/packages/core/src/util/index.ts b/packages/core/src/util/index.ts index b99a113..f7c5dbc 100644 --- a/packages/core/src/util/index.ts +++ b/packages/core/src/util/index.ts @@ -1,7 +1,7 @@ import { loadImage } from './loader'; import { delay, compose, throttle } from './time'; import { downloadImageFromCanvas } from './file'; -import { toColorHexStr, toColorHexNum } from './color'; +import { toColorHexStr, toColorHexNum, isColorStr } from './color'; export default { time: { @@ -18,5 +18,6 @@ export default { color: { toColorHexStr, toColorHexNum, + isColorStr, } } \ No newline at end of file diff --git a/packages/types/src/lib/board.ts b/packages/types/src/lib/board.ts index 81920ae..258f051 100644 --- a/packages/types/src/lib/board.ts +++ b/packages/types/src/lib/board.ts @@ -9,6 +9,11 @@ interface TypeContext { scrollX?: number; scrollY?: number; }): void; + getSize(): { + width: number; + height: number; + devicePixelRatio: number; + }; setFillStyle(color: string): void; fillRect(x: number, y: number, w: number, h: number): void; clearRect(x: number, y: number, w: number, h: number): void; diff --git a/packages/types/src/lib/data.ts b/packages/types/src/lib/data.ts index 9bc0144..9c00304 100644 --- a/packages/types/src/lib/data.ts +++ b/packages/types/src/lib/data.ts @@ -3,8 +3,9 @@ import { TypeElemDesc, TypeElement } from './element'; type TypeData = { - elements: TypeElement[] - selectedElements?: string[] // uuids + elements: TypeElement[]; + bgColor?: string; + selectedElements?: string[]; // uuids } export {