mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 01:58:27 +00:00
chore: improve dev script and codes
This commit is contained in:
chenshenhai
parent
a2979cd5ba
commit
04cc4446e9
16 changed files with 653 additions and 327 deletions
195
packages/board/dev/data.ts
Normal file
195
packages/board/dev/data.ts
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
import type { Data } from '@idraw/types';
|
||||
import { createUUID, parseSVGPath } from '@idraw/util';
|
||||
|
||||
const data: Data = {
|
||||
elements: [
|
||||
// {
|
||||
// uuid: createUUID(),
|
||||
// type: 'image',
|
||||
// x: 100,
|
||||
// y: 100,
|
||||
// w: 100,
|
||||
// h: 100,
|
||||
// angle: 30,
|
||||
// detail: {
|
||||
// // src: '/public/images/lena.png?t=002'
|
||||
// src: '@assets/0ee02fb0-ec43-6b9a-9ab4-55be5816ca4a'
|
||||
// },
|
||||
// operations: {
|
||||
// limitRatio: true
|
||||
// }
|
||||
// },
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 2,
|
||||
y: 2,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#f44336'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'rect',
|
||||
x: 50,
|
||||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
detail: {
|
||||
background: '#8bc34a'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// uuid: createUUID(),
|
||||
// type: 'image',
|
||||
// x: 250,
|
||||
// y: 250,
|
||||
// w: 100,
|
||||
// h: 100,
|
||||
// detail: {
|
||||
// // src: '/public/images/github.png?t=003'
|
||||
// src: '@assets/25a0e630-a958-a522-29a4-5dccf04985da'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// uuid: createUUID(),
|
||||
// type: 'group',
|
||||
// x: 250,
|
||||
// y: 250,
|
||||
// w: 100,
|
||||
// h: 100,
|
||||
// detail: {
|
||||
// children: [
|
||||
// {
|
||||
// uuid: createUUID(),
|
||||
// type: 'image',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// w: 100,
|
||||
// h: 100,
|
||||
// detail: {
|
||||
// // src: '/public/images/github.png?t=003'
|
||||
// src: '@assets/489c64d2-f642-3855-7bd6-cb40624b62c3'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// // assets: {
|
||||
// // '@assets/489c64d2-f642-3855-7bd6-cb40624b62c3': {
|
||||
// // type: 'image',
|
||||
// // value: '/public/images/github.png?t=003'
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
// },
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 0,
|
||||
y: 300,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#009688'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 300,
|
||||
y: 300,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#673ab7'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 300,
|
||||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#ffc107'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 150,
|
||||
y: 150,
|
||||
w: 100,
|
||||
h: 100,
|
||||
// angle: 30,
|
||||
type: 'rect',
|
||||
detail: {
|
||||
background: '#4caf50',
|
||||
clipPath: {
|
||||
commands: parseSVGPath(`
|
||||
M 10,30
|
||||
A 20,20 0,0,1 50,30
|
||||
A 20,20 0,0,1 90,30
|
||||
Q 90,60 50,90
|
||||
Q 10,60 10,30 z`),
|
||||
// fill: '#ff0000',
|
||||
originX: 10,
|
||||
originY: 10,
|
||||
originH: 80,
|
||||
originW: 80
|
||||
// background: '#0000002A'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 100,
|
||||
y: 10,
|
||||
w: 80,
|
||||
h: 80,
|
||||
// angle: 30,
|
||||
type: 'path',
|
||||
detail: {
|
||||
commands: parseSVGPath(`
|
||||
M 10,30
|
||||
A 20,20 0,0,1 50,30
|
||||
A 20,20 0,0,1 90,30
|
||||
Q 90,60 50,90
|
||||
Q 10,60 10,30 z`),
|
||||
fill: 'red',
|
||||
originX: 10,
|
||||
originY: 10,
|
||||
originH: 80,
|
||||
originW: 80,
|
||||
background: '#0000002A'
|
||||
|
||||
// clipPath: {
|
||||
// commands: parseSVGPath(`
|
||||
// M 10,30
|
||||
// A 20,20 0,0,1 50,30
|
||||
// A 20,20 0,0,1 90,30
|
||||
// Q 90,60 50,90
|
||||
// Q 10,60 10,30 z`),
|
||||
// fill: '#ff0000',
|
||||
// originX: 10,
|
||||
// originY: 10,
|
||||
// originH: 80,
|
||||
// originW: 80
|
||||
// }
|
||||
}
|
||||
}
|
||||
]
|
||||
// assets: {
|
||||
// '@assets/0ee02fb0-ec43-6b9a-9ab4-55be5816ca4a': {
|
||||
// type: 'image',
|
||||
// value: '/public/images/lena.png?t=003'
|
||||
// },
|
||||
// '@assets/25a0e630-a958-a522-29a4-5dccf04985da': {
|
||||
// type: 'image',
|
||||
// value: '/public/images/github.png?t=002'
|
||||
// }
|
||||
// }
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
/* margin-top: 50px;
|
||||
margin-left: 60px; */
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
|
|
@ -26,10 +26,12 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
<div id="mount">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import Board from './../src/esm';
|
||||
|
||||
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();
|
||||
38
packages/board/dev/main.ts
Normal file
38
packages/board/dev/main.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { createBoardContent, deepClone } from '../../util/src';
|
||||
import { Board } from '../src';
|
||||
import { MiddlewareSelector, MiddlewareScroller, MiddlewareScaler } from '../../core/src';
|
||||
import data from './data';
|
||||
|
||||
const devicePixelRatio = window.devicePixelRatio;
|
||||
// const width = window.innerWidth;
|
||||
// const height = window.innerHeight;
|
||||
|
||||
const width = 800;
|
||||
const height = 600;
|
||||
|
||||
const canvas = document.querySelector('#canvas') as HTMLCanvasElement;
|
||||
canvas.width = width * devicePixelRatio;
|
||||
canvas.height = height * devicePixelRatio;
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
// const ctx1 = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const boardContent1 = createBoardContent(canvas, { width, height, devicePixelRatio });
|
||||
const board = new Board({ boardContent: boardContent1 });
|
||||
|
||||
const sharer1 = board.getSharer();
|
||||
sharer1.setActiveViewSizeInfo({
|
||||
devicePixelRatio,
|
||||
width,
|
||||
height,
|
||||
contextWidth: width,
|
||||
contextHeight: height
|
||||
});
|
||||
const data1 = deepClone(data);
|
||||
board.resize(sharer1.getActiveViewSizeInfo());
|
||||
board.setData(data1);
|
||||
board.use(MiddlewareSelector);
|
||||
board.use(MiddlewareScroller);
|
||||
board.use(MiddlewareScaler);
|
||||
// board.scale(2);
|
||||
// board.scrollX(-50);
|
||||
// board.scrollY(-50);
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
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'
|
||||
},
|
||||
operation: {
|
||||
disableScale: true,
|
||||
disableRotate: true
|
||||
}
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
153
packages/core/dev/data.ts
Normal file
153
packages/core/dev/data.ts
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import type { Data } from '@idraw/types';
|
||||
import { createUUID, parseSVGPath } from '@idraw/util';
|
||||
|
||||
const data: Data = {
|
||||
elements: [
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'image',
|
||||
x: 100,
|
||||
y: 100,
|
||||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
detail: {
|
||||
src: '/images/lena.png?t=002'
|
||||
},
|
||||
operations: {
|
||||
limitRatio: true
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 2,
|
||||
y: 2,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#f44336'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'rect',
|
||||
x: 50,
|
||||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
detail: {
|
||||
background: '#8bc34a'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'image',
|
||||
x: 250,
|
||||
y: 250,
|
||||
w: 100,
|
||||
h: 100,
|
||||
detail: {
|
||||
src: '/images/github.png?t=003'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 0,
|
||||
y: 300,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#009688'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 300,
|
||||
y: 300,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#673ab7'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 300,
|
||||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#ffc107'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 150,
|
||||
y: 150,
|
||||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
type: 'rect',
|
||||
detail: {
|
||||
background: '#4caf50',
|
||||
clipPath: {
|
||||
commands: parseSVGPath(`
|
||||
M 10,30
|
||||
A 20,20 0,0,1 50,30
|
||||
A 20,20 0,0,1 90,30
|
||||
Q 90,60 50,90
|
||||
Q 10,60 10,30 z`),
|
||||
// fill: '#ff0000',
|
||||
originX: 10,
|
||||
originY: 10,
|
||||
originH: 80,
|
||||
originW: 80
|
||||
// background: '#0000002A'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 100,
|
||||
y: 10,
|
||||
w: 80,
|
||||
h: 80,
|
||||
// angle: 30,
|
||||
type: 'path',
|
||||
detail: {
|
||||
commands: parseSVGPath(`
|
||||
M 10,30
|
||||
A 20,20 0,0,1 50,30
|
||||
A 20,20 0,0,1 90,30
|
||||
Q 90,60 50,90
|
||||
Q 10,60 10,30 z`),
|
||||
fill: 'red',
|
||||
originX: 10,
|
||||
originY: 10,
|
||||
originH: 80,
|
||||
originW: 80,
|
||||
background: '#0000002A'
|
||||
|
||||
// clipPath: {
|
||||
// commands: parseSVGPath(`
|
||||
// M 10,30
|
||||
// A 20,20 0,0,1 50,30
|
||||
// A 20,20 0,0,1 90,30
|
||||
// Q 90,60 50,90
|
||||
// Q 10,60 10,30 z`),
|
||||
// fill: '#ff0000',
|
||||
// originX: 10,
|
||||
// originY: 10,
|
||||
// originH: 80,
|
||||
// originW: 80
|
||||
// }
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
margin-left: 60px;
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
/* border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
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;
|
||||
background-color: #ffffff; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -28,6 +28,6 @@
|
|||
|
||||
<div id="mount"></div>
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
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);
|
||||
22
packages/core/dev/main.ts
Normal file
22
packages/core/dev/main.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Core, MiddlewareSelector, MiddlewareScroller, MiddlewareScaler, MiddlewareInfo, MiddlewareRuler } from '../src';
|
||||
|
||||
import data from './data';
|
||||
|
||||
const devicePixelRatio = window.devicePixelRatio;
|
||||
// const width = window.innerWidth;
|
||||
// const height = window.innerHeight;
|
||||
const width = 600;
|
||||
const height = 400;
|
||||
const container = document.querySelector('#mount') as HTMLDivElement;
|
||||
|
||||
const core = new Core(container, {
|
||||
width,
|
||||
height,
|
||||
devicePixelRatio
|
||||
});
|
||||
core.use(MiddlewareSelector);
|
||||
core.use(MiddlewareScroller);
|
||||
core.use(MiddlewareScaler);
|
||||
core.use(MiddlewareInfo);
|
||||
core.use(MiddlewareRuler);
|
||||
core.setData(data);
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
const data = {
|
||||
bgColor: "#ffffff",
|
||||
elements: [
|
||||
// {
|
||||
// name: "rect-001",
|
||||
// x: 5,
|
||||
// y: 5,
|
||||
// w: 100,
|
||||
// h: 50,
|
||||
// type: "rect",
|
||||
// desc: {
|
||||
// bgColor: "#ffeb3b",
|
||||
// borderRadius: 2,
|
||||
// borderWidth: 0,
|
||||
// borderColor: "#ffc107",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "text-002",
|
||||
// x: 40,
|
||||
// y: 40,
|
||||
// w: 100,
|
||||
// h: 60,
|
||||
// // angle: 30,
|
||||
// type: "text",
|
||||
// desc: {
|
||||
// fontSize: 16,
|
||||
// text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join('\r\n'),
|
||||
// // text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join(''),
|
||||
// fontWeight: 'bold',
|
||||
// color: "#666666",
|
||||
// borderRadius: 30,
|
||||
// borderWidth: 2,
|
||||
// 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>',
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
name: "html-001",
|
||||
x: 20,
|
||||
y: 40,
|
||||
w: 150,
|
||||
h: 100,
|
||||
type: "html",
|
||||
angle: 0,
|
||||
desc: {
|
||||
html: `
|
||||
<style>
|
||||
.btn-box {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.btn {
|
||||
line-height: 1.5715;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 2px #00000004;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 32px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
color: #000000d9;
|
||||
background: #fff;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
||||
box-shadow: 0 2px #0000000b;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<div class="btn-box">
|
||||
<button class="btn">
|
||||
<span> Hello Button</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function getData() {
|
||||
return data;
|
||||
}
|
||||
153
packages/renderer/dev/data.ts
Normal file
153
packages/renderer/dev/data.ts
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import type { Data } from '@idraw/types';
|
||||
import { createUUID, parseSVGPath } from '@idraw/util';
|
||||
|
||||
const data: Data = {
|
||||
elements: [
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'image',
|
||||
x: 100,
|
||||
y: 100,
|
||||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
detail: {
|
||||
src: '/dev/images/phone.png?t=002'
|
||||
},
|
||||
operations: {
|
||||
limitRatio: true
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 2,
|
||||
y: 2,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#f44336'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'rect',
|
||||
x: 50,
|
||||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
detail: {
|
||||
background: '#8bc34a'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
type: 'image',
|
||||
x: 250,
|
||||
y: 250,
|
||||
w: 100,
|
||||
h: 100,
|
||||
detail: {
|
||||
src: '/dev/images/computer.png?t=003'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 0,
|
||||
y: 300,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#009688'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 300,
|
||||
y: 300,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#673ab7'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 300,
|
||||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
detail: {
|
||||
background: '#ffc107'
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 150,
|
||||
y: 150,
|
||||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
type: 'rect',
|
||||
detail: {
|
||||
background: '#4caf50',
|
||||
clipPath: {
|
||||
commands: parseSVGPath(`
|
||||
M 10,30
|
||||
A 20,20 0,0,1 50,30
|
||||
A 20,20 0,0,1 90,30
|
||||
Q 90,60 50,90
|
||||
Q 10,60 10,30 z`),
|
||||
// fill: '#ff0000',
|
||||
originX: 10,
|
||||
originY: 10,
|
||||
originH: 80,
|
||||
originW: 80
|
||||
// background: '#0000002A'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
uuid: createUUID(),
|
||||
x: 100,
|
||||
y: 10,
|
||||
w: 80,
|
||||
h: 80,
|
||||
// angle: 30,
|
||||
type: 'path',
|
||||
detail: {
|
||||
commands: parseSVGPath(`
|
||||
M 10,30
|
||||
A 20,20 0,0,1 50,30
|
||||
A 20,20 0,0,1 90,30
|
||||
Q 90,60 50,90
|
||||
Q 10,60 10,30 z`),
|
||||
fill: 'red',
|
||||
originX: 10,
|
||||
originY: 10,
|
||||
originH: 80,
|
||||
originW: 80,
|
||||
background: '#0000002A'
|
||||
|
||||
// clipPath: {
|
||||
// commands: parseSVGPath(`
|
||||
// M 10,30
|
||||
// A 20,20 0,0,1 50,30
|
||||
// A 20,20 0,0,1 90,30
|
||||
// Q 90,60 50,90
|
||||
// Q 10,60 10,30 z`),
|
||||
// fill: '#ff0000',
|
||||
// originX: 10,
|
||||
// originY: 10,
|
||||
// originH: 80,
|
||||
// originW: 80
|
||||
// }
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
background: #f0f0f088;
|
||||
}
|
||||
#mount {
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
/* margin-top: 50px;
|
||||
margin-left: 60px; */
|
||||
}
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
<body>
|
||||
|
||||
<div id="mount">
|
||||
<canvas id="canvas"></canvas>
|
||||
<!-- <canvas id="canvas"></canvas> -->
|
||||
</div>
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
// 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: 1200,
|
||||
contextHeight: 800,
|
||||
devicePixelRatio: 2,
|
||||
}
|
||||
|
||||
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.style.width = opts.width;
|
||||
canvas.style.height = opts.height;
|
||||
// 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 })
|
||||
|
||||
|
||||
|
||||
|
||||
77
packages/renderer/dev/main.ts
Normal file
77
packages/renderer/dev/main.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { calcElementListSize, createOffscreenContext2D } from '../../util/src';
|
||||
import type { ViewContext2D, ElementSize } from '../../types/src';
|
||||
import { Renderer } from '../../renderer/src';
|
||||
import { Calculator, Sharer } from '../../board/src';
|
||||
|
||||
import data from './data';
|
||||
|
||||
const devicePixelRatio = window.devicePixelRatio;
|
||||
|
||||
// const devicePixelRatio = 1.5;
|
||||
const previewWidth = 600;
|
||||
const previewHeight = 400;
|
||||
const container = document.querySelector('#mount') as HTMLDivElement;
|
||||
|
||||
const canvas = document.createElement('canvas') as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = previewWidth;
|
||||
canvas.height = previewHeight;
|
||||
|
||||
const renderPreview = (opts: { viewContext: ViewContext2D; outputSize: ElementSize }) => {
|
||||
if (!ctx || !canvas) {
|
||||
return;
|
||||
}
|
||||
const { viewContext, outputSize } = opts;
|
||||
let width = previewWidth;
|
||||
let height = (previewWidth * outputSize.h) / outputSize.w;
|
||||
if (height > width) {
|
||||
height = previewWidth;
|
||||
width = (previewWidth * outputSize.w) / outputSize.h;
|
||||
}
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
const offScreenCanvas = viewContext.$getOffscreenCanvas() as OffscreenCanvas;
|
||||
|
||||
// console.log('offScreenCanvas.width ====== ', offScreenCanvas);
|
||||
ctx.drawImage(offScreenCanvas, 0, 0, width, height);
|
||||
};
|
||||
|
||||
container.innerHTML = '';
|
||||
container.appendChild(canvas);
|
||||
|
||||
const outputSize = calcElementListSize(data.elements);
|
||||
const sharer = new Sharer();
|
||||
const viewContext = createOffscreenContext2D({
|
||||
width: outputSize.w,
|
||||
height: outputSize.h,
|
||||
devicePixelRatio
|
||||
});
|
||||
const calculator = new Calculator({
|
||||
viewContext
|
||||
});
|
||||
const renderer = new Renderer({
|
||||
viewContext,
|
||||
sharer,
|
||||
calculator
|
||||
});
|
||||
|
||||
const draw = () => {
|
||||
renderer.drawData(data, {
|
||||
viewScaleInfo: { scale: 1, offsetLeft: -outputSize.x, offsetTop: -outputSize.y, offsetBottom: 0, offsetRight: 0 },
|
||||
viewSizeInfo: {
|
||||
width: outputSize.w,
|
||||
height: outputSize.h,
|
||||
devicePixelRatio,
|
||||
contextWidth: outputSize.w,
|
||||
contextHeight: outputSize.h
|
||||
}
|
||||
});
|
||||
renderPreview({ viewContext, outputSize });
|
||||
};
|
||||
|
||||
renderer.on('load', () => {
|
||||
draw();
|
||||
});
|
||||
|
||||
draw();
|
||||
|
|
@ -24,7 +24,7 @@ async function dev() {
|
|||
function getViteConfig(pkgName: string): UserConfig {
|
||||
const viteConfig: UserConfig = {
|
||||
root: joinPackagePath(pkgName),
|
||||
publicDir: joinPackagePath(pkgName, 'demo', 'public'),
|
||||
publicDir: joinPackagePath(pkgName, 'dev'),
|
||||
server: {
|
||||
port: 8080,
|
||||
host: '127.0.0.1'
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ async function dev() {
|
|||
function getViteConfig(): UserConfig {
|
||||
const viteConfig: UserConfig = {
|
||||
root: joinPackagePath(pkgName),
|
||||
publicDir: joinPackagePath(pkgName, 'demo', 'public'),
|
||||
publicDir: joinPackagePath(pkgName, 'dev'),
|
||||
server: {
|
||||
port: 8080,
|
||||
host: '127.0.0.1',
|
||||
|
|
|
|||
Loading…
Reference in a new issue