mirror of
https://github.com/idrawjs/idraw
synced 2026-05-23 01:28:31 +00:00
refactor: refactor dev mode
This commit is contained in:
chenshenhai
parent
e049ff6648
commit
3fcd8a957e
33 changed files with 505 additions and 478 deletions
12
package.json
12
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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
35
packages/board/dev/index.html
Normal file
35
packages/board/dev/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
45
packages/board/dev/main.js
Normal file
45
packages/board/dev/main.js
Normal file
|
|
@ -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();
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
63
packages/core/dev/data.js
Normal file
63
packages/core/dev/data.js
Normal file
|
|
@ -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: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function getData() {
|
||||
return data;
|
||||
}
|
||||
33
packages/core/dev/index.html
Normal file
33
packages/core/dev/index.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
21
packages/core/dev/main.js
Normal file
21
packages/core/dev/main.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import Core from './../src/index';
|
||||
import data from './data';
|
||||
|
||||
console.log('Core =', Core)
|
||||
|
||||
|
||||
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);
|
||||
35
packages/idraw/dev/index.html
Normal file
35
packages/idraw/dev/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
packages/idraw/dev/main.js
Normal file
4
packages/idraw/dev/main.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import Renderer from './../src/index';
|
||||
|
||||
console.log('Renderer =', Renderer)
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
# @idraw/kernal
|
||||
|
||||
[](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml)
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
describe('@idraw/kernal', () => {
|
||||
test('test', async () => {
|
||||
// TODO
|
||||
expect(1).toStrictEqual(1);
|
||||
});
|
||||
})
|
||||
|
||||
|
|
@ -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]
|
||||
}]);
|
||||
});
|
||||
})
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"extends": "../../api-extractor.json",
|
||||
"mainEntryPointFilePath": "./dist/packages/<unscopedPackageName>/src/index.d.ts",
|
||||
"dtsRollup": {
|
||||
"publicTrimmedFilePath": "./dist/index.d.ts"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<html>
|
||||
<body>
|
||||
Hello World
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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<keyof TypeElemDesc>) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// addElement(elem: TypeElementBase<keyof TypeElemDesc>) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// deleteElement(uuid: string) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// insertElementBefore(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// insertElementBeforeIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// getSelectedElements() {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// insertElementAfter(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// insertElementAfterIndex(elem: TypeElementBase<keyof TypeElemDesc>, 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<T extends keyof TypeCoreEventArgMap >(key: T, callback: (p: TypeCoreEventArgMap[T]) => void) {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
// off<T extends keyof TypeCoreEventArgMap >(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;
|
||||
|
|
@ -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;
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
class ElementBase {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
|
||||
class ElementController {
|
||||
// TODO
|
||||
}
|
||||
|
||||
export default ElementController;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import ElementController from './element-controller';
|
||||
|
||||
class ElementHub {
|
||||
|
||||
private _controllerMap: Map<string, ElementController> = 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;
|
||||
|
|
@ -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,
|
||||
}
|
||||
63
packages/renderer/dev/data.js
Normal file
63
packages/renderer/dev/data.js
Normal file
|
|
@ -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: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function getData() {
|
||||
return data;
|
||||
}
|
||||
BIN
packages/renderer/dev/images/computer.png
Normal file
BIN
packages/renderer/dev/images/computer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
packages/renderer/dev/images/phone.png
Normal file
BIN
packages/renderer/dev/images/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
35
packages/renderer/dev/index.html
Normal file
35
packages/renderer/dev/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
46
packages/renderer/dev/main.js
Normal file
46
packages/renderer/dev/main.js
Normal file
|
|
@ -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 })
|
||||
|
||||
|
||||
|
||||
|
||||
35
packages/util/dev/index.html
Normal file
35
packages/util/dev/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
packages/util/dev/main.js
Normal file
4
packages/util/dev/main.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import util from './../src/index';
|
||||
|
||||
console.log('util =', util)
|
||||
|
||||
|
|
@ -4,7 +4,7 @@ const process = require('process');
|
|||
|
||||
async function main() {
|
||||
|
||||
await execa( 'rollup',
|
||||
await execa('rollup',
|
||||
[
|
||||
'-w',
|
||||
'-c',
|
||||
52
scripts/dev-vite.js
Normal file
52
scripts/dev-vite.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
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: false,
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
console.log('Hello World!')
|
||||
19
scripts/util/project.js
Normal file
19
scripts/util/project.js
Normal file
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"jsx": "preserve",
|
||||
"lib": ["ESNext", "dom"],
|
||||
"rootDir": ".",
|
||||
"isolatedModules": true,
|
||||
// "paths": {
|
||||
// "idraw": ["packages/idraw/src1"]
|
||||
// }
|
||||
|
|
@ -24,6 +25,10 @@
|
|||
"include": [
|
||||
"packages/global.d.ts",
|
||||
"packages/*/src",
|
||||
"packages/*/__tests__"
|
||||
"packages/*/__tests__",
|
||||
"packages/*/dev",
|
||||
],
|
||||
"exclude": [
|
||||
"packages/*/examples"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue