mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
chore: clear useless files
This commit is contained in:
chenshenhai
parent
77da7ce810
commit
70990344ff
60 changed files with 0 additions and 5042 deletions
|
|
@ -1,10 +0,0 @@
|
|||
# Documents
|
||||
|
||||
## Usage
|
||||
|
||||
- Site: https://idrawjs.github.io/
|
||||
- Repos: https://github.com/idrawjs/docs
|
||||
|
||||
## TODO List
|
||||
|
||||
- https://github.com/idrawjs/idraw/issues/53
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { getData } from "./data.js";
|
||||
import { drawData } from './draw.js';
|
||||
import { getScale } from './scale.js';
|
||||
import opts from './opts.js'
|
||||
|
||||
function isPointInElement(board, p = {x, y}) {
|
||||
const ctx = board.getContext();
|
||||
const data = getData();
|
||||
let idx = -1;
|
||||
for (let i = data.elements.length - 1; i >= 0; i--) {
|
||||
const ele = data.elements[i];
|
||||
ctx.beginPath();
|
||||
ctx.lineTo(ele.x, ele.y);
|
||||
ctx.lineTo(ele.x + ele.w, ele.y);
|
||||
ctx.lineTo(ele.x + ele.w, ele.y + ele.h);
|
||||
ctx.lineTo(ele.x, ele.y + ele.h);
|
||||
ctx.closePath();
|
||||
|
||||
if (ctx.isPointInPath(p.x, p.y)) {
|
||||
idx = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return idx;
|
||||
}
|
||||
|
||||
function moveElement(board, idx, moveX, moveY) {
|
||||
const data = getData();
|
||||
const scale = getScale() || 1;
|
||||
if (data.elements[idx]) {
|
||||
// data.elements[idx].x += (moveX * scale * opts.devicePixelRatio);
|
||||
// data.elements[idx].y += (moveY * scale * opts.devicePixelRatio);
|
||||
data.elements[idx].x += (moveX / scale);
|
||||
data.elements[idx].y += (moveY / scale);
|
||||
}
|
||||
drawData(board, idx)
|
||||
}
|
||||
|
||||
const cursor = document.querySelector('#cursor');
|
||||
const resetCursor = document.querySelector('#reset-cursor');
|
||||
let hasInitedCursor = false;
|
||||
function doCursor(board) {
|
||||
if (hasInitedCursor === true) {
|
||||
return;
|
||||
}
|
||||
cursor.addEventListener('change', () => {
|
||||
// console.log('cursor.value = ', cursor.value);
|
||||
board.setCursor(cursor.value);
|
||||
});
|
||||
resetCursor.addEventListener('click', () => {
|
||||
board.resetCursor();
|
||||
});
|
||||
hasInitedCursor = true;
|
||||
}
|
||||
|
||||
export {
|
||||
isPointInElement,
|
||||
moveElement,
|
||||
doCursor
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
const data = {
|
||||
elements: [
|
||||
{
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 120,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#f0f0f0",
|
||||
},
|
||||
},
|
||||
{
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#cccccc",
|
||||
},
|
||||
},
|
||||
{
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 120,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#c0c0c0",
|
||||
},
|
||||
},
|
||||
{
|
||||
x: 400 - 10,
|
||||
y: 300 - 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#e0e0e0",
|
||||
},
|
||||
},
|
||||
{
|
||||
x: 300 - 10,
|
||||
y: 200 - 10,
|
||||
w: 20,
|
||||
h: 20,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#000000",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function getData() {
|
||||
return data;
|
||||
}
|
||||
|
||||
export { getData };
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import opts from './opts.js';
|
||||
import { getData } from './data.js';
|
||||
|
||||
export function drawData(board, idx) {
|
||||
const ctx = board.getContext();
|
||||
const helperCtx = board.getHelperContext();
|
||||
const data = getData();
|
||||
board.clear();
|
||||
ctx.clearRect(0, 0, opts.devicePixelRatio * opts.contextWidth, opts.devicePixelRatio * opts.contextHeight);
|
||||
helperCtx.clearRect(0, 0, opts.devicePixelRatio * opts.contextWidth, opts.devicePixelRatio * opts.contextHeight);
|
||||
|
||||
// ctx.setFillStyle('#ffffff');
|
||||
// ctx.fillRect(0, 0, opts.width, opts.height);
|
||||
|
||||
data.elements.forEach((ele, i) => {
|
||||
ctx.setFillStyle(ele.desc.color);
|
||||
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
|
||||
|
||||
// helperCtx.setFillStyle('#2196f3');
|
||||
// helperCtx.fillRect(ele.x, ele.y, ele.w, ele.h);
|
||||
|
||||
if (i === idx) {
|
||||
helperCtx.beginPath();
|
||||
helperCtx.setLineDash([4, 4]);
|
||||
helperCtx.setLineWidth(2);
|
||||
helperCtx.setStrokeStyle('#2196f3');
|
||||
helperCtx.moveTo(ele.x, ele.y);
|
||||
helperCtx.lineTo(ele.x + ele.w, ele.y);
|
||||
helperCtx.lineTo(ele.x + ele.w, ele.y + ele.h);
|
||||
helperCtx.lineTo(ele.x, ele.y + ele.h);
|
||||
helperCtx.lineTo(ele.x, ele.y);
|
||||
helperCtx.stroke();
|
||||
helperCtx.closePath();
|
||||
}
|
||||
});
|
||||
board.draw();
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { isPointInElement, moveElement } from './action.js';
|
||||
|
||||
let selectIdx = -1;
|
||||
let prevPoint = { x: null, y: null };
|
||||
|
||||
export function initEvent(board) {
|
||||
|
||||
board.on('point', (p) => {
|
||||
selectIdx = isPointInElement(board, p);
|
||||
});
|
||||
|
||||
board.on('move', (p) => {
|
||||
moveElement(board, selectIdx, p.x - prevPoint.x, p.y - prevPoint.y);
|
||||
prevPoint = p;
|
||||
});
|
||||
|
||||
board.on('moveStart', (p) => {
|
||||
prevPoint = p;
|
||||
});
|
||||
|
||||
board.on('moveEnd', (p) => {
|
||||
selectIdx = false;
|
||||
});
|
||||
|
||||
board.on('scale', (num) => {
|
||||
console.log('on("scale") = ', num);
|
||||
});
|
||||
|
||||
board.on('scrollX', (num) => {
|
||||
console.log('on("scrollX") = ', num);
|
||||
});
|
||||
|
||||
board.on('scrollX', (num) => {
|
||||
console.log('on("scrollX") = ', num);
|
||||
});
|
||||
|
||||
board.on('hover', (p) => {
|
||||
// console.log('hover', p);
|
||||
})
|
||||
|
||||
board.on('doubleClick', (p) => {
|
||||
console.log('on("doubleClick")', p);
|
||||
})
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
export default {
|
||||
width: 400,
|
||||
height: 300,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
scrollConfig: {
|
||||
lineWidth: 16,
|
||||
color: '#666666'
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
const input = document.querySelector('#scale');
|
||||
let hasInited = false;
|
||||
|
||||
export function doScale(board, scale) {
|
||||
if (hasInited === true) return;
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
if (scale > 0) {
|
||||
input.value = scale;
|
||||
const screen = board.scale(scale);
|
||||
console.log('scale: screen =', screen);
|
||||
board.draw();
|
||||
}
|
||||
input.addEventListener('change', () => {
|
||||
const val = input.value * 1;
|
||||
if (val > 0) {
|
||||
const screen = board.scale(val);
|
||||
console.log('scale: screen =', screen);
|
||||
board.draw();
|
||||
}
|
||||
});
|
||||
hasInited = true;
|
||||
}
|
||||
|
||||
export function getScale() {
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
let val = 1;
|
||||
if (input.value * 1 > 0) {
|
||||
val = input.value * 1;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
const inputX = document.querySelector('#scrollX');
|
||||
const inputY = document.querySelector('#scrollY');
|
||||
let hasInited = false;
|
||||
|
||||
export function doScroll(board, conf = {}) {
|
||||
if (hasInited === true) return;
|
||||
if (!(inputX && inputY)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (conf.scrollX >= 0 || conf.scrollX < 0) {
|
||||
inputX.value = conf.scrollX;
|
||||
const screen = board.scrollX(conf.scrollX);
|
||||
console.log('scrollX: screen =', screen);
|
||||
board.draw();
|
||||
}
|
||||
|
||||
if (conf.scrollY >= 0 || conf.scrollY < 0) {
|
||||
inputY.value = conf.scrollY;
|
||||
const screen = board.scrollY(conf.scrollY);
|
||||
console.log('scrollY: screen =', screen);
|
||||
board.draw();
|
||||
}
|
||||
|
||||
inputX.addEventListener('change', () => {
|
||||
const val = inputX.value * 1;
|
||||
if (val >= 0 || val < 0) {
|
||||
const screen = board.scrollX(val);
|
||||
console.log('scrollX: screen =', screen);
|
||||
board.draw();
|
||||
}
|
||||
});
|
||||
inputY.addEventListener('change', () => {
|
||||
const val = inputY.value * 1;
|
||||
if (val >= 0 || val < 0) {
|
||||
const screen = board.scrollY(val);
|
||||
console.log('scrollY: screen =', screen);
|
||||
board.draw();
|
||||
}
|
||||
});
|
||||
hasInited = true;
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<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>
|
||||
|
||||
<div>
|
||||
<span>scale</span>
|
||||
<input id="scale" type="number" value="1"/>
|
||||
</div>
|
||||
<div>
|
||||
<span>scrollX</span>
|
||||
<input id="scrollX" type="number" value="0"/>
|
||||
</div>
|
||||
<div>
|
||||
<span>scrollY</span>
|
||||
<input id="scrollY" type="number" value="0"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select id="cursor">
|
||||
<option value="auto">auto</option>
|
||||
<option value="move">move</option>
|
||||
<option value="grab">grab</option>
|
||||
<option value="n-resize">n-resize</option>
|
||||
<option value="e-resize">e-resize</option>
|
||||
<option value="s-resize">s-resize</option>
|
||||
<option value="w-resize">w-resize</option>
|
||||
<option value="ne-resize">ne-resize</option>
|
||||
<option value="nw-resize">nw-resize</option>
|
||||
<option value="se-resize">se-resize</option>
|
||||
<option value="sw-resize">sw-resize</option>
|
||||
</select>
|
||||
|
||||
<button id="reset-cursor">Reset cursor</button>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/board/dist/index.global.js"></script>
|
||||
<script type="module" src="./main.js"></script>
|
||||
<script>
|
||||
// console.log(parent.window.location);
|
||||
// parent.document.addEventListener('click', (e) => {
|
||||
// console.log('xxxxxxx: ', e);
|
||||
// })
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import opts from './lib/opts.js';
|
||||
import { drawData } from './lib/draw.js';
|
||||
import { doScale } from './lib/scale.js';
|
||||
import { doScroll } from './lib/scroll.js';
|
||||
import { initEvent } from './lib/event.js';
|
||||
import { doCursor } from './lib/action.js';
|
||||
|
||||
const Board = window.iDrawBoard;
|
||||
|
||||
const mount = document.querySelector('#mount');
|
||||
const board = new Board(mount, opts);
|
||||
|
||||
const conf = {
|
||||
scale: 1
|
||||
// scrollX: 100,
|
||||
// scrollY: 200,
|
||||
};
|
||||
|
||||
// const conf = {
|
||||
// scale: 2,
|
||||
// scrollX: -200,
|
||||
// scrollY: -100,
|
||||
// };
|
||||
|
||||
drawData(board);
|
||||
|
||||
initEvent(board);
|
||||
doScale(board, conf.scale);
|
||||
doScroll(board, conf);
|
||||
doCursor(board);
|
||||
|
||||
console.log(
|
||||
'pointScreenToContext = ',
|
||||
board.pointScreenToContext({ x: 400, y: 300 })
|
||||
);
|
||||
|
||||
console.log(
|
||||
'pointContextToScreen = ',
|
||||
board.pointContextToScreen({ x: 300, y: 200 })
|
||||
);
|
||||
|
||||
// board.scale(2);
|
||||
// board.draw();
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
.preview {
|
||||
margin-top: 50px;
|
||||
margin-left: 100px;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="./main.html"
|
||||
frameBorder="0" class="preview" width="500", height="500"></iframe>
|
||||
|
||||
<!-- <iframe src="http://127.0.0.1:8081/packages/board/examples/features/main.html"
|
||||
frameBorder="0" class="preview"
|
||||
width="600", height="500"></iframe> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
.preview {
|
||||
margin-top: 60px;
|
||||
margin-left: 100px;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="./parent.html"
|
||||
frameBorder="0" class="preview" width="700", height="600"></iframe>
|
||||
|
||||
<!-- <iframe src="http://127.0.0.1:8081/packages/board/examples/features/main.html"
|
||||
frameBorder="0" class="preview"
|
||||
width="600", height="500"></iframe> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #aaaaaa;
|
||||
border-left: 1px solid #aaaaaa;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #aaaaaa;
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
.box .text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bolder;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">Event: View</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">Event: Result</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/board/dist/index.global.js"></script>
|
||||
<script>
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 500,
|
||||
contextHeight: 450,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
scrollConfig: {
|
||||
color: '#666666',
|
||||
lineWidth: 8
|
||||
}
|
||||
}
|
||||
function drawBoard(board) {
|
||||
const ctx = board.getContext();
|
||||
|
||||
// ctx.setFillStyle('#ffffff');
|
||||
// ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
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(130, 130, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(250 - 5, 250 - 5, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(300, 300, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(380, 380, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(250 - 5, 225 - 5, 10, 10);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import event from './../../../scripts/browser/event.js';
|
||||
(async function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount1 = document.querySelector('#mount-1');
|
||||
const mount2 = document.querySelector('#mount-2');
|
||||
const board = new Board(mount1, opts);
|
||||
|
||||
function renderText(text) {
|
||||
const div = document.createElement('div');
|
||||
div.innerText = text;
|
||||
div.classList.add('text');
|
||||
mount2.appendChild(div);
|
||||
}
|
||||
|
||||
const handleDoubleClick = (e) => {
|
||||
renderText(`doubleClick: x=${e.x}, y=${e.y}`);
|
||||
}
|
||||
const handleHover = (e) => {
|
||||
renderText(`hover: x=${e.x}, y=${e.y}`);
|
||||
}
|
||||
const handlePoint = (e) => {
|
||||
renderText(`point: x=${e.x}, y=${e.y}`);
|
||||
}
|
||||
const handleMove = (e) => {
|
||||
renderText(`move: x=${e.x}, y=${e.y}`);
|
||||
}
|
||||
const handleMoveStart = (e) => {
|
||||
renderText(`moveStart: x=${e.x}, y=${e.y}`);
|
||||
}
|
||||
const handleMoveEnd = (e) => {
|
||||
renderText(`moveEnd: x=${e.x}, y=${e.y}`);
|
||||
}
|
||||
const handleWheelX = (moveX) => {
|
||||
renderText(`wheelX: moveX=${moveX}`);
|
||||
}
|
||||
const handleWheelY = (moveY) => {
|
||||
renderText(`wheelY: moveY=${moveY}`);
|
||||
}
|
||||
|
||||
board.on('hover', handleHover);
|
||||
board.on('point', handlePoint);
|
||||
board.on('move', handleMove);
|
||||
board.on('moveStart', handleMoveStart);
|
||||
board.on('moveEnd', handleMoveEnd);
|
||||
board.on('wheelX', handleWheelX);
|
||||
board.on('wheelY', handleWheelY);
|
||||
board.on('doubleClick', handleDoubleClick)
|
||||
|
||||
drawBoard(board)
|
||||
board.draw();
|
||||
|
||||
function delay(time) {
|
||||
return new Promise((resolve) => {
|
||||
resolve()
|
||||
}, time)
|
||||
}
|
||||
|
||||
async function triggerEvent(clientX, clientY) {
|
||||
event.click({
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
});
|
||||
await delay(10);
|
||||
event.click({
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
});
|
||||
event.mouseMove({
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
});
|
||||
event.mouseDown({
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
});
|
||||
event.mouseUp({
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
});
|
||||
event.wheelX(100, {
|
||||
clientX: clientX,
|
||||
clientY: clientY,
|
||||
});
|
||||
event.wheelY(125, {
|
||||
clientX: clientX,
|
||||
clientY: clientY,
|
||||
});
|
||||
}
|
||||
|
||||
await delay(20);
|
||||
triggerEvent(120, 100);
|
||||
await delay(20);
|
||||
|
||||
board.off('doubleClick', handleDoubleClick);
|
||||
board.off('hover', handleHover);
|
||||
board.off('point', handlePoint);
|
||||
board.off('move', handleMove);
|
||||
board.off('moveStart', handleMoveStart);
|
||||
board.off('moveEnd', handleMoveEnd);
|
||||
board.off('wheelX', handleWheelX);
|
||||
board.off('wheelY', handleWheelY);
|
||||
await delay(1000);
|
||||
triggerEvent(100, 80)
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">basic</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">resetSize</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/board/dist/index.global.js"></script>
|
||||
|
||||
<script>
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const board = new Board(mount, {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
drawBoard(board);
|
||||
board.scale(0.5);
|
||||
board.scale(1);
|
||||
board.draw();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-2');
|
||||
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();
|
||||
|
||||
// board.scale(0.5)
|
||||
// board.draw();
|
||||
})()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,218 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">Scale 0.5 to 1</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">Scale 2 and Scroll</div>
|
||||
</div>
|
||||
<div class="box" id="mount-3">
|
||||
<div class="title">Scale 2 to 1 and Scroll</div>
|
||||
</div>
|
||||
<div class="box" id="mount-4">
|
||||
<div class="title">Scale 0.5 and Scroll</div>
|
||||
</div>
|
||||
<div class="box" id="mount-5">
|
||||
<div class="title">Scale 0.5 and Console result</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/board/dist/index.global.js"></script>
|
||||
|
||||
<script>
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const board = new Board(mount, {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
drawBoard(board);
|
||||
|
||||
board.scale(0.5);
|
||||
board.scale(1);
|
||||
board.draw();
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-2');
|
||||
const board = new Board(mount, {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
|
||||
drawBoard(board);
|
||||
|
||||
board.scale(2);
|
||||
board.scrollX(-150);
|
||||
board.scrollY(-100);
|
||||
board.draw();
|
||||
})()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-3');
|
||||
const board = new Board(mount, {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
|
||||
drawBoard(board);
|
||||
|
||||
board.scale(2);
|
||||
board.scrollX(-300);
|
||||
board.scrollY(-200);
|
||||
board.scale(1);
|
||||
board.draw();
|
||||
})()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-4');
|
||||
const board = new Board(mount, {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
|
||||
drawBoard(board);
|
||||
|
||||
board.scale(0.5);
|
||||
board.draw();
|
||||
})()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-5');
|
||||
const opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4
|
||||
}
|
||||
const board = new Board(mount, opts);
|
||||
|
||||
const ctx = board.getContext();
|
||||
|
||||
ctx.setFillStyle('#ffffff');
|
||||
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
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(130, 130, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(250 - 5, 250 - 5, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(300, 300, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(380, 345, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(250 - 5, 225 - 5, 10, 10);
|
||||
|
||||
const result = board.scale(0.5);
|
||||
console.log('result =', result);
|
||||
|
||||
board.draw();
|
||||
})()
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">Scroll by scrollX/scrollY</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">Scroll by WheelEvent</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/board/dist/index.global.js"></script>
|
||||
<script>
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 500,
|
||||
contextHeight: 450,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
scrollConfig: {
|
||||
color: '#666666',
|
||||
lineWidth: 8
|
||||
}
|
||||
}
|
||||
function drawBoard(board) {
|
||||
const ctx = board.getContext();
|
||||
|
||||
// ctx.setFillStyle('#ffffff');
|
||||
// ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
|
||||
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(130, 130, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#e0e0e0');
|
||||
ctx.fillRect(250 - 5, 250 - 5, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#c0c0c0');
|
||||
ctx.fillRect(300, 300, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#cccccc');
|
||||
ctx.fillRect(380, 380, 100, 50);
|
||||
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.fillRect(250 - 5, 225 - 5, 10, 10);
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const board = new Board(mount, opts);
|
||||
// board.on('wheelX', (deltaX) => {
|
||||
// console.log('deltaX =', deltaX);
|
||||
// })
|
||||
// board.on('wheelY', (deltaY) => {
|
||||
// console.log('deltaY =', deltaY);
|
||||
// })
|
||||
|
||||
drawBoard(board)
|
||||
|
||||
// board.scale(1.5);
|
||||
board.scrollX(-100);
|
||||
board.scrollY(-125);
|
||||
// board.scale(1);
|
||||
|
||||
// const result = board.scale(1);
|
||||
const result = board.scale(1);
|
||||
console.log('result =', result);
|
||||
board.draw();
|
||||
|
||||
console.log('scrollLineWidth = ', board.getScrollLineWidth())
|
||||
})()
|
||||
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import event from '../../../scripts/browser/event.js';
|
||||
(function() {
|
||||
const Board = window.iDrawBoard;
|
||||
const mount = document.querySelector('#mount-2');
|
||||
const board = new Board(mount, opts);
|
||||
drawBoard(board)
|
||||
board.draw();
|
||||
|
||||
setTimeout(() => {
|
||||
event.wheelX(100, {
|
||||
clientX: 350,
|
||||
clientY: 100,
|
||||
});
|
||||
event.wheelY(125, {
|
||||
clientX: 350,
|
||||
clientY: 100,
|
||||
});
|
||||
}, 500);
|
||||
})()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#mount canvas {
|
||||
/* border-right: 1px solid #aaaaaa40; */
|
||||
border: 1px solid #aaaaaa2a;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa2a 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa2a 1px, transparent 0),
|
||||
linear-gradient(#aaaaaa4a 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa4a 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard .row {
|
||||
/* margin-top: 20px; */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dashboard .row .col {
|
||||
display: flex;
|
||||
/* flex: 1;
|
||||
width: 100%; */
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.transform {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.transform input {
|
||||
width: 100px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.elem-item {
|
||||
height: 32px;
|
||||
min-width: 300px;
|
||||
border: 1px solid #999999;
|
||||
border-bottom: none;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.elem-item:last-child {
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
||||
.elem-item-name {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.elem-item-btn {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
min-width: 40px;
|
||||
padding: 0 6px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-top: 2px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.elem-item-btn:hover {
|
||||
color: #4183c4;
|
||||
border-color: #4183c4;
|
||||
}
|
||||
|
||||
#mount {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "circle-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "circle",
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderWidth: 2,
|
||||
borderColor: '#999999',
|
||||
|
||||
shadowColor: '#03a9f4',
|
||||
// shadowColor: '#000000',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "circle-002",
|
||||
x: 100,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
type: "circle",
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderWidth: 2,
|
||||
borderColor: '#666666',
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "circle-003",
|
||||
x: 200,
|
||||
y: 200,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "circle",
|
||||
angle: 0,
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderWidth: 2,
|
||||
borderColor: '#666666'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "circle-004",
|
||||
x: 220,
|
||||
y: 80,
|
||||
w: 300,
|
||||
h: 300,
|
||||
type: "circle",
|
||||
desc: {
|
||||
// bgColor: "#f0f0f0",
|
||||
bgColor: "#000000",
|
||||
borderWidth: 10,
|
||||
borderColor: '#666666',
|
||||
|
||||
shadowColor: '#03a9f4',
|
||||
// shadowColor: '#000000',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "html-001",
|
||||
x: 40,
|
||||
y: 40,
|
||||
w: 200,
|
||||
h: 70,
|
||||
type: "html",
|
||||
angle: 0,
|
||||
desc: {
|
||||
html: `
|
||||
<div style="font-size: 20px;color: #666666">
|
||||
<span>Hello World!</span>
|
||||
</div>
|
||||
<script>
|
||||
window.alert('Hello World')
|
||||
console.log('Hello World')
|
||||
</script>
|
||||
<div style="font-size: 30px; font-weight: bold; color: #666666">
|
||||
<span>Hello World!</span>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: "html-001",
|
||||
x: 200,
|
||||
y: 120,
|
||||
w: 240,
|
||||
h: 240,
|
||||
type: "html",
|
||||
angle: 0,
|
||||
desc: {
|
||||
width: 120,
|
||||
height: 80,
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "image-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "image",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
// angle: 30,
|
||||
// angle: 0,
|
||||
desc: {
|
||||
src: "./../images/computer.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-002",
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../images/chart.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-003",
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "image",
|
||||
angle: 45,
|
||||
desc: {
|
||||
src: "./../images/phone.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-004",
|
||||
x: 400 - 10,
|
||||
y: 300 - 10,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../images/building-001.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-004",
|
||||
x: 400 - 40,
|
||||
y: 300 - 40,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../images/building-002.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-004",
|
||||
x: 400 - 100,
|
||||
y: 300 - 100,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../images/building-003.png",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import dataRect from "./rect.js";
|
||||
import dataImage from "./image.js";
|
||||
import dataSVG from "./svg.js";
|
||||
import dataText from "./text.js";
|
||||
import dataCircle from "./circle.js";
|
||||
|
||||
const url = new URLSearchParams(window.location.search);
|
||||
|
||||
const dataMap = {
|
||||
rect: dataRect,
|
||||
image: dataImage,
|
||||
svg: dataSVG,
|
||||
text: dataText,
|
||||
circle: dataCircle,
|
||||
};
|
||||
|
||||
export function getData() {
|
||||
return dataMap[getPageName()] || dataMap[url.get("data")] || dataMap["rect"];
|
||||
}
|
||||
|
||||
function getPageName() {
|
||||
// const pathname = window.location.pathname || '';
|
||||
// const reg = /(?<pageName>[\w+]{1,})\.html$/;
|
||||
// const page = reg.exec(pathname)?.groups?.pageName || '';
|
||||
// return page;
|
||||
|
||||
const pathname = window.location.pathname || "";
|
||||
const list = pathname.split("/");
|
||||
let pageName = list.pop() || "";
|
||||
pageName = pageName.replace(/\.html$/gi, "");
|
||||
return pageName;
|
||||
|
||||
// return getQueryString('data') || 'rect';
|
||||
}
|
||||
|
||||
// function getQueryString(name) {
|
||||
// let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// let r = window.location.search.substr(1).match(reg);
|
||||
// if (r != null) {
|
||||
// return decodeURIComponent(r[2]);
|
||||
// };
|
||||
// return null;
|
||||
// }
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#f0f0f0',
|
||||
elements: [
|
||||
{
|
||||
name: "rect-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rect-002",
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
type: "rect",
|
||||
operation: {
|
||||
lock: true,
|
||||
},
|
||||
desc: {
|
||||
bgColor: "#cccccc",
|
||||
borderRadius: 60,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rect-003",
|
||||
x: 250,
|
||||
y: 150,
|
||||
w: 150,
|
||||
h: 20,
|
||||
type: "rect",
|
||||
angle: 45,
|
||||
desc: {
|
||||
bgColor: "#c0c0c0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rect-004",
|
||||
x: 400 - 50,
|
||||
y: 300 - 50,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#e0e0e0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
operation: {
|
||||
// disbaleScale: true,
|
||||
// disbaleRotate: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "svg-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "svg",
|
||||
// angle: 30,
|
||||
// angle: 0,
|
||||
desc: {
|
||||
svg: `<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>`,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "svg-002",
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524813445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8606" width="200" height="200"><path d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185z m174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312z m276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z" p-id="8607" fill="#2aa515"></path></svg>',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "svg-003",
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 200,
|
||||
type: "svg",
|
||||
angle: 80,
|
||||
desc: {
|
||||
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "svg-004",
|
||||
x: 400 - 10,
|
||||
y: 300 - 100,
|
||||
w: 200,
|
||||
h: 200,
|
||||
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 default data;
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "text-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: "#ffffff",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: '',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: "#03a9f4",
|
||||
bgColor: '#f0f0f0',
|
||||
strokeColor: '#2196f3',
|
||||
strokeWidth: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "text-002",
|
||||
x: 120,
|
||||
y: 120,
|
||||
w: 100,
|
||||
h: 60,
|
||||
// angle: 30,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 40,
|
||||
fontWeight: 'blod',
|
||||
text: "Hello Text",
|
||||
// color: "#999999",
|
||||
color: "#ffffff",
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#03a9f4",
|
||||
|
||||
textShadowColor: '#000000',
|
||||
textShadowOffsetX: 2,
|
||||
textShadowOffsetY: 2,
|
||||
textShadowBlur: 2,
|
||||
|
||||
shadowColor: '#000000',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "text-003",
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "text",
|
||||
operation: {
|
||||
invisible: true,
|
||||
lock: true,
|
||||
},
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: "#333333",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: "",
|
||||
textAlign: "right",
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: "#03a9f4",
|
||||
bgColor: '#f0f0f0',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "text-004",
|
||||
x: 300,
|
||||
y: 240,
|
||||
w: 290,
|
||||
h: 120,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: "#333333",
|
||||
text: "Life is like an ocean.\r\nOnly those with strong \nwill can reach the other shore.",
|
||||
fontFamily: "",
|
||||
textAlign: "right",
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: "#03a9f4",
|
||||
bgColor: '#f0f0f0',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
|
||||
const dom = document.querySelector('#elem-list');
|
||||
|
||||
let hasInited = false;
|
||||
|
||||
export function doElemens(core) {
|
||||
if (hasInited === true) return;
|
||||
if (!dom) return;
|
||||
renderElemens(core);
|
||||
listenElements(core);
|
||||
}
|
||||
|
||||
function renderElemens(core) {
|
||||
const data = core.getData();
|
||||
const elems = data.elements;
|
||||
const items = [];
|
||||
for (let i = elems.length - 1; i >= 0; i --) {
|
||||
const ele = elems[i];
|
||||
items.push(`
|
||||
<div class="elem-item">
|
||||
<span class="elem-item-name" data-elem-name="${ele.uuid || ''}">${ele.name || 'Unnamed'}</span>
|
||||
<span class="elem-item-btn ${i === elems.length - 1 ? 'btn-hidden' : ''}" data-elem-btn-up="${ele.uuid || ''}">Up</span>
|
||||
<span class="elem-item-btn ${i === 0 ? 'btn-hidden' : '' }" data-elem-btn-down="${ele.uuid || ''}">Down</span>
|
||||
<span class="elem-item-btn" data-elem-btn-lock="${ele.uuid || ''}">Lock</span>
|
||||
<span class="elem-item-btn" data-elem-btn-invisible="${ele.uuid || ''}">Invisible</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
dom.innerHTML = items.join('');
|
||||
}
|
||||
|
||||
function listenElements(core) {
|
||||
|
||||
dom.addEventListener('click', (e) => {
|
||||
if (!e.path[0]) {
|
||||
return;
|
||||
}
|
||||
const el = e.path[0];
|
||||
if (el.hasAttribute('data-elem-name')) {
|
||||
const uuid = el.getAttribute('data-elem-name');
|
||||
core.selectElement(uuid);
|
||||
} else if (el.hasAttribute('data-elem-btn-up')) {
|
||||
const uuid = el.getAttribute('data-elem-btn-up');
|
||||
core.moveUpElement(uuid);
|
||||
renderElemens(core);
|
||||
} else if (el.hasAttribute('data-elem-btn-down')) {
|
||||
const uuid = el.getAttribute('data-elem-btn-down');
|
||||
core.moveDownElement(uuid);
|
||||
renderElemens(core);
|
||||
} else if (el.hasAttribute('data-elem-btn-lock')) {
|
||||
const uuid = el.getAttribute('data-elem-btn-lock');
|
||||
const elem = core.getElement(uuid);
|
||||
if (!elem.operation) {
|
||||
elem.operation = {};
|
||||
}
|
||||
elem.operation.lock = !elem.operation.lock;
|
||||
core.updateElement(elem);
|
||||
renderElemens(core);
|
||||
} else if (el.hasAttribute('data-elem-btn-invisible')) {
|
||||
const uuid = el.getAttribute('data-elem-btn-invisible');
|
||||
const elem = core.getElement(uuid);
|
||||
if (!elem.operation) {
|
||||
elem.operation = {};
|
||||
}
|
||||
elem.operation.invisible = !elem.operation.invisible;
|
||||
core.updateElement(elem);
|
||||
renderElemens(core);
|
||||
}
|
||||
}, true);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
import { getData } from './data/index.js';
|
||||
import { doScale } from './scale.js';
|
||||
import { doScroll } from './scroll.js';
|
||||
import { doElemens } from './element.js';
|
||||
|
||||
const { Core } = window.iDrawCore;
|
||||
const data = getData();
|
||||
const mount = document.querySelector('#mount');
|
||||
|
||||
const defaultConf = {
|
||||
// scale: 1.5,
|
||||
// scrollLeft: 100,
|
||||
// scrollTop: 50,
|
||||
|
||||
scale: 0,
|
||||
scrollLeft: 0,
|
||||
scrollTop: 0,
|
||||
};
|
||||
const core = new Core(mount, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4,
|
||||
// onlyRender: true,
|
||||
}, {
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
lineWidth: 16,
|
||||
color: '#9c27b0',
|
||||
},
|
||||
elementWrapper: {
|
||||
lockColor: '#009688',
|
||||
color: '#009688',
|
||||
controllerSize: 6,
|
||||
lineWidth: 1,
|
||||
// lineDash: [12, 12],
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// initEvent();
|
||||
|
||||
core.setData(data);
|
||||
|
||||
doScale(core, defaultConf.scale);
|
||||
doScroll(core, defaultConf);
|
||||
doElemens(core);
|
||||
|
||||
|
||||
|
||||
function initEvent() {
|
||||
core.on('error', (data) => {
|
||||
console.log('error: ', data);
|
||||
});
|
||||
core.on('changeData', (data) => {
|
||||
console.log('changeData: ', data);
|
||||
});
|
||||
core.on('changeScreen', (data) => {
|
||||
console.log('changeScreen: ', data);
|
||||
});
|
||||
core.on('screenSelectElement', (data) => {
|
||||
console.log('screenSelectElement: ', data);
|
||||
});
|
||||
core.on('screenClickElement', (data) => {
|
||||
console.log('screenClickElement: ', data);
|
||||
})
|
||||
core.on('mouseOverElement', (data) => {
|
||||
console.log('mouseOverElement: ', data);
|
||||
});
|
||||
core.on('mouseLeaveElement', (data) => {
|
||||
console.log('mouseLeaveElement: ', data);
|
||||
});
|
||||
|
||||
core.on('screenMoveElementStart', (data) => {
|
||||
console.log('screenMoveElementStart: ', data);
|
||||
});
|
||||
core.on('screenMoveElementEnd', (data) => {
|
||||
console.log('screenMoveElementEnd: ', data);
|
||||
});
|
||||
core.on('screenChangeElement', (data) => {
|
||||
console.log('screenChangeElement: ', data);
|
||||
});
|
||||
core.on('screenDoubleClickElement', (p) => {
|
||||
console.log('screenDoubleClickElement ===', p)
|
||||
})
|
||||
core.on('drawFrame', () => {
|
||||
console.log(' === drawFrame === ')
|
||||
})
|
||||
core.on('drawFrameComplete', () => {
|
||||
console.log(' === drawFrameComplete === ')
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
const input = document.querySelector('#scale');
|
||||
let hasInited = false;
|
||||
|
||||
export function doScale(core, scale) {
|
||||
if (hasInited === true) return;
|
||||
if (!input) return;
|
||||
if (scale > 0) {
|
||||
input.value = scale;
|
||||
core.scale(scale);
|
||||
}
|
||||
input.addEventListener('change', () => {
|
||||
const val = input.value * 1;
|
||||
if (val > 0) {
|
||||
core.scale(val);
|
||||
console.log(core.getScreenTransform());
|
||||
}
|
||||
});
|
||||
hasInited = true;
|
||||
}
|
||||
|
||||
export function getScale() {
|
||||
let val = 1;
|
||||
if (input.value * 1 > 0) {
|
||||
val = input.value * 1;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
const inputX = document.querySelector('#scrollLeft');
|
||||
const inputY = document.querySelector('#scrollTop');
|
||||
let hasInited = false;
|
||||
|
||||
export function doScroll(core, conf = {}) {
|
||||
if (hasInited === true) return;
|
||||
if (!(inputY && inputX)) return;
|
||||
|
||||
if (conf.scrollLeft >= 0) {
|
||||
inputX.value = conf.scrollLeft;
|
||||
core.scrollLeft(conf.scrollLeft);
|
||||
}
|
||||
|
||||
if (conf.scrollTop >= 0) {
|
||||
inputY.value = conf.scrollTop;
|
||||
core.scrollTop(conf.scrollTop);
|
||||
}
|
||||
|
||||
inputX.addEventListener('change', () => {
|
||||
const val = inputX.value * 1;
|
||||
if (val >= 0 || val < 0) {
|
||||
core.scrollLeft(val);
|
||||
console.log(core.getScreenTransform());
|
||||
}
|
||||
});
|
||||
inputY.addEventListener('change', () => {
|
||||
const val = inputY.value * 1;
|
||||
if (val >= 0 || val < 0) {
|
||||
core.scrollTop(val);
|
||||
console.log(core.getScreenTransform());
|
||||
}
|
||||
});
|
||||
hasInited = true;
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="row">
|
||||
<div class="col center">
|
||||
<div id="mount"></div>
|
||||
</div>
|
||||
<div class="col center">
|
||||
<div class="elem-list" id="elem-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col center">
|
||||
<div class="transform">
|
||||
<span>scale:</span>
|
||||
<input id="scale" type="number" value="1"/>
|
||||
<span>scrollLeft:</span>
|
||||
<input id="scrollLeft" type="number" value="0"/>
|
||||
<span>scrollTop:</span>
|
||||
<input id="scrollTop" type="number" value="0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../../../packages/core/dist/index.global.js"></script>
|
||||
<script type="module" src="./lib/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
.preview {
|
||||
margin-top: 50px;
|
||||
margin-left: 100px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="./main.html"
|
||||
frameBorder="0" class="preview" width="500", height="500"></iframe>
|
||||
|
||||
<!-- <iframe src="http://127.0.0.1:8081/packages/board/examples/features/main.html"
|
||||
frameBorder="0" class="preview"
|
||||
width="600", height="500"></iframe> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
.preview {
|
||||
margin-top: 50px;
|
||||
margin-left: 100px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="./parent.html"
|
||||
frameBorder="0" class="preview" width="700", height="600"></iframe>
|
||||
|
||||
<!-- <iframe src="http://127.0.0.1:8081/packages/board/examples/features/main.html"
|
||||
frameBorder="0" class="preview"
|
||||
width="600", height="500"></iframe> -->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
|
|
@ -1,552 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 242;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="idraw-opts">
|
||||
<div class="title">Options Common</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-opts-onlyRender">
|
||||
<div class="title">Options onlyRender</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-config">
|
||||
<div class="title">Config</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-setData">
|
||||
<div class="title">idraw.setData</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-resetSize">
|
||||
<div class="title">idraw.resetSize</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-selectElement">
|
||||
<div class="title">idraw.selectElement</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-selectElementByIndex">
|
||||
<div class="title">idraw.selectElementByIndex</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-updateElement">
|
||||
<div class="title">idraw.updateElement</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-addElement">
|
||||
<div class="title">idraw.addElement</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-deleteElement">
|
||||
<div class="title">idraw.deleteElement</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-moveUpElement">
|
||||
<div class="title">idraw.moveUpElement</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-moveDownElement">
|
||||
<div class="title">idraw.moveDownElement</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-scale">
|
||||
<div class="title">idraw.scale</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-scrollLeft">
|
||||
<div class="title">idraw.scrollLeft</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-scrollTop">
|
||||
<div class="title">idraw.scrollTop</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-clearOperation">
|
||||
<div class="title">idraw.clearOperation</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-insertElementBefore">
|
||||
<div class="title">idraw.insertElementBefore</div>
|
||||
</div>
|
||||
<div class="box" id="idraw-api-insertElementAfter">
|
||||
<div class="title">idraw.insertElementAfter</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/core/dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import event from '../../../scripts/browser/event.js';
|
||||
import { getData } from './data.js';
|
||||
window.event = event;
|
||||
window.getData = getData;
|
||||
</script>
|
||||
<script>
|
||||
const Core = window.iDrawCore;
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
}
|
||||
var config = {
|
||||
elementWrapper: {
|
||||
controllerSize: 4,
|
||||
},
|
||||
};
|
||||
var elemText1 = {
|
||||
name: "text-001",
|
||||
x: 20,
|
||||
y: 40,
|
||||
w: 240,
|
||||
h: 80,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#3f51b5",
|
||||
text: "Life is like an ocean.\r\nOnly those with strong \nwill can reach \nthe other shore",
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
};
|
||||
var elemText2 = {
|
||||
name: "text-002",
|
||||
x: 20,
|
||||
y: 40,
|
||||
w: 200,
|
||||
h: 60,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#333333",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: 'monospace',
|
||||
borderRadius: 10,
|
||||
borderWidth: 3,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script type="module">
|
||||
// Options Common
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-opts');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement(elemText1);
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 100, y: 100 })
|
||||
}, 20);
|
||||
})();
|
||||
</script>
|
||||
<script type="module">
|
||||
// Options onlyRender
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-opts-onlyRender');
|
||||
const core = new Core(mount, Object.assign({}, opts, {
|
||||
onlyRender: true,
|
||||
}), config);
|
||||
core.addElement(elemText1);
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 400, y: 100 })
|
||||
}, 20);
|
||||
})();
|
||||
</script>
|
||||
<script type="module">
|
||||
// Config
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-config');
|
||||
const core = new Core(mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
lineWidth: 4,
|
||||
color: '#3f51b5',
|
||||
},
|
||||
elementWrapper: {
|
||||
color: '#e91e63',
|
||||
controllerSize: 4,
|
||||
lineWidth: 1,
|
||||
lineDash: [12, 12],
|
||||
},
|
||||
}
|
||||
);
|
||||
core.addElement(elemText2);
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 700, y: 100 })
|
||||
}, 20);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-setData
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-setData');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
// setTimeout(() => {
|
||||
// event.mouseDown({ x: 100, y: 400 })
|
||||
// }, 20);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-resetSize
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-resetSize');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
setTimeout(() => {
|
||||
core.resetSize({
|
||||
width: 280,
|
||||
height: 160,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
})
|
||||
}, 20)
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-selectElement
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-selectElement');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.selectElement(core.getData().elements[2].uuid);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-selectElementByIndex
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-selectElementByIndex');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
// core.selectElementByIndex(1);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-updateElement
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-updateElement');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
const elem = core.getData().elements[1];
|
||||
elem.x = 60;
|
||||
elem.y = 60;
|
||||
core.updateElement(elem);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-addElement
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-addElement');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.addElement({
|
||||
x: 160,
|
||||
y: 120,
|
||||
w: 100,
|
||||
h: 60,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#8bc34a",
|
||||
borderWidth: 4,
|
||||
borderRadius: 0,
|
||||
borderColor: "#009688",
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-deleteElement
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-deleteElement');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.deleteElement(core.getData().elements[2].uuid);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-moveUpElementidraw
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-moveUpElement');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.moveUpElement(core.getData().elements[0].uuid);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-moveDownElement
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-moveDownElement');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.moveDownElement(core.getData().elements[1].uuid);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-scale
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-scale');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.scale(2);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-scrollLeft
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-scrollLeft');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.scrollLeft(100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-scrollTop
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-scrollTop');
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
contextWidth: 500,
|
||||
contextHeight: 400,
|
||||
}),
|
||||
{
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
core.setData(data);
|
||||
core.scrollTop(80);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-clearOperation
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-clearOperation');
|
||||
const data = getData();
|
||||
const core = new Core(mount, opts, config);
|
||||
core.setData(data);
|
||||
core.selectElementByIndex(1);
|
||||
core.clearOperation();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-insertElementBefore
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-insertElementBefore');
|
||||
const data = getData();
|
||||
const core = new Core(mount, opts, config);
|
||||
core.setData(data);
|
||||
|
||||
const _data = core.getData();
|
||||
const elem = _data.elements[0];
|
||||
elem.x += 20;
|
||||
elem.y += 20;
|
||||
core.insertElementBefore(elem, _data.elements[1].uuid);
|
||||
core.clearOperation();
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<script type="module">
|
||||
// idraw-api-insertElementAfter
|
||||
(function() {
|
||||
const mount = document.querySelector('#idraw-api-insertElementAfter');
|
||||
const data = getData();
|
||||
const core = new Core(mount, opts, config);
|
||||
core.setData(data);
|
||||
|
||||
const _data = core.getData();
|
||||
const elem = _data.elements[0];
|
||||
elem.x += 20;
|
||||
elem.y += 20;
|
||||
core.insertElementAfter(elem, _data.elements[1].uuid);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,63 +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",
|
||||
},
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,514 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">Text</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">Rect</div>
|
||||
</div>
|
||||
<div class="box" id="mount-3">
|
||||
<div class="title">Circle</div>
|
||||
</div>
|
||||
<div class="box" id="mount-4">
|
||||
<div class="title">Image</div>
|
||||
</div>
|
||||
<div class="box" id="mount-5">
|
||||
<div class="title">SVG</div>
|
||||
</div>
|
||||
<div class="box" id="mount-6">
|
||||
<div class="title">HTML</div>
|
||||
</div>
|
||||
<div class="box" id="mount-7">
|
||||
<div class="title">Element: click selected</div>
|
||||
</div>
|
||||
<div class="box" id="mount-8">
|
||||
<div class="title">Element: lock</div>
|
||||
</div>
|
||||
<div class="box" id="mount-9">
|
||||
<div class="title">Element: invisible</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/core/dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import event from '../../../scripts/browser/event.js';
|
||||
import { getData } from './data.js';
|
||||
window.event = event;
|
||||
window.getData = getData;
|
||||
</script>
|
||||
<script>
|
||||
const Core = window.iDrawCore;
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
}
|
||||
var config = {
|
||||
elementWrapper: {
|
||||
controllerSize: 4,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "text-001",
|
||||
x: 20,
|
||||
y: 20,
|
||||
w: 200,
|
||||
h: 60,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#3f51b5",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
})
|
||||
core.addElement({
|
||||
name: "text-001",
|
||||
x: 40,
|
||||
y: 100,
|
||||
w: 240,
|
||||
h: 80,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#3f51b5",
|
||||
text: "Life is like an ocean.\r\nOnly those with strong \nwill can \r\nreach the other shore.",
|
||||
fontFamily: 'monospace',
|
||||
textAlign: 'right',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-2');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "rect-001",
|
||||
x: 20,
|
||||
y: 20,
|
||||
w: 200,
|
||||
h: 60,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
})
|
||||
core.addElement({
|
||||
name: "rect-002",
|
||||
x: 50,
|
||||
y: 100,
|
||||
w: 200,
|
||||
h: 80,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-3');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "circle-001",
|
||||
x: 20,
|
||||
y: 20,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "circle",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
})
|
||||
core.addElement({
|
||||
name: "circle-002",
|
||||
x: 50,
|
||||
y: 100,
|
||||
w: 200,
|
||||
h: 80,
|
||||
type: "circle",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-4');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "image-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 200,
|
||||
h: 120,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: './../images/building-001.png'
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "image-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: './../images/building-002.png'
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-5');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "svg-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "svg-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-6');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "html-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 120,
|
||||
h: 60,
|
||||
type: "html",
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "html-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 60,
|
||||
type: "html",
|
||||
desc: {
|
||||
width: 120,
|
||||
height: 80,
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-7');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "rect-001",
|
||||
x: 20,
|
||||
y: 20,
|
||||
w: 200,
|
||||
h: 60,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
})
|
||||
core.addElement({
|
||||
name: "rect-002",
|
||||
x: 50,
|
||||
y: 100,
|
||||
w: 200,
|
||||
h: 80,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
});
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 100, y: 560 })
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-8');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "rect-001",
|
||||
x: 20,
|
||||
y: 20,
|
||||
w: 200,
|
||||
h: 60,
|
||||
operation: {
|
||||
lock: true,
|
||||
},
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
})
|
||||
core.addElement({
|
||||
name: "rect-002",
|
||||
x: 50,
|
||||
y: 100,
|
||||
w: 200,
|
||||
h: 80,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
});
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 340, y: 560 })
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-9');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "rect-001",
|
||||
x: 20,
|
||||
y: 20,
|
||||
w: 200,
|
||||
h: 60,
|
||||
type: "rect",
|
||||
operation: {
|
||||
invisible: true,
|
||||
},
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
})
|
||||
core.addElement({
|
||||
name: "rect-002",
|
||||
x: 50,
|
||||
y: 100,
|
||||
w: 200,
|
||||
h: 80,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#c6e0f5",
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
},
|
||||
});
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 340, y: 560 })
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 242;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="double-click-event">
|
||||
<div class="title">doubleClickElement</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/core/dist/index.global.js"></script>
|
||||
<script>
|
||||
const Core = window.iDrawCore;
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
}
|
||||
var config = {
|
||||
elementWrapper: {
|
||||
controllerSize: 4,
|
||||
},
|
||||
};
|
||||
var elemText1 = {
|
||||
name: "text-001",
|
||||
x: 20,
|
||||
y: 40,
|
||||
w: 240,
|
||||
h: 80,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#3f51b5",
|
||||
text: "Life is like an ocean.\r\nOnly those with strong \nwill can reach \nthe other shore",
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
};
|
||||
var elemText2 = {
|
||||
name: "text-002",
|
||||
x: 20,
|
||||
y: 40,
|
||||
w: 200,
|
||||
h: 60,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#333333",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: 'monospace',
|
||||
borderRadius: 10,
|
||||
borderWidth: 3,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script type="module">
|
||||
import event from './../../../../scripts/browser/event.js';
|
||||
import { getData } from './data.js';
|
||||
(function() {
|
||||
const mount = document.querySelector('#double-click-event');
|
||||
const core = new Core(mount, opts, config);
|
||||
const data = getData();
|
||||
core.on('screenDoubleClickElement', (p) => {
|
||||
console.log('screenDoubleClickElement ===', p)
|
||||
})
|
||||
core.setData(data);
|
||||
setTimeout(() => {
|
||||
event.click({ x: 100, y: 100 })
|
||||
event.click({ x: 100, y: 100 })
|
||||
}, 100);
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,524 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 910px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 300;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-image">
|
||||
<div class="title">Image</div>
|
||||
</div>
|
||||
<div class="box" id="mount-svg">
|
||||
<div class="title">SVG</div>
|
||||
</div>
|
||||
<div class="box" id="mount-html">
|
||||
<div class="title">HTML</div>
|
||||
</div>
|
||||
|
||||
<div class="box" id="mount-image-update">
|
||||
<div class="title">Image: update</div>
|
||||
</div>
|
||||
<div class="box" id="mount-svg-update">
|
||||
<div class="title">SVG: update</div>
|
||||
</div>
|
||||
<div class="box" id="mount-html-update">
|
||||
<div class="title">HTML: update</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/core/dist/index.global.js"></script>
|
||||
<script>
|
||||
const Core = window.iDrawCore;
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
}
|
||||
var config = {
|
||||
elementWrapper: {
|
||||
controllerSize: 4,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-image');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "image-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 200,
|
||||
h: 120,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: './../images/building-001.png'
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "image-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: './../images/building-002.png'
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
const temp1 = data.elements[0].desc.src + '?v=123';
|
||||
const temp2 = data.elements[1].desc.src + '?v=123'
|
||||
data.elements[0].desc.src = temp2;
|
||||
data.elements[1].desc.src = temp1;
|
||||
core.setData(data);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-svg');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "svg-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "svg-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
const temp1 = data.elements[0].desc.svg;
|
||||
const temp2 = data.elements[1].desc.svg;
|
||||
data.elements[0].desc.svg = temp2;
|
||||
data.elements[1].desc.svg = temp1;
|
||||
core.setData(data);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-html');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "html-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 120,
|
||||
h: 60,
|
||||
type: "html",
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button 001</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "html-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 60,
|
||||
type: "html",
|
||||
desc: {
|
||||
width: 120,
|
||||
height: 80,
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button 002</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
const temp1 = data.elements[0].desc.html;
|
||||
const temp2 = data.elements[1].desc.html;
|
||||
data.elements[0].desc.html = temp2;
|
||||
data.elements[1].desc.html = temp1;
|
||||
core.setData(data);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
data.elements[0].desc.height = 50;
|
||||
data.elements[1].desc.height = 100;
|
||||
core.setData(data);
|
||||
}, 100);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-image-update');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "image-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 200,
|
||||
h: 120,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: './../images/building-001.png'
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "image-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: './../images/building-002.png'
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
console.log('data ====', data);
|
||||
const temp1 = data.elements[0].desc.src + '?v=456';
|
||||
const temp2 = data.elements[1].desc.src + '?v=456'
|
||||
data.elements[0].desc.src = temp2;
|
||||
data.elements[1].desc.src = temp1;
|
||||
|
||||
core.updateElement(data.elements[0]);
|
||||
core.updateElement(data.elements[1]);
|
||||
|
||||
// setTimeout(() => {
|
||||
// core.updateElement(data.elements[1]);
|
||||
// }, 200);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-svg-update');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "svg-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "svg-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 120,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
const temp1 = data.elements[0].desc.svg;
|
||||
const temp2 = data.elements[1].desc.svg;
|
||||
data.elements[0].desc.svg = temp2;
|
||||
data.elements[1].desc.svg = temp1;
|
||||
|
||||
core.updateElement(data.elements[1]);
|
||||
core.updateElement(data.elements[0]);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-html-update');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement({
|
||||
name: "html-001",
|
||||
x: 4,
|
||||
y: 4,
|
||||
w: 120,
|
||||
h: 60,
|
||||
type: "html",
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button 001</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
});
|
||||
core.addElement({
|
||||
name: "html-002",
|
||||
x: 120,
|
||||
y: 80,
|
||||
w: 120,
|
||||
h: 60,
|
||||
type: "html",
|
||||
desc: {
|
||||
width: 120,
|
||||
height: 80,
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button 002</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
const temp1 = data.elements[0].desc.html;
|
||||
const temp2 = data.elements[1].desc.html;
|
||||
data.elements[0].desc.html = temp2;
|
||||
data.elements[1].desc.html = temp1;
|
||||
core.setData(data);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = core.getData();
|
||||
data.elements[0].desc.height = 50;
|
||||
data.elements[1].desc.height = 100;
|
||||
core.updateElement(data.elements[0]);
|
||||
core.updateElement(data.elements[1]);
|
||||
}, 100);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#mount canvas {
|
||||
/* border-right: 1px solid #aaaaaa40; */
|
||||
border: 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;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard .row {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dashboard .row .col {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.transform {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.transform input {
|
||||
width: 100px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.elem-item {
|
||||
height: 32px;
|
||||
width: 200px;
|
||||
border: 1px solid #999999;
|
||||
border-bottom: none;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.elem-item:last-child {
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
||||
.elem-item-name {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.elem-item-btn {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
width: 40px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-top: 2px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.elem-item-btn:hover {
|
||||
color: #4183c4;
|
||||
border-color: #4183c4;
|
||||
}
|
||||
|
||||
.elem-menu {
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.elem-menu-btn {
|
||||
height: 32px;
|
||||
width: 200px;
|
||||
border: 1px solid #999999;
|
||||
border-bottom: none;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.elem-menu-btn:last-child {
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
|
||||
const undo = document.querySelector('#elem-undo');
|
||||
const redo = document.querySelector('#elem-redo');
|
||||
let hasInited = false;
|
||||
|
||||
export function doAction(idraw) {
|
||||
if (hasInited === true) return;
|
||||
if (undo) {
|
||||
undo.addEventListener('click', () => {
|
||||
const result = idraw.undo();
|
||||
console.log('undo: ', result);
|
||||
})
|
||||
}
|
||||
|
||||
if (redo) {
|
||||
redo.addEventListener('click', () => {
|
||||
const result = idraw.redo();
|
||||
console.log('redo: ', result);
|
||||
})
|
||||
}
|
||||
|
||||
hasInited = true;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
export default {
|
||||
elements: [
|
||||
{
|
||||
name: 'rect-001',
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
bgColor: '#f0f0f0',
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: '#bd0b64',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'text-002',
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
type: 'text',
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
text: 'Hello Text',
|
||||
color: '#666666',
|
||||
borderRadius: 60,
|
||||
borderWidth: 2,
|
||||
borderColor: '#bd0b64',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'image-003',
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: 'image',
|
||||
desc: {
|
||||
src: './../../../core/examples/images/computer.png',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'svg-004',
|
||||
x: 400 - 10,
|
||||
y: 300 - 100,
|
||||
w: 200,
|
||||
h: 200,
|
||||
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>',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import data from './data.js';
|
||||
import { doAction } from './action.js'
|
||||
|
||||
const iDraw = window.iDraw;
|
||||
const mount = document.querySelector('#mount');
|
||||
|
||||
const defaultConf = {
|
||||
scale: 2,
|
||||
scrollX: 0,
|
||||
scrollY: 0,
|
||||
}
|
||||
const idraw = new iDraw(mount, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4,
|
||||
disableKeyboard: false,
|
||||
});
|
||||
|
||||
|
||||
// idraw.on('error', (data) => {
|
||||
// console.log('error: ', data);
|
||||
// });
|
||||
// idraw.on('changeData', (data) => {
|
||||
// console.log('changeData: ', data);
|
||||
// });
|
||||
// idraw.on('changeScreen', (data) => {
|
||||
// console.log('changeScreen: ', data);
|
||||
// });
|
||||
// idraw.on('screenSelectElement', (data) => {
|
||||
// console.log('screenSelectElement: ', data);
|
||||
// });
|
||||
// idraw.on('screenMoveElementStart', (data) => {
|
||||
// console.log('screenMoveElementStart: ', data);
|
||||
// });
|
||||
// idraw.on('screenMoveElementEnd', (data) => {
|
||||
// console.log('screenMoveElementEnd: ', data);
|
||||
// });
|
||||
// idraw.on('screenChangeElement', (data) => {
|
||||
// console.log('screenChangeElement: ', data);
|
||||
// });
|
||||
|
||||
|
||||
idraw.setData(data, {
|
||||
triggerChangeEvent: true,
|
||||
});
|
||||
idraw.scale(2);
|
||||
doAction(idraw);
|
||||
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="row">
|
||||
<div class="col center">
|
||||
<div id="mount"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="elem-list" id="elem-list"></div>
|
||||
<div class="elem-menu">
|
||||
<div class="elem-menu-btn" id="elem-undo">
|
||||
Undo
|
||||
</div>
|
||||
<div class="elem-menu-btn" id="elem-redo">
|
||||
Redo
|
||||
</div>
|
||||
<div class="elem-menu-btn" id="btn-download">
|
||||
Download
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col center">
|
||||
<div class="transform">
|
||||
<span>scale:</span>
|
||||
<input id="scale" type="number" value="1"/>
|
||||
<span>scrollX:</span>
|
||||
<input id="scrollX" type="number" value="0"/>
|
||||
<span>scrollY:</span>
|
||||
<input id="scrollY" type="number" value="0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../../../packages/idraw/dist/index.global.js"></script>
|
||||
<script type="module" src="./lib/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { iDraw } from 'idraw';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
function Demo() {
|
||||
const ref = useRef(null);
|
||||
useEffect(() => {
|
||||
const idraw = new iDraw(ref.current, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 1,
|
||||
});
|
||||
idraw.addElement({
|
||||
name: "rect-001",
|
||||
x: 140,
|
||||
y: 120,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
borderColor: "#ff6032",
|
||||
},
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={ref}></div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
<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; }
|
||||
.box 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;
|
||||
}
|
||||
.list {
|
||||
width: 920px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.box {
|
||||
width: 302;
|
||||
min-height: 220;
|
||||
float: left;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="list">
|
||||
<div class="box" id="mount-1">
|
||||
<div class="title">setData and scale(2)</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">exportDataURL('image/png')</div>
|
||||
</div>
|
||||
<div class="box" id="mount-3">
|
||||
<div class="title">exportDataURL('image/jpeg')</div>
|
||||
</div>
|
||||
<div class="box" id="mount-4">
|
||||
<div class="title">toDataURL('image/png')</div>
|
||||
</div>
|
||||
<div class="box" id="mount-5">
|
||||
<div class="title">toDataURL('image/jpeg')</div>
|
||||
</div>
|
||||
<div class="box" id="mount-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/idraw/dist/index.global.js"></script>
|
||||
<script>
|
||||
const testData = {
|
||||
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: './../../../core/examples/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>',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var iDraw = window.iDraw;
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
}
|
||||
var config = {
|
||||
elementWrapper: {
|
||||
controllerSize: 4,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const idraw = new iDraw(mount, opts, config);
|
||||
idraw.setData(testData);
|
||||
// idraw.setOnlyRender();
|
||||
|
||||
idraw.scale(2);
|
||||
idraw.selectElementByIndex(1);
|
||||
|
||||
setTimeout(async () => {
|
||||
const pngSrc = await idraw.exportDataURL('image/png');
|
||||
const mount2 = document.querySelector('#mount-2');
|
||||
const imgPNG = new window.Image();
|
||||
imgPNG.src = pngSrc;
|
||||
imgPNG.width = mount2.getBoundingClientRect().width;
|
||||
mount2.appendChild(imgPNG);
|
||||
|
||||
const jpgSrc = await idraw.exportDataURL('image/jpeg');
|
||||
const mount3 = document.querySelector('#mount-3');
|
||||
const imgJPG = new window.Image();
|
||||
imgJPG.src = jpgSrc;
|
||||
imgJPG.width = mount3.getBoundingClientRect().width;
|
||||
mount3.appendChild(imgJPG);
|
||||
|
||||
setTimeout(() => {
|
||||
const pngSrc = idraw.toDataURL('image/png');
|
||||
const mount4 = document.querySelector('#mount-4');
|
||||
const imgPNG = new window.Image();
|
||||
imgPNG.src = pngSrc;
|
||||
imgPNG.width = mount4.getBoundingClientRect().width;
|
||||
mount4.appendChild(imgPNG);
|
||||
|
||||
const jpgSrc = idraw.toDataURL('image/jpeg');
|
||||
const mount5 = document.querySelector('#mount-5');
|
||||
const imgJPG = new window.Image();
|
||||
imgJPG.src = jpgSrc;
|
||||
imgJPG.width = mount5.getBoundingClientRect().width;
|
||||
mount5.appendChild(imgJPG);
|
||||
}, 200);
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div ref="mount"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { iDraw } from 'idraw';
|
||||
import { ref, onMounted } from 'vue'
|
||||
const mount = ref();
|
||||
|
||||
onMounted(() => {
|
||||
const idraw = new iDraw(mount.value, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 1,
|
||||
});
|
||||
idraw.addElement({
|
||||
name: "rect-001",
|
||||
x: 140,
|
||||
y: 120,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
borderColor: "#ff6032",
|
||||
},
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#mount canvas {
|
||||
/* border-right: 1px solid #aaaaaa40; */
|
||||
border: 1px solid #aaaaaa2a;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa2a 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa2a 1px, transparent 0),
|
||||
linear-gradient(#aaaaaa4a 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa4a 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
}
|
||||
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "circle-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "circle",
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderWidth: 2,
|
||||
borderColor: '#999999',
|
||||
|
||||
shadowColor: '#03a9f4',
|
||||
// shadowColor: '#000000',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "circle-002",
|
||||
x: 100,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
type: "circle",
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderWidth: 2,
|
||||
borderColor: '#666666',
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "circle-003",
|
||||
x: 200,
|
||||
y: 200,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "circle",
|
||||
angle: 0,
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderWidth: 2,
|
||||
borderColor: '#666666'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "circle-004",
|
||||
x: 220,
|
||||
y: 80,
|
||||
w: 300,
|
||||
h: 300,
|
||||
type: "circle",
|
||||
desc: {
|
||||
// bgColor: "#f0f0f0",
|
||||
bgColor: "#000000",
|
||||
borderWidth: 10,
|
||||
borderColor: '#666666',
|
||||
|
||||
shadowColor: '#03a9f4',
|
||||
// shadowColor: '#000000',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "html-001",
|
||||
x: 40,
|
||||
y: 40,
|
||||
w: 200,
|
||||
h: 70,
|
||||
type: "html",
|
||||
angle: 0,
|
||||
desc: {
|
||||
html: `
|
||||
<div style="font-size: 20px;color: #666666">
|
||||
<span>Hello World!</span>
|
||||
</div>
|
||||
<script>
|
||||
window.alert('Hello World')
|
||||
console.log('Hello World')
|
||||
</script>
|
||||
<div style="font-size: 30px; font-weight: bold; color: #666666">
|
||||
<span>Hello World!</span>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: "html-001",
|
||||
x: 200,
|
||||
y: 120,
|
||||
w: 240,
|
||||
h: 240,
|
||||
type: "html",
|
||||
angle: 0,
|
||||
desc: {
|
||||
width: 120,
|
||||
height: 80,
|
||||
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" style="margin-top: 0;">
|
||||
<button class="btn" >
|
||||
<span>Button</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-primary">
|
||||
<span>Button Primary</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "image-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "image",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
// angle: 30,
|
||||
// angle: 0,
|
||||
desc: {
|
||||
src: "./../../../core/examples/images/computer.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-002",
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../../../core/examples/images/chart.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-003",
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "image",
|
||||
angle: 45,
|
||||
desc: {
|
||||
src: "./../../../core/examples/images/phone.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-004",
|
||||
x: 400 - 10,
|
||||
y: 300 - 10,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../../../core/examples/images/building-001.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-004",
|
||||
x: 400 - 40,
|
||||
y: 300 - 40,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../../../core/examples/images/building-002.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "image-004",
|
||||
x: 400 - 100,
|
||||
y: 300 - 100,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "image",
|
||||
desc: {
|
||||
src: "./../../../core/examples/images/building-003.png",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import dataRect from "./rect.js";
|
||||
import dataImage from "./image.js";
|
||||
import dataSVG from "./svg.js";
|
||||
import dataText from "./text.js";
|
||||
import dataCircle from "./circle.js";
|
||||
|
||||
const url = new URLSearchParams(window.location.search);
|
||||
|
||||
const dataMap = {
|
||||
rect: dataRect,
|
||||
image: dataImage,
|
||||
svg: dataSVG,
|
||||
text: dataText,
|
||||
circle: dataCircle,
|
||||
};
|
||||
|
||||
export function getData() {
|
||||
return dataMap[getPageName()] || dataMap[url.get("data")] || dataMap["rect"];
|
||||
}
|
||||
|
||||
function getPageName() {
|
||||
// const pathname = window.location.pathname || '';
|
||||
// const reg = /(?<pageName>[\w+]{1,})\.html$/;
|
||||
// const page = reg.exec(pathname)?.groups?.pageName || '';
|
||||
// return page;
|
||||
|
||||
const pathname = window.location.pathname || "";
|
||||
const list = pathname.split("/");
|
||||
let pageName = list.pop() || "";
|
||||
pageName = pageName.replace(/\.html$/gi, "");
|
||||
return pageName;
|
||||
|
||||
// return getQueryString('data') || 'rect';
|
||||
}
|
||||
|
||||
// function getQueryString(name) {
|
||||
// let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// let r = window.location.search.substr(1).match(reg);
|
||||
// if (r != null) {
|
||||
// return decodeURIComponent(r[2]);
|
||||
// };
|
||||
// return null;
|
||||
// }
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#f0f0f0',
|
||||
elements: [
|
||||
{
|
||||
name: "rect-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rect-002",
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
type: "rect",
|
||||
operation: {
|
||||
lock: true,
|
||||
},
|
||||
desc: {
|
||||
bgColor: "#cccccc",
|
||||
borderRadius: 60,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rect-003",
|
||||
x: 250,
|
||||
y: 150,
|
||||
w: 150,
|
||||
h: 20,
|
||||
type: "rect",
|
||||
angle: 45,
|
||||
desc: {
|
||||
bgColor: "#c0c0c0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rect-004",
|
||||
x: 400 - 50,
|
||||
y: 300 - 50,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
bgColor: "#e0e0e0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: "#bd0b64",
|
||||
},
|
||||
operation: {
|
||||
disbaleScale: true,
|
||||
disbaleRotate: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "svg-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "svg",
|
||||
// angle: 30,
|
||||
// angle: 0,
|
||||
desc: {
|
||||
svg: `<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>`,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "svg-002",
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 200,
|
||||
h: 120,
|
||||
// angle: 30,
|
||||
type: "svg",
|
||||
desc: {
|
||||
svg: '<svg t="1622524813445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8606" width="200" height="200"><path d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185z m174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312z m276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z" p-id="8607" fill="#2aa515"></path></svg>',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "svg-003",
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 200,
|
||||
type: "svg",
|
||||
angle: 80,
|
||||
desc: {
|
||||
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "svg-004",
|
||||
x: 400 - 10,
|
||||
y: 300 - 100,
|
||||
w: 200,
|
||||
h: 200,
|
||||
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 default data;
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
const data = {
|
||||
// bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "text-001",
|
||||
x: 10,
|
||||
y: 10,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: "#ffffff",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: '',
|
||||
fontWeight: 'bold',
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: "#03a9f4",
|
||||
bgColor: '#f0f0f0',
|
||||
strokeColor: '#2196f3',
|
||||
strokeWidth: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "text-002",
|
||||
x: 120,
|
||||
y: 120,
|
||||
w: 100,
|
||||
h: 60,
|
||||
// angle: 30,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 40,
|
||||
fontWeight: 'blod',
|
||||
text: "Hello Text",
|
||||
// color: "#999999",
|
||||
color: "#ffffff",
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#03a9f4",
|
||||
|
||||
textShadowColor: '#000000',
|
||||
textShadowOffsetX: 2,
|
||||
textShadowOffsetY: 2,
|
||||
textShadowBlur: 2,
|
||||
|
||||
shadowColor: '#000000',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "text-003",
|
||||
x: 160,
|
||||
y: 160,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: "text",
|
||||
operation: {
|
||||
invisible: true,
|
||||
lock: true,
|
||||
},
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: "#333333",
|
||||
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
||||
fontFamily: "",
|
||||
textAlign: "right",
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: "#03a9f4",
|
||||
bgColor: '#f0f0f0',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "text-004",
|
||||
x: 300,
|
||||
y: 240,
|
||||
w: 290,
|
||||
h: 120,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: "#333333",
|
||||
text: "Life is like an ocean.\r\nOnly those with strong \nwill can reach the other shore.",
|
||||
fontFamily: "",
|
||||
textAlign: "right",
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: "#03a9f4",
|
||||
bgColor: '#f0f0f0',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { getData } from './data/index.js';
|
||||
// import util from './../../../node_modules/@idraw/util/dist/index.es.js'
|
||||
// import util from './../../../../util/dist/index.es.js'
|
||||
|
||||
// const Context = util.Context;
|
||||
const Context = iDrawUtil.Context;
|
||||
const { Renderer } = window.iDrawRenderer;
|
||||
const data = getData();
|
||||
const canvas = document.querySelector('#canvas');
|
||||
const opts = {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 1,
|
||||
// devicePixelRatio: 2,
|
||||
// onlyRender: true,
|
||||
}
|
||||
|
||||
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(ctx, data);
|
||||
renderer.render(ctx, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
|
||||
|
||||
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="mount">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<script src="../../../packages/util/dist/index.global.js"></script>
|
||||
<script src="../../../packages/renderer/dist/index.global.js"></script>
|
||||
<script type="module" src="./lib/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue