From 4360131bbd2e5eaa1d440fe8c30d7fb43fe47142 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 12 Feb 2023 11:39:24 +0800 Subject: [PATCH] chore: improve build script --- package.json | 5 +- packages/core/src/lib/engine.ts | 220 ++++++++++++++-------- packages/core/src/lib/helper.ts | 167 ++++++++++------ packages/core/src/lib/mapper.ts | 50 ++--- packages/core/src/mixins/element.ts | 108 ++++++++--- packages/idraw/dev/{data.js => data.ts} | 0 packages/idraw/dev/index.html | 2 +- packages/idraw/dev/main.js | 45 ----- packages/idraw/dev/main.ts | 45 +++++ packages/renderer/src/constant/element.ts | 15 ++ packages/renderer/src/constant/static.ts | 12 ++ packages/renderer/src/lib/parse.ts | 24 ++- pnpm-lock.yaml | 122 ++++++++++++ scripts/build-module.ts | 44 ++++- scripts/util/file.ts | 26 +-- scripts/util/project.ts | 2 +- scripts/util/screen.ts | 7 +- tsconfig.json | 31 +-- tsconfig.node.json | 22 +++ tsconfig.web.json | 24 +++ 20 files changed, 666 insertions(+), 305 deletions(-) rename packages/idraw/dev/{data.js => data.ts} (100%) delete mode 100644 packages/idraw/dev/main.js create mode 100644 packages/idraw/dev/main.ts create mode 100644 packages/renderer/src/constant/element.ts create mode 100644 packages/renderer/src/constant/static.ts create mode 100644 tsconfig.node.json create mode 100644 tsconfig.web.json diff --git a/package.json b/package.json index ea86959..be30634 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": false, "type": "module", "scripts": { - "postinstall": "npm run build", + "_postinstall": "npm run build", "dev": "vite-node ./scripts/dev.ts", "dev:mod": "vite-node ./scripts/dev-mod.ts", "build": "npm run build:mod && npm run build:bundle && npm run build:min", @@ -32,8 +32,11 @@ "@babel/core": "^7.20.7", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.18.6", + "@types/glob": "^8.0.1", "@types/jest": "^29.2.5", + "@types/koa-compose": "^3.2.5", "@types/node": "^18.11.18", + "@types/serve-handler": "^6.1.1", "@typescript-eslint/eslint-plugin": "^5.47.1", "@typescript-eslint/parser": "^5.47.1", "babel-jest": "^29.3.1", diff --git a/packages/core/src/lib/engine.ts b/packages/core/src/lib/engine.ts index 1a72c07..f517f7c 100644 --- a/packages/core/src/lib/engine.ts +++ b/packages/core/src/lib/engine.ts @@ -1,9 +1,13 @@ import { - TypePoint, TypeHelperWrapperControllerDirection,InterfaceHelperPlugin, - TypeConfigStrict, TypeData, TypeHelperConfig, + TypePoint, + TypeHelperWrapperControllerDirection, + InterfaceHelperPlugin, + TypeConfigStrict, + TypeData, + TypeHelperConfig } from '@idraw/types'; import { deepClone, throttle } from '@idraw/util'; -import { Board } from '@idraw/board'; +import Board from '@idraw/board'; import { Mode, CursorStatus } from './../constant/static'; import { TempData } from './engine-temp'; import { Helper } from './helper'; @@ -12,26 +16,25 @@ import { Element } from './element'; import { CoreEvent } from './core-event'; type Options = { - coreEvent: CoreEvent, - board: Board, - element: Element, - config: TypeConfigStrict, - drawFeekback: () => void, + coreEvent: CoreEvent; + board: Board; + element: Element; + config: TypeConfigStrict; + drawFeekback: () => void; getDataFeekback: () => TypeData; - selectElementByIndex: (index: number, opts?: { useMode?: boolean }) => void, - emitChangeScreen: () => void, - emitChangeData: () => void, -} + selectElementByIndex: (index: number, opts?: { useMode?: boolean }) => void; + emitChangeScreen: () => void; + emitChangeData: () => void; +}; export class Engine { - private _plugins: InterfaceHelperPlugin[] = []; private _opts: Options; private _mapper: Mapper; public temp: TempData; public helper: Helper; - + constructor(opts: Options) { const { board, config, element } = opts; const helper = new Helper(board, config); @@ -50,12 +53,14 @@ export class Engine { } updateHelperConfig(opts: { - width: number, height: number, devicePixelRatio: number + width: number; + height: number; + devicePixelRatio: number; }) { const { board, getDataFeekback, config } = this._opts; const data = getDataFeekback(); const transform = board.getTransform(); - this.helper.updateConfig(data,{ + this.helper.updateConfig(data, { width: opts.width, height: opts.height, devicePixelRatio: opts.devicePixelRatio, @@ -64,8 +69,8 @@ export class Engine { selectedUUIDList: this.temp.get('selectedUUIDList'), scale: transform.scale, scrollX: transform.scrollX, - scrollY: transform.scrollY, - }) + scrollY: transform.scrollY + }); } init() { @@ -77,7 +82,7 @@ export class Engine { return; } const { board } = this._opts; - + board.on('hover', throttle(this._handleHover.bind(this), 32)); board.on('leave', throttle(this._handleLeave.bind(this), 32)); board.on('point', throttle(this._handleClick.bind(this), 16)); @@ -88,17 +93,18 @@ export class Engine { board.on('moveEnd', this._handleMoveEnd.bind(this)); } - private _handleDoubleClick (point: TypePoint) { + private _handleDoubleClick(point: TypePoint) { const { element, getDataFeekback, drawFeekback, coreEvent } = this._opts; const data = getDataFeekback(); const [index, uuid] = element.isPointInElement(point, data); if (index >= 0 && uuid) { const elem = deepClone(data.elements?.[index]); if (elem?.operation?.invisible !== true) { - coreEvent.trigger( - 'screenDoubleClickElement', - { index, uuid, element: deepClone(data.elements?.[index])} - ); + coreEvent.trigger('screenDoubleClickElement', { + index, + uuid, + element: deepClone(data.elements?.[index]) + }); } } drawFeekback(); @@ -109,8 +115,12 @@ export class Engine { return; } const { - element, getDataFeekback, selectElementByIndex, coreEvent, - emitChangeScreen, drawFeekback + element, + getDataFeekback, + selectElementByIndex, + coreEvent, + emitChangeScreen, + drawFeekback } = this._opts; const helper = this.helper; const data = getDataFeekback(); @@ -118,24 +128,30 @@ export class Engine { // Coontroll Element-List this.temp.set('mode', Mode.SELECT_ELEMENT_LIST); } else { - const { - uuid, selectedControllerDirection - } = helper.isPointInElementWrapperController(point, data); + const { uuid, selectedControllerDirection } = + helper.isPointInElementWrapperController(point, data); if (uuid && selectedControllerDirection) { // Controll Element-Wrapper this.temp.set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER); - this.temp.set('selectedControllerDirection', selectedControllerDirection); + this.temp.set( + 'selectedControllerDirection', + selectedControllerDirection + ); this.temp.set('selectedUUID', uuid); } else { const [index, uuid] = element.isPointInElement(point, data); if (index >= 0 && data.elements[index]?.operation?.invisible !== true) { // Controll Element selectElementByIndex(index, { useMode: true }); - if (typeof uuid === 'string' && coreEvent.has('screenSelectElement')) { - coreEvent.trigger( - 'screenSelectElement', - { index, uuid, element: deepClone(data.elements?.[index])} - ); + if ( + typeof uuid === 'string' && + coreEvent.has('screenSelectElement') + ) { + coreEvent.trigger('screenSelectElement', { + index, + uuid, + element: deepClone(data.elements?.[index]) + }); emitChangeScreen(); } this.temp.set('mode', Mode.SELECT_ELEMENT); @@ -151,30 +167,27 @@ export class Engine { } private _handleClick(point: TypePoint): void { - const { - element, getDataFeekback, coreEvent, drawFeekback - } = this._opts; + const { element, getDataFeekback, coreEvent, drawFeekback } = this._opts; const data = getDataFeekback(); const [index, uuid] = element.isPointInElement(point, data); if (index >= 0 && uuid) { - coreEvent.trigger( - 'screenClickElement', - { index, uuid, element: deepClone(data.elements?.[index])} - ); + coreEvent.trigger('screenClickElement', { + index, + uuid, + element: deepClone(data.elements?.[index]) + }); } drawFeekback(); } private _handleMoveStart(point: TypePoint): void { - const { - element, getDataFeekback, coreEvent - } = this._opts; + const { element, getDataFeekback, coreEvent } = this._opts; const data = getDataFeekback(); const helper = this.helper; this.temp.set('prevPoint', point); const uuid = this.temp.get('selectedUUID'); - + if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) { // TODO } else if (this.temp.get('mode') === Mode.SELECT_ELEMENT) { @@ -185,7 +198,7 @@ export class Engine { x: point.x, y: point.y }); - } + } } else if (this.temp.get('mode') === Mode.SELECT_AREA) { helper.startSelectArea(point); } @@ -195,68 +208,104 @@ export class Engine { const { drawFeekback } = this._opts; const helper = this.helper; if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) { - this._dragElements(this.temp.get('selectedUUIDList'), point, this.temp.get('prevPoint')); + this._dragElements( + this.temp.get('selectedUUIDList'), + point, + this.temp.get('prevPoint') + ); drawFeekback(); this.temp.set('cursorStatus', CursorStatus.DRAGGING); } else if (typeof this.temp.get('selectedUUID') === 'string') { if (this.temp.get('mode') === Mode.SELECT_ELEMENT) { - this._dragElements([this.temp.get('selectedUUID') as string], point, this.temp.get('prevPoint')); + this._dragElements( + [this.temp.get('selectedUUID') as string], + point, + this.temp.get('prevPoint') + ); drawFeekback(); this.temp.set('cursorStatus', CursorStatus.DRAGGING); - } else if (this.temp.get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && this.temp.get('selectedControllerDirection')) { + } else if ( + this.temp.get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && + this.temp.get('selectedControllerDirection') + ) { this._transfromElement( this.temp.get('selectedUUID') as string, point, this.temp.get('prevPoint'), - this.temp.get('selectedControllerDirection') as TypeHelperWrapperControllerDirection + this.temp.get( + 'selectedControllerDirection' + ) as TypeHelperWrapperControllerDirection ); - this.temp.set('cursorStatus', CursorStatus.DRAGGING) + this.temp.set('cursorStatus', CursorStatus.DRAGGING); } } else if (this.temp.get('mode') === Mode.SELECT_AREA) { helper.changeSelectArea(point); drawFeekback(); } - this.temp.set('prevPoint', point) + this.temp.set('prevPoint', point); } - private _dragElements(uuids: string[], point: TypePoint, prevPoint: TypePoint|null): void { + private _dragElements( + uuids: string[], + point: TypePoint, + prevPoint: TypePoint | null + ): void { if (!prevPoint) { return; } - const { - board, element, getDataFeekback, drawFeekback - } = this._opts; + const { board, element, getDataFeekback, drawFeekback } = this._opts; const data = getDataFeekback(); const helper = this.helper; uuids.forEach((uuid) => { const idx = helper.getElementIndexByUUID(uuid); if (idx === null) return; const elem = data.elements[idx]; - if (elem?.operation?.lock !== true && elem?.operation?.invisible !== true) { - element.dragElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale); + if ( + elem?.operation?.lock !== true && + elem?.operation?.invisible !== true + ) { + element.dragElement( + data, + uuid, + point, + prevPoint, + board.getContext().getTransform().scale + ); } }); drawFeekback(); } private _transfromElement( - uuid: string, point: TypePoint, prevPoint: TypePoint|null, direction: TypeHelperWrapperControllerDirection - ): null | { width: number, height: number, angle: number, } { + uuid: string, + point: TypePoint, + prevPoint: TypePoint | null, + direction: TypeHelperWrapperControllerDirection + ): null | { width: number; height: number; angle: number } { if (!prevPoint) { return null; } - const { - board, element, getDataFeekback, drawFeekback - } = this._opts; + const { board, element, getDataFeekback, drawFeekback } = this._opts; const data = getDataFeekback(); - const result = element.transformElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale, direction); + const result = element.transformElement( + data, + uuid, + point, + prevPoint, + board.getContext().getTransform().scale, + direction + ); drawFeekback(); return result; } private _handleMoveEnd(point: TypePoint): void { const { - element, getDataFeekback, coreEvent, drawFeekback, emitChangeData + element, + getDataFeekback, + coreEvent, + drawFeekback, + emitChangeData } = this._opts; const data = getDataFeekback(); const helper = this.helper; @@ -296,7 +345,7 @@ export class Engine { helper.clearSelectedArea(); drawFeekback(); } - + if (this.temp.get('mode') !== Mode.SELECT_ELEMENT) { this.temp.set('selectedUUID', null); } @@ -306,11 +355,11 @@ export class Engine { private _handleHover(point: TypePoint): void { let isMouseOverElement: boolean = false; - const { board, getDataFeekback, coreEvent, } = this._opts; + const { board, getDataFeekback, coreEvent } = this._opts; const data = getDataFeekback(); const helper = this.helper; const mapper = this._mapper; - + if (this.temp.get('mode') === Mode.SELECT_AREA) { board.resetCursor(); } else if (this.temp.get('cursorStatus') === CursorStatus.NULL) { @@ -320,12 +369,17 @@ export class Engine { const index: number | null = helper.getElementIndexByUUID(elementUUID); if (index !== null && index >= 0) { const elem = data.elements[index]; - if (elem?.operation?.lock === true || elem?.operation?.invisible === true) { + if ( + elem?.operation?.lock === true || + elem?.operation?.invisible === true + ) { board.resetCursor(); return; } if (this.temp.get('hoverUUID') !== elem.uuid) { - const preIndex = helper.getElementIndexByUUID(this.temp.get('hoverUUID') || ''); + const preIndex = helper.getElementIndexByUUID( + this.temp.get('hoverUUID') || '' + ); if (preIndex !== null && data.elements[preIndex]) { coreEvent.trigger('mouseLeaveElement', { uuid: this.temp.get('hoverUUID'), @@ -335,7 +389,11 @@ export class Engine { } } if (elem) { - coreEvent.trigger('mouseOverElement', { uuid: elem.uuid, index, element: elem, }); + coreEvent.trigger('mouseOverElement', { + uuid: elem.uuid, + index, + element: elem + }); this.temp.set('hoverUUID', elem.uuid); isMouseOverElement = true; } @@ -345,10 +403,16 @@ export class Engine { if (isMouseOverElement !== true && this.temp.get('hoverUUID') !== null) { const uuid = this.temp.get('hoverUUID'); const index: number | null = helper.getElementIndexByUUID(uuid || ''); - if (index !== null) coreEvent.trigger('mouseLeaveElement', { uuid, index, element: data.elements[index] }) - this.temp.set('hoverUUID', null); + if (index !== null) + coreEvent.trigger('mouseLeaveElement', { + uuid, + index, + element: data.elements[index] + }); + this.temp.set('hoverUUID', null); } - if (coreEvent.has('mouseOverScreen')) coreEvent.trigger('mouseOverScreen', point); + if (coreEvent.has('mouseOverScreen')) + coreEvent.trigger('mouseOverScreen', point); } private _handleLeave(): void { @@ -357,8 +421,4 @@ export class Engine { coreEvent.trigger('mouseLeaveScreen', undefined); } } - -} - - - +} diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 1d4cb89..19bcace 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -1,10 +1,17 @@ import { - TypeData, TypeHelper, TypeHelperConfig, TypeHelperUpdateOpts, - TypeHelperWrapperControllerDirection, TypeElement, - TypeElemDesc, TypeContext, TypePoint, TypeConfigStrict, + TypeData, + TypeHelper, + TypeHelperConfig, + TypeHelperUpdateOpts, + TypeHelperWrapperControllerDirection, + TypeElement, + TypeElemDesc, + TypeContext, + TypePoint, + TypeConfigStrict, TypeHeplerSelectedElementWrapper } from '@idraw/types'; -import { Board } from '@idraw/board'; +import Board from '@idraw/board'; import { deepClone } from '@idraw/util'; import { parseAngleToRadian, calcElementCenter } from './calculate'; import { rotateContext, rotateElement } from './transform'; @@ -12,9 +19,7 @@ import { LIMIT_QBLIQUE_ANGLE } from './../constant/element'; const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE; - export class Helper implements TypeHelper { - private _helperConfig: TypeHelperConfig; private _coreConfig: TypeConfigStrict; private _ctx: TypeContext; @@ -31,10 +36,7 @@ export class Helper implements TypeHelper { }; } - updateConfig ( - data: TypeData, - opts: TypeHelperUpdateOpts - ): void { + updateConfig(data: TypeData, opts: TypeHelperUpdateOpts): void { this._updateElementIndex(data); this._updateSelectedElementWrapper(data, opts); this._updateSelectedElementListWrapper(data, opts); @@ -52,20 +54,29 @@ export class Helper implements TypeHelper { return null; } - isPointInElementWrapperController(p: TypePoint, data?: TypeData): - { - uuid: string | null | undefined, - selectedControllerDirection: TypeHelperWrapperControllerDirection | null, - hoverControllerDirection: TypeHelperWrapperControllerDirection | null, - directIndex: number | null, + isPointInElementWrapperController( + p: TypePoint, + data?: TypeData + ): { + uuid: string | null | undefined; + selectedControllerDirection: TypeHelperWrapperControllerDirection | null; + hoverControllerDirection: TypeHelperWrapperControllerDirection | null; + directIndex: number | null; } { const ctx = this._ctx; const uuid = this._helperConfig?.selectedElementWrapper?.uuid || null; let directIndex = null; - let selectedControllerDirection: TypeHelperWrapperControllerDirection | null = null; - let hoverControllerDirection: TypeHelperWrapperControllerDirection | null = null; + let selectedControllerDirection: TypeHelperWrapperControllerDirection | null = + null; + let hoverControllerDirection: TypeHelperWrapperControllerDirection | null = + null; if (!this._helperConfig.selectedElementWrapper) { - return {uuid, selectedControllerDirection, directIndex, hoverControllerDirection}; + return { + uuid, + selectedControllerDirection, + directIndex, + hoverControllerDirection + }; } const wrapper = this._helperConfig.selectedElementWrapper; const controllers = [ @@ -76,17 +87,17 @@ export class Helper implements TypeHelper { wrapper.controllers.left, wrapper.controllers.bottomLeft, wrapper.controllers.bottom, - wrapper.controllers.bottomRight, + wrapper.controllers.bottomRight ]; let directionNames: TypeHelperWrapperControllerDirection[] = [ 'right', 'top-right', 'top', 'top-left', - 'left', + 'left', 'bottom-left', 'bottom', - 'bottom-right', + 'bottom-right' ]; let hoverDirectionNames = deepClone(directionNames); @@ -100,35 +111,43 @@ export class Helper implements TypeHelper { angle += 360; } if (angle < 45) { - angleMoveNum = 0 + angleMoveNum = 0; } else if (angle < 90) { - angleMoveNum = 1 + angleMoveNum = 1; } else if (angle < 135) { - angleMoveNum = 2 + angleMoveNum = 2; } else if (angle < 180) { - angleMoveNum = 3 + angleMoveNum = 3; } else if (angle < 225) { - angleMoveNum = 4 + angleMoveNum = 4; } else if (angle < 270) { - angleMoveNum = 5 + angleMoveNum = 5; } else if (angle < 315) { - angleMoveNum = 6 + angleMoveNum = 6; } } } if (angleMoveNum > 0) { - hoverDirectionNames = hoverDirectionNames.slice(-angleMoveNum).concat(hoverDirectionNames.slice(0, -angleMoveNum)) + hoverDirectionNames = hoverDirectionNames + .slice(-angleMoveNum) + .concat(hoverDirectionNames.slice(0, -angleMoveNum)); } rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { - for (let i = 0; i < controllers.length; i ++) { + for (let i = 0; i < controllers.length; i++) { const controller = controllers[i]; if (controller.invisible === true) { continue; } ctx.beginPath(); - ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2); + ctx.arc( + controller.x, + controller.y, + wrapper.controllerSize, + 0, + Math.PI * 2 + ); ctx.closePath(); if (ctx.isPointInPath(p.x, p.y)) { selectedControllerDirection = directionNames[i]; @@ -146,17 +165,28 @@ export class Helper implements TypeHelper { if (controller.invisible !== true) { rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { ctx.beginPath(); - ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2); + ctx.arc( + controller.x, + controller.y, + wrapper.controllerSize, + 0, + Math.PI * 2 + ); ctx.closePath(); if (ctx.isPointInPath(p.x, p.y)) { selectedControllerDirection = 'rotate'; - hoverControllerDirection = 'rotate'; + hoverControllerDirection = 'rotate'; } }); } } - - return {uuid, selectedControllerDirection, hoverControllerDirection, directIndex}; + + return { + uuid, + selectedControllerDirection, + hoverControllerDirection, + directIndex + }; } isPointInElementList(p: TypePoint, data: TypeData): boolean { @@ -211,8 +241,8 @@ export class Helper implements TypeHelper { } clearSelectedArea() { - this._areaStart = {x: 0, y: 0}; - this._areaEnd = {x: 0, y: 0}; + this._areaStart = { x: 0, y: 0 }; + this._areaEnd = { x: 0, y: 0 }; this._calcSelectedArea(); } @@ -256,19 +286,18 @@ export class Helper implements TypeHelper { const { scale = 1, scrollX = 0, scrollY = 0 } = transform; const elemWrapper = this._coreConfig.elementWrapper; const lineWidth = elemWrapper.lineWidth / scale; - const lineDash = elemWrapper.lineDash.map(n => (n / scale)); + const lineDash = elemWrapper.lineDash.map((n) => n / scale); - this._helperConfig.selectedAreaWrapper = { x: (Math.min(start.x, end.x) - scrollX) / scale, y: (Math.min(start.y, end.y) - scrollY) / scale, w: Math.abs(end.x - start.x) / scale, h: Math.abs(end.y - start.y) / scale, - startPoint: {x: start.x, y: start.y}, - endPoint: {x: end.x, y: end.y}, + startPoint: { x: start.x, y: start.y }, + endPoint: { x: end.x, y: end.y }, lineWidth: lineWidth, lineDash: lineDash, - color: elemWrapper.color, + color: elemWrapper.color }; } @@ -279,9 +308,17 @@ export class Helper implements TypeHelper { }); } - private _updateSelectedElementWrapper(data: TypeData, opts: TypeHelperUpdateOpts) { + private _updateSelectedElementWrapper( + data: TypeData, + opts: TypeHelperUpdateOpts + ) { const { selectedUUID: uuid } = opts; - if (!(typeof uuid === 'string' && this._helperConfig.elementIndexMap[uuid] >= 0)) { + if ( + !( + typeof uuid === 'string' && + this._helperConfig.elementIndexMap[uuid] >= 0 + ) + ) { delete this._helperConfig.selectedElementWrapper; return; } @@ -294,7 +331,10 @@ export class Helper implements TypeHelper { this._helperConfig.selectedElementWrapper = wrapper; } - private _updateSelectedElementListWrapper(data: TypeData, opts: TypeHelperUpdateOpts) { + private _updateSelectedElementListWrapper( + data: TypeData, + opts: TypeHelperUpdateOpts + ) { const { selectedUUIDList } = opts; const wrapperList: TypeHeplerSelectedElementWrapper[] = []; data.elements.forEach((elem, i) => { @@ -314,19 +354,22 @@ export class Helper implements TypeHelper { const elemWrapper = this._coreConfig.elementWrapper; const controllerSize = elemWrapper.controllerSize / scale; const lineWidth = elemWrapper.lineWidth / scale; - const lineDash = elemWrapper.lineDash.map(n => (n / scale)); + const lineDash = elemWrapper.lineDash.map((n) => n / scale); const rotateLimit = 12; // @ts-ignore - const bw = elem.desc?.borderWidth || 0; + const bw = elem.desc?.borderWidth || 0; let hideObliqueDirection = false; - if (typeof elem.angle === 'number' && Math.abs(elem.angle) > limitQbliqueAngle) { + if ( + typeof elem.angle === 'number' && + Math.abs(elem.angle) > limitQbliqueAngle + ) { hideObliqueDirection = true; } // TODO // const controllerOffset = controllerSize; const controllerOffset = lineWidth; - + const wrapper: TypeHeplerSelectedElementWrapper = { uuid: elem.uuid, controllerSize: controllerSize, @@ -336,17 +379,19 @@ export class Helper implements TypeHelper { topLeft: { x: elem.x - controllerOffset - bw, y: elem.y - controllerOffset - bw, - invisible: hideObliqueDirection || elem?.operation?.disableScale === true, + invisible: + hideObliqueDirection || elem?.operation?.disableScale === true }, top: { x: elem.x + elem.w / 2, y: elem.y - controllerOffset - bw, - invisible: elem?.operation?.disableScale === true, + invisible: elem?.operation?.disableScale === true }, topRight: { x: elem.x + elem.w + controllerOffset + bw, y: elem.y - controllerOffset - bw, - invisible: hideObliqueDirection || elem?.operation?.disableScale === true, + invisible: + hideObliqueDirection || elem?.operation?.disableScale === true }, right: { x: elem.x + elem.w + controllerOffset + bw, @@ -356,17 +401,19 @@ export class Helper implements TypeHelper { bottomRight: { x: elem.x + elem.w + controllerOffset + bw, y: elem.y + elem.h + controllerOffset + bw, - invisible: hideObliqueDirection || elem?.operation?.disableScale === true, + invisible: + hideObliqueDirection || elem?.operation?.disableScale === true }, bottom: { x: elem.x + elem.w / 2, y: elem.y + elem.h + controllerOffset + bw, - invisible: elem?.operation?.disableScale === true, + invisible: elem?.operation?.disableScale === true }, bottomLeft: { x: elem.x - controllerOffset - bw, y: elem.y + elem.h + controllerOffset + bw, - invisible: hideObliqueDirection || elem?.operation?.disableScale === true, + invisible: + hideObliqueDirection || elem?.operation?.disableScale === true }, left: { x: elem.x - controllerOffset - bw, @@ -381,7 +428,10 @@ export class Helper implements TypeHelper { }, lineWidth: lineWidth, lineDash: lineDash, - color: elem?.operation?.lock === true ? elemWrapper.lockColor : elemWrapper.color, + color: + elem?.operation?.lock === true + ? elemWrapper.lockColor + : elemWrapper.color }; if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) { @@ -391,5 +441,4 @@ export class Helper implements TypeHelper { return wrapper; } - -} \ No newline at end of file +} diff --git a/packages/core/src/lib/mapper.ts b/packages/core/src/lib/mapper.ts index e725108..48fd54e 100644 --- a/packages/core/src/lib/mapper.ts +++ b/packages/core/src/lib/mapper.ts @@ -1,5 +1,5 @@ import { TypeData, TypePoint, TypePointCursor } from '@idraw/types'; -import { Board } from '@idraw/board'; +import Board from '@idraw/board'; import { Helper } from './helper'; import { Element } from './element'; @@ -11,11 +11,10 @@ const _opts = Symbol('_opts'); type Options = { board: Board; element: Element; - helper: Helper -} + helper: Helper; +}; export class Mapper { - private [_opts]: Options; private [_board]: Board; private [_helper]: Helper; @@ -31,60 +30,68 @@ export class Mapper { isEffectivePoint(p: TypePoint): boolean { const scrollLineWidth = this[_board].getScrollLineWidth(); const screenInfo = this[_board].getScreenInfo(); - if (p.x <= (screenInfo.width - scrollLineWidth) && p.y <= (screenInfo.height - scrollLineWidth)) { + if ( + p.x <= screenInfo.width - scrollLineWidth && + p.y <= screenInfo.height - scrollLineWidth + ) { return true; } return false; } - judgePointCursor(p: TypePoint, data: TypeData): { - cursor: TypePointCursor, - elementUUID: string | null, + judgePointCursor( + p: TypePoint, + data: TypeData + ): { + cursor: TypePointCursor; + elementUUID: string | null; } { let cursor: TypePointCursor = 'auto'; let elementUUID: string | null = null; if (!this.isEffectivePoint(p)) { - return { cursor, elementUUID}; + return { cursor, elementUUID }; } - const { uuid, hoverControllerDirection } = this[_helper].isPointInElementWrapperController(p, data); + const { uuid, hoverControllerDirection } = this[ + _helper + ].isPointInElementWrapperController(p, data); const direction = hoverControllerDirection; if (uuid && direction) { switch (direction) { - case 'top-right' : { + case 'top-right': { cursor = 'ne-resize'; break; } - case 'top-left' : { + case 'top-left': { cursor = 'nw-resize'; break; } - case 'top' : { + case 'top': { cursor = 'n-resize'; break; } - - case 'right' : { + + case 'right': { cursor = 'e-resize'; break; } - case 'bottom-right' : { + case 'bottom-right': { cursor = 'se-resize'; break; } - case 'bottom' : { + case 'bottom': { cursor = 's-resize'; break; } - case 'bottom-left' : { + case 'bottom-left': { cursor = 'sw-resize'; break; } - case 'left' : { + case 'left': { cursor = 'w-resize'; break; } - case 'rotate' : { + case 'rotate': { cursor = 'grab'; break; } @@ -106,8 +113,7 @@ export class Mapper { } return { cursor, - elementUUID, + elementUUID }; } - } diff --git a/packages/core/src/mixins/element.ts b/packages/core/src/mixins/element.ts index 33e995d..1b497bc 100644 --- a/packages/core/src/mixins/element.ts +++ b/packages/core/src/mixins/element.ts @@ -1,18 +1,26 @@ -import { - TypeElement, TypeElemDesc, TypeElementBase, -} from '@idraw/types'; +import { TypeElement, TypeElemDesc, TypeElementBase } from '@idraw/types'; import { deepClone, createUUID } from '@idraw/util'; import { - _board, _data, _opts, _config, _renderer, _element, _engine, - _tempData, _draw, _coreEvent, _emitChangeScreen, _emitChangeData, + _board, + _data, + _opts, + _config, + _renderer, + _element, + _engine, + _tempData, + _draw, + _coreEvent, + _emitChangeScreen, + _emitChangeData } from './../names'; import { diffElementResourceChange } from './../lib/diff'; -import { Core } from './../index'; +import Core from './../index'; import { Mode } from './../constant/static'; - - -export function getSelectedElements(core: Core): TypeElement[] { +export function getSelectedElements( + core: Core +): TypeElement[] { const elems: TypeElement[] = []; let list: string[] = []; const uuid = core[_engine].temp.get('selectedUUID'); @@ -31,8 +39,11 @@ export function getSelectedElements(core: Core): TypeElement return deepClone(elems); } -export function getElement(core: Core, uuid: string): TypeElement|null { - let elem: TypeElement|null = null; +export function getElement( + core: Core, + uuid: string +): TypeElement | null { + let elem: TypeElement | null = null; const index = core[_engine].helper.getElementIndexByUUID(uuid); if (index !== null && core[_data].elements[index]) { elem = deepClone(core[_data].elements[index]); @@ -40,16 +51,22 @@ export function getElement(core: Core, uuid: string): TypeElement|null { - let elem: TypeElement|null = null; - if (index >=0 && core[_data].elements[index]) { +export function getElementByIndex( + core: Core, + index: number +): TypeElement | null { + let elem: TypeElement | null = null; + if (index >= 0 && core[_data].elements[index]) { elem = deepClone(core[_data].elements[index]); } return elem; } -export function updateElement(core: Core, elem: TypeElement) { - const _elem = deepClone(elem) as TypeElement; +export function updateElement( + core: Core, + elem: TypeElement +) { + const _elem = deepClone(elem) as TypeElement; const data = core[_data]; const resourceChangeUUIDs: string[] = []; for (let i = 0; i < data.elements.length; i++) { @@ -66,7 +83,11 @@ export function updateElement(core: Core, elem: TypeElement) core[_draw]({ resourceChangeUUIDs }); } -export function selectElementByIndex(core: Core, index: number, opts?: { useMode?: boolean }): void { +export function selectElementByIndex( + core: Core, + index: number, + opts?: { useMode?: boolean } +): void { if (core[_data].elements[index]) { const uuid = core[_data].elements[index].uuid; if (opts?.useMode === true) { @@ -82,8 +103,11 @@ export function selectElementByIndex(core: Core, index: number, opts?: { useMode } } - -export function selectElement(core: Core, uuid: string, opts?: { useMode?: boolean }): void { +export function selectElement( + core: Core, + uuid: string, + opts?: { useMode?: boolean } +): void { const index = core[_engine].helper.getElementIndexByUUID(uuid); if (typeof index === 'number' && index >= 0) { core.selectElementByIndex(index, opts); @@ -92,7 +116,11 @@ export function selectElement(core: Core, uuid: string, opts?: { useMode?: boole export function moveUpElement(core: Core, uuid: string): void { const index = core[_engine].helper.getElementIndexByUUID(uuid); - if (typeof index === 'number' && index >= 0 && index < core[_data].elements.length - 1) { + if ( + typeof index === 'number' && + index >= 0 && + index < core[_data].elements.length - 1 + ) { const temp = core[_data].elements[index]; core[_data].elements[index] = core[_data].elements[index + 1]; core[_data].elements[index + 1] = temp; @@ -103,7 +131,11 @@ export function moveUpElement(core: Core, uuid: string): void { export function moveDownElement(core: Core, uuid: string): void { const index = core[_engine].helper.getElementIndexByUUID(uuid); - if (typeof index === 'number' && index > 0 && index < core[_data].elements.length) { + if ( + typeof index === 'number' && + index > 0 && + index < core[_data].elements.length + ) { const temp = core[_data].elements[index]; core[_data].elements[index] = core[_data].elements[index - 1]; core[_data].elements[index - 1] = temp; @@ -112,8 +144,10 @@ export function moveDownElement(core: Core, uuid: string): void { core[_draw](); } - -export function addElement(core: Core, elem: TypeElementBase): string | null { +export function addElement( + core: Core, + elem: TypeElementBase +): string | null { const _elem = deepClone(elem); _elem.uuid = createUUID(); core[_data].elements.push(_elem); @@ -131,7 +165,11 @@ export function deleteElement(core: Core, uuid: string) { } } -export function insertElementBefore(core: Core, elem: TypeElementBase, beforeUUID: string) { +export function insertElementBefore( + core: Core, + elem: TypeElementBase, + beforeUUID: string +) { const index = core[_engine].helper.getElementIndexByUUID(beforeUUID); if (index !== null) { return core.insertElementBeforeIndex(elem, index); @@ -139,8 +177,11 @@ export function insertElementBefore(core: Core, elem: TypeElementBase, index: number) { +export function insertElementBeforeIndex( + core: Core, + elem: TypeElementBase, + index: number +) { const _elem = deepClone(elem); _elem.uuid = createUUID(); if (index >= 0) { @@ -152,8 +193,11 @@ export function insertElementBeforeIndex(core: Core, elem: TypeElementBase, beforeUUID: string) { +export function insertElementAfter( + core: Core, + elem: TypeElementBase, + beforeUUID: string +) { const index = core[_engine].helper.getElementIndexByUUID(beforeUUID); if (index !== null) { return core.insertElementAfterIndex(elem, index); @@ -161,7 +205,11 @@ export function insertElementAfter(core: Core, elem: TypeElementBase, index: number) { +export function insertElementAfterIndex( + core: Core, + elem: TypeElementBase, + index: number +) { const _elem = deepClone(elem); _elem.uuid = createUUID(); if (index >= 0) { @@ -171,4 +219,4 @@ export function insertElementAfterIndex(core: Core, elem: TypeElementBase
- + \ No newline at end of file diff --git a/packages/idraw/dev/main.js b/packages/idraw/dev/main.js deleted file mode 100644 index 4acb72f..0000000 --- a/packages/idraw/dev/main.js +++ /dev/null @@ -1,45 +0,0 @@ -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); - - - -const btn = document.querySelector('#btn'); -btn.addEventListener('click', () => { - idraw.exportDataURL({type: "image/png"}).then((dataURL) => { - const preview = document.querySelector('#preview'); - preview.innerHTML = ``; - }).catch((err) => { - console.log(err); - }); -}); - diff --git a/packages/idraw/dev/main.ts b/packages/idraw/dev/main.ts new file mode 100644 index 0000000..36a0962 --- /dev/null +++ b/packages/idraw/dev/main.ts @@ -0,0 +1,45 @@ +import iDraw from '../src/index'; +import { getData } from './data'; + +var opts = { + width: 600, + height: 400, + contextWidth: 600, + contextHeight: 400, + devicePixelRatio: 4 +}; + +// var config = { +// elementWrapper: { +// controllerSize: 4, +// } +// } + +const mount = document.querySelector('#mount') as HTMLDivElement; +const data = getData(); +const idraw = new iDraw( + mount, + Object.assign({}, opts, { + contextWidth: 500, + contextHeight: 400 + }), + { + scrollWrapper: { + use: true + } + } +); +idraw.setData(data); + +const btn = document.querySelector('#btn') as HTMLButtonElement; +btn.addEventListener('click', () => { + idraw + .exportDataURL({ type: 'image/png' }) + .then((dataURL) => { + const preview = document.querySelector('#preview'); + preview.innerHTML = ``; + }) + .catch((err) => { + console.log(err); + }); +}); diff --git a/packages/renderer/src/constant/element.ts b/packages/renderer/src/constant/element.ts new file mode 100644 index 0000000..b2bbcdb --- /dev/null +++ b/packages/renderer/src/constant/element.ts @@ -0,0 +1,15 @@ + +const elementTypes = { + 'text': {}, // TODO + 'rect': {}, // TODO + 'image': {}, // TODO + 'svg': {}, // TODO + 'circle': {}, // TODO + 'html': {}, // TODO +}; + +export const elementNames = Object.keys(elementTypes); + + +// limitQbliqueAngle +export const LIMIT_QBLIQUE_ANGLE = 15; \ No newline at end of file diff --git a/packages/renderer/src/constant/static.ts b/packages/renderer/src/constant/static.ts new file mode 100644 index 0000000..80815e8 --- /dev/null +++ b/packages/renderer/src/constant/static.ts @@ -0,0 +1,12 @@ +export enum Mode { + NULL = 'null', + SELECT_ELEMENT = 'select-element', + SELECT_ELEMENT_LIST = 'select-element-list', + SELECT_ELEMENT_WRAPPER_CONTROLLER = 'select-element-wrapper-controller', + SELECT_AREA = 'select-area', +} + +export enum CursorStatus { + DRAGGING = 'dragging', + NULL = 'null', +} diff --git a/packages/renderer/src/lib/parse.ts b/packages/renderer/src/lib/parse.ts index 73619c1..57dbcdb 100644 --- a/packages/renderer/src/lib/parse.ts +++ b/packages/renderer/src/lib/parse.ts @@ -3,7 +3,7 @@ import { elementNames } from './../constant/element'; export function parseData(data: any): TypeData { const result: TypeData = { - elements: [], + elements: [] }; if (Array.isArray(data?.elements)) { data?.elements.forEach((elem: any = {}) => { @@ -13,24 +13,28 @@ export function parseData(data: any): TypeData { }); } if (typeof data.bgColor === 'string') { - result.bgColor = data.bgColor; + result.bgColor = data.bgColor; } return result; } -function isElement( - elem: TypeElement -): boolean{ - if (!(isNumber(elem.x) && isNumber(elem.y) && isNumber(elem.w) && isNumber(elem.h))) { +function isElement(elem: TypeElement): boolean { + if ( + !( + isNumber(elem.x) && + isNumber(elem.y) && + isNumber(elem.w) && + isNumber(elem.h) + ) + ) { return false; } if (!(typeof elem.type === 'string' && elementNames.includes(elem.type))) { return false; } return true; -} - +} function isNumber(num: any) { - return (num >= 0 || num < 0); -} \ No newline at end of file + return num >= 0 || num < 0; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1a83456..b3c7b56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,8 +7,11 @@ importers: '@babel/core': ^7.20.7 '@babel/preset-env': ^7.20.2 '@babel/preset-typescript': ^7.18.6 + '@types/glob': ^8.0.1 '@types/jest': ^29.2.5 + '@types/koa-compose': ^3.2.5 '@types/node': ^18.11.18 + '@types/serve-handler': ^6.1.1 '@typescript-eslint/eslint-plugin': ^5.47.1 '@typescript-eslint/parser': ^5.47.1 babel-jest: ^29.3.1 @@ -41,8 +44,11 @@ importers: '@babel/core': 7.20.7 '@babel/preset-env': 7.20.2_@babel+core@7.20.7 '@babel/preset-typescript': 7.18.6_@babel+core@7.20.7 + '@types/glob': 8.0.1 '@types/jest': 29.2.5 + '@types/koa-compose': 3.2.5 '@types/node': 18.11.18 + '@types/serve-handler': 6.1.1 '@typescript-eslint/eslint-plugin': 5.47.1_axni7f4fgvh6tlufnh6hwgsifq '@typescript-eslint/parser': 5.47.1_iukboom6ndih5an6iafl45j2fe babel-jest: 29.3.1_@babel+core@7.20.7 @@ -3371,6 +3377,12 @@ packages: resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==} dev: true + /@types/accepts/1.3.5: + resolution: {integrity: sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==} + dependencies: + '@types/node': 18.11.18 + dev: true + /@types/babel__core/7.1.20: resolution: {integrity: sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ==} dependencies: @@ -3400,12 +3412,70 @@ packages: '@babel/types': 7.20.7 dev: true + /@types/body-parser/1.19.2: + resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==} + dependencies: + '@types/connect': 3.4.35 + '@types/node': 18.11.18 + dev: true + + /@types/connect/3.4.35: + resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} + dependencies: + '@types/node': 18.11.18 + dev: true + + /@types/content-disposition/0.5.5: + resolution: {integrity: sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==} + dev: true + + /@types/cookies/0.7.7: + resolution: {integrity: sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA==} + dependencies: + '@types/connect': 3.4.35 + '@types/express': 4.17.17 + '@types/keygrip': 1.0.2 + '@types/node': 18.11.18 + dev: true + + /@types/express-serve-static-core/4.17.33: + resolution: {integrity: sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==} + dependencies: + '@types/node': 18.11.18 + '@types/qs': 6.9.7 + '@types/range-parser': 1.2.4 + dev: true + + /@types/express/4.17.17: + resolution: {integrity: sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==} + dependencies: + '@types/body-parser': 1.19.2 + '@types/express-serve-static-core': 4.17.33 + '@types/qs': 6.9.7 + '@types/serve-static': 1.15.0 + dev: true + + /@types/glob/8.0.1: + resolution: {integrity: sha512-8bVUjXZvJacUFkJXHdyZ9iH1Eaj5V7I8c4NdH5sQJsdXkqT4CA5Dhb4yb4VE/3asyx4L9ayZr1NIhTsWHczmMw==} + dependencies: + '@types/minimatch': 5.1.2 + '@types/node': 18.11.18 + dev: true + /@types/graceful-fs/4.1.5: resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==} dependencies: '@types/node': 18.11.18 dev: true + /@types/http-assert/1.5.3: + resolution: {integrity: sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==} + dev: true + + /@types/http-errors/2.0.1: + resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==} + dev: true + /@types/istanbul-lib-coverage/2.0.4: resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==} dev: true @@ -3437,10 +3507,41 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/keygrip/1.0.2: + resolution: {integrity: sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==} + dev: true + + /@types/koa-compose/3.2.5: + resolution: {integrity: sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==} + dependencies: + '@types/koa': 2.13.5 + dev: true + + /@types/koa/2.13.5: + resolution: {integrity: sha512-HSUOdzKz3by4fnqagwthW/1w/yJspTgppyyalPVbgZf8jQWvdIXcVW5h2DGtw4zYntOaeRGx49r1hxoPWrD4aA==} + dependencies: + '@types/accepts': 1.3.5 + '@types/content-disposition': 0.5.5 + '@types/cookies': 0.7.7 + '@types/http-assert': 1.5.3 + '@types/http-errors': 2.0.1 + '@types/keygrip': 1.0.2 + '@types/koa-compose': 3.2.5 + '@types/node': 18.11.18 + dev: true + + /@types/mime/3.0.1: + resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==} + dev: true + /@types/minimatch/3.0.5: resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} dev: true + /@types/minimatch/5.1.2: + resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} + dev: true + /@types/minimist/1.2.2: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true @@ -3465,10 +3566,31 @@ packages: resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==} dev: true + /@types/qs/6.9.7: + resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==} + dev: true + + /@types/range-parser/1.2.4: + resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==} + dev: true + /@types/semver/7.3.13: resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==} dev: true + /@types/serve-handler/6.1.1: + resolution: {integrity: sha512-bIwSmD+OV8w0t2e7EWsuQYlGoS1o5aEdVktgkXaa43Zm0qVWi21xaSRb3DQA1UXD+DJ5bRq1Rgu14ZczB+CjIQ==} + dependencies: + '@types/node': 18.11.18 + dev: true + + /@types/serve-static/1.15.0: + resolution: {integrity: sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==} + dependencies: + '@types/mime': 3.0.1 + '@types/node': 18.11.18 + dev: true + /@types/stack-utils/2.0.1: resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==} dev: true diff --git a/scripts/build-module.ts b/scripts/build-module.ts index 3ed0adb..11faae6 100644 --- a/scripts/build-module.ts +++ b/scripts/build-module.ts @@ -1,9 +1,10 @@ import ts from 'typescript'; import path from 'path'; -import fs from 'fs-extra'; import glob from 'glob'; import { packages } from './config'; import { joinPackagePath, getTsConfig } from './util/project'; +import { removeFullDir } from './util/file'; +import type { CompilerOptions } from 'typescript'; build(); @@ -14,13 +15,13 @@ async function build() { const pkgDir = path.resolve(`packages/${dirName}`); console.log(`Start to build ESM for ${dirName}`); console.log(`Remove packages/${dirName}/dist/`); - await fs.remove(`${pkgDir}/dist`); + removeFullDir(`${pkgDir}/dist`); buildPackage(dirName); console.log(`Build ESM of ${dirName} successfully!`); } } -function buildPackage(dirName) { +function buildPackage(dirName: string) { const pattern = '**/*.ts'; const cwd = joinPackagePath(dirName, 'src'); const files = glob.sync(pattern, { cwd }); @@ -31,14 +32,37 @@ function buildPackage(dirName) { // build ts -> esm { - const tsConfig = getTsConfig(); - const compilerOptions = tsConfig.compilerOptions; - compilerOptions.target = ts.ScriptTarget.ES2015; - compilerOptions.moduleResolution = ts.ModuleResolutionKind.NodeJs; - compilerOptions.declaration = true; - compilerOptions.outDir = joinPackagePath(dirName, 'dist', 'esm'); - compilerOptions.rootDir = joinPackagePath(dirName, 'src'); + // const tsConfig = getTsConfig(); + // const compilerOptions = tsConfig.compilerOptions; + const compilerOptions: CompilerOptions = { + noUnusedLocals: true, + + declaration: true, + sourceMap: false, + target: ts.ScriptTarget.ES2015, + moduleResolution: ts.ModuleResolutionKind.NodeJs, + allowJs: false, + strict: true, + experimentalDecorators: true, + resolveJsonModule: true, + esModuleInterop: true, + removeComments: true, + // lib: ['ES2016', 'dom'], + outDir: joinPackagePath(dirName, 'dist', 'esm'), + rootDir: joinPackagePath(dirName, 'src'), + skipLibCheck: true + }; const program = ts.createProgram(targetFiles, compilerOptions); + + const diagnostics = ts.getPreEmitDiagnostics(program); + if (diagnostics.length) { + // console.error(diagnostics); + for (const diagnostic of diagnostics) { + console.log(JSON.stringify(diagnostic.messageText, null, 2)); + } + throw Error('TS build error!'); + } + program.emit(); } } diff --git a/scripts/util/file.ts b/scripts/util/file.ts index 2cb3fb5..4f095e9 100644 --- a/scripts/util/file.ts +++ b/scripts/util/file.ts @@ -1,26 +1,10 @@ import fs from 'fs'; -import path from 'path'; +// import path from 'path'; -function removeFullDir(dirPath) { - let files: string[] = []; - if (fs.existsSync(dirPath)) { - files = fs.readdirSync(dirPath); - files.forEach((filename) => { - const curPath: string = path.join(dirPath, filename); - const stat = fs.statSync(curPath); - if (stat.isDirectory()) { - removeFullDir(curPath); - } else if (stat.isFile()) { - // fs.unlinkSync(curPath); - fs.rmSync(curPath); - } else { - fs.unlinkSync(curPath); - } - }); - fs.rmdirSync(dirPath); +function removeFullDir(dirPath: string) { + if (fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory()) { + fs.rmSync(dirPath, { recursive: true }); } } -module.exports = { - removeFullDir -}; +export { removeFullDir }; diff --git a/scripts/util/project.ts b/scripts/util/project.ts index 19517d3..690b5b1 100644 --- a/scripts/util/project.ts +++ b/scripts/util/project.ts @@ -14,7 +14,7 @@ export function joinProjectPath(...args: string[]) { } export function getTsConfig() { - const configPath = joinProjectPath('tsconfig.json'); + const configPath = joinProjectPath('tsconfig.web.json'); const configStr = fs.readFileSync(configPath, { encoding: 'utf8' }); const config = JSON.parse(configStr); return config; diff --git a/scripts/util/screen.ts b/scripts/util/screen.ts index 22fe828..a927dff 100644 --- a/scripts/util/screen.ts +++ b/scripts/util/screen.ts @@ -16,7 +16,7 @@ module.exports = { height }; -async function createScreenshotBuffer(pagePath) { +async function createScreenshotBuffer(pagePath: string) { const middlewares = []; let buf; // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -35,7 +35,10 @@ async function createScreenshotBuffer(pagePath) { return buf; } -async function createScreenshot(middlewares, opts: any = {}): Promise { +async function createScreenshot( + middlewares: any[], + opts: any = {} +): Promise { return new Promise((resolve) => { const server = http.createServer((req, res) => serveHandler(req, res, { diff --git a/tsconfig.json b/tsconfig.json index 0406be4..e162e52 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,26 +1,11 @@ { - "compilerOptions": { - "declaration": true, - "sourceMap": false, - "target": "es5", - "module": "ES2015", - "moduleResolution": "node", - "allowJs": false, - "strict": true, - "noUnusedLocals": true, - "experimentalDecorators": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "removeComments": true, - "lib": ["ESNext", "dom"] - }, - "include": [ - "packages/global.d.ts", - "packages/*/src", - "packages/*/__tests__", - "packages/*/dev" - ], - "exclude": [ - "packages/*/examples" + "files": [], + "references": [ + { + "path": "./tsconfig.web.json" + }, + { + "path": "./tsconfig.node.json" + } ] } \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..cbcf391 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "ES6", + "lib": ["ES6", "DOM"], + "moduleResolution": "Node", + "strict": false, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "importHelpers": true, + "allowJs": true, + "composite": true + }, + "include": [ + "scripts/", + ], + "exclude": [ + "node_modules" + ] +} \ No newline at end of file diff --git a/tsconfig.web.json b/tsconfig.web.json new file mode 100644 index 0000000..fd4fd93 --- /dev/null +++ b/tsconfig.web.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "declaration": true, + "sourceMap": false, + "target": "ES6", + "module": "ES2015", + "moduleResolution": "node", + "allowJs": false, + "strict": true, + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "removeComments": true, + "lib": ["ES2016", "DOM"] + }, + "include": [ + "packages/*/src", + "packages/*/__tests__", + "packages/*/dev" + ], + "exclude": [ + "packages/*/examples" + ] +} \ No newline at end of file