2021-08-15 14:33:49 +00:00
|
|
|
<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;
|
2021-08-16 03:41:15 +00:00
|
|
|
min-height: 242;
|
2021-08-15 14:33:49 +00:00
|
|
|
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">
|
2021-08-16 02:58:15 +00:00
|
|
|
<div class="box" id="idraw-opts">
|
2021-08-15 14:33:49 +00:00
|
|
|
<div class="title">Options Common</div>
|
|
|
|
|
</div>
|
2021-08-16 02:58:15 +00:00
|
|
|
<div class="box" id="idraw-opts-onlyRender">
|
2021-08-15 14:33:49 +00:00
|
|
|
<div class="title">Options onlyRender</div>
|
|
|
|
|
</div>
|
2021-08-16 02:58:15 +00:00
|
|
|
<div class="box" id="idraw-config">
|
2021-08-15 14:33:49 +00:00
|
|
|
<div class="title">Config</div>
|
|
|
|
|
</div>
|
2021-08-16 02:58:15 +00:00
|
|
|
<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>
|
2021-08-16 03:41:15 +00:00
|
|
|
<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>
|
2021-08-25 13:44:53 +00:00
|
|
|
<div class="box" id="idraw-api-clearOperation">
|
|
|
|
|
<div class="title">idraw.clearOperation</div>
|
|
|
|
|
</div>
|
2021-09-06 08:22:16 +00:00
|
|
|
<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>
|
2021-08-15 14:33:49 +00:00
|
|
|
</div>
|
|
|
|
|
|
2022-04-28 15:46:07 +00:00
|
|
|
<script src="../../../packages/core/dist/index.global.js"></script>
|
2022-01-03 09:31:28 +00:00
|
|
|
<script type="module">
|
2022-04-28 15:46:07 +00:00
|
|
|
import event from '../../../scripts/browser/event.js';
|
2022-01-03 09:31:28 +00:00
|
|
|
import { getData } from './data.js';
|
|
|
|
|
window.event = event;
|
|
|
|
|
window.getData = getData;
|
2022-01-03 09:39:01 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
2023-02-12 06:01:56 +00:00
|
|
|
const Core = window.iDrawCore;
|
2021-08-15 14:33:49 +00:00
|
|
|
var opts = {
|
|
|
|
|
width: 300,
|
|
|
|
|
height: 200,
|
|
|
|
|
contextWidth: 300,
|
|
|
|
|
contextHeight: 200,
|
|
|
|
|
devicePixelRatio: 4,
|
|
|
|
|
}
|
|
|
|
|
var config = {
|
|
|
|
|
elementWrapper: {
|
2021-10-24 07:35:12 +00:00
|
|
|
controllerSize: 4,
|
2021-08-15 14:33:49 +00:00
|
|
|
},
|
|
|
|
|
};
|
2021-08-15 15:28:32 +00:00
|
|
|
var elemText1 = {
|
2021-08-15 14:33:49 +00:00
|
|
|
name: "text-001",
|
|
|
|
|
x: 20,
|
|
|
|
|
y: 40,
|
2021-08-20 03:45:54 +00:00
|
|
|
w: 240,
|
2021-08-15 14:33:49 +00:00
|
|
|
h: 80,
|
|
|
|
|
type: "text",
|
|
|
|
|
desc: {
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
color: "#3f51b5",
|
2021-08-20 03:45:54 +00:00
|
|
|
text: "Life is like an ocean.\r\nOnly those with strong \nwill can reach \nthe other shore",
|
2021-08-15 14:33:49 +00:00
|
|
|
fontFamily: 'monospace',
|
2021-08-20 03:45:54 +00:00
|
|
|
fontWeight: 'bold',
|
|
|
|
|
textAlign: 'left',
|
2021-08-15 14:33:49 +00:00
|
|
|
borderRadius: 8,
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
borderColor: "#2196f3",
|
|
|
|
|
bgColor: '#c6e0f5',
|
|
|
|
|
},
|
|
|
|
|
};
|
2021-08-15 15:28:32 +00:00
|
|
|
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',
|
|
|
|
|
},
|
|
|
|
|
};
|
2021-08-15 14:33:49 +00:00
|
|
|
</script>
|
|
|
|
|
<script type="module">
|
2021-08-16 02:58:15 +00:00
|
|
|
// Options Common
|
2021-08-15 14:33:49 +00:00
|
|
|
(function() {
|
2021-08-16 02:58:15 +00:00
|
|
|
const mount = document.querySelector('#idraw-opts');
|
2021-08-15 14:33:49 +00:00
|
|
|
const core = new Core(mount, opts, config);
|
2021-08-15 15:28:32 +00:00
|
|
|
core.addElement(elemText1);
|
2021-08-15 14:33:49 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
|
event.mouseDown({ x: 100, y: 100 })
|
|
|
|
|
}, 20);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
<script type="module">
|
2021-08-16 02:58:15 +00:00
|
|
|
// Options onlyRender
|
2021-08-15 14:33:49 +00:00
|
|
|
(function() {
|
2021-08-16 02:58:15 +00:00
|
|
|
const mount = document.querySelector('#idraw-opts-onlyRender');
|
2021-08-15 15:28:32 +00:00
|
|
|
const core = new Core(mount, Object.assign({}, opts, {
|
2021-08-15 14:33:49 +00:00
|
|
|
onlyRender: true,
|
|
|
|
|
}), config);
|
2021-08-15 15:28:32 +00:00
|
|
|
core.addElement(elemText1);
|
2021-08-15 14:33:49 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
|
event.mouseDown({ x: 400, y: 100 })
|
|
|
|
|
}, 20);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
2021-08-15 15:28:32 +00:00
|
|
|
<script type="module">
|
2021-08-16 02:58:15 +00:00
|
|
|
// Config
|
2021-08-15 15:28:32 +00:00
|
|
|
(function() {
|
2021-08-16 02:58:15 +00:00
|
|
|
const mount = document.querySelector('#idraw-config');
|
|
|
|
|
const core = new Core(mount,
|
2021-08-15 15:28:32 +00:00
|
|
|
Object.assign({}, opts, {
|
2021-08-16 03:41:15 +00:00
|
|
|
contextWidth: 500,
|
|
|
|
|
contextHeight: 400,
|
2021-08-15 15:28:32 +00:00
|
|
|
}),
|
|
|
|
|
{
|
|
|
|
|
scrollWrapper: {
|
|
|
|
|
use: true,
|
|
|
|
|
lineWidth: 4,
|
|
|
|
|
color: '#3f51b5',
|
|
|
|
|
},
|
|
|
|
|
elementWrapper: {
|
|
|
|
|
color: '#e91e63',
|
2021-10-24 07:35:12 +00:00
|
|
|
controllerSize: 4,
|
2021-08-15 15:28:32 +00:00
|
|
|
lineWidth: 1,
|
|
|
|
|
lineDash: [12, 12],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
core.addElement(elemText2);
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
event.mouseDown({ x: 700, y: 100 })
|
|
|
|
|
}, 20);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
2021-08-15 14:33:49 +00:00
|
|
|
|
2021-08-16 02:58:15 +00:00
|
|
|
<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, {
|
2021-08-16 03:41:15 +00:00
|
|
|
contextWidth: 500,
|
|
|
|
|
contextHeight: 400,
|
2021-08-16 02:58:15 +00:00
|
|
|
}),
|
|
|
|
|
{
|
|
|
|
|
scrollWrapper: {
|
|
|
|
|
use: true,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
core.setData(data);
|
2021-08-25 13:44:53 +00:00
|
|
|
// setTimeout(() => {
|
|
|
|
|
// event.mouseDown({ x: 100, y: 400 })
|
|
|
|
|
// }, 20);
|
2021-08-16 02:58:15 +00:00
|
|
|
})();
|
|
|
|
|
</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, {
|
2021-08-16 03:41:15 +00:00
|
|
|
contextWidth: 500,
|
|
|
|
|
contextHeight: 400,
|
2021-08-16 02:58:15 +00:00
|
|
|
}),
|
|
|
|
|
{
|
|
|
|
|
scrollWrapper: {
|
|
|
|
|
use: true,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
core.setData(data);
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
core.resetSize({
|
|
|
|
|
width: 280,
|
|
|
|
|
height: 160,
|
|
|
|
|
contextWidth: 600,
|
2021-08-16 03:41:15 +00:00
|
|
|
contextHeight: 400,
|
2021-08-16 02:58:15 +00:00
|
|
|
})
|
|
|
|
|
}, 20)
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
// idraw-api-selectElement
|
|
|
|
|
(function() {
|
2021-08-16 03:41:15 +00:00
|
|
|
const mount = document.querySelector('#idraw-api-selectElement');
|
2021-08-16 02:58:15 +00:00
|
|
|
const data = getData();
|
|
|
|
|
const core = new Core(
|
|
|
|
|
mount,
|
|
|
|
|
Object.assign({}, opts, {
|
2021-08-16 03:41:15 +00:00
|
|
|
contextWidth: 500,
|
|
|
|
|
contextHeight: 400,
|
2021-08-16 02:58:15 +00:00
|
|
|
}),
|
|
|
|
|
{
|
|
|
|
|
scrollWrapper: {
|
|
|
|
|
use: true,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
core.setData(data);
|
2021-08-16 03:41:15 +00:00
|
|
|
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: {
|
2021-09-08 01:16:00 +00:00
|
|
|
bgColor: "#8bc34a",
|
2021-08-16 03:41:15 +00:00
|
|
|
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);
|
2021-08-16 02:58:15 +00:00
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
2021-08-16 03:41:15 +00:00
|
|
|
<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>
|
2021-08-25 13:44:53 +00:00
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
2021-09-06 08:22:16 +00:00
|
|
|
<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>
|
|
|
|
|
|
2021-08-25 13:44:53 +00:00
|
|
|
|
2021-08-15 14:33:49 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
