mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 01:58:27 +00:00
fix: can update elements at onlyRender status
This commit is contained in:
chenshenhai
parent
a03c9dc127
commit
3ee0f82480
3 changed files with 122 additions and 99 deletions
117
packages/core/examples/test/api.html
Normal file
117
packages/core/examples/test/api.html
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<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">Options Common</div>
|
||||
</div>
|
||||
<div class="box" id="mount-2">
|
||||
<div class="title">Options onlyRender</div>
|
||||
</div>
|
||||
<div class="box" id="mount-3">
|
||||
<div class="title">Config</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script>
|
||||
var Core = window.iDrawCore;
|
||||
var opts = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 300,
|
||||
contextHeight: 200,
|
||||
devicePixelRatio: 4,
|
||||
}
|
||||
var config = {
|
||||
elementWrapper: {
|
||||
dotSize: 4,
|
||||
},
|
||||
};
|
||||
var elemText = {
|
||||
name: "text-001",
|
||||
x: 20,
|
||||
y: 40,
|
||||
w: 200,
|
||||
h: 80,
|
||||
type: "text",
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
color: "#3f51b5",
|
||||
text: "Life is like an ocean.\r\nOnly those with strong will can reach the other shore",
|
||||
fontFamily: 'monospace',
|
||||
borderRadius: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: "#2196f3",
|
||||
bgColor: '#c6e0f5',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script type="module">
|
||||
import event from './../../../../scripts/browser/event.js';
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-1');
|
||||
const core = new Core(mount, opts, config);
|
||||
core.addElement(elemText);
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 100, y: 100 })
|
||||
}, 20);
|
||||
})();
|
||||
</script>
|
||||
<script type="module">
|
||||
import event from './../../../../scripts/browser/event.js';
|
||||
(function() {
|
||||
const mount = document.querySelector('#mount-2');
|
||||
const core = new Core(mount, Object.assign(opts, {
|
||||
onlyRender: true,
|
||||
}), config);
|
||||
core.addElement(elemText);
|
||||
setTimeout(() => {
|
||||
event.mouseDown({ x: 400, y: 100 })
|
||||
}, 20);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,94 +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; }
|
||||
#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;
|
||||
}
|
||||
|
||||
#button {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
<div id="button">Button</div>
|
||||
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import data from './../features/lib/data/rect.js';
|
||||
const Core = window.iDrawCore;
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.setData(data);
|
||||
|
||||
|
||||
|
||||
//--------------------
|
||||
const $btn = document.querySelector('#button');
|
||||
$btn.addEventListener('mousedown', (e) => {
|
||||
console.log('btn mousedown: ', e);
|
||||
})
|
||||
$btn.addEventListener('mouseup', (e) => {
|
||||
console.log('btn mouseup: ', e);
|
||||
})
|
||||
|
||||
|
||||
// const x = 50;
|
||||
// const y = 420;
|
||||
|
||||
const x = 10;
|
||||
const y = 10;
|
||||
|
||||
function mouseDown(x,y){
|
||||
var event = new MouseEvent('mousedown', {
|
||||
screenX: x,
|
||||
screenY: y,
|
||||
clientX: x,
|
||||
clientY: y,
|
||||
});
|
||||
var elem = document.elementFromPoint(x,y);
|
||||
console.log('elem =', elem);
|
||||
elem.dispatchEvent(event);
|
||||
}
|
||||
function mouseUp(x,y){
|
||||
var event = new MouseEvent('mouseup', {
|
||||
screenX: x,
|
||||
screenY: y,
|
||||
clientX: x,
|
||||
clientY: y,
|
||||
});
|
||||
var elem = document.elementFromPoint(x,y);
|
||||
console.log('elem =', elem);
|
||||
elem.dispatchEvent(event);
|
||||
}
|
||||
setTimeout(() => {
|
||||
mouseDown(x, y)
|
||||
setTimeout(() => {
|
||||
mouseUp(x, y)
|
||||
}, 100)
|
||||
}, 1000)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -124,7 +124,7 @@ class Core {
|
|||
}
|
||||
|
||||
moveUpElement(uuid: string): void {
|
||||
if (this[_onlyRender] === true) return;
|
||||
// if (this[_onlyRender] === true) return;
|
||||
const index = this[_helper].getElementIndexByUUID(uuid);
|
||||
if (typeof index === 'number' && index >= 0 && index < this[_data].elements.length - 1) {
|
||||
const temp = this[_data].elements[index];
|
||||
|
|
@ -136,7 +136,7 @@ class Core {
|
|||
}
|
||||
|
||||
moveDownElement(uuid: string): void {
|
||||
if (this[_onlyRender] === true) return;
|
||||
// if (this[_onlyRender] === true) return;
|
||||
const index = this[_helper].getElementIndexByUUID(uuid);
|
||||
if (typeof index === 'number' && index > 0 && index < this[_data].elements.length) {
|
||||
const temp = this[_data].elements[index];
|
||||
|
|
@ -190,7 +190,7 @@ class Core {
|
|||
}
|
||||
|
||||
updateElement(elem: TypeElement<keyof TypeElemDesc>) {
|
||||
if (this[_onlyRender] === true) return;
|
||||
// if (this[_onlyRender] === true) return;
|
||||
const _elem = deepClone(elem) as TypeElement<keyof TypeElemDesc>;
|
||||
const data = this[_data];
|
||||
for (let i = 0; i < data.elements.length; i++) {
|
||||
|
|
@ -204,7 +204,7 @@ class Core {
|
|||
}
|
||||
|
||||
addElement(elem: TypeElementBase<keyof TypeElemDesc>): string | null {
|
||||
if (this[_onlyRender] === true) return null;
|
||||
// if (this[_onlyRender] === true) return null;
|
||||
const _elem = deepClone(elem);
|
||||
_elem.uuid = createUUID();
|
||||
this[_data].elements.push(_elem);
|
||||
|
|
@ -214,7 +214,7 @@ class Core {
|
|||
}
|
||||
|
||||
deleteElement(uuid: string) {
|
||||
if (this[_onlyRender] === true) return;
|
||||
// if (this[_onlyRender] === true) return;
|
||||
const index = this[_element].getElementIndex(this[_data], uuid);
|
||||
if (index >= 0) {
|
||||
this[_data].elements.splice(index, 1);
|
||||
|
|
|
|||
Loading…
Reference in a new issue