diff --git a/README.md b/README.md index ef779b7..d8b102a 100644 --- a/README.md +++ b/README.md @@ -172,9 +172,4 @@ To contribute, please follow the steps: - `cd idraw` - `npm i` - `npm run init` -- `npm run dev` for compiling all packages - - `npm run dev ${module}` for compiling single module such as `idraw` -- `npm run serve` for starting a server -- http://127.0.0.1:8080 - - http://127.0.0.1:8080/packages/idraw/examples/features/ - - http://127.0.0.1:8080/packages/core/examples/features/ \ No newline at end of file +- `npm run dev` to select and develop single package \ No newline at end of file diff --git a/package.json b/package.json index 7e0480c..32ae6ae 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,8 @@ "name": "root", "private": false, "scripts": { - "dev": "node ./scripts/dev.js", - "dev:board": "node ./scripts/dev.js board", - "dev:core": "node ./scripts/dev.js core", + "dev": "node ./scripts/dev-vite.js", + "dev:board": "node ./scripts/dev-rollup.js board", "build": "npm run build:src && npm run build:min", "build:src": "NODE_ENV=production BUILD_MODE=reset node ./scripts/build.js", "build:min": "node ./scripts/minify.js", @@ -34,13 +33,15 @@ "@microsoft/api-extractor": "^7.13.2", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^11.2.1", + "@rollup/plugin-typescript": "^8.3.0", "@rollup/pluginutils": "^4.1.1", "@types/jest": "^26.0.23", "@typescript-eslint/eslint-plugin": "^4.25.0", "@typescript-eslint/parser": "^4.25.0", "babel-jest": "^26.6.3", "canvas": "^2.8.0", - "chalk": "^4.1.0", + "chalk": "^4.1.2", + "enquirer": "^2.3.6", "eslint": "^7.27.0", "execa": "^5.0.0", "fs-extra": "^9.1.0", @@ -66,6 +67,7 @@ "terser": "^5.9.0", "ts-node": "^9.1.1", "tslib": "^2.2.0", - "typescript": "^4.3.2" + "typescript": "^4.3.2", + "vite": "^2.7.10" } } diff --git a/packages/board/dev/index.html b/packages/board/dev/index.html new file mode 100644 index 0000000..0fff3a3 --- /dev/null +++ b/packages/board/dev/index.html @@ -0,0 +1,35 @@ + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/packages/board/dev/main.js b/packages/board/dev/main.js new file mode 100644 index 0000000..f9ae602 --- /dev/null +++ b/packages/board/dev/main.js @@ -0,0 +1,45 @@ +import Board from './../src/index'; + +function drawBoard(board) { + const ctx = board.getContext(); + // ctx.setFillStyle('#ffffff'); + // ctx.fillRect(0, 0, 300, 200); + + ctx.setFillStyle('#f0f0f0'); + ctx.fillRect(5, 5, 100, 60); + + ctx.setFillStyle('#cccccc'); + ctx.fillRect(40, 40, 100, 60); + + ctx.setFillStyle('#c0c0c0'); + ctx.fillRect(80, 80, 100, 60); + + ctx.setFillStyle('#e0e0e0'); + ctx.fillRect(200 - 5, 150 - 5, 100, 50); + + ctx.setFillStyle('#000'); + ctx.fillRect(150 - 5, 100 - 5, 10, 10); +} + +const mount = document.querySelector('#mount'); +const opts = { + width: 300, + height: 200, + contextWidth: 300, + contextHeight: 200, + devicePixelRatio: 4, + canScroll: true, +} +const board = new Board(mount, opts); +drawBoard(board); +board.draw(); + +board.resetSize({ + width: 270, + height: 180, + contextWidth: 400, + contextHeight: 320, + devicePixelRatio: 4, +}); +drawBoard(board); +board.draw(); \ No newline at end of file diff --git a/packages/board/package.json b/packages/board/package.json index 695ad60..ee13cc3 100644 --- a/packages/board/package.json +++ b/packages/board/package.json @@ -7,7 +7,7 @@ "unpkg": "dist/index.global.js", "types": "dist/index.d.ts", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "dev": "vite dev" }, "files": [ "dist/*.ts", diff --git a/packages/core/dev/data.js b/packages/core/dev/data.js new file mode 100644 index 0000000..0e8c7bd --- /dev/null +++ b/packages/core/dev/data.js @@ -0,0 +1,63 @@ +const data = { + bgColor: "#ffffff", + elements: [ + { + name: "rect-001", + x: 5, + y: 5, + w: 100, + h: 50, + type: "rect", + desc: { + bgColor: "#ffeb3b", + borderRadius: 10, + borderWidth: 5, + borderColor: "#ffc107", + }, + }, + { + name: "text-002", + x: 40, + y: 40, + w: 100, + h: 60, + // angle: 30, + type: "text", + desc: { + fontSize: 16, + text: "Hello Text", + fontWeight: 'bold', + color: "#666666", + borderRadius: 30, + borderWidth: 4, + borderColor: "#ff5722", + }, + }, + { + name: "image-003", + x: 80, + y: 80, + w: 160, + h: 80, + type: "image", + desc: { + src: './images/computer.png', + }, + }, + { + name: "svg-004", + x: 200 - 5, + y: 150 - 50, + w: 100, + h: 100, + type: "svg", + desc: { + svg: '', + }, + }, + ], +}; + +export function getData() { + return data; +} diff --git a/packages/core/dev/images/building-001.png b/packages/core/dev/images/building-001.png new file mode 100644 index 0000000..4b87e78 Binary files /dev/null and b/packages/core/dev/images/building-001.png differ diff --git a/packages/core/dev/images/building-002.png b/packages/core/dev/images/building-002.png new file mode 100644 index 0000000..c0699ff Binary files /dev/null and b/packages/core/dev/images/building-002.png differ diff --git a/packages/core/dev/images/building-003.png b/packages/core/dev/images/building-003.png new file mode 100644 index 0000000..5391f28 Binary files /dev/null and b/packages/core/dev/images/building-003.png differ diff --git a/packages/core/dev/images/chart.png b/packages/core/dev/images/chart.png new file mode 100644 index 0000000..67efe1f Binary files /dev/null and b/packages/core/dev/images/chart.png differ diff --git a/packages/core/dev/images/computer.png b/packages/core/dev/images/computer.png new file mode 100644 index 0000000..01fde93 Binary files /dev/null and b/packages/core/dev/images/computer.png differ diff --git a/packages/core/dev/images/phone.png b/packages/core/dev/images/phone.png new file mode 100644 index 0000000..4ffec7f Binary files /dev/null and b/packages/core/dev/images/phone.png differ diff --git a/packages/core/dev/index.html b/packages/core/dev/index.html new file mode 100644 index 0000000..470b2af --- /dev/null +++ b/packages/core/dev/index.html @@ -0,0 +1,33 @@ + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/packages/core/dev/main.js b/packages/core/dev/main.js new file mode 100644 index 0000000..970fba4 --- /dev/null +++ b/packages/core/dev/main.js @@ -0,0 +1,33 @@ +import Core from './../src/index'; +import { getData } from './data.js'; + +console.log('Core =', Core) + +var opts = { + width: 300, + height: 200, + contextWidth: 300, + contextHeight: 200, + devicePixelRatio: 4, +} +// var config = { +// elementWrapper: { +// controllerSize: 4, +// } +// } + +const mount = document.querySelector('#mount'); +const data = getData(); +const core = new Core( + mount, + Object.assign({}, opts, { + contextWidth: 500, + contextHeight: 400, + }), + { + scrollWrapper: { + use: true, + }, + } +); +core.setData(data); diff --git a/packages/core/examples/test/api.html b/packages/core/examples/test/api.html index 5236f92..a347454 100644 --- a/packages/core/examples/test/api.html +++ b/packages/core/examples/test/api.html @@ -100,6 +100,12 @@ + + + + \ No newline at end of file diff --git a/packages/idraw/dev/main.js b/packages/idraw/dev/main.js new file mode 100644 index 0000000..7725d66 --- /dev/null +++ b/packages/idraw/dev/main.js @@ -0,0 +1,31 @@ +import iDraw from './../src/index'; +import { getData } from './data.js'; + +var opts = { + width: 300, + height: 200, + contextWidth: 300, + contextHeight: 200, + devicePixelRatio: 4, +} +// var config = { +// elementWrapper: { +// controllerSize: 4, +// } +// } + +const mount = document.querySelector('#mount'); +const data = getData(); +const idraw = new iDraw( + mount, + Object.assign({}, opts, { + contextWidth: 500, + contextHeight: 400, + }), + { + scrollWrapper: { + use: true, + }, + } +); +idraw.setData(data); diff --git a/packages/kernal/README.md b/packages/kernal/README.md deleted file mode 100644 index ef7fac7..0000000 --- a/packages/kernal/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @idraw/kernal - -[![Node.js CI](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml) \ No newline at end of file diff --git a/packages/kernal/__tests__/index.test.ts b/packages/kernal/__tests__/index.test.ts deleted file mode 100644 index d71d179..0000000 --- a/packages/kernal/__tests__/index.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -describe('@idraw/kernal', () => { - test('test', async () => { - // TODO - expect(1).toStrictEqual(1); - }); -}) - diff --git a/packages/kernal/__tests__/lib/context-2d.test.ts b/packages/kernal/__tests__/lib/context-2d.test.ts deleted file mode 100644 index 9e206f2..0000000 --- a/packages/kernal/__tests__/lib/context-2d.test.ts +++ /dev/null @@ -1,55 +0,0 @@ -import Context2d from './../../src/lib/context-2d'; - -describe('@idraw/kernal: lib/context-2d', () => { - - test('Context2d.globalAlpha', async () => { - const globalAlpha = 0.55; - const ctx2d = new Context2d(); - ctx2d.globalAlpha = globalAlpha; - expect(ctx2d.globalAlpha).toStrictEqual(globalAlpha); - expect(ctx2d.$getAllAttrs()).toStrictEqual({ globalAlpha }); - expect(ctx2d.$getAllRecords()).toStrictEqual([ { name: 'globalAlpha', type: 'attr', args: [ globalAlpha ] } ]); - }); - - test('Context2d.globalCompositeOperation', async () => { - const globalCompositeOperation = 'source-over'; - const ctx2d = new Context2d(); - ctx2d.globalCompositeOperation = globalCompositeOperation; - expect(ctx2d.globalCompositeOperation).toStrictEqual(globalCompositeOperation); - expect(ctx2d.$getAllAttrs()).toStrictEqual({ globalCompositeOperation }); - expect(ctx2d.$getAllRecords()).toStrictEqual([ { name: 'globalCompositeOperation', type: 'attr', args: [ globalCompositeOperation ] } ]); - }); - - - test('Context2d.drawImage', async () => { - const ctx2d = new Context2d(); - const img = new Image(); - const dx = 11; - const dy = 12; - const dw = 51; - const dh = 52; - const sx = 61; - const sy = 62; - const sw = 101 - const sh = 102; - ctx2d.drawImage(img, dx, dy); - ctx2d.drawImage(img, dx, dy, dw, dh); - ctx2d.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); - expect(ctx2d.$getAllRecords()).toStrictEqual([{ - name: 'drawImage', - type: 'method', - args: [img, dx, dy] - }, - { - name: 'drawImage', - type: 'method', - args: [img, dx, dy, dw, dh] - }, - { - name: 'drawImage', - type: 'method', - args: [img, sx, sy, sw, sh, dx, dy, dw, dh] - }]); - }); -}) - diff --git a/packages/kernal/api-extractor.json b/packages/kernal/api-extractor.json deleted file mode 100644 index 7ae8eca..0000000 --- a/packages/kernal/api-extractor.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../api-extractor.json", - "mainEntryPointFilePath": "./dist/packages//src/index.d.ts", - "dtsRollup": { - "publicTrimmedFilePath": "./dist/index.d.ts" - } -} \ No newline at end of file diff --git a/packages/kernal/examples/index.html b/packages/kernal/examples/index.html deleted file mode 100644 index b7c66aa..0000000 --- a/packages/kernal/examples/index.html +++ /dev/null @@ -1,5 +0,0 @@ - - - Hello World - - \ No newline at end of file diff --git a/packages/kernal/package.json b/packages/kernal/package.json deleted file mode 100644 index 0bfec51..0000000 --- a/packages/kernal/package.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "name": "@idraw/kernal", - "version": "0.2.0-alpha.2", - "description": "", - "main": "dist/index.cjs.js", - "module": "dist/index.es.js", - "unpkg": "dist/index.global.js", - "types": "dist/index.d.ts", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "files": [ - "dist/*.ts", - "dist/*.js" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/idrawjs/idraw.git" - }, - "bugs": { - "url": "https://github.com/idrawjs/idraw/issues" - }, - "homepage": "https://github.com/idrawjs/idraw#readme", - "author": "chenshenhai", - "license": "MIT", - "devDependencies": { - "@idraw/types": "^0.2.0-alpha.2" - }, - "dependencies": { - "@idraw/board": "^0.2.0-alpha.2", - "@idraw/util": "^0.2.0-alpha.2" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/kernal/src/index.ts b/packages/kernal/src/index.ts deleted file mode 100644 index 50998e5..0000000 --- a/packages/kernal/src/index.ts +++ /dev/null @@ -1,143 +0,0 @@ -import Board from '@idraw/board'; -import { TypeCoreOptions, TypeConfig } from '@idraw/types' -import { _opts, _config, _board, _todo } from './names'; - -class Kernal { - - private [_board]: Board; - private [_opts]: TypeCoreOptions; - private [_config]: TypeConfig; - - constructor(board: Board, opts: TypeCoreOptions, config?: TypeConfig) { - this[_board] = board; - this[_opts] = opts; - this[_config] = config || {}; - } - - // TODO avoid ts error - [_todo]() { - console.log(this[_board]) - console.log(this[_opts]) - console.log(this[_config]) - } - - // getElement(uuid: string) { - // // TODO - // } - - // getElementByIndex(index: number) { - // // TODO - // } - - // selectElementByIndex(index: number, opts?: { useMode?: boolean }): void { - // // TODO - // } - - // selectElement(uuid: string, opts?: { useMode?: boolean }): void { - // // TODO - // } - - // moveUpElement(uuid: string): void { - // // TODO - // } - - // moveDownElement(uuid: string): void { - // // TODO - // } - - // updateElement(elem: TypeElement) { - // // TODO - // } - - // addElement(elem: TypeElementBase) { - // // TODO - // } - - // deleteElement(uuid: string) { - // // TODO - // } - - // insertElementBefore(elem: TypeElementBase, beforeUUID: string) { - // // TODO - // } - - // insertElementBeforeIndex(elem: TypeElementBase, index: number) { - // // TODO - // } - - // getSelectedElements() { - // // TODO - // } - - // insertElementAfter(elem: TypeElementBase, beforeUUID: string) { - // // TODO - // } - - // insertElementAfterIndex(elem: TypeElementBase, index: number) { - // // TODO - // } - - // resetSize(opts: TypeBoardSizeOptions) { - // // TODO - // } - - // scale(ratio: number): TypeScreenContext { - // // TODO - // } - - // scrollLeft(left: number): TypeScreenContext { - // // TODO - // } - - // scrollTop(top: number): TypeScreenContext { - // // TODO - // } - - // getScreenTransform(): TypeScreenData { - // // TODO - // } - - // getData(): TypeData { - // // TODO - // } - - // setData(data: any | TypeData, opts?: { triggerChangeEvent: boolean }): void { - // // TODO - // } - - // clearOperation() { - // // TODO - // } - - // on(key: T, callback: (p: TypeCoreEventArgMap[T]) => void) { - // // TODO - // } - - // off(key: T, callback: (p: TypeCoreEventArgMap[T]) => void) { - // // TODO - // } - - // pointScreenToContext(p: TypePoint) { - // // TODO - // } - - // pointContextToScreen(p: TypePoint) { - // // TODO - // } - - // __getBoardContext(): TypeContext { - // // TODO - // } - - // __getDisplayContext(): CanvasRenderingContext2D { - // // TODO - // } - - // __getOriginContext(): CanvasRenderingContext2D { - // // TODO - // } - - -} - -export default Kernal; \ No newline at end of file diff --git a/packages/kernal/src/lib/context-2d.ts b/packages/kernal/src/lib/context-2d.ts deleted file mode 100644 index d3bb639..0000000 --- a/packages/kernal/src/lib/context-2d.ts +++ /dev/null @@ -1,167 +0,0 @@ -// import { TypeContext, TypeBoardSizeOptions } from '@idraw/types'; - -interface CanvasRenderingContext2D extends - - CanvasText, - CanvasTextDrawingStyles, - CanvasTransform, - CanvasUserInterface {}; - - -type ContextRecord = { - name: string, - type: 'attr' | 'method', - args: any[] -} - -type ContextAttr = { - globalAlpha?: number; - globalCompositeOperation?: string; -} - -class Context2d { - - private _records: ContextRecord[]; - private _attrs: ContextAttr = {}; - - constructor() { - this._records = []; - } - - // CanvasCompositing - get globalAlpha (): number | undefined { - return this._attrs['globalAlpha']; - } - set globalAlpha(value: number | undefined) { - this._attrs['globalAlpha'] = value; - this._records.push({ - name: 'globalAlpha', - type: 'attr', - args: [value] - }) - } - get globalCompositeOperation (): string | undefined { - return this._attrs['globalCompositeOperation']; - } - set globalCompositeOperation(value: string | undefined) { - // source-over source-in source-out source-atop destination-over destination-in destination-out destination-atop lighter copy xor multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity - this._attrs['globalCompositeOperation'] = value; - this._records.push({ - name: 'globalCompositeOperation', - type: 'attr', - args: [value] - }) - } - - // CanvasDrawImage - drawImage( - image: CanvasImageSource, sx: number, sy: number, - sw?: number, sh?: number, dx?: number, dy?: number, dw?: number, dh?: number - ): void{ - const args = Array.from(arguments); - this._records.push({ - name: 'drawImage', - type: 'method', - args: args, - }); - } - - // CanvasDrawPath { - // beginPath(): void; - // clip(fillRule?: CanvasFillRule): void; - // clip(path: Path2D, fillRule?: CanvasFillRule): void; - // fill(fillRule?: CanvasFillRule): void; - // fill(path: Path2D, fillRule?: CanvasFillRule): void; - // isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean; - // isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean; - // isPointInStroke(x: number, y: number): boolean; - // isPointInStroke(path: Path2D, x: number, y: number): boolean; - // stroke(): void; - // stroke(path: Path2D): void; - // } - - // CanvasFillStrokeStyles { - // fillStyle: string | CanvasGradient | CanvasPattern; - // strokeStyle: string | CanvasGradient | CanvasPattern; - // createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient; - // createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null; - // createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient; - // } - - // CanvasFilters { - // filter: string; - // } - - // CanvasImageData { - // createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData; - // createImageData(imagedata: ImageData): ImageData; - // getImageData(sx: number, sy: number, sw: number, sh: number, settings?: ImageDataSettings): ImageData; - // putImageData(imagedata: ImageData, dx: number, dy: number): void; - // putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void; - // } - - // CanvasImageSmoothing { - // imageSmoothingEnabled: boolean; - // imageSmoothingQuality: ImageSmoothingQuality; - // } - - - // CanvasPath { - // arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void; - // arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void; - // bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; - // closePath(): void; - // ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void; - // lineTo(x: number, y: number): void; - // moveTo(x: number, y: number): void; - // quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; - // rect(x: number, y: number, w: number, h: number): void; - // } - - // CanvasPathDrawingStyles { - // lineCap: CanvasLineCap; - // lineDashOffset: number; - // lineJoin: CanvasLineJoin; - // lineWidth: number; - // miterLimit: number; - // getLineDash(): number[]; - // setLineDash(segments: number[]): void; - // } - - // CanvasRect { - // clearRect(x: number, y: number, w: number, h: number): void; - // fillRect(x: number, y: number, w: number, h: number): void; - // strokeRect(x: number, y: number, w: number, h: number): void; - // } - - // CanvasShadowStyles { - // shadowBlur: number; - // shadowColor: string; - // shadowOffsetX: number; - // shadowOffsetY: number; - // } - - // CanvasState { - // restore(): void; - // save(): void; - // } - - - // Additional methods - $getAllRecords(): ContextRecord[] { - return this._records; - } - - $getAllAttrs() { - return this._attrs; - } - - - // globalAlpha: number; - // globalCompositeOperation: string; -} - -export default Context2d; - - - diff --git a/packages/kernal/src/lib/element-base.ts b/packages/kernal/src/lib/element-base.ts deleted file mode 100644 index 296c6ce..0000000 --- a/packages/kernal/src/lib/element-base.ts +++ /dev/null @@ -1,5 +0,0 @@ -class ElementBase { - constructor() { - - } -} \ No newline at end of file diff --git a/packages/kernal/src/lib/element-controller.ts b/packages/kernal/src/lib/element-controller.ts deleted file mode 100644 index fca9be0..0000000 --- a/packages/kernal/src/lib/element-controller.ts +++ /dev/null @@ -1,6 +0,0 @@ - -class ElementController { - // TODO -} - -export default ElementController; \ No newline at end of file diff --git a/packages/kernal/src/lib/element-hub.ts b/packages/kernal/src/lib/element-hub.ts deleted file mode 100644 index 96237ff..0000000 --- a/packages/kernal/src/lib/element-hub.ts +++ /dev/null @@ -1,26 +0,0 @@ -import ElementController from './element-controller'; - -class ElementHub { - - private _controllerMap: Map = new Map(); - - constructor() { - // TODO - } - - register(type: string, controller: ElementController) { - if (this._controllerMap.has(type) !== true) { - this._controllerMap.set(type, controller) - } - } - - clear() { - this._controllerMap.clear(); - } - - getDrawActions() { - // TODO - } -} - -export default ElementHub; \ No newline at end of file diff --git a/packages/kernal/src/names.ts b/packages/kernal/src/names.ts deleted file mode 100644 index 6353053..0000000 --- a/packages/kernal/src/names.ts +++ /dev/null @@ -1,9 +0,0 @@ -const _opts = Symbol('_opts'); -const _config = Symbol('_config'); -const _board = Symbol('_board'); -const _state = Symbol('_state'); -const _todo = Symbol('_todo'); - -export { - _board, _state, _opts, _config, _todo, -} \ No newline at end of file diff --git a/packages/renderer/dev/data.js b/packages/renderer/dev/data.js new file mode 100644 index 0000000..0e8c7bd --- /dev/null +++ b/packages/renderer/dev/data.js @@ -0,0 +1,63 @@ +const data = { + bgColor: "#ffffff", + elements: [ + { + name: "rect-001", + x: 5, + y: 5, + w: 100, + h: 50, + type: "rect", + desc: { + bgColor: "#ffeb3b", + borderRadius: 10, + borderWidth: 5, + borderColor: "#ffc107", + }, + }, + { + name: "text-002", + x: 40, + y: 40, + w: 100, + h: 60, + // angle: 30, + type: "text", + desc: { + fontSize: 16, + text: "Hello Text", + fontWeight: 'bold', + color: "#666666", + borderRadius: 30, + borderWidth: 4, + borderColor: "#ff5722", + }, + }, + { + name: "image-003", + x: 80, + y: 80, + w: 160, + h: 80, + type: "image", + desc: { + src: './images/computer.png', + }, + }, + { + name: "svg-004", + x: 200 - 5, + y: 150 - 50, + w: 100, + h: 100, + type: "svg", + desc: { + svg: '', + }, + }, + ], +}; + +export function getData() { + return data; +} diff --git a/packages/renderer/dev/images/computer.png b/packages/renderer/dev/images/computer.png new file mode 100644 index 0000000..01fde93 Binary files /dev/null and b/packages/renderer/dev/images/computer.png differ diff --git a/packages/renderer/dev/images/phone.png b/packages/renderer/dev/images/phone.png new file mode 100644 index 0000000..4ffec7f Binary files /dev/null and b/packages/renderer/dev/images/phone.png differ diff --git a/packages/renderer/dev/index.html b/packages/renderer/dev/index.html new file mode 100644 index 0000000..fd34c98 --- /dev/null +++ b/packages/renderer/dev/index.html @@ -0,0 +1,35 @@ + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/packages/renderer/dev/main.js b/packages/renderer/dev/main.js new file mode 100644 index 0000000..c1c9712 --- /dev/null +++ b/packages/renderer/dev/main.js @@ -0,0 +1,46 @@ +// import util from '@idraw/util'; +import Renderer from './../src/index'; +import { getData } from './data.js'; + +const data = getData(); + +// const Context = util.Context; +const canvas = document.querySelector('#canvas'); +const opts = { + width: 600, + height: 400, + contextWidth: 600, + contextHeight: 400, + devicePixelRatio: 1, +} + +const renderer = new Renderer(opts); + +renderer.on('load', (e) => { + console.log('load =', e) +}) +renderer.on('loadComplete', (e) => { + console.log('loadComplete =', e) +}) + +renderer.on('drawFrame', (e) => { + console.log('drawFrame =', e) +}) +renderer.on('drawFrameComplete', (e) => { + console.log('drawFrameComplete =', e) +}) + +// renderer.render(canvas, data) +// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false }) +// console.log(renderer.getContext()) + + +// canvas.width = opts.width * opts.devicePixelRatio; +// canvas.height = opts.height * opts.devicePixelRatio; +// const ctx = new Context(canvas.getContext('2d'), opts) +renderer.render(canvas, data); +renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false }) + + + + diff --git a/packages/util/dev/index.html b/packages/util/dev/index.html new file mode 100644 index 0000000..0fff3a3 --- /dev/null +++ b/packages/util/dev/index.html @@ -0,0 +1,35 @@ + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/packages/util/dev/main.js b/packages/util/dev/main.js new file mode 100644 index 0000000..9a3b675 --- /dev/null +++ b/packages/util/dev/main.js @@ -0,0 +1,4 @@ +import util from './../src/index'; + +console.log('util =', util) + diff --git a/scripts/dev.js b/scripts/dev-rollup.js similarity index 90% rename from scripts/dev.js rename to scripts/dev-rollup.js index a1ffa42..24dc303 100644 --- a/scripts/dev.js +++ b/scripts/dev-rollup.js @@ -4,7 +4,7 @@ const process = require('process'); async function main() { - await execa( 'rollup', + await execa('rollup', [ '-w', '-c', diff --git a/scripts/dev-vite.js b/scripts/dev-vite.js new file mode 100644 index 0000000..69820d7 --- /dev/null +++ b/scripts/dev-vite.js @@ -0,0 +1,60 @@ +const { AutoComplete } = require('enquirer'); +const chalk = require('chalk'); +const { createServer, defineConfig } = require('vite'); +const { resolvePackagePath } = require('./util/project'); +const { packages } = require('./config'); + +dev(); + +async function dev() { + const pkgName = await inputPackageName(); + const viteConfig = getViteConfig(pkgName); + const server = await createServer(viteConfig) + await server.listen() + server.printUrls(); + const { port, host = '127.0.0.1' } = server.config?.server || {} + console.log( + `Open: ` + + chalk.green( + `http://${host}:${port}/index.html` + ) + ); +} + +function getViteConfig(pkgName) { + const viteConfig = defineConfig({ + configFile: false, + root: resolvePackagePath(pkgName), + publicDir: resolvePackagePath(pkgName, 'dev'), + server: { + port: 8080, + host: '127.0.0.1', + }, + plugins: [], + esbuild: { + include: [ + /\.ts$/, + /\.js$/, + ], + exclude: [ + /\.html$/ + ] + }, + }); + return viteConfig; +} + +async function inputPackageName() { + choices = packages.map((pkg) => { + return pkg.dirName; + }) + const prompt = new AutoComplete({ + name: 'Package Name', + message: 'Pick your dev package', + limit: choices.length, + initial: 0, + choices: choices + }); + const pkgName = await prompt.run(); + return pkgName; +} diff --git a/scripts/hello.js b/scripts/hello.js deleted file mode 100644 index 4f3ac02..0000000 --- a/scripts/hello.js +++ /dev/null @@ -1 +0,0 @@ -console.log('Hello World!') \ No newline at end of file diff --git a/scripts/util/project.js b/scripts/util/project.js new file mode 100644 index 0000000..f41af3a --- /dev/null +++ b/scripts/util/project.js @@ -0,0 +1,19 @@ +const path = require('path'); + +function resolvePackagePath() { + const pathList = Array.from(arguments); + const baseDir = path.join(resolveProjectPath(), 'packages'); + return path.join(baseDir, ...pathList); +} + +function resolveProjectPath() { + const pathList = Array.from(arguments); + const baseDir = path.join(__dirname, '..', '..'); + return path.join(baseDir, ...pathList); +} + + +module.exports = { + resolveProjectPath, + resolvePackagePath, +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 55a426b..000792a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,6 +24,10 @@ "include": [ "packages/global.d.ts", "packages/*/src", - "packages/*/__tests__" + "packages/*/__tests__", + "packages/*/dev", + ], + "exclude": [ + "packages/*/examples" ] } \ No newline at end of file